网页制作简介
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
4、常见浏览器介绍
浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷
歌（Chrome）、Safari和Opera等。
【任务1-2】知识点讲解
4、常见浏览器介绍
不同的浏览器对同一个CSS样式有不同的解析，这样，同样的页面在 不同浏览器下的显示效果可能不同。
【任务1-2】知识点讲解
【任务1-2】知识点讲解
1、HTML简介
目前最新的HTML版本是HTML5，但是各个浏览器对其支持不
统一，所以如今大多数的网站采用的还是HTML4.01版本。 XML虽然数据转换能力强大，完全可以替代HTML，但是面对
互联网上成千上万基于HTML编写的网站，直接采用XML还为时过
早。因此，在HTML4.0的基础上，用XML的语法规则对其进行扩展， 得到了XHTML。
【任务1-2】知识点讲解
1、HTML简介
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本
标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容 进行描述。 HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片
标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。 HTML之所以称为超文本标记语言，不仅是因为它通过标记描述网页
除非网页源代码被重新修改上传。 动态网页显示的内容则会随着用户操作和时间的不同而变化。
大部分网站都由静态网页和动态网页混合组成，两者各有千秋，用
户在开发网站时可根据需求酌情采用。
【任务1-1】了解Web基本概念
2、网页名词解释
与互联网相关的一些专业术语
名词 Internet网络 WWW URL DNS HTTP 名词释义 就是通常所说的互联网，是由一些使用公用语言互相通信的计算机 连接而成的网络。 WWW（英文World Wide Web的缩写）中文译为“万维网”是 Intertnet提供的一种网页浏览服务。 URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定 位符” URL其实就是Web地址，俗称“网址”。 DNS （英文Domain Name System的缩写）是域名解析系统。 HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输协 议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。 Web通常指互联网的使用环境。但对于网站制作者来说，它是一系 列技术的复合总称，通常称之为网页。 W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联 盟”。万维网联盟是国际最著名的标准化组织。
HTML语言发展至今，经历了
6个版本：
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小 组（IETF）工作草案发布。 HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月 发布之后被宣布已经过时。 HTML 3.2——1997年1月14日，W3C推荐标准。 HTML 4.0——1997年12月18日，W3C推荐标准。 HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准。 HTML5.0——2014年10月29日最终制定完成，并公开发布。
第一章 网页那点事
HTML
· 认识网页
· HTML、CSS和JS语言简介
· 了解Web标准 · Dreamweaver工具的使用
目录
【任务1-1】
了解Web基本概念
【任务1-2】
网页制作入门
【任务1-3】
Dreamweaver工具的使用
【任务1-1】了解Web基本概念
知识引入
Web中文译为“网页”，说到网页，其
【任务1-3】Dreamweaver工具的使用
知识引入
网页制作过程中，为了开发方便，通常
需求分析
我们会选择一些较便捷的工具，如
Editplus、notepad++、sublime、 Dreamweaver等。实际工作中，最常用的 网页制作工具是Dreamweaver，本书中的 案例将全部使用Dreamweaver工具编写。 下面，本节将详细介绍Dreamweaver工具 的使用。
CSS样式需要写 在 <style>标记 内，位于 <head> 头部标记中。 HTML 内容需要写在 <body>标记内
4、常见浏览器介绍
IE浏览器由微软公司推出，有6.0、7.0、8.0、9.0、10.0等版本，最新的是 IE10.0。在制作网页时，低版本一般也是需要兼容的。 Mozilla Firefox，中文通常称为“火狐”，Firebug是火狐浏览器下的一款开发 插件，是开发HTML、CSS、JavaScript等的得力助手。在实际网页制作过程中火狐 浏览器是最常用的浏览器。 Google Chrome，又称谷歌浏览器，是由Google（谷歌）公司开发的开放原 始码网页浏览器。
目前国际上，网站设计推崇的Web标准就是基于XHTML的
（即通常所说的DIV+CSS）。
【任务1-2】知识点讲解
2、CSS简介
CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内
容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距 等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制
查询信息
浏览新闻
说到网页，其 实大家并不陌生
网上购物
网页究竟是什么？
【任务1-1】知识点讲解
1、认识网页
以河南农业大学官网为例认识网页：
超链接
图片
文字
【任务1-1】了解Web基本概念
1、认识网页
网页主要由文字、图像和超链接等
元素构成。当然，除了这些元素，网页中
还可以包含音频、视频以及Flash等。
需求分析
的基本应用技术，也是本书学习的重点，要
想学好这些技术，首先需要对它们有一个整 体的认识。下面，将针对HTML、CSS和 JavaScript语言的发展历史、流行版本、开 发工具、运行平台等内容进行详细讲解。
【任务1-2】知识储备
知识引入
HTML简介 CSS简介 JavaScript简介 常见浏览器介绍
及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
【任务1-2】知识点讲解
2、CSS简介
使用CSS设置的网页效果：
【任务1-2】知识点讲解
2、CSS简介
CSS语言的发展历程：
1996年12月W3C发布了第一个有关样式的标准CSS1。 1998年5月发布了CSS2。 目前最新的版本是CSS3，但是各个浏览器对它的支持不统 一，所以流行的版本仍然是CSS2，即本书所讲解的版本。
内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将 网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。
【任务1-2】知识点讲解
1、HTML简介
通过网站的一段源代码和相应的网页结构来认识
HTML
段落和超链接标记 . 图片标记
超链接标记
【任务1-2】知识点讲解
1、HTML简介
Web
W3C组织
【任务1-1】了解Web基本概念
3、web标准
为什么需要Web标准？
【任务1-1】了解Web基本概念
3、web标准 Web标准的好处
1、提高页面浏览速度。使用CSS方法，比传统的web设计方法至少
节约50%以上的文件尺寸。 2、缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分 离。只要简单的修改几个CSS文件就可以重新设计一个有成千上 万页面的站点。 3、降低网站流量的费用。带宽要求降低（代码更简洁），成本降低。 4、更容易被搜寻引擎搜索到。提高网站在百度或google中的排名。 5、内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、搜
【任务1-2】知识点讲解
3、JavaScript简介
JavaScript代码可以嵌入在HTML中，也可以创建.js外部文件。通 过JavaScrit可以实现网页中常见的下拉菜单、TAB栏、焦点图轮播等动 态效果。 下图所示的“TAB栏”就是通过JavaScript实现的。
【任务1-2】知识点讲解
【任务1-1】知识点讲解
3、web标准
XHTML语言描述的网页结构效果
三个图片和对应的三段描 述文本从上到下依次罗 列，不带任何修饰样式。
【任务1-1】知识点讲解
3、web标准
加入CSS后的网页效果
使用CSS对文字和图片以 及模块的背景和布局都做 了相应的设置。
【任务1-1】知识点讲解
3、web标准
【任务1-2】知识点讲解
3、JavaScript简介
JavaScript是Web页面中的一种脚本语言，通过JavaScript
可以将静态页面转变成支持用户交互并响应相应事件的动态 页面。
在网站建设中，HTML用于搭建页面结构，CSS用于设置
页面样式，而JavaScript则用于为页面添加动态效果。
【任务1-3】知识点讲解
1、Dreamweaver界面介绍
操作界面：
菜单栏 插入栏 文档工具栏
文档窗口
常用面板
属性面板
【任务1-3】知识点讲解
2、Dreamweaver初始化设置 – – – – – 工作区布局 必备面板 新建默认文档设置 代码提示 浏览器设置
【任务1-3】知识点讲解
3、创建第一个网页
索机器人、打印机、电冰箱等等。
【任务1-1】了解Web基本概念
3、web标准
集合，主要包括
Web标准并不是某一个标准，而是一系列标准的
结构（Structure）、表现（Presentation） 和行为（Behavior）三个方面。
【任务1-1】知识点讲解
3、web标准
结构标准：结构用于对网页元素进行整理和分 类，主要包括XML和XHTML两个部分。 表现标准：表现用于设置网页元素的版式、颜 色、大小等外观样式，主要指的是CSS。 行为标准：行为是指网页模型的定义及交互的 编写，主要包括DOM和ECMAScript两个部分。
需求分析
实大家并不陌生，上网时浏览新闻、查询信
息、翻看图片等都是在浏览网页。但是，对 于初学者来说，学习网页制作首先需要了解 与网页相关的基本概念。下面，本节将针对 与Web相关的概念进行详细讲解。
【任务1-1】知识储备
知识引入
认识网页 网页相关名词 Web标准
【任务1Baidu Nhomakorabea1】了解Web基本概念
1、认识网页
加入Javascript后的网页效果
左边的三张焦点图会自动切换，当鼠 标移上右边的文本时，左边会出现相 应的图片，鼠标移开后又会按照默认
的设置自动轮播。
【任务1-1】知识点讲解
3、web标准
结构、表现、行为之间的关系
【任务1-2】网页制作入门
知识引入
HTML、CSS和JavaScript是网页制作
【任务1-1】了解Web基本概念
1、认识网页
网页是如何形成的呢？
浏览器渲染
图文并茂的页面
特殊的符号和文本
【任务1-1】了解Web基本概念
1、认识网页
除了首页之外，一个网站通常还包含多个子页面。网页与网页之间
通过超链接互相访问。 网站由网页构成，网页有静态和动态之分。
静态网页是指用户无论何时何地访问，网页都会显示固定的信息，
【任务1-3】知识储备
Dreamweaver界面介绍
知识引入
Dreamweaver初始化设置 创建第一个网页
【任务1-3】知识点讲解
1、Dreamweaver界面介绍
工作区布局：
【任务1-3】知识点讲解
1、Dreamweaver界面介绍
新建HTML文档： 选择菜单栏中的【文件】→【新建】选项， 会出现“新建文档”窗口。这时，在文档类 型下拉选项中选择XHTML 1.0 Transitional ，点击【创建】按钮，即可创建一个空白的 HTML文档。
【任务1-2】知识点讲解
2、CSS简介
CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件， 如果是独立的文件，则必须以.css为后缀名。 • 。
• CSS采用的是内嵌方式，虽然与HTML在同一 个文件中，但CSS集中写在HTML文档的头 部，也是符合结构与表现相分离的。 • 如今大多数网页都是遵循Web标准开发的，即 用HTML编写网页结构和内容，而相关版面布 局、文本或图片的显示样式都使用CSS控制。
浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷
歌（Chrome）、Safari和Opera等。
【任务1-2】知识点讲解
4、常见浏览器介绍
不同的浏览器对同一个CSS样式有不同的解析，这样，同样的页面在 不同浏览器下的显示效果可能不同。
【任务1-2】知识点讲解
【任务1-2】知识点讲解
1、HTML简介
目前最新的HTML版本是HTML5，但是各个浏览器对其支持不
统一，所以如今大多数的网站采用的还是HTML4.01版本。 XML虽然数据转换能力强大，完全可以替代HTML，但是面对
互联网上成千上万基于HTML编写的网站，直接采用XML还为时过
早。因此，在HTML4.0的基础上，用XML的语法规则对其进行扩展， 得到了XHTML。
【任务1-2】知识点讲解
1、HTML简介
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本
标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容 进行描述。 HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片
标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。 HTML之所以称为超文本标记语言，不仅是因为它通过标记描述网页
除非网页源代码被重新修改上传。 动态网页显示的内容则会随着用户操作和时间的不同而变化。
大部分网站都由静态网页和动态网页混合组成，两者各有千秋，用
户在开发网站时可根据需求酌情采用。
【任务1-1】了解Web基本概念
2、网页名词解释
与互联网相关的一些专业术语
名词 Internet网络 WWW URL DNS HTTP 名词释义 就是通常所说的互联网，是由一些使用公用语言互相通信的计算机 连接而成的网络。 WWW（英文World Wide Web的缩写）中文译为“万维网”是 Intertnet提供的一种网页浏览服务。 URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定 位符” URL其实就是Web地址，俗称“网址”。 DNS （英文Domain Name System的缩写）是域名解析系统。 HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输协 议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。 Web通常指互联网的使用环境。但对于网站制作者来说，它是一系 列技术的复合总称，通常称之为网页。 W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联 盟”。万维网联盟是国际最著名的标准化组织。
HTML语言发展至今，经历了
6个版本：
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小 组（IETF）工作草案发布。 HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月 发布之后被宣布已经过时。 HTML 3.2——1997年1月14日，W3C推荐标准。 HTML 4.0——1997年12月18日，W3C推荐标准。 HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准。 HTML5.0——2014年10月29日最终制定完成，并公开发布。
第一章 网页那点事
HTML
· 认识网页
· HTML、CSS和JS语言简介
· 了解Web标准 · Dreamweaver工具的使用
目录
【任务1-1】
了解Web基本概念
【任务1-2】
网页制作入门
【任务1-3】
Dreamweaver工具的使用
【任务1-1】了解Web基本概念
知识引入
Web中文译为“网页”，说到网页，其
【任务1-3】Dreamweaver工具的使用
知识引入
网页制作过程中，为了开发方便，通常
需求分析
我们会选择一些较便捷的工具，如
Editplus、notepad++、sublime、 Dreamweaver等。实际工作中，最常用的 网页制作工具是Dreamweaver，本书中的 案例将全部使用Dreamweaver工具编写。 下面，本节将详细介绍Dreamweaver工具 的使用。
CSS样式需要写 在 <style>标记 内，位于 <head> 头部标记中。 HTML 内容需要写在 <body>标记内
4、常见浏览器介绍
IE浏览器由微软公司推出，有6.0、7.0、8.0、9.0、10.0等版本，最新的是 IE10.0。在制作网页时，低版本一般也是需要兼容的。 Mozilla Firefox，中文通常称为“火狐”，Firebug是火狐浏览器下的一款开发 插件，是开发HTML、CSS、JavaScript等的得力助手。在实际网页制作过程中火狐 浏览器是最常用的浏览器。 Google Chrome，又称谷歌浏览器，是由Google（谷歌）公司开发的开放原 始码网页浏览器。
目前国际上，网站设计推崇的Web标准就是基于XHTML的
（即通常所说的DIV+CSS）。
【任务1-2】知识点讲解
2、CSS简介
CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内
容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距 等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制
查询信息
浏览新闻
说到网页，其 实大家并不陌生
网上购物
网页究竟是什么？
【任务1-1】知识点讲解
1、认识网页
以河南农业大学官网为例认识网页：
超链接
图片
文字
【任务1-1】了解Web基本概念
1、认识网页
网页主要由文字、图像和超链接等
元素构成。当然，除了这些元素，网页中
还可以包含音频、视频以及Flash等。
需求分析
的基本应用技术，也是本书学习的重点，要
想学好这些技术，首先需要对它们有一个整 体的认识。下面，将针对HTML、CSS和 JavaScript语言的发展历史、流行版本、开 发工具、运行平台等内容进行详细讲解。
【任务1-2】知识储备
知识引入
HTML简介 CSS简介 JavaScript简介 常见浏览器介绍
及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
【任务1-2】知识点讲解
2、CSS简介
使用CSS设置的网页效果：
【任务1-2】知识点讲解
2、CSS简介
CSS语言的发展历程：
1996年12月W3C发布了第一个有关样式的标准CSS1。 1998年5月发布了CSS2。 目前最新的版本是CSS3，但是各个浏览器对它的支持不统 一，所以流行的版本仍然是CSS2，即本书所讲解的版本。
内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将 网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。
【任务1-2】知识点讲解
1、HTML简介
通过网站的一段源代码和相应的网页结构来认识
HTML
段落和超链接标记 . 图片标记
超链接标记
【任务1-2】知识点讲解
1、HTML简介
Web
W3C组织
【任务1-1】了解Web基本概念
3、web标准
为什么需要Web标准？
【任务1-1】了解Web基本概念
3、web标准 Web标准的好处
1、提高页面浏览速度。使用CSS方法，比传统的web设计方法至少
节约50%以上的文件尺寸。 2、缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分 离。只要简单的修改几个CSS文件就可以重新设计一个有成千上 万页面的站点。 3、降低网站流量的费用。带宽要求降低（代码更简洁），成本降低。 4、更容易被搜寻引擎搜索到。提高网站在百度或google中的排名。 5、内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、搜
【任务1-2】知识点讲解
3、JavaScript简介
JavaScript代码可以嵌入在HTML中，也可以创建.js外部文件。通 过JavaScrit可以实现网页中常见的下拉菜单、TAB栏、焦点图轮播等动 态效果。 下图所示的“TAB栏”就是通过JavaScript实现的。
【任务1-2】知识点讲解
【任务1-1】知识点讲解
3、web标准
XHTML语言描述的网页结构效果
三个图片和对应的三段描 述文本从上到下依次罗 列，不带任何修饰样式。
【任务1-1】知识点讲解
3、web标准
加入CSS后的网页效果
使用CSS对文字和图片以 及模块的背景和布局都做 了相应的设置。
【任务1-1】知识点讲解
3、web标准
【任务1-2】知识点讲解
3、JavaScript简介
JavaScript是Web页面中的一种脚本语言，通过JavaScript
可以将静态页面转变成支持用户交互并响应相应事件的动态 页面。
在网站建设中，HTML用于搭建页面结构，CSS用于设置
页面样式，而JavaScript则用于为页面添加动态效果。
【任务1-3】知识点讲解
1、Dreamweaver界面介绍
操作界面：
菜单栏 插入栏 文档工具栏
文档窗口
常用面板
属性面板
【任务1-3】知识点讲解
2、Dreamweaver初始化设置 – – – – – 工作区布局 必备面板 新建默认文档设置 代码提示 浏览器设置
【任务1-3】知识点讲解
3、创建第一个网页
索机器人、打印机、电冰箱等等。
【任务1-1】了解Web基本概念
3、web标准
集合，主要包括
Web标准并不是某一个标准，而是一系列标准的
结构（Structure）、表现（Presentation） 和行为（Behavior）三个方面。
【任务1-1】知识点讲解
3、web标准
结构标准：结构用于对网页元素进行整理和分 类，主要包括XML和XHTML两个部分。 表现标准：表现用于设置网页元素的版式、颜 色、大小等外观样式，主要指的是CSS。 行为标准：行为是指网页模型的定义及交互的 编写，主要包括DOM和ECMAScript两个部分。
需求分析
实大家并不陌生，上网时浏览新闻、查询信
息、翻看图片等都是在浏览网页。但是，对 于初学者来说，学习网页制作首先需要了解 与网页相关的基本概念。下面，本节将针对 与Web相关的概念进行详细讲解。
【任务1-1】知识储备
知识引入
认识网页 网页相关名词 Web标准
【任务1Baidu Nhomakorabea1】了解Web基本概念
1、认识网页
加入Javascript后的网页效果
左边的三张焦点图会自动切换，当鼠 标移上右边的文本时，左边会出现相 应的图片，鼠标移开后又会按照默认
的设置自动轮播。
【任务1-1】知识点讲解
3、web标准
结构、表现、行为之间的关系
【任务1-2】网页制作入门
知识引入
HTML、CSS和JavaScript是网页制作
【任务1-1】了解Web基本概念
1、认识网页
网页是如何形成的呢？
浏览器渲染
图文并茂的页面
特殊的符号和文本
【任务1-1】了解Web基本概念
1、认识网页
除了首页之外，一个网站通常还包含多个子页面。网页与网页之间
通过超链接互相访问。 网站由网页构成，网页有静态和动态之分。
静态网页是指用户无论何时何地访问，网页都会显示固定的信息，
【任务1-3】知识储备
Dreamweaver界面介绍
知识引入
Dreamweaver初始化设置 创建第一个网页
【任务1-3】知识点讲解
1、Dreamweaver界面介绍
工作区布局：
【任务1-3】知识点讲解
1、Dreamweaver界面介绍
新建HTML文档： 选择菜单栏中的【文件】→【新建】选项， 会出现“新建文档”窗口。这时，在文档类 型下拉选项中选择XHTML 1.0 Transitional ，点击【创建】按钮，即可创建一个空白的 HTML文档。
【任务1-2】知识点讲解
2、CSS简介
CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件， 如果是独立的文件，则必须以.css为后缀名。 • 。
• CSS采用的是内嵌方式，虽然与HTML在同一 个文件中，但CSS集中写在HTML文档的头 部，也是符合结构与表现相分离的。 • 如今大多数网页都是遵循Web标准开发的，即 用HTML编写网页结构和内容，而相关版面布 局、文本或图片的显示样式都使用CSS控制。