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

1、DreamweaverDreamweaver网页设计项目教程网页设计项目教程机械工业出版社机械工业出版社任务四 利用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上方子导航制作任务评价任务评价参照以下内容进行：1.CS

2、S样式中各种选择器的命名是否规范2.是否分类建立了CSS样式文件3.网站的效果与效果图是否一致4.链接无空链接、死链接5.链接均为有效链接6.所有图片均能正常显示7.所有文字的字体、字号、颜色是否正常显示8.框架有无移位9.完成时间限制：熟练之后制作首页的样式可以在3小时内完成，其余页面能在1.5小时内完成。触类旁通有了制作首页的基础。我们可以快速开展制作子页面的进度。这里以产品详情页为例，讲述如何快速制作子页面。1.新建文件和文件夹。在根目录下新建文件夹，名称为“detail”，在该文件夹中新建文件，名称为“detail.html”。2.对比详情页和首页，可以发现，只有右部内容区有所差别，其

3、他的内容都是一样的。因此我们仅需要制作右侧内容区就可以了。3.导入CSS样式表。以链接的方式添加样式表文件“layout.css”、“style.css”。4.复制代码。打开“index.html”页面，转到代码窗口，复制代码如下：（注意，一定要去掉DIV“right”的全部内容。）插入到标签之间。5.。很多图片都没有正常显示。这是由于我们采用的是相对路径进行图片的链接，因此由于detail.html的路径和index.html的路径发生变化所导致的。我们需要一一重新更新路径。触类旁通6.制作右侧内容区。本页面的右侧内容区与首页不同，需要单独制作。新建CSS样式.触类旁通设置背景选项 触类旁通

4、设置方框选项 触类旁通7.在DIV“det-right”开始标签之后，插入h1标签，并输入文字。代码如下：8.定义标签的样式。触类旁通设置背景选项 触类旁通设置方框选项 触类旁通设置边框选项 触类旁通9.插入一个6行4列的表格。插入方法为选择插入面板常用表格，插入表格。鼠标拖拽选中第一列单元格，在下方属性栏中，选择“合并单元格”。10.同样的方法，把第一行，第二、三、四列的单元格合并，合并后效果如图所示。触类旁通11.按照效果图，在第一列单元格中插入图片，在其他单元格中添加文字，效果如图所示。触类旁通12.为表格设定样式。新建CSS样式。触类旁通设置类型选项 触类旁通设置区块选项 触类旁通13

5、.设置表格内特殊文字样式，定义两个类“.tab-title”、“.tab-name”。为表格设定样式。新建CSS样式。触类旁通设置类型选项 触类旁通14.新建CSS样式 触类旁通设置类型选项 触类旁通设置背景选项 触类旁通15.对特殊本文套用定义的样式，套用后，效果如图所示。触类旁通16.商品详细信息采用自定义列表来制作。方法为插入面板，选择“文本”“dl定义列表”插入。直接在HTML代码窗口输入如下代码。位置为DIV“det-right”的结束标签之前。代码如下：触类旁通17.设置自定义列表的样式。先设定标签。新建CSS样式规则。触类旁通设置类型选项 触类旁通18.再设定标签。新建CSS样式规则。触类旁通设置类型选项 触类旁通右侧的内容区制作完成，预览效果如图 触类旁通Thank you!谢谢观赏