网页制作综合技术全册配套完整课件.ppt

1、网页制作综合技术全册配套网页制作综合技术全册配套完整课件完整课件网页制作综合技术教程网页制作综合技术教程第第1 1部分部分 HTMLHTML网页设计网页设计 网页的基础概念网页的基础概念1.11.1网页与网页与HTMLHTML1.21.2WebWeb标准标准1.31.3网页设计与开发过程网页设计与开发过程1.41.4 HTML HTML基础基础1.51.5简单的简单的HTMLHTML案例案例1.61.6 用用DreamweaverDreamweaver快速建立基本文档快速建立基本文档1.81.81.1 网页的基础概念图图1.1 使用浏览器软件显示网页使用浏览器软件显示网页 图图1.2 服务器与

2、浏览器的关系示意图服务器与浏览器的关系示意图 1.2 1.2 网页与网页与HTMLHTML图图1.3 网页的网页的HTML源文件源文件1.3 Web1.3 Web标准标准1.3.1 1.3.1 标准的重要性标准的重要性1.3.2 1.3.2 “WebWeb标准标准”概述概述 图图1.4 “结构结构”、“表现表现”和和“行为行为”的关系的关系 图图1.5 仅使用仅使用HTML定义定义“结构结构”的页面效果的页面效果 图图1.6 使用使用CSS设定样式之后的效果设定样式之后的效果 1.4 1.4 网页设计与开发过程网页设计与开发过程 简单来说，网站开发的全过程大致可为简单来说，网站开发的全过程大致

3、可为策划与定义、设计、开发、测试和发布策划与定义、设计、开发、测试和发布5 5个阶个阶段。段。 本节将对开发的流程进行介绍。本节将对开发的流程进行介绍。1.4.1 1.4.1 基本任务与角色基本任务与角色策划与定义策划与定义设设 计计开开 发发测测 试试发发 布布客户客户设计师设计师设计师设计师设计师设计师程序开发员程序开发员 客户设计客户设计 师师程序程序 开发员开发员设计师程设计师程序开发员序开发员表表1.1 网站建设与网页设计流程中的人员角色网站建设与网页设计流程中的人员角色 图图1.7 网站开发的工作流程网站开发的工作流程 1.4.2 1.4.2 明确网站定位明确网站定位1.4.3 1

4、.4.3 收集信息和素材收集信息和素材1.4.4 1.4.4 策划栏目内容策划栏目内容1.4.5 1.4.5 设计页面方案设计页面方案 1.4.6 1.4.6 制作页面制作页面1.4.7 1.4.7 实现后台功能实现后台功能1.4.8 1.4.8 整合与测试网站整合与测试网站1.5 HTML1.5 HTML基础基础 HTML HTML（Hypertext Markup LanguageHypertext Markup Language，超，超文本标记语言）不是一种编程语言，而是一文本标记语言）不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内种描述性的标记语言，用于描述超文本中内容

5、的显示方式。容的显示方式。 例如，如何在网页中定义一个标题、例如，如何在网页中定义一个标题、一段文本或者一个表格等，这些都是利用一段文本或者一个表格等，这些都是利用一个个一个个HTMLHTML标记完成的。标记完成的。 其最基本的语法就是：其最基本的语法就是： 内容内容/ 。 标记通常都是成对使用的，有一个开头标记通常都是成对使用的，有一个开头标记就对应有一个结束标记。结束标记只是标记就对应有一个结束标记。结束标记只是在开头标记的前面加一个斜杠在开头标记的前面加一个斜杠“/”/”。 当浏览器从服务器接收到当浏览器从服务器接收到HTMLHTML文件后，文件后，就会解释里面的标记符，然后把标记符相对

6、就会解释里面的标记符，然后把标记符相对应的功能表达出来。应的功能表达出来。1.5.1 1.5.1 创建第一个创建第一个HTMLHTML文件文件 1.5.2 HTML1.5.2 HTML文件结构文件结构1 1标记标记2 2标记标记3 3标记标记4 4标记标记1.6 1.6 简单的简单的HTMLHTML案例案例 1.8 1.8 利用利用DreamweaverDreamweaver快速建立基本文档快速建立基本文档1.8.1 Dreamweaver1.8.1 Dreamweaver简介简介 图图1.21 Dreamweaver 8的操作界面的操作界面 1 1“文档文档”窗口窗口2 2“插入插入”面板面

