简单个人主页设计课程设计论文.doc
网页设计程序设计 课程设计报告题 目：简单个人主页设计 专 业：班 级：姓 名：学 号：指导教师：时 间：摘 要多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。本网站制作网页运用了超级链接，亮光字体，条幅滚动，滚动字幕，插入多媒体，光柱等特效，阐述了制作网页时需要的知识和相关技能。 关键字：多媒体，滚动字幕，布局目 录摘 要I一、课程设计目的1二、 设计方案的论证21、背景22、意义23、技术路线2三、设计实现过程31、总体设计32、整体结构图43、 页面设计5四、调试运行61、设计及调试遇到的问题62、部分调试界面7五、 测试及问题探讨10六、 设计总结及体会11七、 致谢12八、 参考文献13九、 附录1一、课程设计目的随着学习范围扩展，需要的且下载的资料、素材等会越来越多，就会导致经常需要的文件不容易找到。所以需要设计一个包含常用文件的目录，方便查询及应用。本次设计的目标是制作一个简单的包含一些经常用到的文件的目录页面，整个页面主要用表格设计布局，用内联框架实现页面跳转的显示，添加个别的视频，音乐以及学习资料，其中学习资料支持下载功能。整个页面要包含主要的欢迎界面，导航条中包含一些个人喜欢的英文句子，常用的图片素材，经常听的音乐，以及关于linux的学习资料的下载的各级跳转链接。二、 设计方案的论证1、背景随着学习范围的扩展，已下载的资料越来越多，给查找带来很大障碍，需要一个包含日常常用的资料的目录文件以方便查找。2、意义方便对常用文件的查找以及下载，提高学习效率。3、技术路线网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、fireworks等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，网上有许多这方面的软件。主要以Dreamweaver CS6代码模块进行制作，图片处理基于Photoshop CS6版本。一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。 三、设计实现过程1、总体设计个人主页要包括首页的欢迎界面，欢迎界面要有个人的近期动态以及以往动态的链接，还要包括音乐子目录，图片素材子目录，近期的学习资料，其中学习资料要支持下载功能。在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。 网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。网页设计中导航使用超文本链接或图片链接，使人们能够在您的网站上自由前进或后退，而不会让他们使用浏览器上的前进或后退。我们在所有的图片上使用“ALT”标识符注明图片名称或解释，以便那些不愿意自动加载图片的观众能够了解图片的含义。 2、 整体结构图设计页面的首页与其他子页是在同级目录下同一个导航条内，导航条内的链接内容在当前页面的内联框架中显示，导航条跳转的子页面要求有独立页面的跳转。下载页面目前直接用链接实现，不允许在当前页显示文件内容。首 页音乐文件列表形式链接经典句子框架页面跳转首页介绍内联框架显示下载资料视频文件图 3-13、 页面设计为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。 灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中， 它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。 点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，充分表达完美的设计意境。 Index界面首行以PS制作LOGO字体evil Heaven并独占首行，之后用DIV拼接导航条，导航的链接内容以内联框架显示在当前页面，其中内联框架包含在导航条下的一个一行三列的表格中，左侧添加图片平衡页面的视觉效果。Motto界面主要显示少量的有意义的格言警句，之后要包含含有更多格言的链接页面。Photo界面以阵列显示图片缩略图以方便快速浏览。Music界面左侧尽量是音乐的列表，点击都会在当前框架的右侧的另一个内联框架中显示，当切换导航选项或再次单击music按钮时音乐停止播放。Video界面可以仿照music界面制作Download界面包含目前常用的学习资料，然后逐渐完善资料目录，如果技术支持尽量让文件也在同一个框架下显示。四、调试运行1、设计及调试遇到的问题设计过程中，会遇到各级表格及内联框架的宽度冲突，导致其中某个宽度设置无效化，也包括导航条左右留白宽度不一致造成视觉效果偏差，当跳转页面稍多时要将每个页面命名成较好理解的名称，方便制作链接及管理。制作鼠标悬停背景图片时图片大小可能会与格子大小不一致，同时需要注意悬停背景与当前链接文字的字体颜色问题，相近的颜色会导致链接字体不容易辨认。图片阵列的缩略图宽度最好不要超过内联框架的最大宽度以免造成浏览繁琐操作。2、部分调试界面2.1、index页面图2-12.2、index链接图2-22.3、motto页面图2-32.4跳转链接 图2-42.3、photo列表图2-52.4、Music列表图2-6五、 测试及问题探讨当制作完成的music以及video界面用浏览器单独运行时，可能会因浏览器没有相应的播放插件而导致音频、视频无法正常播放的情况，需要加载或下载所需插件完成页面运行。六、 设计总结及体会通过本次网页程序课程设计，克服了的偷懒的毛病，这在我以后的学习和工作中的心理定位与调节有很大的帮助。我感受到了网页设计是一项非常烦琐周密的活动，所需要的不仅一个人周密的思考问题的能力，处理问题的能力，还需要有足够的耐心和严谨治学的作风，来不得半点马虎。通过本次论文设计，我初步学会了论文设计的基本方法，学会了怎样去借鉴别人的方法和经验，知道如何去查找资料和整合处理这些资料的能力，这为以后的大学毕业设计论文打下了一个初步的基础使我收益最大的是享受到了一种成功的喜悦，在这个星期之中从开始的确定论文题目，然后是上网和上图书馆查找资料，了解网页设计的技巧，然后是进行设计，这个环节是一个非常痛苦和艰难的，常常会因为一小点的错误而在网页设计中设计不出好的效果与再次修改的漫漫循环之路中，但失败的越多，对人的考验就越多，在网站设计成功之后的享受成功的喜悦也就越多，另外在调试程序的过程中不断的思考和运用已经学到的知识，这对于自己是有很大的提高的。有机会的话要涉猎数据库方面的知识，并不断提高。七、 致谢在此论文撰写过程中，要特别感谢各位老师的指导与督促以及谅解与包容。没有老师的帮助也就没有今天的这篇论文。求学历程是艰苦的，但又是快乐的。感谢在这个期中结识的各位生活和学习上的挚友们，是他们让我得到了人生最大的一笔财富。在学习上给了我无私的帮助。在此，也对他们表示衷心感谢。这次的毕业论文设计总结是在我的指导老师老师亲切关怀和悉心指导下完成的。从毕业设计选题到设计完成，老师给予了我耐心指导与细心关怀，有了老师耐心指导与细心关怀我才不会在设计的过程中迷失方向，失去前进动力。老师有严肃的科学态度，严谨的治学精神和精益求精的工作作风，这些都是我所需 要学习的，感谢老师给予了我这样一个学习机会，谢谢！ 感谢与我并肩作战的舍友与同学们，感谢关心我支持我的朋友们，感谢学校领导、老师们，感谢你们给予我的帮助与关怀！ 本文参考了大量的文献资料，在此，向各学术界的前辈们致敬！八、 参考文献1赵丰年，网页制作教程(第3版) M人民邮电出版社，2006.2易枚根，Dreamweaver 8 网页设计与网站建设M机械工业出版社，2007.3张强，高建华，温谦 网页制作与开发教程M人民邮电出版社，2008 .4张培 Dreamweaver 8入门与提高实例教程M机械工业出版社，2007.5耿跃鹰，网页制作与网站开发：从入门到精通M清华大学出版社，2008.九、 附录1 index.html<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>icebery</title><style type="text/css">bodybackground-image:url(images/7.jpg); background-repeat:no-repeat; background-attachment:fixed;tableborder:1px solid #CCCCCC;width:100%; border-top-color:#FFF; border-left-color:#FFF; border-right-color:#FFF;height:450px;atext-decoration:nonea:linkcolor:#000;display:block;width:120px;height:40px;text-align:center;padding:4px;text-decoration:none;a:visitedcolor:#603a:hoverbackground-image:url(images/hover1.jpg); color:#FF0div#containerwidth:100%; height:50px;border:1px solid #CCCCCC; border-left-color:#FFFFFF; border-right-color:#FFFFFF;div#lrwidth:20%;float:left; background-color:transparent;height:50pxdiv#menuwidth:10%;float:left; background-color:transparent;height:50px; border:1px solid #CCCCCC; text-align:center; line-height:60px;</style></head><body><img src="images/logo.jpg"></img><br/><div id="container"><div id="lr"></div><div id="menu"><a href="link/main.html" target="main"><font face="华文行楷" size="6">Index</font></a></div><div id="menu"><a href="link/motto.html" target="main"><font face="华文行楷" size="6">Motto</font></a></div><div id="menu"><a href="link/photo.html" target="main"><font face="华文行楷" size="6">Photo</font></a></div><div id="menu"><a href="link/music.html" target="main"><font face="华文行楷" size="6">Music</font></a></div><div id="menu"><a href="link/video.html" target="main"><font face="华文行楷" size="6">Video</font></a></div><div id="menu"><a href="link/download.html" target="main"><font face="华文行楷" size="6"></font>Download</a></div><table align="center"><tr><td width="19.5%"><img src="images/left.jpg"></img></td><td width="60%"><iframe src="link/main.html" width="100%" height="440" frameborder="1" scrolling="yes" name="main"></iframe></td><td width="19%"></td></tr></table></div></body></html>2 motto.html<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><p>I finally know, I every minute of every second is a person.我终于知道了，我的每一分每一秒都是一个人。</p><p>The dark corner, only belong to me, no one disturb, no one company, only the lonely winding.那黑暗的角落，只属于我，没有谁打扰，没有谁陪伴，只有寂寞的缠绕。</p><p>Sometimes,you just have to pretend that you are happy just to stop everyone from asking you that the hell happened.有时候，你不得不假装很快乐，只是为了不让别人问"你怎么了?"</p><p>I don't mind if you heat me.It doesn't matter at all.I'm not living to please you.我并不在乎你讨厌我，我不是为了取悦你而活.</p><p>What you are doing now reflets how you will live in the future.现在怎么做代表着你以后怎么活。</p><p>Plan the worst scnario with the best hope.抱最好的希望，做最坏的准备。</p><p><a href="motto1.html" target="_blank">喜欢请点击这里！</a></p></body></html>3、photo.html<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><table><tr><td><a href="./images/1.jpg" target="_blank"><img src="./images/1.jpg" width="180" height="200"></a></td><td><a href="./images/2.jpg" target="_blank"><img src="./images/2.jpg" width="180" height="200"></a></td><td><a href="./images/3.jpg" target="_blank"><img src="./images/3.jpg" width="180" height="200"></a></td> <td><a href="./images/4.jpg" target="_blank"><img src="./images/4.jpg" width="180" height="200"></a></td><tr/> <tr> <td><a href="./images/5.jpg" target="_blank"><img src="./images/5.jpg" width="180" height="200"></a></td> <td><a href="./images/6.jpg" target="_blank"><img src="./images/6.jpg" width="180" height="200"></a></td> <td><a href="./images/7.jpg" target="_blank"><img src="./images/7.jpg" width="180" height="200"></a></td> <td><a href="./images/8.jpg" target="_blank"><img src="./images/8.jpg" width="180" height="200"></a></td> </tr> <tr> <td><a href="./images/9.jpg" target="_blank"><img src="./images/9.jpg" width="180" height="200"></a></td> <td><a href="./images/10.jpg" target="_blank"><img src="./images/10.jpg" width="180" height="200"></a></td> <td><a href="./images/11.jpg" target="_blank"><img src="./images/11.jpg" width="180" height="200"></a></td> <td><a href="./images/12.jpg" target="_blank"><img src="./images/12.jpg" width="180" height="200"></a></td> <tr></table></body></html>4、music.html<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">tablewidth:100%;height:380px;border-collapse:collapse;tdpadding:15px;border:1px solid #CCCCCCa:link,a:visiteddisplay:block;width:120px;text-align:center;padding:4px;text-decoration:none;a:hover,a:active background-image:url(./images/hover.jpg)</style></head><body><table><tr><td width="20%"><table><tr><td height="20"><a href="music1.html" target="main1">.Girls【MARiA×Easy Pop】</a></td></tr><tr><td height="20"><a href="music2.html" target="main1">darkelf_boss</a></td></tr><tr><td height="20"><a href="music3.html" target="main1">Girls【巡音×EasyPop】</a></td></tr><tr><td height="20"><a href="music4.html" target="main1">tournament</a></td></tr><tr><td height="20"><a href="music5.html" target="main1">underfoot</a></td></tr><tr><td height="20"><a href="more.html" target="main1">更多动态</a></td></tr></table></td> <td width="80%"><iframe src="music0.html" width="100%" height="385" frameborder="1" name="main1" scrolling="yes"></iframe></td></tr></table></body></html>5、main.html<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">tablewidth:100%;height:380px;border-collapse:collapse;tdpadding:15px;border:1px solid #CCCCCCa:link,a:visiteddisplay:block;width:120px;text-align:center;padding:4px;text-decoration:none;a:hover,a:active background-image:url(./images/hover.jpg)</style></head><body><table><tr><td width="80%"><iframe src="main1.html" width="100%" height="385" frameborder="1" name="main1" scrolling="yes"></iframe></td><td width="20%"><table><tr><td height="20"><a href="dongtai.html" target="main1">动态1</a></td></tr><tr><td height="20"><a href="dongtai.html" target="main1">动态2</a></td></tr><tr><td height="20"><a href="dongtai.html" target="main1">动态3</a></td></tr><tr><td height="20"><a href="dongtai.html" target="main1">动态4</a></td></tr><tr><td height="20"><a href="dongtai.html" target="main1">动态5</a></td></tr><tr><td height="20"><a href="dongtai.html" target="main1">更多动态</a></td></tr><tr><td height="30"></td></tr></table></td></tr></table></body></html>
