网页设计--页面元素
网页的基本构成-网页设计组成元素-基本结构介绍
网页的基本构成-网页设计组成元素-基本结构介绍不同性质、不同类别的网站，其页面内容的安排是不同的。
一般网页的基本内容包括标题、网站LOGO、页眉、页脚、导航、主要内容等。
如果想具体了解网页的基本构成，那无妨接着往下看吧!1、网页标题网页标题是对一个网页的高度概括。
网站中的每一个页面都有一个标题，用来表示该页面的主要内容。
它的主要作用是引导访问者清楚地浏览网站的内容。
2、网站的LOGO在IT领域，LOGO意味着标志、标识。
它的主要用途是与其他网站链接，让其他网站链接到该标志和门户，代表一个网站或网站的某个部分。
LOGO的图形形式，特别是动态的LOGO，比文字形式的链接更引人注意。
为了促进互联网上的信息传播，一个统一的国际标准是必要的。
目前，关于网站的LOGO有三种规格：(1) 88×31像素，这是互联网上最常见的LOGO规格。
(2) 120×60像素，这种规格用于一般大小的LOGO。
(3) 120×90像素，这种规格用于大型LOGO。
3、网页页眉网页页眉是指页面顶部的部分，有些页面划分得比较显然，有些页面则没有明确的区分。
通常状况下，页头的〔制定〕风格与页面整体风格一致，富有变化的页眉与网站的标志LOGO具有相同的作用。
页眉的位置比较吸引人，大多数网站制在这里设置网站的目的、口号、广告语等。
4、网页页脚网页页脚位于页面底部，通常用来标注站点所属公司的名称、地址、网站版权、电子邮件地址等信息，使用户能够了解网站所有者的基本状况。
5、网页导航网页导航是指通过一定的技术手段，为访问者提供一定的网页浏览方式，使他们能够方便地获取所必须内容。
网页导航在每个网页中的位置是不同的。
网页导航的表现形式是网页上的栏目菜单设置、辅助菜单和其他在线帮助。
6、网页的主体内容主体内容是〔网页制定〕的元素。
它一般是二级链接内容的标题，或是内容。
网页设计规范标准
网页设计规范标准1. 页面布局- 使用响应式设计，确保网站在不同设备上的适配。
- 采用网格布局，并保持一致的栅格系统。
- 合理利用空白区域，使页面整洁有序。
- 页面元素排列有序，遵循阅读顺序和重要性原则。
2. 色彩搭配- 选择合适的配色方案，使页面达到良好的视觉效果。
- 在不同的页面部分使用一致的色彩搭配，保持整体风格的统一。
- 注意色彩的对比度，以确保文字和其他元素易于阅读和辨识。
3. 字体选择- 使用合适的字体组合，使页面文本易于阅读且与整体风格相匹配。
- 字号的大小要适合不同设备上的阅读体验。
- 控制使用的字体种类数量，避免出现混乱和不协调的情况。
4. 图片与图标- 使用高质量的图片和图标，以提升用户体验。
- 优化图片大小和格式，以减小页面加载时间。
- 图片和图标要与页面主题相关，并具有清晰的表达意义。
- 设计简单明了的导航菜单，使用户能够轻松找到所需的信息。
6. 响应交互- 界面元素的交互要及时响应，并反馈给用户。
- 保持一致的界面反馈和动画效果，提升用户体验。
- 控制页面加载时间，提高网站的整体性能。
7. 页面内容- 内容排版清晰明了，段落分明，信息分类清晰。
- 使用简明扼要的语言表达，避免冗长和复杂的句子。
- 注意语法和拼写错误，确保内容的准确性和可读性。
8. 辅助工具- 为用户提供可访问的页面，考虑视觉障碍和其他辅助工具的使用。
- 提供搜索功能，方便用户快速检索信息。
- 确保页面文字和背景的对比度适宜，以满足辅助工具的要求。
以上为网页设计规范标准的一些基本要求。
在设计网页时，应综合考虑用户体验、视觉效果、页面可访问性等方面的因素，以提供优秀的网页设计作品。
网页设计的关键要素
网页设计的关键要素网页设计是现代社会中重要的技能之一。
随着互联网的普及，越来越多的人开始关注并参与到网页设计的工作中。
一个好的网页设计不仅可以吸引用户的注意，还能提升用户的体验，并将其转化为潜在客户。
在进行网页设计时，我们需要考虑以下几个关键要素。
一、色彩搭配色彩是网页设计中最直观的元素之一，它可以直接影响用户对网站的感觉和印象。
在选择色彩时，我们应该考虑到网站的主题和目标受众。
比如，如果网站的主题是儿童教育，我们可以选择明亮、多彩的颜色来吸引孩子的注意力；如果网站的主题是财经类信息，则可以选择稳重、正式的颜色来传达专业性和可靠性。
二、页面布局页面布局是网页设计中的重要组成部分，好的页面布局可以使用户更容易找到所需信息并提高浏览体验。
在进行页面布局时，我们应该注重页面的整体平衡和信息的合理组织。
通常，一个好的布局应该包括清晰的导航栏、主要内容区域和底部信息栏。
此外，我们还可以采用单栏、双栏或多栏布局，根据不同的需求和设计风格来选择合适的布局。
三、字体选择字体在网页设计中起着至关重要的作用，它不仅仅是文字的表达工具，还可以反映网站的风格和特点。
在选择字体时，首先要确保字体的可读性和兼容性，避免使用过于花哨的字体；其次要考虑字体与网站主题的契合度，选择适合的字体来传达网站的氛围和信息。
通常来说，标题可以选择粗体大号字体以突出重点，正文则可以选择通用的等线、雅黑等字体来保证可读性。
四、图片和图标运用图片和图标是网页设计中重要的视觉元素，它们可以直接吸引用户的目光并传达信息。
在使用图片和图标时，我们需要确保它们的清晰度和质量，并与网页的整体风格相一致。
此外，要注意控制图片和图标的大小和位置，避免过多的使用导致页面混乱。
同时还可以利用图片和图标来提升用户的交互体验，比如添加按钮、滑块等元素，增加网页的可操作性。
五、响应式设计随着移动互联网的发展，越来越多的用户通过手机和平板电脑访问网页。
因此，响应式设计成为网页设计中不可忽视的要素之一。
HTML5+CSS3网页设计基础 第二章 网页基本元素
第2章 网页基本元素
第27页
2.3.1 案例分析
【案例展示】链接案例—网站信息页面。使用页面间链接 、网站间链接、可下载文件链接等知识，制作网站信息页 面。 【知识要点】超链接的定义、页面间链接、网站间链接、 下载文件链接等。 【学习目标】掌握各种超链接 的应用场合和实现技术。 参考代码：2-3.html
参考示例：2-2-4.html
HTML5+CSS3网页设计基础
第2章 网页基本元素
第24页
2.2.4 绝对路径与相对路径
网页中路径分两种：绝对路径和相对路径。 1. 绝对路径 绝对路径是包括通信协议名、服务器名、路径及 文件名的完整路径，是网页上的文件或目录在硬盘 上的真正路径。 2. 相对路径 相对路径就是相对于当前文件的路径，相对路径 不带有盘符，通常是以HTML网页文件为起点，通 过层级关系描述目标文件的位置。
第8页
2.1.4 换行标签
语法格式：文字 <br /> 或 <br />文字 使用换行标签，可以使页面内容整齐、美观。
HTML5+CSS3网页设计基础
第2章 网页基本元素
第9页
2.1.5 水平线标签
语法格式：<hr align="left|center|right" size="n" width="n|%" color="color" noshade="noshade"/> 属性介绍： align：参考标题标签中align说明。 size：设置水平线的粗细，n取正整数，默认为2像素。 width：设置水平线的长度，n取正整数表示确定的像素值，也可以是浏览器窗 口的百分比，默认为100%。 color：设置水平线的颜色，默认黑色。可以用颜色名称、十六进制#RGB或 rgb(r,g,b)来表示。 noshade：设置水平线是否要阴影，默认有阴影。 例：定义一条水平线，居中显示、粗5px、宽400px、红色、无阴影。代码如 下。 <hr align="center" size="5" width="400" color="red" noshade="noshade"/>
HTML5+CSS3网站设计HTML5页面元素及属性
第2章HTML5页面元素及属性《HTML5+CSS3网站设计基础教程》（第2版）学习目地/Target掌握结构元素地使用,可以使页面分区更明确理解分组元素地使用,能够建立简单地标题组。
掌握页面交互元素地使用,能够实现简单地交互效果。
理解文本层次语义元素,能够在页面突出所标记地文本内容。
掌握全局属性地应用,能够使页面元素实现相应地操作。
章节概述/SummaryHTML5引入了很多新地标记元素与属性,这是HTML5地一大亮点,这些新增元素使文档结构更加清晰明确,属性则使标记地功能更加强大,掌握这些元素与属性是正确使用HTML5构建网页地基础。
本章将HTML5地新增元素分为结构元素,分组元素,页面交互元素与文本层次语义元素,除了介绍这些元素外,还会介绍HTML5常用地几种标准属性。
/Contents01 02 03列表元素结构元素分组元素04页面交互元素/Contents05 06文本层次语义元素全局属性07阶段案例—制作电影影评网01列表元素章节概述HTML5引入了很多新地标记元素与属性,这是HTML5地一大亮点,这些新增元素使文档结构更加清晰明确,属性则使标记地功能更加强大,掌握这些元素与属性是正确使用HTML5构建网页地基础。
本章将HTML5地新增元素分为结构元素,分组元素,页面交互元素与文本层次语义元素,除了介绍这些元素外,还会介绍HTML5常用地几种标准属性。
为了使网页更易读,经常将网页信息以列表地形式呈现,例如,淘宝商城首页地商品服务分类,排列有序,条理清晰,呈现为列表地形式。
为了满足网页排版地需求,HTML语言提供了3种常用地列表元素,分别为ul元素（无序列表）,ol元素（有序列表）与dl元素（定义列表）,本节将对这3种元素进行详细讲解。
1.ul元素l 了解无序列表地概念,能够说出无序列表地特点。
l 掌握无序列表地基本语法格式,能够在网页定义无序列表。
学习目地1.ul元素无序列表是网页最常用地列表,之所以称为"无序列表",是因为其各个列表项之间没有顺序级别之分,通常是并列地。
网页设计网站布局分析
网页设计网站布局分析网页设计是一个复杂的过程，需要许多因素的协调和组合才能实现一个完美的设计。
其中之一就是网站布局。
好的网站布局是吸引用户浏览的关键因素之一。
以下是一些关于网站布局的分析。
一、网站布局的重要性网站布局是网站设计的第一步。
它包括页面元素的安排和位置。
正确的布局可以帮助客户更好地理解你的产品和服务，提高他们对你网站的信任，从而促进更高的转化率和更好的用户体验。
二、网站布局概述网站布局分为三个部分：页眉、主内容、页脚。
1、页眉页眉通常位于页面最顶端，是网站设计的最重要的一部分。
它通常包括一个Logo、导航栏、搜索框等页面元素。
一个清晰的页眉可以帮助用户快速找到他们想要的内容，从而增加用户体验。
2、主内容主内容通常位于页眉之下，它占据网页大部分面积。
主内容包括产品介绍，服务说明等内容。
在设计主内容时，应该遵循简洁、直观和易于理解的原则。
3、页脚页脚通常位于页面底部。
它包括反馈表单、社交媒体链接、版权声明等元素。
这些元素通常是对主内容的补充和扩展。
页面底部的简洁、易于阅读的元素可以帮助提供额外的信息，并帮助用户更好地了解你的品牌。
三、网站布局的设计原则1、与目标用户的需求相符网站设计应该适合目标用户，更容易让他们理解和使用网站。
根据不同目标用户的兴趣和需求，设计者应选择合适的页面元素，提供恰当的内容。
2、色彩搭配与字体大小设计者应该选择有吸引力和易于辨别的颜色组合。
所有页面元素的字体风格和大小应该一致，这样可以避免页面显示混乱或内容不清晰的问题。
3、简单直观设计者应该遵循简单直观和易于理解的原则，确保网站布局清晰明了，易于找到信息和完整操作。
4、考虑交互性网站布局包括页面元素及其交互性。
在设计这些页面元素的时候，应该考虑用户体验并提供必要的交互性，以帮助用户更好地浏览你的网站。
5、内容重心重点内容应该更突出。
这样可以让用户更容易识别和理解网站的目的和关键信息。
总之，网站布局是网站设计的关键因素之一。
网页元素的名词解释
网页元素的名词解释在当今数字化时代，网页已成为人们获取信息和进行交流的主要途径之一。
然而，对于许多非专业人士来说，网页设计中的一些专业术语可能难以理解。
本文将重点解释一些常见的网页元素的名词和概念，帮助读者更好地理解和运用。
1. 导航栏（Navigation Bar）导航栏是位于网页顶部或侧边的一个水平或垂直的栏状区域，用于帮助用户浏览网页内容。
导航栏通常包含网站的主菜单和其他重要的页面链接，使用户能够快速访问所需信息。
2. 标题（Heading）标题是位于网页的页面内各个部分或内容的标题或名称。
它们通常用于分隔不同的内容，并帮助用户更快地找到感兴趣的信息。
网页标题也是搜索引擎优化中的重要组成部分，可以提高网页的可查性。
3. 段落（Paragraph）段落是网页中的一个独立文本单元，通常由一系列句子组成。
段落的目的是在合理的逻辑顺序下传达特定信息或思想。
段落常用于解释、描述或阐述内容，并使网页更易读和清晰。
4. 图像（Image）图像在网页设计中起着重要作用，可以吸引用户的注意力、传递信息和增强视觉效果。
图像可以是照片、插图、图表等，它们必须具有适当的尺寸、分辨率和格式，以确保在各种浏览器和设备上显示良好。
5. 超链接（Hyperlink）超链接是网页上的文本或图像元素，可单击以跳转到其他网页、文件或位置。
超链接通常以不同的颜色和下划线形式显示，并具有可辨别的鼠标指针样式。
它们是构建网页之间互连性的重要手段。
6. 表格（Table）表格是在网页上以行和列的形式排列数据的一种方式。
表格通常用于呈现和组织具有结构化关系的数据，如价格比较、调查结果等。
通过单元格的格式化和样式，表格能够更好地传达信息和提高可读性。
7. 表单（Form）表单是网页上一种用于收集用户输入、提交数据和与用户互动的交互元素。
它由文本输入框、选择框、单选框、复选框等组成，用于用户提供姓名、电子邮件地址、反馈意见等信息。
表单有助于建立与用户的联系和数据交换。
网站赏析第二讲-网页元素
VS
详细描述
在保证图片质量的同时，应尽量减小图片 的体积，以加快网页的加载速度。可以通 过压缩图片、优化格式等方式来提高网页 的性能和用户体验。
03 色彩元素
主色调选择
01
主色调应与网站主题和品牌形象相符合，能够传达出网站的核 心价值和品牌特色。
02
选择主色调时，应考虑色彩的饱和度和明度，确保在各种设备
文字间距
文字间距应适中，不宜过紧或过松，以保持文字的连贯性和可读性。
行距
行距是上下相邻行之间的距离，适当的行距可以提高文本的可读性，减轻用户的阅读疲劳。
02 图片元素
图片选择与设计
总结词
图片选择与设计是网页中重要的视觉元素，能够吸引用户注意力并传达信息。
详细描述
在选择图片时，应考虑其与网页主题的相关性，以及是否能够引起用户的兴趣。 同时，图片的设计也很重要，包括颜色搭配、排版布局和视觉效果等，以创造 良好的视觉体验。
固定布局
网页的宽度固定，浏览器窗口 变化时，网页的高度会随之变
化。
流式布局
网页的宽度按照浏览器窗口的 宽度自适应，而高度则根据内 容多少自动调整。
响应式布局
根据不同设备和视窗大小自适 应布局，提供最佳的浏览体验 。
弹性布局
使用相对单位（如百分比、em） 定义元素尺寸，使页面布局更具
弹性。
页面元素的对齐方式
网站赏析第二讲-网页元素
contents
目录
• 文字元素 • 图片元素 • 色彩元素 • 布局元素 • 交互元素
01 文字元素
字体与排版
字体选择
选择合适的字体可以提升网页的 整体视觉效果，常用的字体有宋 体、微软雅黑、黑体等，这些字 体易读且具有较好的可辨识度。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
页面元素
● 下拉菜单式的导航设计(见图9)是时下最流行的 导航设计之一。如果把它作为整个站点的导航，会让 人有不开放感。导航也有属于它的表情，把导航的位 置摆正确，让导航的风格明了化，是非常重要的。
页面元素
图9 下拉菜单式
页面元素
● 另外，不是所有的网站都需要导航。一些区域 排版的网站把内容放置在小的区域内，点击该区域即
页面元素
页面元素
1 页面元素 2 网络广告(Banner) 3 整体规划 4 功能易用性
页面元素
1 页面元素
根据不同网站的信息存储和不同页面的信息内容， 每个页面不可能放置相同固定的元素，这是很容易理 解的。但是大多数网页，都包含下列页面元素中的一 项或几项，它们对页面设计都有着举足轻重的意义。 这些页面元素则是我们本章的要点。
胆尝试。也许现在很多商业站点无法使用太前卫的形
式，但人们接受事物总是要有一定的过程，没有尝试 和演示，人们是永远都不可能接受的。
如图12所示，笔者粗略绘制了一张Logo位置图，
表示出几种较为常见的情况。
页面元素
图12 Logo位置图
页面元素
图13 idn2002年会议
页面元素
图14 菲律宾网站
导航围绕网站标志，有利于树立学校的形象。
页面元素
图6 图片式导航
页面元素
图7 经济或者利用动态网页
编程来实现，也可以用Flash动画导航条。Flash导航非 常漂亮、体积小、变化多，引人入胜，还可以加深理解。 ● 内容丰富的站点可以考虑使用快捷导航条(见图 8)，也就是将页面分Frame制作，即导航居一边，内容 居另一边。浏览时，内容页面不断翻动，导航却一直存 在。
时候，就能选择.jpg格式，不用担心文字压缩时会模糊，
图片的字节数应该会小一些。
页面元素
图19 srf.stn…2002版
页面元素
● 使用CSS来控制背景图，在制作上会比较规范。
把整张背景图处理得比较好的网站是： HALFPROJECT (/ )，在优化 大张背景图的制作上，我们可以借鉴它(见图20)。
计会在第6章提及，本章着重讨论标志设计在网页设计
中的应用。 网络发展至今，标志应用还有很多误区。
页面元素
图11 百事可乐标志变迁
页面元素
Logo的形状设计上也有一些误区。中国大部分网 站Logo根据习惯都设计成横长方形的，担心竖长的标 志难以在网页设计中进行排版。 Logo的位置通常在页面的左上角。但它不是一成 不变的。页面设计的个性化发展，需要设计师们的大
弹出新的窗口。这样的站点也很有特色，如图10所示。
页面元素
图10 无导航的网站
页面元素
1.2 Logo网站标志 Logo的中文涵义是标志、标识。作为独特的传媒
符号，标识(Logo)一直是传播特殊信息的视觉文化语
言。网站Logo设计在传统的CI标志设计上有一定的突 破，进而有一些属于网站标志的规律产生。Logo的设
整体配色风格，不太符合的图片必须进行色彩上的处理。
页面元素
图25 -snow
页面元素
3. 图片的清晰度、亮度 图片的清晰度直接影响视觉感观。为了某种特殊
效果，偶尔也会出现模糊的图片。但是一定不能因为
制作上的失误，使得图片压缩过火而导致图片模糊。 另外，同样需要注意到显示器亮度对图片的影响。 假如使用较暗的显示器制作了黑色网页，到他人机器 上显示可能变成了灰色，同时页面整体效果被破坏得 一塌糊涂。
页面元素
图3 四排导航28个导航栏目
页面元素
● 竖排导航按人们的习惯，大多放置在页面的左边。 导航在右边不符合人们的习惯，但是并非完全不被接受。
虽然不能作为主流设计，但只要安排得体，完全可以体
现独创性，并且受到人们喜爱，如图4所示。
页面元素
图4 置右的导航
页面元素
● 信息少，使用区域排版的站点可能没有明确的 栏目分类，站点内就包含了如导航的几个部分的内容。
或者把新闻信息区挪上，这样便可以打破网页结构模
式，设计出与众不同的页面来。如图2的导航，不规则 长宽，颜色各异，充分利用了页面设计的结构，页面
格局精巧漂亮。
页面元素
图2 不规则导航
页面元素
● 门户类、商业类站点，通常会有很多频道，加 起来十几个，足够双排。横排导航和竖排导航比较起 来，横排给人感觉上占页面空间较小，所以此类站点 多选择横排导航。灵活处理导航的位置，可以是置顶， 也可以位于广告条之下，如图3所示。
页面元素
● 导航 ● 网站标志(Logo)
● 广告条(Banner)
● 图片 ● 文字 ● 动画 ● 装饰物
● 超级链接
页面元素
1.1 导航
导航是最早出现在网页上的页面元素之一。导航 就好像一本书的目录，先有章，而后是节，再就是小 节。如果把导航比作图书馆里的标签分类也很形象， 文学的书这边走，艺术的书那边走。没有导航，那么 浏览者在站点内穿梭，岂不是要到处撞壁了么？
页面元素
为了不违反原设计意图，在保证图片清晰的情况下，
可以从制作上优化网页： ● 把大的背景分割，不需要的部分省去，另一部 分可以换成表格背景，分开插入页面当中。 ● 注意到页面的长度，考虑好是否可以重复使用
图片，以及是以x、y哪个轴重复图片。
● 单色的地方，可以使用表格背景色填充。有文 字的地方，可以考虑不做在图片里，这样压缩图片的
际设计中，该主页把具有和Flash动画一样风格的花纹
作为背景充填到空白区，这不仅起到了修饰作用，而 且弥补了框架设计的漏洞，强化了Flash设计的风格，
使得整个站点个性分明。
页面元素
图18 ping pong
页面元素
3. 整张图片作为背景
为了突出网页设计的个性化，很多网站甚至用整张 图片作为背景。如此一来，就比单调的重复性花纹显得 更有味道和特点。在使用整张图片做背景时，一方面一 定要把下载速度考虑进去，网页不能承受大于100 KB 的背景图片；另一方面，不能因顾忌到下载速度，而太 过火地压缩图片，图片模糊会影响页面效果。
页面元素
图20 HALFPROJECT
页面元素
4. 分辨率问题
页面的分辨率一直都是设计师处理页面布局时感到 比较头疼的一个环节。背景图的应用可以帮助我们解决 一部分有关分辨率的问题。 以图21～23为例，我们可以看到当显示器分辨率不
同的情况下，竖条色块在重复使用的时候，把空白的区
域填充完整，使得整个页面即使在分辨率很大的情况下， 依然能保证页面整体风格和页面布局的完整性。
页面元素
图21 800×600
页面元素
图22 1024×768
页面元素
图23 1152×864
页面元素
5. 有信息内容的页面上的背景图
在含有信息内容的页面上要加背景图片时应注意： ● 背景与主体明度对比为3:1到5:1之间为宜。 ● 淡色系列的背景有助于整体和谐。 ● 淡色材质背景为佳，能与主题分离之浅色标志
页面元素
导航既是网站路标，又是分类名称，是十分重要 的。导航栏应放置到明显的页面位置，让浏览者在第 一时间内看到它并作出判断，确定要进入哪个栏目中 去搜索他们所要的信息。导航栏的设计根据具体情况 可以有多种变化，它的设计风格决定了页面设计的风
格。反过来，设计师已经大致上有了网页设计的模式，
也可以按照模式的方向去把握导航的风格。
页面元素
对缩略图也可以加一些修饰，例如使用不规则图 形，填加边线，进行一些特殊边角处理等等(见图26)。
页面元素
图26
页面元素
5. 图片的排版 图片较多的情况下，将数张图片以整齐有序的形
式排列在版面上，称为块状组合；相反，将图片分散
于版面的各个部位，使版面成为自由的不呆板的形式， 称为分散组合。
页面元素
4. 缩略图的边角修饰
做过网站的人，对缩略图绝对不会陌生。一般情 况下，缩略图是在保证原图完整性的情况下，将原图
全尺寸地缩小。很多人使用软件生成缩略图。软件生
成的图片，原图的风貌是表现出来了，但却不十分清 楚，甚至扭曲，无法突出原图的个性特征，会直接影 响浏览者的感观。最糟糕的情况是，浏览者看过缩略 图后就不愿向下一级页面点击了。为了保证页面的视 觉效果，缩略图应尽量手工完成，还可以挑选原图中 较为精彩的部分并截取和裁减为缩略图，这样的缩略 图才会给访客留下更多的想象空间。
页面元素
图8 快捷导航条、竖两排右置
页面元素
● 利用DHTML动态网页技术实现的导航，一定要 考虑到访客的浏览器是否支持，下载速度是否会受到 影响等问题。动态导航都很精美、眩目，可以反映数 码时代的科技感，但不要太过推崇或迷信，因为这类 导航并不是所有类别的网站都适用。鉴于门户类站点 流量大、浏览者的知识层次不同等情况，尽量不要使 用DHTML的导航。
或文字背景亦可。
页面元素
1.4 插图 1. 图片的文字 若图片上含有文字，这些文字一定要清晰。模糊的 文字会降低视觉效果。含有文字的图片，尽量保存 为.gif格式和.png格式，或者高质量的 .jpg格式(见图
24)。
页面元素
图24 图片上的文字
页面元素
2. 图片的色彩
人们在设计页面的时候，往往只注意到页面框架和 底图的色彩，而忽略了插图的色彩。实际上，插图中的 色彩倾向直接干扰到网页的整体配色。如图25所示nike 鞋的页面，蓝绿色和灰色是它的主体配色，而这些色彩 的来源则是插图。 要选择适宜的插图，首先就要注意图片上反应出来 的信息内容，其次才是图片本身的色彩是否符合页面的
如果这类站点把导航设计成竖多排，搭配合适的插图，
页面会别有一番风味，如图5所示。
页面元素
图5 分块导航
页面元素
● 双排导航(或者多排导航)未必要挨在一起。依