第三章 网页的策划和设计

第三章网页的策划和设计第一节首页的设计第二节网页的色彩第三节网页的基本元素第一节首页的设计一、首页设计的步骤首页，从根本上说就是网站内容的目录，是一个索引。如何设计好一个首页呢？一般步骤是：确定首页的功能模块，设计首页的版面，处理技术上的细节。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文件原代码时，我们经常可以在文件头head和/head之间看到这么一句代码：•metahttp-equiv=Content-Typecontent=text/html;charset=gb2312•它的作用就是告诉浏览器：这个HTML文件是采用GB2312字符集制作的。当浏览器读到这一代码，便以GB2312字符集来解释和翻译网页原代码，然后我们就可以看到正确的网页。•（二）字体的使用（如宋体）在网页里，字体的定义语句是：fontface=Arial显示文字/font其中Arial就是一种字体的名称。默认的浏览器定义的标准字体是中文宋体和英文timesnewRoma字体。（三）字体的样式（如倾斜）字体的样式有四种：正常体（regular），斜体（Italic），粗体（Bold），粗斜体（BoldItalic）。（四）字体的效果（如下划线）字体的效果这里指通过html语言设定可以直接显示的效果，在html里的语句设定为：spanstyle=text-decoration:overline显示文字/span其中，overline是指上划线效果。其它常用的效果还有：underline（下划线），uppercase（大写）等等。（五）字体大小的控制一般字体默认的大小是12pt（镑）。用fontsize=+1语句可以将文字增大2pt。现在网络上最流行的小中文字体大小为9pt。有三种方法设定字体的大小：1．用“spanstyle=”font-size:9pt“显示文字/span”语句来设定。显然这种方法非常麻烦，你必须为每段文字都设定大小。2．用CSS层叠样式表。CSS是DHTML的一个组成部分，它可以定义整个页面的字体显示风格和大小。是较为简便的方法。比如，这里需要设定整个页面文字大小为9pt，只要将下面这段代码加入html代码的head和/head之间：styletype=text/css--body{FONT-SIZE:9pt}th{FONT-SIZE:9pt}td{FONT-SIZE:9pt}--/style其中FONT-SIZE:9pt指字体的大小为9镑。3．“外部模板调用”就是说你将css的设定作成一个单独的文件，在每个页面里都调用它。一旦你需要修改字体大小，只要修改一个.css文件，几百个页面就同时修改了。调用的具体方法如下：（1）将上面的css代码copy成一个mycss.txt文件，然后修改后缀名为mycss.css（2）在html文件的head/head之间插入LINKhref=“mycss.css”rel=stylesheettype=text/css语句调用mycss.css（六）字体超链接样式的设定通常在网页的body中设置连接的颜色，如：bodylink=#FF00FFvlink=#FF0000alink=#008080其中：link–Hyperlink（连接）的颜色。vlink–visitedHyperlink（已访问过的连接）颜色。alink–activeHyperlink（当前活动的连接）颜色。颜色用rgb的16进制码表示如红色是#FF0000。同样用CSS可以更简便的设定网页超连接的样式：styletype=text/cssA:link{TEXT-DECORATION:none;COLOR:#0000FF}A:visited{TEXT-DECORATION:none;COLOR:#000000}A:active{TEXT-DECORATION:none;COLOR:#FF0000}A:hover{COLOR:#FF0000}/style将它插入html文件的head区就可以了。其中:link设定的是有超链接的颜色;visited是访问过的超链接颜色；active是鼠标移上去的颜色；hover是鼠标点击时的颜色。text-decoration:none是指取消超链接的下划线显示。（七）字体的使用原则1、不超过3种以上的字体。2、不要用太大的字3、不要使用不停闪烁的文字4、原则上标题的字体校正文大，颜色也应有所区别。二、关于网页上图片的使用（一）图片的格式在HTML文件中，使用﹡．jpg、﹡．gif、﹡．bmp等文件格式均可以显示出来。（二）虚实的变化1、实的图象有两种样式。一种是有规范的四边；一种是不规范轮廓，其图像背景色与网页背景色一致（将图像背景色处理成透明色），如卡通插画。2、虚的图象是指图像的外轮廓线与网页的背景色自然衔接过渡。还有一种虚的图象。整个色调被极大的淡化，作为背景色的图案出现，寸托前景的文字。三、动画成分网页上放置动画应该少而精，一帧网页上一般放一幅动画为宜，二幅、三幅则相互影响，较难处理搭配；如果再多的话，整个网页会令人眼花缭乱，反而干扰阅读。（一）动画制作的工具网页中采用动画软件的原理很像播放幻灯片，把画好的几幅图片按顺序和时间间隔循环往复，就形成了简单的动画。另外Adobe公司的Photoshop5中带有一个叫做AdobeImageReady的套装软件，也能很轻松、简便的制作GIF动画.Flash可以说是一个小的director，它的优点在于：1．用Flash作出来的动画是矢量的（无论你把它放大多少倍，它依然那么清晰）。2．Flash很容易学习掌握。3．用Flash生成的互动式的动画体积很小。（二）网页动画广告设计网页动画大都制成横幅的条形。1）必须限制尺寸，以换取浏览速度。2）广告尺寸必须标准化、统一化，偏于广告费的计算。网页动画广告设计经常上网的浏览者都会发现这一现象，网页动画广告大家都做成横长的条形，它并非是动画广告的固有特点，而是不得已而为之。其一，与静止的图形图像相比，动画的尺寸毕竟还是要大出许多，网上的传输速度依然有很大的制约，为了不使浏览者等候时间太长，必须限制广