在线教务辅导网：http:/www.shangfuwang.com,教材其余课件及动画素材请查阅在线教务辅导网,QQ:349134187 或者直接输入下面地址：,http:/shop106150152.taobao.com,Dreamweaver网页设计项目教程,机械工业出版社,任务四 利用CSS美化网页10（建议2学时）,任务实施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. 对比详情页和首页，可以发现，只有右部内容区有所差别，其他的内容都是一样的。因此我们仅需要制作右侧内容区就可以了。,3. 导入CSS样式表。以链接的方式添加样式表文件“layout.css”、“style.css”。 4. 复制代码。打开“index.html”页面，转到代码窗口，复制代码如下：（注意，一定要去掉DIV“right”的全部内容。）插入到标签之间。 5. 。很多图片都没有正常显示。这是由于我们采用的是相对路径进行图片的链接，因此由于detail.html的路径和index.html的路径发生变化所导致的。我们需要一一重新更新路径。,触类旁通,6.制作右侧内容区。本页面的右侧内容区与首页不同，需要单独制作。新建CSS样式.,触类旁通,设置背景选项,触类旁通,设置方框选项,触类旁通,7. 在DIV“det-right”开始标签之后，插入h1标签，并输入文字。代码如下：,8. 定义标签的样式。,触类旁通,设置背景选项,触类旁通,设置方框选项,触类旁通,设置边框选项,触类旁通,9. 插入一个6行4列的表格。插入方法为选择插入面板常用表格，插入表格。鼠标拖拽选中第一列单元格，在下方属性栏中，选择“合并单元格”。,10.同样的方法，把第一行，第二、三、四列的单元格合并，合并后效果如图所示。,触类旁通,11.按照效果图，在第一列单元格中插入图片，在其他单元格中添加文字，效果如图所示。,触类旁通,12.为表格设定样式。新建CSS样式 。,触类旁通,设置类型选项,触类旁通,设置区块选项,触类旁通,13.设置表格内特殊文字样式，定义两个类“.tab-title”、“.tab-name”。 为表格设定样式。新建CSS样式 。,触类旁通,设置类型选项,触类旁通,14. 新建CSS样式,触类旁通,设置类型选项,触类旁通,设置背景选项,触类旁通,15. 对特殊本文套用定义的样式，套用后，效果如图所示。,触类旁通,16. 商品详细信息采用自定义列表来制作。方法为插入面板，选择“文本”“dl定义列表”插入。直接在HTML代码窗口输入如下代码。位置为DIV“det-right”的结束标签之前。代码如下：,触类旁通,17. 设置自定义列表的样式。先设定标签。新建CSS样式规则。,触类旁通,设置类型选项,触类旁通,18. 再设定标签。新建CSS样式规则。,触类旁通,设置类型选项,触类旁通,右侧的内容区制作完成，预览效果如图,触类旁通,Thank you!,谢谢观赏,