web毕业论文.docx

《web毕业论文.docx》由会员分享，可在线阅读，更多相关《web毕业论文.docx（32页珍藏版）》请在三一办公上搜索。

1、web毕业论文Web前端页面设计 长沙理工大学继续教育学院 成人函授教育毕业设计 指 导 书 1 Web前端页面设计 摘要 21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且融入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站已经势在必行。 本论文主要围绕数字媒体技术专业的门户网站为开发主题，最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和

2、交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。 分析并解决实现中的若干技术问题介绍了个性化页面的背景及jsp+javascript +mysql系统的一般原理；阐述整个个性化页面生成系统的系统结构及工作原理；分析了系统实现中的特殊性，难点和重点；设计实现用户注册，用户登录，用户管理等jsp页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进行测试并分析结果。 该网站有效地实现用户通过JSP页面访问来进行用户注册，登陆，并对网站内容进行有效的管理，提升了后期添加和删除信息的有效性，具有一定的应

3、用价值。 2 Web前端页面设计 目 录 第1章 前端开发工具及相关技术.5 1.1 选题背景及意义.5 1.2 前端开发工具.7 1.3 前端开发相关技术.8 1.3.1 Javascript简介.8 1.3.2 Java script基本特点.8 1.3.3 CSS简介.9 1.3.4 JQuery.9 1.4 本章小结.11 第2章 前端布局分析与设计.11 2.1 前端总体开发流程及设计.11 2.1.1 分层开发.12 2.1.2 代码编写.12 2.1.3 内部测试与后续优化.13 2.2 前端UI设计.16 2.2.1 模块分布.16 2.2.2 颜色配置.16 2.2.3 CS

4、S元素 .17 3 Web前端页面设计 2.3 交互设计与UI.18 2.4点线的运用.20 2.4.1 点的运用.20 2.4.2 线的运用.20 2.5网站结构布局及设计.21 2.5.1 网站首页结构.21 2.5.2 主题鲜明，富有特色.22 2.5.3版式编排布局合理性.23 2.6 网站前台页面设计.25 2.5.1 首页.26 2.5.2 系内概况.26 2.5.3 系内新闻.27 2.6 本章小结.27 第3章 主要功能的实现.27 3.1 界面设计.27 3.2 具体设计文档.27 3.3 前台新闻文摘显示.28 3.3.1 网站装饰风格.28 3.3.2 网站的链接结构.2

5、8 3.4 可视化设计.28 3.5 具体实现技术.29 3.5.1 CSS在数字媒体技术系网站中的应用实例.29 3.5.2 应用JavaScript设计网页.29 4 Web前端页面设计 3.6 本章小结.31 第4章总结.32 4.1 本章小结.32 致谢.33 5 Web前端页面设计 第1章 前端开发工具及相关技术 1.1 选题背景及意义 如今的互联网已经渗透到我们生活的每一个层面，网站的内容越来越丰富全面，以此来满足了各种不同需求的浏览者。网站的作用众所周知人们通过网站快速获取，发布和传递信息。 目前很多高校建立起了自己的网站这些网站的建立使得学校可以突破传统的媒体的限制在网络上开辟

6、的属于自己的新天地。网络具有超时空性。网络超时空性是一种“一人对一人，一人对多人，多人对一人，多人对多人”的传播方式。超时空性的形成正式由于在网络在时间层面，空间层面上的开放性带来的。网络的超时空性使得网站对学校本身和外界社会表现特定的功能，表现在网站有助于改变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长。网络具有的海量存储特性，网络能形成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。 网站的海量存储特性可以从横向和纵向两方面分析：横向看网站往往设置多个板块，分别放置相关内容。不同板块的信息相互独立，共同

7、构成网站的内容。 纵向看，同一个板块的内部，内容并不是固定不变的，而是不断添加连续更新的。大量的信息使得高校网站成为一个巨大的数据库。 交互性体现在网站通过设置留言板，论坛，发挥网络交互的功能，在我们的日常生活建立起了交流渠道。 网站正是以这些特点为基础，发挥了自己本身的资源整合，信息传播，多方交流互动等方面的独特功能，成为一座沟通桥梁。 很多网站内容多姿多彩，板块，内容争妍斗艳。但不外乎以一下几部分例如：学校介绍，新闻发布，招生信息，就业信息，师资力量，科研成果，机构设置，教学素材等。高校网站的建立和维护需要大量的物力和人力，为何要投入 6 Web前端页面设计 去建网站上？是因为如上所述的网