7、板 图图1.22 “插入插入”面板面板3 3“属性属性”面板面板图图1.23 “属性属性”面板面板4 4“文档文档”工具栏工具栏图图1.24 “文档文档”工具栏工具栏5 5其他面板其他面板1.8.2 1.8.2 创建新的空白文档创建新的空白文档图图1.25 创建新文档创建新文档1.8.3 1.8.3 案例案例创建新文档创建新文档网页制作综合技术教程网页制作综合技术教程第第1 1部分部分 HTMLHTML网页设计网页设计 文本排版文本排版2.12.1文字列表文字列表2.22.2 HTML HTML标记与标记与HTMLHTML属性属性2.32.3特殊文字符号特殊文字符号2.52.5 HTML HT

8、ML标记和属性的局限性标记和属性的局限性2.42.4 设置图片的尺寸设置图片的尺寸2.72.7设置图像的替换文本设置图像的替换文本2.82.8 利用利用DreamweaverDreamweaver代码视图提高效率代码视图提高效率2.102.10利用利用DreamweaverDreamweaver设置文本和图像设置文本和图像2.92.9使用图像使用图像2.62.6 在各种各样的网页中，文字和图像在各种各样的网页中，文字和图像是最是最基本的两种网页元素。基本的两种网页元素。 文字和图像在网页中可以起到传递文字和图像在网页中可以起到传递信息、导航和交互等作用。信息、导航和交互等作用。 在网页中添加文

9、字和图像并不困难，在网页中添加文字和图像并不困难，更更重要问题是要如何编排这些内容以及控制它重要问题是要如何编排这些内容以及控制它们的显示方式，让文字和图像看上去编排有们的显示方式，让文字和图像看上去编排有序、整齐美观，这就是本章要向读者所介绍序、整齐美观，这就是本章要向读者所介绍的内容。的内容。 通过对本章的学习，读者可以掌握通过对本章的学习，读者可以掌握如何如何在网页中合理使用文字和图像，如何根据需在网页中合理使用文字和图像，如何根据需要选择不同的显示效果。要选择不同的显示效果。2.1 2.1 文文 本本 排排 版版 2.1.1 2.1.1 实现段落与段内换行实现段落与段内换行 2.1.2

10、 2.1.2 设置标题设置标题 图图2.4 段落与标题的效果段落与标题的效果2.1.3 2.1.3 使文字水平居中使文字水平居中图图2.5 居中显示居中显示2.1.4 2.1.4 设置文字段落的缩进设置文字段落的缩进图图2.6 段落缩进段落缩进2.2 2.2 文文 字字 列列 表表 2.2.1 2.2.1 建立无序列表建立无序列表 图图2.7 不带有序号的列表不带有序号的列表2.2.2 2.2.2 建立有序列表建立有序列表图图2.8 带有序号的列表带有序号的列表2.3 HTML2.3 HTML标记与标记与HTMLHTML属性属性 在大多数在大多数HTMLHTML标记中都可以加入属性标记中都可以

11、加入属性控制，属性的作用是帮助控制，属性的作用是帮助HTMLHTML标记进一步标记进一步控制控制HTMLHTML文件的内容，如内容的对齐方式，文件的内容，如内容的对齐方式，文字的大小、字体、颜色，网页的背景样文字的大小、字体、颜色，网页的背景样式，图片的插入等。式，图片的插入等。 其基本语法为：其基本语法为： 2”2.3.1 2.3.1 控制段落的水平位置控制段落的水平位置图图2.9 段落对齐方式段落对齐方式2.3.2 2.3.2 设置背景颜色设置背景颜色图图2.10 通过通过标记的属性标记的属性控制字体颜色和背景颜色控制字体颜色和背景颜色2.4 HTML2.4 HTML标记和属性的局限性标记

12、和属性的局限性2.5 2.5 特殊文字符号特殊文字符号图图2.13 在网页中使用特殊符号在网页中使用特殊符号 图图2.14 运算式运算式2.6 2.6 使使 用用 图图 像像 图片是网页中不可缺少的元素，巧图片是网页中不可缺少的元素，巧妙地妙地在网页中使用图片可以为网页增色不少。在网页中使用图片可以为网页增色不少。 这里首先介绍在网页中常用的两种这里首先介绍在网页中常用的两种图片图片格式，然后再介绍如何在网页中插入图片，格式，然后再介绍如何在网页中插入图片，以及设置图片的样式和插入的位置。以及设置图片的样式和插入的位置。 通过对本章的学习，读者可以制作通过对本章的学习，读者可以制作简单简单的图

13、文网页，并根据自己的喜好制作出不同的图文网页，并根据自己的喜好制作出不同的图片效果。的图片效果。 2.6.1 2.6.1 网页中的图像格式网页中的图像格式 2.6.2 2.6.2 简单案例简单案例 图图2.15 在网页中使用图片在网页中使用图片2.6.3 2.6.3 文件路径文件路径 为了更好地说明为了更好地说明“路径路径”这个非常这个非常重要的重要的概念，这里举一个生活中的例子作为类比。概念，这里举一个生活中的例子作为类比。 计算机中的文件都是按照层次结构计算机中的文件都是按照层次结构保存保存在一级一级的文件夹中的，这就好像是学校在一级一级的文件夹中的，这就好像是学校分为若干个年级，每个年级

