《网页设计的准则》PPT课件.ppt

第 5节 网页设计 的准则 5.1 网页的基本元素 5.2 网页布局 5.3 配色原则 第 5节 网页设计 的准则 确定网站的题材，并且收集和组织了许多相关的资料内 容后，按照以下方面组织内容来吸引浏览者浏览网站。 1站点结构图 2导航栏 3精美的图片 4引人入胜的内容 5反馈表 6联系方式页面 7搜索工具 8常见问题解答 网页设计的准则 5.1.1 网页的基本元素 网页是网站提供信息服务的主要形式，一般包含文字、 图像和表格等内容，以及实现信息块之间跳转的超链接。网 页通常以网页文件及其附属文件形式存在。常见的网页元素 包括文本、图片、超链接、表格、导航栏、动画和交互表单。 1文本 2图片和动画 3声音和视频 4超链接 5导航栏 6表格 7表单 8其他常见元素 网页的设计 5. 2 网页布局 网页是网站构成的基本元素。当浏览者移动鼠标，在网 海中遨游，一个个精彩的网页会呈现在用户面前。网页是否 精彩，能否吸引浏览者，除了色彩的搭配、文字的变化、图 片的处理等因素外，还有一个非常重要的因素 网页的布局。 1网页布局的基本概念 对于初学者，最好应先了解网页布局的基本概念。 （ 1）页面尺寸 一般在分辨率为 1024*768像素的情况下，页面的显示尺寸 为 1007*600像素；在分辨率为 800*600像素的情况下，页面的 显示尺寸为 780*428像素；而在分辨率为 640*480像素的情况下， 页面的显示尺寸为 620*311像素。在网页设计过程中，向下拖动 页面是惟一给网页增加更多内容（尺寸）的方法。但应当注意的 是，除非设计者肯定站点的内容很有吸引力，否则不要让浏览者 拖动页面超过三个屏幕。 网页的设计 5.2 网页布局 （ 2）整体造型 造型就是创造出来的物体形象。这里是指页面的整体形 象，这种形象应该是一个整体，图形与文本的结合应该是层 叠有序的。虽然显示器和浏览器都是矩形的，但对于页面的 造型，设计者可以充分运用自然界中的各种形状及它们的组 合，如矩形、圆形、三角形、菱形等。 虽然不同形状代表不同意义，但目前的网页制作大多结 合多种图形加以设计，只是其中某一种图形的构图比例可能 占得多一些。 网页的设计 5.2 网页布局 2网页布局的一般步骤 （ 1）构思 根据网站内容的整体风格，设计版面布局。不要讲究细 节，只要有一个轮廓就行。当然也可能有多种想法，尽量都 把它们画出来，然后再比较，采用一种比较满意的方案。 （ 2）初步填充内容 这一步就要把一些主要的内容放到网页中，例如，网站 的标志、广告条、菜单、导航条、计数器等。要注意重点突 出，把网站的 标志、广告条、菜单 放在最突出、最醒目的位 置，然后再考虑其他元素的放置。 （ 3）细化 在这一步，设计者可以利用网页编辑工具把草案做成一 个简略的网页，当然，对每一种元素所占的比例也要有一个 详细的数字，以便以后修改。 网页的设计 5.2 网页布局 3网页排版布局的原则 上面简要介绍了设计网页布局的步骤，而事实上，在构 思和设计的过程中，设计者还必须要掌握以下 5项原则。 （ 1）平衡性 （ 2）对称性 （ 3）对比性 （ 4）疏密度 （ 5）比例 网页的设计 5.2 网页布局 4网页布局类型 网页布局大致可分为 “ 国 ” 字型、拐角型、标题正文型、 左右框架型、上下框架型、综合框架型、封面型、 Flash型、 变化型等。 （ 1） “ 国 ” 字型布局 “ 国 ” 字型也可以称为 “ 同 ” 字型，是一些大型网站经 常使用的类型。这种布局最上面是网站的标题及横幅广告条， 接下来就是网站的主要内容，左右分列一些小条内容，中间 是主要部分，与左右一起罗列到底，最下面是网站的一些基 本信息、联系方式、版权声明等。这种布局是网上最常见的 一种布局类型。 网页的设计 5.2 网页布局 （ 2）拐角型布局 拐角型布局与上一种布局只是形式上的区别，其实是很 相似的。该布局上面是标题及广告横幅，接下来的左侧是一 窄列链接等内容，右面是很宽的正文，最下面也有一些网站 的辅助信息。在这种布局中，左侧一般是导航链接 。 网页的设计 （ 3）标题正文型布局 标题正文型布局的最上面是标题或类似的一些东西， 下面一般是正文，例如，一些文章页面或注册页面等就 属于这种类型。 （ 4）左右框架型布局 采用左右框架型布局的网页分为左、右两 部分，一般左面是导航链接，有时最上面会有 一个小的标题或标志，右面是正文。大部分大 型论坛和网页教程都使用这种布局，有一些个 人网站和企业网站也喜欢采用这种布局。 （ 5）上下框架型布局 上下框架型布局与左右框架型布局类似，区别仅仅在于 这种布局分为上、下两部分。 网页的设计 5.2 网页布局 5网页布局的常用技术 （ 1） CSS（层叠样式表）布局 CSS对于初学者来说显得有点复杂，但它的确是一种好 的布局方法。目前， CSS运用的好坏是判断一个网站优秀与 否的关键。 （ 2）表格布局 表格布局的优势在于它能对不同对象加以处理，而又不 用担心不同对象之间的影响，而且表格在定位图片和文本上 比用 CSS更加方便。表格布局惟一的缺点是，当设计者使用 了过多的表格时，会影响页面的下载速度。 （ 3）框架布局 由于框架技术的兼容性问题，框架结构的页面不太受欢 迎。但从布局上考虑，框架结构不失为一个好的布局方法。 网页的设计 5.3 配色原则 网站给人的第一印象来自于视觉，因此，确定网站的色 彩相当重要。不同的色彩搭配产生不同的效果，从而使网站 给人以不同的视觉效果，吸引访问者的注意力。对于网站的 色彩处理原则应该是 “总体协调，局部对比 ”；也就是说，主 页的整体色彩效果应该是和谐的，而局部应该有一些强烈色 彩的对比。 1色彩的形成 简单地说，色彩是一种视觉，是光作用于眼睛的结果。 红、绿、蓝色的光被称为三原色光。 2色彩的特征 色彩的基本特征主要有色调、亮度和饱和度三个。色调 表现色彩的种类，亮度表现色彩的明亮程度，饱和度表现色 彩的鲜艳程度。 网页的设计 5.3 配色原则 3色彩的心理感觉 在长期的生活实践中，自然界的各种色彩会在人的心中 留下不同的印象，产生不同的心理感觉，例如： 红色是一种激奋的色彩，具有刺激效果，能使人产生冲动、愤怒、 热情、活力的感觉； 绿色介于冷暖两类色彩的中间，给人以和睦、宁静、健康、安全的 感觉，它和金黄、淡白色搭配，可以产生优雅、舒适的气氛； 橙色也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的 效果； 黄色表现快乐、希望、智慧和轻快的个性，它的透明度最高； 蓝色是最具凉爽、清新、专业感的色彩，它和白色混合，能体现柔 顺、淡雅、浪漫的气氛； 白色具有洁白、明快、纯真、清洁的感觉； 黑色具有深沉、神秘、寂静、悲哀、压抑的感觉； 灰色具有中庸、平凡、温和、谦让、中立和高雅的感觉。 网页的设计 5.3 配色原则 4色彩的分类 按照色彩对人们心理的影响可以进行以下分类。 暖色系：红、橙、橙黄、黄等色彩让人觉得温馨、和煦、 热情。 中性系：黄绿、绿等色彩让人觉得舒适、和谐。 冷色系：青绿、蓝绿、蓝等色彩让人觉得宁静、清凉、高 雅。 色彩具有联想与象征的特质，例如，红色象征火、血、 太阳，蓝色象征大海、天空和水面等。因此设计出售冷食的 虚拟店面，应使用消极而沉静的颜色，使人从心理上感觉凉 爽一些。如果要制作一个休闲主题的个人站点，不妨将网站 色彩设计为天蓝色，如以海水为背景，再搭配一些鱼儿的效 果会更好 。 网页的设计 5.3 配色原则 5色彩的选择和搭配 在制作网站的时候，色彩的选择和搭配非常重要。一个 网站格调的确定，往往取决于色彩的选择与搭配是否适当。 在一般情况下，可以从以下 4个方面考虑色彩的选择与搭配。 （ 1）色彩的鲜明性 （ 2）色彩的独特性 （ 3）色彩的适合性 （ 4）色彩的联想性 网页的设计