网站设计说明书-样本

设计说明书

题 目：青岛滨海学院精品课程网站

姓 名：学 号：班 级：指导教师：完成日期：

王海燕 [1**********] __ _

10信高1班 _ 孙俊国 _ _2011/12/15________

目录

青岛滨海学院精品课程设计与制作说明书 ............. 3

第1章 网站的规划 ................................................................................... 3

1.1 网站整体规划 . ....................................................................................... 3

1.1.1 网站的定位 ............................................................................................... 3

1.2 网站功能设计 . ....................................................................................... 3

1.2.1 主页功能 ............................................................................................... 3 1.2.2 副页功能 ............................................................................................... 3

第2章 精品课程网站设计与制作 .................................................... 3

2.1 主页设计 ................................................................................................ 3

2.2 副页设计 .................................................................................................. 5

第3章 核心代码 .................................................................. 7

4.1 网页设计的重点分析 . .......................................................................... 8 4.2 网页设计的难点分析 . .......................................................................... 9

小结：网站设计小结 ............................................................ 9 参考文献 ................................................................................ 9

青岛滨海学院精品课程设计与制作说明书

第1章 网站的规划

1.1 网站整体规划

1.1.1 网站的定位

精品课程网站是一个学校的网站，首先网站整体上要给人体现出一种，温馨的、充满文化气息的、先进的、积极进取的校园氛围，网页整体上呈现橙黄色色调，这种色调能带给人热情奔放、充满激情正好适合大学生这个年龄段。 1.1.2 网站板块的设置

网站的板块从整体上分为主页和副页；进一步细分，主页是由banner 、logo 、导航、栏目组成；而副页就相对简洁些，主要分为banner 、导航、栏目三个板块。

1.2 网站功能设计

1.2.1 主页功能

1）通过主页，你可以了解学校的新闻、教师风采、校园最新动态、以及国家精品课程等内容。

2）同时主页可以连接到各个副页和校园论坛，以及友情链接各大高校主页。

3）主页给人以视觉刺激，以扩大浏览者的浏览兴趣，了解更多信息。 1.2.2 副页功能

1）副页把内容具体化，是内容更丰富、更清晰化。

2）副页的第二个功能是给浏览者提供下载平台，例如：在申报文件中，我像浏览

者提供了下载文件功能，和在教学视频中提供视频下载。

第2章 精品课程网站设计与制作

2.1 主页设计

2.1.1 logo设计

Logo 继续采用我们学校的logo 设计，把一个椭圆分成三块，用三原色着色，分别有不同的内涵。

Logo 截图如下：

2.1.2 banner设计

Banner 是一进大门看到的凝聚雕塑，和与大门正对的嵩德楼结合而成，而且还有文字型解读学校历史，并且集合了学校校训：“开拓勤奋，坦诚务实。”也增长了网页的观赏性。

Banner 截图如下：

2.1.3 栏目设计

栏目排版丰富而又条理，即增加了阅读性，又体现出美观大方。 栏目截图如下：

2.1.4 导航设计

导航栏主要运用flash 动画菜单栏工具，图片交换，使要点击内容突出，既美观又大方。

导航栏截图如下：

2.1.5 风格与色彩搭配

整体上采用尸字形设计风格，是内容更加丰富，主页采用潜橙与橙色里加了点红色的色彩搭配。给人一种温馨而又充满激情感觉，增加读者的阅读兴趣，使网页更具有浏览性。 2.1.6 技术运用

1）主要应用表格进行布局，运用div 和ap-div 进行辅助布局。 2）导航主要运用flash 动画技术。

3) 运用fireworks 以及ps 对图片进行处理、融合，设计出风格独特独特的banner ，以及做出网页效果图。

4） 应用代码进行加工处理实现图片与字的滚动以及统计浏览次数。

2.2 副页设计

2.2.1 副页1 2.2.1.1 栏目设计

不同的副页栏目设计不同，例如教学视频副页里添加了视频在线浏览栏目，教学简介里则增加了对教师的介绍以及风采展示，还有校园风光里则增加了校园风景的动态浏览栏目，联系我们里则对班级同学进行了展示等等。 栏目截图如下：

2.2.1.2 导航设计

