第12章网站制作综合应用

1、.第第1网站与网页概述网站与网页概述第第2HTML入门入门第第3网页基本编辑网页基本编辑第第4表格表格第第5框架框架第第6AP Div第第7第第8CSS和模板和模板第第9网页图形处理工具网页图形处理工具Fireworks CS5第第10图像处理工具图像处理工具Photoshop CS5第第11Flash CS5第第12.学习目标：学习目标：第第12章章 网站制作综合应用网站制作综合应用熟悉和掌握网站建设的基本流程熟悉和掌握网站建设的基本流程综合运用综合运用DreamWeaver、FireWorks、Photoshop和和Flash能独立设计一个内容完整、图文并茂、技术运能独立设计一个内容完整、

2、图文并茂、技术运用得当的网站用得当的网站.12.1 网站建设流程网站建设流程一般地，一个网站建设大致需要以下几项一般地，一个网站建设大致需要以下几项流程：流程：网站策划网站策划设计网页设计网页测试站点测试站点发布站点发布站点.12.1.1 网站策划网站策划网站策划一般包括以下步骤：网站策划一般包括以下步骤：定位网站主题定位网站主题定位网站定位网站CI形象形象确定网站的栏目和版块确定网站的栏目和版块确定网站的目录结构和链接结构确定网站的目录结构和链接结构确定网站的整体风格和创意设计确定网站的整体风格和创意设计.定位网站主题定位网站主题定位网站定位网站CI形象形象确定网站的栏目和版块确定网站的栏目

3、和版块确定网站的目录结构和链接结构确定网站的目录结构和链接结构确定网站的整体风格和创意设计确定网站的整体风格和创意设计12.1.1 网站策划（续）网站策划（续）.12.1.1 网站策划（续）网站策划（续）定位网站主题定位网站主题网站主题：网站所要表达信息的题材。如网站主题：网站所要表达信息的题材。如求职、聊天、社区、娱乐、旅行等。求职、聊天、社区、娱乐、旅行等。对于个人网站，建议选择题材时，首先主对于个人网站，建议选择题材时，首先主题要小而精，即定位要小，内容要精；题要小而精，即定位要小，内容要精；其次题材最好是自己擅长或者喜爱的内其次题材最好是自己擅长或者喜爱的内容；再次题材不要太滥或者目标

4、太高。容；再次题材不要太滥或者目标太高。.12.1.1 网站策划（续）网站策划（续）确定网站的栏目和版块确定网站的栏目和版块栏目的实质是一个网站的大纲索引，索引栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。应该将网站的主体明确显示出来。版块比栏目的概念要大一些，每个版块都版块比栏目的概念要大一些，每个版块都有自己的栏目。设置版块时，应该注意：有自己的栏目。设置版块时，应该注意：各版块要有相对独立性；各版块要有相对独立性；各版块要有相互关联；各版块要有相互关联；版块的内容要围绕站点主题。版块的内容要围绕站点主题。.12.1.1 网站策划（续）网站策划（续）确定网站的目录结构和

5、链接结构确定网站的目录结构和链接结构网站的目录结构是指建立网站时创建的文件目录。对于站网站的目录结构是指建立网站时创建的文件目录。对于站点本身的上传维护，未来内容的扩充和移植有着重要的点本身的上传维护，未来内容的扩充和移植有着重要的影响。影响。建议：建议：不要将所有文件都存放在根目录下；不要将所有文件都存放在根目录下；按栏目内容建立子目录；按栏目内容建立子目录；在每个主目录下都建立独立的在每个主目录下都建立独立的images目录；目录；目录的层次不要太深，建议不要超过目录的层次不要太深，建议不要超过3层；层；其它需要注意的，包括：不要使用中文目录、不要使用其它需要注意的，包括：不要使用中文目录

6、、不要使用过长的目录、尽量使用意义明确的目录等。过长的目录、尽量使用意义明确的目录等。.12.1.1 网站策划（续）网站策划（续）网站的链接结构是指页面之间相互链接的拓扑结网站的链接结构是指页面之间相互链接的拓扑结构。两种基本链接结构：构。两种基本链接结构：树状链接结构（一对一）。首页链接指向一级树状链接结构（一对一）。首页链接指向一级页面，一级页面链接指向二级页面。页面，一级页面链接指向二级页面。星状链接结构（一对多）。每个页面相互之间星状链接结构（一对多）。每个页面相互之间都建立有链接。都建立有链接。.12.1.1 网站策划（续）网站策划（续）确定网站的整体风格和创意设计确定网站的整体风格

7、和创意设计网站的风格是指站点的整体形象给浏览者的综合网站的风格是指站点的整体形象给浏览者的综合感受。包括站点的感受。包括站点的CI（标志，色彩，字体，标（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等诸语气，内容价值，存在意义，站点荣誉等等诸多因素。多因素。风格是独特的，是站点不同于其他网站的地方，风格是独特的，是站点不同于其他网站的地方，或者色彩，或者技术，或者是交互方式，能让或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的；风格浏览者明确分辨出这是你的网站独有的；风格又是有

