网站前端设计 毕业论文

本科毕业设计（论文）

题 目: 学 院：专业班级：姓 名：指导教师：系 主 任：

数字媒体技术系网站前端设计与开发 学 号：

学院院长： 二O一三年月日

毕业设计 (论文)诚信声明

我谨在此保证：本人所写的毕业设计(论文)，凡引用他人的研究成果均已在参考文献或注释中列出。设计(论文)主体均由本人独立完成，没有抄袭、剽窃他人已经发表或未发表的研究成果行为。如出现以上违反知识产权的情况，本人愿意承担相应的责任。

声明人(签名)：

年 月 日

摘 要

21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且融入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站已经势在必行。

本论文主要围绕数字媒体技术专业的门户网站为开发主题，最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。

分析并解决实现中的若干技术问题；介绍了个性化页面的背景及jsp + javascript + mysql系统的一般原理；阐述整个个性化页面生成系统的系统结构及工作原理；分析了系统实现中的特殊性，难点和重点；设计实现用户注册，用户登录，用户管理等jsp页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进行测试并分析结果。

该网站有效地实现用户通过JSP页面访问来进行用户注册，登陆，并对网站内容进行有效的管理，提升了后期添加和删除信息的有效性，具有一定的应用价值

关键字：JSP；用户登录；javascript；网站美化；交互设计。

ABSTRACT

The twenty-first Century is the rapid development of information age, network as the world's most popular and most convenient media are increasingly accepted by people. Along with the information development, website functions beyond the traditional information acquisition, communication which can better reflect the organization style， properties. So universities establish the departments, professional appearance, easy maintenance and management of the site has been imperative.

This thesis mainly focuses on digital media technology major portal for the development of the theme, the three most basic and necessary skills. Development of the front, in the layout of the page, HTML will define the elements, positioning CSS to display elements, and then through the JavaScript to achieve the corresponding effect and interaction. Although the surface looks like these are very simple, but it needs to grasp things never. In the development, the need for these concepts clear, understand, so in the development process will be handy.

The main work done in this article is as follows:

(1) Introduces the background and general principle of JSP + Javascript + MySQL system personalized pages;

(2) Introduces the structure and working principle of the entire personalization page production system; analysis of the particularity, the difficulty and key system;

(3) The design and implementation of user registration, user login, user management and other JSP page.

(4) Analyze and solve some technical problems in implementation; (5) The establishment of a complete campus site, testing and analysis;

The site effectively achieve the user through the JSP page access to user registration, login, and carry on effective management to the website content, enhance the effectiveness of the late addition and deletion of information, has a certain application value.

Keywords：JSP ; User login; JavaScript; Website Landscaping; Interaction Design

目 录

摘 要 ABSTRACT

第1章 绪论 ........................................................... 1

1.1 选题背景及意义 ............................................................................................................ 1 1.2 国内外高校网站建设状况 .............................................................................................. 3 1.3 研究内容和拟解决的问题 .............................................................................................. 5 1.4 本章小结 ...................................................................................................................... 6

第2章 前端开发工具及相关技术 ......................................... 7

2.1 前端开发环境 ............................................................................................................... 7 2.2 前端开发工具 ............................................................................................................... 7 2.3 前端开发相关技术 ........................................................................................................ 8 2.3.1 Java script 简介 ....................................................................................................... 8 2.3.2 Java script 基本特点 ................................................................................................ 8 2.3.3 CSS 简介 ............................................................................................................... 9 2.3.4 JQuery .................................................................................................................. 9 2.4 本章小结 .................................................................................................................... 11

第3章 前端布局分析与设计 ............................................ 12

3.1 前端总体开发流程及设计 ............................................................................................ 12 3.1.1 分层开发 .............................................................................................................. 12 3.1.2 代码编写 .............................................................................................................. 12 3.1.3 内部测试与后续优化 ............................................................................................ 13 3.2 前端UI设计 ............................................................................................................... 14 3.2.1 模块分布 .............................................................................................................. 14 3.2.2 颜色配置 .............................................................................................................. 15

I

3.2.3 CSS元素 .............................................................................................................. 16 3.3 交互设计与UI ............................................................................................................ 17 3.4 点，线，面的运用 ...................................................................................................... 18 3.4.1 点的运用 .............................................................................................................. 18 3.4.2 线的运用 .............................................................................................................. 19 3.5 网站结构布局及设计 ................................................................................................... 19 3.5.1 网站首页结构 ....................................................................................................... 19 3.5.2 主题鲜明，富有特色 ............................................................................................ 20 3.5.3 版式编排布局合理性 ............................................................................................ 21 3.6 网站前台页面设计 ...................................................................................................... 22 3.6.1 首页 ..................................................................................................................... 22 3.6.2 系内概况 .............................................................................................................. 23 3.6.3 系内新闻 .............................................................................................................. 23 3.7 本章小结 .................................................................................................................... 23