8、站有的独特特性使得建设高校网站势在必行我们要创建我们本专业的网站数字媒体技术系的专业网站，网站前端设计最基本的三个技能：HTML，CSS，JavaScript，PS 矢量图像编辑技术。这个是前端开发中最基本也是最 必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。 建立本系网站发挥的作用如下： (1) 数字媒体技术系网站是数字媒体专业的“商标”。在这个高度信息化的

9、社会里，建立数字媒体技术系自己的网站是最直接的宣传手端。网站的超时空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业。 (2) 数字媒体技术系网站巨大的教育资源，网站是实现教育资源分配的桥梁，它使每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提高教学效率。数字媒体技术系网站能提供教学互动的全新方式，网站使得教师与教师，教师与学生，学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学院同处一室，共同讨论，共同提高。地理上的界限在这里模糊和消失了，数字媒体技术系网站是真正没有围墙的系网站。 (3) 数字媒体技术系网站能够提供个性化的学习平台，不同的学生

10、理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。数字媒体技术系网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。 (4) 数字媒体技术系网站是最佳的教学研究室，数字媒体技术系网站与教育类专门网站的有效链接，给本系教学研究带来了一片新天地，各种优秀教案，专家论坛，网络观摩课，各科素材，多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本，提高效率。 7 Web前端页面设计 1.2 前端开发工具 (1) MyEclipse简介 MyEclip

11、se企业级工作平台是对EclipseIDE的扩展，利用它我们可以在数据库和JavaEE的开发，发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的JavaEE集成开发环境，包括了完备的编码，调试，测试和发布功能，完整支持HTML，Struts，JSP，CSS，JavaScript，Spring，SQL，Hibernate。MyEclipse4结构上的这种模块化，可以让我们在不影响其他模块的情况下，对任一模块进行单独的扩展和升级。 简单而言，MyEclipse是Eclipse的插件，也是一款功能强大的JavaEE集成开发环境，支持代码编写，配置，测试以及除错，MyEclipse6。

12、0以前版本需先安装Eclipse。MyEclipse6。0以后版本安装时不需安装Eclipse。 (2) Dreamweare Dreamweare是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页5。 使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网页位置或档案名称，Dreamweare 会自动更新所有链接。使用支援文字，HTML码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 (3)

13、 Photoshop Adobe Photoshop，简称“PS”，是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。 8 Web前端页面设计 在网站前端开发过程中需要把图片用Photoshop处理成加载到网站页面的图片，用Photoshop 制作矢量图形用作网站页面的修饰按钮。 1.3 前端开发相关技术 1.3.1 Java script 简介 Java script的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的，动态的，可交互式的表达能力

14、。从而基于CGI静态的HTML页面将被可提供动态实时信息，并对客户操作进行反应的Web页面的取代。Java script脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱和欢迎。它是众多脚本语言中较为优秀的一种，它与WWW的结合有效地实现了网络计算和网络计算机的蓝图。无疑Java家族将占领Internet网络的主导地位。因此，尽快掌握java script脚本语言编程方法是我国广大用户日益关心的问题。 1.3.2 Java script 基本特点 (1) 基于对象的语言 java script是一种基于对象的语言，同时也可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多

15、功能可以来自于脚本环境中对象的方法与脚本的相互作用。 (2) 简单性 java script的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计， 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。 (3) 安全性 java script是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信 息浏览或动态交互。从而有效地防止数据的丢失。 9 Web前端页面设计 (4) 动态性 java script是动态的，它可以直接对用户或客户输入做出响应，无须经过W

16、eb服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标，移动窗口，选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 1.3.3 CSS简介 CSS (层叠样式表)是用来进行网页风格设计的，它简化并扩展了HTML中的各种标记，使得各个标记的属性更具有一般性和通用性，大大提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，就可以改变同一页面的不同部

