项目08 制作购物网页.ppt

实训 制作“嘉家乐”网页 本项目着重介绍了使用Div标签和CSS样式布局网页的基本方法，实训将使用Div标签和CSS样式制作“嘉家乐”网页以进一步巩固其功能的基本应用。 Dreamweaver CS3 网页设计与制作 项目八： 制作购物网页 【实训目的】 进一步掌握插入Div标签的方法。 进一步掌握创建CSS样式的方法。 进一步掌握设置CSS样式的方法。 进一步掌握管理CSS样式的方法。 任务一 任务二 小 结 任务三 实 训 实训 制作“嘉家乐”网页 Dreamweaver CS3 网页设计与制作 项目八： 制作购物网页 任务一 任务二 小 结 任务三 实 训 小结 本项目通过购物网页的制作过程，着重介绍了使用Div标签和CSS样式对网页进行布局的基本方法，包括Div标签的插入和CSS样式的创建、设置、编辑、删除等内容。熟练掌握Div标签和CSS样式的基本操作将会给网页制作带来极大的方便，是需要重点学习和掌握的内容之一。 Dreamweaver CS3 网页设计与制作 项目八： 制作购物网页 任务一 任务二 小 结 任务三 实 训 * 主讲： 网页设计与制作——Dreamweaver CS3 项目八 制作购物网页 任务一 制作页眉 任务二 制作网页主体 项目八： 制作购物网页 网页设计与制作Dreamweaver CS3 任务一 任务二 任务三 制作页脚 小 结 任务三 实 训 任务一 制作页眉 在现代网页布局中，Div标签是经常使用到的。但Div本身只是一个区域标签，不能定位与布局，真正定位的是CSS代码。本任务主要介绍购物网页页眉的制作及使用CSS样式控制其外观的基本方法。 Dreamweaver CS3 网页设计与制作 项目八： 制作购物网页 任务一 任务二 小 结 任务三 实 训 操作一 布局网站标识 Dreamweaver CS3 网页设计与制作 本操作主要介绍插入Div标签以及简单使用CSS样式的基本方法。通过本操作的学习，应该掌握的内容主要有： 1. 插入Div标签 将光标置于文档内，然后在主菜单中选择【插入记录】／【布局对象】／【Div标签】命令（或在【插入】／【布局】面板中单击 按钮）打开【插入Div标签】对话框。 项目八： 制作购物网页 任务一 任务二 小 结 任务三 实 训 操作一 布局网站标识 Dreamweaver CS3 网页设计与制作 项目八： 制作购物网页 任务一 任务二 小 结 任务三 实 训 2.使用Div标签布局网页 使用Div标签布局网页，它的对齐方式只有“左对齐”和“右对齐”，如果要使Div标签居中显示，可以将它的边界，特别是左边界和右边界设置为“自动”即可。 Div标签【属性】面板比较简单，只有【Div ID】和【类】两个下拉菜单项和一个按钮。使用Div标签布局网页必须和CSS相结合，它的大小、背景等内容需要通过CSS来控制。 操作一 布局网站标识 Dreamweaver CS3 网页设计与制作 项目八： 制作购物网页 任务一 任务二 小 结 任务三 实 训 3.认识【CSS样式】面板 在主菜单中选择【窗口】／【CSS样式】命令，即在【CSS样式】命令前打上“√”，即可打开【CSS样式】面板。如果想关闭【CSS样式】面板，把该命令前的“√”去掉即可。 也可以单击【CSS样式】面板右上角菜单图标，在弹出的菜单中选择【关闭CSS样式】命令，或在面板标题栏上单击鼠标右键，在弹出的快捷菜单中选择【关闭CSS样式】命令来关闭【CSS样式】面板。 Dreamweaver CS3 网页设计与制作 操作一 布局网站标识 4.创建CSS样式的方法 在【CSS样式】面板中单击 （新建CSS规则）按钮，弹出【新建CSS规则】对话框，在对话框中选择选择器类型并设置其名称，然后在【定义在】选项中选择CSS样式保存的位置，最后在【类型】等对话框中根据需要设置样式参数即可。 【定义在】选项有两个单选项，它们决定了所创建的CSS样式的保存方法。点选【仅对该文档】单选按钮，则将CSS样式保存在当前的文档中，包含在文档的头部标签“head…/head”内。而如果点选【新建样式表文件】单选按钮，则将新建一个专门用来保存CSS样式的文件，它的文件扩展名为“*.css”。网页文档要使用样式表文件中的CSS样式时，将通过“附加样式表”命令，将CSS文件链接或者导入到文档中。 项目八： 制作购物网页 任务