兰州大学本科毕业论文网页的设计与应用(13页).doc

《兰州大学本科毕业论文网页的设计与应用(13页).doc》由会员分享，可在线阅读，更多相关《兰州大学本科毕业论文网页的设计与应用(13页).doc（13页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-兰州大学本科毕业论文网页的设计与应用本 科 毕 业 论 文题 目：_ 网页的设计与应用 姓 名：_ 于浩淼 _ 学 号：_ 140913033300005 _专 业： 计算机科学与技术_教学站点：邢台工程职业技术学院入学时间： _2014.09 _ 指导教师：_ _ _张晓芳 _ 兰州大学网络教育学院制2016年9 月13日提示：根据兰州大学网络教育学院论文写作的规定，如发现论文有抄袭、网上下载、请人代写等情况，毕业论文一律不及格。毕业论文不及格者，可申请重写一次，并按重修缴纳费用。本人承诺：本人已经了解兰州大学的毕业论文写作的有关规定；本人的论文是在指导教师指导下独立完成的研究成果。整篇论

2、文除了文中已注明出处或引用的内容外，绝没有侵犯他人知识产权。对本论文所涉及的研究工作做出贡献的个人和集体，均已在文中以明确方式注明。 签 名：_于浩淼_ 日 期：_2016.9.13_目 录摘 要1第一章文字元素在网页设计中的应用2一、文字的字体设置2二、文字的大小设置2三、文字的颜色选择3第二章配色方案在网页设计中的应用4一、网页设计色彩的搭配原则4二、实用配色方案5三、色彩搭配的注意问题6第三章Flash动画在网页设计中的应用7一、Flash在网页设计中的运用7二、Flansh应用问题8第四章视觉效果在网页设计中的应用9一、网页设计中视觉元素的使用原则9第五章美学在网页设计中的应用10一、

3、CSS10二、留白10参考文献12-第 10 页兰 州 大 学网页的设计与应用摘 要随着信息技术的发展，每时每刻大量的信息冲击支配着我们的思维和行动，我们已然步入信息化的社会环境。信息时代下，对知识信息的掌握和运用决定了人类的生产能力和生活品质。在信息传达与交流活动中，文字作为最普遍使用的视觉符号元素，用以记录和交流思想与情感，从产生之初就在人类文明的发展过程中起到了极其重要的作用。文字作为信息传播的符号一直出现在报纸、书刊、杂志、广播、电视等媒介中。随着信息技术的发展，网络化程度不断提升，网络平台已经成为一种重要的信息传播媒介，给我们的工作、学习以及生活带来了更多的方便，并成为文字展示的新舞

4、台。中国论文网 关键词：网页设计；视觉元素；运用；美学第一章文字元素在网页设计中的应用文字作为信息传达符号，成为网页设计的主体构成元素，在网页中占据相当大的面积，文字表现的好与坏直接影响到整个网页的质量。在网页设计发展中，文字一方面是信息传达的重要媒介，有比其他视觉符号如图形、色彩更加易于辨识的信息传达的明确性。另一方面也是具有直观诉求力的视觉传达要素，并通过文字形态的节奏与韵律带给人美感。网页设计中文字的编排设计，如何在传达文字信息时，更容易为浏览者所阅读和接受，网页内容与形式达到更高度的统一。 一、文字的字体设置 网页设计中的文字设计，首先要了解网页上文字字体的显示原理。在浏览者电脑上看到

5、字体的过程实际上是这样的，当网页浏览器加载网页的CSS代码后，解析到有关字体的样式，便会在浏览者电脑字库中查找该字体，只有找到了相应的字体文件，才会对网页中的文字进行渲染，显示出你想要的效果。如果你的操作系统中，并没有安装网页CSS代码中定义的那种字体，就无法渲染出那种字体的效果，而通常使用当前系统的默认字体来代替。网页设计是面对所有浏览者的，所以这个问题，才是选择字体的最大难点。解决这个问题只有从两个方面进行出发： （一）使用宋体等常用的字体。所有浏览器默认的标准字体是中文宋体和英文times new Roma字体。如果没有进行任何字体设置，在任何操作系统和浏览器里网页将以这两种标准字体显示

