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

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

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

3、标，在弹出的菜单中选择【关闭CSS样式】命令，或在面板标题栏上单击鼠标右键，在弹出的快捷菜单中选择【关闭CSS样式】命令来关闭【CSS样式】面板。,项目八： 使用CSS控制购物网页外观,定义“body”的CSS规则操作动画,任务一,任务二,小 结,任务三,实 训,操作一 定义“body”的CSS规则,【CSS样式】面板,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作一 定义“body”的CSS规则,2.重新定义特定标签外观的方法,在【CSS样式】面板中单击 （新建CSS规则）按钮，弹出【新建CSS规则】对话框，在对话框中【选择器类型】选择【标签（重新定义特定

4、标签的外观）】选项，在【标签】下拉列表框中选择需要重新定义样式的标签，如“body”，然后根据需要在【定义在】选项选择适合的选项，最后在【类型】、【背景】、【方框】等对话框中根据需要设置参数即可。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作一 定义“body”的CSS规则,3. CSS规则的类型,在【新建CSS规则】对话框中，CSS样式被划分为3种类型。 （1）类（可应用于任何标签） 由用户自定义的CSS样式，能够应用到网页中的任何标签上，需要用户手动进行设置。如应用到一个段落标签“p”上，那么一个“class”属性就会被添加到文本块标签上（如“p cl

5、ass=myStyle”）。 （2）标签（重新定义特定标签的外观） 对现有的HTML标签进行重新定义，当创建或改变该样式时，所有应用了该样式的格式都会自动更新。例如，当创建或修改“h1”标签（标题1）的CSS样式时，所有用“h1”标签进行格式化的文本都将被立即更新。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作一 定义“body”的CSS规则,（3）高级（ID、伪类选择器等） 该样式是对某些标签组合（如“td h2”表示所有在单元格中出现“h2”的标题）或者是含有特定ID属性的标签（如“#myStyle”表示所有属性值中有“ID=myStyle”的标签）应

6、用样式。样式设置好后，Dreamweaver会自动应用该样式。而“#myStyle1 a:visited,#myStyle2 a:link, #myStyle3”表示可以一次性定义相同属性的多个CSS样式。 另外，在【定义在】选项中，选择【仅对该文档】选项，将会将新建的CSS规则写入到当前网页文件中，否则将新建的CSS规则保存到扩展名为“*.css”的样式表文件中。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作一 定义“body”的CSS规则,4.认识【CSS规则定义】对话框,（1）【类型】属性对话框 【类型】属性主要用于定义网页中文本的字体、大小、颜色、

7、样式及文本链接的修饰线等，其中包含9种CSS属性，全部是针对网页中的文本的。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作一 定义“body”的CSS规则,（2）【背景】属性对话框 【背景】分类属性的功能主要是在网页元素后面加入固定的背景颜色或图像。【背景】属性面板中包含以下6种CSS属性。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作一 定义“body”的CSS规则,（3）【区块】属性对话框 CSS中的【区块】属性指的是网页中的文本、图像和层等替代元素，它主要用于控制块中内容的间距、对齐方式和文字缩进等。该属性面板中

8、包含以下7种CSS属性。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作一 定义“body”的CSS规则,（4）【方框】属性对话框 【方框】属性包含6种CSS属性。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,本操作主要是制作购物网页页眉的内容并使用CSS样式控制其外观。通过本操作的学习，应该掌握的内容主要有：,1. 3种选择器各自的特点,【类】CSS样式用来存放文档中标签的共同属性，网页元素使用该类CSS样式时，需要添加引用。 【标签】CSS样式用来改变或者扩展文档中某些特定的HTML标签的属

9、性。 【高级】CSS样式是改变标签组合、命名ID标签属性最好的方式。,项目八： 使用CSS控制购物网页外观,定义页眉的CSS规则操作动画,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,对话框中的【定义在】选项右侧是两个单选项，它们决定了所创建的CSS样式的保存方法。点选【仅对该文档】单选钮，则将CSS样式保存在当前的文档中，包含在文档的头部标签“”内。而如果点选【新建样式表文件】单选按钮，则将新建一个专门用来保存CSS样式的文件，它的文件扩展名为“*.css”。网页文档要使用样式表文件中的CSS样式时，将通过“附加样式表”命令，将CSS文件链接或者导入到文档中。,项目八

