《网站设计与建设》.doc

网站设计与建设课程设计报告设计题目： 吞噬星空主题网 专 业： 班级： 学生姓名： 学号： 指导教师： 2011年12月信息工程学院摘 要现在网上有很多的读书网站，也有很多的贴吧和BLOG都有小说的影子。他们的主要提供的是大量的小说的阅读及其下载，涉及的方面很多很广。而该主题网站更加像一个博客，里面主要的只有一本小说的内容，几乎所有的东西都是和这本吞噬星空小说有关的，只有少数是其他热门小说的链接。吞噬星空是一本现在在网上热门的玄幻小说，读者众多，同样议论不一，但是签约的书籍都有着保护，我这里提供了在线的最新阅读和一些互动环节，给读者一个交流的平台，以及一些关于小说、作者的最新消息。现在网站只是初见雏形，很多东西都没有完善，只具有部分功能，在线阅读、小说下载、读者投票、留言版、章节列表、作者简介、小说简介、经典语录、最近更新、联系站长等等。关键字：吞噬星空、网站、章节、读者、小说目 录摘 要I目 录I第1章 概述21.1 选题的意义2第2章 系统分析42.1 技术分析42.2 功能分析5第3章 总体设计与详细设计63.1 总体结构设计63.2 网站目录结构设计73.3 详细设计10第4章 系统测试134.1 设计和调试过程中遇到的问题134.2 运行通过后的结果14总结16附录：18第1章 概述1.1 选题的意义1主题这是一个关于小说吞噬星空的主题网站，主要对用户提供在线阅读、小说下载、读者投票、留言版、章节列表、作者简介、小说简介、经典语录、最近更新、联系站长等等。各大门户网站，也开辟了小说连载的平台，以这种廉价的方式获取最大的宣传效果。该网站经过小说作者的允许对小说进行了连载发布。2选题的意义一学期的网页设计理论和实践课程都结束了，根据老师的要求及指导，我设计了此网站，本网站的操作简单，功能比较完整，对小说的理解比较全面。对于喜爱吞噬星空的读者，在这里阅读方便，并且能和其他对本小说喜爱的粉丝进行交流和讨论。和其他小说网站相比，我的网站更具有针对性，适合喜爱吞噬星空的读者在本站阅读、议论、下载。在本网站可以很容易的实现对小说的在线阅读、下载等功能，网站现在并没有真正的完成，还需要进一步的完善，到时候的功能将不会如此的单一。此外，这不仅是为了肩负学生的责任而去完成老师交给我的任务，更是对过去学习的知识的温习巩固，是一个把理论转化为实践的过程，是一个把自己的设计思想转化为实物的过程，是一个发挥自己创造力和想象力的过程。 再者，这是对自己在一学期内该学习科目以来的成果的检查，这是一个自我审视的过程：检测我该学期的学习成果，衡量一期以来的收获，更为重要的是扬长避短，发现自己的问题与缺点，使自己及时改正，发觉自身的优点和长处并坚持发扬，有利于我以后的学习和发展。 第2章 系统分析2.1 技术分析作为制作网页的基础，熟练的掌握Windows操作系统是不可或缺的，该网站的运行环境包括Windows XP 、Win7等Windows系统。同时使用html（Dreamweaver）网页技术也是很有必要的。网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。 版式设计通过文字图形的空间组合，表达出和谐与美。 多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。一个好的界面设计它的界面是弱化的，它突出的是功能，着重体现的是网站业提供给使用者主要是什么。这就涉及到浏览顺序、功能分区等等。 要让访客在0.5秒内就能把握网站的属性，就是这个网站是做什么的，1秒内就知道该从哪个地方开始使用这个网站，能点一次的，绝不点第二次。网站不是动画片，在效率越来越高，社会心理越来越浮躁的现在，人们的耐心越来越小，心理承受能力越来越低。对小说的阅读要求越来越高，效果可以体现意境，但不会太多，点到为止。2.2 功能分析本网站可以在线阅读、小说下载、查询章节、查询作者、最新公告、对网站提出建议、留言等等。主页将有背景音乐、联系站长、本站作者等等内容。在线阅读：给读者提供原版小说的章节阅读，读者可以根据自己的进度选择自己想看的章节，直接阅读，而不需要从头开始。小说下载：给读者提供吞噬星空的下载，还包括其他部分热门小说的下载。章节列表：给读者提供章节的选择，方便读者阅读作者简介：对该小说的作者进行了详尽的介绍。最新公告：在最新公告里，一般会发布关于该小说最新的消息，和作者的近况。投票专区：实时更新，每隔一段时间对网站的部分内容进行投票，如何改进及作出回应。过客留言：每个小说的读者都可以在这里留下自己的言论，如对小说的理解，对主角未来的发展前景的预判，和其他读者的交流辩论。联系站长：可以联系站长本人，对网站的提出改进的建议。背景音乐：进入主页有背景音乐，给人以放松心情的空间，如不喜欢可以关闭背景音乐。第3章 总体设计与详细设计3.1 总体结构设计1系统结构图我的网站系统的功能结构框图如下，这些表示出我的网站所具有的功能。例如主页最近更新本站成员语录内容经典语录在线阅读联系站长小说内容过客留言作者简介章节列表小说正文花、小贼站长本人图3-1 系统总体结构图2系统设计草图标题登陆 公告书籍简介 主界面 投票其他小说 本站成员主页面框架标题既LOGO是本站的一个象征，说明该网站是一个吞噬星空的主题网站，所以吞噬星空的滚动无时无刻不在提醒读者这里的主题。登陆：该网站的常驻读者可以注册一个自己的账号，保存自己的阅读进度和小说的阅读记录，还可以小说的下载和上传。书籍简介：对网站的主题吞噬星空进行了简单的介绍，让读者很容易的了解小说的基本内容。其他小说：在这里的是一些在网上热门的小说，我们也提供了这些小说的阅读和下载，并提供了其他小说网站的链接。主界面：这里的内容全是吞噬星空，有最新的更新，小说全文的阅读。最新公告：在最新公告里，一般会发布关于该小说最新的消息，和作者的近况。投票：实时更新，每隔一段时间对网站的部分内容进行投票、提交。本站成员：网站制作成员的组成，主要是站长。3.2 网站目录结构设计网站的目录是指你建立网站时创建的目录。例如：在用frontpage98建立网站时都默认建立了根目录和images子目录。如下图 图3.2 网站目录结构设计目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。下面是建立目录结构的一些建议。首先不要将所有文件都存放在根目录下，这样做造成的不利影响在于：1.文件管理混乱。你常常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率。2.上传速度慢。服务器一般都会为根目录建立一个文件索引。当您将所有文件都放在根目录下，那么即使你只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。很明显，文件量越大，等待的时间也将越长。所以，给您的建议是：尽可能减少根目录的文件存放数。其次按栏目内容建立子目录。子目录的建立，首先按主菜单栏目建立。例如:网页教程类站点可以根据技术类别分别建立相应的目录，象Flash、Javascript等；企业站点可以按公司简介，产品介绍，价格，在线定单，反馈联系等建立相应目录。而一些相关性强，不需要经常更新的栏目，例如：关于本站，关于站长，站点经历等可以合并放在一个统一目录下。所有需要下载的内容也最好放在一个目录下。在每个主目录下都建立独立的images目录。默认的，一个站点根目录下都有一个images目录。刚开始学习主页制作时，习惯将所有图片都存放在这个目录里。可是后来发现很不方便，当需要将某个主栏目打包供网友下载，或者将某个栏目删除时，图片的管理相当麻烦。经过实践发现：为每个主栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。最后目录的层次不要太深。目录的层次建议不要超过3层。原因很简单，维护管理方便。其它需要注意的还有： 1.不要使用中文目录；网络无国界，使用中文目录可能对网址的正确显示造成困难。2.不要使用过长的目录；尽管服务器支持长文件名，但是太长的目录名不便于记忆。3.尽量使用意义明确的目录；上面的例子中，你可以用Flash, Javascript来建立目录，也可以用1，2，3建立目录，但是前一个更明确，更便于记忆和管理呢。3.3 详细设计主页：包含了、文字滚动特效，时间，背景音乐，CSS框架，返回主页，链接，蝴蝶飞舞等特效。子页：包含了图片链接，链接，返回主页，CSS框架等特效。网页设计中导航使用超文本链接或图片链接，使人们能够在您的网站上自由前进或后退，而不会让他们使用浏览器上的前进或后退。表格(table)是页面中的重要元素,是页面排版的主要手段。可以设定表格的宽度、高度、边框、背景色、对齐方式等参数。很多时候，将表格的边框设为0，以此来定位页面中的元素，或者籍此确定页面中各元素的相对位置。浏览器在读取网页html原代码时，是读完整个table才将它显示出来的。如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来。在访问一些站点时，等待多时无结果，按"停止"按钮却一下显示出页面就是这个原因。因此，在设计页面表格的时候，应该尽量避免将所有元素嵌套在一个表格里，而且表格嵌套层次尽量要少。在必要时适当使用动态“Gif”图片，为减少动画容量，应用巧妙设计的Java动画可以用很小的容量使图形或文字产生动态的效果。对网页的美观也有不错的改善。为了让读者看起来舒服、顺畅，会对该网站留下一个“很专业”的印象。网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题什么的，要统一风格，贯穿全站。色彩是一种奇怪的东西，它是美丽而丰富的，它能唤起人类的心灵感知。一般来说，红色是火的颜色，热情、奔放；也是血的颜色，可以象征生命。黄色是明度最高的颜色，显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁和平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人以纯洁与清白的感觉，表示和平与圣洁。 我们知道，颜色是光的折射产生的，红、黄、蓝是三原色，其它的色彩都可以用这三种色彩调和而成。换一种思路，我们可以用颜色的变化来表现光影效果，这无疑将使我们的作品更贴近现实。色彩代表了不同的情感，有着不同的象征含义。这些象征含义是人们思想交流当中的一个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。单纯的颜色并没有实际的意义，和不同的颜色搭配，它所表现出来的效果也不同。比如绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛。蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配则会给人带来暖意。设计的任务不同，配色方案也随之不同。考虑到网页的适应性，应尽量使用网页安全色。但颜色的使用并没有一定的法则，如果一定要用某个法则去套，效果只会适得其反。经验上我们可先确定一种能表现主题的主体色，然后根据具体的需要，应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体，以达到和谐、悦目的视觉效果。而本网站的背景颜色主要是暖色系的，以粉色，橘黄色为主，有少量的冷色进行点缀部分是蓝色的星空背景以衬托小说的主题。网页布局设计是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循五个大的原则：统一、连贯、分割、对比及和谐。 统一，是指设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。 连贯，是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽，犹如一气呵成。 分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归纳。 对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。 和谐是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。第4章 系统测试4.1 设计和调试过程中遇到的问题在设计主页的过程中，出现这样那样的困难，比如：时间无法更新，背景音乐添加不上，链接不能应用等等等。经过我和同学加上上网询问的努力，这些问题都解决了。通过一些在代码上的直接修改可以很轻易的做到。设计子页遇到的问题也不少，首先就是框架由于是小说网站，要涉及到阅读，而文章一般都是在网页的中间，这个难了我很长时间，后来才发现如何用表格居中，文字在表格中左端对齐，解决了这个问题。代码不熟练导致了，制作过程缓慢和痛苦。不得不花大量的时间去查一些代码。在用到文字滚动特效代码的时候，忘记了怎样控制滚动时间，开始滚动的好慢好慢，后来上百度查了下总算弄清楚了是要修改scrollamount的值。在用到文字滚动特效代码的时候，忘记了怎样从左到右，后来上百度查找才明白。在使用图片的过程中发现有的图片无法读取，怎么也弄不明白。后来上网查了才明白，网页支持的图片格式有6种，分别是jpg、gif、bmp、png、ioc、pcx刚开始的时候背景音乐无法添加后来知道代码了是<EMBED SRC=”JBS.WMA”>。但是还不好使后来发现应该放在<body></body>z之间而不是其他地方。4.2 运行通过后的结果主页章节列表经典语录小说下载总结经过了整整两周的忙碌的上机实验，查找资料与多次修改终于课程设计即将结束了。可给我带来的收获却远远超出了我们的预想。本次网页的课程设计，提高了我们各方面的能力操作实践面面俱到。通过这种学习和能力的培养，以加强自我发现问题分析问题解决问题的能力，认真主动完成课设的要求。每个作品都反映了我们应用课程的某部分知识解决某个问题的结果，而我们并不是一切顺利的，在研究中遇到了各种各样的问题，是我们自己都无法想象的。在这次的设计中，让我深深地体现到即使将来进行设计网站不是一件简单的事情，很多代码，技术，是我们根本不理解，更是无从下手的。课设它需要设计者具有全面的专业知识、缜密的思维、严谨的工作态度以及较高的分析问题、解决问题的能力，而我在很多方面还有欠缺。经过老师和同学的细心讲解，帮助最终才得以完成。任何事情都不是简单容易的，这次课程设计更是让我理解了这句话。最后，我要感谢老师在我的设计过程中给予我的帮助，使我能够及时地完成此次的设计。我也要感谢我的兄弟花、小贼在本系统的设计过程中给予我的支持和帮助，虽然自己的设计也很困难，可还是抽出时间帮助我，这让我很是感动。参考文献1 曾海文等.网页设计与制作教程.北京:清华大学出版社,2010.92 杨选辉.网页设计与制作教程.北京:清华大学出版社,2008.83 中国高等职业技术教育研究会.网站设计建设与维护实务.北京:高等教育出版社,20084 东方人华.网页制作三剑客.北京:清华大学出版社2004.95 相万让.网页设计与制作.北京:人民邮电出版社,2004.36 邹婷.DreamweaverMX2004标准教程.北京:中国青年出版社,2004.17 黄英等.网页设计与制作上机实践指导教程.北京:机械出版社,2004.3.附录：1源代码<HTML><HEAD><META name="GENERATOR" content="IBM HomePage Builder 2001 V5.0.0 for Windows"><TITLE>吞噬星空主题网</TITLE><style type="text/css"></style><style type="text/css"></style><style></style><script language="JavaScript1.2">function glowit(which)if (document.all.glowtextwhich.filters0.strength=2)document.all.glowtextwhich.filters0.strength=1elsedocument.all.glowtextwhich.filters0.strength=2function glowit2(which)if (document.all.glowtext.filters0.strength=2)document.all.glowtext.filters0.strength=1elsedocument.all.glowtext.filters0.strength=2function startglowing()if (document.all.glowtext&&glowtext.length)for (i=0;i<glowtext.length;i+)eval('setInterval("glowit('+i+')",150)')else if (glowtext)setInterval("glowit2(0)",150)if (document.all)window.onload=startglowing</script><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></HEAD><BODY background="images/snow0.gif" text="#d90000" bgsound src="jbs" loop=1><TBODY> <TR><TABLE height="52" background="bt.bmp" > <TBODY> <TR> <td width="739" ><div align="center" class="STYLE7"><marquee behavior=scroll> 吞噬星空 </marquee> </div></td> </TR></TBODY></TABLE><TABLE> <TBODY> <TR><TABLE bgcolor="#ff4444"> <TBODY> <TR> <TD width="219" height="18" background="images/bgbj.jpg"><div align="left">公元： <script language="JavaScript"></script> </div></TD> <TD width="81" height="18" background="images/bgbj.jpg" align="center"><div align="center"><A href="index1.html">首页</A></div></TD> <TD width="60" height="18" background="images/bgbj.jpg" align="center"><div align="center"><a href="lb.html">章节列表</a></div></TD> <TD width="60" height="18" background="images/bgbj.jpg" align="center"><div align="center"><a href="jd.html">经典语录</a></div></TD> <TD width="60" height="18" background="images/bgbj.jpg" align="center"><div align="center"><a href="zz.html">作者简介</a></div></TD> <TD width="60" height="18" background="images/bgbj.jpg" align="center"><div align="center"><a href="xz.html">小说下载</a></div></TD> <TD width="60" height="18" background="images/bgbj.jpg" align="center"><div align="center"><a href="lyb.html">过客留言</a></div></TD> <TD width="109" height="18" background="images/bgbj.jpg" align="center"><div align="center"><a href="lxzz.html">联系站长</a></div></TD> </TR> </TBODY></TABLE><script language="JavaScript1.2">var Ymax=8;var Xmax=8;var Tmax=10000;if(IE4 | NS6)IDsnum.style.left=(getidleft(num)+dx)+'px'window.onload=init;window.onresize=function() wind_w=getwindowwidth(); wind_h=getwindowheight(); </script><TABLE> <TBODY> <TR> <TD width="181" valign="top" align="center" height="683"> <TABLE width="180" height="473"> <TBODY> <TR> <TD align="center" width="176" height="18"><span class="STYLE2">吞噬领域<span class="STYLE7"> <embed src="jbs.wma" width="94" height="18"></embed> </span></span></TD> </TR> <TR> <TD width="176" bgcolor="#ffecec" height="138">用户姓名：<input size="14" name="username"> <BR>用户密码：<INPUT type="password" size="14" name="userpsd"><BR><INPUT type="checkbox" name="xuansave" value="1">记住密码 <INPUT type="checkbox" name="estate" value="1">隐身登陆<BR><INPUT type="image" value="登录" class="buttonface" name="Submit" src="images/login.gif"> &nbsp;<INPUT type="image" value="注册" onClick="window.open('http:/')" class="buttonface" name="Submit" src="images/zuce.gif"></TD> </TR> <TR> <TD align="center" width="176" height="18">作品简介</TD> </TR> <TR> <TD width="176" valign="middle" bgcolor="#ffecec" height="181"><marquee direction=up height=160 onMouseOut=start(); onMouseOver=stop(); scrollamount=2 scrolldelay=80 width=162 align="center">那些年，我们一起追盘龙小说的日子。盘龙女粉丝萝莉养成日记，详情点击。 继九鼎记盘龙星辰变寸芒星峰传说后，番茄的第六本书！ 简介：=)本文转载自网络原创文学门户起点中文网： </marquee> </TD> </TR> <TR> <TD width="176" align="center" height="18">其他小说</TD> </TR> <TR></TABLE><p align="center">版权所有 盗版必究</p><p align="center">Copyright 2011 - 2012 , All Rights Reserved</p></BODY></HTML>2系统界面图