网页制作项目08 使用CSS控制购物网页外观课件.ppt

《网页制作项目08 使用CSS控制购物网页外观课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、主讲：网页设计与制作——Dreamweaver8项目八使用CSS控制购物网页外观任务一设置页眉CSS规则任务二设置购物网页主体的CSS样式项目八：使用CSS控制购物网页外观网页设计与制作Dreamweaver8任务一任务二任务三设置页脚的CSS规则小结任务三实训任务一设置页眉CSS规则CSS是“CascadingStyleSheet”的缩写，可译为“层叠样式表”或“级联样式表”。形象地说，CSS可以使直线显示为虚线，可以使表格只显示一条边框，可以使网页背景固定不动，可以使文字产生阴影等效果。可以说，CSS简化了HTML中各种繁琐的标签，扩展了原先的标签功能，能够实现更多的效果。

2、购物网页页眉部分放置的内容通常有站标、网站标题和商品导航栏等。本任务主要介绍购物网页页眉的制作及使用CSS样式控制其外观的基本方法。Dreamweaver8网页设计与制作项目八：使用CSS控制购物网页外观任务一任务二小结任务三实训操作一定义“body”的CSS规则Dreamweaver8网页设计与制作本操作主要介绍使用CSS样式重新定义标签“body”的文本大小、背景颜色和边界的方法。通过本操作的学习，应该掌握的内容主要有：1.认识【CSS样式】面板在主菜单中选择【窗口】／【CSS样式】命令，即在【CSS样式】命令前打上“√”，即可打开【CSS样式】面板。如果想关闭【CSS样式

3、】面板，把该命令前的“√”去掉即可。也可以单击【CSS样式】面板右上角菜单图标，在弹出的菜单中选择【关闭CSS样式】命令，或在面板标题栏上单击鼠标右键，在弹出的快捷菜单中选择【关闭CSS样式】命令来关闭【CSS样式】面板。项目八：使用CSS控制购物网页外观定义“body”的CSS规则操作动画任务一任务二小结任务三实训操作一定义“body”的CSS规则Dreamweaver8网页设计与制作【CSS样式】面板项目八：使用CSS控制购物网页外观任务一任务二小结任务三实训Dreamweaver8网页设计与制作操作一定义“body”的CSS规则2.重新定义特定标签外观的方法在【CSS样式

4、】面板中单击（新建CSS规则）按钮，弹出【新建CSS规则】对话框，在对话框中【选择器类型】选择【标签（重新定义特定标签的外观）】选项，在【标签】下拉列表框中选择需要重新定义样式的标签，如“body”，然后根据需要在【定义在】选项选择适合的选项，最后在【类型】、【背景】、【方框】等对话框中根据需要设置参数即可。项目八：使用CSS控制购物网页外观任务一任务二小结任务三实训Dreamweaver8网页设计与制作操作一定义“body”的CSS规则3.CSS规则的类型在【新建CSS规则】对话框中，CSS样式被划分为3种类型。（1）类（可应用于任何标签）由用户自定义的CSS样式，能够应用到

5、网页中的任何标签上，需要用户手动进行设置。如应用到一个段落标签“p”上，那么一个“class”属性就会被添加到文本块标签上（如“pclass="myStyle"”）。（2）标签（重新定义特定标签的外观）对现有的HTML标签进行重新定义，当创建或改变该样式时，所有应用了该样式的格式都会自动更新。例如，当创建或修改“h1”标签（标题1）的CSS样式时，所有用“h1”标签进行格式化的文本都将被立即更新。项目八：使用CSS控制购物网页外观任务一任务二小结任务三实训Dreamweaver8网页设计与制作操作一定义“body”的CSS规则（3）高级（ID、伪类选择器等）该样式是对某些标签组

6、合（如“tdh2”表示所有在单元格中出现“h2”的标题）或者是含有特定ID属性的标签（如“#myStyle”表示所有属性值中有“ID="myStyle"”的标签）应用样式。样式设置好后，Dreamweaver会自动应用该样式。而“#myStyle1a:visited,#myStyle2a:link,#myStyle3…”表示可以一次性定义相同属性的多个CSS样式。另外，在【定义在】选项中，选择【仅对该文档】选项，将会将新建的CSS规则写入到当前网页文件中，否则将新建的CSS规则保存到扩展名为“*.css”的样式表文件中。项目八：使用CSS控制购物网页外观任务一任务二小结任务三实

7、训Dreamweaver8网页设计与制作操作一定义“body”的CSS规则4.认识【CSS规则定义】对话框（1）【类型】属性对话框【类型】属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等，其中包含9种CSS属性，全部是针对网页中的文本的。项目八：使用CSS控制购物网页外观任务一任务二小结任务三实训Dreamweaver8网页设计与制作操作一定义“body”的CSS规则（2）【背景】属性对话框【背景】分类属性的功能主要是在网页元素后面加入固定的背景颜色或图像。【背景】属性