网页制作：项目08__使用CSS控制购物网页外观--.pptVIP

Dreamweaver 8 网页设计与制作 任务三 设置页脚的CSS规则 5.应用CSS样式的方式 应用CSS样式包括自定义CSS样式的应用和链接外部CSS样式的应用两种方式。在CSS样式中的HTML标签样式和CSS选择器样式是自动应用的，只有自定义的类CSS样式需要手动操作进行应用，应用方式包括通过【属性】面板的【样式】、【类】下拉列表或者在【CSS样式】面板的右键快捷菜单中选择【套用】命令或者在网页元素的右键快捷菜单中选择【CSS样式】中的样式名称。 附加样式表通常也有两种方法。第1种是在【CSS样式】面板中单击面板底部的 （附加样式表）按钮。第2种是在【CSS样式】面板右键快捷菜单中选择【附加样式表】命令。 项目八： 使用CSS控制购物网页外观 任务一 任务二 小 结 任务三 实 训 实训 使用CSS样式控制网页外观 本项目着重介绍了使用CSS样式控制网页外观的基本方法。实训将使用CSS样式对如图8-49所示的网页外观进行控制，以进一步巩固CSS样式的基本操作。 Dreamweaver 8 网页设计与制作 项目八： 使用CSS控制购物网页外观 实训结果文件见“项目结果”文件夹中的“shixun.htm”。 【实训目的】 进一步巩固创建CSS样式的方法。 进一步巩固设置CSS样式的方法。 进一步巩固管理CSS样式的方法。 任务一 任务二 小 结 任务三 实 训 实训 使用CSS样式控制网页外观 Dreamweaver 8 网页设计与制作 项目八： 使用CSS控制购物网页外观 任务一 任务二 小 结 任务三 实 训 小结 本项目通过购物网页页面的制作过程，着重介绍了使用CSS样式对网页外观进行控制的基本方法，包括CSS样式的创建、设置、编辑、删除等内容。熟练掌握CSS样式的基本操作将会给网页制作带来极大的方便，是需要重点学习和掌握的内容之一。 Dreamweaver 8 网页设计与制作 项目八： 使用CSS控制购物网页外观 任务一 任务二 小 结 任务三 实 训 * 主讲： 网页设计与制作——Dreamweaver 8 项目八 使用CSS控制购物网页外观 任务一 设置页眉CSS规则 任务二 设置购物网页主体的CSS样式 项目八： 使用CSS控制购物网页外观 网页设计与制作Dreamweaver 8 任务一 任务二 任务三 设置页脚的CSS规则 小 结 任务三 实 训 任务一 设置页眉CSS规则 CSS是“Cascading Style Sheet”的缩写，可译为“层叠样式表”或“级联样式表”。形象地说，CSS可以使直线显示为虚线，可以使表格只显示一条边框，可以使网页背景固定不动，可以使文字产生阴影等效果。可以说，CSS简化了HTML中各种繁琐的标签，扩展了原先的标签功能，能够实现更多的效果。 购物网页页眉部分放置的内容通常有站标、网站标题和商品导航栏等。本任务主要介绍购物网页页眉的制作及使用CSS样式控制其外观的基本方法。 Dreamweaver 8 网页设计与制作 项目八： 使用CSS控制购物网页外观 任务一 任务二 小 结 任务三 实 训 操作一 定义“body”的CSS规则 Dreamweaver 8 网页设计与制作 本操作主要介绍使用CSS样式重新定义标签“body”的文本大小、背景颜色和边界的方法。通过本操作的学习，应该掌握的内容主要有： 1.认识【CSS样式】面板 在主菜单中选择【窗口】／【CSS样式】命令，即在【CSS样式】命令前打上“√”，即可打开【CSS样式】面板。如果想关闭【CSS样式】面板，把该命令前的“√”去掉即可。 也可以单击【CSS样式】面板右上角菜单图标，在弹出的菜单中选择【关闭CSS样式】命令，或在面板标题栏上单击鼠标右键，在弹出的快捷菜单中选择【关闭CSS样式】命令来关闭【CSS样式】面板。 项目八： 使用CSS控制购物网页外观 定义“body”的CSS规则操作动画 任务一 任务二 小 结 任务三 实 训 操作一 定义“body”的CSS规则 Dreamweaver 8 网页设计与制作 【CSS样式】面板 项目八： 使用CSS控制购物网页外观 任务一 任务二 小 结 任务三 实 训 Dreamweaver 8 网页设计与制作 操作一 定义“body”的CSS规则 2.重新定义特定标签外观的方法 在【CSS样式】面板中单击 （新建CSS规则）按钮，弹出【新建CSS规则】对话框，在对话框中【选择器类型】选择