第4章 主要功能的实现 ................................................ 23

4.1 界面设计 .................................................................................................................... 23 4.2 具体设计文档 ............................................................................................................. 24 4.3 前台新闻文摘显示 ...................................................................................................... 24 4.3.1 网站装饰风格 ....................................................................................................... 24 4.3.2 网站的链接结构 ................................................................................................... 25 4.4 可视化设计 ................................................................................................................. 25 4.5 具体实现技术 ............................................................................................................. 25 4.5.1 CSS在\数字媒体技术系网站\中的应用实例 ........................................................... 25 4.5.2 应用JavaScript设计网页 ...................................................................................... 26 4.6 本章小结 .................................................................................................................... 28

II

第5章 总结 ......................................................... 29 参考文献 .............................................................. 30 致谢 .................................................................. 32

第1章 绪论

1.1 选题背景及意义

如今的互联网已经渗透到我们生活的每一个层面，网站的内容越来越丰富全面，以此来满足了各种不同需求的浏览者。网站的作用众所周知人们通过网站快速获取，发布和传递信息。

目前很多高校建立起了自己的网站这些网站的建立使得学校可以突破传统的媒体的限制在网络上开辟的属于自己的新天地。网络具有超时空性。网络超时空性是一种“一人对一人，一人对多人，多人对一人，多人对多人”的传播方式[1]。超时空性的形成正式由于在网络在时间层面，空间层面上的开放性带来的。网络的超时空性使得高校网站对学校本身和外界社会表现特定的功能，表现在网站有助于改变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长。网络具有的海量存储特性，网络能形成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。

高校网站的海量存储特性可以从横向和纵向两方面分析：横向看高校网站往往设置多个板块，分别放置相关内容。不同板块的信息相互独立，共同构成网站的内容。 纵向看，同一个板块的内部，内容并不是固定不变的，而是不断添加连续更新的。大量的信息使得高校网站成为一个巨大的数据库。

交互性体现在高校网站通过设置留言板，论坛，发挥网络交互的功能，在老师和学生之间建立起了交流渠道。

高校网站正是以这些特点为基础，发挥了自己本身的资源整合，信息传播，多方交流互动等方面的独特功能，成为一座沟通桥梁。

很多高校网站内容多姿多彩，板块，内容争妍斗艳。但不外乎以一下几部分：学校介绍，新闻发布，招生信息，就业信息，师资力量，科研成果，机构设置，教学素材等。高校网站的建立和维护需要大量的物力和人力，为何要投入去建网站上？是因为如上所述的高校网站有的独特特性使得建设高校网站势在必行。

这些都促进了各个机构组织的信息化建设，随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站。

1

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

建立本系网站发挥的作用如下：

(1) 数字媒体技术系网站是数字媒体专业的“商标”。在这个高度信息化的社会里，建立数字媒体技术系自己的网站是最直接的宣传手端。网站的超时空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业。

(2) 数字媒体技术系网站巨大的教育资源，网站是实现教育资源分配的桥梁，它使每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提高教学效率。

(3) 数字媒体技术系网站能提供教学互动的全新方式，网站使得教师与教师，教师与学生，学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学院同处一室，共同讨论，共同提高。地理上的界限在这里模糊和消失了，数字媒体技术系网站是真正没有围墙的系网站。

(4) 数字媒体技术系网站能够提供个性化的学习平台，不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。数字媒体技术系网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。

(5) 数字媒体技术系网站是最佳的教学研究室，数字媒体技术系网站与教育类专门网站的有效链接，给本系教学研究带来了一片新天地，各种优秀教案，专家论坛，网络观摩课，各科素材，多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本，提高效率。

2

设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术如图3-10，3-11所示：

图 3-10 导航栏

图 3-11 咨询中心

3.4 点，线，面的运用

先进开发思想和良好设计模式的前端模块化技术正逐渐成熟14。根据网站前端模块化的不同开发思想，详细分析了目前常见的三种模块化开发策略，阐述了每种开发策略的具体实现方法，常见的框架与工具存在的问题及优缺点，并提出了完善前端模块化开发策略的一些方法。在网页设计中同样离不开平面设计中最基本的点，线，面的运用。 3.4.1 点的运用

在内容繁杂的网页上为了可以让浏览者更轻松的找到自己想要的信息，点的引导作用必不可少 如图3-12所示：

18

图 3-12 点的应用

3.4.2 线的运用

线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花如图3-13：

图 3-13 线的应用

3.5 网站结构布局及设计

3.5.1 网站首页结构

