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

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. 对比详情页和首页，可以发现，只有右部内容区有所差别，其他的内容都是一样的。因此我们仅需要制作右侧内容区就可以了。 3. 导入CSS样式表。以链接的方式添加样式表文件“layout.css”、“style.css”。 4. 复制代码。打开“index.html”页面，转到代码窗口，复制代码如下：（注意，一定要去掉DIV“right”的全部内容。）插入到body标签之间。 5. 。很多图片都没有正常显示。这是由于我们采用的是相对路径进行图片的链接，因此由于detail.html的路径和index.html的路径发生变化所导致的。我们需要一一重新更新路径。 触类旁通 6.制作右侧内容区。本页面的右侧内容区与首页不同，需要单独制作。新建CSS样式. 触类旁通 设置背景选项 触类旁通 设置方框选项 触类旁通 7. 在DIV“det-right”开始标签之后，插入h1标签，并输入文字。代码如下： 8. 定义h1标签的样式。 触类旁通 设置背景选项 触类旁通 设置方框选项 触类旁通 设置边框选项 触类旁通 9. 插入一个6行4列的表格。插入方法为选择插入面板常用表格，插入表格。鼠标拖拽选中第一列单元格，在下方属性栏中，选择“合并单元格”。 10.同样的方法，把第一行，第二、三、四列的单元格合并，合并后效果如图所示。 触类旁通 11.按照效果图，在第一列单元格中插入图片，在其他单元格中添加文字，效果如图所示。 触类旁通 12.为表格设定样式。新建CSS样式 。 触类旁通 设置类型选项 触类旁通 设置区块选项 触类旁通 13.设置表格内特殊文字样式，定义两个类“.tab-title”、“.tab-name”。 为表格设定样式。新建CSS样式 。 触类旁通 设置类型选项 触类旁通 14. 新建CSS样式 触类旁通 设置类型选项 触类旁通 设置背景选项 触类旁通 15. 对特殊本文套用定义的样式，套用后，效果如图所示。 触类旁通 16. 商品详细信息采用自定义列表dl来制作。方法为插入面板，选择“文本”“dl定义列表”插入。直接在HTML代码窗口输入如下代码。位置为DIV“det-right”的结束标签之前。代码如下： 触类旁通 17. 设置自定义列表的样式。先设定dl标签。新建CSS样式规则。 触类旁通 设置类型选项 触类旁通 18. 再设定dt标签。新建CSS样式规则。 触类旁通