《网页制作与开发教程张强高建华温谦第10章网站制作综合实例新》由会员分享，可在线阅读，更多相关《网页制作与开发教程张强高建华温谦第10章网站制作综合实例新（108页珍藏版）》请在金锄头文库上搜索。
1、第第10章章网站制作综合实例网站制作综合实例绘制切片并导出绘制切片并导出 10.2插入图像内容插入图像内容 10.4编编 辑辑 首首 页页 10.3概概 述述10.19/25/20242设置自由延伸表格设置自由延伸表格 10.5添加添加CSS样式样式10.6编辑二级页面并把它另存为模板编辑二级页面并把它另存为模板 10.7利用模板生成其他子页面利用模板生成其他子页面 10.89/25/20243创创 建建 链链 接接10.9添加链接属性添加链接属性 10.10检检 查查 站站 点点 10.11小结小结 9/25/20244 本章中将要为一个虚拟的公司制作一个本章中将要为一个虚拟的公司制作一个完
2、整的网站，通过从网站构思到绘制，再完整的网站，通过从网站构思到绘制，再到页面编辑等操作，深入掌握网站的制作到页面编辑等操作，深入掌握网站的制作流程，以及制作页面时的一些小技巧等。流程，以及制作页面时的一些小技巧等。本例最终效果如图本例最终效果如图10-1所示。所示。9/25/20245图图10-1 10-1 完成网站的制作完成网站的制作 9/25/2024610.1 概概 述述 通过前面的学习，我们已经对使用通过前面的学习，我们已经对使用Dreamweaver制作网页有了一个整体的认制作网页有了一个整体的认识，本章通过制作一个完整的网站，将已识，本章通过制作一个完整的网站，将已经学到的知识融会
3、贯通。经学到的知识融会贯通。9/25/202471网站策划网站策划 图图10-2 10-2 主页结构草图主页结构草图 9/25/20248 图图10-3 10-3 子页结构草图子页结构草图 9/25/202492绘制网站绘制网站图图10-4 10-4 绘制首页绘制首页9/25/2024103创建站点创建站点图图10-5 10-5 选择本地根文件夹选择本地根文件夹9/25/202411图图10-6 10-6 选择图像文件夹选择图像文件夹 9/25/202412图图10-7 10-7 创建新站点创建新站点9/25/2024134网站制作网站制作 有了构思，并且具体地绘制出了页面效有了构思，并且具体
4、地绘制出了页面效果，接下来就是将绘制出来的图像应用到果，接下来就是将绘制出来的图像应用到网页中去，实现真正的网站效果。网页中去，实现真正的网站效果。9/25/20241410.2 绘制切片并导出绘制切片并导出 前面已经完成了页面的绘制工作，本节前面已经完成了页面的绘制工作，本节就对页面进行切片处理。在切片时，要充就对页面进行切片处理。在切片时，要充分考虑切片之间合理分配。分考虑切片之间合理分配。9/25/202415图图10-8 10-8 按区域进行切片按区域进行切片 9/25/202416图图10-9 10-9 单独切出分割线和背景色单独切出分割线和背景色9/25/202417图图10-10
5、 10-10 导入切片导入切片9/25/20241810.3 编编 辑辑 首首 页页 通过上述步骤，已经将首页导出为网页通过上述步骤，已经将首页导出为网页格式的文档，要查看该文档，可在系统中格式的文档，要查看该文档，可在系统中打开打开“qy”文件夹中的文件夹中的“images”文件夹，文件夹，可以发现被切割过的图片均被保存到了里可以发现被切割过的图片均被保存到了里面。接下来开始首页的编辑。面。接下来开始首页的编辑。9/25/202419图图10-11 10-11 启用启用“布局表格布局表格 9/25/202420图图10-12 10-12 绘制布局表格绘制布局表格 9/25/202421图图1
6、0-13 10-13 绘制单元格绘制单元格9/25/202422图图10-14 10-14 在在“扩展扩展”模式下观察表格模式下观察表格 9/25/20242310.4 插入图像内容插入图像内容 完成布局表格的绘制之后，在完成布局表格的绘制之后，在“扩展扩展”模式下，在表格内逐一插入相对应的图像，模式下，在表格内逐一插入相对应的图像，如图如图10-15所示，这里不再细述插入图像的所示，这里不再细述插入图像的方法。完成后单击文档顶部的方法。完成后单击文档顶部的“退出退出”按按钮，回到标准模式下观察图像，如图钮，回到标准模式下观察图像，如图10-16所示。所示。9/25/202424图图10-15
7、 10-15 插入图像插入图像 9/25/202425图图10-16 10-16 标准模式下观察页面效果标准模式下观察页面效果 9/25/202426图图10-17 10-17 放置光标的位置放置光标的位置 9/25/202427 图图10-18 10-18 选择背景图片选择背景图片 9/25/202428图图10-19 10-19 在单元格内添回背景图像在单元格内添回背景图像 9/25/202429图图10-20 完成信息栏内背景图像的添加完成信息栏内背景图像的添加 9/25/202430 图图10-21 添加分割线添加分割线 9/25/202431图图10-22 10-22 完成图像的插入
8、完成图像的插入9/25/20243210.5 设置自由延伸表格设置自由延伸表格 为了使预览的页面更加灵活，这里为表为了使预览的页面更加灵活，这里为表格设置一下横向延伸和纵向延伸效果。格设置一下横向延伸和纵向延伸效果。9/25/202433图图10-23 10-23 选中整个大表格选中整个大表格 9/25/202434图图10-24 10-24 设置表格的百分比设置表格的百分比 9/25/202435图图10-25 10-25 选中最上方的两行代码选中最上方的两行代码9/25/202436图图10-26 10-26 选择文件类型选择文件类型9/25/202437图图10-27 10-27 设置右
9、侧单元格的宽度百分比设置右侧单元格的宽度百分比 9/25/202438图图10-28 10-28 预览横向伸缩效果预览横向伸缩效果 9/25/202439图图10-29 10-29 设置底边单元格的高度百分比设置底边单元格的高度百分比 9/25/202440图图10-30 10-30 预览页面预览页面9/25/20244110.6 添加添加CSS样式样式 通过前面的操作，可以说这个自由延伸通过前面的操作，可以说这个自由延伸的页面就基本制作完成。但是细心观察，的页面就基本制作完成。但是细心观察，还是可以发现在预览页面时，右侧第还是可以发现在预览页面时，右侧第2行和行和第第4行单元格中的背景图像因
10、为是背景图像行单元格中的背景图像因为是背景图像自动重复平铺，而有些影响美观。要解决自动重复平铺，而有些影响美观。要解决背景图像重复的问题，只需要设置一个背景图像重复的问题，只需要设置一个CSS样式即可。样式即可。9/25/202442图图10-31 10-31 新建新建CSSCSS样式样式9/25/202443图图10-32 10-32 定义背景的重复模式定义背景的重复模式9/25/202444 图图10-33 10-33 应用应用CSSCSS样式样式 9/25/202445图图10-34 10-34 预览延伸效果预览延伸效果 9/25/202446图图10-35 10-35 输入正文输入正文
11、 9/25/202447图图10-36 10-36 预览首页预览首页9/25/20244810.7 编辑二级页面并把它另存为模板编辑二级页面并把它另存为模板 在上述一系列操作中，已经掌握了一个在上述一系列操作中，已经掌握了一个页面的制作流程。接下来就学习子页面的页面的制作流程。接下来就学习子页面的制作。制作。9/25/202449图图10-37 10-37 绘制子页面绘制子页面 9/25/202450图图10-38 10-38 生成子页面文档生成子页面文档 9/25/202451图图10-39 10-39 进入扩展模式进入扩展模式 9/25/202452图图10-40 10-40 预览子页面预
12、览子页面 9/25/202453图图10-41 10-41 创建模板创建模板 9/25/202454 图图10-42 10-42 提示框提示框 9/25/202455图图10-43 10-43 保存模板保存模板 9/25/202456图图10-44 10-44 设置光标的位置设置光标的位置 9/25/202457图图10-45 10-45 创建可编辑区域创建可编辑区域9/25/20245810.8 利用模板生成其他子页面利用模板生成其他子页面 利用模板生成其他子页面的基本步聚如利用模板生成其他子页面的基本步聚如下。下。9/25/202459图图10-46 10-46 “选择模板选择模板”对话框
13、对话框9/25/202460图图10-47 10-47 在编辑区内输入正文在编辑区内输入正文 9/25/202461图图10-48 10-48 预览用模板生成的子页面预览用模板生成的子页面 9/25/20246210.9 创创 建建 链链 接接 通过前面通过前面7个小节的设计与制作，一个个小节的设计与制作，一个广告公司的门户网站结构就搭建完成。现广告公司的门户网站结构就搭建完成。现在为网站创建超链接，使各页面之间相互在为网站创建超链接，使各页面之间相互链接起来。链接起来。9/25/202463图图10-49 选择图片选择图片9/25/202464图图10-50 10-50 为图片添加链接为图片
14、添加链接9/25/202465 图图10-51 10-51 选择文字选择文字 9/25/202466 图图10-52 10-52 添加链接添加链接 9/25/202467图图10-53 10-53 预览链接预览链接9/25/202468图图10-54 10-54 绘制矩形热区绘制矩形热区9/25/202469图图10-55 10-55 创建链接创建链接 9/25/202470图图10-56 10-56 打开模板打开模板 9/25/202471图图10-57 10-57 “更新模板文件更新模板文件”对话框对话框 9/25/202472图图10-58 10-58 完成所有基于模板的文件更新完成所有
15、基于模板的文件更新 9/25/20247310.10 添加链接属性添加链接属性 通过前面的讲解，同学们已经基本掌握通过前面的讲解，同学们已经基本掌握了网站的制作流程，并且顺着这个流程能了网站的制作流程，并且顺着这个流程能够制作一个完整而漂亮的网站。到此本例够制作一个完整而漂亮的网站。到此本例制作的网站就应该算是个成品了，但为了制作的网站就应该算是个成品了，但为了更加完善该网站，最后还可以在每个页面更加完善该网站，最后还可以在每个页面中添加上一些中添加上一些CSS样式或者交互效果等，样式或者交互效果等，具体根据读者的需要而添加。具体根据读者的需要而添加。 9/25/202474图图10-59 1
16、0-59 选中标题选中标题 9/25/202475图图10-60 10-60 创建空链接创建空链接 9/25/202476图图10-61 10-61 设置页面属性设置页面属性9/25/202477图图10-62 10-62 预览页面属性效果预览页面属性效果 9/25/202478图图10-63 10-63 完成网站的制作完成网站的制作9/25/20247910.11 检检 查查 站站 点点 在将网页传到远程服务器之前，要检查在将网页传到远程服务器之前，要检查文件。上面已经介绍了在浏览器中预览网文件。上面已经介绍了在浏览器中预览网页从而测试文档的方法，现在将介绍如何页从而测试文档的方法，现在将介
17、绍如何使用其他使用其他Dreamweaver工具来测试网页。工具来测试网页。9/25/20248010.11.1 设计备注设计备注 设计备注是一个很好的管理站点的办法，设计备注是一个很好的管理站点的办法，它是在文档的它是在文档的“文件文件”面板中插入注释，面板中插入注释，可以用来安排工作计划，在文件中设置跟可以用来安排工作计划，在文件中设置跟踪注释。如果用户是工作组中的成员，这踪注释。如果用户是工作组中的成员，这将有利于其他成员理解用户的文件。为站将有利于其他成员理解用户的文件。为站点页面的一个变化生成设计备注的方法如点页面的一个变化生成设计备注的方法如下。下。9/25/202481图图10-
18、64 10-64 填写设计备注填写设计备注9/25/20248210.11.2 站点报告站点报告 可以运行站点报告来检查可以运行站点报告来检查HTML文件管文件管理工作流程，这里说明如何运用报告来查理工作流程，这里说明如何运用报告来查看站点中是否有的文档中存在没有用的空看站点中是否有的文档中存在没有用的空标签。标签。9/25/202483图图10-65 10-65 站点报告的结果站点报告的结果 9/25/202484图图10-66 10-66 根据报告修改文档根据报告修改文档 9/25/202485小小 结结 本章内容是一个综合实践的环节，通过本章内容是一个综合实践的环节，通过一个完整的网站制
19、作全过程，使读者熟悉一个完整的网站制作全过程，使读者熟悉网站设计与制作的工作流程。这里又一次网站设计与制作的工作流程。这里又一次印证了，网页设计是一个综合性相当强的印证了，网页设计是一个综合性相当强的工作，涉及的步骤也比较繁多，希望读者工作，涉及的步骤也比较繁多，希望读者通过这个案例，可以更深入地理解其中的通过这个案例，可以更深入地理解其中的原理和工作流程。原理和工作流程。9/25/202486在线教务辅导网：在线教务辅导网：http:/ 更多课程配套课件资源请访问在线教务辅导网更多课程配套课件资源请访问在线教务辅导网9/25/2024879/25/2024889/25/2024899/25/2024909/25/2024919/25/202492馋死9/25/2024939/25/2024949/25/2024959/25/2024969/25/2024979/25/2024989/25/2024999/25/20241009/25/20241019/25/20241029/25/20241039/25/20241049/25/2024105P P T研 究 院POW ERPOI NT ACADEM Y9/25/20241069/25/20241079/25/2024108
