Dreamweaver应用与网页设计案例教程 教学课件 作者 杨长安 沈大林 孟昭勇 第8章 动态网站设计.pdfVIP

第 8 章 动态网站设计 第 8.1 节 网站界面设计 【相关知识】网页界面设计要素 1．网站的定位和规划 随着 网络的飞速发展，网页设计变得越来越有个性，网页设计的风格也变得丰富多彩，网站的个性与风格需 要在整体的策划中定位，在定位的前提下确定网页的界面风格设计。 无论是需求定位还是设计的风格定位，都是 以满足浏览者需求的 目标定位 。在创建站点时，设计者的创意想 法应该涉及多方面、多层次以满足用户需求，做到真正以浏览者的需求为中心。所 以，在设计站点时，站点的规 划应包括一下几个部分。 （1）目标：了解用户、了解用户的需求、理解用户的愿望，是一个站点定位的基本前提 。 （2）内容：列出一个 内容清单，区分文本、图像、动画、影像等 内容的类型和比例 。 （3）技术：确定 WEB 所使用的编辑技术、管理技术 以及辅助技术的支持情况。 （4）界面：在对界面风格进行明确定位的前提下，给出用户界面设计的轮廓，并列出设计尺寸、色彩亮度、 字体等方面的限制。 （5）站点结构图：确定站定每部分 内容的关系，用简明直观的方法描述站点不同部分的结构图和流程 图。 2．网站的导航设计 网站导航的合理与否直接影响到用户的使用舒适与否 。要根据客户的需求建立合理的网站导航 。导航作为页 面的重要视觉元素，应放置在明显、易找、易读的区域。 而导航的位置不仅与设计的风格相关，他还带来了许多使用上的问题 。在屏幕上一个网页实际上仅有 5 个区 域来放置导航元素：顶部、底部、左侧、右侧和中间，每个位置都有其优缺点。 （1）顶部导航：许多站点都把导航元素放置在页面的顶部，如图 8-1-1 所示。主要考虑到一个典型的网页都 是以 “从左到右、从上到下”的方式进行扫描，这样可 以让所有导航元素能够迅速 的显示出来，引起用户的注意。 图 8-1-1 顶部导航方式 （2）底部导航：将导航元素放置在页面的底部，使用文字进行链接，主要为了方便用户的使用，如图 8-1-2 93  所示。 图 8-1-2 底部导航方式 图 8-1-3 左侧导航方式 （3）左侧导航：将导航元素放置在页面的左侧位置，是网页设计中约定成俗的使用方法，如图 8-1-3 所示。 即便是印刷设计中，左导航也是最普遍的。 （4）右侧导航：把导航元素放置在页面的右侧开始流行起来，如图 8-1-4 所示。主要考虑到不会影响内容， 可 以很快看到内容。 （5）中间导航：在页面中放置导航元素的最后一个选择地是中心，如图 8-1-5 所示。这种导航方式一般只在 首页采用，用于强调页面效果。 图 8-1-4 右侧导航方式 图 8-1-5 中间导航方式 3．页面 内容的编排 （1）文字设计的要求：文字的主要功能是，在视觉传达中向大众传达作者的意图和各种信息。要达到这一 目 的，必须考虑文字的整体效果，给人 以清晰的视觉印象。因此，在设计中应避免文字繁杂零乱，使人易认，易懂 。 切忌为了设计而设计，忘记了文字设计的根本 目的是为了更好、更有效的表达设计的主题和构思，让表达的内容 清晰、醒 目。 在页面 中正文字体，最好采用默认的宋体字，因为浏览器是用本地机器上的字库显示字体的；适合于网页显 示的字体大小一般为 12 磅左右，现在很多网页 由于页面中需要安排的内容较多，通常采用 9 磅的字号，但是需 要注意小字体虽然可 以产生整体的精致感，但可读性较差。 （2）图像的处理：图像在网页中占据的面积大小能直接显示其重要程度 。图像的大小、外形、数量 以及与背 景的关系，都与网页的整体效果有着密切的联系。一般而言大图像容易形成视觉焦点、感染力强；小图像用来点 缀画面，有呼应页面主题的作用 。 93  在编辑图像时，图像的分辨率应设置为 72dpi 即可，高分辨率的图像会增加浏览器下载的时间；图像的大小 应设置的与将要的网页中显示的大小相同，如果没有定义图像尺寸，浏览器只得重绘表格来容纳图像，而浪费时 间。 （3）logo 设计：Logo 是网页中重要的识别符号，一个好的 logo