毕业论文-浅析传统风格网页设计

第一篇：毕业论文-浅析传统风格网页设计

浅析传统风格网页设计

——以“千秋词君李煜”、“北京小吃”网站为例

摘 要

现代风格，简约、扁平化、有质感，拥有空间感，能够以少胜多；传统风格，也指中国风，包罗万象，既有繁复精巧，亦有淡雅意境。二者在网页风格设计中，并不对立，反而共生，以网页为载体，就要遵守其一定的内在规律，例如按照浏览者眼动规律来布局，根据传达给浏览者的信息来配色等，只有这样才能让传统风格成功的呈现在互联网上，一成不变的照搬必然会被用户拒绝甚至淘汰。

本文以“千秋词君李煜”和“北京小吃”网站项目为例，同时辅以其他网站案例，介绍了传统风格中具有代表性的两个类型，通过浅析传统网页风格设计的特点和要素，总结如何在网页这一现代产物中更好的表现传统风格，以及怎样准确的向用户传达中国传统风格中的文化含义，加快传统风格设计的普及。关键词：网页设计 传统风格 信息传达

设计总说明

本人的毕业设计是“千秋词君李煜”与“北京小吃”两个网站项目，这两个是我个人非常感兴趣的项目。

李煜，世称南唐后主，是五代十国之一南唐的最后一位帝王，他的诗词，既有哀戚婉转亦有气势磅礴；他的一生，恣意放纵却可享国十余年，但早年丧兄丧父丧妻，中年流亡为质终死于毒酒；几句话不足以总结李煜充满传奇色彩的一生，不谈政治，私以为李煜是中国历史上任何一位帝王都不可比拟的。

北京小吃，分为民间小吃和宫廷小吃。随着各个朝代不断更替与进步，现已传承有百来种各具特色并深受多方食客喜爱的口味与风格，譬如爆肚儿、炒肝儿、卤煮、豆汁儿、焦圈儿等等。凝聚了无数人的智慧，传承了中国5000年的文化。而且在很多小吃的背后，都有一段鲜为人知的小故事，或是带有传奇色彩的民间流传，或是跟慈禧老佛爷的逸闻趣事有关。所以北京小吃已经不单单是简单的小吃，而是一种代表北京的饮食文化。

本次毕业设计的主要任务根据两个不同的项目会有所调整。

首先是“李煜”，因为在目前所有的受众群体中，知道和了解李煜的用户比较少，好在现在许多人都开始注重自身文化修养，所以我们从李煜的诗词入手，运用传统风格营造一种浓郁的文化气氛，既要符合李煜的个人气质，也要符合当今各种用户的欣赏需求，以此去吸引用户进一步的了解和关注李煜这个人物。

其次是关于北京小吃。北京作为中国的首都，每天都迎接着八方来客。所以北京小吃这个带有浓郁文化的特色传承，也自然受到了更多人的喜爱与探寻。但至今为止互联网上还没有一个关于北京小吃的网站，实在可惜。

本人想通过这个网站可以系统的梳理其种类和多方式去展现北京小吃，让爱吃、会吃的朋友们能够深入了解北京小吃与北京文化，有一个可以交流的平台，同时也要吸引更多不了解其中奥妙的民众来关注北京小吃，并深深的爱上它。

在制作这两个项目时，我们选择了现在市场上主流的HTML+CSS样式，便于用户浏览和阅读信息，并配以Flash导入页，增加视觉效果。在“千秋词君李煜”这个项目中我们采用了淡然雅致的配色，其中导入页与首页各1页，5个二级页面，21个次级页面，次级页面中共有49个内容页，共计77个页面；而在“北京小吃”中，我们采用了活泼鲜艳的配色，其中导入页与首页各1页，登录注册1页，4个二级页面，10个次级页面，32个内容页，共计49个页面，其中有两个二级页面因有用户发言功能，需后台服务器支持，故只能做出一个模版，其中链接不可点击，如果可以点击内容会更加丰富。

制作该网站时主要使用的是Photoshop（用于界面设计）、Dreamweave（用于网页制作）以及Flash（用于界面主视觉Flash制作）三款软件。

目 录

绪论........................................................................1 1 网页风格设计..............................................................1

1.1网页风格设计的概念....................................................1 1.2网页风格种类..........................................................1 2 传统风格网页设计..........................................................3

2.1传统风格网页设计......................................................3 2.2.如何选择传统风格网页设计..............................................4 2.3传统风格网页设计的优势与趋势..........................................4 3千秋词君李煜官方网站风格设计...............................................5

3.1导入页设计............................................................6 3.2首页设计..............................................................7 3.3次级页面与内容页设计..................................................8

3.4淡然雅致风格设计应注意的细节..........................................9 4北京小吃官方网站风格设计...................................................9

4.1首页设计.............................................................10 4.2次级页面与内容页设计.................................................11 4.3活泼鲜艳风格设计应注意的细节.........................................12 5“李煜”与“北京小吃”案例风格设计对比....................................12

5.1布局对比.............................................................12 5.2色彩对比..........................................................................................................................13 5.3传统元素运用对比..........................................................................................................13 总结.......................................................................14 谢辞.......................................................................15 参考文献...................................................................16

绪论

如今的互联网正飞速发展着，人们通过互联网不仅可以用传统的方式搜索所需信息，而且还可以通过它满足生活中的衣食住行。在如今的大数据时代，网站做为一个多元化的信息载体，在其中扮演着非常重要的角色。用户也不仅仅满足于简单的信息传递，对视觉和形式感也愈发重视。所以网站风格设计的未来发展趋势要注重更多的整体与细节，带给用户从视觉到心理的整体感受。所以丰富的带有创意性的迎合网民心理需求的网页风格设计越来越成为主流。

而就在这样一个获取信息十分便利的时代，人们的内心也愈发浮躁，于是一种经过历史沉淀的文化正在悄然流行，它就是——中国风。从服装到美食到艺术形式，都受到很多人的喜爱和研究，当然其中也不缺乏其他国家的爱好者。中国风，或者说中国传统文化正在以它自己的方式慢慢传播于全球，而我们的互联网发展也紧跟时代的步伐，中国传统风格设计的网站就是其中之一。将中国传统元素融入到现代网页风格设计中，是发展中国传统文化的又一个好的方式。本人选择这个论点为题目，也是希望能够更深入的去理解和研究文化的传承，并设计出更好的带有中国文化风格的网站。网页风格设计

网页风格设计最能传递企业文化信息，好的网页风格不仅能帮助客户认识和了解网站背后的企业，也能帮助企业树立别具一格的形象。通过网页风格的独特，直接给自身网站和所处行业的其它网站之间营造出一种清晰的辨识度。随着互联网的影响力不断提升，网站成了企业让客户了解自身最直接的一个门户，通过自身网站的辨识度在众多网站中脱颖而出，迅速帮助企业树立品牌，提升企业形象。

1.1网页风格设计的概念

网站风格是抽象的概念，一般是指网站的整体形象给浏览者的综合性惑受。每一个网站都有自己独特的风格，而拥有独立风格的网站会吸引越来越多用户的关注，从而提升自己网站的知名度。网站的整体形象包括页面的排版布局，形式，色彩，效果等。比如：我们觉得福娃的形象是生动活泼的而法官的形象则是专业严肃。每一个网站都会给浏览者留下不同感受。因此我们需要做到的是根据网站的定位不同做出每个网站特有的形式。除此我们还需要在风格上把握一下，网页上所有的图形、文字，包括背景颜色排版形式等等都要统一风格，这样网页才可以使浏览者看起来舒服、顺畅。

1.2网页风格种类

网页风格按不同的分类标准可分为很多不同的种类，就本文而言，按照用途可分

为以下六类。

（1）时尚类（见图1）：适用于精品、时尚、饭店旅馆、服饰、婚纱等产业。需要特别注重视觉的效果。时尚风格类型的设计特色呈现出简约、精致、高质感，比较少使用线条。另外照片的运用上建议使用高解析度、饱和度高、鲜明对比色为主，较能表现出高质感的感觉。

图1 时尚类网站

（2）科技类：此类型一般适用于高科技、机械、电子、多媒体等产业。科技类型大多使用大量动画特效、多媒体音效及线条并结合主打商品或服务，来传达高科技感和专业度。

