简单个人主页设计.docVIP

《 网页设计程序设计 》 课程设计报告 题 目：简单个人主页设计 专 业： 班 级： 姓 名： 学 号： 指导教师： 时 间：摘 要 多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。 关键字：多媒体，滚动字幕，布局 目 录 I 一、课程设计目的 1 二、 设计方案的论证 2 1、背景 2 2、意义 2 3、技术路线 2 三、设计实现过程 3 1、总体设计 3 2、整体结构图 4 3、 页面设计 5 四、调试运行 6 1、设计及调试遇到的问题 6 2、部分调试界面 7 五、 测试及问题探讨 10 六、 设计总结及体会 11 七、 致谢 12 八、 参考文献 13 九、 附录 1 一、课程设计目的 随着学习范围扩展，需要的且下载的资料、素材等会越来越多，就会导致经常需要的文件不容易找到。所以需要设计一个包含常用文件的目录，方便查询及应用。  本次设计的目标是制作一个简单的包含一些经常用到的文件的目录页面，整个页面主要用表格设计布局，用内联框架实现页面跳转的显示，添加个别的视频，音乐以及学习资料，其中学习资料支持下载功能。 整个页面要包含主要的欢迎界面，导航条中包含一些个人喜欢的英文句子，常用的图片素材，经常听的音乐，以及关于linux的学习资料的下载的各级跳转链接。 设计方案的论证 1、背景 随着学习范围的扩展，已下载的资料越来越多，给查找带来很大障碍，需要一个包含日常常用的资料的目录文件以方便查找。 2、意义 方便对常用文件的查找以及下载，提高学习效率。 3、技术路线 网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、fireworks等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，网上有许多这方面的软件。 主要以Dreamweaver CS6代码模块进行制作，图片处理基于Photoshop CS6版本。一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。 在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。 网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。 图 3-1 页面设计 为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。 　　灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中， 它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。 点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，充分表达完美的设计意境。 Index界面首行以PS制作LOGO字体evil Heaven并独占首行，之后用DIV拼接导航条，导航的链接内容以内联框架显示在当前页面，其中内联框架包含在导航条下的一个一行三列的表格中，左侧添加图片平衡页面的视觉效果。 Motto界面主要显示少量的有意义的格言警句，之后要包含含有更多格言的链接页面。 Photo界面以阵列显示图片缩略图以方便快速浏览。 Music界面左侧尽量是音乐的列表，点击都会在当前框架的右侧的另一个内联框架中显示，当切换导航选项或再次单击music按钮时音乐停止播放。 Video界面可以仿照music界面制作 Download界面包含目前常用的学习资料，然后逐渐完善资料目录，如果技术支持尽量让文件也在同一个框架下显示。 四、调试运行 1、设计及调试遇到的问题 设计过程中，会