网页设计说明书 - 图文

《网页制作工具》

题 目：小水滴公益基金网站的设计与制作

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

设计说明书

_

孙俊国 2011年12月28日

目录

绪 论................................................................................................................. 3 1 小水滴公益基金网站的规划................................................................................ 3

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

1.1.1 网站的定位.......................................................................................... 3 1.1.2 网站板块的设置.................................................................................... 4 1.2 网站功能设计........................................................................................... 4 1.2.1 主页功能................................................................................................ 4 1.2.2 副页功能................................................................................................ 5

2 小水滴公益基金网站的设计与制作...................................................................... 5

2.1主页设计........................................................................................................... 5

2.1.1 logo设计 ............................................................................................. 6 2.1.2 banner设计............................................................................................. 7 2.1.3 栏目设计.............................................................................................. 7 2.1.4 导航设计.............................................................................................. 7 2.1.5 风格与色彩搭配.................................................................................. 8 2.1.6 技术运用................................................................................................ 8 2.2 副页设计.......................................................................................................... 8

2.2.1 栏目设计................................................................................................ 9 2.2.2 导航设计................................................................................................ 9 2.2.3 风格与色彩搭配.................................................................................... 9 2.2.4 技术运用................................................................................................ 9

3 网页设计的重难点分析........................................................................................ 10

3.1 网页设计的重点分析................................................................................... 10 3.2 网页设计的难点分析................................................................................... 10 小结：网站设计小结........................................................................................... 10

参考文献............................................................................................................... 11

2

绪 论

当我们坐在教室安静的读书时，当我们每天挥霍着青春无病呻吟时，我们可曾想过，还有许许多多的孩子羡慕着我们能够看书，羡慕着我们能够坐在宽敞的教室里，羡慕我们能每天不用考虑其他全心全意的上学，甚至羡慕我们手中能有一只笔，羡慕我们能够在干净的纸张上写字。

这些许许多多的对比，让我们反思，我们不屑一顾的东西，有些人却很珍贵的看待，我们也是不是应该做些什么呢，少吃点零食，少抽点烟，少一些挥霍，也许就能改变一些人些许的生活，古人曾所过“老吾老以及人之老，幼以幼以及人之幼”。

1 小水滴公益基金网站的规划

以下是我对小水滴基公益基金网站的具体规划

1.1 网站整体规划

小水滴公益基金网站是不以盈利为目的，为一些需要帮助的人筹集善款的公益网站。小水滴公益基金主要以中国红十字基金为主做一些公益拓展。我们网站设计主要分七个版块：网站首页、关于我们、新闻中心、公益项目、政策法规、常见问题、在线捐款等。每个板块都有对基金会的具体介绍，以便大家更好的了解小水滴基金会。

1.1.1 网站的定位

小水滴基金公益网站是附属中国红十字基金会的网站，同时也是独立的网

站，本网站开展以各种公益事业为基础的各种活动，也与各个公益网站相互联系，承办各种公益事业。

本网站主要是向大家介绍有哪些地方受灾，哪些人们需要帮助，能够方便的让大家了解各种公益事业，和如何去帮助需要帮助的人们。一些新闻情况也是近

3

期的各大公益网站的重要有关公益的事件，能够更好的让大家了解有关贫困山区，及受灾地区的情况，同时也为想要去帮助他人的人提供方便的在线捐款，做到透明善款分配情况。各个板块的设立也让满足了想要了解有关公益基金法的人们的需求。

1.1.2 网站板块的设置

网站的板块设置：网站主要有七大版块，它们是网站首页、关于我们、新闻中心、公益项目、政策法规、我要捐款、常见问题等。网站版块设计清晰明了，这些版块构成了整个网页布局，以便条理清晰地给观众以更详细的展现。

1.2 网站功能设计

我们公益基金网站主要为大家提供一个了解一些贫困山区及受灾地区的平

台，也为想要帮助他人的人提供点对点帮助的机会，在线捐款功能的设立直接与各个银行，手机用户等提供为大家奉献爱心提供了机会，同时也满足了想要了解公益基金会的人提供了需求，各个版块的设立清楚的为大家提供了各种想要了解小水滴基金的会的机会。也为许多爱心企业提供献爱心的机会，最后也为许多想要奉献或者犹豫是否帮助需要帮助的人提供个保障。

1.2.1 主页功能

（1）.主页功能，主要是为大家展现各种公益新闻及公益事业，我们的每

个小版块大体介绍让大家了解小水滴基金的功能。了解与各个企业的爱心合作，大家可以通过主要板块连接到个模块网页浏览相关的需求信息，可以通过会员登录或者注册来与许多受灾人民进行交流，更好的了解各种情况。

（2）. 主页能让浏览者更加方便快捷的了解小水滴公益基金为大家呈现的东西。

（3）．通过主页，将基金会的公益新闻、媒体聚焦、公益动态等展现给浏览者。

4

1.2.2 副页功能

（1）通过副页的设计将网站内容更加条理化、更加详细、更加方便的展现给浏览者

（2）副页中将每个版块的内容具体化、深入化、详细化。能让感兴趣的浏览者更详细了解小水滴公益基金会

（3）副页在展现具体内容的同时，能让浏览者更加深入的了解我们小水滴的组织架构、各种公益动态等

2 小水滴公益基金网站的设计与制作

2.1主页设计

主页设计主要采用简单大方布局，将所要呈现的内容分成几个大模块，这样既可以赏心悦目，让浏览者更方便的找到想找到的内容，又可以让浏览者不产生视觉疲劳，将所有的版块项目清晰地罗列出来。

5

2.1.1 logo设计

