企业网站设计说明书.docx

上传人：b****4 文档编号：3934309 上传时间：2023-05-06 格式：DOCX 页数：13 大小：1.95MB

下载相关举报

第1页 / 共13页

第2页 / 共13页

第3页 / 共13页

第4页 / 共13页

第5页 / 共13页

第6页 / 共13页

第7页 / 共13页

第8页 / 共13页

第9页 / 共13页

第10页 / 共13页

第11页 / 共13页

第12页 / 共13页

第13页 / 共13页

亲，该文档总共13页，全部预览完了，如果喜欢就下载吧！

下载资源

资源描述

企业网站设计说明书.docx

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

企业网站设计说明书.docx

企业网站设计说明书

宁波大红鹰学院

信息工程学院

网

站

设

计

说

明

书

网页名称：

腾跃集团主页设计

专业名称：

计算机科学与技术

班级名称：

姓名：

学号：

完成时间：

2010-6-22

网站设计说明书

一、网站规划设计说明

1、结构设计

腾跃石油集团是一个民营企业，网站规模不是很大，设有5个栏目，每个栏目里只包含一个页面，有很多中小企业的网站都属于这种类型。

该网站主要展示了“创造价值，追求卓越”公司形象，该公司的业务范围包括石油产品，化工产品，深海开发等等。

页面结构简单，清晰，采用上中下结构。

2、内容规划

腾跃石油集团的首页是一个静态的欢迎主页面和一个动态导航页面，内容页一般包含以下几个部分：

⏹页面头部：

包含标志及企业名称；

⏹栏目导航：

单击可以进入其它各内容页面；

⏹具体内容：

本页的具体内容（包括说明文本及公司形象图片）

腾跃石油集团2010年6月18日。

3、LOGO设计

技术：

该logo的设计用到了photoshop软件里的椭圆选框工具，移动工具，添加文字工具等技术。

用意：

该logo的下面波纹象征大海，表示通过深海钻井平台得到原油。

上面的水滴象征通过加工得到石油产品。

4、技术方案

Photoshop软件，Dreamweaver软件，记事本。

二、网站色彩说明

1、网站主色调

该网站的主色彩是蓝色和白色，配以红色和少量的绿色，文字为黑色，如下图所示：

图1配色采集

蓝色是一种大方、安静的颜色，它代表的是自然、严谨与健康，是使用比较广泛的颜色之一。

红色和绿色的使用，给网页注入了活力，使整个网站显示朝气蓬勃。

2、网页链接色

表1普通文字链接配色表

3、导航链接色

三、HTML页面结构图

图2HTML页面结构图

四、页面DIV结构代码

五、CSS代码及注释

（要求:

字体:

TimesNewRoman,字号:

五号,行距:

1.25倍）

@charset"utf-8";

/*CSSDocument*/

body{

margin:

0px;

padding:

0px;

text-align:

center;

}

#container{

position:

relative;

width:

1000px;

background-color:

#EEEEEE;

background-position:

center;

text-align:

left;

font-family:

"宋体";

font-size:

14px;

border-color:

#000080;

border-width:

1px;

border-style:

solid;

}

#top{

width:

1000px;

height:

30px;

}

#nav{

width:

100%;

padding:

margin:

list-style-type:

none;

}

#navli{

float:

left;

}

#navlia{

width:

139px;

display:

block;

margin:

0px0px;

text-decoration:

none;

text-align:

center;

line-height:

30px;

color:

#000000;

background-color:

#A6CAF0;

border-right:

1pxsolid#FFCC00;

}

#navlia:

hover{

background-color:

#FFFF33;

}

#main{

background:

#FFFBF0;

width:

1000px;

height:

810px;

}

#left{

width:

280px;

height:

810px;

float:

left;

border-right-width:

2px;

border-right-style:

outset;

border-right:

#000000;

}

#leftup{

width:

262px;

height:

175px;

margin-left:

6px;

margin-top:

5px;

padding-top:

10px;

padding-left:

6px;

background:

#CCFFFF;

}

#leftmid{

width:

268px;

height:

40px;

padding-top:

10px;

padding-left:

12px;

}

#leftdown1{

width:

268px;

height:

280px;

margin-top:

5px;

margin-left:

6px;

border:

#0066FF;

border-style:

solid;

border-width:

1px;

}

#leftdown2{

width:

268px;

height:

250px;

background:

#CCFFFF;

margin-top:

18px;

margin-left:

6px;

border:

#0066FF;

border-style:

solid;

border-width:

1px;

}

#fuwu{

padding-top:

20px;

padding-left:

25px;

float:

left;

}

#tu1{

padding-top:

20px;

padding-right:

30px;

float:

right;

}

#right{

width:

718px;

height:

810px;

float:

right;

}

#rightup{

width:

718px;

height:

520px;

padding-top:

10px;

}

#rightmid{

padding-top:

10px;

width:

718px;

height:

270px;

}

#jingyingtext{

width:

450px;

height:

230px;

padding-left:

10px;

float:

left;}

#jingyingpic{

width:

240px;

height:

230px;

float:

right;

}

#footer{

width:

1000px;

height:

30px;

background:

#A6CAF0;

text-align:

center;

color:

#FFFBF0;

padding-top:

10px;

}

.center{

text-align:

center;

}

.spanwidth{

float:

left;

width:

80px;

}

.editbox{

height:

16px;

width:

150px;

padding:

1px;}

input,file,textarea{

border:

1pxsolid#006666;

}

.btn{

background-color:

#e8f4ff;

width:

55px;

height:

20px;

margin-right:

10px}

六、页面测试结果

1、IE6.0下测试结果

2、FF下测试结果

七、心得体会。

这个网站是我自己独立完成的，所以承担了全部的工作。

对这个企业网站的制作感触颇深，看似一个很简单的页面，做起来却十分繁琐，但我坚持每个流程都自己完成，在不断地错误和调试中总结经验。

光光看书是远远不够的，对于使用photoshop制作网页所需要的图片，我觉得只有亲自用过每个工具，才能区分它们功能的细微差别，达到图片的理想效果。

而在DreamWeaver里编写程序也一样，像标识符添加在哪里，什么时候添加，效果都会不太一样。

这个网页我是根据模板1设计的，整体的网页效果都是大方简洁，但我觉得我的网页图片的色彩更鲜活。

在导航的制作上，我借鉴了实验5，在鼠标移到导航项上，会变颜色。

中间的内容部分和banner，我有添加自己写的文章。

做出这样的效果，我还是很满意的。

在该网页的制作过程中，我遇到的最大的两个问题是：

CSS样式表里布局的排版和网页色彩的美观。

在

里套

的方法可以达到分区布局的效果，但在CSS样式表里的布局常常不在该在的位置上，精细布局很难掌握。

于是我事先把各模块和整体结构图都规划好大小。

为了色彩的协调，我选一个了一个主色调，不要添加过多的颜色。

这次的主色调，我就很喜欢，健康自然，大方简洁很契合我的“中国浪漫古典文学的主题”。

我个人很喜欢这门课，也觉得很实用，比如可以把自己喜欢内容添加进去。

所以经常做web实验一连几个小时做下来，有时熬到半夜都不觉得累。

我认为在做实验之前，要把书和PPT看懂，看透，然后再做。

在制作的过程中，不单单要完成规定的效果图，还要试试用其他工具会达到什么效果，要学会举一反三。

可能是兴趣所在，我觉得web这门课还是很有趣的。

展开阅读全文