因心而造景-关于中国风ui的网页设计论文

因心而造景——关于中国风UI的网页设计artisticconceptioninmindaboutChinesestyleonUIwebdesigning专业：姓名：指导教师：申请学位级别：论文提交日期：学位授予单位：摘要就目前来说中国的网页设计一直趋向于欧美或者日韩风格之间，但是中国本身是一个多民族国家。随着时间的融合产生了自己在建筑、美术、饰品、服饰、文字等多个领域上独特的文化，这些独特的文化都是当今设计师眼中不可多得的宝贵素材。欧美的设计师以简练、严谨的风格著称，自然在网站的设计上也会收到影响，欧美网站的网页大多简介干练并没有多余的修饰元素；而日韩风格网页大多是采用柔和的主色调，在布局上中规中矩。相比欧美的网页显得比较淡雅。在功能上两种风格都比较偏向信息传播的实用性及功能性。以上两种网站风格都各有特色，值得学习。网页的设计与本民族的文化是密切相关的，国内的网页设计目前大多以中国的传统文化元素为主流，当中穿插一些欧美日韩的设计风格。但是就目前市场上已有的网页来说在展现中国风格的同时又难以逃离出元素生搬硬套的怪圈。界面设计——从诞生以来很长的一段时间都没有受到设计师过多的关注，随着这几年信息的飞速发展，人们对产品的要求也比以前高了很多，从功能到操作的界面都变得很重要，界面设计也因此受到设计师广泛的关注。一个操作简洁大方的主页会给人一个很好的感官享受，缩短人与计算机的距离，为卖家创造无限商机，同时用户能够最直观的感受到针对感官设计的魅力。本文正是对中国风与UI设计的结合而进行设计工作本设计面向的用户群众是青年一代的使用者，将网页的UI设计与中国风相结合。让用户在日常使用中能够更好的了解中国的传统文化，全面提升用户在浏览网站时的认知，带来不一样的主观感受的体验。当用户在浏览网页时不仅仅是在浏览自己想要了解的信息，更能体验到一种别样的感受，从而带来感官上的愉悦和满足，使用户感受到设计及中国传统文化的魅力。关键词：界面设计；交互设计；网页UI；数据库；中国风AbstractChina'smulti-ethnicintegrationprovidesdesignerswithdiversifieddesignmaterials,includingagreatdealofarchitecture,painting,decoration,traditionalcostumes,characters,patterns,culturalrelicsandsoforth,however,alotofwebsitedesigninChinatendstoswingbetweenEuropeandKoreawebsitedesignstyle.WebsitesinEuropeandAmericaadheretothesimplicity,plainandprecisenessofmodernism,withoutflamboyantcolorsandgaudydesignelements,andhomepageoftenuselargepicturesoranimation;Koreawebsitemostlyusesawhitebackgroundcombinedwithtinge,suchassoftlightblue,lightgreen,andtranslucentinterface,thegaugemedium-rangewebsitegraphiclayout,astrongpracticabilityandfunctionalityininformationdissemination.Abovetwostylesofwebsiteshavetheirowncharacteristics,anditisworthlearning.However,websitedesignstylehasacloserelationshipwithnationalcharacter,aesthetictendencyandevenlanguages.Ofcourse,manysiteswillcarryforwardChinesestylesandnationalandtraditionalcharacteristicsinideasandstrategies,butinpracticeitisdifficulttoescapetherutofsimpleandroughideasandslavishlycopiedelement.Interfacedesign,inthelongdevelopmentofsoftware,designershavepaidnoattentiontointerfacedesignwork,infact,softwareinterfacedesignisproducts’importantbuyingpoint.Asimpleandbeautifulinterfacebringsacomfortablevisualenjoyment,narrowingthedistancebetweenpeopleandcomputers,creatingasellingpointforbusinesses,andmeanwhiletheusercandirectlyfeelthecharmofthevisualdesign.ThisarticlewilldodesignworkwiththecombinationofChinesestyleandUIdesign.user-orientedmassofmydesignareusersoftheyoungergeneration,andwebsiteUIdesignwillcombinedwithChinesestyle.Ineverydayuse,theusercanhaveabetterunderstandingoftraditionalChineseculture,toenhanceusers’cognitionwhentheybrowseawebsite,andtobringthemdifferentsubjectiveexperience.Whenauserviewsapage,heisnotonlyjusttobrowsetheinformationtheywanttoknow,butalsocanexperienceadifferentkindoffeeling,soastobringasenseofjoyandsatisfaction,andenableuserstoexperiencethecharmofdesignandtraditionalChineseculture.Keywords：Interfacedesign；interactiondesign；webUI；database；Chinesestyle前言对于中国而言，在总结、吸收并借鉴其他国家网站设计的基础上，结合我国特有的文化是十分必要的，而中国风的网站正式一种很好的表达方式。中国审美观的独特风格。悠久的历史和独特的地形成了“多元一体”格式的不变的民族合营体。不论从民族学、社会学，还是政治学的方面来看，完整的历史成因才会造就中国人的审美心理。中国风是以中国传统文化为根本再辅之以开埠至今所吸收的外来文化而成，是顺应世界发展趋向的产物。把中国风的显现情势艺术化，在连年来特别是2008年以后，中国风开始盛行于各个范畴。中国风一词来源自中国五千年的历史进程，继而形成具有中国特色审美的独一无二的风格。中华民族的大家庭经过长期的历史发展形成了“多元一体”格式的超稳定的民族合营体；中国风不仅仅是来自于华族，更有来自于中国除华族以外的民族的彼此作用的成果。不论从民族学（人类学）、社会学，还是政治学的方面来看，华族与中国其他的民族都是从两个有差异的层次的看法，正是因为有完好无缺的历史进程才造成了现在中国人特有的审美方式以至在整个中国的文化演边历史中都是有特殊的历史文化原因和地区不同的因素。

