系统学课件-Web界面设计.pptVIP

使用字体的原则 考虑字体如何适应网页，以及字体与整个设计的关系。 选择的字体和整个页面及网站应融为一体。 设计元素例如页边框，行间距，背景颜色和前景颜色等都可以影响最终的结果。 通过字体不同的安排，可以让网站产生丰富变化的外观和感觉。 * 8.7.4 Web界面的动画与多媒体 动画、音频和视频这样的多媒体可以补充平淡的文本或者二维图形，也补充网站的视觉设计、音调和消息等。 Web设计者可以使用很多当前Web设计中的多媒体处理工具和技术；但是带宽以及浏览器的支持能力限制了多媒体技术的迅速采用。 为了充分享受新技术，通常需要大带宽、浏览器插件或第三方应用程序的支持。 * WEB中的动画 动画是区别Web和其它媒体的一个重要展示形式，动画赋予了用户运动和投入的感受。 动画可以分为不同的级别，从简单的动画GIF图像到三维以及虚拟环境。 最常用的基本动画类型是GIF、Rollover和Macromedia Flash文件。 动画GIF是静止图像的汇集，可以按照指定的序列号和速度重复运动。许多标志广告就是动画GIF。 * WEB中的动画 JavaApplet是经常被用来制作互联网上动画效果的程序设计语言。 Macromedia Flash文件在网站设计中被广泛地接受。 Flash引入了一种新的动画形式。它在带宽有限的情况下提供了媒体丰富的内容。 Flash允许设计者创建吸引人的动画网站，为通常的静态站点提供了一种新的选择。 * 8.7.5 Web界面上的导航 对于Web站点来说，需要包含导航条，用户利用导航的提示在信息的空间里移动。 真实世界的导航观点在Web中常被采用。 应该注意，Web不是真实的世界，Web导航应该帮助用户理解他们在哪里、可以去哪里、怎样获得想要的东西。 * Web界面上的导航 为使用户得到真实的感觉，必须充分考虑可见性、标记和导航元素的布局。 Web页上仅有五个基本区域可放置导航元素： 顶部 底部 左侧 右侧 中央 * 8.8 Web界面设计技术与工具 要设计好的Web界面，需要有良好的设计工具，随着Internet网络的发展，国际组织和许多互联网软件开发商制订了若干标准，开发了不同的Web界面设计工具。本节对一些常见的技术和工具进行简单介绍。 * 8.8.1 Web界面设计技术基础 超文本标记语言HTML ? 客户端脚本语言JavaScript JavaApplet 服务器端脚本语言 * 1. 超文本标记语言HTML HTML已经成为表示Web文档信息的标准方法，是构成Web页面的主要工具。 HTML是用来表示网上信息的符号标记语言，是一个跨平台语言。 HTML标准定义了构成语言的每一个独立元素，这些元素是说明如何在浏览器中显示HTML文档的指令或标记符。 从结构上讲，HTML文件由各种标记元素组成，用于组织文件的内容和指导文件的输出格式。 * （1）基本标记元素（部分） 标记元素 功能含义 HTML/HTML 创建一个HTML文档，通知浏览器该文件含有HTML标记码 HEAD/HEAD 设置文档标题以及其它不在Web网页上显示的信息 TITLE/TITLE 网页标题，将显示在浏览器的标题栏中 BODY/BODY 设置文档的可见部分，它包含了文件的内容 BODY BGCOLOR=？ 设置背景颜色，使用颜色名或十六进制值 BODY BACKGROUND=？ 设置背景图片 BODY TEXT=？ 设置文本文字颜色，使用颜色名或十六进制值 BODY LINK=？ 设置超级链接文字的颜色，使用颜色名或十六进制值 BODY VLINK=？ 设置已访问过的超级链接文字的颜色，使用颜色名或十六进制值 BODY ALINK=？ 设置鼠标悬停于超级链接文字的颜色，使用颜色名或十六进制值 H1/H1 创建最大的标题，在HTML中有六种标题 * （2）图形标记元素 目前能被Web浏览器直接解释的常见图像格式有：GIF格式(.GIF文件，支持256色)；X位图格式(.XBM文件，黑白图像)；JPEG格式(.JPG、.JPEG文件，支持RGB色)。 标记元素 功能含义 IMG SRC=name ALIGN=? BORDER=? WIDTH=? HEIGHT=? 添加一个图像。SRC给定图片文件的定位，ALIGN属性定义图与文本行的对齐方式；BORDER属性设置围绕一个图像的边框的大小；WIDTH和HEIGHT分别重新定义图像的宽度和高度 。 HR SIZE=? WIDTH=? NOSHADE 加入一条水平线，SIZE设置水平线的大小，WIDTH设置水平线的宽度，NOSHADE表示创建无阴影的水平线 * （3）表格标记元素 （部分） 标记元素 功能含义