17、分，或者页数不同的网页的外观和格式。 什么是CSS？ CSS中，Cascading是“层叠”的意思，也就是说在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后显示时被采用。从样式表插入的形式看可以分为3种。(1) 内联式样式表； (2) 嵌入式样式表； (3) 外部式样式表； CSS的特点 CSS是用来扩展HTML的，而不是用来替换HTML的，也就是说CSS不能脱离HTML，它只是一项辅助工具。除了可扩展HTML的样式设定外，CSS 使得网页的设计与维护更加高效，这主要表现在以下几个方面：减少图形文件的使用，集中管理样式信息，设定共享样

18、式，将样式分类使用。 1.3.4 JQuery JQuery9是继prototype之后又一个优秀的Javascript框架。其宗旨是WRITE LESS，DO MORE，写更少的代码，做更多的事情。它是轻量级的js库(压缩后只有21k)，这是其它的js库所不及的， 10 Web前端页面设计 它兼容CSS3，还兼容各种浏览器 。 JQuery是一个快速的，简洁的JavaScript库使用户能更方便地处理HTML documents，events，实现动画效果。 jQuery其模块化的使用方式使开发者可以很轻松的开发出功能强大的网页特效。本文主要论述了如何在Web开发中使用jQuery技术，丰富

19、网站的交互性和用户体验性。 jQuery是一套Javascrip脚本库。Javascript轻量级脚本库系列文章。 Javascript脚本库类似于。NET的类库， 这些工具方法或对象方法封装在类库中，方便用户使用。 注意jQuery是脚本库， 而不是脚本框架。库不等于框架， 比如System程序集是类库，而ASP .NET MVC是框架。 jQuery并不能帮助我们解决脚本的引用管理和功能管理，这些都是脚本框架要做的事。 脚本库能够帮助完成编码逻辑，实现业务功能。使用jQuery将极大的提高编写javascript代码的效率，让写出来的代码更加优雅，更加健壮。jQuery有如下特点： (1)

20、 提供了强大的功能函数 使用这些功能函数，能够帮助我们快速完成各种功能，而且会让我们的代码异常简洁。 (2) 解决浏览器兼容性问题 javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦，常常 一个页面在IE9，Firefox下运行正常，在IE6下就出现莫名其妙的问题。 针对不同的浏览器编写不同的脚本是一件痛苦的事情。有了jQuery我们将从这个噩梦中醒来， 比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的，从前要根据event获取事件触发者，在IE下是event.srcElements 而ff等标准浏览器下下是event。target。jQuery则通过

21、统一event对象，让我们可以在所有浏览器中使用event。target获取事件对象。 11 Web前端页面设计 (3) 实现丰富的UI jQuery可以实现比如渐变弹出，图层移动等动画效果，让我们获得更好的用户体验。单以渐变效果为例，从前我自己写了一个可以兼容IE和ff的渐变动画，使用大量javascript代码实现，费心费力不说，写完后没有太多帮助过一端时间就忘记了。 再开发类似的功能还要再次费心费力。 如今使用jQuery就可以帮助我们快速完成此类应用。 (4) 纠正错误的脚本知识 大部分开发人员对于javascript存在错误的认识。比如在页面中编写加载时即执行的操作DOM的语句，在H

22、TML元素或者document对象上直接添加onclick属性，不知道onclick其实是一个匿名函数等等。拥有这些错误脚本知识的技术人员也能完成所有的开发工作，但是这样的程序是不健壮的。比如在页面中编写加载时即执行的操作DOM的语句，当页面代码很小用户加载很快时没有问题，当页面加载稍慢时就会出现浏览器终止操作的错误。jQuery提供了很多简便的方法帮助我们解决这些问题， 一旦使用jQuery你就将纠正这些错误的知识-因为我们都是用标准的正确的jQuery脚本编写方法! 1.4 本章小结 本章介绍了开发数字媒体技术系网站前端所需要的开发工具，同时讲述了相关的前端开发技术比如：Java scri

23、pt ，CSS ，jqurey等。以便以后的开发过中能够对这些开发工具盒技术有深刻的理解 第2章 前端布局分析与设计 2.1 前端总体开发流程及设计 前端设计Web前端开发技术是一个先易后难的过程主要包括三个要素：HTML，CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化，SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识， 12 Web前端页面设计 包括代码的可维护性，组件的易用性，分层语义模板和浏览器分级支持等。 2.1.1 分层开发 在数字媒体技术系网站概要确定后就需要进行分层开发的划分，根据项目内容的不同