14、又分为若干个班分为若干个年级，每个年级又分为若干个班级。级。 比如说，在比如说，在3 3年级年级2 2班中，有两个学班中，有两个学生分生分别叫别叫“小龙小龙”和和“小丽小丽”，可以画一个示意，可以画一个示意图，图，如图如图2.172.17所示。所示。 图图2.17 班级结构示意图班级结构示意图 图图2.18 文件系统结构示意图文件系统结构示意图2.7 2.7 设置图片的尺寸设置图片的尺寸图图2.19 在在Windows中查看图像的尺寸中查看图像的尺寸 图图2.20 设置图像的显示尺寸设置图像的显示尺寸 2.8 2.8 设置图像的替换文本设置图像的替换文本图图2.21 alt属性的作用属性的作用

15、2.9 2.9 利用利用DreamweaverDreamweaver设置文本和图像设置文本和图像2.10 2.10 利用利用DreamweaverDreamweaver代码视图提高效率代码视图提高效率 上一节中介绍了如何使用上一节中介绍了如何使用DreamweaverDreamweaver可视化的方法制作网页，实际上可视化的方法制作网页，实际上DreamweaverDreamweaver也提供了方便的代码编写功能。也提供了方便的代码编写功能。 前面曾经谈到，页面在浏览器中的前面曾经谈到，页面在浏览器中的最终最终显示效果完全是由显示效果完全是由HTMLHTML代码决定的，代码决定的，Dreamw

16、eaverDreamweaver只是帮助用户方便地插入或者只是帮助用户方便地插入或者生成必要的代码。生成必要的代码。 在实际工作中，还是经常会遇到通在实际工作中，还是经常会遇到通过可过可视化的方式生成的代码并不能获得最佳效果视化的方式生成的代码并不能获得最佳效果的情况，这时就需要设计师对代码进行手工的情况，这时就需要设计师对代码进行手工调整，这个工作可以在调整，这个工作可以在DreamweaverDreamweaver文档窗文档窗口的口的“代码代码”视图中完成。视图中完成。2.10.1 2.10.1 代码提示代码提示图图2.32 代码提示功能代码提示功能2.10.2 2.10.2 代码折叠代码

17、折叠 图图2.35 选中一些代码选中一些代码 图图2.36 将代码折叠起来将代码折叠起来2.10.3 2.10.3 拆分视图与代码快速定位拆分视图与代码快速定位图图2.37 使用拆分视图对代码进行快速定位使用拆分视图对代码进行快速定位网页制作综合技术教程网页制作综合技术教程第第1 1部分部分 HTMLHTML网页设计网页设计 设置文字超链接设置文字超链接3.13.1设置页面内部链接设置页面内部链接3.23.2设置图片超链接设置图片超链接3.33.3设置电子邮件链接设置电子邮件链接3.43.4 设置链接页面的目标窗口设置链接页面的目标窗口3.53.5创建热点区域创建热点区域3.63.6框架之间的

18、链接框架之间的链接3.73.7 HTML HTML文件最重要是特性之一就是超文件最重要是特性之一就是超链链接，通过网页上所提供的链接功能，用户可接，通过网页上所提供的链接功能，用户可以链接到网络上的其他网页。以链接到网络上的其他网页。 如果网页上没有超链接，就不得不如果网页上没有超链接，就不得不在浏在浏览器地址栏中一遍遍地输入各网页的览器地址栏中一遍遍地输入各网页的URLURL地地址了，这样也就无法体现互联网的优点了。址了，这样也就无法体现互联网的优点了。3.1 3.1 设置文字超链接设置文字超链接 建立超链接所使用的建立超链接所使用的HTMLHTML标记为标记为标记。标记。 超链接最重要的有

19、两个要素，设置超链接最重要的有两个要素，设置为超为超链接的文本内容和超链接指向的目标地址。链接的文本内容和超链接指向的目标地址。 基本的超链接的结构如图基本的超链接的结构如图3.13.1所示。所示。 图图3.1 基本的超链接的结构基本的超链接的结构3.1.1 URL3.1.1 URL的格式的格式图图3.2 URL的结构的结构3.1.2 URL3.1.2 URL的类型的类型 超链接的超链接的URLURL可以为两种类型：可以为两种类型：“绝绝对对URL”URL”和和“相对相对URL”URL”。 （1 1）绝对）绝对URLURL是如图是如图3.23.2所示，包含文所示，包含文件的所有信息，就像我们在

