项目08制作购物网页

1、主讲：主讲：网页设计与制作Dreamweaver CS3项目八 制作购物网页任务一 制作页眉任务二 制作网页主体项目八：项目八： 制作购物网页制作购物网页网 页 设 计 与 制 作Dreamweaver CS3任务一任务二任务三 制作页脚小 结任务三实 训任务一 制作页眉 在现代网页布局中，Div标签是经常使用到的。但Div本身只是一个区域标签，不能定位与布局，真正定位的是CSS代码。本任务主要介绍购物网页页眉的制作及使用CSS样式控制其外观的基本方法。Dreamweaver CS3网 页 设 计 与 制 作项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训操作一 布局网

2、站标识Dreamweaver CS3网 页 设 计 与 制 作本操作主要介绍插入本操作主要介绍插入Div标签以及简单使用标签以及简单使用CSS样式的基样式的基本方法。通过本操作的学习，应该掌握的内容主要有：本方法。通过本操作的学习，应该掌握的内容主要有： 1. 插入Div标签 将光标置于文档内，然后在主菜单中选择将光标置于文档内，然后在主菜单中选择【插入记录插入记录】【布局对象布局对象】【Div标签标签】命令（或在命令（或在【插入插入】【布局布局】面面板中单击板中单击 按钮）打开按钮）打开【插入插入Div标签标签】对话框对话框。项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三

3、实 训操作一 布局网站标识Dreamweaver CS3网 页 设 计 与 制 作项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训2.使用Div标签布局网页 使用使用Div标签布局网页，它的对齐方式只有标签布局网页，它的对齐方式只有“左对齐左对齐”和和“右对齐右对齐”，如果要使，如果要使Div标签居中显示，可以将它的边界，特标签居中显示，可以将它的边界，特别是左边界和右边界设置为别是左边界和右边界设置为“自动自动”即可。即可。 Div标签标签【属性属性】面板比较简单，只有面板比较简单，只有【Div ID】和和【类类】两个下拉菜单项和一个按钮。使用两个下拉菜单项和一个按钮

4、。使用Div标签布局网页必须和标签布局网页必须和CSS相结合，它的大小、背景等内容需要通过相结合，它的大小、背景等内容需要通过CSS来控制。来控制。 操作一 布局网站标识Dreamweaver CS3网 页 设 计 与 制 作项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训3.认识【CSS样式】面板 在主菜单中选择在主菜单中选择【窗口窗口】【CSS样式样式】命令，即在命令，即在【CSS样样式式】命令前打上命令前打上“”，即可打开，即可打开【CSS样式样式】面板。如果想关面板。如果想关闭闭【CSS样式样式】面板，把该命令前的面板，把该命令前的“”去掉即可。去掉即可。 也可

5、以单击也可以单击【CSS样式样式】面板右上角菜单图标，在弹出的菜面板右上角菜单图标，在弹出的菜单中选择单中选择【关闭关闭CSS样式样式】命令，或在面板标题栏上单击鼠标右命令，或在面板标题栏上单击鼠标右键，在弹出的快捷菜单中选择键，在弹出的快捷菜单中选择【关闭关闭CSS样式样式】命令来关闭命令来关闭【CSS样式样式】面板。面板。Dreamweaver CS3网 页 设 计 与 制 作操作一 布局网站标识4.创建CSS样式的方法 在在【CSS样式样式】面板中单击面板中单击 （新建（新建CSS规则）按钮，弹出规则）按钮，弹出【新建新建CSS规则规则】对话框，在对话框中选择选择器类型并设置其对话框，在

6、对话框中选择选择器类型并设置其名称，然后在名称，然后在【定义在定义在】选项中选择选项中选择CSS样式保存的位置，样式保存的位置，最后最后在在【类型类型】等对话框中根据需要设置样式参数即可。等对话框中根据需要设置样式参数即可。 【定义在定义在】选项有两个单选项，它们决定了所创建的选项有两个单选项，它们决定了所创建的CSS样样式的保存方法。点选式的保存方法。点选【仅对该文档仅对该文档】单选按钮，则将单选按钮，则将CSS样式保样式保存在当前的文档中，包含在文档的头部标签存在当前的文档中，包含在文档的头部标签“”内。而如果点选内。而如果点选【新建样式表文件新建样式表文件】单选按钮，则将新建一个专单选按

