《网站开发与应用》课程设计开发说明书.docx

《网站开发与应用》课程设计开发说明书.docx

《《网站开发与应用》课程设计开发说明书.docx》由会员分享，可在线阅读，更多相关《《网站开发与应用》课程设计开发说明书.docx（17页珍藏版）》请在冰豆网上搜索。

《网站开发与应用》课程设计开发说明书

前言

微景观在我们生活中并不少见，无论是自己搭配着种植的一小盆植物，还是在一个小盒子里布置的一个小世界都属于微景观的范畴。

现在比较热门的有苔藓微景观和多肉植物，本网站也是为了使人们更加了解这个可爱的世界。

网上有许多介绍植物的网站但并没有特别详细的具体介绍微景观，而且我所设计的这个网站并不仅仅是用于介绍多肉植物，更多的是偏重于能使访客浏览之后了解如何搭配属于自己的微景观，侧重制作微景观的乐趣。

更不是很清楚的人一个认识的平台，给想要深入的人一个如何进入微景观的奇妙世界的一个途径。

给已经钟情于微景观的人一个交流的空间。

因为针对的人群比较年轻化，大概是十几岁到三十几岁，主要侧重于女性。

网站设计比较清新，主要由浅绿和纯白搭配，风格简单清爽。

由于许多年轻人普遍不喜欢阅读大量文字缺乏耐心，所以我会搭配较多的图片，文字就尽量的精简，设计也不会太繁琐。

首先，首页为两栏式，内容有导航，Flash菜单，最新动态和友情链接。

微植物主要是介绍苔藓微景观和多肉植物。

然后下一级目录为苔藓，多肉。

分别介绍苔藓微景观，多肉植物。

微世界主要是微型室内景观和建筑物这类手工制作的成品展示，和之类的周边趣事。

下一级目录为微世界的迷你小屋，玻璃小球。

微心情主要是留言墙，网友可以在这里留下自己和微景观之间的点滴日常，或者在制作微景观时的心得，来与网友们分享。

下级目录为教程和材料包。

图赏为微景观相册。

第2章网站需求描述4

2.1网站用户概述4

2.2网站功能需求5

2.3网站性能需求5

2.4网站信息需求5

第3章网站概要设计6

3.1网站主题6

3.2网站定位6

3.3网站配色方案及风格6

3.4网站主要页面布局结构7

3.4.1首页布局结构7

3.4.2二级页面布局结构8

3.4.3其他需要说明的特殊布局结构9

3.5网站布局方式及技术10

3.6网站样式定义10

3.7网站拟采用的目录结构10

3.9网站拟完成的链接结构10

3.10特效使用10

3.11素材使用10

第4章网站详细设计11

4.1网站LOGO设计11

4.2网站页头设计11

4.3网站页脚设计12

4.4网页标题设计12

4.5按钮及图标设计13

4.6模板设计13

4.7首页设计13

4.8其它页面设计14

第5章网站测试18

第6章运行与维护19

第7章总结20

参考资料20

第1章网站概述

1.1网站名称

网站名称：

微hana

含义：

微是取自于微景观的微，表示由我们自己自主创作的微小的世界。

Hana的意思是花，一方面表示像花一般美好的事物，一方面暗指用来创造微景观的植物。

1.2开发网站的背景

当下生活越来越紧凑，多一种兴趣可以丰富生活放松一下紧绷的神经。

我所设计的这个网站介绍多肉植物，使访客浏览之后了解如何搭配属于自己的微景观，侧重制作微景观的乐趣。

更不是很清楚的人一个认识的平台，给想要深入的人一个如何进入微景观的奇妙世界的一个途径。

给已经钟情于微景观的人一个交流的空间。

1.3网站设计的原则

1.优先考虑访问者的想法和感受。

从页面的色彩和链接尽量使访问者感到满足。

舍弃不必要的内容，页面清爽简洁。

2.着手规划、确定特色、锁定目标

不管做什么事，一定要进行规划，建设网站更是如此。

规划时必须确定自己网站的性质、提供内容、目标观众，然后根据本身的软硬件条件来设置范围。

