单击此处编辑母版标题样式,第一级,第二级,第三级,第四级,第五级,*,第三章 网页的策划和设计,第一节 首页的设计,第二节 网页的色彩,第三节 网页的基本元素,第一节 首页的设计,一、首页设计的步骤,首页，从根本上说就是网站内容的目录，是一个索引。如何设计好一个首页呢？,一般步骤是：确定首页的功能模块，设计首页的版面，处理技术上的细节。,1.,确定首页的功能模块,首页的内容模块是需要在首页上实现的主要内容和功能,.,一般的站点都需要这样一些模块：,网络名称（,logo,）广告条（,banner,）,主菜单（,menu,）新闻（,news,）,搜索（,search,）链接（,links,）,邮件列表（,maillist,）计数器（,count,）,版权（,copyright,）,2.,设计首页的版面,版面是指浏览器看到的完整的一个页面（包括框架和层）。,设计版面的最好方法是：找一张白纸、一只笔，首先将你理想中的草图勾勒出来，然后再用网页制作软件实现。,注意：布局、色彩、主题,二、版面布局的原理,设计首页的第一布是设计版面布局。,布局就是以最合适的方式将图片和文字放在页面的不同位置。,（一）版面布局的步骤,1,草案,草案属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。,2,粗略布局,在草案的基础上，将你确定需要放置的功能模块安排到页面上。主要包含网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、计数器、版权信息等。我们必须遵循突出重点、平衡协调的原则，将网站标志，主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的存放。,3,定案,将粗略布局精细化，具体化。,（二）布局遵循的原则,1,正常平衡,:,多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。,2,异常平衡,:,非对照形式，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。,3,对比：不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。,4,凝视：所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到凝视页面的效果，一般多用明星凝视状。,5,空白：空白有两种作用，一方面对其它网站表示突出卓越，另一方面也表示网页品位的优越感，这种表示方法对体现网页的格调十分有效。,6,尽量用图片解说,此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传给浏览者更多的心理因素。,网页的白色背景太虚，则可以加些色块,;,版面零散，可以用线条和符号串联,;,左面文字过多，右面则可以插一张图片保持平衡,;,表格太规矩，可以改用倒角,;,（三）几种常见的版面布局样式,1,、“同,”,字型结构布局,2,、“国”字型结构布局,3,、自由式布局,页面布局就像海报。,4,、左右对称布局,（四）版面布局的技巧,1,、加强视觉效果,2,、加强文案的可视度和可读性,3,、统一感的视觉,4,、新鲜和个性是布局的最高境界,第二节 网页的色彩,一、色彩的基本知识,我们能看到的颜色是靠三个元素相互作用而成：光源、物体的反射特性，以及人体视网膜和脑部视觉皮质区对光波的处理方式。,不管是什么网站它都有色彩。颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。所有网页上的颜色，在,HTML,源代码下看到的是以颜色英文单词（如,red,）或者十六进制（如,#ff0000,）的表示方法。,四、色彩的搭配,颜色分为非彩色和彩色两类。非彩色是指黑、白、灰系统色。彩色是指除了非彩色以外的所有色彩。任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。,彩色的记忆效果约是黑白的,3.5,倍。,通常的做法是：主要内容用非彩色（黑色），边框、背景、图片用彩色。这样页面整体不单调，看主要内容也不会眼花。,（一）非彩色的搭配,黑白是最基本和最简单的搭配，非常清晰明了。,灰色是万能色，可以和任何彩色搭配。,二）彩色的搭配,1,、色环颜色基本知识色环,我们知道，人们视为“可见”的光可以分解为从蓝色到红色的一个渐进的彩虹光谱带。图,1.,可见光谱,1,色环。我们将色彩按“红黄绿蓝红”依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和冷色，当中是 中型色。,红、橙、橙黄、黄、黄绿、绿、青绿、蓝绿、蓝、蓝紫、紫、紫红、红,暖色系 中性系 寒色系 中性系,关于冷色和暖色,所谓色调就是色彩给人的感觉。,暖色 图,10.,暖色暖色由红色调构成，如红色、橙色和黄色。这种颜色选择给人以温暖、舒适、有活力的感觉。这些颜色产生的视觉效果使其更贴近观众，并在页面上更显突出。,冷色,图,11.,冷色冷色来自于蓝色调，如蓝色、青色和绿色。这些颜色使配色方案显得稳定和清爽。它们看起来还有远离观众的效果，所以适于做页面背景。,颜色的象征意义,每一种颜色又有其象征意义，不同的颜色有着不同的含义，给人各种丰富的感觉和联想，如：,红色：热情、奔放、喜悦,黄色：高贵、活泼,黑色：严肃、沉着,白色：纯洁、简单,蓝色：清爽、科技,绿色：植物、生命、体育,灰色：庄重、沉稳,紫色：浪漫、富贵,比如，可口可乐网站以深红色为主，以表达热情、奔放之意。,CCTV,网站的体育频道栏目以绿色为主以表达生命、体育之意。,总之，网页设计要达到赏心悦目的目的，需要注意色彩的运用和搭配。,(,三,),网页色彩搭配的原理,1.,色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。,2.,色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。,3.,色彩的合适性。就是说色彩和你表达的内容气氛相适合。,4.,色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，色彩要和你网页的内涵相关联。,三、色彩模式,（一）加色法,计算机屏幕是使用投射光波的方式，它让电子枪发光投射到含磷的屏幕来产生色光。,这些电子光枪可以发出三种颜色：红、绿、蓝。计算机屏幕可制作出完整的光谱。这就是,RGB,色系。,计算机显示器使用加 色法来产生颜色。,（二）减色法,平面印刷采用减色法来产生颜色，也就是使用减少光波的方式来产生颜色。,如,CYMK(,青、洋红、黄、黑,),色系。,五、网页色彩使用的技巧,1,、了解你的网站所要传达的讯息和品牌。,2,、了解你的读者群。,3,、不要使用过多的颜色。,4,、在阅读的部分使用对比色。,第三节 网页的基本元素,一、关于网页的字体,（一）字符集的设定,在查看,html,文件原代码时，我们经常可以在文件头,和,之间看到这么一句代码：,它的作用就是告诉浏览器：这个,HTML,文件是采用,GB2312,字符集制作的。当浏览器读到这一代码，便以,GB2312,字符集来解释和翻译网页原代码，然后我们就可以看到正确的网页。,（二）字体的使用（如宋体）,在网页里，字体的定义语句是：,显示文字,其中,Arial,就是一种字体的名称。,默认的浏览器定义的标准字体是中文宋体和英文,times new Roma,字体。,（三）字体的样式（如倾斜）,字体的样式有四种：正常体（,regular,），斜体（,Italic,），粗体（,Bold,），粗斜体（,Bold Italic,）。,（四）字体的效果（如下划线）,字体的效果这里指通过,html,语言设定可以直接显示的效果，在,html,里的语句设定为：,显示文字,其中，,overline,是指上划线效果。其它常用的效果还有：,underline,（下划线），,uppercase,（大写）等等。,（五）字体大小的控制,一般字体默认的大小是,12pt,（镑）。用,语句可以将文字增大,2pt,。现在网络上最流行的小中文字体大小为,9pt,。,有三种方法设定字体的大小：,1,用“,显示文字,”,语句来设定。,显然这种方法非常麻烦，你必须为每段文字都设定大小。,2,用,CSS,层叠样式表。,CSS,是,DHTML,的一个组成部分，它可以定义整个页面的字体显示风格和大小。是较为简便的方法。比如，这里需要设定整个页面文字大小为,9pt,，只要将下面这段代码加入,html,代码的,和,之间：,其中,FONT-SIZE:9pt,指字体的大小为,9,镑。,3,“外部模板调用”就是说你将,css,的设定作成一个单独的文件，在每个页面里都调用它。一旦你需要修改字体大小，只要修改一个,.css,文件，几百个页面就同时修改了。,调用的具体方法如下：,（,1,）将上面的,css,代码,copy,成一个,mycss.txt,文件，然后修改后缀名为,mycss.css,（,2,）在,html,文件的,之间插入,语句,调用,mycss.css,（六）字体超链接样式的设定,通常在网页的,中设置连接的颜色，如：,其中：,link Hyperlink,（连接）的颜色。,vlinkvisited Hyperlink,（已访问过的连接）颜色。,alink active Hyperlink,（当前活动的连接）颜色。,颜色用,rgb,的,16,进制码表示如红色是,#FF0000,。,同样用,CSS,可以更简便的设定网页超连接的样式：,A:link TEXT-DECORATION:none;COLOR:#0000FF,A:visited TEXT-DECORATION:none;COLOR:#000000,A:active TEXT-DECORATION:none;COLOR:#FF0000,A:hover COLOR:#FF0000,将它插入,html,文件的,head,区就可以了。,其中,:link,设定的是有超链接的颜色,;,visited,是访问过的超链接颜色；,active,是鼠标移上去的颜色；,hover,是鼠标点击时的颜色。,text-decoration:none,是指取消超链接的下划线显示。,（七）字体的使用原则,1,、不超过,3,种以上的字体。,2,、不要用太大的字,3,、不要使用不停闪烁的文字,4,、原则上标题的字体校正文大，颜色也应有所区别。,二、关于网页上图片的使用,（一）图片的格式,在,HTML,文件中，使用,jpg,、,gif,、,bmp,等文件格式均可以显示出来。,（二）虚实的变化,1,、实的图象有两种样式。一种是有规范的四边；一种是不规范轮廓，其图像背景色与网页背景色一致（将图像背景色处理成透明色），如卡通插画。,2,、虚的图象,是指图像的外轮廓线与网页的背景色自然衔接过渡。,还有一种虚的图象。整个色调被极大的淡化，作为背景色的图案出现，寸托前景的文字。,三、动画成分,网页上放置动画应该少而精，一帧网页上一般放一幅动画为宜，二幅、三幅则相互影响，较难处理搭配；如果再多的话，整个网页会令人眼花缭乱，反而干扰阅读。,（一）动画制作的工具,网页中采用动画软件的原理很像播放幻灯片，把画好的几幅图片按顺序和时间间隔循环往复，,就形成了简单的动画。另外,Adobe,公司的,Photoshop5,中带有一个叫做,Adobe Image Ready,的套装软件，也能很轻松、简便的制作,GIF,动画,.,Flash,可以说是一个小的,director,，它的优点在于：,1,用,Flash,作出来的动画是矢量的（无论你把它放大多少倍，它依然那么清晰）。,2,Flash,很容易学习掌握。,3,用,Flash,生成的互动式的动画体积很小。,（二）网页动画广告设计,网页动画大都制成横幅的条形。,1,）必须限制尺寸，以换取浏览速度。,2,）广告尺寸必须标准化、统一化，偏于广告费的计算。,网页动画广告设计,经常上网的浏览者都会发现这一现象，网页动画广告大家都做成横长的条形，它并非是动画广告的固有特点，而是不得已而为之。,其一，与静止的图形图像相比，动画的尺寸毕竟还是要大出许多，网上的传输速度依然有很大的制约，为了不使浏览者等候时间太长，必须限制广告的幅面尺寸，以换取浏览速度。,其二，计算机的屏幕的尺寸是有限的，真可谓“