网页和网站设计报告.docx

1、网页和网站设计报告课程设计大作业诗韵网站设计报告*大学经济管理学院 *专业 *班 姓名：*学号：*目录前言 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结束语

2、 20心得体会 20主要参考文献 20前言一、作业背景本文根据网页和网站设计课程要求而做。课程设计大作业要求如下：1. 完成静态网站开发报告，包括以下内容：1) 网站名称2) 网站规划与设计 网站类型与服务领域； 网站服务对象； 网站处理流程； 网站所需页面； 开发平台与工具等3) 网站开发 网页内容编排 网页美工设计等2. 完成网站相关页面与内容的开发，要求： 网站至少由两级页面构成，网站内容充实，页面布局合理，内容编排符合网站主题； 使用Dreamweaver完成网站的页面布局； 尝试使用Dreamweaver中的网页框架和或div布局； 每个页面中至少要有一个使用Flash制作的动画（需

3、要包括学过的flash内容）； 设计每个页面中的按钮和导航条。 网站功能必须包括个人简介模块，其他模块可以自由扩充。可以包括家乡介绍、个人趣事、感悟、相册、经历、所取得的成绩、爱好、以及个人理想等。 能方便的从每个页面返回到首页。3. 人员分配 本次网站设计要求最多2个同学为一组，完成网站的设计、开发以及文档书写。 4. 最终成果（1）设计报告（电子文档和打印的报告），格式要求见附件（2）程序源代码二、选题说明 诗词，是指以古体诗、近体诗和格律词为代表的中国汉族传统诗歌。亦是汉字文化圈的特色之一。通常认为，诗更适合“言志”，词更适合“抒情”。 诗词是阐述心灵的文学艺术，而诗人、词人则需要掌握成

4、熟的艺术技巧，并按照严格韵律要求，用凝练的语言、绵密的章法、充沛的情感以及丰富的意象来高度集中地表现社会生活和人类精神世界。中国诗起源于先秦，鼎盛于唐代。中国词起源于隋唐，流行于宋代。 诗歌起源于上古的社会生活，因劳动生产、两性相恋、原始宗教等而产生的一种有韵律、富有感情色彩的语言形式。尚书.虞书：“诗言志，歌咏言，声依咏，律和声。”礼记.乐记：“诗，言其志也；歌，咏其声也；舞，动其容也；三者本于心，然后乐器从之。”早期，诗、歌与乐是合为一体的。诗即歌词，在实际表演中总是配合音乐、舞蹈而歌唱，后来诗、歌、乐、舞各自发展，独立成体，诗与歌统称诗歌。如今诗歌按照不同的表现形式分为白话诗和旧体诗词，

5、白话诗更多称为新诗或自由诗，但“诗词”连称时一般指旧体格律诗、词。在当今社会生活中继承和发展它传统形式中情味意味韵味更能使人接受，它是汉语特有魅力和功能，这是其它任何语言所没有和不能的，也是任何语言翻译不了的。因此传统诗词文化是世界文学史上最独特表现形式和文学遗产。今本站搜集一些古诗词与一些对诗词有共同爱好的朋友共同分享，希望将我们的传统古诗词发扬光大。1、 基本思路 本网站主要是实现一个个人爱好的网页。相信每个人都希望在网上有一片分享自己爱好的空间，不管是QQ空间，还是51空间等等，很多人都想把自己的空间弄得绚丽多彩，漂漂亮亮的，希望在众多的空间中脱颖而出，得到更多人的关注，因此此网站将告诉

6、同学们我们自己去构建完全属于自己的一个网站，而且通过此网站可以使同学们更加的了解个人网站的组成。2、 作业目标 本网站共分有5个板块，分为我的主页、About、图片、Blog、信息，目前分别对其进行介绍。 整个网站采用灰色为主色调，灰色给人以古典、优雅的感觉，所以更能给人以视觉的冲击。网页主要有三部分组成，头部分别为头部链接和相关的图片或Flash来体现主题。主题主要分为三个模块，分别为古风图片，诗词内容和诗词链接组成。底部用来添加主页地址连接以及联系方式，整个网站的设计条理清晰，层次分明。 布局方面，本网页主要采用表格布局页面，因为表格布局能有效的将各个模块分开来使其不会互相干扰，而且易于排

7、版，这样每个部分就好像一个独立的，你要修改哪个地方直接修改与它相关的而不会影响其他的部分。三、小组任务分工1、组员（姓名：郭璞 ）（1）个人主要工作素材搜集，网页排版，Flash制作，网页制作（2）主要收获 学会了如何制作简单的Flash动画，如何运用Dreamwaver工具制作基本网页（3）自我评定 优 良 中 及格 不及格第一章 前期准备第一节 素材搜集一、网上搜集 在正式制作我们的网页之前，在确定了主题后首先我在网上寻找了一些手绘的古风图，再将这些图片中找到适合我们主题的进行分类。又通过XX等工具寻找了一些古诗词网站和古诗词的书籍将其收集起来并保存。以及一些需要的网页链接，充实网站内容使