（3）商业类：商业网站制作适用于任何类型的企业，是目前最普遍类型的网站。此类型网的风格偏向简单且网站动线明确为主，不做过度华丽的版面设计或使用过多的动画，以增加网站浏览速度而提高搜寻排名。

（4）休闲类（见图2）：适用于休闲农场、观光景点、户外餐厅等企业。此类型的网页设计大多会使用户外的素材，如蓝天白云、天空、树木、绿地等等来营造出休闲自然的风格，会让用户感受到。

图2 休闲类网站

（5）活泼类：适用于主题乐园、童装、学校等客群以幼童或青少年为主的网站。

（6）传统类：又称古典风，适用于企业形象或主要商品风格偏向中国风或欧洲古典风的网站。这种类型的网站设计会以复古风格结合的花纹底图或图藤效果来表现柔美复古感。若是属于中国风网站，通常在设计上会比较注重国画中“留白”的原则，同时辅以复古配色，以及水墨，毛笔字和印章烙印等图片来传达中国文化。传统风格网页设计

2.1传统风格网页

传统风格是一个比较概括的分类，在传统风格中又分为中国风、日韩风和欧洲古典风。本文重点研究的是偏向中国风的传统风格，其中包含以下三种主要风格。

淡然雅致风格（见图3）：配色饱和度较低，多以淡色为主色调，配以国画、书法等素材，“留白”概念在此中能得到很好的诠释。

图3 淡然雅致风格

活泼鲜艳风格（见图4）：以较为鲜艳的色彩为主色调，有形式感，排版不过于正式，图片较多，内容丰富。

图4 活泼鲜艳风格

沉稳大气风格（见图5）：配色正式，能体现气势，如红+黄，紫+黄等，排版也突出对称和稳定性。

图5 沉稳大气风格

2.2如何选择传统风格网页设计

首先，最重要的是根据网站所要传递给用户的信息内容来确定风格。以介绍人物的网站为例，假设此人是知名古诗词人，可根据其词风来确定。如词风清隽就选择淡雅风格，偏民俗可选择活泼的风格。要是换成企业类或机构类网站的话，还是以沉稳、大气风格为主；如果一个清隽词人的网站设定成沉稳大气的风格就会显得死板，难以吸引用户。

2.3传统风格网页设计的优势与趋势

传统风格网页设计的优势：

（1）突显网站的文化底蕴。只要和传统风格不过于相反的内容，同样可以使用。传统风格演变自中国五千多年的历史积累，其中网页设计的变化和统一、对比和调和、均齐与平衡，这些概念最早就来源于《易经》一书。

（2）更适合文化类、机构类网站。现在很多此类网站仍使用单调的线条，内容与风格不匹配，反之如果使用传统风格，就会衬托出网站的整体氛围，让用户感觉更和谐。

（3）属于中国独创。像时尚类、休闲类的风格网站并不能准确说出它们属于哪个国家，而中国传统风格有类似符号的性质，代表着中国文化，世界上绝无仅有。

传统风格网页设计的趋势：

（1）政府重视。现在，非物质文化遗产的传承受到了政府更多的支持和保护，并且我校还申请了国家级民族文化传承与创新教学资源库，越来越多的学生和青年人加入到非遗的保护、传承和发展的行列，随之传统风格的网页设计也会越来越普及。

（2）国民重视。现代生活节奏的加快与生活的压力，让很多人开始回归简单与

向往淳朴的生活方式，并开始注重本国的传统文化，而且人们获取信息最有效的途径仍是互联网。所以随着这种发展趋势和民众需求，中国传统风格网页设计也会得到很好的发展。

（3）国外流行。虽然“中国风”为近年流行，可早在十七、八世纪的欧洲就兴起了“中国热”。当时太阳王路易十四有一场聚会，他坐着中国的八抬大轿进入会场，从那时起很多人开始对中国有了了解，平民百姓也开始收集一些古玩等等。虽然如今传统风格网页设计在国外还不十分流行，但随着各国间的文化交流，当中国传统文化真正普及到全球那一天，相信关于传统风格的网页设计也会更加受到人们喜爱。

3“千秋词君李煜”官方网站风格设计

南唐后主李煜，唐末宋初，五代十国，生逢乱世。如果可以用一句话概括他的一生，那便是：“一代风流君不二，多情才子薄命王”。因为他的出生地是今江苏省，又因为他的词派是花间词，这些都与温润和淡雅结合了起来，所以把李煜的官方网站风格设定为淡然雅致是最恰当不过了。为了体现这样的风格理念，其设计所应用到的元素是来自于中国水墨画和江南建筑中的花窗。

水墨画这种带有浓郁中国特色的艺术表现手法，可在网站设计中应用的元素，包括宣纸、山水、花草、墨韵、印章，和各种动物等等（见图6）；这些元素表现的意境也非常广泛，例如古朴、飘渺、优美、苍劲、生机勃勃„„

图6 水墨元素

水墨画中可应用在网页设计的素材很多，意境也不局限于此，但传统风格并不是元素的叠加。“意境是指抒情性作品中呈现的那种情景交融、虚实相生、活跃着生命

律动的韵味无穷的诗意空间”，这一点和网页设计中的对比与调和不谋而合。

说起江南建筑中的花窗，就不得不说榫卯。榫卯是古典家具之魂，一榫一卯之间，一转一折之际，凝结着中国几千年传统家具文化的精粹，这种木材的精巧衔接，十分坚固牢靠，并且美观，花窗就是这样技术下的产物。在传统风格网站设计中，可以应用一些古建筑的元素，如宝塔、宫殿、拱桥等等，也包括花窗、屋檐、城墙这种小素材，这样有利于感官的虚实结合，只是不要太多，画蛇添足，少而精为佳。

网页风格设计中可应用的中国元素还有很多，书法，和其他多样的绘画手法，但同样需要注意，传统风格的元素应用不是一味的重复，一般网站风格设计中，取一主要风格应用即可。

（以下“千秋词君李煜”官方网站，简称“李煜”）

3.1导入页（风格）设计

导入页的效果要尽量丰富，因为它是用户对网站的第一印象，一定要吸引住用户的眼球。“李煜”导入页的设计，采用纸张底纹，为使背景不单调，加上了水墨远山以衬托李煜为人性格的飘渺的感觉；上下封底是花窗元素，让界面看起来更整齐；进入时界面飘下花瓣，增加界面优美感；圆形墨韵按照笔序出现，然后淡入李煜本人画像，同时展开讲述他生平的一首诗，有一种既视感，舒缓的把用户带入到的李煜的世界当中去。为吸引用户视觉；在界面下方是一副滚动的《韩熙载夜宴图》（描绘李煜宫廷生活的真实写照），画幅较长，在设计上丰富了页面内容，有图片支撑底部显得更稳定（见图7）。

图7 李煜导入页-第一步效果

之后，进入导入页的另一个界面，整体变暗模糊变为背景，在这之上从界面的四周汇集本站LOGO“李煜千秋词君”六字，增加视觉效果；随之出现闪烁的点击进入按钮；至此所有的导入页动画完毕，点击按钮即可进入（见图8）。

图8 李煜导入页-第二步效果

3.2首页（风格）设计

在首页（见图9）设计中，LOGO和导航处于界面顶端，下方是网站的动态banner，可以自动切换图片。为了视觉效果banner设计的尺寸比较大，如果将导航放在它下面，当用户浏览时就会受到banner尺寸的影响，不利于点击导航，同时LOGO旁边也会显得太过空旷。网站的下半部分分为三栏，分别是李煜的三类信息，在分栏右下角的位置有“更多”按钮，点击可切换到对应页面。

图9 李煜首页

在LOGO的设计上，采用了水墨底，水墨菊花，祥云这三样素材；为了使素材与背景更加融合，菊花使用了正片叠底效果，并且和祥云一样降低了75%的透明度；喻意是，菊花，高贵，清雅，与大多数春夏盛开的花朵不同，但到严寒时还是会枯萎，就好像李煜的一生，与众不同，却最终死于窘境之中。文字分别是柏青体“李煜”，以效“翠微松柏”的精神，以及繁方篆“千秋词君”，以增古韵。同时文字的大小已接近艺术字体的识别界限，为了与背景区别开，所有文字都添加了比较明显的阴影。

