Dreamweaver网页设计任务4-6.ppt

1、DreamweaverDreamweaver网页设计项目教程网页设计项目教程机械工业出版社机械工业出版社任务四 利用CSS美化网页6（建议2学时）01任务实施任务实施6畅销产品推荐区域制作1.插入DIV。选择插入面板，点击“布局”“插入DIV”，在弹出的“插入Div标签”对话框中做如图的设置。背景选项 任务实施6畅销产品推荐区域制作设置方框选项 生成如下CSS代码 任务实施6畅销产品推荐区域制作2.类选择器定义的内容可以在同一页面重复使用。重复使用的方法很简单，就是直接复制代码即可。我们一共复制8个代码，HTML代码如下：任务实施6畅销产品推荐区域制作在浏览器中的预览效果如图 任务实施6畅销产

2、品推荐区域制作3.设置DIV增加左填充的同时，减少右边界。任务实施6畅销产品推荐区域制作4.制作畅销产品内容。在DIV“.class”的结束标签之前，插入图片。任务实施6畅销产品推荐区域制作5.新建CSS样式 任务实施6畅销产品推荐区域制作设置方框选项 任务实施6畅销产品推荐区域制作设置边框选项 任务实施6畅销产品推荐区域制作6.选中图片cake01.jpg，在下方的属性栏中的“类”选项中选择“classimg”。生成如下CSS代码 任务实施6畅销产品推荐区域制作7.接下来设置名称，在插入面板中选择“文本”“h2”，在标签内输入文字“英格兰1901”。HTML代码为：8.新建CSS样式规则任务实施6畅销产品推荐区域制作设置方框选项 任务实施6畅销产品推荐区域制作设置类型选项 任务实施6畅销产品推荐区域制作设置区块选项 任务实施6畅销产品推荐区域制作8.选中文字“英格兰1901”，在下方的属性栏中的“类”选项中选择“class-h2”。图片的说明就设置完成了。生成的CSS代码如下：任务实施6畅销产品推荐区域制作效果如图所示 采用相同的方法，填充所有的畅销产品区域。如图所示：任务实施6畅销产品推荐区域制作Thank you!谢谢观赏