24、，划分工作。大致分为，总体结构搭建，模块制作，页面制作，底层JS搭建，JS交互效果，内部测试，代码优化。如图2-1所示： 这样做的好处是能根据项目的不同，划分出不同的功能模块，合理的安排时间，在有限的时间内做出很多模块和功能。降低开发成本，提高开发率。 总结结构搭建 模块制作 页面制作 分层开发 底层JS搭建 JS交互效果 内部测试 代码优化 图2-1分层开发图 2.1.2 代码编写 前期工作准备好后，就开始进入代码编写阶端，我们采用LSM方式进行， 大致流程为总规划和设计草稿完成后，就进行前期的前端开发，然后设计出完设计稿后再进行页面样式的完善，最后完成正式的页面后交给开发，嵌套程序。 13

25、 Web前端页面设计 这样做的好处不仅能有效的提高开发效率，实现逐层开发，让前端提前介入，减少整体消耗的时间，确保产品有更多的时间修改和完善。 确定了流程后还需要对产品原型进行分析，拆分，把复用性高的部分找 出来制作成代码模块，方便以后的套用。确认二，三级页面的风格搭建统一框架。 前端设计样式确定以后，就进行通用模块样式的设计，完成后并提交给前端，统一的搭建。 在代码的编写过程中，最重要的是标准和规范的执行遵守，在编写HTML时候充分发挥想象尽可能的满足后期样式表现的需要 。如图2-2所示： PRD prototype 前端制作(HTML) 页面设计 前端制作(样式完善) 提交开发 代码编写

26、图 2-2 编写代码流程图 代码编写过程中让前端提前进入开发流程中来,在样式属性后就进行HTML结构的编写，页面设计完成后，在进行样式表的开发，这样不仅能节省很多的开发时间,提高开发效率,能在前端对全局页面的把控。在此同时也强调规范和模块化的重要性，正所谓无规矩不成方圆，这样能便于后期维护，减少维护成本。而模块化，是敏捷开发所必需的，重要性在这里也不做过多的描述。 14 Web前端页面设计 2.1.3 内部测试与后续优化 前端的内部测试，指出页面与设计稿不匹配的地方，优化部分细节页面样式。测试不仅能提高内测的质量，还能更早的发现问题并及时的修改，否则当页面提交开发以后再做修改是一件很麻烦的事情

27、。当所有细节修改完毕后， 就需要进行制作文件的优化以确保代码的最优化，尽可能地压缩图片和减少外部HTTP请求如图2-3所示： 设计参与测试 内部测试与后续优化 整体测试 后续代码优化 图2-3 内部测试流程图 15 Web前端页面设计 总结结构搭建 模块制作 页面制作 分层 底层JS搭建 JS交互效果 内部测试 代码优化 前 端 开 发 流 程 代码编写 PRD prototype 前端制作(HTML) 页面设计 前端制作(样式完善) 提交开发 设计参与测试 内部测试与后续优化 整体测试 后续代码优化 图2-4 前端开发流程图 这套流程制定出来就一直要求所有前端设计必须严格按照流程执行，也经过

28、了很长时间的磨合跟改进。虽然不是很完美，但是很适合我们现在开发的需要，好处也是显而易见的，遵循并使用它对我们的发开有很大的帮助，能更好的应对高强度，高质量的开发需要。代码更可控，开发效率更高。 16 Web前端页面设计 2.2 前端UI设计 2.2.1 模块分布 UI设计这是设计中最重要的一点，也可以发挥出更多创意的设计想法；其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。下面是以任由设计师发挥，不是这样死板，要运用层次感的原理去设计 2.2.2 颜色配置 产生丰富色彩的三原色是红，绿，蓝，也就是RGB，十六进制是00 00 00， 例如经常写的red，color:#FF

29、0000； 缩写color:#F00；color:gray(#808080)；是比较深的灰色。所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。我们网站上用的色彩系是属于灰白色系这个选择符合网站的整体风格，不可能把网站设计成五颜六色，因为是学院网站所以要体现一种淡雅，自然的色彩风格。背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。首页的顶端使用灰色标题图片下面用全景图这两个部分过度的很自然。在文字部分用黑色文字当鼠标移动到相关文字上