实际内容占据网页的大部分空间，为50%～80%，导航部分不超过20%。颜色的选择以青白色为主，没有使用太多的颜色来修饰某个对象，此外，正文和背景色的对比度较大，一般字色为默认的黑色，并且用了不同的背景色条区分正文区与其他功能区。为了提高网页的可读性，标题区，标题行和正文区使用了不同大小的

19

字体，正文使用的是静止的文字，且字体足够大，以便于阅读[15]。

数字媒体技术系网站主要用来进行教学信息的发布与显示。作为一个网站，应该由一些相关及相对独立的模块整合而成。本网站系统主要包括以下几个主要页面及几个大的模块，每个页面包含丰富的内容，每个大的模块下又细分为几个的功能模块。

制作前台页面模块，包括主页及各个子页面，建立各个页面与数据库中相关数据链接，实现前台通过调用数据库把后台数据在前台显示和更新。整体网站遵循数字媒体技术系院校类网站的设计思路，拥有完善的功能，风格要求简洁大方不单调。各个子页面都可正常返回主页以及正确连接到各个子页面。功能要求使用简单全面，容易操作。

由上面的分析，网站前端的结构设计成。如下图3-14所示：

图 3-14 网站整体结构图

3.5.2 主题鲜明，富有特色

在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色做出定位，规划网站的组织结构。

要做到主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些LOGO[16]标志应充分加以利用。调动一切手段充分表现网站的个性和情趣，突出个性，这样才能够办出网站的特色如图3-15所示：

20

图 3-15 网站标题LOGO

3.5.3 版式编排布局合理性

图 3-16 网站版式排版图

网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。

站点设计简单有序，主次关系分明，将零乱页面的组织过程，混杂的内容，依整体的布局的需要进行分组归纳，经过进行具有内在联系的组织排列，反复推敲文字，图形与空间的关系，使浏览者有一个流畅的视觉体验，如图3-16所示：

图中的A区域是数字媒体技术系网站的大logo以及网站名称，能展现网站的主题。访问者第一眼就能看的出来网站的类别等。

B区域是网站的导航栏，导航的颜色基本上是青白色，能展现网站的大体内容。导航栏 跟顶端logo的颜色基本上一直用户浏览网页时不会产生视觉疲劳。导航栏中每个导航按钮的设计也是符合美观要求。大方，大气，自然是设计导航栏的重要基础。

C区域 是首页中的大图片，是浙江理工大学的全景图片，图片清晰拍摄角度广，色彩调整完美。现在正流行全景图片大大小小网站上都会用到全景图片。使用全景

21

图给人一种舒服的视觉感受。能够提升网站的美观程度。

D区域是教务信息区。 发表各种有关教务类的信息

E 区网站最新动态区域。 最近在系发生的最新鲜的新闻，消息等内容都在这里按时间循序显示。

F区域 中间区域的图片，为什么在网页中间放置图片呢？

是因为我们考虑到如果一个网站文字内容区域特别多，总体结构看起来很乱没有主次层次的体现。让读者看起来无从下手的感觉。而且文字内容太多容易引起用户的反感。插入中间的图片就好比中间挖了一条河一样既能解决网站过于枯燥，也提升网站的美观度。

D区域 师资力量介绍，介绍老师及附上图片。 H区域 成果展示

J区域 底部logo 整个网站的底端。能起到调节整个网站的内容平衡。让网站设计的更加完美。

3.6 网站前台页面设计

数字媒体技术系网站主要包括：系内概况，系内新闻，教务信息，专业介绍，选题系统，教学研究，科研创作等7个子页面。制作过程如下： 3.6.1 首页

网站制作过程：首先利用Photoshop制作了网站的首页效果图，大小为900px*1004px。在制作网页的过程中首先是在Dreamweaver中用布局画出整个网站的大体布局格式，主要是分了三栏，各个栏目有可以分多个小栏目，并且通过CSS样式来调表格以及图片，文字的位子。主页包括的内容主要有：网站的域名，导航条，LOGO，版权。导航条又包含系内概况，系内新闻，教务信息，专业介绍，选题系统，教学研究，科研创作。

22

此代码主要是实现前段图片动态特效的JS代码。照片动态切换效果，可以直接涉及到网站是否有活力，也是整个网站集聚吸引力的地方，所以在使用JS调用的时候一般不在同一时间使用多次，以减轻服务器和数据库读写的负担。

4.6 本章小结

本章具体介绍了网站前端的实现，在动画效果的实现中给出了具体的代码。说明了在页面设计过程的具体实现，说明了网站修饰风格，可视化的重要概念。也是整个网站集聚吸引力的地方，所以在使用JS调用的时候一般不在同一时间使用多次，以提高服务器和数据库读写的效率。

28

第5章 总结

5.1 总结

创建的数字媒体技术系的专业网站，网站前端设计最基本的三个技能：HTML，CSS，JavaScript，PS 矢量图像编辑技术。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互[19]。