在导航的设计上，过于单调的设计让导航不容易被用户注意，过重的装饰影响用户识别，缺少整体感，不利于点击。所以本站导航选择圆形色块为装饰，为了不显单调并增加整体感，在上面应用了中文大写数字的样式，有作为项目编号的意义；当鼠标滑过时，显示文字的墨迹背景，点击后跳转到二级页面，墨迹背景停留在该状态，这样会让用户清楚的知道自己在网站中所处的位置。

在banner的设计上，为了增加动态效果，我们选择利用HTML代码，实现非Flash的图片切换。同时banner中的图片也经过精心设计，第一张运用LOGO和导入页中的菊花、文字、墨韵和画像再重组，偶尔重组素材会让界面看起来有互相辉映之感；第二张“词·赏析”，采用了远山水和荷花，荷花有高洁之意，山水正好应了诗词中“一江春水向东流”的意境；第三张讲轶事典故，因为会讲到李煜的爱情故事，所以设计得粉嫩一些，采用了桃花和折扇的元素，它们分别带给人甜蜜及风流的联想；最后一张第四张“惊才艳艳”，讲李煜的才气，“惊”“金”二字发音相近，所以在最后一张中添加了金色的花朵以取巧意。从四个不同的角度，取四种不同意境来制作banner，但仍符合淡然雅致的网站整体风格，并不脱离主题。

3.3次级页面与内容页（风格）设计

为了让用户更快捷、更有效的了解李煜，包括他的生平、诗词、为政等，本人用简洁精炼的的方法去设置次级页面与内容页（见图10）的框架，这样可以让有些不了解李煜的用户，很快并清晰的对这个历史人物有个大概的认知。

图10 李煜次级页面与内容页

在设计内容页与次级页面的整体风格时，本人应用了牡丹，以及梅、兰、竹、菊，五个元素，这五个元素对应五个栏目的主题，每个二级页面都有自己的主题，为网站添加了统一之中的变化。同时，之所以在“四君子”之外选择牡丹，是因为牡丹代表着雍容华贵，李煜首先是个君主，然后才是一位词人。

在制作整体设计时，根据用户的普遍视觉习惯，是最先关注左半部分的内容，所以为了使用户先被内容吸引住，我们把内容部分放在了左半部分，占整个页面大约五分之四，而切换内容的按钮选择栏放置在页面右半部份，约占页面的五分之一（在所有的网页设计中，选择栏都不宜过宽，否则会影响页面的和谐感）。

3.4淡然雅致风格设计应注意的细节

在设计淡然雅致风格时我们应该注意以下细节：

（1）画面色彩不要过于单调。慎用全篇黑白配色，可以搭配一些低饱和度的颜色，例如绛红、黎色（土青）、牙色等。

（2）内容不要太满。要有适当留白，方寸之地亦显天地之宽。

4“北京小吃”官方网站风格设计

北京小吃，历史悠久，技艺精湛，品种繁多，其中有汉民风味、回民风味和宫廷小吃等，各种荤素、甜咸、干稀、凉热，种类纷繁，季节性强，适应面广。有史料可查北京小吃元代已甚著称，由于北京曾为金、元、清的 都城，又是新中国的首都，多方面的有利条件使它能博彩各地小吃之精华，兼收各组小吃之风味，使北京小吃更加丰富多彩。

在网页风格设计方面，因为北京小吃给人的整体感觉是偏民俗的，贴近生活的，所以本人选择了活泼鲜艳的色彩搭配，运用了老北京城的设计元素。鲜艳的颜色可以吸引视觉的注意和激起对食物的食欲，老北京城的民俗感又和北京小吃悠久的历史相得益彰。北京小吃官方网站的风格设计，灵感来源于故宫的红墙琉璃瓦，因为这样的设计很有北京古建筑的特点，而且北京小吃比较大的一部分也来自宫廷流传，所以用这种古建筑风格的元素来相衬北京小吃的整体风格再贴合不过。

在设计传统风格的网站时，需要收集大量中国传统风格的艺术经典素材，比如青花瓷，祥云，龙纹等等。这些带有强烈中国特色的形象，为设计传统风格的网站提供了很多的灵感来源，也最能体现我国的文化精髓。这些都是传统风格网站必不可少的元素点缀。

4.1首页（风格）设计

在设计北京小吃这个网站的首页（见图11）时，主色调为绯红，设计的较为醒目，这是为了当用户登陆网站时第一眼就被中国红所吸引住，而且为了视觉对颜色的平衡，但我们将LOGO设计成黑色并延展下来，这样的红黑搭配更加具有亲和力，让人感觉均齐与平衡。

在界面的顶端是网站LOGO和登录/注册，添加了一张小吃图片的渐变（透明度55%），这样看起来既不会太单调也不会太凌乱。下面是一个Flash，有一个流动的背景，里面包含导航按钮，鼠标滑过时会在首页中切换不同的图片，丰富了视觉效果。

界面的下半部分，是吃货论坛和小吃简介，之所以要推荐这个两个栏目板块，一是因为让用户看到这是一个有人气的社交平台，增加用户的对北京小吃的凝聚力和对美食的热衷；二是因为网站需要不断的更换最新最快的相关信息，从而不让用户流失，让他们可以在论坛里时刻畅所欲言对北京小吃的热爱。而且主页还设置了“今日推荐”这个特别小板块，更加贴心的为用户提供了有用的信息，拉近与食客们的距离感。

在设计LOGO时，考虑到北京也是一个现代化都市，所以用色块与英文“TASTE OF PEKING”增加现代感，旁边的京味儿三字是其中文翻译，采用繁体古隶，是小篆走向隶书的过度字体，古韵十足。

图11 北京小吃首页

而在设计界面时，我们把红墙琉璃瓦的元素，应用到了占比最重的视觉Flash里，奠定了整体风格的基调；并把导航按钮嵌入其中，当鼠标划过按钮时会切换图片，增加网站视觉效果。这其中，不仅有“墙瓦”的元素，还有背景中的龙头喷泉，左上方的竖排文字，切换时与栏目对应的民俗图片，以及“墙”下用以增加质感的麻布底纹，正是这些元素一点一滴的融合，才完成了民俗、鲜艳、活泼的北京小吃官方网站的风格设计。

4.2次级页面与内容页（风格）设计

在设计北京小吃的次级页面与内容页时，考虑到网站设定包括地图与在线论坛功能，所以在版式的设计上也有所不同。

次级页面上，“小吃食谱”与“历史典故”（见图12）为一类，因为它们有明确的分类，层级较清晰明确。“美食地图”（见图13）就是网站中包括的地图功能，因为北京小吃大部分集中在城区内，郊区部分会出现大量空白，所以不适用类似“高德地图”的实时交互界面，而是更适合类似“大众点评”的分类查找，这样不仅提高了信息查找的准确性与便捷性，同时也更容易阅读浏览。最后一个栏目“吃货论坛”（见图14）就是网站中的在线论坛功能，但由于没有后台服务器支持，我们只设计出一个雏形，包括左半部分的内容，以及右半部份的“发表帖子”，“论坛版块”，与“热门帖子”，总共四部分。

图12 北京小吃次级页面-历史典故

↑图13 北京小吃次级页面-美食地图 ←图14 北京小吃次级页面-吃货论坛

在内容页上，“小吃食谱”与“历史典故”在界面右侧都设立了副导航，用以栏

目内切换内容用；在“历史典故”的四级页面的导航下方，是“足迹”功能，为防止层级过多，用户在网页中不能清晰了解自己所在的位置。在“美食地图”中，当点击次级页面的内容栏的链接时，会进入到内容页，此时同样可点击右侧的副导航进行内容切换。

