网站设计说明书.docx

网站设计说明书.docx

《网站设计说明书.docx》由会员分享，可在线阅读，更多相关《网站设计说明书.docx（14页珍藏版）》请在冰豆网上搜索。

网站设计说明书

*******网站设计  

发布时间：

 2010-05-10   

目录

第一章引言1

第二章网站总体分析与设计2

第三章网站建设的流程2

第四章网页制作3

一、制作步骤3

二、常用参数3

三、网页布局4

第五章详细设计5

第六章网页色彩8

第七章网站的安全性和运行环境10

第八章网站主页展示11

第九章结束语12

参考文献12

第一章 引言

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

为了更好的提高集团知名度，特构建上海市枫林地产集团网站。

1.1 设计思想

通过网站，全面宣传，展示集团风采、优点与特色，发布集团的重大活动安排与新楼盘开盘，增强业主与集团之间的联系。

1.2 开发工具的选用及介绍

DreamweaveCS4：

MacromediaDreamweaver是建立Web站点和应用程序的专业工具。

它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

从对基于CSS的设计的领先支持到手工编码功能，Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。

开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。

所以我选择了DreamweaverCS4架构上海市枫林地产集团网站

1.3常用工具

用来制作效果图的软件并没有明确的规定。

可以使用各种图形制作软件和处理软件，现在通常使用的软件是PHOTOSHOOP和FIREWORKS。

在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。

Photoshop是一款非常好用的平面设计软件。

由Adobe公司开发设计，其用户界面易懂、功能完善、性能稳定，是比较专业的图像处理软件，它具有强大的滤镜功能。

所以，在很多的的广告、出版、软件公司，Photoshop都是首选的平面工具，它有很多的快捷方式，如抓手工具H键，TABLE键切换显示或隐藏所有的控制板，D键、X键迅速切换前景色和背景色等，灵活的运用快捷键，可以使设计的速度大大提高。

第二章 网站总体分析与设计

2.1网站系统分析

根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：

集团风采 通过集团简介、人力资源、枫林会及部分图片等内容来展现。

优点特色 通过新闻、热点楼盘的栏目来展现。

信息发布 通过在线咨询、信息查询等栏目来实现，内容有人才招聘、 

活动安排等。

2.2主页设计

网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现集团的勃勃生气，静态主页方式介绍集团简介、热点楼盘说明、新闻中心，采用交互式的动态的web画面来实现。

第三章网站建设的流程

1．定义合适的域名。

由域名构成的网址会像商标一样，有助于将来塑造网上的形象。

域名除了要符合公司的性质以及信息内容的特征外，还要具有简洁、易记、具有冲击力的特点。

2．租用虚拟服务器。

有了域名后，就需要一个空间存放网站，这个空间就是Internet上的服务器。

一般虚拟主机提供商都能向用户提供大容量、高速度的服务器，用户可根据网站的内容设置及其发展前景来选择。

3．设计网页。

网页的设计制作可以自己完成，也可以通过虚拟主机提供商或专业的网页设计制作商来完成。

设计网页前要收集所有需要放在网站上的文本资料、图片等，并尽量用文字详细说明制作的框架结构，将收集的材料提供给网页设计者。

第四章网页制作

一、制作步骤

网站是网页的集合，一个站点用的所有网页构成一个网站，网页是网站的表现形式，网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。

网页设计包含的内容非常多，大体分为两个方面：

一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。

设计页面的第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看作一张报约或者一份杂志来进行排版布局。

1.草稿新页面就像一张白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力、创造力，将想象的布局到上面去。

这是原创阶段，你不必讲究细腻工整，你也可在草稿本上先画出整个布局框架，把多个版块的位置先粗略的布置上去以往下一步工作的展示，这一步也可以借住PHOTOSHOP或其他工具软件来完成。

2.粗略布局在草稿的基础上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将网站标志、导航条、广告条等最主要的模块放在最突出位置，然后考虑其他模块的布局。

3.定稿定稿即将粗略布局精细化、具体化，完成整个页面的设计。

页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面的都经客户确定后，完成网页的制作进程，交给程序员添加程序。

二、常用参数

图片质量与下载速度

由于网络速度问题，我们要考虑图片的大小对传输速度的影响，如果图片太大就会影响浏览速度，访问者很快就对这个网站失去了兴趣，只有充分了解图片质量与下载速度的关系，并了解不同的文件格式，才能更有效的表达内容。

1.分辨率

理解图像分辨率可以直接控制文件大小和下载速度，进而影响访问者的人数，创建WEB图片的要求是小、快、好。

显示器的分辨率起决定性的作用，大多数显示器使用的是1024*768的分辨率，因为要通过显示器页面，所以用高分辨率并不会增加图片质量相反还会降低图片的下载速度。

2.位图