30、面时文字颜色变成红色。不同的文字颜色会产生不同的效果，这能给浏览者一种层次感，方便与阅读。违纪一点禁止大面积使用白色文字，特别是较深的背景下，禁止大面积使用加粗文字如图2-7所示： 图 2-7 字体颜色变换 17 Web前端页面设计 2.2.3 CSS元素 CSS块元素(block) 总是另起一行开始；高度，行高以及顶，底边距都可控制 常用的有：div p table h1 ul dl 等等。 内联元素(inline)和其它元素都在一行上；高度，行高以及顶，底边距不可改变；常用的有：a strong font img input span small label等等如图2-8所示： Displ

31、ay: inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。 图 2-8 CSS浮动 CSS间距 相应的设置大小，行高，首行缩进，间距内边距padding：元素的内边距在边框和内容区之间。padding:10px 5px 15px 20px;上 10px右 5px下 15px左 20pxpadding:10px 5px 15px; 上右左下padding:10px 15px;上右下左无标题文档这个的宽度实质已经增加了40px外边距margin：围绕在元素边框的空白区域是外边距。margin支

32、持负值，在页面布局中，应该大胆的用，可以解决很多问题。最常用的就是div居中:margin:0 auto;当然一定要固定宽度。 无标题文档 18 Web前端页面设计 这个属性是无法居中的，如图所示2-9所示： 图 2-9 元素边框调整 2.3 交互设计与UI 由于视觉设计本身是一种比较主观的创作性工作，那些已经被制定好的视觉结构常常因设计师的“审美需要”而被剥离，切割。 这种情况下，交互设计尤为重要，既不能失去UI设计的特性，又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术如图2-10，2-11所示： 19 Web前端页面设计 图 2-10 导航栏 图 2-11 咨询中心

33、 20 Web前端页面设计 2.4 点，线，面的运用 先进开发思想和良好设计模式的前端模块化技术正逐渐成熟14。根据网站前端模块化的不同开发思想，详细分析了目前常见的三种模块化开发策略，阐述了每种开发策略的具体实现方法，常见的框架与工具存在的问题及优缺点，并提出了完善前端模块化开发策略的一些方法。在网页设计中同样离不开平面设计中最基本的点，线，面的运用。 2.4.1 点的运用 在内容繁杂的网页上为了可以让浏览者更轻松的找到自己想要的信息，点的引导作用必不可少 如图2-12所示： 图 2-12 点的应用 2.4.2 线的运用 线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花如图2-13

34、： 21 Web前端页面设计 图 2-13 线的应用 2.5 网站结构布局及设计 2.5.1 网站首页结构 实际内容占据网页的大部分空间，为50%80%，导航部分不超过20%。颜色的选择以青白色为主，没有使用太多的颜色来修饰某个对象，此外，正文和背景色的对比度较大，一般字色为默认的黑色，并且用了不同的背景色条区分正文区与其他功能区。为了提高网页的可读性，标题区，标题行和正文区使用了不同大小的字体，正文使用的是静止的文字，且字体足够大，以便于阅读15。 数字媒体技术系网站主要用来进行教学信息的发布与显示。作为一个网站，应该由一些相关及相对独立的模块整合而成。本网站系统主要包括以下几个主要页面及几

35、个大的 22 Web前端页面设计 模块下又细分为几个的功能模块。 制作前台页面模块，包括主页及各个子页面，建立各个页面与数据库中相关数据链接，实现前台通过调用数据库把后台数据在前台显示和更新。整体网站遵循数字媒体技术系院校类网站的设计思路，拥有完善的功能，风格要求简洁大方不单调。各个子页面都可正常返回主页以及正确连接到各个子页面。功能要求使用简单全面，容易操作。 由上面的分析，网站前端的结构设计成。如下图2-14所示： 图 2-14 网站整体结构图 2.5.2 主题鲜明，富有特色 在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色做出定位，规划网站的组织结构。 要做到

36、主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些LOGO16标志应充分加以利用。调动一切手段充分表现网站的个性和情趣，突出个性，这样能够办才出网站的特色如图2-15所示： 图 2-15 网站标题LOGO 23 Web前端页面设计 2.5.3 版式编排布局合理性 图 2-16 网站版式排版图 网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。 24 Web前端页面设计 站点设计简单有序，主次关系分明，将零乱页面的组织过程，混