本网站的建立的作用具有超时空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业。网站巨大的教育资源，网站是实现教育资源分配的桥梁，它使每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提高教学效率。

JSP虽然提供了功能强大的Web应用程序开发环境,但和其它技术一样,它也存在着某些缺点。但JSP毕竟是软件霸主微软精心设计的一个宠儿,人们不得不慢慢向它靠拢，现在越来越多的Web服务器大多数都用JSP[20]。以信息网站为核心的Web信息系统建设方兴未艾，运用新技术进行创新的应用开发，提高网络系统应用成效将是一个不竭的课题。

本文中介绍了JSP，JS,CSS,JQuery以及前端布局的制作做法，详细的说明了数字媒体技术系网站前端的全部制作流程，以及网站中的主要功能。

网站中还存在一些不足之处，如网站的留言系统没建立等等。这些问题和功能有待于进一步学习和添加。

29

参考文献

[1] 李燕. 高校校园网站功能探讨[J]. 齐齐哈尔师范高等专科学校校报.2008年01期25(2): 9~11

[13] Jonathan Anderson, John McRee, Robb Wilson .The EffectiveUI Team[J] . Effective UI O'Reilly Media, Inc. 2010

[3] 李宝敏. 动态网站设计与开发应用教程[M] . 清华大学出版社. 2012.01 ,28(4): 91~94 [4] 孙更新, 宾晟, 宫生文. Java程序开发大全[M] 基于MyEclipse平台主流框架开发. 中国铁道出版社

[5] 黄军宝. 网站设计透过Dreamwear CS3学习HTML-DIV-CSS[J] . 科学出版社. 2008, 35(9): 81~97

[6] 贾素玲,王强. Javasqript 程序设计[M]. 清华大学出版社.2007, 15(4): 91~94 [7] 费东东. 挑战Java script&Ajax应用开发[J] . 机械工业出版社.2008, 7(5): 35~36

[8] 林小 . CSS那些事 掌握网络样式CSS样式布局[J] . 电子工业出版社.2009, 4(5): 11~14 [9] 单东飞, 张晓菲, 魏然. 锋利的JQuery[M] . 人民邮电出版社.2012 ,28(5): 91~94 [8] 林小 . CSS那些事 掌握网络样式CSS样式布局[J] . 电子工业出版社.2009, 4(5): 11~14 [11] Graffam, J. D. CSS for Print Designers[M] .NEW RIDERS PUBL . 201118(3):233~254 [12] William Harrel. HTML, CSS, and JavaScript Mobile Development For Dummies[J] . John Wiley .2011

[13] Jonathan Anderson, John McRee, Robb Wilson .The EffectiveUI Team[J] . Effective UI O'Reilly Media, Inc. 2010

[14] 张晓红. 网站前端模块化开发策略研究.计算机时代[M]. 2013

[15] William Harrel. HTML, CSS, and JavaScript Mobile Development For Dummies[J] . John Wiley .2011

30

[16] 李巍,杨仁敏. CI设计[J] . 重庆：西南师范大学出版社. 2006

[17] Joseph L, Weber. Java 2编程详解（Using Java 2）［M］. 电子工业出版社 [18] 赵增敏. JQuery全面提速[J]. 机械出版社 . 2010

[19] Dan Cederholm. Web Desigin[J] . Apangning Totuki hitay Harimilar . America 2008

[20] Nichlas C.Zakas . JavaScript Telecommunications Press . 2006

Advanced programming

31

[M]. People's Posts and

致 谢

本文是在xx老师悉心指导和帮助下完成的。在毕业设计学习期间，导师在毕业设计指导上尽心尽责、精益求精。导师的严谨治学的态度、勤勉进取的精神、渊博丰富的学识，无私忘我的工作作风，宽厚的为人都给我留下了非常深刻的印象，使我终身受益。在此，再一次向舒挺老师表示深深的谢意。

在四年的本科生涯中，是每一位优秀的任课老师无私传授的知识使我们成长，是班主任和学院的各位老师给予的无私的关怀和指导使我在为人处事方面不断成熟，也借此机会向他们表示诚挚的感谢，感谢老师们给予我们的支持、帮助和关怀关心。

同时，我还要感谢陪我一起走过4年大学生活的同学们。感谢他们4年来，在学习和工作上的无私帮助，使我能够顺利踏上社会。

最后，我要感谢我的家人。无论我遇到多少困难险阻，他们总是默默地在背后支持我，鼓励我。立誓走上社会以后做有用之才，可塑之才，无愧于自己的老师，无愧于学院的领导、无愧于自己的父母，为母校交上一份满意的答卷。

32

本文来源：https://www.bwwdw.com/article/opv6.html