设计上，北京小吃的内容页并没有延续首页的“红墙琉璃瓦”元素，而是改为“素瓦白墙”，一方面因为在次级页面与内容页中，要阅读的文字较多，但绛红仍属于比较鲜艳的颜色，不适于用户阅读；另一方面也是因为朴素的配色更易贴近北京小吃中民俗的一面。但并不是在次级页面与内容页中没有鲜艳的颜色，暗红色（非绛红）在朱红的基础上降低了饱和度，用于界面中的“点睛色”，在一些选项和需要用户注意的地方，都运用了这种“点睛色”，如此不仅可以延续首页的风格，增加页面统一感，也有画龙点睛之妙。

4.3活泼鲜艳风格设计应注意的细节

在设计活泼鲜艳风格时我们应注意以下细节：

（1）避免配色过于鲜艳。注意色彩的对比与调和，界面颜色最好不要超过五种，对于比较鲜艳的颜色可降低其饱和度，或用明度较低的颜色进行调和。

（2）内容页要适于阅读。因内容页文字较多，故不适用大量高饱和度颜色，同时注意背景色与文字颜色间的对比。

（3）增加视听觉效果。避免活泼风格中页面过于死板，可应用动画、音乐、图片等元素。

5“李煜”与“北京小吃”

网站风格设计对比

在传统风格网页设计中，李煜与北京小吃这两个案例，带给了用户截然不同的感受。在布局、色彩，和对传统元素的应用上，这两个案例有所同，也有所不同，下文从如何细致准确得应用传统风格网页设计的角度出发，分析了李煜和北京小吃这两个案例。

5.1布局对比

李煜与北京小吃在布局上的相同之处在于，二者都应用了占页面比例较大的banner；不同之处则是李煜的banner应用JavaScript技术实现图片轮播，导航处于页面banner上方，页面下半部分则是规则的三个分栏。而北京小吃是利用Flash将导航按钮融合在banner中，页面下方的不规则分栏，更具有活力。在两个案例的二级页面中，都更偏向于左半部分为内容，右半部分为副导航，用以切换栏目内的页面，不同之处在于，李煜的二级页面与内容页是一体的，而北京小吃则有较深的层级。

5.2色彩对比

李煜为淡然雅致风格，北京小吃为活泼鲜艳风格。首先从色彩上来讲，李煜采用淡然雅致风格，整体运用白色，配黎、绛红为点睛色，有水墨画之感（见图15）。

图15 李煜配色

北京小吃采用活泼鲜艳风格，主色调运用绯红，米、黑为配色，绛红为点睛色（见图16）。两个案例中关于色彩，最大的不同是李煜大量应用了白色，所以黎、绛红只能为点睛色，映衬水墨之感，以体现淡然雅致；北京小吃则以绯红为主色调，但颜色偏于鲜艳，所以配米、黑为辅助色，黑与红之间既是对比亦是制衡，故需米为之调和。

图16 北京小吃配色

5.3传统元素应用对比

在这两个案例中，从元素运用上来讲，李煜为水墨，北京小吃偏民间，其所呈现的效果各有千秋。李煜运用水墨画和江南建筑元素，给人以温柔，细腻，雅致的意象。而在北京小吃中，最为突显的是视觉Flash里“红墙琉璃瓦”的北方宫廷建筑元素，其它民俗韵味则以食物、人物等图片来体现，这些元素整体带给人朴实、民俗、活泼的意象，活泼在词典中的释意为“生动自然；不呆板”。两个案例作为两种不同的传统风格，其中最大的差别在于，李煜中的每个元素都与整体风格相呼应；而北京小吃则是突出其中一个，并融合现代设计元素。

总结

传统网页风格设计是对中国元素进行完美的拆分与重组，它包含了绘画、书法、建筑、图腾等元素，需要设计师对中国传统文化有一定的了解与认知。本文中浅析了传统风格网页设计的概念、分类，优势与趋势，并辅以毕业设计案例，分析传统元素的实际应用。但就李煜与北京小吃这两个案例而言，还存在着不足，例如李煜的二级栏目之间没有明显的风格区分，让界面看起来有些单调；北京小吃的设计略显稚嫩，线条、按钮等一些细节还需要仔细调试。

在将来，互联网仍是许多人获得信息的首要渠道，而网页也仍是一个重要的传播载体，人们会更加注重网页设计的美与丑和带给自身的感受，而传统风格也会在中国传统文化复兴的大背景下发展得更加顺利。作为一名未来的“设计师”，也要增加自身修养，多学习中国的传统文化。希望有一天中国的传统风格网页设计，可以成为亚洲东方文化的代表。

谢 辞

岁月如白驹过隙，五年的时间，学校见证了我们的成长，我们也见证了学校的改变。感谢曾经教授过我的每一位老师，也感谢这次的毕设指导——陈金梅老师。得一良师，胜万卷书，陈老师的严谨、耐心、负责让我受益匪浅。同时还要感谢小组另一个成员白宇轩同学，与他一起做过很多大作业，默契无需多言，感谢他这两年来的支持与照顾。最后，感谢参考文献中作者们做出的研究。

参考文献

[1]覃瀚颖.浅谈网站风格设计[J].现代企业教育, 2014(20):532-532.[2]王志玮.浅谈网站风格设计[J].价值工程, 2011, 30(13):171-171.[3]徐美雅.浅谈网站风格设计的基本要求[J].天津电大学报, 2009, 13(1):59-62.[4]冯皓, 吴向炜.现代网页设计风格分析[J].长治学院学报, 2009, 26(4):83-84.[5]耿阳, 孙志红.浅谈网页设计的形式和艺术风格[J].艺术与设计：理论, 2009(03):65-67.[6]余小芬, 宋魁友.网页设计风格的审美效应[J].大众文艺：学术版, 2012(6):108-109.[7]马艳丽.中国风格在网页设计中的应用[J].艺术教育, 2012(05):149-149.[8]杨敬飞.传统风格网页设计及其视觉审美性研究[J].设计, 2014(04):113-114.

第二篇：网页设计毕业论文

目录

一、课题来源.....................................................3

（一）设计思想.................................................3

（二）网站主题.................................................3

二、网站需求分析.................................................3

（一）搜集材料.................................................3

（二）需求分析与规划...........................................3 三 软件介绍.....................................................4

（一）Adobe Photoshop..........................................4

（二）Dreamweaver CS6..........................................4(三)软件运行环境..............................................4

四、网站整体设计.................................................5

（一）网页的规划...............................................5

（二）系统框架.................................................6

五、主页介绍与网页截图...........................................6

（一）主页面介绍...............................................6

（二）子页面介绍...............................................7

六、总结与感想...................................................9

（一）本网站实现了形式与内容的统一.............................9

（二）本网站具有良好的互动性..................................10

（三）缺点与不足..............................................10 参考文献........................................................11

/ 11

摘要

在网络高速发展的今天，互联网不仅深深的改变了人们的生活方式，更改变了人们的思维方式，雷军用互联网思维带领小米科技走到了今天，马云借助互联网成就了他的商业帝国，而首届世界互联网大会在浙江乌镇召开更加突出了互联网的重要性。而网站作为互联网的载体，只有优秀的网站才能使互联网更好的为我们服务。基于这一理念，我设计了自己的网站——田园采摘网。我利用所学习的内容自己动手设计本网站，制作过程中所使用的软件是Macromedia 公司的Adobe Dreamweaver CS6 和photoshop。在整个网站的制作过程中，我尽力优化网页的布局和排版，合理选择内容，尽可能做到完美。

关键词： Dreamweaver Photoshop 网站设计 田园采摘

/ 11

一、课题来源

（一）设计思想

用互联网的思维思考问题、做事情，创建优秀网站，精品网站。

（二）网站主题

结合自己的实际情况，选定田园采摘园作为本网站的设计主题，用互联网的思维经营采摘园。

二、网站需求分析

（一）搜集材料

明确了网页的主题以后，就可以围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

（二）需求分析与规划

一个完整的网页是建立在各种各样的需求上面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。

面对网页设计拥有不同知识层面的客户，设计的负责人对用户需求的理解程度，在很大程度上决定了此类网页规划的成败。因此如何更好地的了解、分析、明确用户需求，并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员，保证开发过程按照满足用户需求为目的正确项目开发方向进行，是每个网页规划和网页制作管理者需要面对的问题。据我们调查，当今 3 / 11

