网页和网站设计报告.docx

网页和网站设计报告.docx

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

网页和网站设计报告

课程设计大作业

——诗韵网站设计报告

*******大学经济管理学院*******专业****班

姓名：

****

学号：

******

目录

前言4

一、作业背景4

二、选题说明5

三、小组任务分工6

第一章前期准备6

第一节素材搜集6

一、网上搜集6

二、制作6

第二节其他准备7

一、免费空间申请7

二、8uftp使用7

第二章网页制作7

第一节设计方案7

第二节网站主页8

一、排版8

二、内容9

第三节内容制作9

一、《我的主页》制作9

二、《About》制作13

三、《图片》制作14

四、《Blog》制作15

五、《信息》制作16

一、《诗词释义》制作18

二、《精美视频》制作18

第三章设计小结19

制作过程中的问题及小结19

结束语20

心得体会20

主要参考文献20

前言

一、作业背景

本文根据《网页和网站设计》课程要求而做。

课程设计大作业要求如下：

1.完成静态网站开发报告，包括以下内容：

1）网站名称

2）网站规划与设计

网站类型与服务领域；

网站服务对象；

网站处理流程；

网站所需页面；

开发平台与工具等

3）网站开发

网页内容编排

网页美工设计等

2.完成网站相关页面与内容的开发，要求：

网站至少由两级页面构成，网站内容充实，页面布局合理，内容编排符合网站主题；

使用Dreamweaver完成网站的页面布局；

尝试使用Dreamweaver中的网页框架和或div布局；

每个页面中至少要有一个使用Flash制作的动画（需要包括学过的flash内容）；

设计每个页面中的按钮和导航条。

网站功能必须包括个人简介模块，其他模块可以自由扩充。

可以包括家乡介绍、个人趣事、感悟、相册、经历、所取得的成绩、爱好、以及个人理想等。

能方便的从每个页面返回到首页。

3.人员分配

本次网站设计要求最多2个同学为一组，完成网站的设计、开发以及文档书写。

4.最终成果

（1）设计报告（电子文档和打印的报告），格式要求见附件

（2）程序源代码

二、选题说明

诗词，是指以古体诗、近体诗和格律词为代表的中国汉族传统诗歌。

亦是汉字文化圈的特色之一。

通常认为，诗更适合“言志”，词更适合“抒情”。

诗词是阐述心灵的文学艺术，而诗人、词人则需要掌握成熟的艺术技巧，并按照严格韵律要求，用凝练的语言、绵密的章法、充沛的情感以及丰富的意象来高度集中地表现社会生活和人类精神世界。

中国诗起源于先秦，鼎盛于唐代。

中国词起源于隋唐，流行于宋代。

　　诗歌起源于上古的社会生活，因劳动生产、两性相恋、原始宗教等而产生的一种有韵律、富有感情色彩的语言形式。

《尚书.虞书》：

“诗言志，歌咏言，声依咏，律和声。

”《礼记.乐记》：

“诗，言其志也；歌，咏其声也；舞，动其容也；三者本于心，然后乐器从之。

”早期，诗、歌与乐是合为一体的。

诗即歌词，在实际表演中总是配合音乐、舞蹈而歌唱，后来诗、歌、乐、舞各自发展，独立成体，诗与歌统称诗歌。

如今诗歌按照不同的表现形式分为白话诗和旧体诗词，白话诗更多称为新诗或自由诗，但“诗词”连称时一般指旧体格律诗、词。

　　在当今社会生活中继承和发展它传统形式中情味意味韵味更能使人接受，它是汉语特有魅力和功能，这是其它任何语言所没有和不能的，也是任何语言翻译不了的。

因此传统诗词文化是世界文学史上最独特表现形式和文学遗产。

　　今本站搜集一些古诗词与一些对诗词有共同爱好的朋友共同分享，希望将我们的传统古诗词发扬光大。

1、基本思路

本网站主要是实现一个个人爱好的网页。

相信每个人都希望在网上有一片分享自己爱好的空间，不管是QQ空间，还是51空间等等，很多人都想把自己的空间弄得绚丽多彩，漂漂亮亮的，希望在众多的空间中脱颖而出，得到更多人的关注，因此此网站将告诉同学们我们自己去构建完全属于自己的一个网站，而且通过此网站可以使同学们更加的了解个人网站的组成。

2、作业目标

本网站共分有5个板块，分为我的主页、About、图片、Blog、信息，目前分别对其进行介绍。

整个网站采用灰色为主色调，灰色给人以古典、优雅的感觉，所以更能给人以视觉的冲击。

网页主要有三部分组成，头部分别为头部链接和相关的图片或Flash来体现主题。

主题主要分为三个模块，分别为古风图片，诗词内容和诗词链接组成。

底部用来添加主页地址连接以及联系方式，整个网站的设计条理清晰，层次分明。

布局方面，本网页主要采用表格布局页面，因为表格布局能有效的将各个模块分开来使其不会互相干扰，而且易于排版，这样每个部分就好像一个独立的，你要修改哪个地方直接修改与它相关的而不会影响其他的部分。

三、小组任务分工

1、组员（姓名：