20、浏览器中访问一件的所有信息，就像我们在浏览器中访问一个网站中的某个页面那样。个网站中的某个页面那样。 （2 2）而相对）而相对URLURL则指向相对于原文档则指向相对于原文档同一服务器或者同一文件夹中的文件。相对同一服务器或者同一文件夹中的文件。相对URLURL通常仅包含文件夹和文件名，甚至只有通常仅包含文件夹和文件名，甚至只有文件名。文件名。 相对相对URLURL又可以分为两种：又可以分为两种： 相对文档的相对文档的URLURL，这种，这种URLURL以链接以链接的的原文档为起点；原文档为起点； 相对服务器的相对服务器的URLURL，这种，这种URLURL以服以服务务器的根目录为起点。器的根

21、目录为起点。 下面举一个简单的例子，源文件参下面举一个简单的例子，源文件参见本见本书素材文件书素材文件“第第3 3章章03-01.htm”03-01.htm”，代码如下。，代码如下。3.2 3.2 设置页面内部链接设置页面内部链接图图3.4 页面内部的链接页面内部的链接3.3 3.3 设置图片超链接设置图片超链接图图3.5 设置图像超链接设置图像超链接3.4 3.4 设置电子邮件链接设置电子邮件链接图图3.6 电子邮件链接电子邮件链接3.5 3.5 设置链接页面的目标窗口设置链接页面的目标窗口 在默认情况下，当点击链接的时候，在默认情况下，当点击链接的时候，目目标页面还是在同一个窗口中显示。标

22、页面还是在同一个窗口中显示。 如果要在点击某个链接以后，打开如果要在点击某个链接以后，打开一个一个新的浏览器窗口，在这个新窗口中显示目标新的浏览器窗口，在这个新窗口中显示目标页面，就需要在页面，就需要在标记中设置标记中设置“target”target”属属性。性。3.6 3.6 创建热点区域创建热点区域图图3.7 图像的热点区域图像的热点区域3.6.1 3.6.1 用用HTMLHTML建立热点区域建立热点区域 area shape=poly coords=271,12,321,23,321,80,275,87,251,49 href=#3.7 3.7 框架之间的链接框架之间的链接 框架是一种常

23、用的网页布局工具。框架是一种常用的网页布局工具。 它的作用是把浏览器的显示空间分它的作用是把浏览器的显示空间分割为割为几个部分，每个部分都可以独立显示不同的几个部分，每个部分都可以独立显示不同的网页。网页。 前面曾经介绍过前面曾经介绍过标记的标记的targettarget属属性，性，但是没有详细介绍，这是因为但是没有详细介绍，这是因为targettarget属性必属性必须和框架配合使用，因此这里先对框架进行须和框架配合使用，因此这里先对框架进行一些介绍，然后再演示框架与链接的关系。一些介绍，然后再演示框架与链接的关系。3.7.1 3.7.1 建立框架与框架集建立框架与框架集图图3.16 使用框

24、架的网页使用框架的网页 3.7.2 3.7.2 用用colscols属性将窗口分为属性将窗口分为 左右部分左右部分 3.7.3 3.7.3 用用rowsrows属性将窗口分为属性将窗口分为 上下部分上下部分 3.7.4 3.7.4 框架的嵌套框架的嵌套 3.7.5 3.7.5 在框架中插入网页在框架中插入网页3.7.6 3.7.6 在框架之间进行链接在框架之间进行链接图图3.20 框架之间的链接框架之间的链接3.7.7 3.7.7 嵌入式框架嵌入式框架网页制作综合技术教程网页制作综合技术教程第第1 1部分部分 HTMLHTML网页设计网页设计 使用表格使用表格4.14.1使用表单使用表单4.2

25、4.2 使用表格可以清晰地显示列成表的使用表格可以清晰地显示列成表的数数据，例如如图据，例如如图4.14.1所示的是股票行情的数据列所示的是股票行情的数据列表。表。 在本章中，先介绍使用表格清晰地在本章中，先介绍使用表格清晰地显示显示数据的方法，各种与表格相关的数据的方法，各种与表格相关的HTMLHTML标记。标记。 同时在本章的最后，还会演示如何同时在本章的最后，还会演示如何借助借助于表格来进行页面布局，以便与本书后续章于表格来进行页面布局，以便与本书后续章节中的其他方法进行对比。节中的其他方法进行对比。 图图4.1 使用表格显示数据使用表格显示数据4.1 4.1 使使 用用 表表 格格4.