6、保持正确。现在大多数电脑操作系统为微软的windows系统，其安装时就自带的4种中文字体和40多种英文字体，四种中文字体分别为宋体、黑体、楷体（GB2312）、仿宋（GB2312）。凡是在windows操作系统的浏览器使用系统自带的字体都可以正确显示这些字体。 （二）图片的方式置入网页。根据网页中的设计思想而选择相应的字体，设计师往往需要用一种特殊的字体来体现自己的风格，那么特殊字体或艺术字体因为字体的原因只能在本机电脑上显示成功。为避免这种情况的出现，设计师可以把文字进行栅格化，把文字变为图片的形式，最好以图片的方式置入网页，以保证所有人看到的网页效果相同。 二、文字的大小设置 由于网页设计

7、是基于电脑虚拟平台，其展示方式区别于之前的传统媒介的实物展示，它需要在显示终端中展现。而现在显示终端百花齐放，网页设计师需要考虑不同客户端的浏览体验，而文字大小直接决定了网页的视觉效果，是用户体验中的一个重要部分。不同的显示器尺寸，不同的分辨率设置，不同的DPI参数，乃至不同的浏览器预设，都会对最终展现的文字大小带来影响。虽然现在很多浏览器已经可以方便地缩放页面，但用户每次都要重新缩放，而且许多用户不习惯缩放页面达到最佳视觉效果。这就要求网页设计师最好还是根据绝大多数用户的使用习惯，设置一个比较体贴的默认字号。 三、文字的颜色选择 字体的颜色选择同样是一个重要的细节，通常来说，颜色要与背景有一

8、定的对比度，因为低对比度容易导致字体看不清楚。所以要用高对比度的颜色，所以文章都是白底黑字。网页中的文字，通常使用黑色，这样更加可以保证文字的辨识度又符合大众的口味。当然现在随着网页设计的发展，颜色应用越来越多，但这里要避免的一些特殊颜色，因为网页中的一些默认颜色。比如说是蓝色，因为蓝色代表着网页中可以进行点击跳转的超链接，如果网页中有一段蓝色的文字，会让人误以为是可以点击的超链接，所以这种颜色要特别慎重。但是有些时候在设计中，必须要用到这种颜色时，也有一些其他的方法来避免类似问题。例如将超链接的样式带有默认的下划线。 文字作为信息传播的符号，实现了良好信息传达的效果。文字的自身结构又具有视觉

9、图形意义，字体的造型变化构成了各种形状，在网页设计中文字的表现形式既有规律性又有极大可塑性。利用文字视觉传递、视觉规律、视知觉感受的生理效应等作用，可以在网页设计制作中寻求和创造更加丰富多彩的个性化、风格化的视觉语言形式。第二章配色方案在网页设计中的应用一、网页设计色彩的搭配原则（一）适用性原则设计网站要根据不同类型、不同读者群以及不同性别选择最合适的色彩，才能最大限度提高网站的表现效果。例如，食品类网站应选择能激起人们食欲的颜色来展现，所以多选择橙色系；另外，不同地区、不同文化与不同年龄层对颜色的反应是有所不同的。比如在亚洲，红色代表婚姻、繁荣、快乐，而在南非，红色是丧服的色彩。所以你在应用

10、某种色彩之前，要好好调查一下这种色彩在特定地区或是特定文化下带给人们的联想，否则，可就会起到反作用。另外，由于不同年龄层思维的差异、审美习惯的差异，设计网页时也要考虑好该网站的主要读者群的年龄，比如年轻族群一般比较喜欢色彩鲜艳的饱和色，但这样的颜色却引不起高年龄层的兴趣。还有，根据男女性别的差异性，男性网站多使用冷色调，而暖色调多适合女性网站，能够表现出女性可爱、温柔、亲切的特性。（二）要注意时效性和独特性要想让设计出来的网站迅速抓住浏览者的眼球，应该在不脱离适用性原则的情况下，突出该网站的个性和特点。另外，同一个色彩很容易就充斥着整个市场，且浏览者很快的就对流行色彩感到麻木；但我们不妨从另外

