网站规划与设计作业

网站规划与设计

题目《幸福三部曲》网站的设计与实现

姓名____________________

学号______________

指导教师____________________

二O一一年十一月六日

目录

第一章设计思想...........................................1

第二章功能概述...........................................2

第三章详细设计...........................................3

第一章设计思想

我的网站主要是以“幸福”为主题的，我认为：幸福二亲情+友情+爱情。

现在大家的生活节奏加快，很少安下心来享受那平淡的幸福，幸福其实很简单,

匕方每天早上醒来都能看到太阳，那也是一种幸福。大家一直在寻找幸福，殊

不知，幸福就是有家人关心的温暖，幸福就是朋友间彼此的调侃和祝福，幸福

就是柴米油盐里飘溢出如岁月般绵长的醇香，幸福就是……

我选做此网站，就是想让大家知道：其实幸福离你很近，它也很简单，只

要你静下心来，就会发现，一个微笑，一个拥抱，一个祝福……那都是幸福。

首页的名字为“定义幸福方程式”，启发大家对幸福的进一步定义与理解；然

后，根据幸福由亲情、友情和爱情构成，展开三个子页面，分别是亲情港湾、

友情链接、爱情站点。亲情港湾主要介绍的是父爱、母爱、姐弟情和合家欢乐。

无论何时，家都是永远的港湾，在我们失意的时候，给予我们抚慰和支持；在

我们遇到快乐的事的时候，给予我们衷心的祝福，尤其是在我们遇到困难时，

家是我们第一个想到的避难所与调整心态的地方。友情链接主要介绍的是小

学、初中、高中和大学的朋友们，在不同的时期，我们的友谊的成长与开展，

再一次享受与朋友在一起的快乐。爱情站点包括相识阶段、相知阶段，相恋阶

段，介绍了每一对恋人所要经历的阶段，在其中，我们经历过甜蜜，浪漫，但

也遇到不愉快的事，不过其中的幸福总是令人回味的。

幸福掌握在自己手中，而不是在别人眼中，幸福是一种感觉，这种感觉应

该是愉快的，使人心情舒畅，甜蜜快乐的。真正的幸福是不能描写的，它只能

体会，体会越深就越难以描写，因为真正的幸福不是一些事实的聚集，而是一

种状态的持续。希望大家看了我的网页后，会领悟到幸福不需要轰轰烈烈，他

就在我们身边，每时每刻都在。

第二章功能概述

我的网站包括以下儿个模块：

1.定义幸福方程式：主要介绍幸福由什么构成，以及幸福的定义，幸福宣言，

如何让自己享受幸福，幸福咨询等。它主要就是想让大家从今天起，做个幸福

的人，不管怎样，都要善于微笑，善于发现美好的事，善于发现生活中，点滴

的幸福。

2.亲情港湾：亲情是情感路上的避风港湾，亲情是人生旅途上的启明星，亲情

是成长的甘露。我的网页，主要以我的家庭展开，介绍的是父爱，母爱，姐弟

情。这个网页就是，想让大家更爱自己的家。因为，家，是心灵之窗；家，是

美味鸡汤，家，是快乐之岛；家，更是亲情之港！一个家，看是简简单单，但

蕴在其中的亲情，却永远令人捉摸不透。

3.友情链接：是朋友，星移斗转情不改；是知音，天涯海角记心怀。可能现在,

随着年龄的增长，我们大家都开始忙自己的事了，朋友之间很长时间没联系了，

但无论怎样，我们一起成长过，一起欢笑过，此网页主要让我们意识到，真正

的朋友之情不会因为时间、距离而变淡，朋友是我们人生路上，不可缺少的一

笔财富。

4.爱情站点：相识是缘，相知是幸，人的一生总会遇到那么一个人，会包容你

的一切，会无厘头的对你好，会陪你走到老。他不需要红红轰轰烈烈，它是柴

米油盐酱醋，是生活琐事。看到这个网页，你会明白：真爱是一种从内心发出

的关心和照顾，没有华美的语言，没有哗众取宠的行动，只有在点点滴滴一言

一行中，你能感受得到。

系统结构图

第三章详细设计

一,首页：定义幸福方程式

1.主要功能：主要介绍亘福由什么构成，以及幸福的定义，幸福宣言，如何让

自己享受幸福，幸福咨询等。它主要就是想让大家从今天起，做个幸福的人，

不管怎样，都要善于微笑，善于发现美好的事，善于发现生活中，点滴的幸福。

2.主要技术

(1〕.在布局模式下，对页面进行构架设计.

(2).导航的制作，先插入背景图片，“定义幸福方程式”这个大标题，是运

用层重叠属性制作的阴影文字。

(3).对菜单中的文字，进行超链接，分别连接到各个子网页

(4).在各个栏目里的制作，用到了滚动文字；Spry折叠式构件的制作；表

格编辑的制作；图片文字对齐，；CSS样式等。在版权区，插入了图片。

(5).插入了背景音乐

3.页面设计

:OO*9SI❷4，★73001如乃T<n*MQB./

停止W迎»M钦・立

Q<m•丹苍*OI«<XM>・圄布忘M.3<W»5L.2BmMSIM・&MM・»EM・

03mM食0x匚:___________________________________________________________________________________________________________________________________________________________

①千日JttCT-

MU)»0M(Y)eW2)ZAO)■❸M

C、

,幸福心少,来自章猛购KT网的

多少M明期，⑨个幸福的人

，卓耀的大小，辐拿猫影”的大M味困关5*胸?

