网站设计说明书

《网站开发与网页设计》设计说明书网站名：《周杰伦资料库》

班级：BX00XX

学号：BX00XX05

姓名：某某某

201X年12月08日

目录

一、网站与网页的概述 (1)

1. 什么是网站 (1)

2. 什么是网页 (1)

3 静态网页 (2)

4 动态网页 (3)

5 动态网页与静态网页的区别 (4)

二、Dreamweaver 8 (5)

1 Dreamweaver 8的概述 (5)

2 Dreamweaver 8的功能 (5)

3 Dreamweaver 8的特点 (6)

三、网页设计标记语言—HTML (8)

1 HTML语言简介 (8)

2 HTML语言特点 (8)

四、我的网站介绍 (9)

1 网站的主题、结构介绍 (9)

2 网站的内容、形式和特点的介绍 (10)

3 网站重点页面的贴图 (10)

五、网站设计感悟 (18)

一、网站与网页的概述

1. 什么是网站

因特网上一块固定的面向全世界发布消息的地方，由域名(网站地址)和网站空间构成，通常包括主页和其他具有超链接文件的页面。

网站是由多个网页组成的，但不是网页的简单罗列组合，而是用超链接方式组成的既有鲜明风格又有完善内容的有机整体。

2. 什么是网页

网页是网站中的一「页」，通常是HTML格式（文件扩展名为：html、htm、asp、aspx、php、jsp等）。网页通常用图像档来提供图画。网页要使用网页浏览器来阅读。

网页（Web page）是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序。网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

网页是构成网站的基本元素，是承载各种网站应用的平台。

3.1 什么是静态网页

在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。静态网页有时也被称为平面页。静态网页的网址形式通常为htm（超文本标记语言）结尾，还有就是以超文本标记语言（.htm、.html）、.shtml、.xml（可扩展标记语言）等为后缀的。

静态网页面通常是超文本标记语言文档存储为文件在文件系统里面，并且可以通过HTTP访问网络服务器。

3.2 静态网页的特点

(1) 静态网页每个网页都有一个固定的URL，且网页URL 以.htm、.html、.shtml等常见形式为后缀，而不含有“?”；

(2) 网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；

(3) 静态网页的内容相对稳定，因此容易被搜索引擎检索；

(4) 静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；

(5) 静态网页的交互性较差，在功能方面有较大的限制。

4.1 什么是动态网页

动态网页是与静态网页相对应的，即网页URL的后缀不是htm、html、shtml、xml等静态网页的常见形动态网页制作专家式，而是以asp、aspx、sp、php、perl、cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号——“?”。

动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。

4.2 动态网页的特点

(1) 动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量；

(2) 采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等；

(3) 动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；

(4) 动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

5 动态网页与静态网页的区别

静态网页，动态网页主要根据网页制作的语言来区分。静态网页仅使用超文本标记语言（HTML），而动态网页是使用以超文本标记语言为基础，结合多种语言来编写的

静态网页与动态网页的区别在于Web服务器对它们的处理方式不同。当Web服务器接收到对静态网页的请求时，服务器直接将该页发送给客户浏览器，不进行任何处理。如果接收到对动态网页的请求，则从Web服务器中找到该文件，并将它传递给一个称为应用程序服务器的特殊软件扩展，由它负责解释和执行网页，将执行后的结果传递给客户浏览器

静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。

二、Dreamweaver 8

1 Dreamweaver 8的概述

Dreamweaver 8 是建立Web 站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于CSS 的设计的领先支持到手工编码功能，Dreamweaver 提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用Dreamweaver 及所选择的服务器技术来创建功能强大的Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系统。

Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver 在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。

2 Dreamweaver 8的功能

Dreamweaver8功能主要有以下二点：

（1）具有强大的网页编辑功能；

（2）是具有完善的站点管理机制。

3 Dreamweaver 8的特点

（1）灵活的编写方式

Dreamweaver 8具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。

（2）可视化编辑界面

Dreamweaver 8是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。可视化编辑环境减少了大量代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。

（3）功能更多的CSS支持——CSS可视化设计、CSS检查工具。

（4）动态跨浏览器验证

当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。

（5）强大的WEB站点管理功能

（6）内建图形编辑引擎

（7）Dreamweaver 8的集成特性

Dreamweaver 8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。

（8）丰富的媒体支持能力

Dreamweaver 8可以方便地加入Java、Flash、Shockwave、ActiveX 以及其他媒体，具有强大的多媒体处理功能。Dreamweaver 8还提供行为和时间线两种控件来产生交互式响应和进行动画处理。

（9）超强的扩展能力

Dreamweaver 8还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver 8的功能，并且可以发布这些插件

三、网页设计标记语言—HTML

1 HTML语言简介

HTML（Hypertext Markup Language，即超文本标记语言），是用于描述网页文档的通用语言。

超级文本标记语言（HTML）是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

2 HTML语言特点

HTML语言作为一种网页编辑语言，易学易懂。其主要功能如下：（1）简易性

超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

（2）可扩展性

超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

（3）平台无关性

超级文本标记语言可以使用在广泛的平台上

四、我的网站介绍

1 网站的主题、结构介绍

我的网站的主题是：“周杰伦资料库”，主要包括对周杰伦的基本信息，迄今为止发行的所有音乐专辑，有杰伦角色扮演的影片以及杰伦至今所获奖项的介绍，提供一些杰伦的写真图片、经典曲目的欣赏和对我完成网站制作有所帮助的老师同学朋友的感谢。

下面是我的网站的主界面：

2 网站的内容、形式和特点的介绍

本网站的主页以从总体到局部，逐层推进的设计思想，将网站从主体到细部给浏览者一个深刻的印象。网站中包括flash动画循环播放，静态图片背景，背景音乐，以及滚动字幕等效果给浏览者以不错的第一感觉。让浏览者对周杰伦有一个整体的了解。

3 网站重点页面的贴图

3.1 子页1：简介

界面如下：

3.2 子页2：发新专辑界面如下：

3.3 子页3：电影界面如下：

3.4 子页4：奖项

（1）音乐奖项界面如下：

（2）电影奖项界面如下：

3.5 子页5：鸣谢

界面如下：

3.6 子页中的部分子页：部分界面如下：

3.7 子页7：调差表单

五、网站设计感悟

通过本次网站的制作，是我了解到网页设计与网站制作需要很大的耐心。如果没有耐心，是学不好网页设计，也做不了一个成功的网站。对网页设计地学习需要坚持，坚持不谢地学习，因为在学习和实践过程中会遇到许许多多的问题，如果没有恒心，是没法解决各种问题的。

通过本次网站制作，使我对《网页设计与制作》这门课程有了更深的认识，对书中的知识内容得以进一步的消化，增强了我自身的实践动手能力。以后我将更加努力地学习，增强我个人网页设计的能力，将来做出更好更美的网站！