网站制作综合实例资料

1、第第10章章网站制作综合实例网站制作综合实例绘制切片并导出绘制切片并导出 10.2插入图像内容插入图像内容 10.4编编 辑辑 首首 页页 10.3概概 述述10.1设置自由延伸表格设置自由延伸表格 10.5添加添加CSS样式样式10.6编辑二级页面并把它另存为模板编辑二级页面并把它另存为模板 10.7利用模板生成其他子页面利用模板生成其他子页面 10.8创创 建建 链链 接接10.9添加链接属性添加链接属性 10.10检检 查查 站站 点点 10.11小结小结 本章中将要为一个虚拟的公司制作一本章中将要为一个虚拟的公司制作一个完整的网站，通过从网站构思到绘制，个完整的网站，通过从网站构思到绘

2、制，再到页面编辑等操作，深入掌握网站的制再到页面编辑等操作，深入掌握网站的制作流程，以及制作页面时的一些小技巧等。作流程，以及制作页面时的一些小技巧等。本例最终效果如图本例最终效果如图10-1所示。所示。图图10-1 10-1 完成网站的制作完成网站的制作 10.1 概概 述述 通过前面的学习，我们已经对使用通过前面的学习，我们已经对使用Dreamweaver制作网页有了一个整体的认制作网页有了一个整体的认识，本章通过制作一个完整的网站，将已识，本章通过制作一个完整的网站，将已经学到的知识融会贯通。经学到的知识融会贯通。1网站策划网站策划 图图10-2 10-2 主页结构草图主页结构草图 图图

3、10-3 10-3 子页结构草图子页结构草图 2绘制网站绘制网站图图10-4 10-4 绘制首页绘制首页3创建站点创建站点图图10-5 10-5 选择本地根文件夹选择本地根文件夹 图图10-6 10-6 选择图像文件夹选择图像文件夹 图图10-7 10-7 创建新站点创建新站点4网站制作网站制作 有了构思，并且具体地绘制出了页面有了构思，并且具体地绘制出了页面效果，接下来就是将绘制出来的图像应用效果，接下来就是将绘制出来的图像应用到网页中去，实现真正的网站效果。到网页中去，实现真正的网站效果。10.2 绘制切片并导出绘制切片并导出 前面已经完成了页面的绘制工作，本前面已经完成了页面的绘制工作，

4、本节就对页面进行切片处理。在切片时，要节就对页面进行切片处理。在切片时，要充分考虑切片之间合理分配。充分考虑切片之间合理分配。图图10-8 10-8 按区域进行切片按区域进行切片 图图10-9 10-9 单独切出分割线和背景色单独切出分割线和背景色图图10-10 10-10 导入切片导入切片10.3 编编 辑辑 首首 页页 通过上述步骤，已经将首页导出为网通过上述步骤，已经将首页导出为网页格式的文档，要查看该文档，可在系统页格式的文档，要查看该文档，可在系统中打开中打开“qy”文件夹中的文件夹中的“images”文件夹，文件夹，可以发现被切割过的图片均被保存到了里可以发现被切割过的图片均被保存

5、到了里面。接下来开始首页的编辑。面。接下来开始首页的编辑。图图10-11 10-11 启用启用“布局表格布局表格 图图10-12 10-12 绘制布局表格绘制布局表格 图图10-13 10-13 绘制单元格绘制单元格图图10-14 10-14 在在“扩展扩展”模式下观察表格模式下观察表格 10.4 插入图像内容插入图像内容 完成布局表格的绘制之后，在完成布局表格的绘制之后，在“扩展扩展”模式下，在表格内逐一插入相对应的图像，模式下，在表格内逐一插入相对应的图像，如图如图10-15所示，这里不再细述插入图像的所示，这里不再细述插入图像的方法。完成后单击文档顶部的方法。完成后单击文档顶部的“退出退

6、出”按按钮，回到标准模式下观察图像，如图钮，回到标准模式下观察图像，如图10-16所示。所示。图图10-15 10-15 插入图像插入图像 图图10-16 10-16 标准模式下观察页面效果标准模式下观察页面效果 图图10-17 10-17 放置光标的位置放置光标的位置 图图10-18 10-18 选择背景图片选择背景图片 图图10-19 10-19 在单元格内添回背景图像在单元格内添回背景图像 图图10-20 完成信息栏内背景图像的添加完成信息栏内背景图像的添加 图图10-21 添加分割线添加分割线 图图10-22 10-22 完成图像的插入完成图像的插入10.5 设置自由延伸表格设置自由延

7、伸表格 为了使预览的页面更加灵活，这里为为了使预览的页面更加灵活，这里为表格设置一下横向延伸和纵向延伸效果。表格设置一下横向延伸和纵向延伸效果。图图10-23 10-23 选中整个大表格选中整个大表格 图图10-24 10-24 设置表格的百分比设置表格的百分比 图图10-25 10-25 选中最上方的两行代码选中最上方的两行代码图图10-26 10-26 选择文件类型选择文件类型图图10-27 10-27 设置右侧单元格的宽度百分比设置右侧单元格的宽度百分比 图图10-28 10-28 预览横向伸缩效果预览横向伸缩效果 图图10-29 10-29 设置底边单元格的高度百分比设置底边单元格的高