互联网已经有成千上万的采摘网。所以，这就要求我们的网站中要有突出和新颖的地方去吸引顾客，这样我们才能在众多的采摘园中占有一席之地并获益。网页设计中，运用photoshop等图形图像处理软件，进行大量的图片处理制作，给人以强烈的美感。并添加flash代码等，给浏览者一种现代感。整个网页由dreamweaver完成。

三 软件介绍

（一）Adobe Photoshop Photoshop简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

（二）Dreamweaver CS6 dreamwraver软件由美国著名的网站应用开发工具生产厂商Adobe Macromedia于2005年6月推出并正式投入市场以来，已经发展得相当成熟。关于dreamwraver的技术介绍的相关书籍与网络信息相当丰富。通过大学中软件开发环境课程的学习，对dreamwraver有了比较深刻的认识，并比较轻松的掌握了dreamwraver的操作。因此，软件技术可以完成任务的要求。

(三)软件运行环境

Dreamweaver是一款简体中文软件，可以在Win2003/WinXP/Win7/Win8中安全运行，换句话说，它可以在任何家用微机中运行。

/ 11

图1.Dreamweaver CS6

四、网站整体设计

（一）网页的规划

一个网页设计得成功与否，很大程度上决定于设计者的规划水平，规划网页就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网页规划包含的内容很多，如网页的结构、栏目的设置、网页的风格、5 / 11

颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

（二）系统框架

采摘园首页 采摘概况 最新动态 时令水果 活动影集 联系我们 图2.系统模块框架图

五、主页介绍与网页截图

（一）主页面介绍

首先是利用Dreamwear技术制作的网页。上方框架是网站的图片、网站名称，点击相关文字可以进入到相关的页面上，下方包括五大个分类链接。

图3.主页

/ 11

（二）子页面介绍

本网站总共包括五个子网页，分别为：采摘概况、最新动态、时令水果、活动影集、在线联系。

图4.采摘概况

图5.最新动态

/ 11

图6.活动影集

图7.时令水果

/ 11

图8.联系我们

六、总结与感想

（一）本网站实现了形式与内容的统一

要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。

/ 11

（二）本网站具有良好的互动性

对于销售业务页面要求运行的工作环境稳定，易于操作，界面美观大方，对于前台展示界面要求系统便于维护，安全可靠，对于广大客户所要执行的操作简单易懂，远程访问速度较快，界面友好美观，有基本的错误提醒功能，远程操作数据库正确，要求和客户有一定的互动性，在主页上直观的就可以查看浏览者所想要了解的东西。

（三）缺点与不足

就我个人而言，对网页制作还缺少很多的理论与实际操作知识，曾经只是做一些简单的个人主页，仅此而已。对通过此次毕业设计，可以深入的学习，以提高自身的制作水平。下一步我将进一步完善和优化本网站，同时将推出适合移动端应用的网站，这样可以进一步优化采摘网的布局。

/ 11

参考文献

[1]邓文渊.网页制作高手[M].北京：人民邮电大学出版，2007，6 [2]李宪广.网页制作边学边用[M].北京：清华大学出版社，2009，3 [3]网页设计入门[EB/OL].http://www.xiexiebang.com/sale/view.asp?Article ID=288 [4]许凌云，柳勇良.网页设计全方位学习[M].北京：清华大学出版社，2008，11 [5]陈琳.photoshop cs3 入门实战与提高[M].北京：电子工业出版社，2008，11 [6]焦慧.网页制作基础与典型范例[M].北京：电子工业出版社，2008，7 [7]戎马工作室.Dreamweaver 8与asp动态网站开发[M].北京：机械工业出版社，2006，5 [8]戴一波.Dreamweaver CS3网站制作炫例精讲[M].北京：电子工业出版社，2008，1 [9]何秀芳.网页制作与网站建设课堂实录[M].北京：人民邮电出版社.2009，3 [10]孙连三.新编网页制作与网站建设入门与提高[M].北京：人民邮电出版社.2008，9 [11]邓文渊.网页制作高手FLASH 8[M].北京：人民邮电出版社，2007，6 [12]胡崧.超梦幻劲爆网页[M].中国青年出版社.2008，7 [13]Scot Johson etal.using Active Server Page[J].Que 2007 11 / 11

第三篇：网页设计毕业论文

《网页设计毕业论文》简介：

前言随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者 《网页设计毕业论文》正文开始>> 前言

随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。在目前国

内对此领域研究甚少的情况下，作者将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则和特点等

三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。作者认为网页艺术设计是艺术与技术的高度统一，指出网

页艺术设计包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站主题的关系的基础上，提出了“美”和“功能”都是为了更好地表达网站主题这一观点。

网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为

基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并

随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与 技术的高度统一。

目录：

一、网页艺术设计的内容~~~~~~~~~~~~~~~~~~~~页 1.视听元素~~~~~~~~~~~~~~~~~~~~页 2.版式设计~~~~~~~~~~~~~~~~~~~~页

二、网页艺术设计的原则 ~~~~~~~~~~~~~~~~~~页 1.主题鲜明 ~~~~~~~~~~~~~~~~~~~~~~~~~~页 2.形式与内容统一~~~~~~~~~~~~~~~~~~~~~页 3.强调整体

三、网页艺术设计的特点~~~~~~~~~~~~~~~~~~~~~

1.交互性与持续性~~~~~~~~~~~~~~~~~~~~~~~ 2.多维性 ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3.多种媒体的综合性 ~~~~~~~~~~~~~~~~~~~~ 4.版式的不可控性~~~~~~~~~~~~~~~~~~~~~~ 5.技术与艺术结合的紧密性~~~~~~~~~~~~~~~~~

四、结 束 语~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一、网页艺术设计的内容

设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页艺术设

计涉及的具体内容很多，可以概括为视听元素和版式设计两个方面。

1.视听元素

这里所说的视听元素，主要包括：文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文

字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术 的运用大大丰富了网页艺术设计的表现力。

以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。比如，大部分浏览器都可以显示GIF、JPE G图形和GIF89a动画。还有些多媒体文件（如MP3音乐）需要先下载到本地硬盘上，然后启动相应的外部程序来播放。另外，在浏

览器使用插件（Plug-in）可以播放更多格式的多媒体文件。微软推出IE浏览器后，提供了基于OLE的ActiveX技术，用来在网页

中播放多媒体。目前ActiveX已经成为热门技术。另一种播放多媒体的技术是JavaApplet。它是用Java语言编写的应用于网页之

中的小应用程序，相比于插件和ActiveX，JavaApplet具有更大的灵活性和良好的跨平台能力，因此具有很好的发展前景。总之，技术的不断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技 术的出现，也对网页的艺术设计提出了更高的要求。

2.版式设计

网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式

设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思

维个性化的表现出来，是一种具有个人风格和艺

术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。

但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网

页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计 带来了一定的难度。

二、网页艺术设计的原则

网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。网页的艺术设计，是技术与艺术的结合，内容与

形式的统一。它要求设计者必须掌握以下三个主要原则：

1.主题鲜明

视觉设计表达的是一定的意图和要求，有明确的主题，并按照视觉心理规律和形式将主题主动地传达给观赏者。诉求的目的，是使主题在适当的环境里被人们即时地理解和接受，以满足人们的实用和需求，这就要求视觉设计不但要单纯、简练、清晰

和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。

根据认知心理学的理论，大多数人在短期记忆中只能同时把握４到７条分立的信息，而对多于７条的分立信息或者不分立的信息

容易产生记忆上的模糊或遗忘，概括起来就是：较小而分立的信息要比较长而不分立的信息更为有效和容易浏览。这个规律蕴含

在人们寻找信息和使用信息的实践活动中，它要求视觉设计者的设计活动必须自觉地掌握和遵从。

作为视觉设计范畴一种的网页艺术设计，其最终目的是达到最佳的主题诉求效果。这种效果的取得，一方面通过对网页主题思想

运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对

网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注

意力，增进对网页内容的理解。只有两个方面有机地统一，才能实现最佳的主题诉求效果。

优秀的网页设计必然服务于网站的主题，就是说，什么样的网站，应该有什么样的设计。例如，设计类的个人站点与商业站点性

质不同，目的也不同，所以评论的标准也不同。网页艺术设计与网站主题的关系应该是这样：首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物，就是说，即要“美”，又要实现“功能”；最后，“美”和“功能”都是为了更好地表达主题

