原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
网页设计项目教程教学ppt课件王雪松 项目一 任务4 _1
在线教务辅导网：;Dreamweaver网页设计项目教程;任务四 利用CSS美化网页10（建议2学时）;任务实施——10上方子导航制作;图片“top-bar-bg02.jpg”对应代码如下：;任务评价;触类旁通;3. 导入CSS样式表。以链接的方式添加样式表文件“layout.css”、“style.css”。
4. 复制代码。打开“index.html”页面，转到代码窗口，复制代码如下：（注意，一定要去掉DIV“right”的全部内容。）插入到body标签之间。
5. 。很多图片都没有正常显示。这是由于我们采用的是相对路径进行图片的链接，因此由于detail.html的路径和index.html的路径发生变化所导致的。我们需要一一重新更新路径。;6.制作右侧内容区。本页面的右侧内容区与首页不同，需要单独制作。新建CSS样式.;设置背景选项 ;设置方框选项 ;7. 在DIV“det-right”开始标签之后，插入h1标签，并输入文字。代码如下： ;设置背景选项 ;设置方框选项 ;设置边框选项 ;9. 插入一个6行4列的表格。插入方法为选择插入面板常用表格，插入表格。鼠标拖拽选中第一列单元格，在下方属性栏中，选择“合并单元格”。;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样式规则。 ;设置类型选项 ;右侧的内容区制作完成，预览效果如图 ;Thank you!
文档评论（0）