习惯性称为图像，而将矢量图称为图形，位图是位映射图像的简称，也可叫栅格图。

它将一幅图像分成许多栅格，栅格的每一个点就是图像的像素，其值就是像素的亮度和色彩度，扩大位图尺寸的效果是增多像素，从而将使线条和形状显得的参次不齐，位图的与其分辨率密切相关，因此在处理位图图像时，必须设置合适的图像分辨率，否则输出图像时会遗漏细节，使图像模糊。

3.矢量

矢量图也称为面向对像的图像或绘图图像，它使用一组线段造型描述一段图像，图像中包含的直线，弧线和造型的设置与开关是由指令描述的，矢量图适用于描述色彩简单的图像，矢量文件中的图像元素称为对象，每一个对象都是一个自成一体的主体，它具有形状、轮廓、大小和屏幕位置等属性。

放大位图会失真，但放大矢量图不会失真。

4.图片格式

制作好的效果图可以保存为各种格式，包括GIF格式，JPEG格式和PNG格式等各个图片格式之间的区别为：

GIF格式即图形交换格式；GIF格式的图片只能使用256种颜色，不适合显示色彩丰富的图像内容。

其特点是1.采用隔行扫描的显示方式；2.可以设置背景透明；3.可以制作简单的动画。

JPEG格式可以显示颜色复杂的图片，但是在处理大面积的颜色块时可能会出现明显的压缩痕迹。

PNG格式的图片兼有GIF和JPEG的优点。

三、网页布局

常见网页版式布局结构有以下几种：

两栏式结构，即页面顶部为网站标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要内容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。

三栏式结构是一些大型网站常用的布局结构，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条内容或者广告条。

三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是网站常用的一种布局形式。

“三”型结构，这种结构多用于国外网站或者视频类网站，其特点是分类清晰，展示方便。

左右框架型，是企业网站或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。

左右框架型的结果非常清晰，内容一目了然，便于信息的查询。

上下框架型与左右框架型类似，其区别仅仅在于形式。

页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个网站显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示内容的网站。

Flash型主要采用现在流行的Flash技术，页面表达的内容较为丰富，给人视觉和听觉上很大的冲击，处理得当会达到Web页面难以达到的效果。

第五章 详细设计

3.1超级链接

网站所有链接以鼠标经过或点击变换红色，无下划线，CS样式如下：

A:

hover{

COLOR:

#ff3300;TEXT-DECORATION:

none

}

A:

active{

TEXT-DECORATION:

none

}

3.2整站组成构造

共分成七大部分：

1、 首页网页index.html：

用来显示体现集团形象的重中之重。

2、 枫林介绍网页rjjs.html：

显示集团概况。

3、 新闻中心网页xzyd.html：

显示集团近期更新新闻。

4、 产品中心网页cpzx.html：

显示集团主要产品信息。

5、 人力资源网页rlzy.html：

显示集团人力资源，人才招聘信息。

6、枫林会网页qsjj.html：

显示集团会所活动，会员信息。

7、联系我们网页qsjjd.html：

集团联系方式。

3.3首页

首页网页：

index.html

首页主要分为四部分：

最顶部分为集团名称，中间分两部分：

集团交互式动态图片，集团简介、楼盘、集团新闻，底端为集团联系方式。

1、图片交互式动态展示以15种变换类型自动切换，代码如下：

--//BannerAD

varbannerAD=newArray（）;

varbannerADlink=newArray（）;

varadNum=0;

bannerAD[0]="images/inde/1.jpg";

bannerADlink[0]="#";

bannerAD[1]="images/inde/2.jpg";

bannerADlink[1]="#";

bannerAD[2]="images/inde/3.jpg";

bannerADlink[2]="#";

bannerAD[3]="images/inde/6.jpg";

bannerADlink[3]="#";

bannerAD[4]="images/inde/2.jpg";

bannerADlink[4]="#";

varpreloadedimages=newArray（）;

for（i=0;i

preloadedimages=newImage（）;

preloadedimages.src=bannerAD;

}

functionsetTransition（）{

if（document.all）{

bannerADrotator.filters.revealTrans.Transition=Math.floor（Math.random（）*23）;

bannerADrotator.filters.revealTrans.apply（）;

}

}

functionplayTransition（）{

if（document.all）

bannerADrotator.filters.revealTrans.play（）

}

functionnextAd（）{

if（adNum

elseadNum=0;

setTransition（）;

document.images.bannerADrotator.src=bannerAD[adNum];

playTransition（）;

theTimer=setTimeout（"nextAd（）",3500）;

}

//-->

style="FILTER:

revealTrans（duration=2,transition=23）">

nextAd（）

3.4产品中心

图片展示使用一个DIV层，采用往右移动方式，代码如下：

hidden;width:

947px;height:

116px;">