网页设计项目教程_教学课件_王雪松 项目一 任务4 _2.pptVIP

在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： Dreamweaver网页设计项目教程 机械工业出版社 任务四 利用CSS美化网页6（建议2学时） 01 任务实施 任务实施——6畅销产品推荐区域制作 1.插入DIV。选择插入面板，点击“布局”“插入DIV”，在弹出的“插入Div标签”对话框中做如图的设置。 背景选项 任务实施——6畅销产品推荐区域制作 设置方框选项 生成如下CSS代码 任务实施——6畅销产品推荐区域制作 2. 类选择器定义的内容可以在同一页面重复使用。重复使用的方法很简单，就是直接复制代码即可。我们一共复制8个代码，HTML代码如下： 任务实施——6畅销产品推荐区域制作 在浏览器中的预览效果如图 任务实施——6畅销产品推荐区域制作 3. 设置DIV增加左填充的同时，减少右边界。 任务实施——6畅销产品推荐区域制作 4. 制作畅销产品内容。在DIV“.class”的结束标签之前，插入图片。 任务实施——6畅销产品推荐区域制作 5. 新建CSS样式 任务实施——6畅销产品推荐区域制作 设置方框选项 任务实施——6畅销产品推荐区域制作 设置边框选项 任务实施——6畅销产品推荐区域制作 6. 选中图片cake01.jpg，在下方的属性栏中的“类”选项中选择“classimg”。 生成如下CSS代码 任务实施——6畅销产品推荐区域制作 7. 接下来设置名称，在插入面板中选择“文本”“h2”，在h2/h2标签内输入文字“英格兰1901”。HTML代码为： 8.新建CSS样式规则 任务实施——6畅销产品推荐区域制作 设置方框选项 任务实施——6畅销产品推荐区域制作 设置类型选项 任务实施——6畅销产品推荐区域制作 设置区块选项 任务实施——6畅销产品推荐区域制作 8. 选中文字“英格兰1901”，在下方的属性栏中的“类”选项中选择“class-h2”。图片的说明就设置完成了。生成的CSS代码如下 ： 任务实施——6畅销产品推荐区域制作