10、： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,2. 创建高级CSS样式的方法,以表格为例，首先设置表格Id名称，如“TopTable”，在表格被选中的状态下，在【CSS样式】面板中单击 （新建CSS规则）按钮，弹出【新建CSS规则】对话框，创建相应名称为“#TopTable”的高级CSS样式，然后在【类型】、【背景】、【方框】等对话框中根据需要设置参数即可。,要设置表格的【填充】和【间距】属性可以通过表格【属性】面板进行设置，不能通过【方框】分类中的【填充】和【边界】进行设置。对表格应用【方框】中的【边界】属性只影响表格本身所在块元素周围

11、的空格填充数量，与表格本身无关。,需要注意的是，在【方框】分类中的【填充】和【边界】选项与表格【属性】面板中的【填充】和【间距】选项是两个不同的概念。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,3.创建和应用类样式的方法,以单元格为例，在【CSS样式】面板中单击 （新建CSS规则）按钮，弹出【新建CSS规则】对话框，在【选择器类型】选项组中点选【类（可应用于任何标签）】单选按钮，在【名称】文本框中输入CSS样式名称，“.td_1”，然后在【类型】、【背景】、【方框】等对话框中根据需要设置参数即可。CSS样式定义完毕后，在单元格【

12、属性】面板的【样式】下拉列表中选择定义的样式名称，如“td_1”，将其应用到单元格上。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,4.创建基于表格的超级链接高级CSS样式的方法,首先设定表格Id名称，如“NavTable”，然后创建基于该表格的超级链接高级CSS样式，如“#NavTable a:link,#NavTable a:visited”。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,接着创建超级链接悬停效果的高级CSS样式“#NavTable a:hover

13、”。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,在本项目制作的购物网页中，购物网页左侧部分仍然是商品的导航栏，中间和右侧部分为具体商品介绍和新品推荐等。本任务主要介绍购物网页主体部分的制作及使用CSS样式控制网页外观的基本方法。,任务二 设置购物网页主体的CSS样式,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作一 设置左侧栏目CSS规则,本操作主要是制作购物网页左侧栏目。通过本操作的学习，应该掌握的内容主要有：,1.左侧栏目标题单元格CSS样式的设置方法,创建类样式“.LeftTableTd”，在【.LeftTableT

14、d的CSS规则定义】对话框的【类型】分类中，设置文本大小为“14像素”，行高为“22像素”，文本颜色为“#FFFFFF”。在【背景】分类中，设置背景图像为“images/left_top.jpg”，不重复，水平位置为“左对齐”，垂直位置为“居中”。在【方框】分类中，设置【左】填充为“10像素”。最后通过【属性】面板的【样式】下拉列表，将“.LeftTableTd”样式应用到表格的标题单元格上。,项目八： 使用CSS控制购物网页外观,设置左侧栏目和CSS规则操作动画,任务一,任务二,小 结,任务三,实 训,操作一 设置左侧栏目CSS规则,2.左侧栏目内容单元格CSS样式的设置方法,选定单元格，右

15、键单击文档左下角的“”标签，在弹出的快捷菜单中选择【快速标签编辑器】命令，打开快速标签编辑器，在其中添加ID名称，如“id=”LeftTableNavTD”，然后分别选定其他单元格，并右键单击文档左下角的“”标签，在弹出的快捷菜单中选择【设置ID】【LeftTableNavTD】命令即可设置与上一单元格相同的ID。最后创建基于该单元格的超级链接高级CSS样式“#LeftTableNavTD a:link, #LeftTableNavTD a:visited”和“#LeftTableNavTD a:hover”。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作

16、一 设置左侧栏目CSS规则,在本操作中，没有设置CSS样式之前，左侧偶数单元格中的内容是“挤”在一起的，当为命名ID的单元格设置样式以后，每个带链接的文本都成行排列，这主要是由于设置了【区块】分类中的【显示】属性为“块”，这是设置文本链接的技巧。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 设置中间栏目的CSS规则,本操作主要是制作购物网页中间部分的内容。通过本操作的学习，应该掌握的内容主要有：,网页元素边框的效果是在【CSS规则定义】对话框的【边框】分类对话框中进行设置的，该属性对话框中共包括3种CSS属性。 【样式】：属性名为“border-sty

17、le”，用于设定边框线的样式，包括【无】（none，无边框）、【虚线】（dotted，边框为点线）、【点划线】（dashed，边框为长短线）、【实线】（solid，边框为实线）、【双线】（double，边框为双线）、【槽状】（groove）、【脊状】（ridge）、【凹陷】（inset）、【凸出】（outset，前面4种选择根据不同颜色设置不同的三维效果）9个选项。,项目八： 使用CSS控制购物网页外观,设置中间栏目的CSS规则操作动画,任务一,任务二,小 结,任务三,实 训,操作二 设置中间栏目的CSS规则,【宽度】：属性名为“border-width”，用于控制边框的宽度，包括【上】（bo

