长沙理工大学继续教育学院
成人函授教育毕业设计(论文)
指
导 书
1
Web前端页面设计
摘 要
21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也
越来越被人们接受,并且融入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采,性质。所以高校院系建立本院系美观,专业,易于维护管理的网站已经势在必行。
本论文主要围绕数字媒体技术专业的门户网站为开发主题,最基本也是最必
须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义,CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单,但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白,这样在开发的过程中才会得心应手。
分析并解决实现中的若干技术问题介绍了个性化页面的背景及
jsp+javascript +mysql系统的一般原理；阐述整个个性化页面生成系统的系统结构及工作原理;分析了系统实现中的特殊性,难点和重点；设计实现用户注册，用户登录，用户管理等jsp页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进行测试并分析结果。
该网站有效地实现用户通过JSP页面访问来进行用户注册，登陆，并对网站
内容进行有效的管理，提升了后期添加和删除信息的有效性，具有一定的应用价值。
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 分层开
3
Web前端页面设计
发......。..。..。。.。。。。.。。..。。...。.。。。.。.12
2.1。2 代码编
写。...。.。.。.。。.。.。。。。。.....。....。.。....12
2。1.3 内部测试与后续优
化...。。。。。。...。.。.。.。....。。。.13
2。2 前端UI设
计。.。.。。.。......。.。....。.。..。。.....。。.。.。。..。16
2.2.1 模块分
布。。.。..。。。。。。。.。.。。。。...。...。。..。.。。.。16
2.2.2 颜色配
置.。....。。.。.。.。...。.。.。。....。。。。.。..。.16
2。2。3 CSS元
素 ....。..。。。...。.....。。。...。...。...。。。。17
2.3 交互设计与
UI......。.....。。。..。.。.。..。..。。。。..。。。。。。。18
2。4点线的运
用.......。.。。...。。。.。。。.。..。。。..。.。。。。...。.。。..20
2。4。1 点的运
用。。..........。。。。。。。。。.......。...。。..20
2。4.2 线的运用。。....。.。。.。...。....。.。....。。。。...。。
20
2。5网站结构布局及设
计。。。。.。。.。。。。..。。。...。.。。.....。...。...21
2.5。1 网站首页结
构..。。。。。..。.。.。。。。。。.。。.。.。。。。。.21
4
Web前端页面设计
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 网站的链接结构.。。。.。。...。.。.。。..。。。.。..。.。。。。.28 3.4 可视化设
计。.。。。。...。..。。.。。。。。。...。。。。.。..。。。.。.。..。.。.28
3。5 具体实现技术...。...。。..。..。。。.。。。.。..。.。.....。.。..。...。29
5
Web前端页面设计
3.5.1 CSS在”数字媒体技术系网站”中的应用实例。......29
3。5。2 应用JavaScript设计网页。。。。。.。.。.。。。。..。。.。。.29
3.6 本章小
结.。.。..。.。。。。。..。。..。.。。。。。.。。..。。...。。...。..。。.。31
第4章 总
结。..。。...。.。。..。..。.。。.。......。.。。...。.。..。.。.。。。。。32
4.1 本章小
结.。。..。...。.。.。.。.。..。...。.。....。..。.....。......。。32
致
谢.。。。。.。。....。...。.。.。.。.。...。。。。.。.。.。。..。。。...。.。。.。.。。.
。。33
6
Web前端页面设计
第1章 前端开发工具及相关技术
1。1 选题背景及意义
如今的互联网已经渗透到我们生活的每一个层面，网站的内容越来越丰
富全面，以此来满足了各种不同需求的浏览者。网站的作用众所周知人们通过网站快速获取,发布和传递信息。
目前很多高校建立起了自己的网站这些网站的建立使得学校可以突破
传统的媒体的在网络上开辟的属于自己的新天地。网络具有超时空性。网络超时空性是一种“一人对一人，一人对多人，多人对一人，多人对多人”的传播方式.超时空性的形成正式由于在网络在时间层面，空间层面上的开放性带来的。网络的超时空性使得网站对学校本身和外界社会表现特定的功能，表现在网站有助于改变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长.网络具有的海量存储特性，网络能形成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。
网站的海量存储特性可以从横向和纵向两方面分析:横向看网站往往设置
多个板块，分别放置相关内容.不同板块的信息相互,共同构成网站的内容。 纵向看，同一个板块的内部，内容并不是固定不变的,而是不断添加连续更新的。大量的信息使得高校网站成为一个巨大的数据库。
交互性体现在网站通过设置留言板，论坛，发挥网络交互的功能，在我
7
Web前端页面设计
们的日常生活建立起了交流渠道。
网站正是以这些特点为基础，发挥了自己本身的资源整合,信息传播,多
方交流互动等方面的独特功能，成为一座沟通桥梁。
很多网站内容多姿多彩,板块，内容争妍斗艳.但不外乎以一下几部分例
如：学校介绍，新闻发布，招生信息,就业信息，师资力量，科研成果，机构设置,教学素材等。高校网站的建立和维护需要大量的物力和人力，为何要投入
去建网站上？是因为如上所述的网站有的独特特性使得建设高校网站势
在必行我们要创建我们本专业的网站数字媒体技术系的专业网站，网站前端设计最基本的三个技能:HTML，CSS，JavaScript，PS 矢量图像编辑技术.这个是前端开发中最基本也是最 必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少.在进行开发前，需要对这些概念弄清楚，弄明白,这样在开发的过程中才会得心应手。
建立本系网站发挥的作用如下：
(1） 数字媒体技术系网站是数字媒体专业的“商标”.在这个高度信息
化的社会里，建立数字媒体技术系自己的网站是最直接的宣传手端。网站的超时空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业.
(2) 数字媒体技术系网站巨大的教育资源，网站是实现教育资源分配的
桥梁，它使每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提高教学效率。数字媒体技术系网站能提供教学互动的全新方式，网站使得教师与教师，教师与学生，学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学院同处一室，共同讨论,共同提高。地理上的界限在这里模糊和消失了，数字媒体技术系网站是真正没有围墙的系网站.
（3) 数字媒体技术系网站能够提供个性化的学习平台，不同的学生理解
世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻
8
Web前端页面设计
觅不同的教育方式，各取所需。数字媒体技术系网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习,学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力,培植独特的个性和人格。
(4) 数字媒体技术系网站是最佳的教学研究室，数字媒体技术系网站与
教育类专门网站的有效链接，给本系教学研究带来了一片新天地，各种优秀教案，专家论坛，网络观摩课，各科素材，多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本,提高效率。
1。2 前端开发工具
（1） MyEclipse简介
MyEclipse企业级工作平台（MyEclipse Enterprise Workbench ，简称
MyEclipse）是对EclipseIDE的扩展，利用它我们可以在数据库和JavaEE的开发，发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的JavaEE集成开发环境，包括了完备的编码，调试，测试和发布功能，完整支持HTML，Struts，JSP,CSS，JavaScript，Spring，SQL，Hibernate。
MyEclipse[4］结构上的这种模块化,可以让我们在不影响其他模块的情况下，对任一模块进行单独的扩展和升级.
简单而言,MyEclipse是Eclipse的插件，也是一款功能强大的JavaEE集
成开发环境,支持代码编写，配置，测试以及除错，MyEclipse6。0以前版本需先安装Eclipse。MyEclipse6。0以后版本安装时不需安装Eclipse。
（2） Dreamweare
Dreamweare是美国MACROMEDIA公司开发的集网页制作和管理网站于一身
的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台和跨越浏览器的充满动感的网页［5］。
使用网站地图可以快速制作网站雏形，设计,更新和重组网页。改变网页
位置或档案名称，Dreamweare 会自动更新所有链接。使用支援文字,HTML码，
9
Web前端页面设计
HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单.
（3) Photoshop Adobe
Photoshop，简称“PS\"，是一个由Adobe Systems开发和发行的图像处
理软件.Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图工具,可以更有效的进行图片编辑工作。
在网站前端开发过程中需要把图片用Photoshop处理成加载到网站页面
的图片,用Photoshop 制作矢量图形用作网站页面的修饰按钮。
1.3 前端开发相关技术
1.3.1 Java script 简介
Java script的出现，它可以使得信息和用户之间不仅只是一种显示和浏
览的关系,而是实现了一种实时的，动态的，可交互式的表达能力。从而基于CGI静态的HTML页面将被可提供动态实时信息，并对客户操作进行反应的Web页面的取代。Java script脚本正是满足这种需求而产生的语言.它深受广泛用户的喜爱和欢迎。它是众多脚本语言中较为优秀的一种，它与WWW的结合有效地实现了网络计算和网络计算机的蓝图。无疑Java家族将占领Internet网络的主导地位。因此,尽快掌握java script脚本语言编程方法是我国广大用户日益关心的问题。
1.3。2 Java script 基本特点
（1） 基于对象的语言
java script是一种基于对象的语言,同时也可以看作一种面向对象的。
这意味着它能运用自己已经创建的对象.因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
（2) 简单性
10
Web前端页面设计
java script的简单性主要体现在：首先它是一种基于Java基本语句和
控制流之上的简单而紧凑的设计， 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型,并未使用严格的数据类型。
(3） 安全性
java script是一种安全性语言,它不允许访问本地的硬盘，并不能将数
据存入到服务器上,不允许对网络文档进行修改和删除，只能通过浏览器实现信 息浏览或动态交互。从而有效地防止数据的丢失。
(4) 动态性
java script是动态的，它可以直接对用户或客户输入做出响应，无须经
过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页（Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event).比如按下鼠标，移动窗口，选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 1.3.3 CSS简介
CSS （层叠样式表)是用来进行网页风格设计的，它简化并扩展了HTML
中的各种标记，使得各个标记的属性更具有一般性和通用性,大大提高了HTML开发的效率.在制作网页时采用CSS技术，可以有效地对页面的布局，字体，颜色,背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
什么是CSS?
CSS中，Cascading是“层叠”的意思,也就是说在同一个Web文档中可
以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后显示时被采用。从样式表插入的形式看可以分为3种. （1) 内联式样式表; （2） 嵌入式样式表； (3） 外部式样式表；
CSS的特点
CSS是用来扩展HTML的,而不是用来替换HTML的,也就是说CSS不能脱离
HTML,它只是一项辅助工具。除了可扩展HTML的样式设定外，CSS 使得网页的设
11
Web前端页面设计
计与维护更加高效,这主要表现在以下几个方面：减少图形文件的使用,集中管理样式信息，设定共享样式,将样式分类使用。 1。3.4 JQuery
JQuery［9］是继prototype之后又一个优秀的Javascript框架。其宗旨是——
WRITE
LESS，DO MORE，写更少的代码，做更多的事情。它是轻量级的js库(压
缩后只有21k）,这是其它的js库所不及的,
它兼容CSS3，还兼容各种浏览器 （IE 6。0+， FF 1。5+， Safari 2。
0+， Opera 9。0+)。
JQuery是一个快速的,简洁的JavaScript库使用户能更方便地处理HTML
documents，events，实现动画效果。
jQuery其模块化的使用方式使开发者可以很轻松的开发出功能强大的网页
特效。本文主要论述了如何在Web开发中使用jQuery技术，丰富网站的交互性和用户体验性。
jQuery是一套Javascrip脚本库。”Javascript轻量级脚本库”系列文
章。 Javascript脚本库类似于。NET的类库， 这些工具方法或对象方法封装在类库中，方便用户使用。
注意jQuery是脚本库， 而不是脚本框架.\"库”不等于”框架\"， 比如
\"System程序集\"是类库,而\"ASP 。NET MVC”是框架。 jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事。
脚本库能够帮助完成编码逻辑，实现业务功能。使用jQuery将极大的提高
编写javascript代码的效率，让写出来的代码更加优雅,更加健壮。jQuery有如下特点：
(1) 提供了强大的功能函数
使用这些功能函数，能够帮助我们快速完成各种功能，而且会让我们的代
12
Web前端页面设计
码异常简洁。
（2) 解决浏览器兼容性问题
javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦，常常
一个页面在IE9，Firefox下运行正常，在IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情。有了jQuery我们将从这个噩梦中醒来, 比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的,从前要根据event获取事件触发者，在IE下是event。srcElements 而ff等标准浏览器下下是event。target。 jQuery则通过统一event对象，让我们可以在所有浏览器中使用event。target获取事件对象。
（3) 实现丰富的UI
jQuery可以实现比如渐变弹出，图层移动等动画效果，让我们获得更好的
用户体验。单以渐变效果为例，从前我自己写了一个可以兼容IE和ff的渐变动画，使用大量javascript代码实现，费心费力不说，写完后没有太多帮助过一端时间就忘记了。 再开发类似的功能还要再次费心费力. 如今使用jQuery就可以帮助我们快速完成此类应用。
（4） 纠正错误的脚本知识
大部分开发人员对于javascript存在错误的认识。比如在页面中编写加载
时即执行的操作DOM的语句，在HTML元素或者document对象上直接添加\"onclick\"属性，不知道onclick其实是一个匿名函数等等.拥有这些错误脚本知识的技术人员也能完成所有的开发工作,但是这样的程序是不健壮的。比如”在页面中编写加载时即执行的操作DOM的语句”，当页面代码很小用户加载很快时没有问题，当页面加载稍慢时就会出现浏览器\"终止操作\"的错误。jQuery提供了很多简便的方法帮助我们解决这些问题， 一旦使用jQuery你就将纠正这些错误的知识-—因为我们都是用标准的正确的jQuery脚本编写方法!
1.4 本章小结
本章介绍了开发数字媒体技术系网站前端所需要的开发工具，同时讲述了相关的前端开发技术比如:Java script ，CSS ,jqurey等。以便以后的开发过中能
13
Web前端页面设计
够对这些开发工具盒技术有深刻的理解
第2章 前端布局分析与设计
2。1 前端总体开发流程及设计
前端设计Web前端开发技术是一个先易后难的过程主要包括三个要
素:HTML,CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化,SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识,
包括代码的可维护性，组件的易用性,分层语义模板和浏览器分级支持等.
2。1。1 分层开发
在数字媒体技术系网站概要确定后就需要进行分层开发的划分，根据项
目内容的不同,划分工作。大致分为,总体结构搭建，模块制作，页面制作,底层JS搭建，JS交互效果，内部测试,代码优化。如图2-1所示：
这样做的好处是能根据项目的不同，划分出不同的功能模块，合理的安
排时间，在有限的时间内做出很多模块和功能。降低开发成本，提高开发率.
总结结构搭建
模块制作 页面制作
分层开发
底层JS搭建 JS交互效果 内部测试 代码优化
图2-1 分层开发图
14
Web前端页面设计
2.1。2 代码编写
前期工作准备好后，就开始进入代码编写阶端，我们采用LSM方式进
行，
大致流程为总规划和设计草稿完成后，就进行前期的前端开发（搭建大
致的HTML结构），然后设计出完设计稿后再进行页面样式的完善，最后完成正式的页面后交给开发，嵌套程序。
这样做的好处不仅能有效的提高开发效率，实现逐层开发，让前端提前
介入，减少整体消耗的时间，确保产品有更多的时间修改和完善。
确定了流程后还需要对产品原型进行分析，拆分，把复用性高的部分找 出来制作成代码模块,方便以后的套用。确认二，三级页面的风格搭建统
一框架。
前端设计样式确定以后，就进行通用模块样式的设计（包括按钮，分
页，默认字体颜色,连接颜色等），完成后并提交给前端，统一的搭建。
在代码的编写过程中，最重要的是标准和规范的执行遵守，在编写HTML
时候充分发挥想象尽可能的满足后期样式表现的需要 。如图2-2所示:
PRD prototype 前端制作(HTML)
页面设计 前端制作(样式完善)
提交开发
代码编写
15
Web前端页面设计
图 2—2 编写代码流程图
代码编写过程中让前端提前进入开发流程中来,在样式属性后就进行HTML
结构的编写，页面设计完成后,在进行样式表的开发，这样不仅能节省很多的开发时间,提高开发效率，能在前端对全局页面的把控。在此同时也强调规范和模块化的重要性，正所谓无规矩不成方圆,这样能便于后期维护，减少维护成本.而模块化,是敏捷开发所必需的，重要性在这里也不做过多的描述。
2.1.3 内部测试与后续优化
前端的内部测试，指出页面与设计稿不匹配的地方,优化部分细节页面
样式。测试不仅能提高内测的质量，还能更早的发现问题并及时的修改,否则当页面提交开发以后再做修改是一件很麻烦的事情。当所有细节修改完毕后,
就需要进行制作文件的优化以确保代码的最优化，尽可能地压缩图片和
减少外部HTTP请求如图2-3所示：
设计参与测试
内部测试与后续优化
整体测试 后续代码优化
图2-3 内部测试流程图
16
Web前端页面设计
总结结构搭建
模块制作 页面制作
分层
底层JS搭建 JS交互效果 内部测试 代码优化
前 端 开 发 流 程
代码编写
PRD prototype 前端制作(HTML)
页面设计 前端制作(样式完善)
提交开发
设计参与测试
内部测试与后续优化
整体测试 后续代码优化
图2—4 前端开发流程图
这套流程制定出来就一直要求所有前端设计必须严格按照流程执行，也经过了很长时间的磨合跟改进。虽然不是很完美，但是很适合我们现在开发的需要，好处也是显而易见的，遵循并使用它对我们的发开有很大的帮助,能更好的应对高强度，高质量的开发需要。代码更可控,开发效率更高。
17
Web前端页面设计
2.2 前端UI设计
2.2。1 模块分布
UI设计这是设计中最重要的一点，也可以发挥出更多创意的设计想法；
其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。下面是以任由设计师发挥，不是这样死板,要运用层次感的原理去设计 2.2。2 颜色配置
产生丰富色彩的三原色是红，绿，蓝，也就是RGB，十六进制是00 00
00， 例如经常写的red,color：＃FF0000； 缩写color:#F00；color：gray(#808080）；是比较深的灰色。所谓邻近色,就是在色带上相邻近的颜色，例如绿色和蓝色,红色和黄色就互为邻近色.采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一.我们网站上用的色彩系是属于灰白色系这个选择符合网站的整体风格,不可能把网站设计成五颜六色,因为是学院网站所以要体现一种淡雅，自然的色彩风格。背景色一般采用素淡清雅的色彩,避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些.首页的顶端使用灰色标题图片下面用全景图这两个部分过度的很自然。 在文字部分用黑色文字当鼠标移动到相关文字上面时文字颜色变成红色。不同的文字颜色会产生不同的效果，这能给浏览者一种层次感，方便与阅读。违纪一点禁止大面积使用白色文字,特别是较深的背景下，禁止大面积使用加粗文字如图2—7所示:
图 2—7 字体颜色变换
18
Web前端页面设计
2.2。3 CSS元素
CSS块元素（block） 总是另起一行开始;高度，行高以及顶，底边距都
可控制 常用的有：div p table h1 ul dl 等等。 内联元素(inline）和其它元素都在一行上；高度，行高以及顶，底边距不可改变；常用的有：a strong font img input span small label等等如图2—8所示：
Display： inline—block将对象呈递为内联对象，但是对象的内容作为
块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格.但对于这个属性不是所有浏览器都识别。
图 2—8 CSS浮动
CSS间距 相应的设置大小,行高，首行缩进，间距(padding，margin)内
边距padding：元素的内边距在边框和内容区之间。padding:10px 5px 15px 20px;上 10px右 5px下 15px左 20pxpadding：10px 5px 15px； 上右左下padding：10px 15px；上右下左
19
Web前端页面设计
这个属性是无法居中的，如图所示2-9所示：
图 2-9 元素边框调整
2.3 交互设计与UI
由于视觉设计本身是一种比较主观的创作性工作，那些已经被
制定好的视觉结构常常因设计师的“审美需要”而被剥离，切割。
这种情况下,交互设计尤为重要，既不能失去UI设计的特
性，又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术如图2—10，2-11所示：
20
Web前端页面设计
图 2-10 导航栏
图 2-11 咨询中心
2。4 点，线，面的运用
先进开发思想和良好设计模式的前端模块化技术正逐渐成熟14.
根据网站前端模块化的不同开发思想，详细分析了目前常见的三种模
21
Web前端页面设计
块化开发策略，阐述了每种开发策略的具体实现方法,常见的框架与工具存在的问题及优缺点，并提出了完善前端模块化开发策略的一些方法。在网页设计中同样离不开平面设计中最基本的点，线,面的运用。
2。4。1 点的运用
在内容繁杂的网页上为了可以让浏览者更轻松的找到自己想要的信息，
点的引导作用必不可少 如图2—12所示：
图 2-12 点的应用
2.4.2 线的运用
线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花如图2
—13：
图 2—13 线的应用
22
Web前端页面设计
2。5 网站结构布局及设计
2.5。1 网站首页结构
实际内容占据网页的大部分空间,为50%~80％,导航部分不超过20%。颜色的选择以
青白色为主，没有使用太多的颜色来修饰某个对象，此外，正文和背景色的对比度较大,一般字色为默认的黑色，并且用了不同的背景色条区分正文区与其他功能区。为了提高网页的可读性,标题区，标题行和正文区使用了不同大小的字体，正文使用的是静止的文字,且字体足够大,以便于阅读［15]。
数字媒体技术系网站主要用来进行教学信息的发布与显示。作为一个网站,应该由一
些相关及相对的模块整合而成。本网站系统主要包括以下几个主要页面及几个大的
模块下又细分为几个的功能模块。
制作前台页面模块，包括主页及各个子页面，建立各个页面与数据库中相关数据链
23
Web前端页面设计
接，实现前台通过调用数据库把后台数据在前台显示和更新。整体网站遵循数字媒体技术系院校类网站的设计思路，拥有完善的功能,风格要求简洁大方不单调。各个子页面都可正常返回主页以及正确连接到各个子页面。功能要求使用简单全面，容易操作。
由上面的分析，网站前端的结构设计成。如下图2-14所示:
图 2-14 网站整体结构图
2。5。2 主题鲜明，富有特色
在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的
整体风格和特色做出定位,规划网站的组织结构。 要做到主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些LOGO[16]标志应充分加以利用.调动一切手段充分表现网站的个性和情趣，突出个性，这样能够办才出网站的特色如图2—15所示：
图 2-15 网站标题LOGO
24
Web前端页面设计
2。5.3 版式编排布局合理性
图 2—16 网站版式排版图
网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计不等同于
平面设计，但它们有许多相近之处，应充分加以利用和借鉴。
站点设计简单有序，主次关系分明，将零乱页面的组织过程，混杂的内
容,依整体的布局的需要进行分组归纳，经过进行具有内在联系的组织排列，反复推敲文字,图形与空间的关系，使浏览者有一个流畅的视觉体验，如图3—16
25
Web前端页面设计
所示:
图中的A区域是数字媒体技术系网站的大logo以及网站名称，能展现网
站的主题.访问者第一眼就能看的出来网站的类别等。
B区域是网站的导航栏，导航的颜色基本上是青白色,能展现网站的大体 内容。导航栏 跟顶端logo的颜色基本上一直用户浏览网页时不会产生
视觉疲劳。导航栏中每个导航按钮的设计也是符合美观要求。大方,大气，自然是设计导航栏的重要基础。
C区域 是首页中的大图片,是浙江理工大学的全景图片，图片清晰拍摄角
度广,色彩调整完美.现在正流行全景图片大大小小网站上都会用到全景图片.使用全景图给人一种舒服的视觉感受.能够提升网站的美观程度。
D区域是教务信息区. 发表各种有关教务类的信息。区域 师资力量介
绍，介绍老师及附上图片。
E 区网站最新动态区域。 最近在系发生的最新鲜的新闻,消息等内容都
在这里按时间循序显示.
F区域 中间区域的图片,为什么在网页中间放置图片呢？
是因为我们考虑到如果一个网站文字内容区域特别多，总体结构看起来
很乱没有主次层次的体现。让读者看起来无从下手的感觉。而且文字内容太多容易引起用户的反感.插入中间的图片就好比中间挖了一条河一样既能解决网站过于枯燥，也提升网站的美观度。
H区域 成果展示。
J区域 底部logo 整个网站的底端。能起到调节整个网站的内容平衡.让
网站设计的更加完美.
2.6 网站前台页面设计
26
Web前端页面设计
数字媒体技术系网站主要包括:系内概况，系内新闻，教务信息，专业介
绍，选题系统,教学研究，科研创作等7个子页面。制作过程如下： 2。6.1 首页
网站制作过程：首先利用Photoshop制作了网站的首页效果图,大小为
900px＊1004px。在制作网页的过程中首先是在Dreamweaver中用布局画出整个网站的大体布局格式，主要是分了三栏,各个栏目有可以分多个小栏目，并且通
过CSS样式来调表格以及图片，文字的位子。主页包括的内容主要有：网站的域名，导航条，LOGO，版权.导航条又包含系内概况,系内新闻，教务信息,专业介绍,选题系统，教学研究，科研创作。 2。6.2 系内概况
系内概况又分为3个2级菜单,本系概况，实验室介绍,师资介绍等.本系
概况当中介绍数字媒体技术系的近期情况如图2-17所示。并以最新动态的形式展现出来。师资介绍方面介绍任课老师的基本资料,还附上照片,并把这个模块显示在首页的G区域。实验室介绍当中点击实验室介绍会进入实验室介绍页面。具体介绍实验设计建设状况等.
27
Web前端页面设计
图2—17
2。6.3 系内新闻
系内新闻分成3个2级菜单，行业资讯，院系动态,系内新闻.制作过程
中采用的制作方法和调用的模块内容跟上一个差不多。可是连接不同的数据表所体现的内容不同。
2.7 本章小结
本章主要介绍了数字媒体技术系网站的具体布局，具体结构.也说明了设
计前端的工作流程，还讲述了界面UI设计，交互设计中的一些理理念设计思想，并用图片的形式展现了设计以后的效果图。
第3章 主要功能的实现
3.1 界面设计
设置公开地联系方式；设置网站整体信息与用户为一体；设置完善地个
性化地会员管理与交互系统。
28
Web前端页面设计
完善的网站内容，网站内容下载系统.网站的整体颜色：灰白色为导航颜
色；主体颜色：黑色色；字体：宋体;行距：150％。
网站统一顶部为导航条 站标，系内概况,系内新闻，教务信息，专业介
绍，选题系统,教学研究，科研创作 。
网站上中部：网站图片结合;位置导航。
网站中部：网站信息;站点数据；网站导航条；图文信息。 网站底部：
网站/版面制作；版权信息。
3.2 具体设计文档
内容和功能设计 这个校园网站主要实现新闻，信息等功能,目标用户主
要是Internet的在校学生。先明确这个校园网站提供的主要功能:
(1) 管理员登录系统:管理网站内容,新闻动态等
(2） 网上教学系统：提供给学生一些必要的电子书供下载 （3) 教学科研专区： 提供学院教师在个方面的成果及新闻的功能 （4） 新闻公告专区：提供有关学院的公告通知，计算机方面的最新资
讯。
3。3 前台新闻文摘显示
可以根据网站的需要，进行各种方式的插入，自动更新。如显示栏目导
航，显示某栏目的最新N条新闻等。 使用管理系统制作动态网页时，可在需要的地方插入相应的代码，即可以多种形式显示新闻 文章的栏目或内容。例如：
一级栏目列表，二级栏目列表，栏目导航列表,栏目的最新新闻(文章）
显示条数，某一栏目的热门文章可任意调整。该系统也可经后继开发，使之生成JS代码，在一个主机上维护新闻文章，在其他静态网页中插入代码后显示相应的新闻文章。
3。3.1 网站装饰风格
29
Web前端页面设计
采用了灰白色为主导航颜色，首页中运用最新更新图片，以及文字交错
排版，使整个网站看上去符合跳动的风格。 3.3。2 网站的链接结构
校园网站的主要链接关系如下：
学院首页,系内概况，系内新闻，教务信息，专业介绍，选题系统，教学
研究，科研创作，管理员登陆页面等.
3。4 可视化设计
网站可视化设计的主要目的是提供给用户一个关于网站的信息展示方
案，一个良好有效的网站可视化设计能给用户留下深刻的印象,使得用户能够自然,友好的浏览Web站点所提供的信息，也是网站设计中重要的一环。
可视化设计最重要的是确定网站的页面布局。然后设计网页的表现框
架，建立页面模型。
3.5 具体实现技术
3。5。1 CSS在”数字媒体技术系网站\"中的应用实例
在数字媒体技术系网站中的页面，增加了以下的定义，使页面有特殊的
显示效果。
数字媒体技术系网站中CSS样式表使用的部分代码: ＃top ｛ width: 100％； height: 103px; background—color： green;
background-image: url(Image/top。jpg）; background-repeat: no—repeat; }
在上面的样式表中定义了网页头部的背景图片和颜色,以避免因网页浏览
器的设置改变而引起的网页头部的背景图片和颜色变化，影响页面浏览者的信息浏览; top这部分是对网页背景颜色和背景图片的设置。
30
Web前端页面设计
3.5.2 应用JavaScript设计网页
是一种基于对象（Object)和事件驱动（Event Driven)并具有安全性能
的脚本语言。使用它的目的是与HTML超文本标记语言,Java 脚本语言(Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等.它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷[17]。
JavaScript的出现使得信息和用户之间不仅只是一种显示和浏览的关
系，而是实现了一种实时的,动态的,可交式的表达能力［18］。从而基于CGI静态的HTML页面将被可提供动态实时信息，并对客户操作进行反应的Web页面的取代。JavaScript脚本正是满足这种需求而产生的语言.它深受广泛用户的喜爱。它是众多脚本语言中较为优秀的一种，与WWW的结合有效地实现了网络计算和网络计算机的蓝图.
在网站制作过程中使用了下面一段JavaScript照片切换特效代码片段：
// cancel close timer mcancelclosetime()； // close old layer
if（ddmenuitem） ddmenuitem.style。visibility = 'hidden’; // get new layer and show it
ddmenuitem = document.getElementById（id）； ddmenuitem。
style.visibility = ’visible’; }
// close showed layer function mclose（） ｛
if(ddmenuitem） ddmenuitem。style.visibility = ’hidden’； ｝ // go close timer function mclosetime(） {
closetimer = window.setTimeout（mclose， timeout）; ｝ // cancel close timer function mcancelclosetime（） { if（closetimer） ｛
31
Web前端页面设计
Window。clearTimeout（closetimer）; closetimer = null； ｝ ｝ // close layer when click—out Document.onclick = mclose; //
—-〉 $(function(） ｛
＄（\"#webwidget_slideshow_html5_simple\"）。
webwidget_slideshow_html5_simple
（slideshow_transition_effect:’Mosaic,Wipe_from_horizontal_blind,Wipe_from_vertical_blind,
Wipe_from_vertical_center，
Wipe_from_horizontal_center,Wipe_to_horizontal_center，
Wipe_to_vertical_center,Wipe_from_bottom_to_top，Wipe_from_top_to_bottom， Wipe_from_right_to_left',
slideshow_time_interval: '2000', slideshow_window_width: '350’, slideshow_window_height: '370s'，
slideshow_background_color: '＃FFF’， slideshow_border： ’＃999 sol-id 2px'， text_effect： 'text_fade’ ｝）； ｝）;
此代码主要是实现前段图片动态特效的JS代码。照片动态切换效果,可
以直接涉及到网站是否有活力，也是整个网站集聚吸引力的地方,所以在使用JS调用的时候一般不在同一时间使用多次，以减轻服务器和数据库读写的负担.
4.6 本章小结
本章具体介绍了网站前端的实现,在动画效果的实现中给出了具体的代码.
说明了在页面设计过程的具体实现，说明了网站修饰风格，可视化的重要概念。也是整个网站集聚吸引力的地方,所以在使用JS调用的时候一般不在同一时间使用多次，以提高服务器和数据库读写的效率
32
Web前端页面设计
第4章 总结
4。1 总结
创建的数字媒体技术系的专业网站,网站前端设计最基本的三个技能：
HTML,CSS，JavaScript,PS 矢量图像编辑技术。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。
本网站的建立的作用具有超时空特性，不仅能让本地区的人们了解学
院，更可让世界了解本专业。网站巨大的教育资源，网站是实现教育资源分配的桥梁，它使每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提高教学效率。
JSP虽然提供了功能强大的Web应用程序开发环境，但和其它技术一样，
它
也存在着某些缺点。但JSP毕竟是软件霸主微软精心设计的一个宠儿,人们不得不慢慢向它靠拢，现在越来越多的Web服务器大多数都用JSP.以信息网站为核心的Web信息系统建设方兴未艾，运用新技术进行创新的应用开发，提高网络系统应用成效将是一个不竭的课题。
本文中介绍了JSP，JS,CSS，JQuery以及前端布局的制作做法，详细的
说明了数字媒体技术系网站前端的全部制作流程，以及网站中的主要功能。
网站中还存在一些不足之处，如网站的留言系统没建立等等。这些问题
和功能有待于进一步学习和添加。
33
Web前端页面设计
致 谢
本文是在xx老师悉心指导和帮助下完成的。在毕业设计学习期间,导师
在毕业设计指导上尽心尽责、精益求精。导师的严谨治学的态度、勤勉进取的精神、渊博丰富的学识，无私忘我的工作作风，宽厚的为人都给我留下了非常深刻的印象，使我终身受益。在此,再一次向舒挺老师表示深深的谢意。
在2年的学习生涯中，是每一位优秀的任课老师无私传授的知识使我们
成长,是班主任和学院的各位老师给予的无私的关怀和指导使我在为人处事方面不断成熟，也借此机会向他们表示诚挚的感谢,感谢老师们给予我们的支持、帮助和关怀关心。
同时,我还要感谢陪我一起走过2年生活的同学们.感谢他们2年来,在学
习和工作上的无私帮助，使我能够顺利踏上社会。
最后，我要感谢我的家人。无论我遇到多少困难险阻，他们总是默默地
在背后支持我，鼓励我.立誓走上社会以后做有用之才,可塑之才，无愧于自己的老师，无愧于学院的领导、无愧于自己的父母，为母校交上一份满意的答卷。
34
因篇幅问题不能全部显示，请点此查看更多更全内容