第7章 web界面设计.pptVIP

基于Web呈现信息的十大错误（Tullis，2005） 1.信息在网站中埋藏太深； 2.页面超载了过多材料； 3.提供笨拙的或令人困惑的导航； 4.把信息放在页面意外的位置； 5.不让链接明显、清楚； 6.呈现信息的表格太差； 7.文本小到很多用户不能阅读； 8.文本使用很多用户不能阅读的颜色组合； 9.使用的表单差； 10.隐藏（或不提供）能帮助用户的特征。 布局：Web界面布局就是指如何合理地在界面上分布内容。常用的Web界面布局形式有：“同”字形结构、“国”字形结构、左右对称、自由式。 色彩：Web网站给人的第一印象来自视觉冲击。颜色元素在网站的感知和展示上扮演重要的角色。某个企业或个人的风格、文化和态度可以通过Web界面中的色彩混合、调整或者对照的方式体现出来。一般地，Web界面中色彩选择可考虑：鲜明性、独特性、合适性、联想性、和谐性。 文本设计 文本不要太多，以免转移浏览者注意力。 要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。 选择的字体应和整个界面应融为一体；一旦已经为某些元素选择了字体，应该保证其在整个网站中应用的一致性。 网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。 通过合理设置页边框、行间距等，使Web界面产生丰富变化的外观和感觉。 应该重视标题的处理。标题一般无分级要求，其字形一般较大，字体的选择一般具有多样性，字形的变化修饰则更为丰富。 多媒体元素设计 图形、图像、动画、音频和视频等多媒体元素可以弥补平淡文本的不足，增强Web界面的艺术表现力。因此，在设计Web网页时有必要考虑使用不同类型的多媒体元素，使得网站更生动，而且有吸引力。 Rollover按钮 HTML HTML是用来表示网上信息的符号标记语言，是一个跨平台语言，能在Windows、Macintosh和Unix平台上工作。HTML已经成为了Web文档信息的标准方法，是构成Web界面的主要工具。 HTML语言的标记元素通常分为如下几类：基本标记元素、图形标记元素、表格标记元素、表单标记元素。 表单实例： HTML HEAD TITLEHTML表单实例/TITLE /HEAD BODY FORM用户名： INPUT TYPE=TEXT NAME=username SIZE=10 口令： INPUT TYPE=PASSWORD NAME=password SIZE=8HR 选学内容： INPUT TYPE=CHECKBOX NAME=ck1 VALUE=W Word INPUT TYPE=CHECKBOX NAME=ck2 VALUE=E Excel INPUT TYPE=CHECKBOX NAME=ck3 VALUE=I Internet P课程类别： INPUT TYPE=RADIO NAME=class VALUE=must必修 INPUT TYPE=RADIO NAME=class VALUE=option选修 HR你的计算机是哪一种类型： SELECT NAME=computer OPTIONPC OPTIONUNIX OPTIONMAC OPTIONOTHER /SELECTP 备注：BR TEXTAREA NAME=comment ROWS=5 COLS=25请在此填写补充内容/TEXTAREA P ALIGN=center INPUT TYPE=SUBMIT VALUE=确定 INPUT TYPE=RESET VALUE=重填 /FORM /BODY /HTML HTML建立表单的运行实例 JavaScript JavaScript是一种内嵌于HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。 基本特点： JavaScript是一种脚本编写语言；是基于对象的语言；简单性；安全性；动态性；跨平台性。 脚本： HTML 　head 　Script Language =JavaScript 　　alert（这是第一个JavaScript例子!）; 　　alert（欢迎你进入JavaScript世界!）; 　　alert（今后我们将共同学习JavaScript知识！）; 　/Script 　/head 　/HTML JavaScript例子 JavaApplet JavaAapplet是访问Internet服务器、在Internet上传播的、自动安装的、可作为部分Web文档运行的小应用程序。 放大镜例子： applet archive=AnLens.jar code=AnLens.class