资源描述
主讲：,网页设计与制作,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,规则,】,对话框，在对话框中,【,选择器类型,】,选择,【,标签（重新定义特定标签的外观）,】,选项，在,【,标签,】,下拉列表框中选择需要重新定义样式的标签，如“,body”,，然后根据需要在,【,定义在,】,选项选择适合的选项，最后在,【,类型,】,、,【,背景,】,、,【,方框,】,等对话框中根据需要设置参数即可。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,Dreamweaver 8,网页设计与制作,操作一 定义,“,body,”,的CSS规则,3.CSS,规则的类型,在,【,新建,CSS,规则,】,对话框中，,CSS,样式被划分为,3,种类型。,（,1,）类（可应用于任何标签）,由用户自定义的,CSS,样式，能够应用到网页中的任何标签上，需要用户手动进行设置。如应用到一个段落标签“,p”,上，那么一个“,class”,属性就会被添加到文本块标签上（如“,p class=myStyle”,）。,（,2,）标签（重新定义特定标签的外观）,对现有的,HTML,标签进行重新定义，当创建或改变该样式时，所有应用了该样式的格式都会自动更新。例如，当创建或修改“,h1”,标签（标题,1,）的,CSS,样式时，所有用“,h1”,标签进行格式化的文本都将被立即更新。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,Dreamweaver 8,网页设计与制作,操作一 定义,“,body,”,的CSS规则,（,3,）高级（,ID,、伪类选择器等）,该样式是对某些标签组合（如“,td h2”,表示所有在单元格中出现“,h2”,的标题）或者是含有特定,ID,属性的标签（如“,#myStyle”,表示所有属性值中有“,ID=myStyle”,的标签）应用样式。样式设置好后，,Dreamweaver,会自动应用该样式。而“,#myStyle1 a:visited,#myStyle2 a:link,#myStyle3”,表示可以一次性定义相同属性的多个,CSS,样式。,另外，在,【,定义在,】,选项中，选择,【,仅对该文档,】,选项，将会将新建的,CSS,规则写入到当前网页文件中，否则将新建的,CSS,规则保存到扩展名为“*,.css”,的样式表文件中。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,Dreamweaver 8,网页设计与制作,操作一 定义,“,body,”,的CSS规则,4.,认识,【CSS,规则定义,】,对话框,（,1,）,【,类型,】,属性对话框,【,类型,】,属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等，其中包含,9,种,CSS,属性，全部是针对网页中的文本的。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,Dreamweaver 8,网页设计与制作,操作一 定义,“,body,”,的CSS规则,（,2,）,【,背景,】,属性对话框,【,背景,】,分类属性的功能主要是在网页元素后面加入固定的背景颜色或图像。,【,背景,】,属性面板中包含以下,6,种,CSS,属性。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,Dreamweaver 8,网页设计与制作,操作一 定义,“,body,”,的CSS规则,（,3,）,【,区块,】,属性对话框,CSS,中的,【,区块,】,属性指的是网页中的文本、图像和层等替代元素，它主要用于控制块中内容的间距、对齐方式和文字缩进等。该属性面板中包含以下,7,种,CSS,属性。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,Dreamweaver 8,网页设计与制作,操作一 定义,“,body,”,的CSS规则,（,4,）,【,方框,】,属性对话框,【,方框,】,属性包含,6,种,CSS,属性。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,Dreamweaver 8,网页设计与制作,本操作主要是制作购物网页页眉的内容并使用,CSS,样式控制其外观。通过本操作的学习，应该掌握的内容主要有：,1.3,种选择器各自的特点,【,类,】CSS,样式用来存放文档中标签的共同属性，网页元素使用该类,CSS,样式时，需要添加引用。,【,标签,】CSS,样式用来改变或者扩展文档中某些特定的,HTML,标签的属性。,【,高级,】CSS,样式是改变标签组合、命名,ID,标签属性最好的方式。,项目八：,使用,CSS,控制购物网页外观,定义页眉的,CSS,规则操作动画,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,Dreamweaver 8,网页设计与制作,对话框中的,【,定义在,】,选项右侧是两个单选项，它们决定了所创建的,CSS,样式的保存方法。点选,【,仅对该文档,】,单选钮，则将,CSS,样式保存在当前的文档中，包含在文档的头部标签“,”,内。而如果点选,【,新建样式表文件,】,单选按钮，则将新建一个专门用来保存,CSS,样式的文件，它的文件扩展名为“*,.css”,。网页文档要使用样式表文件中的,CSS,样式时，将通过“附加样式表”命令，将,CSS,文件链接或者导入到文档中。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,Dreamweaver 8,网页设计与制作,2.,创建高级CSS样式的方法,以表格为例，首先设置表格,Id,名称，如“,TopTable”,，在表格被选中的状态下，在,【CSS,样式,】,面板中单击 （新建,CSS,规则）按钮，弹出,【,新建,CSS,规则,】,对话框，创建相应名称为“,#TopTable”,的高级,CSS,样式，然后在,【,类型,】,、,【,背景,】,、,【,方框,】,等对话框中根据需要设置参数即可。,要设置表格的,【,填充,】,和,【,间距,】,属性可以通过表格,【,属性,】,面板进行设置，不能通过,【,方框,】,分类中的,【,填充,】,和,【,边界,】,进行设置。对表格应用,【,方框,】,中的,【,边界,】,属性只影响表格本身所在块元素周围的空格填充数量，与表格本身无关。,需要注意的是，在,【,方框,】,分类中的,【,填充,】,和,【,边界,】,选项与表格,【,属性,】,面板中的,【,填充,】,和,【,间距,】,选项是两个不同的概念。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,Dreamweaver 8,网页设计与制作,3.,创建和应用类样式的方法,以单元格为例，在,【CSS,样式,】,面板中单击,（新建,CSS,规则）,按钮，弹出,【,新建,CSS,规则,】,对话框，在,【,选择器类型,】,选项组中点选,【,类（可应用于任何标签）,】,单选按钮，在,【,名称,】,文本框中输入,CSS,样式名称，“,.td_1”,，然后在,【,类型,】,、,【,背景,】,、,【,方框,】,等对话框中根据需要设置参数即可。,CSS,样式定义完毕后，在单元格,【,属性,】,面板的,【,样式,】,下拉列表中选择定义的样式名称，如“,td_1”,，将其应用到单元格上。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,Dreamweaver 8,网页设计与制作,4.,创建基于表格的超级链接高级,CSS,样式的方法,首先设定表格,Id,名称，如“,NavTable”,，然后创建基于该表格的超级链接高级,CSS,样式，如“,#NavTable a:link,#NavTable a:visited”,。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作二 定义页眉的CSS规则,Dreamweaver 8,网页设计与制作,接着创建超级链接悬停效果的高级,CSS,样式“,#NavTable a:hover”,。,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,在本项目制作的购物网页中，购物网页左侧部分仍然是商品的导航栏，中间和右侧部分为具体商品介绍和新品推荐等。本任务主要介绍购物网页主体部分的制作及使用,CSS,样式控制网页外观的基本方法。,Dreamweaver 8,网页设计与制作,任务二 设置购物网页主体的,CSS,样式,项目八：,使用,CSS,控制购物网页外观,任务一,任务二,小 结,任务三,实 训,操作一 设置左侧栏目,CSS,规则,Dreamweaver 8,网页设计与制作,本操作主要是制作购物网页左侧栏目。通过本操作的学习，应该掌握的内容主要有：,1.,左侧栏目标题单元格,CSS,样式的设置方法,创建类样式“,.LeftTableTd”,，在,【.LeftTableTd,的,CSS,规则定义,】,对话框的,【,类型,】,分类中，设置文本大小为“,14,像素”，行高为“,22,像素”，文本颜色为“,#FFFFFF”,。在,【,背景,】,分类中，设置背景图像为“,images/left_top.jpg”,，不重复，水平位置为“左对齐”，
展开阅读全文