网络的特色是及时、新鲜、丰富、热闹，这是吸引大家上网的条件，如果本身条件强大，可以根据上述原则使自己网站成为一个全方位的信息提供者，如果不足，就成为单方面的提供者；此外，还可以在特殊议题或主题上加以突出，进一步锁定目标观众。

3.第一页很重要

第一页是最重要的东西，因为它是别人认识这个网站的第一印象。

第一页就有很清楚的类别选项，而且尽量符合人性化，让参观者可以很快找到需要的主题。

在设计上，最好秉持干净而清爽的原则。

第一、若无需要，尽量不要放置大型图片文件或加上不当的程序，因为它会增加下载时间，导致观赏者失去耐心；第二、画面不要设置得太过杂乱无序，因为观赏者会找不到东西。

4.栏目的归类

方法最好尽量保持一致，若要混用多种分类方法也要掌握不让使用者搞混的原则。

5.为了日后维护方便，撰写HTML时最好架构完整

6.在〈Title〉指令中加上可供搜寻的关键字串。

增加与使用者的互动。

7.避免孤页，否则不好维护。

1.4开发所涉及的技术

1.HTML

使用HTML标签语言完成基本的页面显示、实现表单的编写。

2.JavaScript

用简单的JavaScript脚本来控制“图赏（tushang.html）”页面相册的转换。

3.CSS

通过CSS来设计样式文件，来定义页面各个部分的样式。

例如颜色、边框、背景、定位等。

4.PS以及Flash的应用

用PS来设计logo，和各种图标，以及图片的处理加工。

Flash来制作相册。

1.5开发团队

材料收集整理，PS、Flash处理，网页制作：

李劲草

1.6定义

静态网页：

相对于动态网页而言，是指没有后台数据库和不可交互的网页。

静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。

HTML：

一种基于文本格式的页面描述语言，是网页通过的编辑语言。

Logo：

也称为网站标志，网站标志是一个站点的象征，也是一个站点是否正规的标志之一。

导航栏：

网页的重要组成元素，它的任务是帮助浏览者在站点内快速查找信息。

Javascript：

网页脚本语言

微景观：

是用多肉植物和蕨类植物等生长环境相近的植物，搭配各种造景小玩偶，运用美学的构图原则组合种植在一起的新型桌面盆栽。

第2章网站需求描述

2.1网站用户概述

用户数量预计1000人左右。

用户群体为年轻人，主要为女性，大概在十几岁到三十几岁左右。

教育良好，喜爱园艺和手工制作。

大部分为学生党和主妇党故时间还算比较闲散，上网时间比较随意，具体的时间不稳定，多为晚上，上午访问量比较少。

对本网站的需求大多为教程的浏览和留言版块的交流。

2.2网站功能需求

首先是首页，有最新动态和友情链接。

二级页面为微植物、微世界、微心情、图赏然后下一级目录为苔藓，多肉。

微植物分别介绍苔藓微景观，多肉植物。

微世界主要是微型室内景观和建筑物这类手工制作的成品展示，和之类的周边趣事。

下一级目录为微世界的迷你小屋，玻璃小球。

微心情主要是留言墙，网友可以在这里留下自己和微景观之间的点滴日常，或者在制作微景观时的心得，来与网友们分享。

下级目录为教程和材料包。

图赏为微景观相册。

其中首页访问肯定最为频繁，其实微心情和教程页面也会比较受欢迎。

因为微心情有留言版块可以供网友进行交流，而教程比较具有实用性。

2.3网站性能需求

浏览器需要安装aboveFlashplayer。

2.4网站信息需求

本网站所发布的信息基本都是微景观的教程和简介。

获取方式是通过网络XX得到，参考的XX百科和贴吧精品贴的详细介绍。

信息分为微景观的简介，教程，留言的心得交流。

第3章网站概要设计

3.1网站主题

微景观的介绍。

其中包括多肉植物，苔藓植物，diy小屋以及各种创意微景观。

3.2网站定位

普及型网站。