7、钮，则将新建一个专门用来保存门用来保存CSS样式的文件，它的文件扩展名为样式的文件，它的文件扩展名为“*.css”。网页。网页文档要使用样式表文件中的文档要使用样式表文件中的CSS样式时，将通过样式时，将通过“附加样式表附加样式表”命令，将命令，将CSS文件链接或者导入到文档中。文件链接或者导入到文档中。 项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作一 布局网站标识项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训操作二 布局导航栏Dreamweaver CS3网 页 设 计 与 制

8、作本操作主要介绍使用本操作主要介绍使用Div标签和标签和CSS样式布局导航栏的基本方法。样式布局导航栏的基本方法。通过本操作的学习，应该掌握的内容主要有：通过本操作的学习，应该掌握的内容主要有： 1. 什么是CSS样式 CSS是是“Cascading Style Sheet”的缩写，可译为的缩写，可译为“层叠样层叠样式表式表”或或“级联样式表级联样式表”。形象地说，。形象地说，CSS可以使直线显示为虚可以使直线显示为虚线，可以使表格只显示一条边框，可以使网页背景固定不动，可线，可以使表格只显示一条边框，可以使网页背景固定不动，可以使文字产生阴影等效果。可以说，以使文字产生阴影等效果。可以说，C

9、SS简化了简化了HTML中各种烦中各种烦琐的标签，扩展了原先的标签功能，能够实现更多的效果。琐的标签，扩展了原先的标签功能，能够实现更多的效果。 项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作二 布局导航栏2. CSS规则的类型 在在【新建新建CSS规则规则】对话框中，对话框中，CSS样式被划分为样式被划分为3种类型。种类型。（1）类（可应用于任何标签）类（可应用于任何标签） 由用户自定义的由用户自定义的CSS样式，能够应用到网页中的任何标签上，样式，能够应用到网页中的任何标签上，需要用户手动进行设置。如应用

10、到一个段落标签需要用户手动进行设置。如应用到一个段落标签“p”上，那么一上，那么一个个“class”属性就会被添加到文本块标签上（如属性就会被添加到文本块标签上（如“p class=myStyle”）。）。（2）标签（重新定义特定标签的外观）标签（重新定义特定标签的外观） 对现有的对现有的HTML标签进行重新定义，当创建或改变该样式时，标签进行重新定义，当创建或改变该样式时，所有应用了该样式的格式都会自动更新。例如，当创建或修改所有应用了该样式的格式都会自动更新。例如，当创建或修改“h1”标签（标题标签（标题1）的）的CSS样式时，所有用样式时，所有用“h1”标签进行格式标签进行格式化的文本都

11、将被立即更新。化的文本都将被立即更新。项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作二 布局导航栏（3）高级（）高级（ID、伪类选择器等）、伪类选择器等） 该样式是对某些标签组合（如该样式是对某些标签组合（如“td h2”表示所有在单元格中表示所有在单元格中出现出现“h2”的标题）或者是含有特定的标题）或者是含有特定ID属性的标签（如属性的标签（如“#myStyle”表示所有属性值中有表示所有属性值中有“ID=myStyle”的标签）应用的标签）应用样式。样式设置好后，样式。样式设置好后，Dreamweave

12、r会自动应用该样式。而会自动应用该样式。而“#myStyle1 a:visited,#myStyle2 a:link, #myStyle3”表示可以一表示可以一次性定义相同属性的多个次性定义相同属性的多个CSS样式。样式。 另外，在另外，在【定义在定义在】选项中，选择选项中，选择【仅对该文档仅对该文档】选项，将选项，将会将新建的会将新建的CSS规则写入到当前网页文件中，否则将新建的规则写入到当前网页文件中，否则将新建的CSS规则保存到扩展名为规则保存到扩展名为“*.css”的样式表文件中。的样式表文件中。项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweav

13、er CS3网 页 设 计 与 制 作操作二 布局导航栏3.认识【CSS规则定义】对话框（1）【类型类型】属性对话框属性对话框 【类型类型】属性主要用于定义网页中文本的字体、大小、颜色、属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等，所包含的样式及文本链接的修饰线等，所包含的9种种CSS属性，全部是针属性，全部是针对网页中的文本的。对网页中的文本的。项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作二 布局导航栏（2）【背景背景】属性对话框属性对话框 【背景背景】分类属性的功能主要是在网页

14、元素后面加入背景颜分类属性的功能主要是在网页元素后面加入背景颜色或背景图像。色或背景图像。项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作二 布局导航栏（3）【区块区块】属性对话框属性对话框 CSS中的中的【区块区块】属性指的是网页中的文本、图像和层等替属性指的是网页中的文本、图像和层等替代元素，它主要用于控制块中内容的间距、对齐方式和文字缩进代元素，它主要用于控制块中内容的间距、对齐方式和文字缩进等。等。项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网

