宁波大红鹰学院
信息工程学院
网站设计说明书
网页名称： XX公司主页设计（XX书店设计）
专业名称： 信息管理与信息系统
班级名称：
姓 名：
学 号：
完成时间： 20##-1-15
网站设计说明书
一、网站规划设计说明
(网页规划设计说明，包括LOGO设计、结构设计、技术方案、内容规划等。不少于500字)
1、结构设计
小型企业网站一般规模都不是很大，一般设有3-5个栏目，有的栏目里甚至只包含一个页面，有很多中小企业的网站都属于这种类型，这类网站一般只是为了展示一下公司形象，说明一下公司的业务范围……(简要说明一下设计),页面结构相对来说比较简单，一般采用上中下结构。
2、内容规划
这类网站前台页面的开发，首页一般是一个静态的欢迎页面或者是一个flash制作的导航页面，内容页一般包含以下几个部分：
n 页面头部：包含标志及企业名称等；
n 栏目导航：单击可以进入其它各内容页面；
n 具体内容：本页的具体内容（包括说明文本及公司形象图片）
n 版权声明：一般在页脚部分。
3、LOGO设计
(说明：LOGO如何设计,体现了些什么用意或是用到了什么技术等)
4、技术方案
(说明：用到了哪些技术及软件)
二、网站色彩说明
(说明:包括网页主色调、链接色、导航色等，要求通过表格列出页面中需要的颜色表)
1、网站主色调
该网站的主色彩是绿色和白色，配以黄绿色和少量的橙色，文字为黑，如下图所示：
图1 配色采集
绿色是一种非常具有亲和力的颜色，它代表的是自然、生命、活力与健康，是使用比较广泛的颜色之一。黄绿色和橙色的使用，则使整个网站显示朝气蓬勃。
2、网页链接色
表1 普通文字链接配色表
3、导航链接色
(画表格说明)
三、HTML页面结构图
图2 HTML页面结构图
四、页面DIV结构代码
<div id="main">
<div id="logo"></div>
<div id="box">
<div id="text"></div>
<div id="ver"></div>
</div>
</div>
五、CSS代码及注释
(要求:字体: Times New Roman,字号:五号,行距:1.25倍)
* {//通配符的设置,保证页面效果一致
margin: 0;
padding: 0;
border: 0;
font-family: "宋体", sans-serif;
font-size: 12px;
color: #000;
}
body {//设置整个页面的背景色及文本的位置
background: #CCC;
padding-top: 20px;
text-align: center;
}
#main {//设置最大DIV的背景图像、背景颜色及宽高
background: #060 url(site/img/home_main_bg.gif) repeat-x;
border: 1px solid #060;
margin: 0 auto;
height: 500px;
width: 770px;
}
……
六、页面测试结果
(要求：页面在FF及IE6.0以上任一版本下测试结果，贴图完成)
1、IE6.0下测试结果
2、FF下测试结果
七、心得体会。
(要求：必须要有内容，可以是学习总结，可以是体会，可以是技术知识总结，也可以是经验总结等,不少于500字)
第二篇：网页设计说明书(模板)
网页设计说明书
网页名称： 博客
专业名称： 软件技术
班级名称： 软件一班
姓 名： 张辉德
学 号：20135533116
完成时间： 一月3号
“XXXX（网站标题）”网页设计说明书
一、网站规划设计说明
注：请按以下模板填写，文字说明必须与所设计的网站实际内容严格对应，文中所有红字部分属于说明注释的部分，填好后应全部删除红字。
1、网站需求和目的
简述本网站制作的目的，面向的用户群。网站具备的功能和期望达到的目标。
目的：简单的博客制作
面向对象：全体客户
功能：简单的链接
期望：实现人机交流及人人网上互动
2、网站栏目规划
简要说明一下栏目设计，共几个栏目。
n 栏目1:index.html,主页
n 栏目2:link，链接页（音乐）
n 栏目3:link1，链接页（文字）
n 栏目4:link2，链接页（图片）
n 栏目5：link3，链接页（视频）
3、网页内容规划
首页中的内容版块包含以下几个部分：
n 页面头部：LOFTER博客
n 栏目导航：图片链接（视频，文字，音乐，图片）
n 具体内容：博主头像，好友作品，及几张图片
n 版权声明：计算机少年|power by lofter
首页截图（index.html）：
二级栏目页截图（请说明对应的html文件名）：
4、技术方案
(说明：用到了哪些技术及软件？有无CSS、div布局、Javascript网页特效或多媒体等元素？网站有何特色？)
有CSS，DIV布局，Javascript网页特效，多媒体
软件：PS，dreamwveaver
二、网站色彩说明
(说明:包括网页主色调、链接色、导航色等，要求通过表格列出页面中需要的颜色表)
1、网站主色调
该网站的主色彩是黑色、灰色、白色。黑色是经典的代表，让人睿智。灰色，单调，特别适合灵感的创作。白色，简单。
2、网页链接色
普通文字链接配色表
3、导航链接色
(如果导航中的链接色和整个网页链接色相同的话，将上表复制到下方即可，按实际情况填写)
导航文字链接配色表
三、HTML页面结构图
四、
首页div布局结构图
(请将首页及二级页结构图列出。)
四、页面DIV结构代码
(请将首页及二级页div结构代码列出。)
首页：
<div id="container">页面宽度1325px
<div id=”head”>头部页面宽度1309px，高度83px</div>
<div id=”left”>左边页面宽度300PX
<div id=”zuozhequ”>作品宽度114px
</div>
<div id=”middle”>中间区域宽度563px
<div id=”zuopin”>中间区域的作品宽度560px,高度433px</div>
</div>
<div id=”right”>右边宽度440px
<div id=”bozhu”>博主宽度225px，高度53px</div>
<div id=”wenzhang”>文章宽度225px，高度38px</div>
<div id=”bozhuzhezhi”>博主设置宽度225px，高度33px</div>
<div id=”guanzhu”>关注宽度225px，高度36px</div>
<div id=”faxianhaoboke”>发现博客宽度225px，高度29px
<div id=”lizi”>个博客宽度225px，高度32px</div>
<div id=”lizi”>一个博客宽度225px，高度49px</div>
</div>
</div>
</div>
二级页：
五、CSS代码及注释
(要求:字体: Times New Roman,字号:五号,行距:1.25倍，请挑选重要的CSS代码列出即可，不用贴全部代码。)
六、页面测试结果
(要求：页面至少在两种不同的浏览器中测试结果，如FireFox或IE6.0以上任一版本或其他类型浏览器，列出首页测试效果截图即可)
1、360浏览器下测试结果
2、搜狗浏览器下测试结果
七、心得体会
(要求：必须要有内容，可以是技术知识总结或经验总结；制作网页的过程中碰到哪些问题，怎么解决的；网页存在哪些不足；今后有哪些地方可以进一步改进。)
经验总结：
首先，列出HTML页面结构图。
其次，设出个个div的宽度，高度
还有，可以用PS先大概做出模板
问题：
在排版时，浮动弄错；在设置DIV时，宽高的设定出错；做链接时，链接不了；文字位置的
解决：
浮动问题，可先查看个个div的宽高。看看那个设置出错（太大还是太小）。
链接问题：查看源代码及总体的框架，看看那里有错。