HTML和中文Dreamweaver MX2004实用教程 配套课件作者 杜金　郭海　曲彭生 第5章.ppt

《HTML和中文Dreamweaver MX2004实用教程 配套课件作者 杜金　郭海　曲彭生 第5章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章样式表与时间线本章要点5.1重做“卡通青蛙”网页5.2再做“俏皮歇后语”网页5.3“霸道的文字”网页5.4再做“心情随笔”网页5.5“射门”网页5.6再做“射门”网页5.7“风景幻灯”网页5.8“浮动图像”网页习题55.1重做“卡通青蛙”网页在Dreamweaver中重做后的“卡通青蛙”网页如图5-1-1所示。可以看出，该网页和第1章中的“卡通青蛙”网页基本相同，在网页中包含几个大小不同的卡通青蛙图像，并且每个图像的周围都增加了边框。这两个网页的不同之处在于第1章中的“卡通青蛙”网页是使用HTML代码实现的，而本实例是使用“样式”实现的

2、。图5-1-1“卡通青蛙”网页的显示效果5.1重做“卡通青蛙”网页5.1.1创建CSS样式表1．“CSS样式”面板执行“窗口”→“CSS样式”菜单命令，或者按Shift+F1键，即可调出“CSS样式”面板，如图5-1-2所示。其中各选项的作用如下。图5-1-2“CSS样式”面板（1）显示窗口：显示所有样式表的名称，“（未定义样式）”表示没有样式。（2）“附加样式表”按钮：单击该按钮，调出“选择样式表文件”对话框，用于导入外部的样式表（文件的扩展名为.css）。图5-1-2“CSS样式”面板5.1重做“卡通青蛙”网页（3）“新建CSS样式”按钮

3、：单击该按钮，调出“新建CSS样式”对话框，如图5-1-3所示。利用该对话框可以建立新的样式。图5-1-3“新建CSS样式”对话框5.1重做“卡通青蛙”网页（4）“编辑样式表”按钮：单击该按钮，调出能进行样式表编辑的对话框，利用该对话框可以对CSS样式表进行编辑。（5）“删除CSS样式”按钮：单击该按钮，将删除选中的样式。2．创建CSS样式表（1）在“CSS样式”面板中单击“新建CSS样式”按钮，调出如图5-1-3所示的“新建CSS样式”对话框。选中“选择器类型”栏内的第1个单选钮，在“名称”下拉列表框内输入一个样式表的名称，名称必须以“.”

4、开始。（2）单击该对话框中的“确定”按钮，即可退出该对话框，调出“保存样式表文件为”对话框。利用该对话框，输入CSS样式表名称，单击“保存”按钮，将新建的空的CSS样式表保存。同时，可弹出“CSS样式定义”对话框，如图5-1-4所示（初始时“分类”栏中选中的是“类别”列表项）。利用该对话框可以定义样式表内各个对象属性。5.1重做“卡通青蛙”网页图5-1-4“CSS样式定义”对话框5.1重做“卡通青蛙”网页（3）设置完毕后，单击“确定”按钮，即可完成样式表的定义。此时，在“CSS样式表”面板的显示窗口内，会显示出新创建的样式表的名称。3．“新建

5、CSS样式”对话框中其他各选项的含义（1）“标签”单选钮：选中该单选钮后，“名称”下拉列表框显示为“标签”下拉列表框，它提供了各种HTML语言的标记，可利用它对HTML标记重新定义，改变其属性。（2）“高级”单选钮：选中该单选钮后，“名称”下拉列表框显示为“选择器”下拉列表框。“选择器”下拉列表框有4个选项，都是针对热字的：link（一般链接）、visited（访问过的链接字）、hover（当前的链接字）和active（被激活的链接字）。针对这4种状态，可设置它们的属性，使链接字在各种状态下有不同特性。（3）“定义在”栏：用于确定CSS样式定

6、义在文件（.css）还是定义在当前文档中。5.1重做“卡通青蛙”网页5.1.2“CSS样式定义”对话框中的边框属性单击“CSS样式定义”对话框左边“分类”列表框中的“边框”列表项，调出“边框”的样式设置内容，如图5-1-4所示。利用该对话框可以对围绕所有对象的边框属性进行定义。该对话框中各选项的作用如下。“边框”栏内有“样式”、“宽度”和“颜色”3个栏，每个栏中均有一个“全部相同”复选框，以及4行选项。4行选项分别用来定义“上”、“右”、“下”和“左”边框。选择“全部相同”复选框后，只有“上”栏为可用状态，定义了“上”边框后，其他边框也采用相

7、同的定义。“样式”栏中各下拉列表框中有9个选项。其中，“无”选项是取消边框，其他选项对应着一种不同的边框。边框的最终显示效果还与浏览器有关。“宽度”栏的下拉列表框中有4个选项。它的第一列的下拉列表框用于设置边框的宽度，第二列下拉列表框用于选择数值的单位，只有在第一列下拉列表框中选择了“（值）”选项时，它才有效，否则均采用像素为单位。选择“细”选项时，可设置细边框；选择“中”选项时，可设置中等粗细的边框；选择“粗”选项时，可设置粗边框；选择“值”选项时，可输入边框粗细的数值，此时其右边的下拉列表框变为有效，可以选择数值的单位。“颜色”栏中

8、有1个按钮和1个文本框用于设置边框的颜色。5.2再做“俏皮歇后语”网页在Dreamweaver中利用样式表再做的“俏皮歇后语”网页的显示效果如图5-2-1所示。使用