1、模块六 高效制作更为精致的网页任务引领任务引领 产品说明书 散文集项目渐近项目渐近 网站项目“我心飞扬”之 第六阶段“美化并高效制作各页面”拓展训练拓展训练“流行文学作品荟萃”任务引领“产品说明书产品说明书”网页打开后，将显示“产品说明书”界面。制作演示相关知识 1.1.理解样式表理解样式表在当今的网页中，几乎很多网页都使用了在当今的网页中，几乎很多网页都使用了CSSCSS样式表，有了样式表，有了CSSCSS的控制，网页的控制，网页便会给人一种赏心悦目的感觉，字体的色彩变化也使主页变得更加生动活泼。便会给人一种赏心悦目的感觉，字体的色彩变化也使主页变得更加生动活泼。相关知识（1 1）样式表的概
2、念）样式表的概念 CSS CSS英文全称英文全称“Cascading Style Sheets”Cascading Style Sheets”，中文全称为，中文全称为“层叠样式表层叠样式表”，更，更多的人则把它简称为多的人则把它简称为“样式表样式表”，以下简称为，以下简称为“CSSCSS样式样式”。它是一组格式设置规。它是一组格式设置规则，用于控制则，用于控制WebWeb页面内容的外观，通过使用页面内容的外观，通过使用CSSCSS样式设置页面的格式，可将页面样式设置页面的格式，可将页面的内容与表示形式分离开。的内容与表示形式分离开。相关知识（2 2）理解样式表的标记）理解样式表的标记 通常情况
3、下，通常情况下，CSSCSS的描述部分是由三部分组成的，分别是选择器、属性和属性的描述部分是由三部分组成的，分别是选择器、属性和属性值。值。基本语法基本语法 选择器选择器 属性属性:属性值属性值;“选择器选择器”相当于调用的标识，相当于调用的标识，“属性属性”和和“属性值属性值”则是说明想要描述的是则是说明想要描述的是哪一个属性，该属性的值为多少。哪一个属性，该属性的值为多少。相关知识（3 3）样式表的种类）样式表的种类 按照选择器分，按照选择器分，CSSCSS最常用的种类有四种：最常用的种类有四种：HTMLHTML标签选择器、标签选择器、CLASSCLASS类选择器、类选择器、IDID类选择
4、器和伪元素选择器。类选择器和伪元素选择器。相关知识 HTMLHTML标签选择器标签选择器 顾名思议，顾名思议，HTMLHTML标签选择器是直接将标签选择器是直接将HTMLHTML标签作为选择器，可以是标签作为选择器，可以是p p、h1h1、dldl、strongstrong等等HTMLHTML标签。示例代码如下：标签。示例代码如下：h2 color:orange;h2 color:orange;h4 color:green;h4 color:green;p font-p font-weight:boldweight:bold;相关知识 CLASSCLASS类选择器类选择器 使用使用HTMLHT
5、ML标签的标签的CLASSCLASS属性引入属性引入CSSCSS中定义的样式规则的名字，称为中定义的样式规则的名字，称为CLASSCLASS类选择类选择器，器，CLASSCLASS属性指定的样式名字必须是以属性指定的样式名字必须是以“.”“.”开头。示例代码如下：开头。示例代码如下：相关知识style type=text/!-在页面中使用类选择器：在页面中使用类选择器：table width=200 border=1=0 /在两列上使用类选择器方式来设置样式在两列上使用类选择器方式来设置样式td class= nbsp;td class= nbsp;相关知识 IDID类选择器类
6、选择器 ID ID选择器的使用方法跟选择器的使用方法跟classclass选择器基本相同，不同之处在于选择器基本相同，不同之处在于IDID选择器只能在选择器只能在HTMLHTML页面中使用一次，因此其针对性更强（仅将该样式应用到具有相同页面中使用一次，因此其针对性更强（仅将该样式应用到具有相同IDID的的HTMLHTML元素）。示例代码如下：元素）。示例代码如下：相关知识style type=text/!-IDID选择器选择器11IDID选择器选择器22相关知识 伪类选择器伪类选择器 伪类和伪元素是两种有意思的选择器，之所以称伪类和伪元素是两种有意思的选择器，之所以称“伪伪”，因为它们实际上并
7、不，因为它们实际上并不存在于源文档或者文档树中，但是它们又确实可以显示出效果。存在于源文档或者文档树中，但是它们又确实可以显示出效果。CSSCSS中最常用的四个伪类选择器，分别是：中最常用的四个伪类选择器，分别是：链接链接 a:linka:link 已访问过的链接已访问过的链接 a:visiteda:visited鼠标停在上方时鼠标停在上方时 a:hovera:hover单击鼠标时单击鼠标时 a:activea:active。相关知识（4 4）在哪儿建立样式表）在哪儿建立样式表 通常情况下，通常情况下，CSSCSS样式表在样式表在HTMLHTML中有三个位置，对应的名称分别是内联样式表中有三个
8、位置，对应的名称分别是内联样式表（Inline Style SheetInline Style Sheet）、嵌入样式表（）、嵌入样式表（Internal Style SheetInternal Style Sheet）和外部样式）和外部样式表（表（External Style SheetExternal Style Sheet）。）。相关知识 内联样式表（内联样式表（Inline Style SheetInline Style Sheet）HTML HTML标签直接使用标签直接使用stylestyle属性，称为内联样式（属性，称为内联样式（Inline Style SheetInline S
9、tyle Sheet）。它适用）。它适用于只需要简单地将一些样式应用于某个独立的元素的情况，不需要另设于只需要简单地将一些样式应用于某个独立的元素的情况，不需要另设CSSCSS样式段。样式段。基本语法基本语法 3;内容内容 示例代码如下：示例代码如下：p style=font-family:;font-size:20pt;font-style:italic;内联样内联样式表式表(Inline Style)(Inline Style)/p相关知识 嵌入样式表（嵌入样式表（Internal Style SheetInternal Style Sheet）嵌入样式是在嵌入样式是在标签内添加标签内添加
10、标签对儿，在标签对内定义需标签对儿，在标签对内定义需要的样式，作用于整个页面。要的样式，作用于整个页面。基本语法基本语法 style type=text/.相关知识 外部样式表外部样式表 (External Style Sheet)(External Style Sheet)顾名思义，外部样式表是个独立文件，一般后缀为顾名思义，外部样式表是个独立文件，一般后缀为.csscss，当某文档需要引用外，当某文档需要引用外部样式表时，将外部样式表的链接在部样式表时，将外部样式表的链接在中说明即可。中说明即可。基本语法基本语法 link 相关知识（5 5）在）在DreamweaverDreamweave
11、r 中制作样式表的方法中制作样式表的方法 打开打开CSSCSS样式面板添加样式面板添加CSSCSS样式。选择样式。选择“窗口窗口”菜单下菜单下“CSSCSS样式样式”命令即可，命令即可，如图所示。如图所示。相关知识CSS样式面板样式面板 添加CSS样式选择器类型相关知识 2.2.利用用户自定义样式表改变文字属性利用用户自定义样式表改变文字属性（1 1）用户自定义文本属性的）用户自定义文本属性的typetype选项组选项组 打开网页，在打开网页，在“样式表样式表”面板中单击新建图标，弹出面板中单击新建图标，弹出“新建新建CSSCSS规则规则”对话框，对话框，设置样式的名称为设置样式的名称为“zi
12、ti”ziti”，在，在“选择器类型选择器类型”中选择中选择“类（可应用与任何类（可应用与任何HTMLHTML元素）元素）”，在，在“规则定义规则定义”中选择中选择“仅限该文档仅限该文档”如图所示。如图所示。相关知识新建新建CSS样式样式 设置设置type选项选项 相关知识选中网页中的文字，在选中网页中的文字，在“属性属性”面板面板“目标规则目标规则”中选择中选择“ziti”ziti”样式，如图。样式，如图。相关知识（2 2）根据自定义的文字属性一并修改文章段落）根据自定义的文字属性一并修改文章段落 打开网页，在打开网页，在“样式表样式表”面板中单击新建图标，弹出面板中单击新建图标，弹出“新建
13、新建CSSCSS规则规则”对话框，对话框，设置样式的名称为设置样式的名称为“wzwz”，在，在“选择器类型选择器类型”中选择中选择“类（可应用与任何类（可应用与任何HTMLHTML元元素）素）”，在，在“规则定义规则定义”中选择中选择“仅限该文档仅限该文档”。在选项在选项“类型类型”中设置中设置“Font-size”Font-size”字体大小为字体大小为“12px”12px”，“Line-height”Line-height”行高为行高为“20px”20px”，在，在“区块区块”中设置中设置“Text-indent”Text-indent”文字缩进为文字缩进为“2ems”2ems”，如图，如
14、图所示。所示。相关知识设置设置“类型类型”设置区块设置区块 相关知识 3.3.利用用户自定义样式表修改行间距利用用户自定义样式表修改行间距打开网页，在打开网页，在“样式表样式表”面板中单击新建图标，弹出面板中单击新建图标，弹出“新建新建CSSCSS规则规则”对话框，对话框，设置样式的名称为设置样式的名称为“hg”hg”，在，在“选择器类型选择器类型”中选择中选择“类（可应用与任何类（可应用与任何HTMLHTML元元素）素）”，在，在“规则定义规则定义”中选择中选择“仅限该文档仅限该文档”。在选项在选项“类型类型”中设置中设置“Font-size”Font-size”字体大小为字体大小为“12p
15、x”12px”，“Line-height”Line-height”行高为行高为“25px”25px”，如图所示。，如图所示。相关知识设置样式设置样式 相关知识 4.4.利用有关链接的样式表修改链接的格式利用有关链接的样式表修改链接的格式（1 1）取消建立链接的文本下划线）取消建立链接的文本下划线打开带有超级链接的网页，在打开带有超级链接的网页，在“样式表样式表”面板中单击新建图标，弹出面板中单击新建图标，弹出“新建新建CSSCSS规规则则”对话框，在对话框，在“选择器类型选择器类型”中选择中选择“标签（重新定义标签（重新定义HTMLHTML元素）元素）”，在，在“选选择器名称择器名称”中选择中
16、选择“a”a”，在，在“规则定义规则定义”中选择中选择“仅限该文档仅限该文档”如图所示。如图所示。相关知识新建样式新建样式设置样式设置样式 相关知识（2）在鼠标悬放超链接时改变链接颜色）在鼠标悬放超链接时改变链接颜色接着上面的操作继续，新建接着上面的操作继续，新建CSS样式，在样式，在“选择器类型选择器类型”中选择中选择“复合内容（基复合内容（基于选择的内容）于选择的内容）”，在，在“选择器名称选择器名称”中选择中选择“a：hover”，在，在“规则定义规则定义”中选中选择择“仅限该文档仅限该文档”如图所示。如图所示。相关知识新建样式新建样式 设置样式设置样式 相关知识 5.5.利用用户自定义
17、样式表制作图标利用用户自定义样式表制作图标（1 1）设置列表项目格式的）设置列表项目格式的listlist选项组选项组 打开一个带有列表的网页，在打开一个带有列表的网页，在“样式表样式表”面板中单击新建图标，弹出面板中单击新建图标，弹出“新建新建CSSCSS规则规则”对话框，在对话框，在“选择器类型选择器类型”中选择中选择“类（可应用于任何类（可应用于任何HTMLHTML元素）元素）”，在在“选择器名称选择器名称”中输入中输入“list”list”，在，在“规则定义规则定义”中选择中选择“仅限该文档仅限该文档”。单击单击“确定确定”按钮后，弹出按钮后，弹出“.list.list的的CSSCSS
18、规则定义规则定义”对话框，在选项对话框，在选项“列表列表”中设置中设置List-style-typeList-style-type为为“upper-roman”upper-roman”，如图所示。，如图所示。相关知识设置设置list选项组选项组 相关知识（2 2）利用漂亮图标编排列表项目）利用漂亮图标编排列表项目 重新编辑重新编辑.list.list的的CSSCSS规则。在规则。在“CSSCSS样式样式”面板中，选择面板中，选择.list.list规则，单击规则，单击“编编辑样式辑样式”按钮，弹出按钮，弹出“.list.list的的CSSCSS规则定义规则定义”对话框，在对话框，在“列表列表”
19、项中，设置项中，设置“List-style-type”List-style-type”为为“none”none”，设置，设置“List-style-image”List-style-image”为设置的图片，如为设置的图片，如图所示。图所示。单击单击“确定确定”按钮后，网页文档就发生了编号，效果如图所示。按钮后，网页文档就发生了编号，效果如图所示。相关知识设置列表项目图标设置列表项目图标 自定义项目图标效果自定义项目图标效果 相关知识 6.6.利用用户自定义样式表固定背景图像的位置利用用户自定义样式表固定背景图像的位置（1 1）利用样式表设置背景图像）利用样式表设置背景图像打开一个网页，新建打
20、开一个网页，新建CSSCSS样式，在样式，在“选择器类型选择器类型”中选择中选择“标签（重新定义标签（重新定义HTMLHTML元元素）素）”，在，在“选择器名称选择器名称”中选择中选择“bodybody：hover”hover”，在，在“规则定义规则定义”中选择中选择“仅仅限该文档限该文档”，选择，选择“背景背景”选项，设置选项，设置“Background-image”Background-image”为需要的图片即可。为需要的图片即可。相关知识（2 2）在指定位置只显示一张背景图像）在指定位置只显示一张背景图像 接着前面的操作，在接着前面的操作，在“CSSCSS样式样式”面板中，选择面板中，
21、选择bodybody规则，单击规则，单击“编辑样式编辑样式”按钮，设置按钮，设置“Background-repeat”Background-repeat”为为“no-repeat”no-repeat”，设置，设置“Background-Background-positionposition（X X）”为为“center”center”，设置，设置“Background-positionBackground-position（Y Y）”为为“center”center”，如图所示。在浏览器中预览网页效果，可以发现，背景图像在指定，如图所示。在浏览器中预览网页效果，可以发现，背景图像在指定位置只显
22、示一张不重复的图像。位置只显示一张不重复的图像。相关知识Body的规则定义的规则定义 相关知识（3 3）固定背景图像，不让它滚动）固定背景图像，不让它滚动 继续前面的操作，在继续前面的操作，在“CSSCSS样式样式”面板中，选择面板中，选择bodybody规则，单击规则，单击“编辑样式编辑样式”）按钮，设置按钮，设置“Background-attachment”Background-attachment”为为“fixed”fixed”，在浏览器中预览网页效果，在浏览器中预览网页效果，就会发现背景图像不滚动了。就会发现背景图像不滚动了。任务引领“散文集散文集”网页打开后，将显示网页打开后，将显示
23、“散文集散文集”界面。界面。制作演示相关知识 1.1.运用保存素材的库运用保存素材的库库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素的方法，库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素的方法，这些元素称为库项目，可以在库中存储各种各样的页面元素，如图像、表格、声这些元素称为库项目，可以在库中存储各种各样的页面元素，如图像、表格、声音和音和flashflash文件等。文件等。使用库，就不必频繁地改动网站，可以通过改动库更新所有采用库的网页，使用库，就不必频繁地改动网站，可以通过改动库更新所有采用库的网页，不用一个一个的修改网页元素或者重新制作网页。不用一个一个的修改
24、网页元素或者重新制作网页。相关知识 2.2.运用保存在库中的项目运用保存在库中的项目（1 1）利用保存在库中的项目编辑网页文档）利用保存在库中的项目编辑网页文档 前面任务二中已经详细讲述了库项目的建立过程，这里就不详细说明了。前面任务二中已经详细讲述了库项目的建立过程，这里就不详细说明了。相关知识（2 2）修改登录到库中的项目）修改登录到库中的项目 首先，选择首先，选择“窗口窗口”“”“资源资源”菜单，打开菜单，打开“资源资源”面板，选择面板左侧的面板，选择面板左侧的“库库”类别。单击库项目面板中的类别。单击库项目面板中的“logo”logo”，这时库项目的预览出现在，这时库项目的预览出现在“
25、资源资源”面板的顶部。双击库项目或者单击面板的顶部。双击库项目或者单击“资源资源”面板底部的面板底部的“编辑编辑”按钮，这时就会按钮，这时就会打开一个标题为打开一个标题为“logo.lbilogo.lbi”的编辑库项目的窗口，如图所示。的编辑库项目的窗口，如图所示。相关知识 编辑库项目编辑库项目 相关知识对库项目进行编辑，把对库项目进行编辑，把logo图片换成另外一张图片，保存库项目时会弹出图片换成另外一张图片，保存库项目时会弹出“更更新库项目新库项目”对话框，如图所示。对话框，如图所示。“更新库项目更新库项目”对话框中列出了使用该库项目的对话框中列出了使用该库项目的所有文件，可以单击所有文件
26、，可以单击“更新更新”按钮更新使用该项目的所有文档。更新完成后弹出按钮更新使用该项目的所有文档。更新完成后弹出“更新页面更新页面”对话框，如图所示。对话框，如图所示。相关知识“更新库项目更新库项目”对话框对话框“更新页对话框面更新页对话框面”相关知识 3.3.利用模板功能批量制作网页利用模板功能批量制作网页（1 1）制作模板文档，设置可编辑区域）制作模板文档，设置可编辑区域 选择选择“文件文件”“”“新建新建”菜单，选择菜单，选择“空模板空模板”类别下的类别下的“HTMLHTML模板模板”，如图，如图所示。所示。相关知识新建一个空模板新建一个空模板 相关知识选择选择“文件文件”“”“保存菜单，
27、保存模板，此时会弹出一个对话框，如图所示。保存菜单，保存模板，此时会弹出一个对话框，如图所示。选好对应的站点，最后命名，如图所示。模板保存后可以在站点文件夹的选好对应的站点，最后命名，如图所示。模板保存后可以在站点文件夹的“Templates”Templates”子文件夹下找到刚才做好的模板，扩展名为子文件夹下找到刚才做好的模板，扩展名为.dwtdwt。相关知识保存模板时弹出的对话框保存模板时弹出的对话框 保存模板保存模板 相关知识 在模板上插入一个在模板上插入一个3行行1列的表格，表格的宽度设为列的表格，表格的宽度设为860像素，并且居中。在第像素，并且居中。在第一行插入一个一行插入一个2行
28、行1列的嵌套表格，插入对应的图片列的嵌套表格，插入对应的图片“logo.jpg”和和“menu.jpg”；在最后一行插入在最后一行插入“bottom.jpg”。相关知识编辑模板编辑模板 相关知识最后，选中要插入可编辑区域的单元格，单击最后，选中要插入可编辑区域的单元格，单击“常用常用”快捷栏的快捷栏的“模板模板”按钮，按钮，在弹出的菜单中选择在弹出的菜单中选择“可编辑区域可编辑区域”命令，如图所示。命令，如图所示。相关知识 弹出弹出“新建可编辑区域新建可编辑区域”对话框，在对话框，在“名称名称”文本框中输入文本框中输入“content”content”，单，单击击“确定确定”按钮即可，如图所示
29、。按钮即可，如图所示。相关知识（2 2）利用已制作好的模板文档新建网页文档）利用已制作好的模板文档新建网页文档 选择选择“文件文件”“”“新建新建”菜单，弹出菜单，弹出“新建文档新建文档”对话框，如图所示，单击对话框，如图所示，单击“创建创建”按钮就可以了。按钮就可以了。相关知识“新建文档新建文档”对话框对话框 相关知识（3 3）修改模板文档）修改模板文档 打开打开“资源资源”面板，单击面板，单击“模板模板”按钮，选中按钮，选中“index”index”模板，双击就可以修模板，双击就可以修改模板页面了，如图所示。修改保存后，会弹出一个改模板页面了，如图所示。修改保存后，会弹出一个“更新模板文件
30、更新模板文件”对话框，对话框，如图所示，单击如图所示，单击“更新更新”按钮即自动将所有由此模板创建的网页自动更新为新模按钮即自动将所有由此模板创建的网页自动更新为新模板的样式。板的样式。以后还可根据需要，选择以后还可根据需要，选择“修改修改”“”“模板模板”菜单下的菜单下的“更新当前页更新当前页”或者或者“更新页面更新页面”选项来手动更新某网页。选项来手动更新某网页。相关知识编辑模板编辑模板 模板按钮“更新模板文件更新模板文件”对话框对话框 项目渐近 网站项目“我心飞扬”之第六阶段美化并高效制作各页面制作演示 操作要点操作要点（1 1）创建库项目；）创建库项目；（2 2）创建模板文件；）创建模板文件；（3 3）使用模板套用之前创）使用模板套用之前创建的各网页文件。建的各网页文件。拓展训练“流行文学作品荟萃”拓展训练“流行文学作品荟萃”嵌套表格THANKS!
