下载文档第一篇：网站前端设计 毕业论文
本科毕业设计（论文）
题 目: 学 院：专业班级：姓 名：指导教师：系 主 任：
数字媒体技术系网站前端设计与开发 学 号：
学院院长： 二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]。超时空性的形成正式由于在网络在时间层面，空间层面上的开放性带来的。网络的超时空性使得高校网站对学校本身和外界社会表现特定的功能，表现在网站有助于改变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长。网络具有的海量存储特性，网络能形成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。
高校网站的海量存储特性可以从横向和纵向两方面分析：横向看高校网站往往设置多个板块，分别放置相关内容。不同板块的信息相互独立，共同构成网站的内容。纵向看，同一个板块的内部，内容并不是固定不变的，而是不断添加连续更新的。大量的信息使得高校网站成为一个巨大的数据库。
交互性体现在高校网站通过设置留言板，论坛，发挥网络交互的功能，在老师和学生之间建立起了交流渠道。
高校网站正是以这些特点为基础，发挥了自己本身的资源整合，信息传播，多方交流互动等方面的独特功能，成为一座沟通桥梁。
很多高校网站内容多姿多彩，板块，内容争妍斗艳。但不外乎以一下几部分：学校介绍，新闻发布，招生信息，就业信息，师资力量，科研成果，机构设置，教学素材等。高校网站的建立和维护需要大量的物力和人力，为何要投入去建网站上？是因为如上所述的高校网站有的独特特性使得建设高校网站势在必行。
这些都促进了各个机构组织的信息化建设，随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站。
我们要创建我们本专业的网站数字媒体技术系的专业网站，网站前端设计最基本的三个技能：HTML，CSS，JavaScript，PS 矢量图像编辑技术。这个是前端开发中最基本也是最 必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。
建立本系网站发挥的作用如下：
(1)数字媒体技术系网站是数字媒体专业的“商标”。在这个高度信息化的社会里，建立数字媒体技术系自己的网站是最直接的宣传手端。网站的超时空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业。
(2)数字媒体技术系网站巨大的教育资源，网站是实现教育资源分配的桥梁，它使每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提高教学效率。
(3)数字媒体技术系网站能提供教学互动的全新方式，网站使得教师与教师，教师与学生，学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学院同处一室，共同讨论，共同提高。地理上的界限在这里模糊和消失了，数字媒体技术系网站是真正没有围墙的系网站。
(4)数字媒体技术系网站能够提供个性化的学习的平台，不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。数字媒体技术系网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。
(5)数字媒体技术系网站是最佳的教学研究室，数字媒体技术系网站与教育类专门网站的有效链接，给本系教学研究带来了一片新天地，各种优秀教案，专家论坛，网络观摩课，各科素材，多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本，提高效率。
1.2 国内外高校网站建设状况
国外的专题院校网站的学习资源比较丰富，交互性和学习支持服务做得都比较好，但是活动组织形式比较单一。
英国的学习网站建设得比较完备，无论从资源建设方面，还是从学习支持服务等方面都做得较好，商业性比较强。
加拿大学习网站的网络学习导航做得比较形象，趣味性较强，分类明确，专题资源集中。
高校门户网站的访问量，一定程度上反映了各高校的信息化程度和水平。关于高校门户网站访问排名，有不少网站提供相关的服务。总体来说，国内的各排名口碑评价不一，而“访问流量监控”类的排名也会受到诸多因素干扰，不容易作为客观评价网站的依据。具体如下表1-1所示[2]：
表1-1中国高校网站综合排名表
排 名 中文名称 世界排名 网站信息量世界信息影响力世 数字资料档案数
排名
界排名
量世界排名
学术文章发表情况世界排名 2 清华大学 上海交通大学 77 101
439 41
282
162 238
3 北京大学 122 385 105 591 76 4 5 6 7 8 9 浙大 复旦大学 山东大学 哈工大 武汉大学 中科大 182 256 264 292 350 357 363
202 868 253 706 272 873 455
287 234 328 102 203 581 706
649 608 656 1797 1915 605 437
187 312 239 335 184 309 10 吉林大学
国外的高校网站部分国际知名大学如哈佛大学（http://www。harvard。edu/）排名第一，PRESENCE 网站信息量世界排名第6，IMPACT 网站信息影响力世界排名第1，OPENNESS 数字资料档案数量世界排名第34，EXCELLENCE 学术文章发表
情况世界排名第1；
麻省理工学院（http://www.mit.edu/）排名第2，PRESENCE 网站信息量世界排名第8，IMPACT 网站信息影响力世界排名第1，OPENNESS 数字资料档案数量世界排名第14，EXCELLENCE 学术文章发表情况世界排名第10；
耶鲁大学（http://www.yale.edu/）排名第16，PRESENCE 网站信息量世界排名第27，IMPACT 网站信息影响力世界排名第16，OPENNESS 数字资料档案数量世界排名第246，EXCELLENCE 学术文章发表情况世界排名第22；
剑桥大学（http://www.cam.ac.uk/）排名第20，PRESENCE 网站信息量世界排名第43，IMPACT 网站信息影响力世界排名第35，OPENNESS 数字资料档案数量世界排名第94，EXCELLENCE 学术文章发表情况世界排名第12；
牛津大学（http://www.ox.ac.uk/）排名第25，PRESENCE 网站信息量世界排名第109，IMPACT 网站信息影响力世界排名第37，OPENNESS 数字资料档案数量世界排名第64，EXCELLENCE 学术文章发表情况世界排名第13；
东京大学（http://www.u-tokyo.ac.jp/）排名第42，PRESENCE 网站信息量世界排名第96，IMPACT 网站信息影响力世界排名第103，OPENNESS 数字资料档案数量世界排名第52，EXCELLENCE 学术文章发表情况世界排名第20；
从网站建设情况来看，国内关于校园网站建设较多，虽然起步较国外晚，但是发展的速度很快，我国高校网站的建设还有很多不尽如人意的地方，其主要在于网站互动性的缺失，内容方面没有国外院校网站那么多，是因为国内采取的形式较国外的不同。在创新方面比较欠缺，交互性的形式少。问题主要体现在这几个方面：
(1)缺乏组织协调，各部门各自为政。由于网络内容建设工作几乎全部下放到各部门，长期以来基本上一直处于一种各自为政的状态。各部门的网页风格迥异，都有各自不同的做法，不能做到统一。这样做出来的网页形形色色，拼凑成一个个学院，处室网站，显得很不协调。有必要加强组织协调工作，详细规划，明确分工，制定出相应的标准，彻底摒弃网站建设中的随意性。
(2)内容单薄，更新滞后。内容单薄可以说是很大的硬伤。各部门名义上都有了自己的网站，但大多数部门网站能够提供浏览的内容非常有限，特别是深层次的内容严重缺乏。另外，网上内容严重滞后，更新速度慢。有些部门的网站，时隔一年半载，其网页界面和内容仍是老样子。
(3)重点失衡:重行政管理，轻教学科研。校园网最主要的功能应该是要为教学，科研服务。但有些校园网上的内容有关行政管理的偏多，而有关教学和科研的内容则相对较少。作为一个高校网站，这不能不说是重点失衡，本末倒置。
(4)整个网站结构，层次不够清晰，使用不便。目前某些校园网首页的栏目设计太过粗略，有些内容欠缺，部分栏目名称及内容归类不够准确，整个结构显得有些混乱，结构层次偏深，用户需经过多次点击才能看到想要的内容。
(5)部分网页制作粗糙，缺乏美感。高校网站，其页面应简洁明了，一方面不要过于呆板，另一方面也要避免过于花哨，做到实用与美观的有机结合。
(6)缺乏检索途径。
传播学领域“互动性”研究的理论，为检视当前我国高校网站之发展提供了一个可操作化的设计架构。“互动性”的内涵做进一步分析，对我国高校网站的建设做一浅探，以增强人们关于互联网传播机制的认知和理解，并推进我国高校网站的在“交互性”方面的建设。
1.3 研究内容和拟解决的问题
有多种方法会让一个网站的外观令人惊叹的。在创建时也有不同的设计趋势。由于网站是由他们的业务与其他很多人用来获取信息的途径，所以很重要的设计是很有吸引力的。长期面对一个设计不当的网站是一件比较痛苦的事情。一旦我们拥有了一个网站之后，我们会一定会看到它拥有专业的设计，它可以实现我们的目的。
(1)排版
创造性使用排版已被广泛的应用于网页设计排版中。这些好的设计不只是使用的标准字体，而加上其使用自定义的字体。它使网站更具有可读性和吸引力。创造性地使用这种类型的方式确实可以有效的使用户可以立即得到该网站的新消息，特别是使用的字体是独一无二的，颜色是比较突出的。
(2)图片的切换效果研究
大图的使用也是一种趋势。这些图像是网站增加吸引力的网。虽然，已被使用过，但是现今它仍然在使用，使用它更具有现代感。使用这种设计的，设计出的网站也是比较抢眼的，特别是如果你有一个好的图片选择，不只是图像的形式，它应该与其网站更好的搭配。
(3)单页布局的设计
可避免不必要的网页，通过一个比较单一的页面布局，这是更有效的一个网站，因为浏览者可以更专注于其内容。
(4)交互性
做一个完整的网站有几样任务要完成比如复杂的交互功能，网页动画特效，网页UI设计，后期维护，可扩展性等。
网站交互设计的用户的目的是增加网站的友好度，可用性和易用性，从而使用户能够简单，快速和有效地完成网站赋予或用户自身需要的服务，功能和目标。
交互设计包含的内容：
界面设计，界面不仅设计美术方面，还涉及提供给用户某些事的能力。导航设计，导航设计是提供给用户去某个地方的能力，是用户能看到的网站结构。
信息设计，信息设计就是通过网站传达给用户某些信息，用户可通过这些信息了解自己正在进行的某些事和应该如何进行某些事。
1.4 本章小结
本章阐述了开发数字媒体技术系网站的研究背景和意义。介绍了国外高校网站的发展现状对比了目前国内高校网站的现况了说明了建设数字媒体技术系网站建设的总体规划思想。最后对于本文课题的研究内容和拟定解决的几个关键问题进行了探讨。
第2章 前端开发工具及相关技术
2.1 前端开发环境
网站前端开发，即网页架构设计。主要是由与交互设计，视觉设计的配合，根据效果图来规划页面布局，合理部署页面代码层次，挖掘用户体验效果。用Dreamweare，CSS，JS等布局网页内容，制作静态页面，这些页面要兼容各主流浏览器，并配合程序完成静态页面与后台程序的整合工作。另外，要对网站做一些相应的更新，维护及优化。整个网站开发的流程在后面有具体介绍。前端开发在整个过程中占据着不可替代的地位，其它几个环节主要给予相关的配合[3]。
2.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码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
(3)
Photoshop
Adobe Photoshop，简称“PS”，是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。
在网站前端开发过程中需要把图片用Photoshop处理成加载到网站页面的图片，用Photoshop 制作矢量图形用作网站页面的修饰按钮。
2.3 前端开发相关技术
2.3.1
Java script 简介
Java script[6]的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的，动态的，可交互式的表达能力。从而基于CGI静态的HTML页面将被可提供动态实时信息，并对客户操作进行反应的Web页面的取代。Java script脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱和欢迎。它是众多脚本语言中较为优秀的一种，它与WWW的结合有效地实现了网络计算和网络计算机的蓝图。无疑Java家族将占领Internet网络的主导地位。因此，尽快掌握java script脚本语言编程方法是我国广大用户日益关心的问题。2.3.2
Java script 基本特点
(1)基于对象的语言
java script是一种基于对象的语言，同时也可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用[7]。
(2)简单性
java script的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计，从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。
(3)安全性
java script是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
(4)动态性
java script是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标，移动窗口，选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。2.3.3
CSS简介
CSS[8](层叠样式表)是用来进行网页风格设计的，它简化并扩展了HTML中的各种标记，使得各个标记的属性更具有一般性和通用性，大大提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
什么是CSS？
CSS中，Cascading是“层叠”的意思，也就是说在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后显示时被采用。从样式表插入的形式看可以分为3种。
(1)(2)(3)内联式样式表； 嵌入式样式表； 外部式样式表；
CSS的特点
CSS是用来扩展HTML的，而不是用来替换HTML的，也就是说CSS不能脱离HTML，它只是一项辅助工具。除了可扩展HTML的样式设定外，CSS使得网页的设计与维护更加高效，这主要表现在以下几个方面：减少图形文件的使用，集中管理样式信息，设定共享样式，将样式分类使用。2.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技术，丰富网站的交互性和用户体验性[10]。
jQuery是一套Javascrip脚本库。“Javascript轻量级脚本库”系列文章。Javascript脚本库类似于。NET的类库，这些工具方法或对象方法封装在类库中，方便用户使用。
注意jQuery是脚本库，而不是脚本框架。“库”不等于“框架”，比如“System程序集”是类库，而“ASP.NET MVC”是框架。jQuery并不能帮助我们解决脚本的引用管理和功能管理，这些都是脚本框架要做的事。
脚本库能够帮助完成编码逻辑，实现业务功能。使用jQuery将极大的提高编写javascript代码的效率，让写出来的代码更加优雅，更加健壮。jQuery有如下特点：
(1)提供了强大的功能函数
使用这些功能函数，能够帮助我们快速完成各种功能，而且会让我们的代码异常简洁。
(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脚本编写方法!2.4 本章小结
本章介绍了开发数字媒体技术系网站前端所需要的开发工具和他们的运行环境，同时讲述了相关的前端开发技术比如：Java script，CSS，jqurey等。以便以后的开发过程中能够对这些开发工具盒技术有深刻的理解。
第3章 前端布局分析与设计
3.1 前端总体开发流程及设计
前端设计Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML，CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化，SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性，组件的易用性，分层语义模板和浏览器分级支持等。3.1.1 分层开发
在数字媒体技术系网站概要确定后就需要进行分层开发的划分，根据项目内容的不同，划分工作。大致分为，总体结构搭建，模块制作，页面制作，底层JS搭建，JS交互效果，内部测试，代码优化。如图3-1所示：
图3-1分层开发图
这样做的好处是能根据项目的不同，划分出不同的功能模块，合理的安排时间，在有限的时间内做出很多模块和功能。降低开发成本，提高开发效率。3.1.2 代码编写
前期工作准备好后，就开始进入代码编写阶端，我们采用LSM方式进行，大致流程为总规划和设计草稿完成后，就进行前期的前端开发（搭建大致的HTML结构），然后设计出完设计稿后再进行页面样式的完善，最后完成正式的页面后交给开发，嵌套程序。这样做的好处不仅能有效的提高开发效率，实现逐层开发，让前
端提前介入，减少整体消耗的时间，确保产品有更多的时间修改和完善。
确定了流程后还需要对产品原型进行分析，拆分，把复用性高的部分找出来制作成代码模块，方便以后的套用。确认二，三级页面的风格搭建统一框架。
前端设计样式确定以后，就进行通用模块样式的设计（包括按钮，分页，默认字体颜色，连接颜色等），完成后并提交给前端，统一的搭建。
在代码的编写过程中，最重要的是标准和规范的执行遵守，在编写HTML时候充分发挥想象尽可能的满足后期样式表现的需要。如图3-2所示：
图 3-2 编写代码流程图
代码编写过程中让前端提前进入开发流程中来，在样式属性后就进行HTML结构的编写，页面设计完成后，在进行样式表的开发，这样不仅能节省很多的开发时间，提高开发效率，能在前端对全局页面的把控。在此同时也强调规范和模块化的重要性，正所谓无规矩不成方圆，这样能便于后期维护，减少维护成本。而模块化，是敏捷开发所必需的，重要性在这里也不做过多的描述。3.1.3 内部测试与后续优化
前端的内部测试，指出页面与设计稿不匹配的地方，优化部分细节页面样式。测试不仅能提高内测的质量，还能更早的发现问题并及时的修改，否则当页面提交开发以后再做修改是一件很麻烦的事情。当所有细节修改完毕后，就需要进行制作文件的优化以确保代码的最优化，尽可能地压缩图片和减少外部HTTP请求如图3-3所示：
图 3-3 内部测试流程图
图 3-4 前端开发流程图
这套流程制定出来就一直要求所有前端设计必须严格按照流程执行，也经过了很长时间的磨合跟改进。虽然不是很完美，但是很适合我们现在开发的需要，好处也是显而易见的，遵循并使用它对我们的发开有很大的帮助，能更好的应对高强度，高质量的开发需要。代码更可控，开发效率更高。
3.2 前端UI设计
3.2.1 模块分布
UI设计这是设计中最重要的一点，也可以发挥出更多创意的设计想法；其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。下面是以任由设计师发挥，不是这样死板，要运用层次感的原理去设计如图3-5,3-6所示：
正确的层次布局 错误的布局
图 3-5 布局对比图
在数字媒体技术系网站中UI层次感的体现
图 3-6 数字媒体技术系页面布局图
3.2.2 颜色配置
产生丰富色彩的三原色是红，绿，蓝，也就是RGB，十六进制是00 00 00，例如经常写的red，color:#FF0000； 缩写color:#F00；color:gray(#808080)；是比较深的灰色。所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。我们网站上用的色彩系是属于灰白色系这个选择符合网站的整体风格，不可能把网站设计成五颜六色，因为是学院网站所以要体现一种淡雅，自然的色彩风格。背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色
彩作为背景色，同时背景色要与文字的色彩对比强烈一些。首页的顶端使用灰色标题图片下面用全景图这两个部分过度的很自然。
在文字部分用黑色文字当鼠标移动到相关文字上面时文字颜色变成红色。不同的文字颜色会产生不同的效果，这能给浏览者一种层次感，方便与阅读。
违纪一点禁止大面积使用白色文字，特别是较深的背景下，禁止大面积使用加粗文字如图3-7所示：
图 3-7 字体颜色变换
3.2.3
CSS元素
CSS块元素(block)总是另起一行开始；高度，行高以及顶，底边距都可控制 常用的有：p p table h1 ul dl 等等。CSS内联元素(inline)和其它元素都在一行上；高度，行高以及顶，底边距不可改变；常用的有：a strong font img input span small label等等 [11]如图3-8所示：
Display: inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。
图 3-8 CSS浮动
CSS间距 [12]
相应的设置大小，行高，首行缩进，间距（padding，margin）
内边距padding：元素的内边距在边框和内容区之间。padding:10px 5px 15px 20px;上 10px右 5px下 15px左 20pxpadding:10px 5px 15px;上右左下padding:10px 15px;上右下左
无标题文档
第二篇：个人网站的前端设计论文
摘要：个人网站是指因特网上一块固定的面向全世界发布消息的地方，个人网站由域名、程序和网站空间构成，通常包括主页和其他具有超链接文件的页面。人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。网站设计的好坏直接影响着网站的性能，本文针对个人博客网站设计谈了自己的体会。
【关键词】个人网站HTML5CSS3Javascript
随着互联网的发展，网络上的网站数量越来越多。个人网站的数量也与日俱增。一个好的网站不仅要保证有着良好的性能，同时页面的前端设计也得非常的优秀。一个良好的前端设计往往包含了合理的配色，清晰的页面结构，流畅的动画。随着个人网站的发展，也催生出来很多优秀的博客程序，比如：《WordPress》、《Typecho》等等。那么应如何设计个人网站的前端呢？
1设计语言
1.1HTML5
HTML5是HTML最新的修订版本，2014年10月由万维网联盟完成标准制定。目标是替换1999年所制定的HTML4.01和XHTML1.0标准，以及能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务，例如：AdobeFlash、MicrosoftSilverlight与OracleJavaFX的需求，并且提供更多能有效加强网络应用的标准集。
1.2CSS3
层叠样式表（CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、阶层式样式表，一种用来为结构化文档添加样式的计算机语言，由W3C定义和维护。CSS3现在已被大部分现代浏览器支持。
CSS3分成了不同类别，称为“modules”。而每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。CSS3早于1999年已开始制订。直到2011年6月7日，CSS3ColorModule终于发布为W3CRecommendation。CSS3里增加了不少功能，如：“border-radius”、“text-shadow”等。
1.3JavaScript
一种高级编程语言，通过解释执行，是一门动态类型，面向对象的直译语言。它已经由ECMA通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器支持。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本，数组，日期以及正则表达式等，不支持I/O，比如网络，存储和图形等，但这些都可以由它的宿主环境提供支持。随着最新的HTML5和CSS3语言标准的推行它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行。
2开发工具
SublimeText是一套跨平台的文本编辑器，支持基于Python的插件。SublimeText是专有软件，可通过包扩充本身的功能。大多数的包使用自由軟件授权发布，并由社区建置维护。SublimeText支持众多编程语言，并支持语法上色。
MozillaFirefox，中文俗称火狐，是一个自由及开源的网页浏览器，由Mozilla基金会及其子公司Mozilla公司开发。Firefox支持Windows、OSX及Linux，其移动版支持Android及FirefoxOS，这些版本的Firefox使用Gecko来排版网页，Gecko是一个运行当前与预期之网页标准的排版引擎，而在2015年发布的FirefoxforiOS则非使用Gecko。
3网站前端设计
3.1站点架构
首先确认了整体页面是由左右两个DIV组成，并提供一个按钮，可以按下后隐藏左边的DIV以达到只显示右边的DIV的正文的目的。为left和right两标签加上内容，并美化其页面。
3.2页面设计
作品页面主要用于存放一些作品的demo，所以设计成了几个p以格子的形式排列，并在上面能够显示作品的预览。整体的页面框架依旧沿用首页，以达到站点整体风格的统一和css的最佳化利用，并减少开发过程。
3.3加入动画，添加特效
例如显示悬浮到容器上的阴影渐变的效果如下：
给容器设置box-shadow属性，值为2px2px20px#909090；再给这个容器设置hover版本的css，设置为box-shadow：2px2px70px#707070；给容器设置transition属性，值为2s；
使用html默认支持hover属性来切换两套写好的css3阴影代码来实现阴影效果的切换，再使用transition属性设置动画的播放时间以达到更美观的效果。
3.4其他效果
例如使用了highlight.js，用于给生成的代码块添加高亮和排版效果。
4总结
总之，要使整个网站有个性化的体验，不仅要页面内容丰富，动画流畅，还需要有相关特效，让整体效果简洁大方美观，让人有耳目一新的感觉。
第三篇：网站设计 毕业论文 毕业设计
（论文设计（论文）题目
JSP动态网站设计
学 院 教 学 系 班 级
姓 名 指导教师
毕业设计）
毕业论文
JSP动态网站设计
摘要
随着Internet技术的发展,人们的日常生活已经离不开网络。未来社会人们的生活和工作将越来越依赖于数字技术的发展，越来越数字化、网络化、电子化、虚拟化。Internet的发展历程以及目前的应用状况和发展趋势，可以充分地相信网络技术将极大的改变我们的生活和工作方式，甚至社会的价值观也会发生某种变化。
企业网站，就是企业在互联网上进行网络建设和形像宣传的平台。企业网站就相当于一个企业的网络名片，不但对企业的形象是一个良好的宣传，同时可以辅助企业的销售，甚至可以通过网络直接帮助企业实现产品的销售，企业可以利用网站来进行宣传、产品资讯发布、招聘等等。企业网站的作用就是为展现公司形象，加强客户服务，完善网络业务，还可以与潜在客户建立商业联系。本网站使用JSP技术，所谓JSP就是在传统的网页HTML文件（*.html,*.htm）中加入Java程序片段（Scriptlet）和JSP标记（tag），就构成了JSP网页（*.jsp）。Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序片段，然后执行结果以HMTL格式返回给客户。程序片段可以操作数据库、重新定向网页以及发送E-mail等，这就是建立动态网站所需要的功能。所有程序操作都在服务器端执行，网络上传送给客户端的仅仅是结果，对客户浏览器的要求最低。
在Java的基础上开发出的JSP实现了动态页面与静态页面的分离，脱离了硬件平台的束缚以及编译后运行等方式，大大提高了其执行效率而逐渐成为Internet上的主流开发工具。在美国，EJB+Servlet+JSP几乎成为了电子商务的开发标准，而在我国也正逐渐兴起，不少网站都采用了JSP技术。全球电子商务的出现和发展，无疑为我国发展知识经济和推进现代化事业提供了历史机遇，也提出了严峻的挑战。电子商务是信息化社会的商务模式，也是商务的未来。作为一种现代商务模式，电子商务利用计算机网络检索和获取信息，对个人和公司提供决策服务，解决了组织、商家和客户的需求，减少了用于改善货物和服务质量的投入，加快了商品交易的速度。电子商务可以应用于制造到零售，从银行、金融机构到出版娱乐以及其他的任何企业。
关键词 ：电子商务 JSP MySQL
毕业论文
目 录
摘要...............................................................1 1绪论..............................................................1 1.1课题背景与来源..................................................1
1.2 课题研究意义...................................................1 1.3企业网站的由来和发展............................................2 2 开发工具的介绍及选择.............................................2 2.1 Dreamweaver8.0.................................................2 2.2 MyEclipse 8.5..................................................3 2.3 JavaScript.....................................................4 3 企业网站结构设计.................................................4 3.1 技术涉及领域...................................................4 3.2可行性分析......................................................8 3.3网站的设计与规划................................................8
3.3.1网站目的.................................................10 3.3.2网站概貌.................................................11 3.3.3功能规划.................................................11 4数据库设计实现...................................................11 4.1 数据库设计....................................................11 4.2注册表（tb_login）.............................................13 4.3产品表（product）..............................................14 4.4购物车表（tb_shop）............................................14 4.5 网页与数据库的链接代码........................................15 5模块功能实现.....................................................15 5.1系统总体结构设计...............................................15 5.2 主页页面......................................................16 5.3 登陆/注册.....................................................16 5.4购物页面.......................................................19 5.5其它页面实现...................................................21 6设计技巧和解决方法...............................................22 7总 结............................................................23 谢辞..............................................................24 参考文献..........................................................25
毕业论文
1绪论
1.1课题背景与来源
在已跨入21世纪的今天，人类使用和学习信息的方式以及信息的包装方式正在进行着不可阻挡的革命，这次革命将比印刷术的出现所产生的影响以及对社会发展的推动远为复杂而巨大。
随着网络的发展，越来越多的企业需要搭建公司网站，将其作为对外宣传、推广、服务及传销的载体，来配合公司的发展和需要，使更多的客户通过网络来结盟公司。本课题根据企业的具体情况及需要，设计开发企业宣传网站，帮助其充分利用国际互联网上的信息资源，服务现有客户，挖掘潜在客户，最大限度地开拓属于另一片天空的市场。是目前使用最为广泛的软件系统。课题涉及的知识较广泛,其中包括了目前最新的网页设计技术，如WEB标准、XHTML技术的应用、CSS技术的应用、Javascript代码的设计、网站的配置及发布等等内容。通过实现该课题，学生对多种知识进行综合使用，达到融会贯通的程度，更重要的是在该课题的开发过程中学生使用WEB标准进行网页的设计，对网站的重构和优化有一个详细深入的认识，对于当前网页设计的最新技术和标准规范有了一次真实体验，使学生在就业前得到一次实践锻炼的机会，提前熟悉企业中网站开发的标准流程，更能适应当前市场的需求。
目前，我国上网的人口已近一个亿，成立世界上网民最多的国家，许多人在需要查询信息，首先想到的就是上网。网站的迷人之处在于综合使用文本、图象、声音、动画和视频的信息和内容，具有丰富的多媒体表现与互动特点，无可置疑，网站已成为最吸引人的也最有效的信息传递手段和方式。随着网络技术的发展，各类网站纷纷出现。企业网站也成为了一种时尚。越来越多的公司通过企业网站，打开网络世界的广阔市场，展示企业的文化和形象。
1.2 课题研究意义
通过对这一题目的设计实现, 使学生巩固、提高和综合运用已学知识，同时培养学生综合知识的应用能力，提高学生分析问题和解决问题的能力，学会设计工作思路、方法、步骤，提高技术应用能力；进一步培养学生树立严谨的科学作风和良好的工作能力，提高独立思考与团队合作的能力。通过对本课题的设计，力图使学生能熟练掌握利用XHTML＋CSS+Javascript等语言开发网页的过程和开发方法，深刻地体会到在开发网页时使用CSS技术的优越性，获得实际的开发经验，熟悉一个实际项目的开发过程和开发方法，增加自己的编程实践经验，为自己将来的工作奠定一个坚实的基础。随着互联网的发展，网站已经越来越引起人们的关注，很多种搭建网页的编程语言应运而生。JSP是一种动态网页的编程语言，它是在传统的网页HTML文件中插入Java程序段和JSP标记,从而形成JSP文件。
毕业论文
用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。自JSP推出后，众多大公司都支持JSP技术的服务器，如IBM、Oracle、Bea公司等，所以JSP迅速成为商业应用的服务器端语言。JSP具备了Java技术的简单易用，完全的面向对象，具有平台无关性且安全可靠，主要面向因特网的所有特点。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。插入的Java程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。JSP是在服务器端执行的，通常返回给客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。正因为JSP拥有如此多的优点，在社会上也成为了流行的编程语言，深受民众的普遍受欢迎。成功完成一项由JSP语言汇编的网页，将会大大提高学生的编程技术，使学生在就业前得到一次实践锻炼的机会，提前熟悉企业中网站开发的标准流程，使学生更能适应市场的需求。
1.3企业网站的由来和发展
互联网在中国的出现只有短短七年时间，1994年中国科学院高能物理研究所设立了国内第一个Web服务器，推出一个叫做“中国之窗”的网页，这可能是国内Internet上出现的第一个Web网页，1995年开始，中国教育科研网，中国科技网，中国公用计算机互联网以及中国金桥网这构成中国数字神经系统的四大互联网络相继建成，使互联网在中国开始真正进入社会生活之中。
企业网站，就是企业在互联网上进行网络建设和形像宣传的平台。企业网站就相当于一个企业的网络名片，不但对企业的形象是一个良好的宣传，同时可以辅助企业的销售，甚至可以通过网络直接帮助企业实现产品的销售，企业可以利用网站来进行宣传、产品资讯发布、招聘等等。企业网站的作用就是为展现公司形象，加强客户服务，完善网络业务，还可以与潜在客户建立商业联系。随着网络的发展，出现了提供网络资讯为盈利手段的网络公司，通常这些公司的网站上提供人们生活各个方面的资讯，如时事新闻、旅游、娱乐、经济等。开发工具的介绍及选择
2.1 Dreamweaver8.0 Web(World Wide Web，简称 编辑器和其他编程工具（包括 Microsoft Visual Studio.NET）一起工作。这不仅使得 Web 开发更加方便，而且还能提供这些工具必须提供的所有优点，包括开发人员可以用来将服务器控件拖放到 Web 页的 GUI 和完全集成的调试支持。微软为ASP.NET设计了这样一些策略：易于写出结构清晰的代码、代码易于重用和共享、可用编译类语言编写等等，目的是让程序员更容易开发出Web应用，满足计算向Web转移的战略需要。
JSP（JavaServer Pages）是Sun公司推出的一种动态网页技术。JSP技术是以Java语言作为脚本语言的，熟悉JAVA语言的人可以很快上手。JSP本身虽然也是脚本语言，但是却和PHP、ASP有着本质的区别。PHP和ASP都是由语言引擎解释执行程序代码，而JSP代码却被编译成Servlet并由Java虚拟机执行，这种编译操作仅在对JSP页面的第一次请求时发生。因此普遍认为JSP的执行效率比PHP和ASP都高。JSP是一种服务器端的脚本语言，最大的好处就是开发效率较高，JSP可以使用JavaBeans或者EJB（Enterprise JavaBeans）来执行应用程序所要求的更为复杂的处理，但是这种网站架构因为其业务规则代码与页面代码混为一团，不利于维护，因此并不适应大型应用的要求，取而代之的是基于MVC的Web架构。MVC的核心思想是将应用分为模型、视图和控制器三部分。模型是指应用程序的数据，以及对这些数据的操作；视图是指用户界面；控制器负责用户界面和程序数据之间的同步。通过MVC的Web架构，可以弱化各个部分的耦合关系，并将业务逻辑处理与页面以及数据分离开来，这样当其中一个模块的代码发生改变时，并不影响其他模块的正常运行，所以基于MVC的Web架构更适应于大型应用开发的潮流。因此，不少国外的大型企业系统
毕业论文
和商务系统都使用以上的MVC架构，能够支持高度复杂的基于Web的大型应用。
<5> JSP开发环境: JDK：Java Development Kit，Java开发工具集 Tomcat：服务器
IDE：Integated Development Environment，集成开发环境 常用：Eclipse（MyEclipse）、JBuilder 3.2可行性分析
（1）经济可行性分析：网页开发费用可以接受，开发周期短，网站使用期持久。（2）技术可行性分析：计算机硬件和软件的飞速发展为网页提供了技术条件。（3）社会可行性分析：在当前信息技术飞速发展的大环境下，计算机技术和软件技术的更新是网页，完全有可能也有能力采用这样先进的技术。
3.3网站的设计与规划
JSP页面包含的元素：JSP代码、JSP指令、JSP动作。JSP代码指的是嵌入在JSP页面中的Java代码。JSP指令是为JSP引擎设计的，它告诉JSP引擎如何处理代码，比如引入一个其他的类、设置JSP用的语言等。JSP动作是用来控制JSP引擎的动作，比如可以根据某个条件动态跳转到另一个页面。JSP的内建对象由JSP容器自动为JSP页面提供，是预先存在的。在编写JSP程序时，可以直接使用内建对象。
JSP的常用内建对象有：
<1>out：传送信息到客户端的浏览器。<2>request：包装客户端的请求信息。<3>response：响应客户端的请求。<4>session：客户端请求的一次回话。
JDBC（Java Data Base Connectivity）Java数据库连接。是一种用于执行SQL语句的Java API，可以为多种关系数据库提供统一访问，由一组用Java语言编写的类和接口组成。
MySQL的安装、建库、表、增删改查、MyEclipse Database Browser。使用JDBC访问MySQL步骤： <1>加载驱动程序类 <2>建立连接
<3>创建能够发送SQL语句的对象 <4>执行发送的SQL语句 <5>处理返回结果 <6>关闭连接
毕业论文
加载驱动程序类: try{ Class.forName(“com.mysql.jdbc.Driver”);} catch(Exception e){ e.printStackTrace();} 建立连接: Connection conn=DriverManager.getConnection(“jdbc:mysql://localhost:3306/数据库名”,”用户名”,”密码”);创建能够发送SQL语句的对象: Statement：向数据库提交SQL语句并返回相应结果的工具。Statement st=conn.createStatement();PreparedStatement：继承Statement接口，当一条SQL语句需要稍加变化而反复执行时，通常可以使用PreparedStatement。
PreparedStatement ps=conn.prepareStatment(“sql”);
CallableStatement：继承PreparedStatement接口，用于执行存储过程。CallableStatement cs=conn.prepareCall(“sql”);执行发送的SQL语句: int n=st.executeUpdate(“sql”);/* 增删改*/ int n=ps.executeUpdate();ResultSet rs=st.executeQuery(“sql”);/* 查询*/ ResultSet rs=ps.executeQuery();cs.execute();/*其它*/ 处理返回结果: 增删改:if(n>0)操作成功！else 操作失败！
查询:while(rs.next()){rs.getxxx(“列名”)//获取结果集中的值} 关闭连接conn.close();JavaBean目前代表性的组件技术有COM、COM+、JavaBean、EJB、CORBA。它基于组件的软件设计拥有组件可重复使用、易于替换和升级、加快软件开发速度，缩短生产周期的优势。JavaBean支持可视化和非可视化两种组件。可视化组件在运行中能够显示出来。非可视化组件通常用来处理一些复杂事物，一般不会有可视化的输出。JSP只支持一些非可视化的JavaBean来实现一些比较复杂的事务处理。
Servlet是服务器端的Java小程序，用于响应客户端的请求。一般会把处理结果以HTML的形式返回，在客户端形成动态网页。Servlet和JSP的区别是JSP更加注重页面的表现，而Servlet更注重业务逻辑的实现，且编写Servlet较难。JSP只能处理浏览器的请求，而Servlet还可以处理客户端的应用程序请求，可以认为Servlet加强了Web服务器的功能。
毕业论文
一个Web项目至少分为三层：数据层、业务逻辑层和表示层。数据层通过数据库保存数据。业务逻辑层用来完成数据计算、数据分析、数据库连接等处理工作。表示层用来完成HTML页面的输出。
Servlet的生命周期分为：初始化、处理客户端的请求和销毁三个阶段。当服务器装载一个Servlet的时候，服务器创建一个Servlet实例，并且调用Servlet的init()方法。在初始化阶段，Servlet初始化参数被传递给Servlet配置对象。在服务器装载和初始化Servlet后，服务器会创建特定的“请求”对象和一个“响应”对象。服务器调用Servlet的service()方法，用于传递“请求”和“响应”对象。service()方法从“请求”对象获得请求信息，处理该请求并用“响应”对象的方法将响应返回客户端。service()方法可以调用其他方法来处理请求，例如doGet()、doPost()等方法。如果服务器不再需要或重新装入Servlet实例时，服务器会调用Servlet的destroy()方法以终止请求。
Servlet基本方法: <1>init()：在Servlet的生命周期中，init()方法仅执行一次。它是在服务器装入Servlet时执行的。
<2>service()：该方法是Servlet的核心。每当客户端请求一个Servlet实例时，该实例的service()方法就会被调用。默认条件下调用与HTTP请求方法相应的do功能。如果HTTP请求方法是GET，则默认条件下调用doGet()方法；如果HTTP请求方法是POST，则默认情况下调用doPost()方法。
<3>destroy()：该方法只执行一次，即在服务器停止并卸载Servlet时被调用。Servlet编写
<4>Servlet是Java类。
<5>一般Servlet是javax.servlet.HttpServlet的子类，需覆盖doGet()和doPost()方法来完成相应功能。
<6>Servlet编写完成需配置web.xml文件： Servlet、Servlet-mapping 3.3.1网站目的
通常情况下，架设企业网站主要是为满足公司的基本业务以及日益扩大的商务应用能够随时升级，拥有产品销售业务的企业以网络营销为目的，在互联网上进行企业宣传。企业网站建设是指使用标识语言（markup language)，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面（GUI）的形式被用户所浏览。简单来说，网页设计的目的就是产生网站。本网站的功能在一般网站的功能上需要适当创新和添加。
毕业论文
3.3.2网站概貌
因为是企业网站，所以需要包涵公司要求的各方面内容，在突出企业的风格和特点的同时，还应用了现在流行的网站设计技术和数据库技术。因此将网站设计分为前台页面展示平台和后台设计。3.3.3功能规划
网站设计有公司动态更新，浏览者可以在首页了解世纪互联数据中心的基本信息，并且可以登录和注册账户，在后台设计页面中，管理员可以对网站信息进行管理。站内的其它页面均是按照公司整体需求进行设计的。
<1>主页
主页可以让用户看见公司的简单介绍。<2>登陆/注册
愿意了解公司的客户需要进行注册登陆。<3>商品展示
是对公司产品的一个陈列说明，可以让客户进行选购。<4>购物车 让用户选购产品。<5>服务内容
世纪互联公司不只是产品销售公司，它的服务范围涵盖IT界各项内容。<6>招聘信息
对人才的需求也是公司的重点，通过招聘信息浏览者可以申请公司职位。
4数据库设计实现
对于数据库的需求而言，由于其主要是用于信息的提供、保存、更新和查询等利用数据库设计用户数据表保存用户数据。我们以系统功能所隐含的对数据应用的需求，确定了数据库的结构，并建立了数据表。本网站数据库BuinessDB。BuinessDB里创建了多个数据表tb_login、product和购物车表（tb_shop）。
4.1 数据库设计
数据库是计算机应用系统中的一种专门管理数据资源的系统。数据有多种形式，如文字、数码、符号、图形、图像以及声音等。数据是所有计算机系统所要处理的对象。人们所熟知的一种处理办法是制作文件，即将处理过程编成程序文件，将所涉及的数据按程序要求组织成数据文件，用程序文件来调用。数据文件与程序文件保持着一定的对应关系。在计算机应用迅速发展的情况下，这种文件式方法便显出不足。比如，它使得数据通用性差，不便于移植，在不同文件中存储大量重复信息、浪费存储空间、更新不便等。数据库系统便能解决上述问题。数据库系统不从具体的应用程序
毕业论文
出发，而是立足于数据本身的管理，它将所有数据保存在数据库中，进行科学的组织，并借助于数据库管理系统，以它为中介，与各种应用程序或应用系统接口，使之能方便地使用数据库中的数据。
这段说明介绍的确非常详细，可能让人看得头晕眼花了，其实简单地说数据库就是一组经过计算机整理后的数据，存储在一个或多个文件中，而管理这个数据库的软件就称之为数据库管理系统。一般一个数据库系统（Database System）可分为数据库（Database）与数据管理系统（Database Management System，DBMS）两个部分。
数据库解决方案分为两个基本类别：数据库服务(DBaaS)和数据服务(DaaS)。这两者间的主要区别在于数据是怎样管理的。
DaaS使你可以定义你的数据，然后你可以从世界任何地方通过Internet连接对这些数据进行查询。不同于传统的数据库解决方案，DaaS不执行典型RDBMS接口，例如SQL。而是通过一套通用的API访问数据。此外，DaaS是最适合于基础数据的查询和操纵等管理。
DBaaS是一个更为强大的数据解决方案，它提供全面的数据库功能。在DBaaS中，管理层负责连续监测和配置数据库，以实现优化缩放、高可用性、多租户、并在云中有效的分配资源。因此，开发者可以免去许多繁琐乏味的数据库管理操作的麻烦，因为这些会被自动处理。
有三种基本的基于云数据库的服务，它们的不同在于用户定制环境的灵活性。对于扩展性，云计算是用户访问一个只有操作系统的准机器，而对于这个操作系统用户有充分的灵活性安装和配置选定的RDBMS软件。这种安装被认为云服务基础设施(IaaS)。Amazon Elasti Computing Cloud(EC2)就是这种服务的一个很好的例子。对于想对其托管的数据库具有完全控制权的人来说，这个平台是一个很好的选择。
另一个在云中部署RDBMS通用模型的是虚拟设备模型。虚拟设备是一个预装载并预配置设备的虚拟机。Amazon还在其EC2云中部署预配置了MySQL、Oracle和Microsoft SQL Server的虚拟设备。
最后，本地云数据服务，例如Xeround’s MySQL云数据库使用NoSQL数据库，通过Web界面进行管理。本地云数据库往往得到更好的设备以便能够更好地使用云资源，并且与非云RDBMS使用的软件相比提供更好的可用性与稳定性。
正如现在云计算一样棘手，让陌生人访问您的数据要考虑清楚，不能掉以轻心。低价格：这可能是使企业进入云行列的第一个原因。使用基于云数据库解决方案，可以从硬件、软件许可以及服务实施等方面大幅降低运营成本和支出，因为你只需要对所使用的部分买单。
扩展性与灵活性：数据库托管公司往往处于有利位置，为了得到更高的效率并减少未使用的空间而使资源得到最大化。他们根据你不断变化的业务需求而对服务进行增加或缩减。
毕业论文
高效率：云计算提供了硬件共享、流程自动化和技术熟练的好处。你和你的员工可以从任何地方、使用任何电脑、移动设备或浏览器访问数据库。它还能从整体上降低资源的使用。
缺点： 安全问题：云计算中一个值得关注的事情是你的数据是通过网络访问的。这就产生了一系列问题，你会给某人提供机会攻击你的数据库服务商并且窃取你宝贵的资料吗？这样安全漏洞事件是谁的责任呢？当第三方丢失客户信息时，你不能也不应该只躲在云供应商后面。除了网页接入问题，怎样才能使供应商的物理位置安全呢？他们经常进行备份么？有异地数据存储么？这些实在没有办法百分之百的确定。你只能相信你的供应商能照顾好您的数据。
互联网连接风险的损失：由于你的数据通过网络进行交互，你应该考虑失去数据库连接将会对你的企业生产带来怎样的影响。这种风险你能忍受么？这里有个叫做五个九的高可用性标准。在99.999%的时间正常运行，每年停机时间约为五分钟。你能期望它保证具有这种可靠性么？
定制的局限性：当处理如此多的业务时，要求数据库服务商要很灵活。如果需要深度定制并且与现有系统集成来为日常业务服务，那么云计算能够适应你的需求吗。
4.2注册表（tb_login）
主要记录用户在注册时的个人基本信息，用户可以对这个表中的信息进行修改。
表 5-1-1 注册表的逻辑结构
详细数据表如下：
5-1-用户注册表
毕业论文
4.3产品表（product）
主要记录公司为客户提供的产品信息，客户可以浏览，购买这个表中的产品。管理员可对产品信息进行增加、删除及修改。
表5-2-1 产品表的逻辑结构
详细数据表如表：
表5-2-2 产品数据表
4.4购物车表（tb_shop）
购物车表，主要用来存放用户已加入购物车的商品。
表5-3-1 购物车表的逻辑结构
详细数据表如表：
表5-3-2 购物车数据表
毕业论文
4.5 网页与数据库的链接代码
在JSP网站设计搭建中，数据库要想与网页链接必须要有DBconn代码。
5模块功能实现
5.1系统总体结构设计
本网站主要图片由公司提供，划分为上下两部分，上部分是一个Web用户控件，这种控件可以在Web窗体中进行引用，这样这个网站的风格有了一定的统一；下部分分左右两部分，左边主要显示各个页面应有的内容，右边为内容的视觉表达，每个网页的布局都是这样，使整个网站统一化。因为公司网站的原因，整个网站的颜色都比较大众化，所以一般不采用暖色调来填充颜色，因本网站主要图片的人性化设计，在风格上也向部分网站进行了模仿，为使整个网站在美观上有所提高，我们对一些图片进行了修改。
图4-1-1 系统总体结构设计图
毕业论文
5.2 主页页面
主页面包含注册、登录、产品浏览、购物车、招聘信息以及后台管理等主要功能链接，简洁明了的模块化分给顾客直观的感受和足够的参考信息。
图4-5-1 主页面
主页样式设计代码如下：
登陆/注册
(1)登陆页面：输入用户名及密码，若与数据表中有匹配项则登陆成功。
毕业论文
图4-2-1 登陆页设计图
用户登录jsp代码如下：
<%
if(request.getParameter(“username”)!=null&&request.getParameter(“pass{
String strName=request.getParameter(”username“);String strPass=request.getParameter(”password“);Class.forName(”com.mysql.jdbc.Driver“);Connection word”)!=null)conn=DriverManager.getConnection(“jdbc:mysql://localhost:3306/test”,“root”,“");
Statement stat=conn.createStatement();String strSql=”select count(*)from tb_login where ResultSet result=stat.executeQuery(strSql);result.next();if(result.getInt(1)==1){ session.setAttribute(“login”,“ok”);response.sendRedirect(“main.jsp”);
} else
{ out.println(“用户名或密码输入错误！”);out.println(“返回>>重新输入”);} result.close();} username='“+strName+”'and password='“+strPass+”'“;
%>
毕业论文
(2)注册页面：取得用户的信息并保存。
图4-2-2 注册页设计
用户注册jsp代码如下：
<%if(!request.getParameter(”Password“).equals(request.getParameter(”Password1“))){ out.println(”密码输入不一致！
“);
out.println(”返回“);} else{ try{ //加载驱动程序
Class.forName(”com.mysql.jdbc.Driver“);//建立连接
Connection conn=DriverManager.getConnection(”jdbc:mysql://localhost:3306/test“,”root“,”“);//创建能够发送SQL语句的对象
Statement st=conn.createStatement();String sql=”insert into tb_login values('“+request.getParameter(”ID“)+ ”','“+request.getParameter(”Name“)+”',“+request.getParameter(”Password“)+”)“;sql=new String(sql.getBytes(”ISO-8859-1“),”GBK“);//执行SQL语句
int n=st.executeUpdate(sql);//处理执行结果
if(n>0){ out.println(”<script>alert('添加成功！)；window.location=’simple.html’;</script>“);} else{ out.println(”<script>alert('添加失败！');history.back();</script>“);}} %>
毕业论文
5.4购物页面
购物车模块主要的核心功能就是产品展示和购物车，这个模块分三个页面来实现，浏览页面实现加入购物车，购物车页面实现购物车管理。
图4-3-1 产品展示页
购物页面：消费客户能够查看虚拟购物车内的所有产品，并且已登陆的客户可以删除图书。当客户删除产品项之后，系统会及时更新数据表中相应内容。在浏览页点击加入购物车就可实现加入虚拟购物车功能，在购物车页面，已登陆的消费者可以看到自己将购买的商品，同时也可删除商品。
图4-3-2 购物车效果图
毕业论文
购物车jsp代码如下：
<%try{ //加载驱动程序 Class.forName(”com.mysql.jdbc.Driver“);//建立连接 Connection conn=DriverManager.getConnection(”jdbc:mysql://localhost:3306/test“,”root“,”“);//创建能够发送SQL语句的对象
Statement st=conn.createStatement();String sql=”insert into tb_shop values('“+request.getParameter(”ID“)+ ”','“+request.getParameter(”Name“)+”',“+request.getParameter(”Number“)+”,“+request.getParameter(”Price“)+”)“;sql=new String(sql.getBytes(”ISO-8859-1“),”GBK“);//执行SQL语句 int n=st.executeUpdate(sql);//处理执行结果 if(n>0){ out.println(”<script>alert('添加成功！');window.location='shop.html';</script>“);} else{ out.println(”<script>alert('添加失败！');history.back();</script>“);} } catch(Exception e){ %>
e.printStackTrace();}
浏览页面：消费者可以通过浏览产品目录，查看和选择产品。当用户浏览目录的时候，可以遍历产品类别的层次，并且查看属于各个类别的产品列表，当查看完产品后，消费用户就能够将想购买的产品放在他们的虚拟购物车中。
图4-3-3 购物车查看图
毕业论文
购物车信息表代码如下：
<% int n=0;//用户人数
try{Class.forName(”com.mysql.jdbc.Driver“);Connection conn=DriverManager.getConnection(”jdbc:mysql://localhost:3306/test“,”root“,”“);Statement st=conn.createStatement();String sql=”select * from tb_shop“;ResultSet rs=st.executeQuery(sql);while(rs.next()){ out.println(”
5.5其它页面实现
企业网站包涵公司要求的各方面内容，需要对公司服务内容进行详细的说明介绍，世纪互联数据中心是IT行业相当成熟的企业，它覆盖了几乎所有网络行业的服务内容，为网络用户需求带来全面的服务。
图4-4-1 企业服务介绍
毕业论文
6设计技巧和解决方法
我们在制作网页的时候，经常有这种体会，那就是制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了，这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示，在 Dreamweaver中得到了较好的解决。在文档窗口的右下角，Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字，在弹出式菜单中可以为当前的页面指定显示分辨率，通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。有时我们为了要达到一种逼真的效果，希望鼠标移动到某个链接上时能有动感产生。使用Dreamweaver可以很容易实现这种效果。设计时，我们首先需要准备两幅图象，第一幅是原始图象，第二幅是鼠标移动上去后的图象。接着用鼠标单击第一幅图，在属性面板中的链接栏中填上要链接的文件，然后单击键盘上的F8键，在弹出的Behaviors窗口中单击“+”号，随后选择“swap image”，在接着出现的窗口中选择第二幅图象，最后单击确定就可以了。
本次为期三个月多的毕业设计是大学三年所学知识的综合运用，是理论与实践相得综合考察。这种毕业设计项目的选做,不仅可以巩固了所学的书本知识,还能学到了许多课堂上和书本上无法学到的实践知识，提高我们的自学能力，增强了专业技术的水平，同时也为今后从事本专业的工作打下了的基础。
毕业论文
7总 结
经过几个月的努力，我们的毕业设计终于完成了。通过结合毕设计划书的要求，制定了公司网站系统管理的计划方案，本网站可实现用户注册、登录、修改信息、购物、生成订单、浏览产品等公司网站应具备的功能，同时添加了用户管理系统，进一步完善了本网站的功能，在这次公司网站系统的设计过程中我受到很大启发：在网站开发与设计上，体会到了理论与实际结合的重要性，认识到做一个完美的网站不仅仅要考虑到网站功能及其效果的实现，更应该注重网站与用户的有机结合。
在老师耐心细致的指导下，同学之间相互交流，同时翻阅了大量的资料(包括网上资料，书本及学校的一些相关资料)经过近一段时间的努力，企业网站的设计制作告一段落。总结这次“世纪互联网站”开发制作过程，我们综合使用了目前因特网上比较流行的各种静态、动态制作方法，并对初步利用后台程序完成生成网页的技术。同时也从中学习了对静态页面的处理风格，色彩搭配，页面导航方面有了一定经验。目前网站的制作技术与要求，都已经告别了因特网初期网站制作的“幼稚”期，随着各类网站的迅速增加与浏览者需求的提高，无不要求网站从立意，策划，页面设计到后台程序的全面提高。无论是个人网站还是企业网站都必须被要求从浏览者角度出发，最大限度的满足用户的要求，这也是以后各类网站发展竞争的真正实质所在。
本次设计由于设计时间较紧，且相关模块比较多，加之设计经验的不足，在网站的整体设计及各模块功能可能设计的不完全，有待于进一步的完善和改进。虽然在完成项目的过程中也遇到过各种困难,但最终我们达到了自己的预期目标,虽然此网站与其它网站相比仍有很多不足,但是整个制作过程才是整个项目最宝贵的地方,最后, 由于时间仓促以及本人水平有限，本系统还有很多不完善之处，也难免存在错漏，恳请各位老师多多指点。
毕业论文
谢辞
毕业论文
参考文献
[1] 吴涛主编.网站全程设计技术[M].北京：清华大学出版社，2006,7.[2] 龙马工作室编.JSP+SQL Server组建动态网站实例精讲[M].北京：人民邮出版社，2008,4.[3] 赵增敏编.JSP动态网页设计[M].电子工业出版社，2003,8.[4] 任学文，范严编.网页设计与制作[M].中国科学技术出版社，2006,8.[5] 武创，王惠.网页设计探索之旅 [M].电子工业出版社，2006,9.[6] 杜巧玲等编.网页设计超级梦幻组合[M].清华大学出版社, 2003,3.[7] 吴黎兵，罗云芳编.网页设计教程[M].武汉大学出版社，2006,2.[8] 庄王健编.网页设计三剑客白金教程[M].电子工业出版社，2006,1.[9] 泽卡斯著，李松峰，曹力译.JavaScript高级程序设计(第2版)[J].人民邮电出版社，2010.[10] 唐永明.浅议网页设计与制作[J].科技信息，2009(20).[11] 陈孝强等编.Dreamweaver8 必练[M].北京：清华大学出版社，2006.[12]（美）特里等著，谢文亮译.《SQL Server 2005深入开发系列——SQLServer 2005报表服务高级编程》[M].北京：清华大学出版社，2007.[13] 王华杰，孙一波等编.《C#数据库开发技术》[J].清华大学出版社，2003,2.
第四篇：网站设计毕业论文
目录
摘 要..................................................................................................................1 Abstract...............................................................................................................1 第一章绪论..........................................................................................................3 1.1研究背景.....................................................................................................3 1.2历史及现状................................................................................................3 1.3发展前景及优势.........................................................................................3 1.4 研究目的....................................................................................................4 1.5开发工具.....................................................................................................4 第二章系统需求分析...........................................................................................5 2.1功能分析.....................................................................................................5 2.1.1用户模块...............................................................................................5 2.1.2一级菜单模块.......................................................................................5 2.1.3商品模块...............................................................................................6 2.1.4购物车模块...........................................................................................6 2.1.5订单模块...............................................................................................6 2.2安全性分析.................................................................................................7 2.3运行分析.....................................................................................................7 2.4可行性分析.................................................................................................7 2.4.1技术可行性...........................................................................................7 2.4.2经济可行性...........................................................................................7 第三章系统总体设计...........................................................................................8 3.1设计概述.....................................................................................................8 3.2总体结构.....................................................................................................8 3.3各个模块功能.............................................................................................8 第四章系统数据库设计.......................................................................................10 4.1数据库需求分析.........................................................................................10
I
4.2概念结构设计............................................................................................10 4.3逻辑结构设计............................................................................................11 第五章系统详细设计..........................................................................................13 5.1前台界面设计............................................................................................13 5.1.1首页界面设计......................................................................................13 5.1.2主要界面设计......................................................................................15 5.1.3其他界面设计......................................................................................16 5.2关键问题设计............................................................................................18 5.2.1验证码技术..........................................................................................18 5.2.2左右无缝平移设计...............................................................................19 5.2.3轮播切换设计......................................................................................20 5.2.4平移图层..............................................................................................20 5.2.5分页技术..............................................................................................21 5.2.6 邮箱激活.............................................................................................21 参考文献.............................................................................................................24 致谢....................................................................................................................25
II
西华师范大学跳蚤市场网
xxx
计算机学院软件工程专业xxx级 指导教师：xxx
摘 要：随着Internet技术的发展，人们的日常生活已经离不开网络。未来社会人们的生活和工作将越来越依赖于数字技术的发展，越来越数字化、网络化、电子化、虚拟化。Internet的发展历程以及目前的应用状况和发展趋势，可以充分地相信网络技术将极大的改变我们的生活方式和工作方式，甚至社会的价值观也会发生某种变化。
本设计尝试用SPRING在网络上架构一个网上二手交易市场，让每一个学生都能在学校内完成二手商品交易，通过交易，不仅可以进行环保、节俭等传统文明教育，还可以让学生在学校内部进行电子商务的演练实训。本文从理论和实践两角度出发，对一个具有基本互动功能的在线二手商品交易网站进行设计与实现分析。论文首先较为详尽地介绍了面向对象分析与设计的有关概念与技术。接着对交易系统的可行性进行了分析，然后对系统的设计思想、设计目标与系统的整体结构进行了明确的规划。最后对系统的主要页面、数据库的设计与实现作了较为详细的讲解。
本网上二手商品交易系统是运用SPRING技术来实现的。其主要功能有用户登陆注册，商品查询，订单和购物车等功能。论文在撰写过程中，力求将应用相结合，对各种理论进行阐述的同时配合系统从实际应用和操作技巧上加以说明，希望能够更充分地体现到这些知识与技术在本系统中的应用与实现。关键词：电子商务、SPRING、数据库
The Flea Market Website of China West Normal University
xxx
School of Computer Software Engineering2013 Instructor: xxx
Abstract: Along with the development of Internet technology, daily life can not already do without the network.The life and work of the social people of future will depend on the development of digital technology more and more.Digitize more and more, the networking, electronic, virtual.Development course and present application state and development trend of Internet, can believe network technology great change life and working way of us fully, even certain change will take place in the values of the society.This procedure tries to build up a bookshop in the network with SPRING so that every customer needn't go out and can do shopping easily through surfing the Net at home.This article is analyzing the design and realization of an online bookshop with Data Mining function, from the views of theory and practice.Starting with introducing concepts and techniques of OOA and OOP in detail, especially introducing the knowledge which apply for this system, such as the feature and flow
of OOA and OOPanalyzing the featurestructure and using method of developing techniques SPRING and ADO.NET which using in my system.And then, this article analyses the feasibility of the system, then minutely layouts the design thoughts, goals and the system holistic framework.At last, this article minutely explains the design and realization of Web page layout, data base and application program of our system.This online bookstore system uses SPRING technology to realize on Visual Studio.Net platform.Its main function has users login and registration, thecommodity system, process of purchase, the comment of the books, etc.During the course of writing this article, I strive to integrate theory and practice.While expatiating the different kind of theories, I illuminate the application and operation skill combining the system so as to fully incarnate the application of these theories and techniques to this system.Keywords：Electronic Business, SPRING,DATABASE
第一章
绪
论
1.1研究背景
近几年来互联网的快速发展，“互联网+”的出现，促使多样化信息技术同实体进行联合，以及当代大学生成为网购的主力军，使得各种购物网、快递公司的蓬勃发展；伴随着电子商务的发展，保护环境、节俭节约、循环利用资源的意识在头脑中形成，二手商品交易成为一种发展方向，但是还没有一个专门只为当代大学生提供的一个纯粹的“二手网”。
在跳蚤市场中，甩卖的物品多为大四毕业学生在大学四年中的生活、学习、社交等用品。这些是他们无法带走或者舍不得丢掉的，但仍然可以再次利用起来的物品。这些旧物品对学弟学妹们来说可是一些宝贝，它可以为学弟学妹们提供一些方便的、可靠的、有效的学习资料，一些便宜的生活物资以及即将到来的大学毕业提供一些方向。
但是，从近几年的状况来看，毕业生大部分的东西是没有得到利用的，往往是以廉价卖给废品回收站，有的学弟学妹却以高额的价格从各个商店买来一些接下来的学习和生活可能需要的物品。
1.2历史及现状
跳蚤市场（flea market）是欧美等西方国家对旧货地摊市场的别称。由一个个地摊摊位组成，市场规模大小不等。出售商品多是旧货、人们多余的物品及未曾用过但已过时的衣物等，小到衣服上的小装饰物，大到完整的旧汽车、录像机、电视机、洗衣机，一应俱全，应有尽有。价格低廉，仅为新货价格的10％～30％。跳蚤市场的管理松散。有关flea market的来源，有两种理论： 据语源学家克丽丝汀·安默儿说，flea market最初来源于纽约的Fly Market，Fly Market是纽约下曼哈顿地区的一个固定市场，这一市场从美国独立战争(1775年)之前一直延续到大约1816年。Fly这个词来源于该市场的荷兰语名称Vly或Vile，这个词在荷兰语的意思是“山谷”，很巧的是，它在荷兰语中的发音正好和英语中的flea一样，所以就形成了英语中的flea market。
目前市场上有众多二手网，基本可分为二手房、二手车、二手书、二手日常用品这几大类；按地域则几乎每个地区都有本地的二手交易网。二手商品皆有一个破损率、折旧率的概念，因此不可能像新商品一样采用标明商品性能的方式，所以其信任度有待而估以及大都采用线下交易方式。
另外这些网站基本上全是会的都掺杂一些无聊广告、游戏推送，并没有一个很好专属于校园的二手网，页面无法很好的根据师生需求进行物品搜素。1.3发展前景及优势
首先，学校扩招，师生人数不断的增加，用户群将不断的更新扩大；其次，各个高校并没有专属于自己的跳蚤市场网，市场前景广阔；然后，学校、国家、社会对大学生创业的各个方面的引导以及支持；最为重要的是，现在网络的时代的快速发展，互联网涉及生活中每个角落，人们文化素质的提高，科技运用的普及等等[5]。
其次，最近年轻人惰性增加，对需要体力的事情拒之千里，从心里面产生抵触。另外，二手市场给予用户一个指路牌，直接将用户带到所要搜寻的商品面前，节省了用户在市场中心急如焚、汗流浃背、口干舌燥地寻找与砍价。依赖于品种丰富，购买者选择余地较大；购买方便、售价便宜等优势。从侧面给电子商务增 加潜在市场。
然后，该网站开发会逐步更新；管理涉及西华师范大学师生，管理经费较少。预计在近五年里Flea Market将快速占有四川高校市场，直到最后占有全国市场的大部分甚至更远。
1.4研究目的
以西华师范大学一年一度的跳蚤市场为背景，让废旧物品得到充分的利用；方便了同学也营造了节约光荣，浪费可耻的校园文化氛围；为在校师生提供一个供需平台，所有注册用户都可以将自己不用的东西放在网上，同时也可以在网上找到自己需要的东西，物美价廉，达到双赢；其次是间接性的为学弟学妹从中找到自己以后可能发展方向，并为之而努力奋斗。
1.5开发工具
开发工具：JerBrains WebStorm10、MyEclipse 10 开发语言：JAVA
运行环境：Windows XP/7/10 数据库：MySql JerBrains WebStorm的介绍： JerBrains WebStorm中文名为：网络风暴，享有WEB前端开发神器的名誉。功能上：具有JavaScript功能，例如：基于DOM，特定浏览器完成、编码导航和用法查询、支持结点、重构、单元测试等；具有批量代码分析、编辑语言混合、拼写检查、重复代码检测器的功能；支持H5、CSS/JS、显示内容及应用风格；具有便捷的环境，可以远程同步、集成版本控制系统、本地记录等。
另外，具有强烈的智能代码补全、代码优化、html提示、联想查询、代码重构，以及代码检查和快速修复、调试、结构浏览、折叠等等功能优势。
第二章
系统需求分析
2.1功能分析
为解决不同用户的不同需求，该网站主要功能有：用户模块、一级菜单分类模块、商品模块、购物车模块、订单模块等[1]。
2.1.1用户模块
根据对用户简单分析[2]，得出用户基本功能，见图2.1。
注册：前台的JS校验、使用AJAX完成对用户名异步校验、后台Struts 2校验、验证码、发送激活邮件、将用户信息存入数据库里面。
激活：根据激活码查询用户是否存在，激活或者修改用户状态。登陆：输入用户名和密码进行数据校验，验证码校验进行用户登陆。退出：销毁session。
图2.1 用户模块图
2.1.2一级菜单模块
查询一级分类及商品类型，并将分类存入到session范围类，同时查询到每个一级分类所属的二级分类，以及查询所有商品分类下面的所有商品，并采用分页方式显示，见图2.2。
图2.2 一级菜单模块图
2.1.3商品模块
对商品的展示，查询热门商品、查询最新商品、根据ID查询商品，见图2.3。
图2.3 商品模块图
2.1.4购物车模块
用户将商品添加到购物车、从购物车中移除商品、清空购物车中所有商品等，见图2.4。
图2.4 购物车模块图
2.1.5订单模块
为用户生成订单，将购物车中信息存入数据库中；为订单付款，在线支付、修改订单状态、修改订单信息；查询用户订单等，见图2.5。
图2.5 订单模块图
2.2安全性分析
安全方面，普通用户只可以查找商品、和卖家留言联系进行商品买卖；注册用户可以更改自己的相关信息、相关商品的管理、同买家留言交流；系统管理员可以对自身和注册用户基本信息进行操作，删除注册用户；可以对新闻、网站管理进行操作的用户，以及其他类型用户的相关权限借可以。系统是在网络上运行的多用户系统，采用了数据库安全性、操作系统安全性、程序安全性三重安全性管理来达到系统要求的安全性[3]。
2.3运行分析
支持系统运行的系统需要在Windows xp/7/10下，需要安装火狐浏览器、MySql数据库且数据库密码为123，以及tomcat7.0运行环境并保证接口8080没有被其他的占用。硬件方面需建立维护和使用制度，在硬件选择是要充分考虑硬件的负载和应用环境。软件方面则需对系统进行定期地维护，尽量能够预防各种BUG问题。
2.4可行性分析
可行性分析也称可行性研究，是在系统调查的基础上，针对新系统的开发是否具备必要性和可能性，对新系统的开发从技术、经济、社会的方面进行分析和研究，以避免投资失误，保证新系统的开发成功。
2.4.1技术可行性
前端采用HTML5、CSS3布局；JS、JQuery技术页面动画效果； AJAX页面数据的交互；代码分段、分类，重用率高，可维护性强[4]。后台SSH框架，着重struts和spring进行业务分层描写；代码层次清晰可维护性强。后端数据库采用SQL编写，轻便且功能强大，数据处理快、权限设置准确、数据安全性高。2.4.2经济可行性
经济可行性主要对系统的经济效益进行评价，该系统的设计与开发不需要特殊硬件，使用的软件为开源免费的，不会产生技术专利问题，同在开发过程中的经费低[5]。
第三章
系统总体设计
3.1设计概述
根据需求将网站划分为不同的模块，每个模块将完成特定功能，最后将每个模块链接起来，组成一个整体[6]。
3.2总体结构
根据需求分析，Flea Market网可以划分为：用户模块、商品模块、订单模块、购物车模块等。用户模块包括用户注册、登陆、激活、退出等功能；商品模块可以分为商品的查询、浏览；订单模块包括商品信息、订单信息、支付信息；购物车模块有商品信息、商品支付状态、商品添加删除等。详见图3.1。
图3.1 总体模块功能划分图
3.3各个模块功能
各个模块功能如下
用户模块：用户注册、用户激活、登陆、退出等功能。
图3.2 用户管理模块功能图 注册主要有，用户名(唯一标识)、密码、邮箱、姓名、性别、电话、地址，以及需要激活的验证码。
激活主要应用在用户登录时，将用户的状态修改。登录和注销用来管理用户的回话信息，登录时，网站会保留用户的基本信息，包括用户ID、用户名等。退出时用户信息会清除。
商品模块：根据热卖状态对商品的浏览，或者根据分类状态浏览商品。每个用户皆可以根据一定的条件对全部或部分商品搜索后浏览，并可以看到商品的一些基本信息。例如：商品名称、从不同角度展现出的图片、商品作用、购买时间、原价、现价等信息。
购物车模块：添加、移除、查询、清空等功能。
添加商品，用户根据商品ID将商品添加到购物车中。移除商品，只能根据商品ID移除单个商品。
查询购物车，查询购物车中商品的各种信息，包括商品种类、数量、单价以及总价。
清空购物车，一次性将购物车中所有的商品全部移除。
图3.3 购物车模块功能图
订单模块：商品添加后自动生成订单，用户根据需求查询订单、对商品进行支付等功能。
图3.4 订单模块功能图
第四章 系统数据库设计
4.1数据库需求分析
在整个动态网站设计中，数据库设计具有重要位置，数据库设计质量直接影响到数据库数据的冗余度，数据的一致性，数据丢失等问题。系统开发中数据可设计至关重要，它将影响整个系统的执行效率和可靠性，关系到系统管理员的操作、运行等的可靠性。
该网站开发过程中使用MySql数据库，数据库名为将j2ee，用户名root，数据库密码123。
4.2概念结构设计
数据库的概念结构设计就是将需求分析得到的用户需求抽象为信息结构，即概念模型。概念模型作为概念结构设计的表达工具，为数据库提供一个说明性结构，是设计数据库逻辑结构即逻辑模型的基础[3]。
数据库的概念结构设计就是将需求分析得到的用户需求抽象为信息结构，即概念模型。概念模型的种类很多，其中最著名、最实用的一种是E－R（实体－联系）模型，它将现实世界的信息结构统一用属性、实体以及他们之间的联系来描述[3]。
以下是本数据库系统E-R模型：
图4.1 数据库E-R模型图
4.3逻辑结构设计
该网站主要数据表有：用户信息表user、一级菜单表goodstitle、商品信息表product、二级菜单表goodstitlesecond、订单信息表orderitem、定单表order。
用户表user存放的为用户登录、注册信息，具体表结构设计见图4.2。
图4.2 用户信息表
一级菜单表goodstitle存放商品类型信息，具体表结构见图4.3。
图4.3 用户信息表
二级菜单表goodstitlesecond存放商品分类信息，具体表结构见图4.4。
图4.4 二级菜单表
商品信息表product存放商品各种基本信息，具体表结构见图4.5。
图4.5 商品信息表 订单信息表orderitem存放订单各种状态信息，具体表结构见图4.6。
图4.6 订单信息表
定单表order存放用户订购商品信息，具体表结构见图4.7。
图4.7 订单表
第五章 系统详细设计
5.1前台界面设计
界面是网站的门面，以达到美观、舒适、操作方便、信息准确、结构合理为标准。
5.1.1首页界面设计
用户一打开该网站，就通过客户端的首页对该网站的功能一目了然[1]。网站采取暖色调背景，促进用户的购物欲望。用户可以根据“图书”、“宿舍生活”、“户外活动”、“电器”、“其他”等不同类别浏览该网站，也可通过首页各个板块浏览商品信息。其中“注册”为注册成为普通用户的功能，“登陆”为有账号的[7]所有类型用户可以操作。其中头部和尾部的设计是一样的。
首页界面如下所示：
(a)头部
(b)热卖
(c)限时抢购
(d)促销区
(e)其他
(f)底部
图5.1 网站首页
5.1.2主要界面设计
商品展示界面为用户浏览商品信息的主要界面。按不同的分类浏览，不同的分类器商品信息不同，但功能风格相同。这里将展示出其界面。每种商品都以小图或者简介的形式展示，单击可以查看其详细信息和放大图片，以直观的方式介绍商品。另外，在每个页面中用户都可直接注册和登陆，商品类型，从而为用户操作提供方便。
商品界面如下所示：
(a)商品头部
(b)商品分页
图5.2 商品展示界面
登陆界面如下：
图5.3 用户登录界面
注册界面
图5.4 用户注册界面
5.1.3其他界面设计
用户查看所点击的商品的相关信息，并根据需求添加到购物车实行商品购买。
(a)商品详细 16
(b)商品推荐
图5.5 商品详情页界面
图5.6 购物车界面
(a)支付方式 17
(b)未支付
图5.7 订单界面
5.2关键问题设计
该网站采用MVC模型设计，设计到一些常用的技术手段[8]。
5.2.1验证码技术
防止用户利用机器人自动注册、登陆、灌水，皆采用验证码技术。所谓验证码，就是将一串随机产生的数字或字符，生成一个特定的字符串，用户识别其验证码信息，输入表单提交验证，验证成功后才可以使用其中特定的功能[9]。
验证码的实现流程是：服务器端随机生成验证吗字符串，保存在内存中，发送给浏览器显示；浏览器端输入验证码字符串，然后提交服务器端，提交的字符与服务器端保存的字符进行比较，若一致则继续下一步，否则返回提示。
验证码主要代码： BufferedImage img=new BufferedImage(150,30,BufferedImage.TYPE_INT_BGR);
Graphics g=img.getGraphics();
g.setColor(Color.black);
g.fillRect(0, 0, 150,30);
g.setFont(new Font(“楷体”,Font.BOLD,25));
Random ran=new Random();
String strs=“1234567890asdfghjklzxcvbnmqwertyuiop”;
StringBuffer sb=new StringBuffer();
for(int i=1;i<=4;i++){
char a=strs.charAt(ran.nextInt(strs.length()));
int r=ran.nextInt(255);
int g1=ran.nextInt(255);
int b=ran.nextInt(255);
g.setColor(new Color(r,g1,b));
switch(i){
case 1: g.drawString(a+“",20,15);break;
case 2: g.drawString(a+”“,60,25);break;
case 3:g.drawString(a+”“,90,15);break;
case 4: g.drawString(a+”“,130,20);break;
default: break;
}
sb.append(a);
}
ServletActionContext.getRequest().getSession().setAttribute(”validateCodeSession“,sb.toString());
for(int i=0;i<10;i++){
int x1=ran.nextInt(150);
int y1=ran.nextInt(30);
int x2=ran.nextInt(150);
int y2=ran.nextInt(30);
g.drawLine(x1, y1, x2, y2);
}
g.dispose();
ImageIO.write(img, ”jpg“, ServletActionContext.getResponse().getOutputStream());
return NONE;5.2.2左右无缝平移设计
图片或图层平移无间隙，缓和地平移图片或图层，使得页面效果更平缓。无缝平移主要代码： $:function(objName){
if(document.getElementById){ return eval('document.getElementById(”'+objName+'“)')
}else{ return eval('document.all.'+objName)} }，isIE:navigator.appVersion.indexOf(”MSIE“)!=-1?true:false，addEvent:function(l,i,I){
if(l.attachEvent){
l.attachEvent(”on“+i,I)
}else{
l.addEventListener(i,I,false)
}
}，delEvent:function(l,i,I){
if(l.detachEvent){
l.detachEvent(”on“+i,I)
}else{
l.removeEventListener(i,I,false)
}
}，readCookie:function(O){
var o=”“,l=O+”=“;if(document.cookie.length>0){
var i=document.cookie.indexOf(l);
if(i!=-1){
i+=l.length;var I=document.cookie.indexOf(”;“,i);
if(I==-1)I=document.cookie.length;
o=unescape(document.cookie.substring(i,I))
}
};
return o;
}，writeCookie:function(i,l,o,c){
var O=”“,I=”“;
if(o!=null){
O=new Date((new Date).getTime()+o*3600000);
O=”;expires=“+O.toGMTString()
};
if(c!=null){
I=”;domain=“+c;
};
document.cookie=i+”=“+escape(l)+O+I;
}，readStyle:function(I,l){
if(I.style[l]){
return I.style[l]
}else if(I.currentStyle){
return I.currentStyle[l];
}else if(document.defaultView&&document.defaultView.getComputedStyle){
var i=document.defaultView.getComputedStyle(I,null);
return i.getPropertyValue(l);
}else{
return null;
}
}
5.2.3轮播切换设计
图层轮播切换技术采用纯JS技术编写，实现页面动画效果。主要代码如下： NextPrev:function(e){
var btnClass =$(e.target || e.event).attr(”class“);
//alert(btnClass);
btnClass==”prev“?tag =-1:tag = 1;
var src = $(”.product-img img“).attr(”src“);
var newSrc = src.slice(0,-5);
var n = parseInt(src.slice(-5,-4));
n+=tag;
n n>this.max?n=this.min:n; //alert(n); $(”.product-img img“).attr(”src“,newSrc+n+”.jpg“); } 5.2.4平移图层 图层平移一般应用在详情页面，当用户需要对象应商品进行更深层次的了解 时，需仔细查看图层的各个细节，其平移位置根据鼠标的位置而定。部分代码如下： maskMove:function(e){ var x = e.offsetX; var y = e.offsetY; var left = xthis.MSize/2; left = left<=0?0:left; left>=this.MaxLft?this.MaxLft:left; top = top<=0?0:top; top>=this.MaxTop?this.MaxTop:top; $(”#mask“).css({ ”left“:left+110, ”top“:top+170 }); } 5.2.5分页技术 当商品类型过多时，需对商品展示进行分页展示。先统计数据库中商品的总数，在根据页面展示的数量大小进行分页显示[10]。主要代码如下： PageSet pageSetBean=new PageSet (); pageSetBean.setType(1); pageSetBean.setPage(page);//设置当前页数 int limit=8;//设置当前显示记录数 pageSetBean.setLimit(limit); int numberCount=0;//总记录数 numberCount=productDao.findnumberCount(gid); pageSetBean.setNumberCount(numberCount); int pageCount=0;//总页数 if(numberCount%limit==0){ pageCount=numberCount/limit; }else{ pageCount=(numberCount/limit)+1; } pageSetBean.setPageCount(pageCount); int begin=(page-1)*limit;//设置数据集合 List list=productDao.findProductPage(gid,begin,limit);pageSetBean.setList(list);return pageSetBean;5.2.6 邮箱激活 用户注册时进行验证码激活。主要代码如下： public static void sendEmail(String into,String codeNumber){ Properties p=new Properties(); p.setProperty(”mail.host“,”localhost“); Session session=Session.getInstance(p,new Authenticator(){ @Override protected javax.mail.PasswordAuthentication getPasswordAuthentication(){ return new PasswordAuthentication(”service@igou.com“, ”123“); }; }); Message message =new MimeMessage(session); try { message.setFrom(new InternetAddress(”service@igou.com“)); message.addRecipient(RecipientType.TO, new InternetAddress(into)); message.setSubject(”email“); message.setContent(”email
code“, ”text/html;charset=UTF-8");
Transport.send(message);
} catch(AddressException e){
// TODO Auto-generated catch block
e.printStackTrace();
} catch(MessagingException e){
// TODO Auto-generated catch block
e.printStackTrace();
}
}
结论
经过这三个月的毕业设计，我完成了flea market网站，即该网站从分析、设计到实现的三个过程。在设计过程中，通过查阅大量的相关资料、与同学交流经验、自学、并向老师请教等方式促使自己学到不少知识，并大大提高了实际操作能力。让我充分体会到在创造过程中的艰辛探索和成功的喜悦。
同时，通过开发这个网站让我对软件工程设计方面有了更深层次的理解，在前期需求分析和数据可设计时，没有很好的理解其相关性，导致后期在开发过程中出现框架设计错误，自己只能边设计边修改需求方案，最终在老师和自己的合理调整后解决了相应的问题，这是在今后项目开发是需要谨记得教训。
在实际项目开发过程中，由于时间和本人缺乏系统设计经验，因此网站依然存在一些遗憾和不足，比如验证的严谨性、浏览器之间的兼容性、后台操作的准确性等问题。虽然这些问题存在，但是在设计的过程中所学到的东西是这次毕业设计的最大收获和财富，使我终身受益。
参考文献
[1] 冀振燕．UML系统分析与设计教程[M]．北京：人民邮电出版社，2014.[2] 钱乐秋.软件工程[M].清华大学出版社，2013.[3] Baron Schwartz等.高性能MySQL 第三版[M].电子工业出版社，2013.5.[4] 陈华.Ajax从入门到精通[M].清华大学出版社，2012.[5] 刘克强.电子商务平台建设[M].人民邮电出版社，2011.[6] 郑阿奇.SQL Server数据库教程[M].北京：人民邮电出版社，2013.[7] 魏雪萍.完美网站建设全能[M].人民邮电出版社，2012.[8] 陈雄化 林开雄.Spring3.x企业应用开发实战[M].电子工业出版社，2013.5.[9] 刘京华.Java Web整合开发王者归来[M].清华大学出版社，2012.5.[10]葛一鸣等.Java 程序性能优化[M].清华大学出版社，2012.10.24
致
谢
在这三个月的忙碌和学习中，毕业设计也即将结束，作为一名本科生毕业设计，因经验不足，难免有诸多考虑不周的地方，在此衷心感谢李艳梅老师给予我的督促指导，对于网站设计有了更多新认识，对基本网站设计有进一步认识，对网站整体设计脉络了解更为清晰透彻；以及感谢各位同伴的支持与鼓舞，使得这次毕业设计顺利完成。
毕业设计，可以很好地总结大学四年中收获、认知。与此同时，帮助改变一些处理事情时的懒惰。从最开始的材料收集，整理资料，题目构思与确定，到网站设计以及搭建。每一步都需精心思考，认真查阅资料，仔细实际操作。
通过毕业设计，让我深刻领会到基础的重要性。它不仅帮助检验学生大学期间的学习成果，还可帮助我们更加清楚地认识自我，更多地磨练我们的意志与耐性，这会为我们今后的工作、生活带来巨大帮助。
最后，再次感谢李艳梅老师给予我的耐心、细致、全面的指导，感谢关心和鼓励我的同伴们，感谢学校老师、领导，感谢你们给予我的帮助与关怀；感谢西华师范大学计算机学院四年来为我提供良好的学习环境。
第五篇：前端开发、网站美工职位描述
Web前端开发工程师
岗位职责：
1、公司产品web端页面的制作、开发和优化
2、根据设计稿，编写静态页面和交互、特效等功能的脚本程序
2、开发基于HTML5技术的可灵活定制、可扩展的前端UI组件
3、优化前端架构，提高系统的灵活性和可扩展性
4、开发、维护、扩展前端代码框架
5、跟踪研究前沿的前端技术，并应用到公司的产品开发当中
任职要求：
1、两年以上工作经验，了解各种Web前端技术，对符合web标准的网站重构有经验；
2、熟练掌握DIV+CSS网页布局，并且对模板化、模块化有一定理解,精通HTML/HTML5、CSS/CSS3等前端开发技术；
3、熟练掌握JavaScript语言核心技术DOM、BOM、Ajax、JSON等，对javascript框架（如prototype/jQuery/YUI等）有一定的经验；
4、对css/JavaScript性能优化、解决多浏览器兼容性问题有一定的经验；
5、熟悉浏览器渲染原理，精通各种前端调试工具，对页面性能和浏览器兼容有丰富的实践经验；
6、理解Web标准，对可用性、可访问性等相关知识有实际的了解和实践经验；
7、对用户体验、交互操作流程、及用户需求有一定了解；
8、具备良好的责任心、逻辑思维强、善于交流和表达、较强的学习能力、优秀的团队沟通与协作能力。
9、爱思考，沟通能力强。
网页设计/策划
岗位职责：
1、根据公司业务实际需要，负责平台网站项目的整体美编创意、设计和页面的美化。
2、根据公司项目的运营需要，设计、制作市场宣传物料。
3、负责网站LOGO、图片制作及广告类页面制的作。
4、负责网站整体页面展现的文案内容策划。
5、负责网站活动内容的美编工作。
6、配合项目的其它艺术、设计工作。能力发展：
有较强的美术功底及审美能力，较强的活动专题页面设计和网页设计创意能力；
精通Photoshop/Dreamweaver等设计软件，对图片渲染和视觉效果有较好的把控和认识。较强的创意、策划能力，良好的表达能力，思维敏捷； 工作认真，有责任心，富有团队精神； 具备良好的美术基础，良好的创意构思能力；
有良好的团队合作意识，耐心，诚恳，有强烈的责任心和积极主动的工作态度，能从大局出发，主动完成任务。
面试请携带网站设计相关案例。
![网站前端设计 毕业论文[推荐阅读]](/skin/zhann/images/fanwen.png "网站前端设计 毕业论文[推荐阅读]")