《网页设计项目教程_教学课件_ppt 作者 王雪松 项目一ppt 任务_1》由会员分享，可在线阅读，更多相关《网页设计项目教程_教学课件_ppt 作者 王雪松 项目一ppt 任务_1（21页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver网页设计项目教程,机械工业出版社,任务四 利用CSS美化网页6（建议2学时）,任务实施6畅销产品推荐区域制作,1.插入DIV。选择插入面板，点击“布局”“插入DIV”，在弹出的“插入Div标签”对话框中做如图的设置。,背景选项,任务实施6畅销产品推荐区域制作,设置方框选项,生成如下CSS代码,任务实施6畅销产品推荐区域制作,2. 类选择器定义的内容可以在同一页面重复使用。重复使用的方法很简单，就是直接复制代码即可。我们一共复制8个代码，HTML代码如下：,任务实施6畅销产品推荐区域制作,在浏览器中的预览效果如图,任务实施6畅销产品推荐区域制作,3. 设置DIV增加左填充的
2、同时，减少右边界。,任务实施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!,谢谢观赏,
