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

因心而造景关于中国风UI的网页设计ARTISTIC CONCEPTION IN MINDABOUT CHINESE STYLE ON UI WEB DESIGNING专 业：姓 名：指 导 教 师：申请学位级别： 论文提交日期： 学位授予单位： 摘 要就目前来说中国的网页设计一直趋向于欧美或者日韩风格之间，但是中国本身是一个多民族国家。随着时间的融合产生了自己在建筑、美术、饰品、服饰、文字等多个领域上独特的文化，这些独特的文化都是当今设计师眼中不可多得的宝贵素材。欧美的设计师以简练、严谨的风格著称，自然在网站的设计上也会收到影响，欧美网站的网页大多简介干练并没有多余的修饰元素；而日韩风格网页大多是采用柔和的主色调，在布局上中规中矩。相比欧美的网页显得比较淡雅。在功能上两种风格都比较偏向信息传播的实用性及功能性。以上两种网站风格都各有特色，值得学习。网页的设计与本民族的文化是密切相关的，国内的网页设计目前大多以中国的传统文化元素为主流，当中穿插一些欧美日韩的设计风格。但是就目前市场上已有的网页来说在展现中国风格的同时又难以逃离出元素生搬硬套的怪圈。界面设计从诞生以来很长的一段时间都没有受到设计师过多的关注，随着这几年信息的飞速发展，人们对产品的要求也比以前高了很多，从功能到操作的界面都变得很重要，界面设计也因此受到设计师广泛的关注。一个操作简洁大方的主页会给人一个很好的感官享受，缩短人与计算机的距离，为卖家创造无限商机，同时用户能够最直观的感受到针对感官设计的魅力。本文正是对中国风与UI设计的结合而进行设计工作本设计面向的用户群众是青年一代的使用者，将网页的UI设计与中国风相结合。让用户在日常使用中能够更好的了解中国的传统文化，全面提升用户在浏览网站时的认知，带来不一样的主观感受的体验。当用户在浏览网页时不仅仅是在浏览自己想要了解的信息，更能体验到一种别样的感受，从而带来感官上的愉悦和满足，使用户感受到设计及中国传统文化的魅力。关键词：界面设计；交互设计；网页UI；数据库；中国风 AbstractChinas multi-ethnic integration provides designers with diversified design materials, including a great deal of architecture, painting, decoration, traditional costumes, characters, patterns, cultural relics and so forth, however, a lot of website design in China tends to swing between Europe and Korea website design style. Websites in Europe and America adhere to the simplicity, plain and preciseness of modernism, without flamboyant colors and gaudy design elements, and homepage often use large pictures or animation; Korea website mostly uses a white background combined with tinge, such as soft light blue, light green, and translucent interface, the gauge medium-range website graphic layout, a strong practicability and functionality in information dissemination. Above two styles of websites have their own characteristics, and it is worth learning. However, website design style has a close relationship with national character, aesthetic tendency and even languages. Of course, many sites will carry forward Chinese styles and national and traditional characteristics in ideas and strategies, but in practice it is difficult to escape the rut of simple and rough ideas and slavishly copied element.Interface design, in the long development of software, designers have paid no attention to interface design work, in fact, software interface design is products important buying point. A simple and beautiful interface brings a comfortable visual enjoyment, narrowing the distance between people and computers, creating a selling point for businesses, and meanwhile the user can directly feel the charm of the visual design. This article will do design work with the combination of Chinese style and UI design.user-oriented mass of my design are users of the younger generation, and website UI design will combined with Chinese style. In everyday use, the user can have a better understanding of traditional Chinese culture, to enhance users cognition when they browse a website, and to bring them different subjective experience. When a user views a page, he is not only just to browse the information they want to know, but also can experience a different kind of feeling, so as to bring a sense of joy and satisfaction, and enable users to experience the charm of design and traditional Chinese culture.Key words：Interface design ；interaction design ；web UI；data base；Chinese style前 言对于中国而言，在总结、吸收并借鉴其他国家网站设计的基础上，结合我国特有的文化是十分必要的，而中国风的网站正式一种很好的表达方式。中国审美观的独特风格。悠久的历史和独特的地形成了“多元一体”格式的不变的民族合营体。不论从民族学、社会学，还是政治学的方面来看，完整的历史成因才会造就中国人的审美心理。中国风是以中国传统文化为根本再辅之以开埠至今所吸收的外来文化而成，是顺应世界发展趋向的产物。把中国风的显现情势艺术化，在连年来特别是2008年以后，中国风开始盛行于各个范畴。中国风一词来源自中国五千年的历史进程，继而形成具有中国特色审美的独一无二的风格。中华民族的大家庭经过长期的历史发展形成了“多元一体”格式的超稳定的民族合营体；中国风不仅仅是来自于华族，更有来自于中国除华族以外的民族的彼此作用的成果。不论从民族学（人类学）、社会学，还是政治学的方面来看，华族与中国其他的民族都是从两个有差异的层次的看法，正是因为有完好无缺的历史进程才造成了现在中国人特有的审美方式以至在整个中国的文化演边历史中都是有特殊的历史文化原因和地区不同的因素。中国风即中国的风格、在中国独有的盛行文化。把中国风的表现情势艺术化，真正的中国风应该是深入到生活傍边，是一种平淡的、内敛的生活态度， 不论是什么与中国风相关的产品都是一种“展现”的方式，和西方的“展现”艺术的方式不同。特别是近年来不论是在文化还是在艺术上中国风都掀起了一股新的风潮。 第一章 绪论第一节 网页UI设计的背景和意义Internet发展到现在已经遍布世界各个角落，将世界上不同的领域链接到一起，并且已经成为现今最大的计算机网络。World Wide Web(简称WWW)作为现在Internet上一种先进并且易于被接受的检索信息手段，发展速度自然也是十分的迅速，互联网现在已经成为全球信息最全的资源库。根据现有资料统计，已有上百万个Web站点在Internet上完成注册并已经上线，其内容范畴包含文化产业、科研教育、新闻消息、商业出版、贸易金融、娱乐、体育等多个范畴，也拥有着人数众多的用户群。由此可知web站点的建立对于一个机构来说是至关重要的。这些年随着计算机的发展，用户的需求也变得越来越丰富。数据库的出现满足了用户在很多方面的需求，此技术的出现Web站点服务也变得比以前更加人性化，内容也变得更加丰富1。但与此同时也就出现了这样的问题，在用户点击某网站的站点时一般来说只对站点中某些内容感兴趣，并且这种兴趣会保持很长的时间。这个问题很好的启发了开发者，加入能够按照用户的要求和喜好来设计出满足用户的页面，也就是意在重点表现用户所需要页面，这将使用户在使用时获得一种新的感受，而且这样的网页在于与同类网页的竞争中也显得更具有吸引力。现在针对这点某些大型网站公司已经做出了大胆的实验，现今通常所采用的方式是，在登陆时提供一些的设置网页显示的选项供用户在登陆站点时进行选择，方便用户能够根据自己的意愿进行设置用来浏览。但是仅仅通过登陆时让用户进行一些登陆设置来体现出一些个性化是远远不够的，并且让用户在了解一个站点具体内容之前让其对站点内容进行一些设置，结果有可能会显得过于粗糙。于是便设想出这样一种方案，根据用户点击的先后所关联的规则，这样，当一个主题被用户点击之后，一个相关的次级页面在系统中便能够自动生成，此中包含了该主题下用户经常点击的信息内容，就能够做出不用用户自己做出过多的设置就能满足用户需求的网站。本文主要通过Web前端的UI设计来展现出中国传统文化的博大精深。开发者不同，做出的网页也就不同。在网页UI的设计中，怎样才能把中国传统文化通过网也表现出来，也是我这次设计的主要内容。14第二节 相关名词介绍 HTML语言HTML5是超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要展示的网页中的各个部分。9其实网页文件自身也是一种文本文件，通过添加标记符在文本文件里，来告诉浏览器怎样来展示文本中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按照文本标记的次序来阅读文本以显示网页，继而依据标记符来解释并展示出文本标记的信息，对文本错误的标记将不指出错误的地方，且不会停止对文本进行执行解释的过程，开发者也仅能通过最后展示出来的结果以分析在哪里出错来进行改正。但必须注意的是，根据浏览器内核的不同，对相同的标记符可能会有完全不同的解释，因此就展现出不同的展示结果。5二、层叠样式表CSSCSS即是层叠样式表，是一种用来展现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS能够真正将网页格局展示与网页内容信息做到分离的一种样式设计语言。CSS相对于传统HTML的表现方式而言能够对网页中对象格局的位置排版进行很精确的位置控制，并且对于所有字体字号的样式几乎都支持，对网页对象和模型样式拥有强大编辑的能力，并且能够用CSS对网页进行初步的交互设计，是就目前来说基于文本展示中最优秀的展示设计语言。6CSS可以凭借开发者理解能力的不同，用来简化及优化语言写法，并且针对使用人群的差异，有着很强的的易读性。CSS可以分为外部样式表（将网页链接到外部样式表）和内部样式表（在网页上穿件嵌入的样式表）及内联样式（应用到各个网页元素）三种使用方法。 外部样式表是当样式需要被应用到很多页面的时候所采用的理想选择。可以通过来连接到外部文件。如图4-1所示内部样式表则是当单个文件需要特别样式是使用内部样式表进行单独定义，在head部分使用标签定义。实现的功能是将当前网页内标签为pic的div标签的图片按特定尺寸显示避免图片过大溢出网页 内联样式一般应用在当特殊样式需要应用到个别元素是，可以试用的内联样式。使用内联央视的方法则是在相关标签中使用样式属性，可以包含任何CSS属性。CSS和div的相互结合使用，是现在网页设计布局的主要方法。div用来展现内容，CSS则是来管理div展现的样子，使内容和变现变的更加合理，这样看来CSS和div可以看作网页的血与肉。9三、网页脚本语言JavaScriptJavaScript一种直译式的网页脚本语言。内置支持类型，是一种展示动态类型及弱类型且基于原型的计算机语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛应用于现今各大客户端的脚本语言。一开始仅是在HTML（标准通用标记语言下的一个应用）网页上来使用，以此来给HTML网页增加动态功能，随着发展现在被应用途径已经不仅仅局限在HTML之中。7JS用来为网页添加各式各样的动态功能，能很好的为用户展现出特殊的界面效果，通常来说JS脚本可以通过嵌入HTML之中来实现自身所要展示的功能，当然也可以通过外部链接到网页里便于管理。而且JS不依赖于操作系统，仅需要浏览器就能获得很好的支持，目前JS已被市场上大多是浏览器所支持。设计中的这个墨点边用到了JS技术，在鼠标进行点击标题操作时JS对点击做出相应的响应，进而展现出绚丽的效果。JS通过标签来实现内部和外部链接。四、jQuery库jQuery是继prototype之后又一个优秀的库。它是一个集成了Javascript的轻量级的js库 ，它不但兼容CSS3，还兼容现今各种主流浏览器内核（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。正是jQuery的出现，开发者才能加方便地通过编辑HTML（标准通用标记语言下的一个应用）来实现特效，而且还能很好的提供对AJAX的支持。jQuery还有特别大的优势就是，它对文档的声明很齐全，并且各种应用也解释的非常详细，同时还有很多已经发展成熟的插件可以用来使用。jQuery可以使用户的HTML的页面代码和HTML的内容进行分离，也就是说，只需要在HTML中定义id便可插入应用命令，省却了在HTML中插入大量JavaScript代码的麻烦。jQuery本身是一个能够兼容多个浏览器内核的JavaScript库，核心是要实现用最少的代码实现最多的功能8。jQuery于2006年1月最开始由美国人John Resig在纽约的barcamp发布，之后吸引了很多全世界的JavaScript好手加入并使其更加完善，由Dave Methvin带领团队完成开发完善。发展至现在，jQuery已经成为世界上最盛行的javascript库，在全球前10000个点击量最高的网站中有超过一半的网站在使用jQuery进行编辑来现动画效果。并且jQuery是免费、开源的，使用MIT许可协议。jQuery的语法简单，能让网页开发变得简单化，例如在文档的操作对象中选取DOM元素来进行编辑动画或处理对象的事件及AJAX的使用。除此之外，jQuery还提供PI让开发者用来编辑所需应用。方便开发者很方便的编辑出功能更强大的动静结合的网页。7jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。 五、div标签div标签是网页布局中常用的标签，他可以自定义文档中的分区，把文档分割为独立的，不同的部分。不但可以用作严格的组织工具，还能不使用任何格式与其关联，将id或class来标记div，标签变得更加有效。div是一个块级元素，内容可以自动的开始一个新行，换行也是div固有的唯一格式表现。可以通过div的class或id应用额外的样式。div可以为文档添加了额外的结构。同时如果div属于同一种元素，就可以使用class=“news”来标识div标签，如果这样做不但利于在div标签中添加何时的语句来描述标签，还可以使用样式的方法来对div进行格式化操作。六、 交互设计交互设计（英文Interaction Design, 缩写ID)，是用来表现和设计人造系统的格局的设计范畴。它包含了两个或多个能够互动的个体，之间用来便于交流的内容和结构布局，相互配合，以便达到用户要求的最终目的。交互设计的目的是为了努力去建立人与产品及服务之间的联系的同时创造出产品与服务的意义。以“在以社会复杂性为蓝本的物质世界中融入信息技术”为中心，交互设计可以从“可用性”和“用户体验”两个层面来举行分析，存眷“以人为本”的用户需求 。交互设计的思维方法建构于工业设计以用户为中心的方法，同时加以发展，更多地面向行为和过程，把产品看作一个事件，强调过程性思考的能力，流程图与状态转换图和故事板等成为重要设计表现手段，但更主要的还是要掌握软件与硬件之间所实现的技巧及评估方式。交互设计是用来展是人与机械之间交流的界面。交互设计在二十世纪八十年代作为一门以交互体验为主的新学科诞生了，它是由比尔摩格理吉（Bill Moggridge）在1984年的一次以设计为主的交流会议上提出来的，他一开始以“软面（Soft Face）”来命名，因为这个名字很容易让人想起当时正流行的一种玩具“椰菜娃娃（Cabbage Patch doll）”，所以后来他就更名为“Interaction Design”，即为现在所说的交互设计。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框用来添加标题，新闻之间标题用标签来进行分割。主标题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、属性以及调用域来是现实所实现所需要的功能。先将时间进行移动到一个位置进行展示，定义点击事件时，标签对应的元素就会进行移动，来进行显隐控制，之后再通过class来传到当前变量时间，来达到txt文本的移动，接下来定义当前变量显示在主页，这样就会出现点击效果。要完成翻页效果还要进行循环定义，当第二个事件被点击时原本的c