26、1.1 4.1.1 表格的基本结构表格的基本结构 单元格单元格 A1 A2 A1 A2 A3 A4A3 A4 B1 B2B3 B1 B2B3 B4B4 C1C2C3 C1C2C3 C4C4 图图4.2 基本表格基本表格4.1.2 4.1.2 合并单元格合并单元格 1 1左右合并单元格左右合并单元格 2 2上下合并单元格上下合并单元格 图图4.3 左右合并单元格左右合并单元格 图图4.4 上下合并单元格上下合并单元格 图图4.5 两个方向合并单元格两个方向合并单元格4.1.3 4.1.3 设置对齐方式设置对齐方式 图图4.6 设置单元格大小设置单元格大小 图图4.7 设置单元格内容的居中对齐设置

27、单元格内容的居中对齐4.1.4 4.1.4 设置表格背景色和边框颜色设置表格背景色和边框颜色图图4.10 设置背景色设置背景色4.1.5 cellpadding4.1.5 cellpadding属性和属性和cellspacingcellspacing属性属性图图4.11 设置单元格间距和单元格内容边距设置单元格间距和单元格内容边距4.1.6 4.1.6 完整的表格标记完整的表格标记图图4.12 设置表格行组设置表格行组 图图4.14 设置表格的标题设置表格的标题4.1.7 4.1.7 用表格进行页面布局的局限性用表格进行页面布局的局限性图图4.15 网页顶部效果网页顶部效果4.2 4.2 使使

28、 用用 表表 单单 4.2.1 4.2.1 表单的用途和原理表单的用途和原理 图图4.27 使用表单元素的留言簿页面使用表单元素的留言簿页面图图4.28 表单的基本工作原理表单的基本工作原理4.2.2 4.2.2 表单类型表单类型 1 1文本输入框文本输入框 2 2单选按钮单选按钮 3 3复选按钮复选按钮 图图4.29 文本输入框文本输入框 图图4.30 单选按钮单选按钮4 4密码输入框密码输入框 图图4.31 复选按钮复选按钮 图图4.32 密码输入框密码输入框5 5按钮按钮 图图4.33 按钮按钮 图图4.34 图像按钮图像按钮6 6多行文本框多行文本框图图4.35 多行文本框多行文本框7

29、 7列表框列表框 图图4.36 下拉列表框下拉列表框 图图4.37 列表框列表框网页制作综合技术教程网页制作综合技术教程第第2 2部分部分 美工与动画元素设计美工与动画元素设计 网页美术设计的基础知识网页美术设计的基础知识5.15.1在在FireworksFireworks中编辑位图中编辑位图5.25.2绘制矢量图形绘制矢量图形5.35.3美术基础理论美术基础理论5.45.4 通过学习本书前面章节的内容，已通过学习本书前面章节的内容，已经了经了解到使用解到使用HTMLHTML建立网页的基本方法，但是建立网页的基本方法，但是要设计出精致美观的页面，仅仅使用文本是要设计出精致美观的页面，仅仅使用文

30、本是不够的，目前最通行的方法是使用图像和动不够的，目前最通行的方法是使用图像和动画来增强页面的表现力。画来增强页面的表现力。5.1 5.1 网页美术设计的基础知识网页美术设计的基础知识 5.1.1 5.1.1 基本概念基本概念 1 1图形与图像图形与图像 2 2分辨率分辨率 3 3位图图像位图图像 4 4矢量图形矢量图形 图图5.1 位图图像放大后变模糊位图图像放大后变模糊 图图5.2 矢量图形放大后仍保持清晰矢量图形放大后仍保持清晰 5.1.2 Fireworks5.1.2 Fireworks的基本操作流程的基本操作流程 1 1FireworksFireworks的操作环境的操作环境 图图5

31、.3 Fireworks起始界面起始界面5.1.3 5.1.3 画布画布 1 1画布的显示比例画布的显示比例 2 2修改图像与画布的大小修改图像与画布的大小 3 3剪裁图像剪裁图像5.2 5.2 在在FireworksFireworks中编辑位图中编辑位图 5.2.1 5.2.1 创建和取消选区创建和取消选区 1 1“选取框选取框”或或“椭圆选取框椭圆选取框”工工具具 2 2取消选取框取消选取框 3 3“套索套索”和和“多边形套索多边形套索”工具工具5.2.2 5.2.2 编辑选区中的像素区域编辑选区中的像素区域 1 1删除选区中的像素删除选区中的像素 2 2复制和移动选区中的内容复制和移动选