。当然，有些情况下，“功能”即是“主题”，还有些情况下，“美”即是主题。例如，雅虎作为一个搜索引擎，首先要实现

“搜索”的“功能”。它的主题即是它的“功能”。而一个个人网站，可以只体现作者的设计思想，或者仅仅以设计出“美”的 网页为目的。它的主题只有一个，就是——美。

只注重主题思想的条理性而忽视网页构成元素空间关系的形式美组合，或者只重视网页形式上的条理而淡化主题思想的逻辑，都

将削弱网页主题的最佳诉求效果，难以吸引浏览者的注意力，出现平庸的网页设计或使网页设计以失败而告终。

要使网页从形式上获得良好的诱导力，鲜明地突出诉求主题，具体可以通过对网页的空间层次、主从关系、视觉秩序及彼此间的 逻辑性的把握运用来达到。

2.形式与内容统一

任何设计都有一定的内容和形式。内容是构成设计的一切内在要素的总和，是设计存在的基础，被称为“设计的灵魂”；形式

是构成内容诸要素的内部结构或内容的外部表现方式。设计的内容就是指它的主题、形象、题材等要素的总和，形式就是它的

结构、风格或设计语言等表现方式。内容决定形式，形式反作用于内容。一个优秀的设计必定是形式对内容的完美表现。正如

黑格尔所说：“工艺的美就不在于要求实用品的外部造型、色彩、纹样去摹拟事物，再现现实，而在于使其外部形式传达和表

现出一定的情绪、气氛、格调、风尚、趣味，使物质经由象征变成相似于精神生活的有关环境。”（黑格尔《美学》第三卷）

一方面，网页设计所追求的形式美，必须适合主题的需要，这是网页设计的前提。只讲花哨的表现形式以及过于强调“独特的

设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的空洞而无力。设计者只有将二者有机地统一起来，深入领会主题的精髓，再融合自己的思想感情，找到一个完美的表现形式，才能体现出网页设计独具的分量和特有的价值。另

一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。那样得到的效果可能会适得其反。

只有通过认真设计和充分的考虑来实现全面的功能并体现美感才能实现形式与内容的统一。

据有关资料所做的保守估计，目前在WWW上网页数据传输平均以每秒1.5k的速度到达客户端。假设某个网页为了丰富其艺术性而

追赶时髦地大量使用图像或其它多媒体元素等，虽然达到了其静态形式美的效果，却造成多达几十K甚至更大的网页数据，使浏

览者必须等待很长时间才能看到“庐山真面目”，这样的网页就不是一个优秀的网页，因为它不符合网页传播信息的突出特性之

一——快捷性，使网页内容不能很快地到达访问者，影响了访问效果和质量，损害了访问者的情趣和积极性，这种技术要素影响 了传达信息的效果，因而不是形式与内容的完美统一。

网页具有多屏、分页、嵌套等特性，设计者可以对其进行形式上的适当变化以达到多变性处理效果，丰富整个网页的形式美。这

就要求设计者在注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页的形式与整体内容的统一。

因此，在网页设计中必须注意形式与内容的高度统一。

3.强调整体

网页的整体性包括内容和形式上的整体性，这里主要讨论设计形式上的整体性。

网页是传播信息的载体，它要表达的是一定的内容、主题和意念，在适当的时间和空间环境里为人们所理解和接受，它以满足

人们的实用和需求为目标。设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部

有机联系、外部和谐完整的美感。整体性也是体现一个站点独特风格的重要手段之一。

网页的结构形式是由各种视听要素组成的。在设计网页时，强调页面各组成部分的共性因素或者使诸部分共同含有某种形式特

征，是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。例如：在

版式上，将页面中各视觉要素作通盘考虑，以

周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定；一个站点通常只使用

两到三种标准色，并注意色彩搭配的和谐；对于分屏的长页面，不可设计完第一屏再考虑下一屏。同样，整个网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者完整的设计思想。

从某种意义上讲，强调网页结构形式的视觉整体性必然会牺牲灵活的多变性，“物极必反”就是这个道理。因此，在强调网页

整体性设计的同时必须注意：过于强调整体性可能会使网页呆板、沉闷，以致影响访问者的情趣和继续浏览的欲望。“整体” 是“多变”基础上的整体。

三、网页艺术设计的特点

1.交互性与持续性

网页不同于传统媒体之处，就在于信息的动态更新和即时交互性。即时的交互性是Web成为热点的主要原因，也是网页设计时

必须考虑的问题。传统媒体（如广播、电视节目、报刊杂志等）都以线性方式提供信息，即按照信息提供者的感觉、体验和事

先确定的格式来传播。而在Web环境下，人们不再是一个传统媒体方式的被动接受者，而是以一个主动参与者的身份加入到信息 的加工处理和发布之中。这种持续的交互，使网页艺术设计不像印刷品设计那样，发表之后就意味着设计的结束。网页设计人

员必须根据网站各个阶段的经营目标，配合网站不同时期的经营策略，以及用户的反馈信息，经常地对网页进行调整和修改。

例如，为了保持浏览者对网站的新鲜感，很多大型网站总是定期或不定期的进行改版，这就需要设计者在保持网站视觉形象一 贯性的基础上，不断创作出新的网页设计作品。

2.多维性

多维性源于超级链接，主要体现在网页设计中对导航的设计上。由于超级链接的出现，网页的组织结构更加丰富，浏览者可以

在各种主题之间自由跳转，从而打破了以前人们接收信息的线性方式。例如，可将页面的组织结构分为序列结构、层次结构、网状结构、复合结构等。但页面之间的关系过于复杂，不仅使浏览者检索和查找信息增加了难度，也给设计者带来了更大的困

难。为了让浏览者在网页上迅速找到所需的信息，设计者必须考虑快捷而完善的导航设计。

印刷品中导航问题不是那么突出，如果一个句子在页尾突然终止，读者会很自然地翻到下一页查找剩余部分，为了帮助读者找

到他们要找的信息，出版者提供了目录、索引或脚注。如果文章从期刊中的一页跳到后面的非顺序页时，读者会看到类似于

“续68页”这样的指引语句。然而，作为一名网页设计者，你以前所学的导航技术没有一种完全适合于网页导航。在替浏览者

考虑得很周到的网页中，导航提供了足够的、不同角度的链接，帮助读者在网页的各个部分之间跳转，并告知浏览者现在所在 的位置、当前页面和其他页面之间的关系等。而且，每页都有一个返回主页的按钮或链接，如果页面是按层次结构组织的，通

常还有一个返回上级页面的链接。对于网页设计者来说，面对的不是按顺序排列的印刷页面，而是自由分散的网页，因此必须

考虑更多的问题。如：怎样构建合理的页面组织结构，让浏览者对你提供的巨量信息感到条理？怎样建立包括站点索引、帮助

页面、查询功能在内的导航系统？这一切从哪儿开始，到哪儿结束？

3.多种媒体的综合性

目前网页中使用的多媒体视听元素主要有文字、图像、声音、视频等，随着网络带宽的增加、芯片处理速度的提高以及跨平

台的多媒体文件格式的推广，必将促使设计者综合运用多种媒体元素来设计网页，以满足和丰富浏览者对网络信息传输质量

提出的更高要求。目前国内网页已经出现了模拟三维的操作界面，在数据压缩技术的改进和流（Stream）技术的推动下，Internet网上出现实时的音频和视频服务，典型的有在线音乐、在线广播、网上电影、网上直播等。因此，多种媒体的综合

运用是网页艺术设计的特点之一，是未来的发展方向。

4.版式的不可控性

网页版式设计与传统印刷版式设计有着极大的差异：

(1)印刷品设计者可以指定使用的纸张和油墨，而网页设计者却不能要求浏览者使用什么样的电脑或浏览器；

(2)网络正处于不断发展之中，不象印刷那样基本具备了成熟的印刷标准；

(3)网页设计过程中有关Web的每一件事都可能随时发生变化。

这一切说明，网络应用尚处在发展之中，关于网络应用也很难在各个方面都制订出统一的标准，这必然导致网页版式设 计的不可控制性。其具体表现为：