小

像"H情人终!《网

兄忏有第人在王世轶内卒・

SWT4.画♦在声

,拿椁的网，相堂情题”・用

M同侑长桓

►*福配?法,朱自虑事会玄心中的工

W%、飞、-ej。©wo%

750

二.亲情港湾

1.主要功能：亲情是情感路上的避风港湾，亲情是人生旅途上的启明星，亲情

是成长的甘露。我的网页，主要以我的家庭展开，介绍的是父爱，母爱，姐弟

情。这个网页就是，想让大家更爱自己的家。因为，家，是心灵之窗；家，是

美味鸡汤，家，是快乐之岛；家，更是亲情之港！一个家，看是简简单单，但

蕴在其中的亲情，却永远令人捉摸不透。

2.主要技术

(1).在导航，插入背景图片，并输上文字“返回首页”，进行超链接，这样就

万便返回首页。

(2).在Spry选项卡面板中，输入整个网页的内容，并插入图片和文字。

(3).对Spry选项卡面板两边的图片，进行鼠标经过图片处理。

(4).还用了图片滚动效果；在版权区插入图片。

(5).在页面属性里，设置背景图片。

6｛丽文旧-axu^aii—LMW

MU)M(Y)EQ)UKD•❸M♦

。。.W,冷・

停止岬珏住宜<1?7«Ag)GM001CW91VWWM.HrW

°Q»・・圄解3«W«5L.IHMMIM•.0«网•■HIM•

«XMMUxI_____________

9以ME.・度也131，F

MWJtrt®M(Y)e*Q>ZAO)・61)?

・

0O停”:止⑤阱主R■M9宜<Y?«?ADGM001CSA29fVWWM.HrW

4(z»・丹力已I«PO•圄艇0，@«W«5L.»cHMMIM•《•»HKM•

.e.XMM*|____

三.友情链接

L主要功能：是朋友，星移斗转情不改；是知音，天涯海角记心怀。可能现在,

随着年龄的增长，我们大家都开始忙自己的事了，朋友之间很长时间没联系了，

但无论怎样，我们一起成长过，一起欢笑过，比网页主要让我们意识到，真正

的朋友之情不会因为时间、距离而变淡，朋友是我们人生路上，不可缺少的一

笔财富。

2.主要技术

(1).在导航，插入背景图片，并输上文字“返回首页”，进行超链接，这样就

万便返回首页。

(2).在菜单栏设计了显示-隐藏层行为。

(3).在页面属性中，插入背景图片

(4).用了Spry选项卡面板介绍总体的内容；

(5).在“用户注册”栏，制作了验证表单，使用Dreamweaver行为验证，添加

“检查表单''行为

(6).用了滚动图片的效果；

(7).使用“行为”面板添加音乐；

(8).对网页最下面的图片进行“鼠标经过图像处理”；

(9).用时间轴制作了浮动广告。

3.页面设计

M<DTAO>

。。•W1•冷・OGA10010e<29£VKftWM.HrW*«SQB./

停止2切9M钦・具

Q0SR•”苍・£3L«E>・圄帛忘M.⑥<W»5L・2MM.HMMSIM•&EM•-EM・

0XI

9WfiCTaKw^jaii

M>&)Rrt©M(Y)6Q>ZAO)・❸R

一二2OGM001C6429+

“aat4•，•答*L«OM・.fijithRB*.®《as>.B<HIS«.IM・§■—・『gcx・

.cxMtm

aiiuMtf界亶「白

。正见明灰，无论在杆方.在何地,都为仔辛推■,当你遇史瓜尊和出叫垢他不求目

当某天早Ml来时.他乩；孕片方.立划总分法去看看也千里迪过只为其也-di-

第线常见面.更不需要纭常聚在一配电屯S”.朋友就是要你不断的发哂）化点A*

粒是相互之间的信任I朋•友祓是在修景，费他的时侯出桌的R个！期史就是1・・・J

—40一<J念j°GM

四.爱情站点

1.主要功能：相识是缘，相知是幸，人的一生总会遇到那么一个人，会包容你

的一切，会无厘头的对你好，会陪你走到老。他不需要红红轰轰烈烈，它是柴

米油盐酱醋，是生活琐事。看到这个网页，你会明白：真爱是一种从内心发出

的关心和照顾，没有华美的语言，没有哗众取宠的行动，只有在点点滴滴一言

一行中，你能感受得到。

2.主要技术

(1).锚点连接的设置

(2).对整体内容的设计，用了图文混排

(3).弹出信息窗的设计

(4).插入了背景音乐

(5).在页面属性中，插入了背景图像。

3.页面设计

,9加E.宣.3期=9］。I

W0)Jtrt®MOOEfi)ZA(D

G。M'*11•*9'Y?OGM001CSA29£

停止阱主RM宜<?«A

40K•圄解"o«w•五.：—》(BMMIM•.0«网•■HIM•

0odn

gwJtrt®M(Y)«WQ)ZA(D・61)

QO公留•冷・、；OGM001CW9£*Q0.✓

停止阱主页住宜

•圄⑷(日比.

g*枳■文懵

♦相知阶段

•tttt.联把■女的。写在心上，

尺，天香，TCQ，麴即JW超了多少81

tt.WTfl.PtE*万年，RM

ft.一次次他7到n,一次次涔上了“航

看看天的罗……用你，M好！』d\0

«W«t!你是出色

的士恒I不值口・型，，］

胡用I，。“，K4V1S

。・飞扬…率HRM-WJ

♦