网页设计说明报告.docx

网页设计说明报告.docx

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

网页设计说明报告

网页设计说明报告

网站设计说明书-样本

设计说明书

题目:

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

姓名:

学号:

班级:

指导教师:

完成日期:

王海燕20101070130___

10信高1班_孙俊国

__2011/12/15________

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

说明书.............3

第1章网站的规

划...........................................................

........................3

1.1网站整体规

划...........................................................

.............................3

1.1.1网站的定

位...........................................................

....................................3

1.2网站功能设

计...........................................................

.............................3

1.2.1主页功

能...............................................................................................31.2.2副页功

能...............................................................................................3

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

作....................................................3

2.1主页设

计................................................................................................3

2.2副页设

计..................................................................................................5

第3章核心代

码..................................................................7

4.1网页设计的重点分

析...........................................................................84.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.1logo设计

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

Logo截图如下:

2.1.2banner设计

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副页12.2.1.1栏目设计

不同的副页栏目设计不同，例如教学视频副页里添加了视频在线浏览栏

目，教学简介里则增加了对教师的介绍

以及风采展示，还有校园风光里则增加

了校园风景的动态浏览栏目，联系我们

里则对班级同学进行了展示等等。

栏目

截图如下:

篇二:

网页设计说明书范例

宁夏风采展示网站

题目:

专业班级:

姓名:

学号:

指导教师:

成绩:

说明文档走进宁夏09

级计算机科学与技术1班姓名学

号指导教师

第一章网页概

述...........................................................

.................................................................

..1

1.1网页简

介...........................................................

.................................................................

...1

1.2网页组

成................................................................................................................................1

1.3网页设计思

想.........................................................................................................................2

第二章网页设计思

路.......................................................................................................................3

2.1网页设计背

景........................................................................................................................3

2.2制作工具选

择........................................................................................................................3

2.3素材收

集...............................................................................................................................4

2.4网页设计内容构

想................................................................................................................5

第三章网页内容简

介.......................................................................................................................7

3.1网页功能简

介........................................................................................................................7

3.2网页主要功能描

述................................................................................................................7

3.3网页的浏

览............................................................................................................................8

第四章网页设

计..............................................................................................................................9

4.1网页结构总

图........................................................................................................................9

4.2各网页模块的组

成..............................................................................................................10

4.3网页制作环

境......................................................................................................................12

4.4网页设计思

路.............................................................

.........................................................12

第五章网页制

作............................................................................................................................14

5.1素材的加工制

作..................................................................................................................14

5.2网站的建

立..........................................................................................................................15

5.3网页设

计.............................................................................................................................15

5.3.1主页设

计....................................................................................................................15

5.3.2“环

境”.....................................................................................................................18

5.3.3“历

史”.....................................................................................................................20

5.3.4“文

化”.....................................................................................................................21

5.3.5“城

市”...................................................................................................................24

5.3.6其它页面设

计............................................................................................................26

第六章设计体

会............................................................................................................................28

致

谢....................................................................................................................................................29

摘要

【摘要】本网页主要用HTML语言

编写，利用Macromedia

Dreamweaver8.0作为开发工具，介绍了

宁夏回族自治区的历史、文化、人口、

民族、城市、经济、地理、特产等基本

概况，以图片和文字介绍相结合的方式，

穿插一些视频媒体，以网站浏览的方式

综合展示了宁夏回族自治区的整体面貌，着重介绍了宁夏几大城市和特色文化。

【关键词】网页设计说明书走进宁夏设计思路Dreamweaver8.0

Javascript语言

第一章网页概述

1.1网页简介

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

通俗的说，网站就是由网页组成的。

网页说具体了是一个html文件，浏览器是是用来解读这份文件的。

本次网页设计，主要用HTML语言编写，利用Dreamweaver8.0作为开发工具，中间插入了一些Javascript语言用以编制一些特效，如左右移动图片广告、显示当前时间等，主要介绍了宁夏回族自治区的历史、文化、人口、环境、民族、城市、经济、地理、特产等基本概况，以图片和文字介绍相结合的方式，穿插一些视频媒体，以网站浏览的方式综合展示了

将宁夏回族自治区的整体面貌展现给大家，着重介绍了宁夏回族自治区几

大城市和特色文化。

1.2网页组成

1、主页

（1）宁夏介绍

（2）五大城市（3）宁夏特色2、环境

介绍了宁夏回族自治区的自然生态

环境。

3、历史

介绍了宁夏的历史（旧石器时期—

—新中国成立——自治区成立）。

4、文化

（1）九大文化

（2）宁夏花儿（3）宁夏文学（4）宁夏书画5、城市

（1）银川市

（2）石嘴山市（3）吴忠市

（4）固原市

（5）中卫市

6、民族

（1）民族构成概况

（2）宁夏回族

7、人口

介绍了宁夏回族自治区的人口状况。

8、地理

介绍了宁夏回族自治区的地理概况。

9、经济