15、页 设 计 与 制 作操作二 布局导航栏项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训（4）【方框方框】属性对话框属性对话框 CSS将网页中所有的块元素都看作是包含在一个方框中的，将网页中所有的块元素都看作是包含在一个方框中的，这个方框共分为这个方框共分为4个部分：方框、填充、边界和边框个部分：方框、填充、边界和边框。【方框方框】属性主要用来定义方框、填充、边界属性主要用来定义方框、填充、边界3个部分。个部分。操作二 布局导航栏Dreamweaver CS3网 页 设 计 与 制 作4. 3种选择器各自的特点 【类类】CSS样式用来存放文档中标签的共同属性，网页元素样

16、式用来存放文档中标签的共同属性，网页元素使用该类使用该类CSS样式时，需要添加引用。样式时，需要添加引用。 【标签标签】CSS样式用来改变或者扩展文档中某些特定的样式用来改变或者扩展文档中某些特定的HTML标签的属性。标签的属性。 【高级高级】CSS样式是改变标签组合、命名样式是改变标签组合、命名ID标签属性最好的标签属性最好的方式。方式。项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训操作二 布局导航栏Dreamweaver CS3网 页 设 计 与 制 作5. 创建高级CSS样式的方法 在在【CSS样式样式】面板中直接创建高级面板中直接创建高级CSS样式的方法是，单

17、样式的方法是，单击击 （新建（新建CSS规则）按钮，弹出规则）按钮，弹出【新建新建CSS规则规则】对话框，选对话框，选择择【高级高级】选项。在选项。在【选择器选择器】列表框中输入高级列表框中输入高级CSS样式名称，样式名称，如如“#navigate”，然后在，然后在【定义在定义在】选项中定义选项中定义CSS样式的保存样式的保存位置，最后单击位置，最后单击 按钮打开按钮打开【CSS规则定义规则定义】对话框根据对话框根据需要设置参数即可。需要设置参数即可。 项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训操作二 布局导航栏Dreamweaver CS3网 页 设 计 与 制

18、 作 超级链接的高级超级链接的高级CSS样式是经常用到的，平时使用时通常定义两组：样式是经常用到的，平时使用时通常定义两组：一组是当前和已访问状态，另一组是鼠标悬停状态。如果一个页面有多一组是当前和已访问状态，另一组是鼠标悬停状态。如果一个页面有多种形式的超级链接样式，为了区别，定义时需要在其前面加限制成分，种形式的超级链接样式，为了区别，定义时需要在其前面加限制成分，例如：例如：“#navigate a:link,#navigate a:visited” 和和“#navigate a:hover”，其中其中“navigate”为导航栏为导航栏Div标签的名称，这就是说只有名称为标签的名称，这

19、就是说只有名称为“navigate”的的Div标签内的超级链接才应用该样式。如果超级链接所在标签内的超级链接才应用该样式。如果超级链接所在的对象使用了类样式，在定义超级链接的高级的对象使用了类样式，在定义超级链接的高级CSS样式时，也可以使用样式时，也可以使用类名称作限制成分，例如：类名称作限制成分，例如：“.tdstyle a:link,.tdstyle a:visited”和和“.tdstyle a:hover”（类名称前的点是不能丢的），这就是说，只有应用（类名称前的点是不能丢的），这就是说，只有应用了类了类CSS样式样式“.tdstyle ”的对象内的超级链接才应用该超级链接样式。的对

20、象内的超级链接才应用该超级链接样式。项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训 在本项目制作的购物网页中，购物网页在本项目制作的购物网页中，购物网页左侧部分仍然是商品的导航栏，中间和右侧左侧部分仍然是商品的导航栏，中间和右侧部分为具体商品介绍和新品推荐等。本任务部分为具体商品介绍和新品推荐等。本任务主要介绍购物网页主体部分的制作及使用主要介绍购物网页主体部分的制作及使用CSS样式控制网页外观的基本方法。样式控制网页外观的基本方法。Dreamweaver CS3网 页 设 计 与 制 作任务二 制作网页主体项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结

