网页制作与开发教程张强高建华温谦第10章网站制作综合实例.pptVIP

第10章网站制作综合实例 本章中将要为一个虚拟的公司制作一个完整的网站，通过从网站构思到绘制，再到页面编辑等操作，深入掌握网站的制作流程，以及制作页面时的一些小技巧等。本例最终效果如图10-1所示。 10.1 概 述 通过前面的学习，我们已经对使用Dreamweaver制作网页有了一个整体的认识，本章通过制作一个完整的网站，将已经学到的知识融会贯通。 1．网站策划 2．绘制网站 3．创建站点 4．网站制作 有了构思，并且具体地绘制出了页面效果，接下来就是将绘制出来的图像应用到网页中去，实现真正的网站效果。 10.2 绘制切片并导出 前面已经完成了页面的绘制工作，本节就对页面进行切片处理。在切片时，要充分考虑切片之间合理分配。 10.3 编 辑 首 页 通过上述步骤，已经将首页导出为网页格式的文档，要查看该文档，可在系统中打开“qy”文件夹中的“images”文件夹，可以发现被切割过的图片均被保存到了里面。接下来开始首页的编辑。 10.4 插入图像内容 完成布局表格的绘制之后，在“扩展”模式下，在表格内逐一插入相对应的图像，如图10-15所示，这里不再细述插入图像的方法。完成后单击文档顶部的“退出”按钮，回到标准模式下观察图像，如图10-16所示。 10.5 设置自由延伸表格 为了使预览的页面更加灵活，这里为表格设置一下横向延伸和纵向延伸效果。 10.6 添加CSS样式 通过前面的操作，可以说这个自由延伸的页面就基本制作完成。但是细心观察，还是可以发现在预览页面时，右侧第2行和第4行单元格中的背景图像因为是背景图像自动重复平铺，而有些影响美观。要解决背景图像重复的问题，只需要设置一个CSS样式即可。 10.7 编辑二级页面并把它另存为模板 在上述一系列操作中，已经掌握了一个页面的制作流程。接下来就学习子页面的制作。 10.8 利用模板生成其他子页面 利用模板生成其他子页面的基本步聚如下。 10.9 创 建 链 接 通过前面7个小节的设计与制作，一个广告公司的门户网站结构就搭建完成。现在为网站创建超链接，使各页面之间相互链接起来。 10.10 添加链接属性 通过前面的讲解，同学们已经基本掌握了网站的制作流程，并且顺着这个流程能够制作一个完整而漂亮的网站。到此本例制作的网站就应该算是个成品了，但为了更加完善该网站，最后还可以在每个页面中添加上一些CSS样式或者交互效果等，具体根据读者的需要而添加。 10.11 检 查 站 点 在将网页传到远程服务器之前，要检查文件。上面已经介绍了在浏览器中预览网页从而测试文档的方法，现在将介绍如何使用其他Dreamweaver工具来测试网页。 10.11.1 设计备注 设计备注是一个很好的管理站点的办法，它是在文档的“文件”面板中插入注释，可以用来安排工作计划，在文件中设置跟踪注释。如果用户是工作组中的成员，这将有利于其他成员理解用户的文件。为站点页面的一个变化生成设计备注的方法如下。 10.11.2 站点报告 可以运行站点报告来检查HTML文件管理工作流程，这里说明如何运用报告来查看站点中是否有的文档中存在没有用的空标签。 小 结 本章内容是一个综合实践的环节，通过一个完整的网站制作全过程，使读者熟悉网站设计与制作的工作流程。这里又一次印证了，网页设计是一个综合性相当强的工作，涉及的步骤也比较繁多，希望读者通过这个案例，可以更深入地理解其中的原理和工作流程。 图10-49 选择图片 图10-50 为图片添加链接 ?图10-51 选择文字 图10-52 添加链接 图10-53 预览链接 图10-54 绘制矩形热区 图10-55 创建链接 图10-56 打开模板 图10-57 “更新模板文件”对话框 图10-58 完成所有基于模板的文件更新 图10-59 选中标题 图10-60 创建空链接 图10-61 设置页面属性 图10-62 预览页面属性效果 图10-63 完成网站的制作 图10-64 填写设计备注 图10-65 站点报告的结果 图10-66 根据报告修改文档 图10-22 完成图像的插入 图10-23 选中整个大表格 图10-24 设置表格的百分比 图10-25 选中最上方的两行代码 图10-26 选择文件类型 图10-27 设置右侧单元格的宽度百分比 图