8、网站内容更加丰满。还找了一些关于古诗词的swf格式的MV进行下载。二、制作由于网页制作需要有一部分的小图标以及网页头部的Flash无法在网上找到。所以通过Firework工具的绘画功能制作了一些网页小图标。又用 Macromedia Flash工具制作了一些动作图片和小视频来美化网页布局，使网页看起来更加美观大方。第2节 其他准备1、免费空间申请 免费空间的申请在网站制作过程中是很重要的，原本申请了老师建议的一个网站，但是由于申请人数太多了导致该网站冻结了域名。后又看了许多国内的网站，却由于收费或是试用网站无法在公共网络上使用等等原因无法作为个人网站使用，后来在同学的帮助下才申请到了一个国外的

9、免费空间才成功。二、8uftp使用 网页制作完成最总要的是上传网页，这样才能完成一个网站的制作。所以，我在网上下载了8uftp软件，用来上传网页完成网站的最后制作。第2章 网页制作第一节 设计方案主架构设计，结构图如图1所示：图1网站主页的设计，结构图如图2所示：图2第二节 网站主页一、排版在正式制作网页前，我首先进行了网页排版。网页整体颜色为灰色，网站的头部是由一段“欢迎”的flash影片和到达各个板块的链接组成。内容部分是个人简介和网站简介组成。底部为网站版权所有，介绍了我的个人信息和版权信息。二、内容个人简介介绍了我的主要信息，网站简介则是介绍了网站的选题原因和它的主要功能以及内容简介。

10、在这张网页上我插入了一个弹出窗口，用来插入欢迎信息。制作网页使用的代码第三节 内容制作一、我的主页制作我的主页头部主要是由主页题目和一则古风Flash动画组成。内容主要为五个模块，首先是站长提醒部分，主要功能为介绍本站作用和功能。其次是最近更新模块，这部分主要功能是介绍网站最新上传和更新的诗词。在这里，我是用了脚本代码做了一个简单的图片特效。再次是唐诗三百首和宋词精选两个链接模块，用来链接一些推荐诗词的释义网页。最后是友情链接模块，这里的链接都是站外链接，用来链接一些其它网站的优秀作品供大家欣赏。底部为网站版权所有，介绍了我的个人信息和版权信息。本页主要使用来介绍本站基本功能和作用，并让来访者

11、对本站有基本的了解。制作网页使用的代码#FocusImg_JS BORDER-RIGHT: #908B82 1px solid; BORDER-TOP: #908B82 1px solid; FONT-SIZE: 12px; MARGIN: 0px auto; BORDER-LEFT: #908B82 1px solid; WIDTH: 390px; BORDER-BOTTOM: #908B82 1px solid; HEIGHT: 312px; #FocusImg_JS IMG #FIJ_L OVERFLOW: hidden; WIDTH: 390px; HEIGHT: 274px#FIJ_

12、L SPAN DISPLAY: block; OVERFLOW: hidden; WIDTH: 394px; HEIGHT: 249px; TEXT-ALIGN: left#FIJ_L IMG WIDTH: 390px; HEIGHT: 249px#FIJ_L P FONT-WEIGHT: bold; BACKGROUND: #fdedc7; MARGIN: 0px; OVERFLOW: hidden; LINE-HEIGHT: 25px; BORDER-BOTTOM: #f4c779 1px solid; HEIGHT: 22px; TEXT-ALIGN: center#FIJ_L P A

13、COLOR: #000; TEXT-DECORATION: none#FIJ_L P A:visited COLOR: #000; TEXT-DECORATION: none#FIJ_L P A:hover COLOR: #c00; TEXT-DECORATION: underline#FIJ_L P A:active COLOR: #c00; TEXT-DECORATION: underline#FIJ_R DISPLAY: inline-block; MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 390px.id_FIJ_R_ImgBlk IMG B

14、ORDER-RIGHT: #b27c7c 1px solid; BORDER-TOP: #b27c7c 1px solid; BORDER-LEFT: #b27c7c 1px solid; WIDTH: 91px; BORDER-BOTTOM: #b27c7c 1px solid; HEIGHT:58px.id_FIJ_R_ImgBlk_On IMG BORDER-RIGHT: #b27c7c 1px solid; BORDER-TOP: #b27c7c 1px solid; BORDER-LEFT: #b27c7c 1px solid; WIDTH: 91px; BORDER-BOTTOM:

15、 #b27c7c 1px solid; 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; OVERFLO

16、W: hidden; WIDTH: 91px; CURSOR: pointer; PADDING-TOP: 0px; HEIGHT: 64px.id_FIJ_R_ImgBlk_On IMG FILTER: progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=50,finishOpacity=50); moz-opacity: .5; opacity: 0.5var TimeOut=3000; /切换时间(单位毫秒);var StartType=o