副页导航与主页导航并不完全相同，副页导航更加简练。 截图如下：

2.2.1.3风格与色彩搭配

副页色彩与主页保持一致，副页风格主要采用T 型布局，和E 型布局，跟据内容不同，添加不同栏目框架。

2.2.1.4技术运用

1）通知运用流动字体代码编写，图片有的采用流动图片代码，有的使用flash 技术制作。

2) 运用fireworks 以及ps 对图片进行处理、融合，设计出风格独特独特的banner ，以及做出网页效果图。

2.2.2 副页2 2.2.2.1 栏目设计

栏目设计根据内容设计不同风格栏目。截图如下：

2.2.2.2 风格与色彩搭配 与主页风格色彩相同。 2.2.2.3 技术运用

1）应用flash 技术制做图片展示，利用fireworks 设计banner 。 2）运用ap-div 布局。

第3章 核心代码

第4章 精品课程网站网页设计的重难点分析

4.1 网页设计的重点分析

1) 主要体现在板式设计，色彩搭配上围绕一个重点，整体协调，内容丰富，特别要突出主题，副页既要体现与主页的协调，还要突出不同主题的风格这是重点。

2）栏目布局。网页布局有“国”字型、拐角型、标题正文型、左右框架型、上下

框架型、综合框架型、封面型、F1ash 型、变化型等多种形式。采用表格布局我认为是

最佳选择，虽然布局的过程简单易用，但是问题很多，例如：超链接问题，还不太稳定；采用ap-div 进行辅助布局，但ap-div 随分辨率改变而发生变化，不过结果还算理想，以后打算采用更稳定的div 布局

4.2 网页设计的难点分析

1）网页采用表格布局，不稳定容易溢出，是整个网页出现裂痕。 2）超链接有时连不上。

3）写代码时要考虑表格的代码，进一步增加了难度，还有ap-div 像素问题都是难点。

小结：网站设计小结

在现代快速发展的社会，报纸、纸质图书将要被取代，一个重要的信息来源就是互联网，要想在互联网上浏览信息，必须通过网站，所以网站的建设将更能使用户更好的运用互联网，网站的实用性、美观程度也促生了一些行业，例如：网页美观，网站模板设计等，因此网站建设显得尤为重要。

学校网站建设，即方便同学们浏览信息，也给外界了解我们学校提供了平台，同时也可在网站上进行师生交流，增加同学与老师的距离，也可使同学们在校园网上学习优秀教师的教学视频，给同学们提供更多的教学平台。

网站设计是一个繁琐而又有意义的工作，考验我们专业知识的同时，也在考验着我们的耐心。在网页里可以体现我们的创意，设计方法让我们的想法变得可视化，因此网站建设也能体味其中的乐趣。

参考文献

[1] dreamweaver 网页设计与制作案例教程 [2] http://www.hezeshi.com/sj/200811/7/10

[3] 祈大鹏 dreamweaver cs4 实用教程. 北京：电子工业出版社，2010

信息工程学院

《网页制作工具》实践环节考核报告单

2011-2012学年度第1学期期末

排课编号：（2011-2012-1）-0714394-00425-1 批阅日期： 年 月 日

rowspan="5" colspan="3"> name="index4_r27_c13" src="sucai/images/index4/images/index4_r27_c13.jpg" width="128" height="80" border="0" alt="">

onMouseOver="MM_swapImage('index4_r27_c16','','suc ai/images/index4/images/index4_r27_c16_f2.jpg','index4_r27_c16','','sucai/images/index3/main1_r26_c16.gif',1)"> name="index4_r27_c16" src="sucai/images/index4/images/index4_r27_c16.jpg" width="55" height="14" border="0" alt="">

rowspan="5" colspan="2"> name="index4_r27_c20" src="sucai/images/index4/images/index4_r27_c20.jpg" width="41" height="80" border="0" alt="">

onMouseOver="MM_swapImage('index4_r27_c22','','sucai/images/index4/images/index4_r27_c22_f2.jpg','index4_r27_c22','','sucai/images/index3/main1_r27_c22.gif',1)"> name="index4_r27_c22" src="sucai/images/index4/images/index4_r27_c22.jpg" width="81" height="14" border="0" alt="">