21、任务三实 训操作一 制作左侧栏目Dreamweaver CS3网 页 设 计 与 制 作 本操作主要是制作购物网页左侧栏目。通过本操作的学习，本操作主要是制作购物网页左侧栏目。通过本操作的学习，应该掌握的内容主要有：应该掌握的内容主要有： 1. 【边框】分类对话框【边框边框】分类对话框主要用于设置网页元素的边框效果。分类对话框主要用于设置网页元素的边框效果。项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作一 制作左侧栏目2.创建和应用类样式的方法项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三

22、实 训 在在【CSS样式样式】面板中单击面板中单击 （新建（新建CSS规则）按钮，弹出规则）按钮，弹出【新建新建CSS规则规则】对话框，在对话框，在【选择器类型选择器类型】选项中选择选项中选择【类类】单选按钮，在单选按钮，在【名称名称】文本框中输入文本框中输入CSS样式名称样式名称“.leftdiv”，单，单击击 按钮后在按钮后在【CSS规则定义规则定义】对话框中根据需要设置参对话框中根据需要设置参数即可。数即可。CSS样式定义完毕后，在单元格样式定义完毕后，在单元格【属性属性】面板的面板的【样式样式】下拉列表中选择定义的样式名称下拉列表中选择定义的样式名称“leftdiv”，将其应用到对象上

23、。，将其应用到对象上。 Dreamweaver CS3网 页 设 计 与 制 作操作一 制作左侧栏目项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训3.【改变属性】行为 选中选中Div标签标签“mainleft-1”，然后选择，然后选择【窗口窗口】【行为行为】命令打开命令打开【行为行为】面板，单击面板，单击 按钮，在弹出的菜单中选择按钮，在弹出的菜单中选择【改变属性改变属性】命令打开命令打开【改变属性改变属性】对话框并进行参数设置，最对话框并进行参数设置，最后在后在【行为行为】面板中将触发事件设置为面板中将触发事件设置为“onMouseOver”。运用。运用同样的方法再

24、添加一次该行为，中将触发事件设置为同样的方法再添加一次该行为，中将触发事件设置为“onMouseOut”。注意两次设置的背景颜色不一样，触发事件也。注意两次设置的背景颜色不一样，触发事件也不一样。不一样。Dreamweaver CS3网 页 设 计 与 制 作操作一 制作左侧栏目项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作二 制作右侧栏目 本操作主要是制作购物网页右侧部分的内容。通过本操作的本操作主要是制作购物网页右侧部分的内容。通过本操作的学习，应该掌握的内容主要有：学习，应该掌握的内容主要有：1. CS

25、S样式与表格的结合 在本部分，应进一步熟悉如何使用在本部分，应进一步熟悉如何使用CSS样式控制表格及其单样式控制表格及其单元格的样式，包括两种方式：元格的样式，包括两种方式：（1）ID名称高级名称高级CSS样式，样式， 即利即利用表格和单元格的用表格和单元格的ID名称定义高级名称定义高级CSS样式，但这种方式只能用样式，但这种方式只能用1次，在实际网页制作中应用的情况相对少；（次，在实际网页制作中应用的情况相对少；（2）类）类CSS样式，样式，即创建通用的类即创建通用的类CSS样式，将其应用到表格或单元格上，这是比样式，将其应用到表格或单元格上，这是比较好的方式，也是比较常用的方式，因为它可以

26、反复被引用。较好的方式，也是比较常用的方式，因为它可以反复被引用。 项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作二 制作右侧栏目2. 【列表】属性对话框项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训 用于控制列表内的各项元素，包含以下用于控制列表内的各项元素，包含以下3种种CSS属性。属性。 （1）【类型类型】属性用于确定列表内每一项前使用的符号。属性用于确定列表内每一项前使用的符号。 （2）【项目符号图像项目符号图像】作用是将列表前面的符号换为图形。作用是将列表前面的符号换为图形

27、。 （3）【位置位置】属性用于描述列表的位置，有属性用于描述列表的位置，有【外外】（在方框（在方框之外显示）和之外显示）和【内内】（在方框之内显示）两个选项。（在方框之内显示）两个选项。Dreamweaver CS3网 页 设 计 与 制 作操作二 制作右侧栏目3. 【定位】属性对话框 可疑使网页元素随处浮动，这对于一些固定元素（如表格）可疑使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于一些浮动元素（如来说，是一种功能的扩展，而对于一些浮动元素（如AP Div）来）来说，却是有效地、用于精确控制其位置的方法。说，却是有效地、用于精确控制其位置的方法。 项目八：项

