网站制作综合实例

《网站制作综合实例》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、绘制切片并导出10.2插入图像内容10.4编辑首页10.3概述10.1设置自由延伸表格10.5添加CSS样式10.6编辑二级页面并把它另存为模板10.7利用模板生成其他子页面10.8创建链接10.9添加链接属性10.10检查站点10.11小结本章中将要为一个虚拟的公司制作一个完整的网站，通过从网站构思到绘制，再到页面编辑等操作，深入掌握网站的制作流程，以及制作页面时的一些小技巧等。本例最终效果如图10-1所示。图10-1完成网站的制作10.1概述通过前面的学习，我们已经对使用Dreamweaver制作网页有了一个整体的认识，本章通过制作一个完整的网站，将已经学到的知识融会贯通。1．网站

2、策划图10-2主页结构草图图10-3子页结构草图2．绘制网站图10-4绘制首页3．创建站点图10-5选择本地根文件夹图10-6选择图像文件夹图10-7创建新站点4．网站制作有了构思，并且具体地绘制出了页面效果，接下来就是将绘制出来的图像应用到网页中去，实现真正的网站效果。10.2绘制切片并导出前面已经完成了页面的绘制工作，本节就对页面进行切片处理。在切片时，要充分考虑切片之间合理分配。图10-8按区域进行切片图10-9单独切出分割线和背景色图10-10导入切片10.3编辑首页通过上述步骤，已经将首页导出为网页格式的文档，要查看该文档，可在系统中打开“qy”文件夹中的“images”文件

3、夹，可以发现被切割过的图片均被保存到了里面。接下来开始首页的编辑。图10-11启用“布局表格图10-12绘制布局表格图10-13绘制单元格图10-14在“扩展”模式下观察表格10.4插入图像内容完成布局表格的绘制之后，在“扩展”模式下，在表格内逐一插入相对应的图像，如图10-15所示，这里不再细述插入图像的方法。完成后单击文档顶部的“退出”按钮，回到标准模式下观察图像，如图10-16所示。图10-15插入图像图10-16标准模式下观察页面效果图10-17放置光标的位置图10-18选择背景图片图10-19在单元格内添回背景图像图10-20完成信息栏内背景图像的添加图10-21添加分割线图

4、10-22完成图像的插入10.5设置自由延伸表格为了使预览的页面更加灵活，这里为表格设置一下横向延伸和纵向延伸效果。图10-23选中整个大表格图10-24设置表格的百分比图10-25选中最上方的两行代码图10-26选择文件类型图10-27设置右侧单元格的宽度百分比图10-28预览横向伸缩效果图10-29设置底边单元格的高度百分比图10-30预览页面10.6添加CSS样式通过前面的操作，可以说这个自由延伸的页面就基本制作完成。但是细心观察，还是可以发现在预览页面时，右侧第2行和第4行单元格中的背景图像因为是背景图像自动重复平铺，而有些影响美观。要解决背景图像重复的问题，只需要设置一个CS

5、S样式即可。图10-31新建CSS样式图10-32定义背景的重复模式图10-33应用CSS样式图10-34预览延伸效果图10-35输入正文图10-36预览首页10.7编辑二级页面并把它另存为模板在上述一系列操作中，已经掌握了一个页面的制作流程。接下来就学习子页面的制作。图10-37绘制子页面图10-38生成子页面文档图10-39进入扩展模式图10-40预览子页面图10-41创建模板图10-42提示框图10-43保存模板图10-44设置光标的位置图10-45创建可编辑区域10.8利用模板生成其他子页面利用模板生成其他子页面的基本步聚如下。图10-46“选择模板”对话框图10-47在编辑区

6、内输入正文图10-48预览用模板生成的子页面10.9创建链接通过前面7个小节的设计与制作，一个广告公司的门户网站结构就搭建完成。现在为网站创建超链接，使各页面之间相互链接起来。图10-49选择图片图10-50为图片添加链接图10-51选择文字图10-52添加链接图10-53预览链接图10-54绘制矩形热区图10-55创建链接图10-56打开模板图10-57“更新模板文件”对话框图10-58完成所有基于模板的文件更新10.10添加链接属性通过前面的讲解，同学们已经基本掌握了网站的制作流程，并且顺着这个流程能够制作一个完整而漂亮的网站。到此本例制作的网站就应该算是个成品了，但为了更加完善该

7、网站，最后还可以在每个页面中添加上一些CSS样式或者交互效果等，具体根据读者的需要而添加。图10-59选中标题图10-60创建空链接图10-61设置页面属性图10-62预览页面属性效果图10-63完成网站的制作10.11检查站点在将网页传到远程服务器之前，要检查文件。上面已经介绍了在浏览器中预览网页从而测试文档的方法，现在将介绍如何使用其他Dreamweaver工具来测试网页。10.11.1设计备注设计备注是一个很好的管理站点的办法，它是在文档