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

Dreamweaver网页设计项目教程 机械工业出版社 任务四 利用CSS美化网页10（建议2学时） 01 任务实施 02 任务评价 02 触类旁通 任务实施——10上方子导航制作 1.在DIV“topbar”中，插入images文件夹中的“top-bar-bg01.jpg”和“top-bar-bg02.jpg”图片。 2.切换到代码窗口，这里需要添加代码来实现“设为首页”和“加为收藏”的功能。对应代码如下 ： 图片“top-bar-bg01.jpg” 图片“top-bar-bg02.jpg”对应代码如下： 任务实施——10上方子导航制作 任务评价 任务评价参照以下内容进行： CSS样式中各种选择器的命名是否规范 是否分类建立了CSS样式文件 网站的效果与效果图是否一致 链接无空链接、死链接 链接均为有效链接 所有图片均能正常显示 所有文字的字体、字号、颜色是否正常显示 框架有无移位 完成时间限制：熟练之后制作首页的样式可以在3小时内完成，其余页面能在1.5小时内完成。 触类旁通 有了制作首页的基础。我们可以快速开展制作子页面的进度。这里以产品详情页为例，讲述如何快速制作子页面。 1. 新建文件和文件夹。在根目录下新建文件夹，名称为“detail”，在该文件夹中新建文件，名称为“detail.html”。 2. 对比详情页和首页，可以发现，只有右部内容区有所差别，其他的内