网页制作:项目08使用CSS控制购物网页外观

网页制作:项目08使用CSS控制购物网页外观

ID:40404057

大小:1016.00 KB

页数:35页

时间:2019-08-01

网页制作:项目08使用CSS控制购物网页外观_第1页
网页制作:项目08使用CSS控制购物网页外观_第2页
网页制作:项目08使用CSS控制购物网页外观_第3页
网页制作:项目08使用CSS控制购物网页外观_第4页
网页制作:项目08使用CSS控制购物网页外观_第5页
资源描述:

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

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样式】面板。如果想关闭【C

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

4、【CSS样式】面板中单击(新建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)【背景】属性对话框【背景】分类属性的功能主要是在网页元素后面加入固定的背景颜色或图像。【背景】属性

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。