11、一个角度考虑，你可以使用几十年前的流行色彩，引起人们的怀旧之情。（三）整体协调平衡性原则1、注意整个画面的色调问题。你设计的网页是要表现严肃、稳重或是温暖或是充满生机等就是由你网页的基调决定的。一般来说，你采用的颜色的色相、明度、纯度关系不一样或色块面积大小不一样就会表现出不同的感觉。比如：你采用暖色系的颜色则表现出温暖的感觉，而采用冷色系的颜色则表现出冷清、平静的感觉；以明度高的色为主色调则亮丽轻快，以明度低的色为主色调则显得庄重、平稳。2、颜色的平衡问题。颜色的平衡就是颜色的强弱、轻重、浓淡这种关系的平衡。一般我们可以通过调整图形的形状和面积的大小或是加入无色系来使画面色彩调和。一般同类色

12、配色比较容易平衡。而对比色且明度也相似的纯色配色，比如：蓝和橙的配色，会因过分强烈感到冲突而使画面不协调。我们这时可以调整两者色彩的面积比例使一种色块缩小，另一种色块变大或加黑白灰，改变其明度和纯度并取得平衡，就可以使画面色彩平衡。纯度高而且强烈的色与同样明度的浊色或灰色配合时，如果前者的面积小，后者的面积大也可以达到平衡。二、实用配色方案（一）使用邻近色可见光可以分解为从蓝色到红色的彩虹光谱带。而色相环是在红黄蓝三原色基础是混合生成的，色环通常包括12种不同的颜色。如图1所示。而邻近色是色相环上任一颜色同其毗邻的颜色互称为邻近色。例如红色和橙色，绿色和蓝色互称为邻近色。在网页设计中经常使用邻

13、近色，它的特点是使画面统一和谐，富有层次，在使页面稳重的同时又不失活力，可以说是一种非常常用的配色类型。在网页中应用邻近色时，要注意色块的大小和位置。不同亮度的颜色会影响人们的视觉感受，一般来说，颜色重也就是低亮度的颜色会显得面积小，颜色浅也就是高亮度的颜色会显得面积大。所以在实际应用中，在色彩面积大小和位置上要做好设置。一般位置选在页面的黄金分割线左右，忌选择等面积的颜色色块，在大小上可以选择主色调颜色为大面积色块，次色调颜色为小面积色块。（二）使用同类色同类色指同一色相，不同明度的颜色。即两色属于同一颜色，只是深浅、明暗不同。如红色、暗红、紫红等。先选定一种色彩，然后调整其明度，用于网页中

14、不同位置可营造层次感，使网页整体色调统一协调。但同类色有时会显得单调，缺乏生气。如果添加少许色相环上相邻或是相对色系，画面就会活跃、生动起来。（三）使用对比色 1、冷暖色调的对比红、橙、黄等被称为暖色。暖色调给人温暖、舒适和活力的感觉，因此在网页设计中可以突出视化效果。青，蓝，紫都属于冷色系，冷色调可以给人明快、硬朗的感觉。2、互补色的对比在色相环上相差180的两种颜色是互补色。比如红和绿、蓝与橙、黄与紫等。一般前两种对比色实际应用比较多。使用对比色这就要把握“大调和，小对比”这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。另外，要是大面积使用，可以考虑加入无色

15、系的黑白灰，可使页面协调统一。还要考虑整个页面的基本色调，是以暖色调为主还是以冷色调为主，不要偏离了主题色调。还要注意对比色间的比例变化，选择一种颜色为主色而另一种颜色为副色，放在一起视觉冲击力很强。例如红和绿搭配，会使红色显的更红，而绿色显的更绿，二者是互斥的，但恰当控制二者色块比例的大小，比如让绿色块多红色块少，就降低了色彩的冲击力，起到“红花绿叶”的效果。（四）使用无色系一般把色彩分为有色系和无色系。黑白灰属于无色系，其他的色彩都属于有色系。单独使用无色系制作的网页很少，一般无色系和有色系结合使用的较多，无色系（黑白灰）几乎与所有的有色搭配都不会冲突，一般来说，无色系与有色系的搭配主要目