18、rder-top-width，顶边框的宽度）、【右】（border-right-width，右边框的宽度）、【下】（border-bottom-width，底边框的宽度）、【左】（border-left-width，左边框的宽度）4个选项。 【颜色】：属性名为“border-color”，用于设置各边框的颜色。如果想使边框的4条边显示不同的颜色，可以在设置中分别列出各种颜色，如顶边框的颜色（border-top-color: #FF0000），右边框的颜色（border-right-color: #00FF00），底边框的颜色（border-bottom-color: #0000FF），左边框

19、的颜色（border-left-color: #FFFF00）。浏览器将第1种颜色理解为顶边框的颜色参数值，第2种颜色为右边框，然后是底边框，最后是左边框。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 设置中间栏目的CSS规则,【边框】分类对话框,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作三 设置右侧栏目的CSS规则,本操作主要是制作购物网页右铡部分的内容。通过本操作的学习，应该掌握的内容主要有：,1. 【列表】属性对话框,用于控制列表内的各项元素，包含以下3种CSS属性。 （1）【类型】属性用于确定列表内每一项

20、前使用的符号。 （2）【项目符号图像】作用是将列表前面的符号换为图形。 （3）【位置】属性用于描述列表的位置，有【外】（在方框之外显示）和【内】（在方框之内显示）两个选项。,项目八： 使用CSS控制购物网页外观,设置右侧栏目的CSS规则操作动画,任务一,任务二,小 结,任务三,实 训,操作三 设置右侧栏目的CSS规则,2. 【定位】属性对话框,可疑使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于一些浮动元素（如层）来说，却是有效地、用于精确控制其位置的方法。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作三 设置右侧栏目的CSS

21、规则,3. 【扩展】属性对话框,包含两部分：【分页】的作用是为打印的页面设置分页符；【视觉效果】的作用是为网页中的元素施加特殊效果，其中【光标】选项可以指定在某个元素上要使用的光标形状，【滤镜】可以为网页元素施加多种特殊的显示效果，如阴影、模糊、透明、光晕等。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,任务三 设置页脚的CSS规则,本任务主要是制作购物网页页脚部分的内容。通过本任务的学习，应该掌握的内容主要有：,1. 通过CSS样式制作方框效果的方法,创建类样式“.FootP”，在CSS规则定义对话框的【类型】分类中设置【行高】为“40像素”，在【背景】分类

22、中设置背景颜色为“#3DA4A3”，在【方框】分类中设置宽度为“775像素”，边界均为“0”，在【边框】分类中设置所有边框样式均为“实线”，宽度为“1像素”，颜色为“#0082FE”。将光标置于页脚文本上，然后在【属性】面板的【样式】下拉列表中选择“FootP”，即实现如图所示效果。,项目八： 使用CSS控制购物网页外观,设置页脚的CSS规则操作动画,任务一,任务二,小 结,任务三,实 训,任务三 设置页脚的CSS规则,2. 修改CSS样式的方法,（1）第1种是在【CSS样式】面板中双击样式名称，或先选中样式再单击面板底部的 （编辑）按钮，或在鼠标右键快捷菜单中选择【编辑】命令打开【CSS规则

23、定义】对话框进行可视化定义或修改。 （2）第2种是在【CSS样式】面板中先选中样式名称，然后在【CSS样式】面板的属性列表框中进行定义或修改。 （3）第3种是在【CSS样式】面板中用鼠标右键单击样式名称，在其快捷菜单中选择【转到代码】命令将进入文档中源代码处，可以直接修改源代码。,项目八： 使用CSS控制购物网页外观,任务一,任务二,小 结,任务三,实 训,任务三 设置页脚的CSS规则,3. 删除CSS样式的方法,（1）第1种是在【CSS样式】面板中先选中样式名称再单击面板底部的 （删除）按钮进行删除。 （2）第2种是在【CSS样式】面板中用鼠标右键单击样式名称，在其快捷菜单中选择【删除】命令。 （3）第3种是在【CSS样式】面板中用鼠标右键单击样式名称，在其快捷菜单中选择【转到代码】命令进入文档源代码处，直接删除源代码。,4.对样式重新命名的方法,在【CSS样式】面板中用鼠标右键单击样式名称，在其快捷菜单中选择【重命名】命令或直接在源代码中进行修改。,项目八： 使用CSS控制购物网