中国风即中国的风格、在中国独有的盛行文化。把中国风的表现情势艺术化，真正的中国风应该是深入到生活傍边，是一种平淡的、内敛的生活态度，不论是什么与中国风相关的产品都是一种“展现”的方式，和西方的“展现”艺术的方式不同。特别是近年来不论是在文化还是在艺术上中国风都掀起了一股新的风潮。第一章绪论第一节网页UI设计的背景和意义Internet发展到现在已经遍布世界各个角落，将世界上不同的领域链接到一起，并且已经成为现今最大的计算机网络。WorldWideWeb(简称WWW)作为现在Internet上一种先进并且易于被接受的检索信息手段，发展速度自然也是十分的迅速，互联网现在已经成为全球信息最全的资源库。根据现有资料统计，已有上百万个Web站点在Internet上完成注册并已经上线，其内容范畴包含文化产业、科研教育、新闻消息、商业出版、贸易金融、娱乐、体育等多个范畴，也拥有着人数众多的用户群。由此可知web站点的建立对于一个机构来说是至关重要的。这些年随着计算机的发展，用户的需求也变得越来越丰富。数据库的出现满足了用户在很多方面的需求，此技术的出现Web站点服务也变得比以前更加人性化，内容也变得更加丰富[1]。但与此同时也就出现了这样的问题，在用户点击某网站的站点时一般来说只对站点中某些内容感兴趣，并且这种兴趣会保持很长的时间。这个问题很好的启发了开发者，加入能够按照用户的要求和喜好来设计出满足用户的页面，也就是意在重点表现用户所需要页面，这将使用户在使用时获得一种新的感受，而且这样的网页在于与同类网页的竞争中也显得更具有吸引力。现在针对这点某些大型网站公司已经做出了大胆的实验，现今通常所采用的方式是，在登陆时提供一些的设置网页显示的选项供用户在登陆站点时进行选择，方便用户能够根据自己的意愿进行设置用来浏览。但是仅仅通过登陆时让用户进行一些登陆设置来体现出一些个性化是远远不够的，并且让用户在了解一个站点具体内容之前让其对站点内容进行一些设置，结果有可能会显得过于粗糙。于是便设想出这样一种方案，根据用户点击的先后所关联的规则，这样，当一个主题被用户点击之后，一个相关的次级页面在系统中便能够自动生成，此中包含了该主题下用户经常点击的信息内容，就能够做出不用用户自己做出过多的设置就能满足用户需求的网站。本文主要通过Web前端的UI设计来展现出中国传统文化的博大精深。开发者不同，做出的网页也就不同。在网页UI的设计中，怎样才能把中国传统文化通过网也表现出来，也是我这次设计的主要内容。[14]第二节相关名词介绍HTML语言HTML5是超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要展示的网页中的各个部分。[9]其实网页文件自身也是一种文本文件，通过添加标记符在文本文件里，来告诉浏览器怎样来展示文本中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按照文本标记的次序来阅读文本以显示网页，继而依据标记符来解释并展示出文本标记的信息，对文本错误的标记将不指出错误的地方，且不会停止对文本进行执行解释的过程，开发者也仅能通过最后展示出来的结果以分析在哪里出错来进行改正。但必须注意的是，根据浏览器内核的不同，对相同的标记符可能会有完全不同的解释，因此就展现出不同的展示结果。[5]二、层叠样式表CSSCSS即是层叠样式表，是一种用来展现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS能够真正将网页格局展示与网页内容信息做到分离的一种样式设计语言。CSS相对于传统HTML的表现方式而言能够对网页中对象格局的位置排版进行很精确的位置控制，并且对于所有字体字号的样式几乎都支持，对网页对象和模型样式拥有强大编辑的能力，并且能够用CSS对网页进行初步的交互设计，是就目前来说基于文本展示中最优秀的展示设计语言。[6]CSS可以凭借开发者理解能力的不同，用来简化及优化语言写法，并且针对使用人群的差异，有着很强的的易读性。CSS可以分为外部样式表（将网页链接到外部样式表）和内部样式表（在网页上穿件嵌入的样式表）及内联样式（应用到各个网页元素）三种使用方法。外部样式表是当样式需要被应用到很多页面的时候所采用的理想选择。可以通过<linkrel=”stylesheet”type=”text/css”href=”mystyle.css”>来连接到外部文件。如图4-1所示内部样式表则是当单个文件需要特别样式是使用内部样式表进行单独定义，在head部分使用<style>标签定义。实现的功能是将当前网页内标签为pic的div标签的图片按特定尺寸显示避免图片过大溢出网页内联样式一般应用在当特殊样式需要应用到个别元素是，可以试用的内联样式。使用内联央视的方法则是在相关标签中使用样式属性，可以包含任何CSS属性。CSS和div的相互结合使用，是现在网页设计布局的主要方法。div用来展现内容，CSS则是来管理div展现的样子，使内容和变现变的更加合理，这样看来CSS和div可以看作网页的血与肉。[9]三、网页脚本语言JavaScriptJavaScript一种直译式的网页脚本语言。内置支持类型，是一种展示动态类型及弱类型且基于原型的计算机语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛应用于现今各大客户端的脚本语言。一开始仅是在HTML（标准通用标记语言下的一个应用）网页上来使用，以此来给HTML网页增加动态功能，随着发展现在被应用途径已经不仅仅局限在HTML之中。[7]JS用来为网页添加各式各样的动态功能，能很好的为用户展现出特殊的界面效果，通常来说JS脚本可以通过嵌入HTML之中来实现自身所要展示的功能，当然也可以通过外部链接到网页里便于管理。而且JS不依赖于操作系统，仅需要浏览器就能获得很好的支持，目前JS已被市场上大多是浏览器所支持。设计中的这个墨点边用到了JS技术，在鼠标进行点击标题操作时JS对点击做出相应的响应，进而展现出绚丽的效果。JS通过<script>标签来实现内部和外部链接。四、jQuery库jQuery是继prototype之后又一个优秀的库。它是一个集成了Javascript的轻量级的js库，它不但兼容CSS3，还兼容现今各种主流浏览器内核（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。正是jQuery的出现，开发者才能加方便地通过编辑HTML（标准通用标记语言下的一个应用）来实现特效，而且还能很好的提供对AJAX的支持。jQuery还有特别大的优势就是，它对文档的声明很齐全，并且各种应用也解释的非常详细，同时还有很多已经发展成熟的插件可以用来使用。jQuery可以使用户的HTML的页面代码和HTML的内容进行分离，也就是说，只需要在HTML中定义id便可插入应用命令，省却了在HTML中插入大量JavaScript代码的麻烦。jQuery本身是一个能够兼容多个浏览器内核的JavaScript库，核心是要实现用最少的代码实现最多的功能[8]。jQuery于2006年1月最开始由美国人JohnResig在纽约的barcamp发布，之后吸引了很多全世界的JavaScript好手加入并使其更加完善，由DaveMethvin带领团队完成开发完善。发展至现在，jQuery已经成为世界上最盛行的javascript库，在全球前10000个点击量最高的网站中有超过一半的网站在使用jQuery进行编辑来现动画效果。并且jQuery是免费、开源的，使用MIT许可协议。jQuery的语法简单，能让网页开发变得简单化，例如在文档的操作对象中选取DOM元素来进行编辑动画或处理对象的事件及AJAX的使用。除此之外，jQuery还提供PI让开发者用来编辑所需应用。方便开发者很方便的编辑出功能更强大的动静结合的网页。[7]jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。五、div标签div标签是网页布局中常用的标签，他可以自定义文档中的分区，把文档分割为独立的，不同的部分。不但可以用作严格的组织工具，还能不使用任何格式与其关联，将id或class来标记div，标签变得更加有效。div是一个块级元素，内容可以自动的开始一个新行，换行也是div固有的唯一格式表现。可以通过div的class或id应用额外的样式。div可以为文档添加了额外的结构。同时如果div属于同一种元素，就可以使用class=“news”来标识div标签，如果这样做不但利于在div标签中添加何时的语句来描述标签，还可以使用样式的方法来对div进行格式化操作。六、交互设计交互设计（英文InteractionDesign,缩写ID)，是用来表现和设计人造系统的格局的设计范畴。它包含了两个或多个能够互动的个体，之间用来便于交流的内容和结构布局，相互配合，以便达到用户要求的最终目的。交互设计的目的是为了努力去建立人与产品及服务之间的联系的同时创造出产品与服务的意义。以“在以社会复杂性为蓝本的物质世界中融入信息技术”为中心，交互设计可以从“可用性”和“用户体验”两个层面来举行分析，存眷“以人为本”的用户需求。交互设计的思维方法建构于工业设计以用户为中心的方法，同时加以发展，更多地面向行为和过程，把产品看作一个事件，强调过程性思考的能力，流程图与状态转换图和故事板等成为重要设计表现手段，但更主要的还是要掌握软件与硬件之间所实现的技巧及评估方式。交互设计是用来展是人与机械之间交流的界面。交互设计在二十世纪八十年代作为一门以交互体验为主的新学科诞生了，它是由比尔·摩格理吉（BillMoggridge）在1984年的一次以设计为主的交流会议上提出来的，他一开始以“软面（SoftFace）”来命名，因为这个名字很容易让人想起当时正流行的一种玩具“椰菜娃娃（CabbagePatchdoll）”，所以后来他就更名为“InteractionDesign”，即为现在所说的交互设计。[8]第三节创意来源自1840年鸦片战争被大炮打开国门以来，国人面对欧美事物之时总是会有种潜在的自卑感。中国是一个有着深厚历史积淀的文明古国，有着自己独特的文字、服饰、美术这些都是设计师眼中不可多得的素材。欧美的设计师以简练、严谨的风格著称，自然在网站的设计上也会收到影响，欧美网站的网页大多简介干练并没有多余的修饰元素；而日韩风格网页大多是采用柔和的主色调，在布局上中规中矩。相比欧美的网页显得比较淡雅。在功能上两种风格都比较偏向信息传播的实用性及功能性。以上两种网站风格都各有特色，值得学习。网页的设计与本民族的文化是密切相关的，国内的网页设计目前大多以中国的传统文化元素为主流，其中穿插一些欧美日韩的设计风格。但是就目前市场上已有的网页来说在展现中国风格的同时又难以逃离出元素生搬硬套的怪圈。[10]中华民族的传统文化积厚流光，中国的传统文化历史悠久，并且在绘画的思维方式和表现手法上，无不真切的反映出对自然、社会、政治、品德、艺术独特的理解。继承传统文化，并且将其推向世界，也是每个中国人心中所想。在科学飞速发展的今天，互联网已经成为人获取信息的最主要手段之一。[13]而能引起用户注意的则是出色的视觉效果、丰富的信息量、使用起来方便快捷的网页，这就显示出网页设计是及其重要的。随着社会时代不断的发展，网络已逐渐变成人们、发布、快速获取和信息传播的首要途径，它在人们思想、工作、日常生活等各个领域都有着至关重要的作用。浏览网页是用户获取信息的主要途径，由此网页的样式也陪伴着网络的迅速发展而变得至关重要，网页的UI设计也随之快速鼓起。由于人们日常使用网络的次数日益增加，网页UI设计也就变得至关重要。而网页UI最重要的便是结构的布局，其功能主要就是要按照一种根据用户的想法而定的方式展现给每个用户，更加方便的让用户能够快速的认识所浏览的网页包含的内容。中国有句古话叫，“一方水土养一方人”不同的地区所流传的文化是不同的。大到历史传统，风土人情；小到“乡音难改”。从分析中国语西方的设计差异及文化的融合得知，可以得出最重要就是弄明白中国与西方设计文化中区域的差异。在地理位置上，社会上普遍认为，中国文化即是指拥有中国独有的传统文化，而西方文化指的是以西方文明为蓝本的文化。[11]同样在相同文化的设计上，文化的差异更是因为地域的差异、时空的差异而形成了中国与西方文化极大的差异性。第二章设计流程第一节设计背景中国人有着自己深厚的传统文化底蕴，从古至今在文化上已经形成了一套属于自己的体系，植根于充满内涵的东方文化。但当前世界的文化有一个特征，一方面是文化的趋同，另一方面是提倡个性的觉醒和对特性的需要和追求，两者是相互关联的。文化的趋同从某个方面来说是必然的，总体来说是积极的。但是这种趋同的现象，其实并不是各国文化简单糅合到一起的结果，而是以某些富有地区为中心的，这些地区的知识、技能等方面占统治的地位。这种统一，虽然可以促进符合东西的融合，破坏抵制的东西，但是在这种大潮流的文化下，却也导致了中国传统的文化在整体上收到了不同成都的外来文化侵蚀。随着现在许多大同小异的风格开始在国内迅速增多，全球化的影响慢慢已经对当今的设计风格产生了很大的影响。另一方面随着城市化的成长，人们的生活节奏也不停的加速。当今年轻人对审美的要求也变得日新月异。从二十一世纪开始，人类便迈入了“信息爆炸时代”，各种形式都可以成为信息的传播方式。尤其是Internet的兴起，让信息之间的交流达到了新的高度。道琼斯高级副总裁贺开宇在国际广告大会上曾说过“在中国，我能真切的感受到这里信息的爆炸，伴随着新世纪的到来，人们在展示自己的同时也获得了新的选择。”这不仅仅代表着人们可以获得新的选择机会，网页设计也是一样。在这样一个信息爆炸的年代，我们每天都会接收到海量的信息，浏览web已经成了日常生活中必不可少的一部分。见得多，思考的也就多，进而创新的想法就更多，思维自然也会随之更加活跃。[15]目前随着民族意识的复兴，社会上掀起了中国风的浪潮。随着发展国人变得自信，自身民族的意识也不断觉醒，民族意识的觉醒也迫使了设计师在设计中大量投入包含“中国风”的元素。[12]此设计正是在这样的背景下设计出来的。第二节面向对象设计一个网页UI，使用户面对网页的浏览变得不再枯燥乏味。随着信息的飞速发展，网络与人们的生活已经变得密不可分。因特网的出现更是加快了世界各地之间的交流，在这个大环境下，年轻人接受新鲜事物远远要比上年纪的人容易的多。通过因特网中国的年轻人可以和其他地方的年轻人联系，可以了解到最新的潮流，这对于年轻人来说是特别有吸引力的。根据2013年、2014年两年的网民年龄调查显示，年轻人是目前因特网使用的主力军,如图2-1所示。图2-1网民年龄构成比例图通过图2-1可以得出20岁—39岁的年轻用户，更喜爱在日常生活中浏览网页，对于网络产品需要也更多，因此设计风格更偏向年轻人。第三节设计思路网络在为人们提供所需要的信息同时，用户对网络功能的要求自然也是越来越多，对于界面的要求也从功能慢慢变得要美观。在视觉享受上、用户交互的需求也变得与日俱增。设计主色调采用黑白结合，意在体现中国传统的太极阴阳调和思想，太极意指时间万物皆可分为阴和阳，以及表与里的两面。而且它们之间的斗争既是相互对立的优势相互依存的，这也是世界的定律，同时也是许多事物的主题和源头[12]。过多的色彩反而可能会引起用户的审美疲劳，相反简单明了色彩可以让人一眼明了，更加直白的看到网页所展示的内容。背景图运用了中国绘画中的传统的白描技法，用单色的墨线勾勒出形象，不藻修饰与渲染烘托，寥寥数笔准确精炼的表达出想要展示的效果。内容的题材则是选用了更偏向年轻人审美观的画，没有选用中国画中传统的表现方式。随着时代的发展，人们对美的要求也在不断变化，在历史的长河中中国一直以独特的东方魅力影响着世界。中国的审美也是与欧美等国家有着很大的区别，但是近些年随着网络不断发展，大量的外来文化也在潜移默化的影响着中国的审美。这次采用的背景图也正是结合了外来审美与中国的审美而绘制的，意图给用户带来一种新的感觉。以求一种耳目以新的感觉。设计的主要字体使用了中国传统的隶书，隶书是中国现代汉字的雏形，起源于秦代兴于东汉，有着深厚的历史积淀和文化底蕴。隶书端庄典雅大方，对中国书法的影响有着不可小觑的作用。主页面的设计如图2-2所示：图2-2主页面设计图首页标题为浏览菜单，可以方便用户的更好的了解网站的所含的能容并且能快速的找到自己感兴趣的网页，如图2-3所示:图2-3首页标题图标题背景为水墨渲染，体现出中国传统的水墨文化，右侧则是网站的主要板块标题，想用户展示网站中主要模块的内容，点开模块菜单会出现一个下拉菜单，进一步向用户展示模块内的子页面如图2-4所示：图2-4子页面图下拉菜单中包含了模块子内容，再点击链接即可快速链接到子网页上，方便用户查找。内容部分的排版运用了纵向排版的方法，古人自上而下书写，体现了尊卑的思想，标题栏下则是首页的主体内容，采用了“三分天下”的布局，用户首先看到的是网站的标题名字，标题背景则是一朵盛开的莲花。中国人自古爱莲，古人更有爱莲说之名篇，传诵至今--“出淤泥而不染，濯清涟而不妖”。这也正是我国传统文化中所提倡的高洁的品质，也间接的体现出中国的传统美德。紧随标题的是上下两层的浏览界面，上面一层是实时信息的浏览，为用户推送第一时间的信息。具体内容分为六个标题，分别为信、文、示、讯、友、赏，分别表示新闻、文章、公告、资讯、同城、鉴赏六个模块，点击小标题时还会出现在标题上出现墨痕，如同一根沾满墨汁的毛笔点过一样，给人一种洒脱快意的感觉。同时书法也是我国的国粹，在标题中加入书法元素，不但能够从侧面表现出书法的魅力，同时也有于在年轻人浏览网页时能激起其对中国书法的兴趣，将书法艺术延续下去。下层则是网站各个模块的大标题，分类展示，整齐划一。如图2-5所示图2-5模块标题图标题效果也同样用了书法的效果。不过这次不是用笔点了一下，而是用笔快速写下的一笔，收笔出墨迹已呈现出干竭之势，大有一种不拘一格洒脱的气势，与上一层的点一笔形成鲜明的对比。首页的背景图怎是采用了一位眼神有些哀怨、惆怅的古典美人卧在荷塘之中的场景。全图只略施颜色在莲花尖及美人嘴唇之处略加红色，眨眼看去有些忧伤。之没有选择过多上色的背景图，是因为一千个人心中，有一千个哈姆雷特，每个人的想法是不同的。心里对美的理解也是不一样的，古语：“因心而造境”看似简单的一句话，却蕴含着深厚的哲理。就像一抹风景，不同的心境会有不同的意境。现实中人们可能对生活状态不满，一山望着一山高，却往往忽视了身边的快乐。没有过多上色的背景图在不同人眼中也有不一样的画面，可能会想象出绚丽的颜色，也可能会想到压抑不乐，图中内容，一位在荷塘潜卧的古典美女，“窈窕淑女，君子好逑”中国人自古对美女的向往是很狂热的，然而又有多少英雄豪杰是在美女的石榴裙下折腰。这也引人深思，用这个背景我想向用户展现出意境有心而生，同时面对美女的之前也要有一个心中的“境”。首页的下方是一个视频展示的模块，用比较直接的方式向用户展现出中国文化的魅力。视频播放器能对视频进行暂停全屏播放快进快退的一系列操作。二级网页总体布局如图2-6所示图2-6二级页面图左侧是采用了从左至右的排版顺序，古人左为上，右为下以左为尊。左边是导航栏，右边则是显示网页内容。点击标题下连接则会进入下一层主页面对用户想要浏览的内容进行详细的介绍。第三章设计实施—网页开发环境概述第一节网页开发的环境计算机的开发环境是微软公司的windows10，浏览器内核是系统自带的IE11。Windows系统是现在市面上的主流系统之一，由微软公司开发有着很好的兼容性和开发环境。测试所用浏览器是Windows自带的IE11浏览器，IE内核是现在市场上的主流浏览器内核之一，在不同的浏览器内核之间，同样的HTML语言显示出来的效果会有一些差距，有的可能还会无法正常的显示。面对这些情况自然就要针对不同的浏览器进行调试和个别代码的编写。本网站设计所采用的主要语言是HTML5，为了能够更好的展示网站的效果在分类浏览处和论坛处加入了基于JSP技术的一些内容。所以运行本网站，计算机要在装载Java的jdk的，并进行环境变量的设置。在计算机上安装JSP引擎，tomcat服务器。当然计算机上也要装有浏览器，本次所用的IE内核的浏览器。[2]第二节网页设计工具notepad++本次设计主要使用的开发工具是notepad++，作为WINDOWS中的“记事本”程序。Notepad++在WINDOWS下可以很好的完成文本编辑。并且大小与Windows写字板的文字编辑功能相当。不但运行起来方便，软件本身所占的内存也小、软件所占资源也不大，而且还支持很多程序开发语言，例如C++、C#、Java等主流开发语言；支持HTML、XML、ASP，Perl、Python、JavaScript等网页/脚本语言。并且Notepad++做为众多程序员最喜爱的开发工具之一，像语法着重显示，语句折叠，宏等开发工具常用的功能一个都不少。本设计中的HTML、JavaScript、CSS的编写都是在notepad++中完成的。第三节图像设计工具Photoshop和Sai设计中的图片美化是由Adobe公司开发的Photoshop来完成的。通过DTP和图像软件的结合，让设计师可以直接在电脑上直接完成对图像处理的全过程，开创了一个以“电脑平面设计”为主的时代。Photoshop的专长在于图像处理，而不是图形创作。图像处理是指对已有的数字图像进行不同程度的加工处理来达到要求的效果，可以看出其重点实在对数字图像的处理加工；而图形创作则是要是根据设计者的思想来进行从零到有创作。绘制图稿的工作则是由日本SYSTEMAX公司制作的Sai来完成。Sai的操作简便，绘制的线条流畅，绘制图形比Photoshop要显得人性化许多，可以进行任意旋转、反转画布，在进行缩放时显示效果可以反锯齿。Sai还拥有强大的墨线功能，手抖修正功能，有效的解决了用数位板进行绘图师最大的问题。Sai还拥有矢量化的钢笔图层，能画出流畅的曲线，在绘制线稿上市一款很棒的绘图软件。第四节网页设计总体规划制作网页的步骤首先确定网页主题，然后查阅相关背景资料，再结合自己所学的知识确定网页应有的特色，进而设计出初步外观第一步制定草图，在Sai中设计出网页的初始稿样，方便制作网页的大体框架，初始设计如图3-1所示：图3-1初步设计草图设计好大体轮廓以后便开始设计。目录层次结构如图3-2所示：图3-2目录层次结构图完成这些之后就开始着手网页的制作，首先进行主页的编辑根据设计的草图，主页可以大致分为三个大的div板块，所以先编辑三个div并进行class的命名。最上方的div为标题菜单，下一层为首页菜单，最下一层为视频播放器的div。接下来再在首页菜单div内添加三个div作用标题分别为网页标题，新闻板块，网站的次级网页链接板块。其中在新闻板块内，因为设计成可以翻动的设置，所以在新闻板块的div中还要在加入新闻分类板块的div数，在新闻板块上方在编辑一个div框用来添加标题，新闻之间标题用<li>标签来进行分割。主标题div内添加两个div标签一个用来填写标题，一个用来添加标题背景图。做完这些之后主页的div框基本完成。div框编辑完成之后开始运用CSS来进行修饰。首先对class为主标题的div大小进行编辑，主标题内的标题两个div宽度设置为一致，位置设置成偏左这样就会显示出左侧显示标题的效果。接下来设置div的高度，两个div的高度相加总和为最上方div的高度，接下来开始设置新闻模块的div，新闻标题的div与内容的div宽度为一致，并且新闻标题的div与主标题的div宽度相加为首页菜单的总和，同理对网站次级网页链接的板块进行同样的编辑完成这些之后便可以看到设计草图中的初步效果，不过此时的新闻浏览还是一个列表，不能进行分页浏览。完成div和CSS的布局编辑之后便开始添加JS语句来进行修饰，首先对新闻列表进行编辑，从外部链接jQuery-1.8.3.min来进行修饰，通过定义div的位置来讲新闻列表的div进行重叠。然后不同的模块对应不同的列表内容，点击标题相应的div便会显示。接下来开始对标题菜单的div进行编辑。根据图4-2目录层次图标，标题菜单div可以分为六个大块分别为：主页，墨烛剪影，丹青妙笔，青史长存，评说天下，青梅煮酒。其中主页用于来链接次级网页与主页之间的快速导航，其他五个模块对网页的次级网页进行快速导航。编辑好这些，开始对除了首页div之外的五个div进行子菜单div添加。添加完div之后便开始进行CSS的修饰这些div的宽度都设置成一个宽度，出了首页之外的五个div模块都有一个下拉菜单功能。这需要在这五个div模块中添加一个内嵌JS通过隐藏次级网页的div，点击时会显示出隐藏的div表单的来实现菜单的下拉效果。之后开始对表单的CSS进行编辑完成这些之后首页的div标签设置已经完毕，在浏览器中打开，可以看到首页的框架已经初步完成接下来便是通过jQuery来进行编辑。jQuery是一个控制器的集合体，通过从网页中少量的函数来定义jQuery控制器的id、属性以及调用域来是现实所实现所需要的功能。先将时间进行移动到一个位置进行展示，定义点击事件时，<li>标签对应的元素就会进行移动，来进行显隐控制，之后再通过class来传到当前变量时间，来达到txt文本的移动，接下来定义当前变量显示在主页，这样就会出现点击效果。要完成翻页效果还要进行循环定义，当第二个事件被点击时原本的class便会被走，循环选择当前变量，这样就会实现翻页的动画效果。然后开始对视频模块div进行编辑视频的添加使用的是html中的video标签来进行编辑的。通过标签来调用浏览器中自带的播放器以完成视频播放。完成这些之后便可以将网页导入eclipse中，来完成论坛功能和新闻列表连接数据库进行显示的功能。将编辑好的HTML格式改为jsp格式，打开内容为论坛的子网页添加数据库的链接代码，然后再创建一个Java文件来定义连接数据库，读取数据库，显示数据库内容的类。打开内容为论坛主页的网页添加新闻列表接入数据库代码，然后创建Java文件进行类的创建。实现新闻列表读取数据库内容，通过数据库来管理新闻内容。[4]此外还要给网页中填入各种元素来完善网页。二、网页包含元素的制作不论是作为第一次设计网页的新手开发者，还是作为一个资深的开发者，在最开始都必须从了解构成网页的基本元素开始。通过了解网页的基本元素，才可以在后续的设计和编辑中做到手到擒来，依据用户的需求经过编辑来达到最后的目标，最后完成网页的设计。信息的展示是网页所要展示的主要内容之一。网页是由包含信息内容的文本和与之相匹配的图像两个基本部分组成的，网页之间最主要的是超级链接，恰是通过超级链接才可以将万维网中多个网页链接到一块，加入不是通过超级链接，网页自然也就成了摆设了，此外多种信息的组合及展示方法，以及人与机械之间的交互的元素都在网页中有着无法替代的地位。本网页中包含的元素如下文本文本一直以来都是人类用来展示信息的重要方式之一，当然网页中的主要内容也是文本信息，与图像比起来，虽然图片比文字更能给用户浏览时提供更好的视觉享受，但是想要准确的展示出内容消息还是文本更好一点，为了更好的展示出网页的文本内容，开发者给予了文本新的属性而不是普通的中规中矩的字体，在网页中字体可大可小，颜色也是可以随意变换，还能加上底边和边框加强重点信息显示，通过这些让网页变得更加绚丽多彩配合图片能更好的展示出文本内容。因此开发者在网页设计可以通过各式各样的文字图片来清晰的展示给使用者，无疑这些功能的使用赋予了网页一个新的生命。本次网页中的文本内容是通过书籍查找，及互联网摘查来完成的。文本的字体采用了隶书来书写，运用<font>标签来进行实现的，通过来定义CSS的属性达到字体的变换。主标题的投影效果也是用CSS来完成的，text-shadow属性可以用于创建投影字，投影指的是比文本颜色更暗的版本，它位于文本的后方并略有偏移。该属性还可以通过添加亮度比文本稍高的阴影来创建浮雕效果。由于创建投影需要指定三个长度值和一种颜色，因此该属性的值比较复杂。第一个长度值表明一个阴影向左或向右延伸的距离，第二个长度值表示阴影向左或向右延伸的距离，第三个长度值为可选项用于指定投影的模糊程度，最后来设置投影的颜色值。目前text-shadow属性的使用非常流行，但是内核老旧的浏览器还无法支持该属性。文本之间的间距也是使用CSS来完成的，使用letter-spacing和word-spacing属性来完成。属性的值由em值来指定，而且所指定的值会加到字体默认单词间距上，单词默认的间距是由字型设定的，当字型是粗体时增加字体之间的间距可以提高文本的阅读性。图像图像在网页中既可以展示作品也可以用来表达信息，当然最主要的还是起到装饰作用，很好的展现出网页想要展示的风格。开发者可以降jpg、gif、png三种图像的文件格式添加到网页中，当中使用最多的便是动态的GIF图和JPEG图片这两种图片。本网页中所用的背景图都是原创采用Sai软件来进行绘制，并使用PS来进行修饰编辑。绘制主页背景图时先创建图层1绘制一个草图结构，然后创建图层2覆盖在图层1上将图层2透明度调至50%，选用毛笔笔刷进行人物身体线稿绘制。再创建图层3覆盖在图层2上绘制人物的头发，创建图层4绘制人物眼睛，创建图层5绘制人物鼻子，创建图层6绘制人物嘴巴，创建图层7绘制背景图，多个图层来进行绘制可以更加便利的调整人物的造型，便于修改完成绘图后将图层合并成一个图层，保存成jpg格式运用background属性编辑成网页背景图。如图3-3所示图3-3背景图绘制截图绘制次网页背景图是选用值笔笔刷来进行绘制，值笔笔刷可以模仿出水墨画中泼墨的质感。水面的渐变色则是使用水彩笔刷，先用浓色的笔刷画出颜色重的地方，然后再用水彩笔刷向颜色浅的地方擦就能穿线水墨画中浓淡渐变的感觉了。绘制玩这些图片之后还需要用photoshop来进行图片美化，在photoshop中打开图片对其进行滤镜，颜色的美化。完成上述工作之后便可以将图片插入到网页之中来修饰网页，加深网页的主题。（三）超级链接互联网能够快速流行起来与超级链接技术的普及是密不可分的，它可以把一个网页链接到另一个网页，网页可以指向其他网页也可以在同一网页上的其他位置，这个连接通常是连接到其他网页，当然也可以连接图片或者邮件地址或者本地文件程序。文本通常是超级链接的载体，图片或图片中的区域也可以成为载点，也可以连接到特定的脚本程序。当使用者点击超级链接时，其所链接的网页便会展示给使用者。不同的网页用不同的方式来完成链接，比如，当一个包含视频文件的超级链接被用户点击以后，便会链接到媒体播放软件进行打开当然如果连接指向了一个网页然后这个网页就会展现在使用者面前。表格网页展示信息的布局方式是用网页里的表格来完成的。这包括两方面：一是使用行和列来编辑展示出文本及图像数据；二是还可以使用表格来精系规划。本网页中首页与次级网页之间的链接通过超级链接来完成。将所要链接网页的地址填写在<a>标签中，运用html中的href属性来完成链接已达到网页之间的关联。三、网页设计主要代码展示网页设计先进行div标签的搭建首页主要代码如下所示：<divclass="header"><!--header-title开始--><divclass="header-title"><h1><fontstyle="font-family:'隶书';">国风</font></h1><imgsrc="./images/logo.png"></div><!--header-title结束--><!--header-content开始--><divclass="header-content"><!--header-content-menu开始--><divclass="header-content-menu"><divclass="header-content-menu-li"></div><divclass="header-content-text"style="hieght:300px;scroll-y:true;"><%StringnewsType=(String)request.getAttribute("newsType");%><inputtype="hidden"id="newsType"value="<%=newsType%>"/><ul><%List<News>newsList=(List<News>)request.getAttribute("newsList");Newsnews=newNews();for(inti=0;i<newsList.size();i++){news=(News)newsList.get(i);%><li><fontstyle="font-family:'隶书';"><%=news.getNewsName()%></font><spanclass="time"><%=news.getNewsCreateDate()%></span></li><%}</div>以上是主页的主要代码显示主要展示了首页框架div的标签布局。标题目录编辑div如下：%></ul><divclass="header-content-title"><ul><ahref="sub.jsp"><liclass="tilte-select"><divclass="text"><fontstyle="font-family:'隶书';">墨烛剪影</font></div></li></a><ahref="sub.jsp"><li><divclass="text"><fontstyle="font-family:'隶书';">丹青妙笔</font></div></li></a><ahref="sub.jsp"><li><divclass="text"><fontstyle="font-family:'隶书';">青史长存</font></div></li></a><ahref="sub.jsp"><li><divclass="text"><fontstyle="font-family:'隶书';">评说天下</font></div></li></a><ahref="book.html?arg=3"><li><divclass="text"><fontstyle="font-family:'隶书';">煮酒青梅</font></div></li></a></ul></div><divclass="toutiao"><divclass="container1min-width"><divclass="container2min-width"><divclass="header1"><divclass="header_nav"style="background:url(images/biaoti.jpg);"><divclass="header_nav_contain"><divclass="top-nav"></div><divclass="top-navtop-nav-spc"></div><divclass="top-nav"><divclass="top-nav-main"></div><divclass="top-nav-second"></div></div><divclass="top-nav"><divclass="top-nav-main"></div><divclass="top-nav-second"></div></div>以上是标题菜单的div标签格局代码。标题下拉菜单div如下所示：<divclass="top-nav-second"><divid="alert_win"style="display:none;"><divid="mask"style="top:0;left:0;position:absolute;z-index:1000;"class="bg"></div><DIVclass=beian_winBGid=beian_popup><divid="divOneStep"style="z-index:1002;width:98%;height:520px;position:absolute;border:#6666662pxsolid;"><divstyle="width:100%;height:20px;border-bottom:#0000ff2pxsolid;text-align:right;"><ahref="javascript:;"onClick="alert_win.style.display='none';">点击关闭</a> </div><div><iframewidth="100%"height="500px"frameborder="0"scrolling="auto"src="../html/bgmusic.html"></iframe></div></div><divstyle="z-index:1001;position:absolute;width:100%;"><iframeid="frmOneStep"width="100%"height="200px"frameborder="0"scrolling="no"src="about:blank"></iframe></div></DIV></div>以上是标题菜单下拉的div标签布局。href="javascript:;"onClick="alert_win.style.display='none';"这段代码是隐藏菜单div的代码点击隐藏div属性。[3]实现新闻列表接入数据库代码如下：conn=DBCon.getConnection();StringlistSQL="select*fromnewswherenewsType="+newsType;List<News>newsList=newArrayList<News>();try{PreparedStatementpsmt=conn.prepareStatement(listSQL);ResultSetrs=psmt.executeQuery();while(rs.next()){Newsnews=newNews();news.setNewsName(rs.getString(3));news.setNewsCreateDate(rs.getDate(4).toString());newsList.add(news);}mit();returnnewsList;}catch(Exceptione){e.printStackTrace();}finally{if(conn!=null){try{conn.close();}catch(SQLExceptione){e.printStackTrace();}}}returnnewsList;<%List<Message>messageList=(List<Message>)request.getAttribute("messageList");Messagemessage=newMessage();for(inti=0;i<messageList.size();i++){message=(Message)messageList.get(i);%>上段代码是通过接入数据库来到处数据库中存储的列表数据，用来进行分栏显示。并且随着数据库更新，新闻列表也会进行更新，更加方便管理。留言功能接入数据库代码如下所示：<%List<Message>messageList=(List<Message>)request.getAttribute("messageList");Messagemessage=newMessage();for(inti=0;i<messageList.size();i++){message=(Message)messageList.get(i);%>留言板接入数据库代码如上所示，通过接入数据库来实现用户留言的记录储存功能。并且通过数据库存储的数据来向用户展现之前用户的留言。新闻翻页浏览功能实现代码如下$(document).ready(function(){ $(".header-content-text").hide(); $(".header-content-text").eq(0).show(); $(".header-content-menu-lili").click(function(){ $(".header-content-menu-lili").removeClass(); $(this).attr('class','select'); $(".header-content-text").hide(); $(".header-content-text").eq($(this).index()).show(); });上述代码是实现将新闻div整合在一起，分为几个板块，点击板块标题来实现，新闻翻页的功能。这样做不但节省了网页空间而且让网页更加美观。新闻标题点击实现水墨效果代码如下：<scripttype="text/javascript"src="./js/jquery-1.8.3.min.js"></script>$(".header-content-titleli").click(function(){ $(".header-content-titleli").removeClass(); $(this).attr('class','tilte-select'); });上述代码为实现点击实现水墨效果代码，通过运用jQuery框架来实现，通过点击标题时与未点击时不同的时刻来改变图片的边距实现点击时的水墨效果初显。论坛留言功能代码如下：<divclass="message-content"><p> 姓名：<%=message.getUserName()%>       电话：<%=message.getPhoneNumber()%> </p> <p> 时间：<%=message.getTalkTime()%></p> <p> 内容：<%=message.getTalkDetail()%></p> </div> <%}%><divclass="input-area"><ul><li><p>留言板</p></li><formaction="book.html?arg=4"method="post"><li><inputtype="text"name="userName"placeholder="姓名"><inputclass="message_tel"type="text"name="phoneNumber"placeholder="电话"></li><li><textareaname="talkDetail"></textarea></li><li><inputtype="submit"name="submit"class="message-sub"value="提交"></li></form></ul></div></div>上述是论坛前台代码，通过接入数据库来实现留言板的存储。论坛代码后台如下：privateStringuserName; privateStringphoneNumber; privateStringtalkDetail; privateStringtalkTime; publicStringgetUserName(){ returnuserName; } publicvoidsetUserName(StringuserName){ this.userName=userName; } publicStringgetPhoneNumber(){ returnphoneNumber; } publicvoidsetPhoneNumber(StringphoneNumber){ this.phoneNumber=phoneNumber; } publicStringgetTalkDetail(){ returntalkDetail; } publicvoidsetTalkDetail(StringtalkDetail){ this.talkDetail=talkDetail; }publicStringgetTalkTime(){ returntalkTime; } publicvoidsetTalkTime(StringtalkTime){ this.talkTime=talkTime; }以上代码为论坛的代码先定义数据库的项，再将定义的值链接到数据库进行记录显示。在通过前台显示后台程序的结果。视频播放代码：<videosrc="video/01.mp4" poster="images/01.png" width="525"height="300" preload controls autoplay loop> </video><videosrc="video/01.mp4" poster="images/01.png" width="525"height="300" preload controls autoplay loop> </video> <videosrc="video/02.mp4"poster="images/02.png" width="525"height="300" preload controls loop> </video>上述是视频导入接入的代码，通过video标签来进行视频的导入。Preload为告诉浏览器要加载什么，一共最多可以选择三个值分别为“none”表示用户在按下播放键之前，浏览器不必加载视频内容；“auto”表示浏览器在加载页面时，载入视频；“metdata”表示浏览器只需收集少量的视频信息，比如大小，首帧图像、播放列表和持续时间。Poster为视频加载时在视频播放之前，用于指定在播放器中显示一个图像。Autoplay表示使用视频文件自动播放。Controls表示使用浏览器需要提供默认的播放控件。Loop表示视频播放结束后循环播放。第四章关键问题第一节数据库的接入数据库的接入让本网站的表现功能更加玩善能够实现，它的设计好坏直接影响着整个系统的质量。接入数据库以后能够更好展示论坛功能及新闻列表展示功能。本次设计中共建立了两个数据表分别为message和news，其中message用于论坛记录数据，news用与记录新闻列表进行更新。首先在数据库中先建好一个表用来显示存储上传的数据如图4-1所示：图4-1数据存储表图该表是用来存储论坛留言的数据库，存储和显示用户的留言。存储好用户的留言后便可以将其链接到前台的界面进行显示。具体代码如下:<% List<Message>messageList=(List<Message>)request.getAttribute("messageList"); Messagemessage=newMessage(); for(inti=0;i<messageList.size();i++){ message=(Message)messageList.get(i); %>将一个数据库的列表接入到网页的输入框及显示列表里。收集用户输入的信息进行储存方便删除，修改等工作，同时也便于管理信息。记录集是动态网站必须要考虑的问题，因为记录集包含了一个或多个从网页里收集到的内容。在记录集中查询信息是极为方便的所以管理好记录集是极为关键的。建立新闻列表进行新闻数据的显示如图4-2所示：图4-2新闻数据表图接入数据库代码如下：<%StringnewsType=(String)request.getAttribute("newsType");%> <inputtype="hidden"id="newsType"value="<%=newsType%>"/><ul> <%List<News>newsList=(List<News>)request.getAttribute("newsList"); Newsnews=newNews(); for(inti=0;i<newsList.size();i++){ news=(News)newsList.get(i);%>数据库中所用函数值对照表如下：新闻数据表4-1所示表4-1新闻数据表newsIdnewsTypenewsNamenewsCreateDate新闻id新闻所属模块新闻标题新闻创建日期留言信息数据表4-2所示表4-2信息数据表messageIduserNamephoneNumbertalkDetailtalkTime信息id使用者姓名使用者电话发言内容发言日期数据库与后台与前台连接示意图如图4-3所示:图4-3前后台连接示意图第二节JS的调试和编辑JS编写完成以后还要进行一系列的调试，以达到更加完善的效果。我使用的是谷歌的chrome浏览器进行的调试。打开需要测试的页面，按下F12打开调试工具。在调试窗口中所有的HTML都会呈现在调试窗口之中，调试过程中还能指定dom节点进行查看和编辑能够在浏览器中的JS进行逐步的调整。例如自己想要的效果，可以先假设怎么能实现他的方法，在根据设想进行思考，列出可以实现的算法。例如实现鼠标点击标题时会有水墨效果的JS便是先给标题创建div标签，之后再给标签添加背景图。如果能够在鼠标点击时再让背景图来移动，就会出现鼠标点击与未点击时的背景效果不同的效果，但是要实现图片的移动是很困难的，换个方向来想就可以用改变边距的方法来实现。通过改变边距来实现点击鼠标与未点击鼠标时的背景图变换效果，在浏览器中调试编辑可以对实现效果需要的边距进行一步一步的调试，以达到最后想要的效果。当然所需要的图片也是需要经过进行特定的尺寸裁剪，这也是为何我们在网上直接下载保存的图片尺寸都很难达到自己满意的要求的原因。在设计鼠标滑过标题菜单会出现下拉菜单的效果是，也是如此。假设如果菜单本来存在。只是被div和CSS设置所覆盖了，当鼠标划过时则会让被覆盖的div标签显示出来及会出现鼠标划过时会有菜单下拉下来的效果。想起来简单但是实现起来却比较困难，我是这样实现的找到两个相邻的标题div，让两个div获取鼠标划过时的焦点，便改变下面div的CSS使标签显示出来。这样就能得到鼠标划过时出现下拉菜单时候的效果。下拉菜单效果如图4-4所示：图4-4下拉菜单效果图视频播放功能则是引入了jQuery框架，用jQuery框架增加了视频的播放功能点开网页就能播放不需要安装任何插件。第三节CSS的调试CSS是网页的美容师，布局调整都要用到CSS来实现相比普通的<td><tr>标签来编辑网页，div加CSS编辑能避免随着网页缩放出现的网页布局问题。CSS能使网页内容随着缩放而变化，并且调整和排布起来也有序的多，能大大减少工作量。调试同样在浏览器里进行，对div的布局进行调试结合网页显示效果调整div的之间的距离。作为初学者对网页里px的概念还不是很熟悉，不能依靠经验进行快速的定位，虽然在调整中遇到很多困难，但是通过不断地尝试，得到了最后展现出来的网页效果。达到自己满足的要求。第五章网页测试第一节测试及展示网页所实现的功能及框架完成以上步骤就是对网页进行最后的测试，由于网页中运用了一些jsp技术所以需要在Java环境中运行网站实现的功能有首页导航快速导航浏览，新闻列表连接，论坛讨论功能，及视频播放功能具体实现效果如下：论坛留言功能输入信息前如图5-1所示：图5-1信息输入前截图输入信息时如图5-2所示：图5-2信息输入时截图输入信息结果如图5-3所示：图5-3信息输入完成截图二、新闻列表新闻列表显示翻页及水墨点击效果如图5-4、图5-5所示：图5-4翻页效果图图5-5点击效果图三、视频播放器视频播放如图所示5-6所示:图5-6视频播放图四、首页标题栏首页标题导航栏如图5-7所示：图5-7标题导航栏图以上图片所展示是的便是设计中所实现的基本功能，及设计思想的实现。所涉及的框架是jQuery1.8.3的框架，jQuery框架不但简化了HTML和JavaScript之间的操作，而且还是开源的软件完全免费的。运用MIT的许可证授权能使jQuery的语法设计操作变得容易很多。jQuery也提供了给开发人员在其创建插件的能力。这个便利于开发者能更好地将交互动画进行抽象化、模块化。模块化的方式可以使jQuery函数库编写出强大绚丽的动态网页以及网络上的应用程序。第二节网页的发布和维护在经过测试完成后，网页便可以公布到互联网上投入使用。之后要做的便是网站的内容更新及稳定性的维护了。网站维护不但是为了维护服务器以保证正常的运行，还要对可能会出现的问题进行防范工作，制定详细的计划，力求将网站的后期维护做到最好。与此同时还要根据用户的使用反馈进对面板进行适当修改，并增加用户点击量多板块的内容。同时还要注意超级链接的更新，网络信息的更新速度很快，上万个超级链接构成了网站。为了保持信息的新鲜度，超级链接自然也就要随时更新同时新闻内容也要与之一同更新。结论经过几个月努力，从最初的设计草图到最后展示出来的成品网页，这几个月过的节奏虽然紧张，但是却很充实，直到今天正式完成毕业论文意味着学生时代即将结束，五年的大学生活也即将画上一个完美的句点。我因为个人原因原本四年制的大学读了五年，这多出的一年时光，在日后的工作里也要加倍的找回。毕业设计是对我们学习成果的一种检验，也是即将步入社会的一种历练。平日在学校里我们都很被动，学习起来全都要靠老师去催促，缺少能动性和独立思考问题的能力，期末考试时候看到复