8、度百分比 图图10-30 10-30 预览页面预览页面10.6 添加添加CSS样式样式 通过前面的操作，可以说这个自由延通过前面的操作，可以说这个自由延伸的页面就基本制作完成。但是细心观察，伸的页面就基本制作完成。但是细心观察，还是可以发现在预览页面时，右侧第还是可以发现在预览页面时，右侧第2行和行和第第4行单元格中的背景图像因为是背景图像行单元格中的背景图像因为是背景图像自动重复平铺，而有些影响美观。要解决自动重复平铺，而有些影响美观。要解决背景图像重复的问题，只需要设置一个背景图像重复的问题，只需要设置一个CSS样式即可。样式即可。图图10-31 10-31 新建新建CSSCSS样式样式图

9、图10-32 10-32 定义背景的重复模式定义背景的重复模式 图图10-33 10-33 应用应用CSSCSS样式样式 图图10-34 10-34 预览延伸效果预览延伸效果 图图10-35 10-35 输入正文输入正文 图图10-36 10-36 预览首页预览首页10.7 编辑二级页面并把它另存为模板编辑二级页面并把它另存为模板 在上述一系列操作中，已经掌握了一在上述一系列操作中，已经掌握了一个页面的制作流程。接下来就学习子页面个页面的制作流程。接下来就学习子页面的制作。的制作。图图10-37 10-37 绘制子页面绘制子页面 图图10-38 10-38 生成子页面文档生成子页面文档 图图1

10、0-39 10-39 进入扩展模式进入扩展模式 图图10-40 10-40 预览子页面预览子页面 图图10-41 10-41 创建模板创建模板 图图10-42 10-42 提示框提示框 图图10-43 10-43 保存模板保存模板 图图10-44 10-44 设置光标的位置设置光标的位置 图图10-45 10-45 创建可编辑区域创建可编辑区域10.8 利用模板生成其他子页面利用模板生成其他子页面 利用模板生成其他子页面的基本步聚利用模板生成其他子页面的基本步聚如下。如下。图图10-46 “10-46 “选择模板选择模板”对话框对话框 图图10-47 10-47 在编辑区内输入正文在编辑区内输

11、入正文 图图10-48 10-48 预览用模板生成的子页面预览用模板生成的子页面 10.9 创创 建建 链链 接接 通过前面通过前面7个小节的设计与制作，一个个小节的设计与制作，一个广告公司的门户网站结构就搭建完成。现广告公司的门户网站结构就搭建完成。现在为网站创建超链接，使各页面之间相互在为网站创建超链接，使各页面之间相互链接起来。链接起来。图图10-49 选择图片选择图片图图10-50 10-50 为图片添加链接为图片添加链接 图图10-51 10-51 选择文字选择文字 图图10-52 10-52 添加链接添加链接 图图10-53 10-53 预览链接预览链接图图10-54 10-54

12、绘制矩形热区绘制矩形热区图图10-55 10-55 创建链接创建链接 图图10-56 10-56 打开模板打开模板 图图10-57 “10-57 “更新模板文件更新模板文件”对话框对话框 图图10-58 10-58 完成所有基于模板的文件更新完成所有基于模板的文件更新 10.10 添加链接属性添加链接属性 通过前面的讲解，同学们已经基本掌通过前面的讲解，同学们已经基本掌握了网站的制作流程，并且顺着这个流程握了网站的制作流程，并且顺着这个流程能够制作一个完整而漂亮的网站。到此本能够制作一个完整而漂亮的网站。到此本例制作的网站就应该算是个成品了，但为例制作的网站就应该算是个成品了，但为了更加完善该

13、网站，最后还可以在每个页了更加完善该网站，最后还可以在每个页面中添加上一些面中添加上一些CSS样式或者交互效果等，样式或者交互效果等，具体根据读者的需要而添加。具体根据读者的需要而添加。 图图10-59 10-59 选中标题选中标题 图图10-60 10-60 创建空链接创建空链接 图图10-61 10-61 设置页面属性设置页面属性图图10-62 10-62 预览页面属性效果预览页面属性效果 图图10-63 10-63 完成网站的制作完成网站的制作10.11 检检 查查 站站 点点 在将网页传到远程服务器之前，要检在将网页传到远程服务器之前，要检查文件。上面已经介绍了在浏览器中预览查文件。上

14、面已经介绍了在浏览器中预览网页从而测试文档的方法，现在将介绍如网页从而测试文档的方法，现在将介绍如何使用其他何使用其他Dreamweaver工具来测试网页。工具来测试网页。10.11.1 设计备注设计备注 设计备注是一个很好的管理站点的办设计备注是一个很好的管理站点的办法，它是在文档的法，它是在文档的“文件文件”面板中插入注面板中插入注释，可以用来安排工作计划，在文件中设释，可以用来安排工作计划，在文件中设置跟踪注释。如果用户是工作组中的成员，置跟踪注释。如果用户是工作组中的成员，这将有利于其他成员理解用户的文件。为这将有利于其他成员理解用户的文件。为站点页面的一个变化生成设计备注的方法站点页面的一个变化生成设计备注的方法如下。如下。图图10-64 10-64 填写设计备注填写设计备注10.11.2 站点报告站点报告 可以运行站点报告来检查可以运行站点报告来检查HTML文件管文件管理工作流程，这里说明如何运用报告来查理工作流程，这里说明如何运用报告来查看站点中是否有的文档中存在没有用的空看站点中是否有的文档中存在没有用的空标签。标签。图图10-65 10-65 站点报告的结果站点报告的结果 图图10-66 10-66 根据报告修改文档根据报告修改文档 小小