关于HTML5的网页设计与实现学年论文(2)

的网站。Flash型主要采用现在流行的Flash技术，页面表达的内容较为丰富，给人视觉和听觉上很大的冲击，处理得当会达到Web页面难以达到的效果。

（四）网页色彩

1. 色彩模式。

在自然界看到的各种色彩都是由三种色光或三种颜色组成的，而他们本身不能再分拆出其他的颜色成分，所以称为三原色。三原色分为光学三原色和物理三原色。这两种三原色各自混合后，分别形成了不同的色彩体系。 RGB模式：

R代表红色，G代表绿色，B代表蓝色，三种色彩叠加形成了其它的色彩。因为三种颜色都有256个亮度水平级，所以三种色彩叠加就形成1670万种颜色了，通过它们足以再现绚丽的世界。就编辑图象而言，RGB色彩模式也是最佳的色彩模式，因为它可以提供全屏幕的24bit的色彩范围，即真彩色显示。 CMYK模式：

CMYK代表印刷上用的四种颜色，C代表青色，M代表洋红色，Y代表黄色，K代表黑色。因为在实际引用中，青色、洋红色和黄色很难叠加形成真正的黑色，最多不过是褐色而已。因此才引入了K——黑色。黑色的作用是强化暗调，加深暗部色彩。CMYK模式是最佳的打印模式，RGB模式尽管色彩多，但不能完全打印出来。

可以先用RGB模式进行编辑工作，再用CMYK模式进行打印工作，在打印前才进行转换，然后加入必要的色彩校正，锐化和休整。

2. 色彩的心理表现。

色彩具有精神的价值，人们常常能感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，影响我们的情绪。色彩的心理效应法是在不同层次中，有些色彩对人有直接的刺激，有些则需要通过间接的联想，更高层次的则涉及人的观念与信仰。

3. 色彩的表达感觉。

不同的色彩给人不同的心理暗示。对色彩的不同感觉和认知，对色彩搭配所产生的心理联想，会导致不同的心理反应。

空间感——色彩的空间感与色彩对比的知觉度有关，对比度强和高纯度的色彩具有前进感，对比度弱和低纯度色的色彩具有后退感。

色彩的空间感，具体表现在利用色彩的明度对比层次、形与色的排列转折、大小弯曲等秩序节奏，从而有意识地形成凹凸深远的空间感，甚至利用人的错觉形成假象空间色彩的前进、后退感形成的距离措视原理、在网页中常被用来加强画面的空间层次。

亲切感——色彩的亲切感是指人对色彩的对比变化所产生的亲近的心理感觉。通常较为明快柔和的色彩都能使人产生亲切感，色彩的纯度对比和明度对比较弱时，也会使整体色调变得柔和、轻快。产生亲切感的网页一般采用同类色、类似色和邻近色。

5

使用具有亲切感的色彩，可以用来表现家具网站、儿童网站和女性网站、服装网站及日用消费品网站等。

庄重感——通常，明度较低、纯度不高的色彩能给人以庄重感、常用的有黑、棕色、深蓝和褐色等。在使用时要注意搭配，搭配不当则会产生沉闷、呆板的感觉。

神秘感——色彩的神秘感，并不是色彩本身具有的，而是人的联想所产生的心理感觉。一般能使人感到神秘的色彩，多为明度较低、色相不明确、纯度也不高的色彩，如昏黄的氛围、幽暗的巷子、夜晚的角落，都可以用来营造色彩的神秘感。

兴奋和忧郁感——色彩和人的个性一样，具有明朗与忧郁的区分。明朗的色彩必然是明度高、对比较强的色彩，以及纯度偏纯的色彩，忧郁的色彩则是明度低、对比较弱的色彩，以及纯度偏低且色性偏冷的色彩。

一般来说，暖色较易引起心理的亢奋和积极性，属于兴奋色，其中朱红色最具兴奋作用，其他明度较高、纯度较高的颜色（如黄色、橘黄色等）也具有煽动性、倾向于兴奋色。

4. 网页色彩的搭配。

将色彩具体到网页搭配中，应遵循一定的方法。

同色搭配，该方法采用一种颜色的深浅搭配，尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。邻近色搭配，使用在色带上相邻近的颜色，如绿色和蓝色、红色和黄色。采用邻近色彩设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。对比色搭配，该方法使用两种完全不同的颜色搭配。对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色，能够使网站特色鲜明，重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，起到画龙点睛的作用。明度推移色彩搭配，有两种方法操作：通过加入等量的白色，使一种颜色渐亮；或者通过加入等量的黑色，使颜色变暗。这两种方法都可以产生色彩明度渐变的效果。 （五）细节的把握

网站的品位，除了页面本身整体的视觉效果外，往往更突出在一些细节上，只有把握住细节，才能更好地提高浏览者的使用友好度，给浏览者留下深刻的印象。 1． 颜色。

在初学网页设计的时候，在用色方面要非常注意，如果对网页用色没有太大的把握，那么就先选择好网页的基本色调，然后针对这一种颜色去进行变化，如需加其他颜色，可以试着加些灰色，因为灰色是中色调，不会对页面颜色造成太大的冲突。这样做出的网页整体颜色会非常协调统一。 2．线条的运用。

很多朋友在制作网页的时候，在两块过渡的地方，如banner和导航条之间会用一条细线区分开，此时往往会画上一条直直的线，这样给人感觉会很突兀。 3．图标。

6

网站中在各个标题的前面适当的加些图标点缀网页，可以使网页效果更加出彩，但是切忌网页图标使用过多，图标的色调也要一致，避免杂乱。 4．文字。

网站中文字的运用，用户在浏览网页时，主要是要看网页当中的文字内容，所以要特别注意文字的处理。一是文字的颜色不要和背景颜色相近，这样用户在浏览文字信息时会非常的吃力；二是不要乱用字体，你使用的字体在本机上可以显示，但是到了别人的电脑上就不一定能显示出来了；三是注意文字之间的行距，通常我们不对文字进行行距的设置时，文字间的行距会非常小；影响页面的美观度，注意文字间的行距，使其不会显得特别挤，做到宽松有序。

（六）常用工具介绍

用来制作效果图的软件并没有明确的规定。可以使用各种图形制作软件和处理软件，现在通常使用的软件是PHOTOSHOOP和FIREWORKS。在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。

Photoshop是一款非常好用的平面设计软件。由Adobe公司开发设计，其用户界面易懂、功能完善、性能稳定，是比较专业的图像处理软件，它具有强大的滤镜功能。所以，在很多的的广告、出版、软件公司，Photoshop都是首选的平面工具，它有很多的快捷方式，如抓手工具H键，TABLE键切换显示或隐藏所有的控制板，D键、X键迅速切换前景色和背景色等，灵活的运用快捷键，可以使设计的速度大大提高。

Fireworks是网页开发图形处理工具，可以做出矢量的图形，主要是和Dreamweaver配合做网页。对处理一般的网页图片比较实用，而且学起来也比Photoshop易上手，是一个入门级的网页设计软件。

四 HTML5的改进特性

（一）HTML5新元素

HTML5提供了一些新的元素和属性，例如