8、人性的，通过网站的外表，内容，文字，又是有人性的，通过网站的外表，内容，文字，交流可以概括出一个站点的个性，情绪。交流可以概括出一个站点的个性，情绪。.12.1.1 网站策划（续）网站策划（续）以下几条是确定网站风格的参考意见：以下几条是确定网站风格的参考意见：将标志将标志logo，尽可能的出现在每个页面上，或者页眉，或者页脚，或者背，尽可能的出现在每个页面上，或者页眉，或者页脚，或者背景。景。突出标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽突出标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。量使用与标准色彩一致的色彩。突出你的标准字体。

9、在关键的标题，菜单，图片里使用统一的标准字体。突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。想一条朗朗上口宣传标语。把它做在网站的横幅广告里，或者放在醒目的想一条朗朗上口宣传标语。把它做在网站的横幅广告里，或者放在醒目的位置。位置。使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。个人写的。使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。一样。创造站点特有的符号或图标。创造站点特有的符号或图标。用自己设计

10、的花边，线条，点。用自己设计的花边，线条，点。展示网站的荣誉和成功作品。展示网站的荣誉和成功作品。网站的创意是网站生存的关键，是传达网站信息的一种特别方式。创意的目网站的创意是网站生存的关键，是传达网站信息的一种特别方式。创意的目的是更好的宣传推广网站。的是更好的宣传推广网站。.12.1.2 设计网页设计网页首页的设计是整个网站设计的难点，是网站成功与否的关键。一般的设计步骤首页的设计是整个网站设计的难点，是网站成功与否的关键。一般的设计步骤是：是：1、确定首页的功能模块。、确定首页的功能模块。首页的功能模块是指需要在首页上实现的主要内容和功能。一般的站点都有：首页的功能模块是指需要在首页上实

11、现的主要内容和功能。一般的站点都有：网站名称（网站名称（logo），广告条（），广告条（banner），主菜单（），主菜单（menu），新闻（），新闻（whats new），搜索（），搜索（search），友情链接（），友情链接（links），邮件列表（），邮件列表（maillist），计），计数器（数器（count），版权（），版权（copyright）等。）等。2、设计首页的版面、设计首页的版面设计版面的最好方法是：找一张白纸，一支笔，先将理想中的草图勾勒出来，设计版面的最好方法是：找一张白纸，一支笔，先将理想中的草图勾勒出来，然后再用网页制作软件实现。然后再用网页制作软件实现。3、处理技

12、术上的细节、处理技术上的细节常见的技术细节，如：制作的主页如何能在不同分辨率下保持不变形，如何能常见的技术细节，如：制作的主页如何能在不同分辨率下保持不变形，如何能在在IE和和Firefox下看起来都不至于太丑陋，如何设置字体和链接颜色等等。下看起来都不至于太丑陋，如何设置字体和链接颜色等等。其他二级网页，在设计时应当保持与首页风格的一致性。其他二级网页，在设计时应当保持与首页风格的一致性。.12.1.3 测试站点测试站点测试站点，一般有浏览器兼容性测试和超链接测测试站点，一般有浏览器兼容性测试和超链接测试。试。检查浏览器兼容性检查浏览器兼容性检测时可以先设置目标浏览器最低版本检测时可以先设置

13、目标浏览器最低版本 .12.1.3 测试站点（续）测试站点（续）超链接测试。超链接测试。检查站点链接检查站点链接查看超链接测试结果查看超链接测试结果.12.1.4 发布站点发布站点一、设置远程服务器信息一、设置远程服务器信息1.菜单栏中菜单栏中“站点站点”|“管理站点管理站点”命令，命令，打开管理站点对话框；打开管理站点对话框；2.选择要上传的站点名称。选择要上传的站点名称。单击单击“编辑编辑”按钮，按钮，打开打开“站点设置对象站点设置对象”对话框；对话框；.12.1.4 发布站点（续）发布站点（续）3.设置服务器。设置服务器。点击点击“服务器服务器”；填写基本信息并保存。填写基本信息并保存。

14、.12.1.4 发布站点（续）发布站点（续）二、上传站点二、上传站点1.在在“文件文件”面板单击链接按钮面板单击链接按钮 ，与远程服务器建立链接；与远程服务器建立链接；2.在本地目录中选择上传的文件或文件夹，单击上在本地目录中选择上传的文件或文件夹，单击上传按钮传按钮 ，开始上传文件；，开始上传文件；3.浏览作品。打开浏览器，在地址栏中输入浏览作品。打开浏览器，在地址栏中输入“http:/学号学号”，即可浏览到作，即可浏览到作品。品。.12.2 综合应用实例综合应用实例介绍一个网站介绍一个网站“家乡风光家乡风光”的设计过程，的设计过程，网站主题为自然风景展示。主要过程如网站主题为自然风景展示。主要过程如下：下：利用利用FireWorks设计网页设计网页利用利用Flash设计动画设计动画利用利用DreamWeaver制作网站制作网站具体操作过程见教材。具体操作过程见教材。.12.3 小结小结本章简单介绍了网站建设的一般流程。本章简单介绍了网站建设的一般流程。通过