32、区中的内容5.2.3 5.2.3 变形和扭曲变形和扭曲图图5.38 变形操作的效果变形操作的效果5.3 5.3 绘制矢量图形绘制矢量图形 5.3.1 5.3.1 创建基本矢量图形创建基本矢量图形 1 1矢量图形的基本构成矢量图形的基本构成 2 2“直线直线”、“矩形矩形”和和“椭圆椭圆”工具工具 3 3“多边形多边形”工具工具 4 4自由形状自由形状5.3.2 5.3.2 调整矢量线条调整矢量线条 1 1矢量线条的调整方法矢量线条的调整方法 图图5.54 墨水滴墨水滴 图图5.55 绘制墨水滴的原型绘制墨水滴的原型 图图5.56 单击控制点单击控制点 图图5.57 调节控制点的效果调节控制点的

33、效果5.4 5.4 美术基础理论美术基础理论 5.4.1 5.4.1 平面构图平面构图 1 1构图要素构图要素 （1 1）线条）线条 （2 2）形和体）形和体2 2构图的基本原则构图的基本原则（1 1）协调、统一）协调、统一（2 2）比例）比例（3 3）均衡与稳定）均衡与稳定（4 4）节奏与韵律）节奏与韵律 产生韵律感有产生韵律感有3 3种方法。种方法。 连续：连续线条具有流动的连续：连续线条具有流动的感觉，也可以通过色彩、形状、图案或空感觉，也可以通过色彩、形状、图案或空间的连续和重复来产生一种连续的韵律美。间的连续和重复来产生一种连续的韵律美。 但要避免连续重复过多而引起的单但要避免连续重

34、复过多而引起的单调感。调感。 渐变：渐变是线条、形状、渐变：渐变是线条、形状、明暗和明暗和色彩按照一定的秩序逐渐变化。色彩按照一定的秩序逐渐变化。 例如线条的渐变，加长或缩短、变例如线条的渐变，加长或缩短、变窄或窄或变宽、变疏或变密等。变宽、变疏或变密等。 这种渐变的韵律美要比连续的韵律这种渐变的韵律美要比连续的韵律美更美更能生动更富有吸引力。能生动更富有吸引力。 交错：各种组成要素按一定交错：各种组成要素按一定规律交规律交织穿插而成，一隐一显，一黑一白，一冷一织穿插而成，一隐一显，一黑一白，一冷一暖，一大一小，一长一短等交错重复有规律暖，一大一小，一长一短等交错重复有规律的出现，因而产生自然

35、生动的、交错的韵律的出现，因而产生自然生动的、交错的韵律美。美。5.4.2 5.4.2 色彩色彩 1 1色彩的基本知识色彩的基本知识 2 2色彩的属性色彩的属性 （1 1）色相）色相 （2 2）亮度）亮度 （3 3）饱和度）饱和度3 3色彩的物理作用色彩的物理作用（1 1）温度感）温度感（2 2）距离感）距离感（3 3）重量感）重量感（4 4）体积感）体积感4 4色彩的使用原则色彩的使用原则网页制作综合技术教程网页制作综合技术教程第第2 2部分部分 美工与动画元素设计美工与动画元素设计 了解图像文件类型了解图像文件类型6.16.1使用使用“图像预览图像预览”命令优化导出图像命令优化导出图像6.

36、26.2使用使用“切片切片”6.36.3 通过学习前面各章，我们已经可以通过学习前面各章，我们已经可以绘制绘制出许多精美的图形图像了。出许多精美的图形图像了。 这些绘制出来的图形或图像要保存这些绘制出来的图形或图像要保存为各为各种所需格式的文件，才能适应各种用途。种所需格式的文件，才能适应各种用途。6.1 6.1 了解图像文件类型了解图像文件类型 下面就对几种常用的文件类型进行下面就对几种常用的文件类型进行说明。说明。 “ “GIF”GIF”，即，即“图形交换格式图形交换格式”，是一种是一种很流行的网页图形格式。很流行的网页图形格式。 “JPEG” “JPEG”（JPGJPG），是专门为照），

37、是专门为照片开片开发的图像格式。发的图像格式。 “PNG” “PNG”，即，即“可移植网络图可移植网络图形形”，是一，是一种通用的网页图形格式。种通用的网页图形格式。 “TIFF” “TIFF”，即标签图像文件格式，即标签图像文件格式，是一是一种用于存储位图图像的图像格式。种用于存储位图图像的图像格式。 6.2 6.2 使用使用“图像预览图像预览”命令优化导出图像命令优化导出图像 6.2.1 6.2.1 使用使用“图像预览图像预览”命令命令 图图6.1 “图像预览图像预览”窗口窗口 图图6.2 “文件文件”选项卡选项卡6.2.2 6.2.2 优化优化JPEGJPEG格式的图像格式的图像图图6.