28、目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作二 制作右侧栏目4. 【扩展】属性对话框 包含两部分：包含两部分：【分页分页】的作用是为打印的页面设置分页符；的作用是为打印的页面设置分页符；【视觉效果视觉效果】的作用是为网页中的元素施加特殊效果，其中的作用是为网页中的元素施加特殊效果，其中【光光标标】选项可以指定在某个元素上要使用的光标形状，选项可以指定在某个元素上要使用的光标形状，【滤镜滤镜】可可以为网页元素施加多种特殊的显示效果，如阴影、模糊、透明、以为网页元素施加多种特殊的显示效果，如阴影、模糊、透明、光晕等。光晕

29、等。 项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作任务三 制作页脚 本任务主要是制作购物网页页脚部分的内容。通过本任务的本任务主要是制作购物网页页脚部分的内容。通过本任务的学习，应该掌握的内容主要有：学习，应该掌握的内容主要有：1. 关于标签CSS样式 前面已经介绍了高级前面已经介绍了高级CSS样式和类样式和类CSS样式的创建方法，关样式的创建方法，关于标签于标签CSS样式的创建过程类似，只不过它是重新定义现有标签样式的创建过程类似，只不过它是重新定义现有标签的的CSS样式。这种方法用的场合比较少，因为一旦定义

30、了该种样样式。这种方法用的场合比较少，因为一旦定义了该种样式，网页中的所有对应的式，网页中的所有对应的HTML标签都将应用该样式，这必将破标签都将应用该样式，这必将破坏整个网页的外观。如果该种样式是放在单独的坏整个网页的外观。如果该种样式是放在单独的CSS样式表文件样式表文件中，那影响范围就更大了，所以通常不建议使用标签中，那影响范围就更大了，所以通常不建议使用标签CSS样式。样式。这也是本部分为什么创建高级这也是本部分为什么创建高级CSS样式样式“#foot p”，而不创建标签，而不创建标签CSS样式样式“p”的原因。当然，如果创建类的原因。当然，如果创建类CSS样式来控制样式来控制“p”更

31、更好。好。项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作任务三 制作页脚2. 修改CSS样式的方法 （1）第）第1种是在种是在【CSS样式样式】面板中双击样式名称，或先选面板中双击样式名称，或先选中样式再单击面板底部的中样式再单击面板底部的 （编辑）按钮，或在鼠标右键快捷菜（编辑）按钮，或在鼠标右键快捷菜单中选择单中选择【编辑编辑】命令打开命令打开【CSS规则定义规则定义】对话框进行可视化对话框进行可视化定义或修改。定义或修改。 （2）第）第2种是在种是在【CSS样式样式】面板中先选中样式名称，然后面板中先选中样

32、式名称，然后在在【CSS样式样式】面板的属性列表框中进行定义或修改。面板的属性列表框中进行定义或修改。 （3）第）第3种是在种是在【CSS样式样式】面板中用鼠标右键单击样式名面板中用鼠标右键单击样式名称，在其快捷菜单中选择称，在其快捷菜单中选择【转到代码转到代码】命令将进入文档中源代码命令将进入文档中源代码处，可以直接修改源代码。处，可以直接修改源代码。项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作任务三 制作页脚3. 删除CSS样式的方法 （1）第）第1种是在种是在【CSS样式样式】面板中先选中样式名称再单击面

33、板中先选中样式名称再单击面板底部的面板底部的 （删除）按钮进行删除。（删除）按钮进行删除。 （2）第）第2种是在种是在【CSS样式样式】面板中用鼠标右键单击样式名面板中用鼠标右键单击样式名称，在其快捷菜单中选择称，在其快捷菜单中选择【删除删除】命令。命令。 （3）第）第3种是在种是在【CSS样式样式】面板中用鼠标右键单击样式名面板中用鼠标右键单击样式名称，在其快捷菜单中选择称，在其快捷菜单中选择【转到代码转到代码】命令进入文档源代码处，命令进入文档源代码处，直接删除源代码。直接删除源代码。4.对样式重新命名的方法 在在【CSS样式样式】面板中用鼠标右键单击样式名称，在其快捷面板中用鼠标右键单击样式名称，在其快捷菜单中选择菜单中选择【重命名重命名】命令或直接在源代码中进行修改。命令或直接在源代码中进行修改。 项目八：项目八： 制作购物网页制作购物网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作任务三 设置页脚的CSS规则5.应用CSS样式的方式 应用应用CSS样式包括自定义样式包括自定义CSS样式的应用和链接外部样式的应用和链接外部CSS样式样式的应用两种方式。在的应用两种方式。在CSS样式中的样式中的HTML标签样式和标签样式和C