《网页设计项目教程_教学课件_王雪松 项目一 任务4 _1》由会员分享,可在线阅读,更多相关《网页设计项目教程_教学课件_王雪松 项目一 任务4 _1(33页珍藏版)》请在金锄头文库上搜索。
1、在线教务辅导网:http:/,教材其余课件及动画素材请查阅在线教务辅导网,QQ:349134187 或者直接输入下面地址:,http:/,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”对应代码如下:,
2、任务实施10上方子导航制作,任务评价,任务评价参照以下内容进行: CSS样式中各种选择器的命名是否规范 是否分类建立了CSS样式文件 网站的效果与效果图是否一致 链接无空链接、死链接 链接均为有效链接 所有图片均能正常显示 所有文字的字体、字号、颜色是否正常显示 框架有无移位 完成时间限制:熟练之后制作首页的样式可以在3小时内完成,其余页面能在1.5小时内完成。,触类旁通,有了制作首页的基础。我们可以快速开展制作子页面的进度。这里以产品详情页为例,讲述如何快速制作子页面。 1. 新建文件和文件夹。在根目录下新建文件夹,名称为“detail”,在该文件夹中新建文件,名称为“detail.html
3、”。 2. 对比详情页和首页,可以发现,只有右部内容区有所差别,其他的内容都是一样的。因此我们仅需要制作右侧内容区就可以了。,3. 导入CSS样式表。以链接的方式添加样式表文件“layout.css”、“style.css”。 4. 复制代码。打开“index.html”页面,转到代码窗口,复制代码如下:(注意,一定要去掉DIV“right”的全部内容。)插入到标签之间。 5. 。很多图片都没有正常显示。这是由于我们采用的是相对路径进行图片的链接,因此由于detail.html的路径和index.html的路径发生变化所导致的。我们需要一一重新更新路径。,触类旁通,6.制作右侧内容区。本页面的
4、右侧内容区与首页不同,需要单独制作。新建CSS样式.,触类旁通,设置背景选项,触类旁通,设置方框选项,触类旁通,7. 在DIV“det-right”开始标签之后,插入h1标签,并输入文字。代码如下:,8. 定义标签的样式。,触类旁通,设置背景选项,触类旁通,设置方框选项,触类旁通,设置边框选项,触类旁通,9. 插入一个6行4列的表格。插入方法为选择插入面板常用表格,插入表格。鼠标拖拽选中第一列单元格,在下方属性栏中,选择“合并单元格”。,10.同样的方法,把第一行,第二、三、四列的单元格合并,合并后效果如图所示。,触类旁通,11.按照效果图,在第一列单元格中插入图片,在其他单元格中添加文字,效
5、果如图所示。,触类旁通,12.为表格设定样式。新建CSS样式 。,触类旁通,设置类型选项,触类旁通,设置区块选项,触类旁通,13.设置表格内特殊文字样式,定义两个类“.tab-title”、“.tab-name”。 为表格设定样式。新建CSS样式 。,触类旁通,设置类型选项,触类旁通,14. 新建CSS样式,触类旁通,设置类型选项,触类旁通,设置背景选项,触类旁通,15. 对特殊本文套用定义的样式,套用后,效果如图所示。,触类旁通,16. 商品详细信息采用自定义列表来制作。方法为插入面板,选择“文本”“dl定义列表”插入。直接在HTML代码窗口输入如下代码。位置为DIV“det-right”的结束标签之前。代码如下:,触类旁通,17. 设置自定义列表的样式。先设定标签。新建CSS样式规则。,触类旁通,设置类型选项,触类旁通,18. 再设定标签。新建CSS样式规则。,触类旁通,设置类型选项,触类旁通,右侧的内容区制作完成,预览效果如图,触类旁通,Thank you!,谢谢观赏,