郭璞）

（1）个人主要工作

素材搜集，网页排版，Flash制作，网页制作

（2）主要收获

学会了如何制作简单的Flash动画，如何运用Dreamwaver工具制作基本网页

（3）自我评定□优□良□中□及格□不及格

第一章前期准备

第一节素材搜集

一、网上搜集

　　在正式制作我们的网页之前，在确定了主题后首先我在网上寻找了一些手绘的古风图，再将这些图片中找到适合我们主题的进行分类。

又通过XX等工具寻找了一些古诗词网站和古诗词的书籍将其收集起来并保存。

以及一些需要的网页链接，充实网站内容使网站内容更加丰满。

还找了一些关于古诗词的swf格式的MV进行下载。

二、制作

由于网页制作需要有一部分的小图标以及网页头部的Flash无法在网上找到。

所以通过Firework工具的绘画功能制作了一些网页小图标。

又用MacromediaFlash工具制作了一些动作图片和小视频来美化网页布局，使网页看起来更加美观大方。

第2节其他准备

1、免费空间申请

免费空间的申请在网站制作过程中是很重要的，原本申请了老师建议的一个网站，但是由于申请人数太多了导致该网站冻结了域名。

后又看了许多国内的网站，却由于收费或是试用网站无法在公共网络上使用等等原因无法作为个人网站使用，后来在同学的帮助下才申请到了一个国外的免费空间才成功。

二、8uftp使用

网页制作完成最总要的是上传网页，这样才能完成一个网站的制作。

所以，我在网上下载了8uftp软件，用来上传网页完成网站的最后制作。

第2章网页制作

第一节设计方案

主架构设计，结构图如图1所示：

图1

网站主页的设计，结构图如图2所示：

图2

第二节网站主页

一、排版

在正式制作网页前，我首先进行了网页排版。

网页整体颜色为灰色，网站的头部是由一段“欢迎”的flash影片和到达各个板块的链接组成。

内容部分是个人简介和网站简介组成。

底部为网站版权所有，介绍了我的个人信息和版权信息。

二、内容

个人简介介绍了我的主要信息，网站简介则是介绍了网站的选题原因和它的主要功能以及内容简介。

在这张网页上我插入了一个弹出窗口，用来插入欢迎信息。

制作网页使用的代码

--

functionMM_openBrWindow（theURL,winName,features）{//v2.0

window.open（theURL,winName,features）;

}

//-->

（'ad.html','gg','scrollbars=yes,width=300,height=200'）">

第三节内容制作

一、《我的主页》制作

我的主页头部主要是由主页题目和一则古风Flash动画组成。

内容主要为五个模块，首先是站长提醒部分，主要功能为介绍本站作用和功能。

其次是最近更新模块，这部分主要功能是介绍网站最新上传和更新的诗词。

在这里，我是用了脚本代码做了一个简单的图片特效。

再次是唐诗三百首和宋词精选两个链接模块，用来链接一些推荐诗词的释义网页。

最后是友情链接模块，这里的链接都是站外链接，用来链接一些其它网站的优秀作品供大家欣赏。

底部为网站版权所有，介绍了我的个人信息和版权信息。

本页主要使用来介绍本站基本功能和作用，并让来访者对本站有基本的了解。

制作网页使用的代码

#FocusImg_JS{

BORDER-RIGHT:

#908B821pxsolid;BORDER-TOP:

#908B821px

solid;FONT-SIZE:

12px;MARGIN:

0pxauto;BORDER-LEFT:

#908B821px

solid;WIDTH:

390px;BORDER-BOTTOM:

#908B821pxsolid;HEIGHT:

312px;

}

#FocusImg_JSIMG{

}

#FIJ_L{

OVERFLOW:

hidden;WIDTH:

390px;HEIGHT:

274px

}

#FIJ_LSPAN{

DISPLAY:

block;OVERFLOW:

hidden;WIDTH:

394px;HEIGHT:

249px;TEXT-ALIGN:

left

}

#FIJ_LIMG{

WIDTH:

390px;HEIGHT:

249px

}

#FIJ_LP{

FONT-WEIGHT:

bold;BACKGROUND:

#fdedc7;MARGIN:

0px;

OVERFLOW:

hidden;LINE-HEIGHT:

25px;BORDER-BOTTOM:

#f4c7791px

solid;HEIGHT:

22px;TEXT-ALIGN:

center

}

#FIJ_LPA{

COLOR:

#000;TEXT-DECORATION:

none

}

#FIJ_LPA:

visited{

COLOR:

#000;TEXT-DECORATION:

none

}

#FIJ_LPA:

hover{

COLOR:

#c00;TEXT-DECORATION:

underline

}

#FIJ_LPA:

active{

COLOR:

#c00;TEXT-DECORATION:

underline

}

#FIJ_R{

DISPLAY:

inline-block;MARGIN:

0pxauto;OVERFLOW:

hidden;

WIDTH:

390px

}

.id_FIJ_R_ImgBlkIMG{

BORDER-RIGHT:

#b27c7c1pxsolid;BORDER-TOP:

#b27c7c1px

solid;BORDER-LEFT:

#b27c7c1pxsolid;WIDTH:

91px;BORDER-BOTTOM:

#b27c7c1pxsolid;HEIGHT:

58px

}