(1)网页页面会根据当前浏览器窗口大小自动格式化输出；

(2)网页的浏览者可以控制网页页面在浏览器中的显示方式；

(3)不同种类、版本的浏览器观察同一个网页页面，效果会有所不同；

(4)用户的浏览器工作环境不同，显示效果也会有所不同。

把所有这些问题归结为一点，即网页设计者无法控制页面在用户端的最终显示效果，但这也正是网页设计的吸引人之处。

5.技术与艺术结合的紧密性

设计是主观和客观共同作用的结果，是在自由和不自由之间进行的，设计者不能超越自身已有经验和所处环境提供 的客观条件限制，优秀设计者正是在掌握客观规律基础上得到了完全的自由，一种想象和创造的自由。网络技术主

要表现为客观因素，艺术创意主要表现为主观因素，网页设计者应该积极主动地掌握现有的各种网络技术规律，注

重技术和艺术紧密结合，这样才能穷尽技术之长，实现艺术想象，满足浏览者对网页信息的高质量需求。

例如，浏览者欣赏一段音乐或电影，以前必须先将这段音乐或电影下载回本地机器，然后使用相应的程序来播放，由于音频或视频文件都比较大，需要较长的下载时间。流（Stream）技术出现以后，网页设计者充分、巧妙地应

用此技术，让浏览者在下载过程中就可以欣赏这段音乐或电影，实现了实时的网上视频直播服务和在线欣赏音乐

服务，无疑增强了页面传播信息的表现力和感染力。

网络技术与艺术创意的紧密结合，使网页的艺术设计由平面设计扩展到立体设计，由纯粹的视觉艺术扩展到空间

听觉艺术，网页效果不再近似于书籍或报刊杂志等印刷媒体，而更接近于电影或电视的观赏效果。技术发展促进了

技术与艺术的紧密结合，把浏览者带入一个真正现实中的虚拟世界。

四 结 束 语

网页作为一种新的视觉表现形式，它的发展虽然没有多长时间，它兼容了传统平

面设计的特征，又具备其

所没有的优势，成为今后信息交流的一个非常有影响的途径。网页设计是一种综合性的设计，它所涉及的范围非常的广泛，包括消费者心理学、视觉设计美学、人机工程、哲学等诸多方面，当然也离不开一定的科学技术发展。在本文中只从视

觉传达的角度进行了一些阐述与分析。好的网页设计除首先应考虑其内容上的精益求精外，其次就是对内容合理有效的视

觉编排。美是任何网页所必需具备的基本因素，网页信息不仅是为了满足使用者的需求，更重要的是创造一种愉悦的视觉

环境，技术与艺术的紧密结合在网页艺术设计中体现得尤为突出。参 考 文 献

(1)谢依君.电子报的新闻介面分析(D).台北：台湾国立政治大学新闻学系，1999.(2)唐良瑞，蔡安妮，孙景鳌.从认知心理及人机界面谈网页设计(J).工程图学学报，2000，(2)：31-36.(3)徐珂，苗彤，赵晖.网页视觉与设计(M).北京：人民邮电出版社，2001.(4)李砚祖，芦影.视觉传达的历史与美学(M).北京：中国人民大学出版社，2000.(5)何苏六.网络媒体的策划与编辑(M).北京：北京广播学院出版社，2001.

第四篇：东西方传统设计风格

设计风格与流派课程 指导老师：盛忠谊

雲南少数民族“干栏式”民居

姓名：陈明梅 学号：M11055108066

专业：2011届MFA环境艺术

雲南少数民族“干栏式”民居

水傣的传统民居是干栏式，也就是俗称“竹楼”。特点是歇山式的屋顶，正脊很短，屋顶很大，坡度非常陡，也就是当地人说的“偏厦”，看上去很象重檐顶形式。傣族干栏民居的构架非常简単，在平地上接塔出一亇稳定的架子，底层悬空二层做出居室型，然后在顶部辅草就可以了。这种形式是因地取材便利快捷，占地面积少居住面积大，有防潮通风等特点很适合当地气候条件。

干栏式建筑的结构干栏（也作[干阑]）是历史极为久远的一种建筑类型，它是由原始人类的巢居逐步演变而成的。[干栏]一词最早见于《魏书》：[依树积木，以居其上名曰干栏]。《旧唐书》：[山有毒草及风蝮蛇，人并楼居，登梯而上，号为干栏]。干栏是一种把居住层地板用支柱架离地面的建筑，以避虫蛇猛兽，并有利于防潮及通风，适用于温暖潮湿的地域。（如图）

云南省剑川剑湖海尾河旁的海门口遗址的复原的干栏建筑（距今7000多年干栏式建筑群（距今3000多年）干栏在中国古时候的长江以南地区曾广泛采用，后来逐渐减少，现在只存在于西南少数民族地区。如今仍以干栏为主要住房的，有傣族的竹楼、壮族的麻栏、侗族的木干栏、黎族的船形屋、水族的木楼等。其中傣族的竹楼是以竹为主要建筑材料，每家有篱笆围成的小院，种有芭蕉等热带植物，极富生趣。壮族的麻栏吸收了较多的汉族建筑手法，木材用量增加。侗族的木干栏建造工艺较高，尤其是村寨中的鼓楼及风雨桥，显示出惊人的木工技巧。

干栏式竹楼具有独特的风格，它有舒适、卫生、防潮、防虫等优点。傣家的竹楼正方形，分为上下两层，上层住人，距离地面约2公尺左右，以数根木料（或用大青竹）为柱。下层无墙，用以饲养牲畜及堆放什物。竹楼层顶造型为歇山式，层面用草排复盖。设有楼梯，拾级登楼，有走廊、凉台，可以晾物和纳凉。室内用竹篱笆隔为两间，内间为主人卧室，外间为客室。客室进门内有高出地面四、五寸长的火塘，供烹饪取暖照明之用。外间是接待宾客的场所，也是室内活动的中心。卧室是一大通间，男女数代同宿一室，席楼而卧，仅仅是使用黑布蚊帐，作为间隔。室内陈设简朴，用具绝大部份为竹制品，除锅、盆、罐外。其余桌、凳、箩、筐、饭盒等系竹篾编制而成。壁多无窗，阳光和风都是从这些竹片缝中透入。楼外以竹为篱笆，宅院内长着劲秀挺拔的椰子、树干高大的柚树、果实累累的香蕉、香甜可口的木瓜和婆娑苍翠的竹丛。一派诗情画意，点缀出浓郁的亚热带风光。傣族的竹楼具有两大优点。一是竹楼能防蚊虫、防潮湿、防野兽。二是建盖竹楼的材料来源方便，就地取材，比较经济。傣族建造竹楼使用的材料主要是大青竹和少量木料。大青竹是傣族地区的特产，而竹楼屋面覆盖的草排是以当地所生长的茅草编制而成，这种制草排的茅草来源广，又很经济。加之傣族人民建造新房时有全寨互相帮助的习惯，一家盖房，全村出动，送草排，赠送青竹，出劳力。因此，傣族人民建造新房的速度也相当快，一幢竹楼只需一天多即可竣工。新房落成，全村老幼都前往祝贺。傣族人民喜爱的民间歌手“赞哈”，更以自己的歌声祝贺主人迁入新居。、

第五篇：计算机网页设计毕业论文（范文）

计算机网页设计毕业论文

计算机网页设计毕业论文

asp技术在交互式网页设计中的运用

一、asp技术简介

asp技术 asp（active server pages动态网页）是微软公司推出的一种用以取代cgi（common gateway interface通用网关接口）的技术。目前，internet上的许多基于windows平台的web站点已开始应用asp来替换cgi。简单地讲，asp是一个位于服务器端的脚本运行环境，通过这种环境，用户可以创建和运行动态的交互式web服务器应用程序，如交互式动态网页，包括使用html表单收集和处理信息，上传与下载等等。通常情况下，用户通过浏览器看到的网页大多是静态的，目前internet 上的许多站点，仍然提供'静态'（static）的主页内容。所谓'静态'，指的就是站点的主页内容是'固定不变'的。当浏览器通过internet 的http(hypertext transport protocol)协议，向站点服务器(web server)要求提供主页的内容时，站点服务器收到要求后，就传送原已设计好的静态的html 的文件数据给浏览器。一个'静态'的站点，若要更新主页的内容，必须手动的来更新其html的文件数据。而随着web应用的发展，用户希望能够看到根据要求而动态生成的主页，例如响应用户查询数据库的要求、生成报表等。当在浏览器上填好表单(form)的输入数据，以提供http要求时，可以在站点服务器中执行的应用程序，而不只是一个html 文件。