17、nmouseover; /缩略图触发动作var imgUrl=new Array();var imgSUrl=new Array(); var imgLink=new Array();var imgtext=new Array();var imgAlt=new Array();var adNum=0;imgUrl(3+1)=images1/23052PS026.jpg;imgSUrl(3+1)=images1/23052PS026.jpg;imgtext(3+1)=不似接舆人不知，扭转乾坤太疯？;imgLink(3+1)=#;imgAlt(3+1)=不似接舆人不知，扭转乾坤太疯？;imgUrl

18、(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

19、)=君来不同，君去不同！;imgUrl(1+1)=images1/20081110215517262_2.jpg;imgSUrl(1+1)=images1/20081110215517262_2.jpg;imgtext(1+1)= 才子如此闲悠，瘗无数天才竞自由;imgLink(1+1)=#;imgAlt(1+1)=才子如此闲悠，瘗无数天才竞自由;function changeimg(n)adNum=n;window.clearInterval(theTimer);adNum=adNum-1;nextAd();function goUrl()window.open(imgLinkadNum,_

20、blank);var count=0;for(i=1;iimgUrl.length;i+)if(imgUrli!=)&(imgLinki!=)&(imgtexti!=)&(imgAlti!=)count+;elsebreak;function playTran()if(document.all)imgInit.filters.revealTrans.play();var key=0;function nextAd()if(adNum(imgUrl.length-1)adNum+;elseadNum=1;if(key=0)key=1;else if(document.all)imgInit.fi

21、lters.revealTrans.Transition=23;imgInit.filters.revealTrans.apply();playTran();document.images.imgInit.src=imgUrladNum;document.images.imgInit.alt=imgAltadNum;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)

22、.className=id_FIJ_R_ImgBlk;document.getElementById(focustext).innerHTML=imgtextadNum;document.getElementById(imgLink).href=imgLinkadNum;theTimer=setTimeout(nextAd(),TimeOut);document.write();document.write( );document.write( );document.write( +imgtext1+);document.write( );document.write( );for(var i

23、=1;iimgUrl.length;i+)document.write( );document.write( );nextAd();document.write();document.write(); 二、About制作 About的头部是由各个主模块的链接和标题图片组成。内容是由图片部分以及诗词部分组成。诗词部分含有其释义和Flash制作的MV的链接。底部为网站版权所有，介绍了我的个人信息和版权信息。本页主要是给人以另类的诗词欣赏方式，让诗词更加贴近于我们的生活，减少诗词的枯燥与乏味。三、图片制作 图片主要由左边的链接框和右边的欣赏框以及底部的网站版权所有组成。链接框有一些推荐的古诗词链接，

24、欣赏框是一些优美古诗词的图片和内容。版权所有介绍了我的个人信息和版权信息。在这里，我用Macromedia Flash工具制作了一个转动小球的小动画。下面的链接，我运用脚本语言做了一个滚动的链接效果使网页效果更加丰富。本页主要为欣赏页，将图片与诗词结合给诗词的内容增加色彩，使其更加丰富。制作网页使用的代码 胡无人行 枫桥夜泊 湖边采莲妇 题西林壁 四、Blog制作 Blog除了头部的图片部分和底部的版权信息以外，内容则是通过小块的方式将诗词以不同的变现方式展现出来，使人看起来耳目一新增强趣味感和视觉上的感官色彩。五、信息制作 信息的头部是通过题目和Flash展现出来，内容一方面是一些有关故事的

25、图片，另一方面是关于来访本网站的访客的信息。可以系统的了解访客对本网站意见和建议，和来访本站的访客的个人倾向。最后是版权部分。第四节 链接页制作一、诗词释义制作 诗词释义除头部欣赏的动画外，内容主要分为诗词的内容，译文以及诗词赏析。还有古诗分类和古文典籍两部分的链接，这部分链接属于外部链接主要是一些与此相关的网站与网页的链接。本页主要功能是用来对我的主页内的诗词内容进行进一步了解，深层次加以详述的网页。二、精美视频制作 精美视频除头部图片与底部版权外，内容主要分为诗词的内容，译文以及诗词赏析以及关于本诗词的精美视频。本页主要功能是用来对About的诗词内容进行详述，加入视频使诗词内容不再单调乏味，使人们对诗词的印象发生转变让本站内容更加充实、丰满。 第三章 设计小结 制作过程中的问题及小结 首先在设计之初我对布局无从下手，不知道我想要的这样一个主页该怎么样去布局会更美观、更漂亮，这个过程也让我考虑了很多天并且浏览了网上许多优秀个人网页的布局。 其次，在设计过程中，对色调以及内容的排版上也没有什么很好的思路