本网站是对大众提供微景观的介绍普及和创作想法的交流。

以介绍并推广微景观为目的。

3.3网站配色方案及风格

网站风格：

小清新风。

简洁大方。

主要配色有灰色（#DCDDDB），白色，清新绿（#96F932）。

所有页面的导航条，logo，边框等都为嫩绿色（#96F932），搭配底部浅灰色阴影（#DCDDDB）。

所有文本链接均为连接前深灰色（#424242），链接后嫩绿色（#96F932）。

所有为改动颜色的文本均为灰色（#666），改动后文本的颜色下面会详细说明。

导航条文本为白色。

鼠标为经过前为绿（#96F932）底白字，经过时为白底绿字。

首页最新动态栏和友情链接中，div标题的颜色为深灰（（#424242）。

“微心情”页面，文本的颜色为墨绿（#366），表格边框颜色为湖蓝（#99CCCC）。

3.4网站主要页面布局结构

3.4.1首页布局结构

（900*1024）

3.4.2二级页面布局结构

3.4.3其他需要说明的特殊布局结构

xinqing.html：

tushang.html：

3.5网站布局方式及技术

Div的嵌套，制作一个box来形成网页的框架。

3.6网站样式定义

CSS外部样式文件以及内联样式、内嵌的样式单来定义页面中的元素样式。

3.7网站拟采用的目录结构

Hana网站根目录

CSS存放外置css文件

Flash存放Flash小动画

html存放html文件

images存放图片文件

background存放背景图片

content存放与网页内容相关的图片

sight存放图标文件

linkpage存放通过图像或者文本超链接的文件

JS存放外置JS文件

text存放文本文件

3.9网站拟完成的链接结构

主页一级链接二级链接

微植物zhiwu.html

——苔藓植物taixuan.html

——多肉植物duorou.html

微世界shijie.html

——迷你小屋xiaowu.html

——玻璃小球xiaoqiu.html

微心情xinqing.html

——教程jiaocheng.html

——材料包cailiaobao.html

图赏tushang.html

3.10特效使用

阴影。

各版块的多采用浅灰色的阴影效果。

3.11素材使用

图片：

一般都是网上下载后用PS处理，然后用作网站的背景或者图标。

还有些需要用PS自主制作。

一般JPG用作背景图，GIF用作插图，GNP用作图标如logo这样的。

图片不要太繁琐浮夸，尽量简洁大方，符合网站色调风格的小清新。

文本：

素材为网上收集的，主要是微景观一系列的介绍，以及教程。

Flash：

用Flash制作，用于首页导航相册。

可链接部分页面。

第4章网站详细设计

4.1网站LOGO设计

logo为网站名微hana的文字变形。

“微”字体为华文琥珀，hana为自己添加的数码字体。

颜色为嫩绿（#96F932）。

绿色是生命之色，一方面代表微景观创作所用的植物，另一方面代表微景观欣欣向荣的前景。

由于网站的风格为清新简洁，故logo设计得也简单大方。

4.2网站页头设计

页头主要内容有网站的logo，多肉植物的背景图，和导航条。

主色调为网站主题设嫩绿（#96F932）搭配白色。

阴影为浅灰。

导航条一级栏目为“首页”“微植物”“微世界”“微心情”“图赏”。

字体为华文琥珀。

分别对应网站内容的五大板块。

导航条整体靠右，左边里box左边框有7px的距离。

4.3网站页脚设计

页脚背景为网站主题三色之一的浅灰色（#DCDDDB），字体深灰居中。

4.4网页标题设计

“最新动态”为首页栏目标题。

一共有“最新动态”“友情链接”两类。

为深灰色、加粗。

位置是靠各种div的左侧。

“多肉植物”为个二级网页的标题，为网站主色调之一的嫩绿色，大小为字号24。

4.5按钮及图标设计

“涂鸦王国”为首页友情链接的按钮，用PS制作，底色为嫩绿，白字。

字体为彩云，边缘有白框。

“苔藓微景观”也是用Ps制作，湖蓝底草绿色字，字体为自定义的“我是