37、杂的内容，依整体的布局的需要进行分组归纳，经过进行具有内在联系的组织排列，反复推敲文字，图形与空间的关系，使浏览者有一个流畅的视觉体验，如图3-16所示： 图中的A区域是数字媒体技术系网站的大logo以及网站名称，能展现网站的主题。访问者第一眼就能看的出来网站的类别等。 B区域是网站的导航栏，导航的颜色基本上是青白色，能展现网站的大体 内容。导航栏 跟顶端logo的颜色基本上一直用户浏览网页时不会产生视觉疲劳。导航栏中每个导航按钮的设计也是符合美观要求。大方，大气，自然是设计导航栏的重要基础。 C区域 是首页中的大图片，是浙江理工大学的全景图片，图片清晰拍摄角度广，色彩调整完美。现在正流行全景

38、图片大大小小网站上都会用到全景图片。使用全景图给人一种舒服的视觉感受。能够提升网站的美观程度。 D区域是教务信息区。 发表各种有关教务类的信息。区域 师资力量介绍，介绍老师及附上图片。 E 区网站最新动态区域。 最近在系发生的最新鲜的新闻，消息等内容都在这里按时间循序显示。 F区域 中间区域的图片，为什么在网页中间放置图片呢？ 是因为我们考虑到如果一个网站文字内容区域特别多，总体结构看起来很乱没有主次层次的体现。让读者看起来无从下手的感觉。而且文字内容太多容易引起用户的反感。插入中间的图片就好比中间挖了一条河一样既能解决网站过于枯燥，也提升网站的美观度。 H区域 成果展示。 J区域 底部log

39、o 整个网站的底端。能起到调节整个网站的内容平衡。让网站设计的更加完美。 25 Web前端页面设计 2.6 网站前台页面设计 数字媒体技术系网站主要包括：系内概况，系内新闻，教务信息，专业介绍，选题系统，教学研究，科研创作等7个子页面。制作过程如下： 2.6.1 首页 网站制作过程：首先利用Photoshop制作了网站的首页效果图，大小为900px*1004px。在制作网页的过程中首先是在Dreamweaver中用布局画出整个网站的大体布局格式，主要是分了三栏，各个栏目有可以分多个小栏目，并且通过CSS样式来调表格以及图片，文字的位子。主页包括的内容主要有：网站的域名，导航条，LOGO，版权。

40、导航条又包含系内概况，系内新闻，教务信息，专业介绍，选题系统，教学研究，科研创作。 2.6.2 系内概况 系内概况又分为3个2级菜单，本系概况，实验室介绍，师资介绍等。本系概况当中介绍数字媒体技术系的近期情况如图2-17所示。并以最新动态的形式展现出来。师资介绍方面介绍任课老师的基本资料，还附上照片，并把这个模块显示在首页的G区域。实验室介绍当中点击实验室介绍会进入实验室介绍页面。具体介绍实验设计建设状况等。 26 Web前端页面设计 图2-17 2.6.3 系内新闻 系内新闻分成3个2级菜单，行业资讯，院系动态，系内新闻。制作过程中采用的制作方法和调用的模块内容跟上一个差不多。可是连接不同的

41、数据表所体现的内容不同。 2.7 本章小结 本章主要介绍了数字媒体技术系网站的具体布局，具体结构。也说明了设计前端的工作流程，还讲述了界面UI设计，交互设计中的一些理理念设计思想，并用图片的形式展现了设计以后的效果图。 第3章 主要功能的实现 3.1 界面设计 设置公开地联系方式；设置网站整体信息与用户为一体；设置完善地个性化地会员管理与交互系统。 27 Web前端页面设计 完善的网站内容，网站内容下载系统。网站的整体颜色：灰白色为导航颜色；主体颜色：黑色色；字体：宋体；行距：150%。 网站统一顶部为导航条 站标，系内概况，系内新闻，教务信息，专业介绍，选题系统，教学研究，科研创作 。 网站上中部：网站图片结合；位置导航。 网站中部：网站信息；站点数据；网站导航条；图文信息。 网站底部：网站/版面制作；版权信息。 3.2 具体设计文档 内容和功能设计