38、4 设置为不同品质的文件效果和大小设置为不同品质的文件效果和大小6.3 6.3 使用使用“切片切片” 图图6.10 切片将一个文档分割成多个部分切片将一个文档分割成多个部分 图图6.11 “切片切片”工具工具 6.3.1 6.3.1 切片与导出切片与导出 6.3.2 6.3.2 用切片实现用切片实现“分别优化分别优化”网页制作综合技术教程网页制作综合技术教程第第2 2部分部分 美工与动画元素设计美工与动画元素设计 使用使用DreamweaverDreamweaver添加内置的添加内置的FlashFlash对象对象7.17.1FlashFlash软件简介软件简介7.27.2在在FlashFlas

39、h中绘制图形中绘制图形7.37.3FlashFlash动画基本原理动画基本原理7.47.4 创建形状补间动画创建形状补间动画7.57.5动画补间动画补间7.67.6在网页中发布在网页中发布FlashFlash动画动画7.77.7 Adobe Adobe公司的公司的FlashFlash技术是当前网络技术是当前网络上上传输矢量和动画的主要解决方案。传输矢量和动画的主要解决方案。 FlashFlash播放器可以同时作为播放器可以同时作为IEIE、FirefoxFirefox等最流行的网页浏览器的插件，从而使网页等最流行的网页浏览器的插件，从而使网页上展现出丰富多彩的动画效果。上展现出丰富多彩的动画效

40、果。7.1 7.1 使用使用DreamweaverDreamweaver添加内置的添加内置的FlashFlash对象对象 7.1.1 7.1.1 使用使用DreamweaverDreamweaver内置内置的的FlashFlash按钮对象按钮对象 7.1.2 7.1.2 使用使用DreamweaverDreamweaver内置内置的的FlashFlash文本对象文本对象7.2 Flash7.2 Flash软件简介软件简介 7.2.1 Flash的基本功能 1 1绘图和填充绘图和填充 2 2文字的输入和修改文字的输入和修改 3 3创建动画元件和实例创建动画元件和实例 4 4使用动作控制内容使用动

41、作控制内容 5 5添加声音添加声音 6 6集成电影集成电影7.2.2 Flash7.2.2 Flash的工作界面的工作界面图图7.4 Flash的工作界面的工作界面7.2.3 Flash7.2.3 Flash的工作流程的工作流程 1 1在在FlashFlash中作图中作图 2 2制作制作FlashFlash动画动画3 3制作交互式制作交互式FlashFlash电影电影4 4导出导出FlashFlash7.3 7.3 在在FlashFlash中绘制图形中绘制图形 图图7.7 绘制椭圆绘制椭圆 图图7.8 移动填充部分移动填充部分 图图7.9 矩形和多角星形工具矩形和多角星形工具 图图7.10 线

42、条和铅笔工具线条和铅笔工具 7.4 Flash7.4 Flash动画基本原理动画基本原理图图7.13 时间轴窗口时间轴窗口 图图7.18 第第1帧时的舞台帧时的舞台 图图7.19 第第30帧时的内容帧时的内容7.5 7.5 创建形状补间动画创建形状补间动画图图7.20 形状补间动画示例形状补间动画示例7.6 7.6 动动 画画 补补 间间 第1帧 补间帧 第5帧 图图7.24 补间动画补间动画 图图7.25 飞镖飞行飞镖飞行 图图7.33 行驶的汽车行驶的汽车 7.7 7.7 在网页中发布在网页中发布FlashFlash动画动画 7.7.1 7.7.1 插入动画插入动画 在在Dreamweav

43、erDreamweaver中，可以很方便地插中，可以很方便地插入入FlashFlash动画，具体操作方法如下。动画，具体操作方法如下。 （1 1）首先在）首先在FlashFlash软件中将制作好软件中将制作好的动的动画发布为画发布为swfswf格式的文件。格式的文件。 （2 2）将鼠标光标置于文档中要插入）将鼠标光标置于文档中要插入FlashFlash的地方，选择菜单栏中的的地方，选择菜单栏中的“插入插入媒体媒体Flash”Flash”选项，然后在弹出的对话框中选择选项，然后在弹出的对话框中选择一个一个FlashFlash文件（文件（swfswf文件）。文件）。 插入的插入的FlashFlas

44、h动画显示为一个灰色的动画显示为一个灰色的方方框，里面有框，里面有FlashFlash标志，如图标志，如图7.457.45所示。所示。 图图7.45 插入的插入的Flash动画动画7.7.2 7.7.2 设置设置FlashFlash对象的属性对象的属性图图7.48 “属性属性”面板面板网页制作综合技术教程网页制作综合技术教程第第3 3部分部分 CSSCSS样式设计样式设计 HTML HTML与与XHTMLXHTML8.18.1(X)HTML(X)HTML与与CSSCSS8.28.2构造构造CSSCSS规则规则8.38.3基本基本CSSCSS选择器选择器8.48.4在在HTMLHTML中使用中使