16、的是强调主体或是控制画面色彩平衡。若网页是以两种高纯度的颜色为主，画面就会显得颜色纯度过高，缺乏对比和层次，有些混乱，色彩失去平衡，这时，就可以在画面中加入黑白灰来对网页中的色彩进行控制，使画面富有层次。三、色彩搭配的注意问题（一）忌单一单一颜色让人感觉单调、乏味。忌多让人感觉轻浮，花俏。忌粉颜色浅固然显的干净，但如果对比过弱，整体显得苍白无力了。蓝色忌纯，绿色忌黄，红色忌艳。（二）图形色和文字色要和底色有一定的对比度。一般要突出文字色和图形色，让其能吸引浏览者的注意力，切忌底色过分突出，喧宾夺主。（三）恰当的品牌联想，基于企业品牌标识色系或产品色系所营造的配色方案能够有效引起访问者对于品牌和

17、产品的联系、共鸣。（四）配色要有重点色。有一种主色贯穿其中，主色并不是面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就是重点色。选择重点色要注意以下几点：重点色应该选择比其他的色调更强烈的色。重点色应该选择整体色调的对比色。重点色只需起到点睛作用，不要大面积使用。选择重点色必须考虑与整体色调的协调和平衡问题。 第三章Flash动画在网页设计中的应用在网络设备飞速的更新换代中，人们对Web网页的制作水平，以及对Flash动画的要求也越来越高。并且Flash动画作为网站中吸引人们眼球的视觉元素，网站适当利用好Flash就会使浏览者更有兴趣关注网站，而促进浏览者和制作者的相互交流，从而网页就

18、达到吸引阅览者的目的。 一、Flash在网页设计中的运用现在，在网络设计中，Flash技术已经有了广阔的拓展天地。这就表明了网页设计者必须具备Flash动画的技术，才能够适应当前的发展。Flash技术从简单的文字呈现到多媒体的flash网站的形成，从而标志着flash技术已经与网站设计完全融合。 （一）Flash在网页设计中的应用方式 1、主题的突出 静态网页中，主要是用文字和图片的方式来突出网站的重要信息，而用了Flash之后，就会吸引人的注意力，不但是色彩和动态的呈现上给人一种撼动人心的作用，而且还会给人焕然一新的感觉。并且运用在主题上面，很容易给人留下深刻的印象。 2、动态交互 Flas

19、h重组功能再结合脚本语言和流程的调控，这三者相结合，让浏览着运用鼠标键盘进行画面切换，从而完成动画的交相呼应的职能。 3、数据库支持 Flash具有把数据库连接起来的功能，这就更加丰富了网站的内容和动态呈现。Flash与HTML等内容相结合，能够制作出前台为Flash，而后台是数据库和asp技术的数据连接措施。 Flash和asp结合之后，将网页所表现出的效果提升了一个高度，二者再与数据库相结合之后，不但对数据的支持力度上升，而且比较完善的交互界面也诞生在网页运用中。 （二） 网站建设中如何应用Flash技术 网页设计者从网站中的建立目的和用户的需求等各方面为出发点，来对Flash技术进行在网

20、站中的配比。 信息查询的网站中，即使以Flash为引导界面，如果Flash效果太多，就会造成主次不分的恶性效果。而在娱乐版面中，Flash的篇幅应该加大，这些都要以互相交流为主，增加浏览者观看的兴趣。 1、部分应用 在网页设计中，Flash进行展示的应当是突出主题的内容，这部分不应该过多，这样就做到点石成金的效果，这样不但把主题突出，还可以调动起阅览者的兴致。 2、整个网站的应用 在广告、传媒、游戏等设计类网站，为了能够把本网站的个性化表现出来，而把Flash运用到整个网站，用单一的Flash来表现出其活跃和动态性。 纯flash网站，从简单的文字、图片等设计，到复杂的音视频、广告、游戏还包括