本logo用photoshop设计，用黄色的双手托着一个水滴，黄色代表安全，就手托着水滴，寓意着我们

6

要爱护每一份资源，用心关爱身边需要帮助的一切,也为需要帮助的人送去关爱，用心呵护周围的资源，同时也将爱心送给他人。

2.1.2 banner设计

banner设计各个爱心合作企业的标志，形成滚动条，上面为向前滚动，下面为向后滚动，加上与各个爱心企业的超级链接，更容易给浏览者呈现爱心合作企业，具体感觉设计如下：

2.1.3 栏目设计

我们网站主要有七个栏目，它们是网站首页、关于我们、新闻中心、公益项

目、政策法规、我要捐款、常见问题等等，还有别的小部分，还有其它小栏目组织架构，各种新闻等。

2.1.4 导航设计

导航设计上采用表格布局，将各个版块添加水平菜单表，运用蓝色字体与logo形成呼应，浅灰色背景给人以简洁大方。

7

2.1.5 风格与色彩搭配

网站的风格就是简洁、整齐这样可以让浏览者更好去了解各种信息。在搭配上采用了灰蓝的搭配，以浅灰色为主要基调，可以让网友们把注意力都集中在网站的内容上面。

在主页上添加flash动画，有图片点击变化的效果。

2.1.6 技术运用

在做网页的过程中运用了在课堂上所学的一些技术在网页中插入图像、flash、超链接、表格的使用、框架层和时间轴的使用、CSS样式模板和库和表单的使用等等，让自己设计的网页能够做的更好。

2.2 副页设计

副页设计采用简单明了的布局，将所在的版块内容突出的表现出来，方便浏览者浏览更多信息。

副页设计主要采用两种版式： 两种版式如下：

8

2.2.1 栏目设计

在副页中，因副页数量较多栏目设计分为多种，在主页的基础上，建立多个副页，以便顾客的浏览：

在关于我们中具体介绍了机构简介、组织架构、联系我们等介绍小水滴基金会的基本情况。

在新闻中心中我们可以看到感恩有你、天使之旅等各种公益项目新闻的介绍，为大家更好的了解各种公益动态新闻。

在公益项目中可以看到如红十字、博学计划、抗震救灾等多种公益项目的呈现。

在政策法规中可以了解到与公益基金相关的法律法规。 在我要捐款中可以清楚的知道捐款的流程及捐款的各种方式。

2.2.2 导航设计

不同的副页的基调不同，但主基调仍然是浅灰色和蓝色。简单明了，给人

以眼目一新的感觉。

2.2.3 风格与色彩搭配

第一种副页和主页一样网站的风格就是简洁、整齐这样可以让浏览者更好去了解各种信息。在搭配上采用了灰蓝的搭配，以浅灰色为主要基调，可以让网友们把注意力都集中在网站的内容上面。

第二种副页采用浅灰色和红色为主要基调背景设有红色边框给你一种焕然一新的感觉，更吸引大家眼球。

2.2.4 技术运用

两种副页中都运用了在课堂上所学的一些技术在网页中插入图像、flash、超链接、表格的使用、框架层和时间轴的使用、CSS样式模板和库和表单的使用等等，让自己设计的网页能够做的更好。

9

3 网页设计的重难点分析

3.1 网页设计的重点分析

（1）网页主页的设计至关重要，主页的设计关系着整个网站的布局设计与内容。

（2）网页主页中布局的设计与风格、色彩搭配也是非常重要的。 （3）网页副页模板的设计也很重要，应该让副页更好的承接主页，为主页填充更多的延迟。

（4）网页中也应该注意一些代码的引用，要善于运用这些代码。 （5）网页中还应该注意flash的运用，在运用div+css布局的时候必须认真规划好

（6）适合的图片的插入，为整体的美感提升亮点。

3.2 网页设计的难点分析

（1）网页设计中最难设计的就是主页，如何排版，如何搭配色彩，是否符合想表达的主题。

（2）网页设计中副页设计模版与主页是否相辅相成，各种元素搭配的是否合理也至关重要。

（3）spry菜单栏的合理使用，以及div+css层的具体调试。

小结：网站设计小结

通过这学期的学习，我学会了做网页，这次网站的完成，让我巩固了学到了不少知识，同时在制作过程中也发现了一些不足，通过这次作业的完成经历，我加深了对网页的了解，也找到了在网页制作中的许多乐趣，这次的作业中存在许多的小问题，还有很多的不完善，捐款广告也是借鉴他人网站的创意制作完成，在今后的网页制作中，我会吸取这次经验，制作更加完善合理的作品，我相信通过不断的学习，会一次比一次更加完善。

10

参考文献

[1] 主编 孙俊国 《网页设计与制作》 南京大学出版社

[2] 主编 谬亮 《DreamweaverCS3 基础与实例教程》电子工业出版社 [3] 主编 高志清 《网页设计制作案例教程》 中国水利水电出版社

11

信息工程学院

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

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

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

姓名 班级 评分标准 网站规划好、素材收集完整、15张网页以上。 主页设计 美观且有创意、内容完整、导航正确、有1个以上的flash广告动画（以Flash动画为主页时除外）。 副页设计 布局好，内容完整、导航正确，有1个以上的Flash动画14张网页以上 设计说明书 评分 标准与评价 要求：格式正确、排版规范；分析到位、网页设计重点与难点分析深刻。用A4纸双面打印，10页以上。 教师评价： 20 20 40 学号 分值 20 得分 考核成绩

折合 成绩 12

任课教师签名

13

本文来源：https://www.bwwdw.com/article/ljy3.html