45、用CSSCSS的方法的方法8.58.5 通过前面的学习，我们已经理解了通过前面的学习，我们已经理解了HTMLHTML的核心原理。的核心原理。 实际上使用实际上使用HTMLHTML非常简单，其核心非常简单，其核心思思想就是需要设置什么样式，就使用相应的想就是需要设置什么样式，就使用相应的HTMLHTML标记或者属性。标记或者属性。 在前文中，初步地分析了由于历史在前文中，初步地分析了由于历史原因原因和和HTMLHTML自身的局限性，所带来的一些问题。自身的局限性，所带来的一些问题。 为了解决这些问题，为了解决这些问题，HTMLHTML逐步地发逐步地发展展到了到了XHTMLXHTML，而，而XHT

46、MLXHTML也更加便于和也更加便于和CSSCSS相配合。相配合。 本章将着重介绍本章将着重介绍HTMLHTML、XHTMLXHTML和和CSSCSS三者之间的关系，重点是理解使用三者之间的关系，重点是理解使用CSSCSS的核的核心目的。心目的。 8.1 HTML8.1 HTML与与XHTMLXHTML 8.1.1 8.1.1 追根溯源追根溯源 从从HTMLHTML到到XHTMLXHTML，大致经历了以下版，大致经历了以下版本。本。 HTML 2.0HTML 2.0：19951995年年1111月发布。月发布。 HTML 3.2HTML 3.2：19961996年年1 1月月1414日发布。日

47、发布。 HTML 7.0HTML 7.0：19971997年年1212月月1818日发布。日发布。 HTML 7.01HTML 7.01（微小改进）：（微小改进）：19991999年年1212月月2424日发布。日发布。 XHTML 1.0XHTML 1.0：20002000年年1 1月发布，后又月发布，后又经过修订于经过修订于20022002年年8 8月月1 1日重新发布。日重新发布。 XHTML 1.1XHTML 1.1：20012001年年5 5月月3131日发布。日发布。 XHTML 2.0XHTML 2.0：正在制订中。：正在制订中。8.1.2 DOCTYPE8.1.2 DOCTYP

48、E的含义与选择的含义与选择8.1.3 XHTML8.1.3 XHTML与与HTMLHTML的重要区别的重要区别 1 1在在XHTMLXHTML中标记名称必须小写中标记名称必须小写 2 2在在XHTMLXHTML中属性名称必须小写中属性名称必须小写3 3在在XHTMLXHTML中标记必须严格嵌套中标记必须严格嵌套4 4在在XHTMLXHTML中标记必须封闭中标记必须封闭5 5在在XHTMLXHTML中即使是空元素的标中即使是空元素的标记也必须封闭记也必须封闭 6 6在在XHTMLXHTML中属性值用双引号括中属性值用双引号括起来起来7 7在在XHTMLXHTML中属性值必须使用完中属性值必须使用

49、完整形式整形式8.2 (X)HTML8.2 (X)HTML与与CSSCSS8.2.1 CSS8.2.1 CSS标准标准8.2.2 8.2.2 传统传统HTMLHTML的缺点的缺点其实传统其实传统HTMLHTML的缺陷远不止上例中所的缺陷远不止上例中所反映的这一个方面，相比反映的这一个方面，相比CSSCSS为基础的页面为基础的页面设计方法，其所体现出的劣势主要有以下几设计方法，其所体现出的劣势主要有以下几点。点。（1 1）维护困难。）维护困难。为了修改某个特殊标记（如上例中的为了修改某个特殊标记（如上例中的标记）的格式，需要花费很多的时间，标记）的格式，需要花费很多的时间，尤其对于整个网站而言，

50、后期修改和维护的尤其对于整个网站而言，后期修改和维护的成本很高。成本很高。 （2 2）标记不足。）标记不足。HTMLHTML本身的标记很少，很多标记都是本身的标记很少，很多标记都是为网页内容服务的，而对于美工样式的标为网页内容服务的，而对于美工样式的标记，如文字间距、段落缩进等标记在记，如文字间距、段落缩进等标记在HTMLHTML中很难找到。中很难找到。 （3 3）网页过）网页过“胖胖”。由于没有统一对各种风格样式进行控由于没有统一对各种风格样式进行控制，因此制，因此HTMLHTML的页面往往体积过大，占用的页面往往体积过大，占用网络带宽。网络带宽。 （4 4）定位困难。）定位困难。在整体布局