介绍了宁夏回族自治区2009年经济统计数据。

10、特产

介绍了宁夏回族自治区“五宝”以及其它特色产品、食品等。

1.3网页设计思想

本网页使用MacromediaDreamweaver8.0作为设计工具，采用多重链接的方式展示宁夏回族自治区的历史文化等几个方面，力求界面简洁明了的同时，设计中插入了一些Javascript语言用以编制一些特效，以提高可观赏性。

在制作过程中力求综合运用所学计算机技能，充分发挥本人的专业特长，使能够通过网页上图片展示和文字介绍，真实而且较为全面地反映宁夏回族自治区的概况，同时也反映了宁夏人民的风土

人情、民族风情、文化氛围、精神风貌、发展前景。

篇三:

网页设计课程设计说明书参考

福建林业职业技术学院

《网站建设与网页制作》设计说明书

课程名称网站建设与网页制作设计题目个人求职网站专业班级计算机信息管理0604班学生姓名蔡秀萍学号20064010307指导教师蔡尊煌起止日期2010年1月11日至1月16日

个人求职网站制作说明

一、网站开发目的和功能简介

随着网络技术的发展与互联网的普及，网站建设与网页制作越来越来成为各行各业以及个人宣传自己的有利工具。

个人网站在当今时代被越来越多的人用来做为宣传自己，它在网站建设中占据着重要地位，制作个人网站成为一个热点。

通过个人网站的制作可以向用人单位、老师、同学、亲朋好友提供了解我个人的一个互联网平台。

本站功能主要在方便用户查询本人的相关资料。

二、网站的设计

2.1网站名称:

瓶子个人网站2.2网站栏目划分:

根据本网站的目的和功能规划网站内容，包括各章节内容、实例演示、制作要点、案例素材库、成品欣赏、实训、关于我的更多、与我联系、友情连接、版权声明等基本内容。

（1）各章节内容——对个人详细情况的介绍;

（2）实例演示——列举了蔡秀萍工作实践经历和获得的许多奖项;（3）制作要点——利用移动标签让文字和图片产生动态的效果;（4）案例素材库——蔡秀萍个人的相关素材资料;（5）成品欣赏——个人网站的建设成品展示;（6）实训——与各模块相结合的实验内容;（7）友情连接——友情连接到蔡秀萍个人提供的完整材料等;（8）版权声明

具休如下图示:

2.3网站导航应用于所有页面提高网站的操作友好性。

2.4网站的风格与色彩选择:

页面以浅绿和浅黄色为主。

浅绿色体现了活力，字体实用浅棕色和淡淡的灰色给人一种清析、稳重的感觉。

所有页面色调统一，

布局相似。

2.5网站目录结构设计合理:

不同素材采用不同学文件夹分开存放。

如声音放在sound文件夹、图片放在images文件夹，照片放在photos、FLASH动画放在flash文件夹、作业成果图放在works等。

三、首页的制作过程

3.1网站首页以1024X768为基准分辨率进行布局。

利用样式布局网页来统一网站风格。

新建网页保存制作如下布局。

版面分栏结构，即页头、导航栏、内容、版权（如下图）

整个页面分为四部分，第一部分是动态的文字，主要是个人自信心的体现的主题声明;第二部分是导航栏;第三部分是详细内容，其中网页中的文字排得整齐紧凑，这样能给人一种舒服的感觉。

在网页适当的地方加一些图片，每张画面再加一些不同的文字说明，使得网页显得更加的精美;第四部分是版权声明。

采用这种布局，主要是给浏览者一种简单、清晰、明了的感觉，使网站整齐划一。

具体首页布局如下图所示。

3.2制作过程简述:

本网页制作分为三个部分:

顶部包括瓶子个人网站动画的制作、设为首页、收藏本站、与我联系、导航。

中部又分为左右两个部分，左边为相册和名言警句，其中在我的相册中添加行为，并利用imageready制作动态的图片，是的图片自动变化，当鼠标放在图片上，使得图片停止变化，鼠标移开时恢复;右边为我的日志。

底部为版权信息。

我还为网页设置了背景图片，设定单元格局中显示，设定文字样式，还为页面增加状态栏运动文字的效果。

四、求职意向制作过程

4.1新建一个页面，命名为求职意向（qzyx），其页面是以1024X768为基准分辨率进行布局。

4.2在页面属性的外观中设置四边边距为0，文本颜色设为:

#77c7c，背景颜色设为:

#5F564D，大小设为12像素;在链接中设置下划线样式为:

始终无下划线;在标题中设置标题1

（1）为12像素，颜色为:

#a0672e;在标题/编码中，设置标题为:

个人求职网站。

单击

应用或确定按钮，确认以上设置。

4.3利用样式定义各个部分的高宽，

将images/main_bg.gif设为背景图片。

其

样式代码如

下:

#main_container{width:

950px;height:

auto;margin:

auto;

background:

url（images/main_bg.gif）no-repeattopcent