第三章网页的策划和设计.ppt

第三章 网页的策划和设计 第一节 首页的设计 第二节 网页的色彩 第三节 网页的基本元素 第一节 首页的设计 一、首页设计的步骤 首页，从根本上说就是网站内容的目录，是一个索引。如何设计好一个首页呢？ 一般步骤是：确定首页的功能模块，设计首页的版面，处理技术上的细节。 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．色环。我们将色彩按“红→黄→绿→蓝→红”依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和冷色，当中是 中型色。 红、橙、橙黄、黄、黄绿、绿、青绿、蓝绿、蓝、蓝紫、紫、紫红、红 暖色系 中性系