21、本网站的注册页面和登陆页面，已经导航栏链接等等，全部都是用Flash来装扮的，这就把网站的个性化、灵动性凸显出来，给人带来视觉上的享受。 （三）在flashing技术在旅游中的应用 这一点主要是针对于一个群体，有可提供的是Google 地图的自主性的旅游的导航功能。 在网络上各种旅游信息的传播，让一部分不想受到约束的旅游者提供了便利，而本方案是通过Google地图的自主导航功能，把旅游者想要去的地方，进行吃住行玩的一个整合，让旅游者提供了便利。而旅游者也可以在游玩的时候，在地图上进行评论，从而为他人提供旅游帮助。 二、Flansh应用问题 （一） 搜索引擎不能识别的问题 制作单一的flash的

22、状态，全部都是Flash制作的内容，而搜索的引擎并不会很少的识别出来这到底是表达的什么，从而导致网站无法做到很好的向浏览者展示，宣传和推动力不够。 （二）代码的安全问题 ActionScript脚本语言在功能化比较多的基础上，缺点是有漏洞。而这种漏洞就促使了一些含有病毒的恶意代码随之攻击Flash的访问者的电脑，所以电脑的安全性受到辖制。所以有些访问者为了避免恶意病毒的入侵就把Flash动画全部都屏蔽，这样从而使网页设计者预定的效果。第四章视觉效果在网页设计中的应用一、网页设计中视觉元素的使用原则 （一）主题明确、鲜明突出 网站的题材，也就是主题的定位是网站设计中首先要解决的问题。在网站主题的

23、定位问题上，我们首先要明确建立网站的目的，这是从网站建设者的角度来考虑的。另一方面，则是网站受众人群的基本情况，明确他们的需求，以确定网站为使用者所提供的信息或经验。确定主题之后，网站在建设过程中，提供的全部信息必须根据主题进行选择、鉴别和整理。信息传达的目的性越明确，针对性越强，传达的成功率就会越高。在明确网站的主题后，设计的全过程都要围绕这一主题展开。主题必须要做到鲜明突出、力求简洁、要点明确，尽量以简单明确的语言和画面告诉所有人网站的主题，从而吸引对本网站有需求的人。 （二）设计目的明确、形式鲜明 我们在进行网页设计时，要铭记网页形式的核心是要为内容服务的，但是我们不能忽略了其所具有的独

24、立性和艺术规律。明确的设计目的和清晰的设计形式是我们设计网页时必须要明确的，因为网页设计的根本目的便是为了更好的体现和传达信息，为浏览者提供其所需要的信息或经验。在网页设计中我们要用不同形式的设计来体现不同的内容，如政府机构的网页必须要简洁、庄重，而商业网页必须根据自己商品的特征采取不同的表现形式。 第五章美学在网页设计中的应用网页设计是网站向网民提供信息产品和信息服务的一种方式，它是开展电子商务的基础设施和信息平台。网站同时也是通过网络平台宣传和反映网站企业的形象和文化的重要窗口。美学与商业的结合将使得美学更大众化，商业更艺术化，营造出一个双赢的局面。使用CSS和HTML技术可以实现这个目标

25、，将网页设计与美学完美结合。 一、CSS 级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它被用于网页的风格设计。通过设立CSS，能够统一管理HTML中各个标志的显示属性。CSS能够使网页设计师更有效地控制网页所呈现的外观。使用CSS，能够精确地控制网页元素的定位、外观呈现效果和其他的特殊效果。 做好CSS的布局，网页就成功了一半。我们要在开发中注意选择带有语义的标记，方便后续人员的开发，即id或class要让人见名知意。创建良好的标记首先要选择文档类型，再制定语言和字符集，接着制定标题。选用恰当的元素也同样重要，要避

26、免过度地使用div和span元素，它们的少量和必要的合理使用可以增强文档的结构性，但若是发现自己过度使用了它们，那么请考虑一下是否还有更加适合的HTML元素能够来代替它们。 要尽可能地少使用标签元素。如果想创建良好的文档结构，那么请尽可能地少使用标签元素。只使用必要的标签，将其他不是必须的标签都删除。这样做的好处在于它不仅能够让文件保持适宜的大小，还能让浏览器迅速完成对文档的解析，得到更快的显示网页的速度。 在适当的时候使用id和class属性。为元素添加起标识作用的属性可以让你在稍后容易地将该元素与CSS或javascript关联起来。虽然如今依然有部分浏览器对clas和id的大小写名称不敏

