网站建设与网页制作-电子教案-姚翠友03第三章节.pptVIP

* * 尚辅网 / 网站建设与网页设计 第三章 网页的艺术设计 第三章 网页的艺术设计 3.1网页设计注意的问题 3.3 网页的色彩 3.4 网页元素设计 3.3 网页的构图 3.1 网页设计注意的问题 3.1.1 浏览器 在设计网页时，面临最大的挑战就是因对不同的浏览器、操作系统和硬件平台，虽然大多数HTML元素都可以在浏览器中显示并稳定的运行，但是在执行某些脚本语言时，不同的浏览器会表现出不同的特点。 浏览器类型、版本与网站访问者之间的关系 不同浏览器对不同网页的显示效果是不同的。同一浏览器的不同版本对同一页面的显示效果也有差距。因此在设计网页时要充分考虑不同浏览器和浏览器不同版本之间的差距。 浏览器与网页制作技术之间的关系 网页设计时要选用正确的技术，避免不同浏览器对某些技术的不支持的情况出现。 3.1 网页设计注意的问题 3.1.1 浏览器 网页兼容性问题 在设计网页时需要考虑不同浏览器之间的区别，使用的功能也要考虑到浏览器之间的兼容性。 3.1.2 显示器 对于显示器而已，主要考虑分辨率问题和颜色问题。 3.2 网页的色彩 3.2.1 色彩基础 在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。只有掌握色彩构成原理，熟知各色彩的相互关系及各种色彩的生理或心理作用，结合自己所具备的平面构成知识，在网页设计中正确用色，才能实现传达特定信息和渲染页面的效果的目的。 色彩的三要素：色调（色相）、饱和度（纯度）和亮度（明度），人眼看到的任一彩色光都是这三个特性的综合效果。 （电脑屏幕）色彩的三原色：RGB（红、绿、蓝）。 色立体：指以三维空间表述色彩三要素的立体色彩，是依据色彩的色相、明度、纯度变化关系，借助三维空间，用旋围直角坐标的方法，组成一个类似球体的立体模型。 3.2 网页的色彩 3.2.1 色彩基础 色立体为设计者提供了直观的色彩资料，可以帮助设计者快速地查找到所需要的颜色标号，更清楚的理解色彩分类、对比与调和的规律，其模型如右图。 色立体有多种，主要有德国奥斯特瓦尔德色立体（奥式色立体）、美国蒙赛尔色立体（蒙氏色立体）、日本色研色立体等。 3.2 网页的色彩 3.2.2 色彩与心理 色彩与人类的色彩生理、心理体验相联系，从而使客观存在的色彩仿佛有了复杂的性格。色彩的直接心理效应来自于色彩的物理光刺激对人的生理发生的直接影响。 白色：白色给人印象中洁净、纯真、清白、卫生、恬静等。 灰色：灰色是中性色，其突出的性格为柔和、细致、平稳、朴素。 黑色：黑色往往给人感觉沉静、严肃、庄重、含蓄，另外，也易让人产生悲哀、恐怖、不祥、沉默、消亡、罪恶等消极印象。 红色：红色易使人联想起太阳、火焰、热血、花卉等，感觉温暖、兴奋、活泼、热情、积极、希望等向上的倾向。 蓝色：蓝色的色感朴实、内向，是一种有助于人头脑冷静的颜色。 绿色：绿色是具有黄色和蓝色两种成分的色，是一种柔顺、恬静、优美的颜色。 3.2 网页的色彩 各种色彩的网页 3.2 网页的色彩 3.2.3 色彩的搭配 网页色彩搭配原理 对于网站的色彩搭配应本着“总体协调、局部对比”的大原则进行，同时注意一下几点：鲜明性、独特性、合适性、联系性、对比性。同时，也要根据网站所在地区的文化对配色方案加以调整。 网页色彩搭配技巧 网页颜色的选择中要学会色彩的搭配，同时注意避免在网页中使用忌讳的色彩搭配。为了方便网页制作，还可以使用比较固定的一些色彩搭配方案。 随着网页制作经验的积累，对于网页用色会出现从单色-五彩缤纷-标准色-单色的一个制作趋势。 使用非色彩技术资源分配 这个主要是对颜色搭配有一定经验的设计者来说。 3.3 网页的构图 3.3.1 点、线、面 网页是一幅特殊的画面，需要通过一定的方式、方法，将不同的视觉元素安排好，才能形成一幅完整、协调的图像。 点、线、面是构成空间视觉的基本元素，是表现视觉形象的基本设计语言。任何视觉形象都是由这三者构成的。网页设计实际上就是如何合理的处理三者之间的关系。 3.3.1 点、线、面 一个好的网页布局应该给人一种安定、平稳的感觉，它不仅表现在色彩协调,还包括文字、图像等要素的空间占用上分布均匀，给人一种协调的感觉。在显示屏这样一个狭小的范围内进行网页设计需要对网页中的元素进行合理的布局，使各元素的重心、平衡点和视觉焦点得到统一。 3.3 网页的构图 3.3.3 网页布局 网页布局的概念 网页布局包含了表格、框架的应用、文字缩排、段落等等，而布局并不是整齐就好，还要有明确的分类，以及主题的适当规划。其内容主要有以下方面。 页面尺寸 整体造型 页眉与页脚 文本 图片 多媒体 3.3 网页的构图 3.3.3