.id_FIJ_R_ImgBlk_OnIMG{

BORDER-RIGHT:

#b27c7c1pxsolid;BORDER-TOP:

#b27c7c1px

solid;BORDER-LEFT:

#b27c7c1pxsolid;WIDTH:

91px;BORDER-BOTTOM:

#b27c7c1pxsolid;HEIGHT:

58px

}

.id_FIJ_R_ImgBlk{

PADDING-RIGHT:

3px;PADDING-LEFT:

3px;FLOAT:

left;PADDING-

BOTTOM:

0px;OVERFLOW:

hidden;WIDTH:

91px;CURSOR:

pointer;

PADDING-TOP:

0px;HEIGHT:

64px

}

.id_FIJ_R_ImgBlk_On{

PADDING-RIGHT:

3px;PADDING-LEFT:

3px;FLOAT:

left;PADDING-

BOTTOM:

0px;OVERFLOW:

hidden;WIDTH:

91px;CURSOR:

pointer;

PADDING-TOP:

0px;HEIGHT:

64px

}

.id_FIJ_R_ImgBlk_OnIMG{

FILTER:

progid:

DXImageTransform.Microsoft.Alpha（startX=0,

startY=0,finishX=100,

finishY=100,style=1,opacity=50,finishOpacity=50）;moz-opacity:

.5;

opacity:

0.5

}

--START:

焦点图-->

--焦点图尺寸:

WIDTH:

390px;HEIGHT:

249px-->

varTimeOut=3000;//切换时间（单位毫秒）;

varStartType="onmouseover";//缩略图触发动作

varimgUrl=newArray（）;

varimgSUrl=newArray（）;

varimgLink=newArray（）;

varimgtext=newArray（）;

varimgAlt=newArray（）;

varadNum=0;

imgUrl[（3+1）]='images1/23052PS026.jpg';

imgSUrl[（3+1）]='images1/23052PS026.jpg';

imgtext[（3+1）]='不似接舆人不知，扭转乾坤

太疯？

';

imgLink[（3+1）]='#';

imgAlt[（3+1）]='不似接舆人不知，扭转乾坤太疯？

';

imgUrl[（0+1）]='images1/1732091_103337026_2.jpg';

imgSUrl[（0+1）]='images1/1732091_103337026_2.jpg';

imgtext[（0+1）]='可怜东风不惜花，可叹风姨

不作嫁';

imgLink[（0+1）]='#';

imgAlt[（0+1）]='可怜东风不惜花，可叹风姨不作嫁';

imgUrl[（2+1）]='images1/7033516_154207986000_2.jpg';

imgSUrl[（2+1）]='images1/7033516_154207986000_2.jpg';

imgtext[（2+1）]='君来不同，君去不同！

';

imgLink[（2+1）]='#';

imgAlt[（2+1）]='君来不同，君去不同！

';

imgUrl[（1+1）]='images1/20081110215517262_2.jpg';

imgSUrl[（1+1）]='images1/20081110215517262_2.jpg';

imgtext[（1+1）]='才子如此闲悠，瘗无数天才

竞自由';

imgLink[（1+1）]='#';

imgAlt[（1+1）]='才子如此闲悠，瘗无数天才竞自由';

--END:

焦点图-->

functionchangeimg（n）{adNum=n;window.clearInterval

（theTimer）;adNum=adNum-1;nextAd（）;}

functiongoUrl（）{window.open（imgLink[adNum],'_blank'）;}

varcount=0;for（i=1;i

=""）&&

（imgLink[i]!

=""）&&（imgtext[i]!

=""）&&（imgAlt[i]!

=""））{count++;}else

{break;}}

functionplayTran（）{if（document.all）

{imgInit.filters.revealTrans.play（）;}}

varkey=0;functionnextAd（）{if（adNum<（imgUrl.length-1））{adNum++;}

else{adNum=1;}

if（key==0）{key=1;}elseif（document.all）

{imgInit.filters.revealTrans.Transition=23;imgInit.filters.revealTran

s.apply（）;playTran（）;}

document.images.imgInit.src=imgUrl

[adNum];document.images.imgInit.alt=imgAlt

[adNum];document.getElementById

（'FIJ_R_IB_'+adNum）.className='id_FIJ_R_ImgBlk_On';for（var

i=1;i<=count;i++）{if（i!

=adNum）{document.getElementById

（'FIJ_R_IB_'+i）.className='id_FIJ_R_ImgBlk';}}

document.getElementById（'focustext'）.innerHTML=imgtext

[adNum];document.getElementById（'imgLink'）.href=imgLink

[adNum];theTimer=setTimeout（"nextAd（）",TimeOut）;}

document.write（''）;document.write（'

id="FIJ_L">'）;document.write（'

href="'+imgLink[1]+'"target="_blank">

revealTrans（duration=1,transition=5）;"src="javascript:

nextAd（）"

name="imgInit"alt=""title="'+imgAlt

[1]+'"/>'）;document.write（''+imgtext

[1]+'