27、感，但为了方便调试和考虑到多浏览器的兼容性，还是区分为好。 另外，出于灵活性的考虑，给元素添加额外的class和span是十分有必要的。在页面的段落中声明内部元素，意味着在设计时我们可以为这些元素应用某些额外的样式。额外的span标签还有图像替换的功能。但为什么不使用同样具有该功能的img元素呢？这也是出于灵活性的考虑。若是图片的地址直接写入到HTML中，就不可能只通过替换样式文件让页面产生变化了。 二、留白 “留白”从字义上来简单理解就是“留出空白”，它与色彩中的白色不是同一概念，它更适合于从哲学上来理解1。它发源于中国传统的虚实相生、阴阳辩证的哲学思想，发展于传统的绘画行业，中国水墨画将“

28、留白”的禅意发挥得淋漓尽致，它表达出一种“以无生有，以简胜繁”的思想，这种设计理念与西方二十世纪兴起的一些现代设计理念如出一辙。在现代设计中，“留白”体现了极简主义的一种追求，体现了“形断而意不断”的禅意，符合人们对简单纯粹的生活的追求与向往。“留白”拓展了空间的联想力，设计师在有限的空间里为人们扩宽了思路，使得设计充满了魔力。 怎样才能理解中国传统水墨画中的“留白”概念，然后将它在如今的网页设计中得到发扬光大，是我们在现代商业网页设计中需要探讨的课题。 现在的网页设计和网络刚流行起来时已经产生了很大的变化，除了更具结构感的版式设计和充满科技感的新技术的应用外，如今的网页设计中增加了许多“留白

29、”，并从“留白”与画面的对立统一中追求现代网页设计的形式美。“留白”已经成为了现代网页设计的重要手段，优秀的网页设计作品中都能看到“留白”传达的积极意义。在网页设计中处理好“留白”与图形的关系更能提高和强化网页的视觉传达效果，加强网页的画面表现效果。 “留白”在实用性上，能够更佳地实现关键信息的聚焦效果，是网页布局的关键。“留白”是网页布局重要的组成部分，在文字、图片、视频等繁杂的信息交错中，它能平衡这种信息交错带来的复杂感，实现宁静的效果。在另一方面，“留白”还能方便地突出网页的主题，对于新闻类或电子商务类的网站，这个作用再重要不过。 另外，白色作为一种色彩，既可增强又可协调网页的色彩对比，

30、因此“留白”在网页设计中具有独特的审美意义。在网页中强调“留白”，不仅能够提高网页的观赏性，也满足了用户视觉的需要，“留白”能够使网页的整个内容排布得松紧有度。可以从三个方面来理解分析“留白”所传递的魅力：观者的视知觉、心理接受和时代、社会特征这三个方面。观者能够通过“留白”的引导，从繁复的信息中，快速地找到自己关注的信息，不会形成信息传递障碍。“留白”还能引导观者的视觉移动顺序，网页设计师通过设置适当的停顿，合理有效地引导观者浏览想让他们了解的网页信息。 真正的网页设计师的设计不是为了哗众取宠，而是在艺术和功能上做到协调统一。“留白”作为一种简约的力量创造了网页的艺术意境，也迎合了用户的使用心理。 参考文献1孙梦佳.文字在网页设计中的要素研究M.安阳工学院学报，2013. 2董海斌.平面视觉元素在网页设计中的应用研究M.西安理工大学，2008.3王绍强.版式设计风格化M.广西：广西美术出版社，2004. 4崔美善.网页视觉特效M.北京：电子工业出版社，2006.5周艺文.Photoshop网页设计艺术M.北京:清华大学出版社,2006.6黎芳.网页设计与配色实例分析M.北京:兵器工业出版社,2006. 7卫捷.“留白”理念在现代网页设计中的映射D.河南：河南大学，2011. 8曾汉霞，杨嘉伟.网页设计中的色彩运用艺术J.大家，2010，16：78.