站点服务器收到要求执行的应用程序，分析表单(form)的输入数据，将执行的结果以html的格式传送给浏览器。根据用户请求生成动态主页的传统方法有cgi、isapi等。cgi是根据浏览器端的http请求激活响应进程，每一个请求对应一个进程。当同时有很多请求时，程序挤占系统资源，造成效率低下；isapi针对这一缺点进行改进，利用dll（动态链接库）技术，以线程代替进程，提高了性能和速度，但要考虑线程的同步问题，而且开发步骤烦琐。这两种技术和另一普遍使用的开发动态网页的技术java都还存在着另外一个问题，那就是开发困难，程序的开发和html写作是两个完全不同的过程，需要专门的程序员开发。而较简单的开发技术如javascript和idc(internet database connector)等功能有限，不敷使用。

asp使用的activex技术基于开放设计环境，用户可以自己定义和制作组件加入其中，使自己的动态网页几乎具有无限的扩充能力，这是传统的cgi等程序所远远不及的地方。asp与常见的在client端实现动态主页的技术如java applet、activex control、vbscript、javascript等不同，asp中的命令和script语句都是由服务器来解释执行的，执行结果产生动态生成的web页面并送到浏览器；而client端技术的script命令则是由浏览器来解释执行。由于asp是在服务器端解释执行，开发者可以不必考虑浏览器是否支持asp；同时由于它在服务器端执行，开发者也不必担心别人下载程序从而窃取编程逻辑。

asp通过后缀名为.asp的asp文件来实现，一个.asp文件相当于一个可执行文件，因此必须放在web服务器上有可执行权限的目录下。当用户从浏览器输入了.asp文件的地址后，浏览器就将这个url请求发给web server，如果web server上装了asp，就调用asp。asp读出相应.asp文件，解释并执行命令，动态生成一个html页面回传web server，然后web server再把结果发送给浏览器。asp文件的制作和html类似，且和html开发集成，可以在同一个过程完成，利用asp将可以执行的脚本嵌入到html文件中(将html文件的后缀名改为.asp)，这使得html文件的编写与脚本的开发融合在一起。通过asp内置的对象、服务器组件（server component）可以完成非常复杂的任务，而且用户还可以自己开发或利用别人开发的服务器组件完成专门的任务。asp比较网关及服务器扩展模式有着以下优点：

(1)完全与html文件融合在一起；

(2)容易创建，不需要其它编译、链接程序；

(3)面向对象的并通过activex server对象可扩展。

二、电子商务数据访问方式

电子商务是指通过电子方式，并在网络基础上实现物资、人员过程的协调，以便商业交换的活动。在电子商务系统中，web提供了与客户进行通信联络的有效手段，利用web技术，实现web服务器与数据库系统的连接，完成对数据的处理与查询，用户可以通过操作简单易学的浏

览器来查询处理所需要的各种数据。实现web服务器与数据库的连接一般有两种方法：一种是利用中间件技术在两者之间建立连接和通信，如cgi(通用网关接口)和api(应用程序编程接口)。

web服务器通过调用cgi程序实现与web浏览器的交互，即cgi程序接受浏览器发给web服务器的信息，进行处理后，将相应结果再送回给web服务器，通过web服务器将信息传送给浏览器。但cgi程序在响应速度和资源利用等方面有较大局限性，客户端每请求一个cgi程序，服务器端便打开一个进程，当请求的数量较大时容易引起瓶颈现象，开发人员常利用api编程来扩展服务器功能，api程序占系统资源少，运行效率较高，但它的编程较cgi程序更为复杂；另一种是由浏览器中的java小应用程序(java applet)通过浏览器访问web服务器上的数据库，利用了jdbc(java database connectivity)技术，它通过jdbc提供的api实现对web server的访问。由于java applet本身的局限性，目前大多数的应用是基于中间件技术的。asp也是属于中间件的一种模式，但在windows平台上它比较网关及服务器扩展模式有着较大的优点。网关的最大特点是它的平台无关性，但网关程序通常较难编写和改变。网关程序通常是一个独立的程序，并不和html文件融合在一起，它需要用如c、c++、vb、perl等语言来编写独立的应用程序，而asp应用改变了这一点。使用asp不仅可以读取access和 sql server的数据库，而且还可以读取其他odbc（open database connect 开放式数据库互联）兼容的数据库。

在asp中访问数据库是通过ado(activex database object活动数据对象)及事务处理语句来实现的。ado是一种操作microsoft所支持的数据库的方法，是一项容易使用并且可扩展的将数据库访问添加到 web 页的技术。ado对象的使用与dao（数据访问对象）、rdo（远程数据对象）的方式相似。在asp中，ado可以看作是一个服务器组件，更简单点说，是一系列的对象，应用这些功能强大的对象，即可轻松完成对数据库复杂的操作。

三、asp在电子商务中的应用

在电子商务中，对用户而言，进行网上信息查询的目的是寻找自己需要的产品或服务，而对于商品或服务提供者来说，其目的则是向用户推销自己的产品或服务。因此，让用户通过浏览器查询服务器的后端数据库是许多web服务提供者必需有的服务，asp通过内置的adodb组件来实现这一功能。可以使用ado去编写紧凑简明的脚本以便连接到odbc 兼容的数据库和 ole db 兼容的数据源。具体的操作步骤可以归纳为以下几步：

① 创建数据库源名（dsn）adodb通过odbc工作，因此要在odbc中设置dsn（数据源名）。打开windows的'控制面板'，双击'odbc'的图标，然后选择'文件 dsn '的属性页，单击<添加，选择数据库驱动程序，然后单击'下一步'，按照屏幕的指示键入数据源文件的名称，然后单击'下一步'，再单击'完成'创建数据源。

②创建数据库链接 链接用以保持一些关于正在访问的数据的动态信息，以及链接者信息。利用adodb的成员函数open和先前设定的dsn与数据库连接，其语法如下：

setconnect=server.createobject('adodb.connection')’创建了链接对象connect。connect.open('dsn=dsnname；uid=userid；pwd=password')’打开链接。dsnname为数据源名；userid为用户名；password为用户口令。③创建数据对象 ado中的数据对象通常保存的是查询结果。recordset 是ado中最复杂的对象，有许多属性和方法，灵活运用，可以达到许多好的效果。其创建方法如下： set recordset =connect.execute(sqtstr)’创建并打开了对象recordset，sqtstr是一个串，代表一条标准的sql语句。例如： sqlstr='select*from b1' set recordset =connect.execute(sqlstr)这条语句执行后，对象recordset中就保存了b1中的所有记录。

④操作数据库 可利用execute方便地执行数据的插入、修改、删除等操作。如执行插入操作： sqlstr='insert into b1values(1,2)' connect.execute(sqlstr)⑤关闭数据对象和链接 在使用了ado对象之后，一定要关闭数据对象和链接。在asp中通过调用方法close实现关闭。关闭创建的数据对象：record set.close set record set=nothing 关闭创建的链接对象：connect.close set connect=nothing 完整的程序片段：

//产生组件实例

<％

setconnect=server.createobject('adodb.connection')//连接数据库

connect.open('dsn=dsnname;uid=userid;pwd=password')//执行查询

sql=select＊fromtablename setrs=connect.execute(sql)％

//显示结果

<％dowhile not rs.eof％

<％=rs(fieldname)％ <％

rs.movenext

loop ％

上述是用asp访问数据库的全过程，由于应用面向对象思想，所有操作都比较简单，用户需要注意的仅是对数据结构的了解、当前所操作的对象及对象的属性等等，只要对这些有了清晰的认识，再加上asp强大功能，在网络上使用数据库，实现用户与页面间交换信息，就再也不是什么难事了。