小叶子”。

4.6模板设计

无模板。

4.7首页设计

首页为两栏式，主要分为三大板块——页头，main，页脚。

页头为logo和导航条。

main的内容介绍和各种链接，方便访客快速进入相应浏览的页面。

Flash导航相册占据上部，左下为最新动态右下为友情链接。

页脚为制作者的简介和欢迎词。

4.8其它页面设计

1.zhiwu.html

微植物页面为构成微景观的多肉植物的图形介绍。

图片有PS处理，添加了白边。

每张图陪了彩云字体的文字，来显示它们对应的名称。

背景为浅灰，背景字体为“我是小叶子”。

2.shijie.html

微世界页面背景为白色，main部分分为上下两块，上部为粉红小屋下部为阳光小屋。

每一块均为标题+图片组的结构。

由水平线隔开。

3.xinqing.html

微心情页面，main部分分为上下两大板块，上部为留言展示墙，下部为留言文本输入栏。

均为表单内插入表格、文本域、菜单等制作。

文本颜色为墨绿，边框颜色为湖蓝。

4.

tushang.html

相册页面main部分为黑色背景。

相册垂直居中，在相册的垂直居中出有透明度为百分之五十的白色跳转按钮，按钮为正三角形。

第5章网站测试

网站完成后查看Flash和图片，留言墙是否能正常显示。

可用Dreamweaver的浏览器兼容检测测试网站。

最初测试时网站的导航条不能正常显示，原因是我第一次插入没有用，然后第二次插入后为将之前的代码删除干净，导致代码中多了一个，

varMenuBar1=newSpry.Widget.MenuBar（"MenuBar1",{imgDown:

"SpryAssets/SpryMenuBarDownHover.gif",imgRight:

"SpryAssets/SpryMenuBarRightHover.gif"}）;

而我用的是menubar2。

删除后导航显示正常。

其他图片，动图，文本，图赏相册均能正常显示，不过首页的Flash导航相册需要安装AdobeFlashPlayer。

由于这次是静态网站，故留言墙版块还有待开发。

留言展示墙和文本输入框均能正常显示，但不能真正的进行交互。

第6章运行与维护

发布和推广的话最初会定在同学之间，然后大概会去网上，如XX贴吧，新浪微博，豆瓣等地方开贴召集一些热爱微景观的同好。

维护会自己定期查看网站是否能正常打开，并进行调试。

第7章总结

这次课程设计可以说一个归纳总结的效果，把之前学的网页知识都整合了一下。

一开始我是打算用table来设计框架的，后来觉得存在太多局限不方便就改成了div。

用多个嵌套的div来制作框架。

要一开始就确定好框架的长、宽、定位，然后再进行详细的设计，这样才能使改动降到最小。

同样一开始也要确立好网站的主色调，这样才好选择对应的图片链接文字的颜色，不用在纠结这上面花费过多的时间。

由于兼容性的问题，最初我的相册，Flash导航等在有些浏览器无法正常显示，然后做了相应的简化调整，图赏页面的相册运用了设计的css样式表，和简单的JavaScript脚本来实现图片的切换。

JavaScript脚本参照重庆交通大学网站首页相册所使用的脚本。

从中也了解了如何查看网页源代码和通过地址下载需要的文件。

总的来说过程虽然挺辛苦的，完成之后还是挺有成就感。

毕竟是自己独立开发的第一个网站。

各种图片的制作还顺便复习了下PS。

Flash相册导航链接跳转的问题感谢老师的讲解。

制作期间与同学的交流也给了我不少启发，也学会了如何运用XX来查找所遇到的问题的解决方案。

比如说首页Flash导航相册最初会遮住导航条的二级栏目下拉菜单。

然后通过网上的查找后，将Flash背景设置透明就可以显示导航条的下拉菜单了。

参考资料

《网页设计与制作案例教程》房爱莲北京大学出版社2009.8

多肉植物XX百科

苔藓微景观XX百科

苔藓微景观豆瓣讨论版块

Diy小屋XX百科

微型世界XX贴吧