人机交互第7章Web界面设计

1、本章内容简介 nWeb相关概念 nWeb界面设计原则nWeb界面要素设计nWeb界面基本设计技术nWeb3D界面设计技术7.1 Web界面及相关概念关于Webnweb的本意是蜘蛛网和网的意思，在计算机领域中我们称为网页的意思。现广泛译作网络、互联网等。n互联网是近年来对社会影响最大的技术进步,影响到人类生活的很多方面。n互联网已经成为全面支持多媒体，能在多种平台上运行的庞大信息服务系统。n20世纪40年代以来，人们就梦想能拥有一个世界性的信息库。在这个信息库中，信息不仅能被全球的人们存取，而且能轻松地链接到其他地方的信息，使用户可以方便快捷地获得重要的信息。n20世纪50年代末，正处于冷战时期

2、。当时美国军方为使自己的计算机网络在受到袭击时，即使部分网络被摧毁，其余部分仍能保持通信联系，便由美国国防部的高级研究计划局（ARPA）建设了一个军用网，叫做“阿帕网”（ARPAnet）。70年代研究者提出互联网的概念。互联网的诞生万维网的诞生n90年代初，瑞士日内瓦的欧洲核能研究中心分布在世界各地的科学家需要高效率的通讯方式来进行彼此交流与分享信息。n该中心高能核物理学家Tim Berners-Lee研究发展了万维网（World Wide Web，WWW）的雏形，常简称为Web。n目的是为了建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。n万维网并不等同互联网

3、，万维网只是互联网所能提供的服务其中之一，是依靠着互联网运行的一项服务。7.1 Web界面及相关概念n简单来说，WWW是建立在客户/服务器模型之上，构成的一个环球信息网络空间，主要使用：q超文本标记语言（Hypertext Markup Language，HTML）q超文本传输协议（Hypertext Transport Protocols， HTTP）7.1 Web界面及相关概念nWeb是一个由许多互相链接的超文本（HyperText）文档组成的系统。分布在世界各地的用户能够通过Internet对其访问，进行彼此交流与共享信息。n在这个系统中，每个有用的事物，被称为一种“资源”，其由一个全局

4、“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（HyperText Transfer Protocol）传送给用户；而用户通过点击链接来获得这些资源。 Web 网页网页 网页一般由文字和图片组成，复杂一些的还有声音、动画等多媒体内容，几乎所有的网页都包含链接，可以方便地跳转到其它相关网页或相关网站。网页文件由HTML语言描述，通过浏览器将HTML文件（网页）解析成我们看到的图文并茂的页面。 Web 网页网页 Web 网页网页静态网页静态网页n网页的内容一般不会变化，除非管理员手工修改网页内容n 不能实现与浏览器用户的交互，用户只是被动的浏览网页的信息n 网页文件扩展名一般为htm

5、l或htm静态网页静态网页动态网页动态网页n网页中包含了Web应用程序代码，网页的内容通常是动态可变的。网页中动态显示的数据通常放在后台的数据库里。n 以数据库技术为基础，可以实现与浏览器用户的交互，用户可以通过网页输入和查询内容。n不是静态的html文件，而是程序文件，一般扩展名为asp,jsp,php,cgi动态网页动态网页 网站网站 是网页等文件的集合，拥有独立的域名，为用户提供各种信息和服务。 网站网站优秀网站的特点优秀网站的特点1、 结构和导航清晰，便于使用2、 特色鲜明3、 色彩搭配和谐4、 较快的浏览速度5、 不断更新的内容Web界面实例分析 n简要介绍几种典型的网站的实例，以便

6、了解门不同类型的网站的设计风格与特点。 1. 商业站点 2.信息站点 3.娱乐站点 4.门户站点 1商业站点 n一般的，商业站点的主要受众是潜在的客户组织。第二种受众包括潜在的投资者，潜在的雇员。第三种受众，是新闻媒体或竞争者。 n任何商业站点的最主要的目的是，以公司直接或间接受益的方式服务于用户。1商业站点n商业站点的共同特点包括： q基本信息的发布q支持与帮助 q投资机会 q公共关系 q招聘信息 q电子商务 2信息站点 n政府、教育、新闻、无利润的组织、宗教组织，或变化多样的社会站点经常被认为是信息站点。n信息站点的访问者，是他们对站点提供的信息有兴趣或需要。n信息站点的建立满足某些设计条

7、件，但不需要考虑财政方面的因素 。n信息站点的目的差别很大。在大学的站点可能尽力以某个题目如某个国家的历史等帮助受教育的访问者 。3娱乐站点 n娱乐站点一般是商业性质的。娱乐站点的意图仅仅是使参观者欢乐。在某种程度上，他们是出售娱乐节目或娱乐内容 。n建立娱乐站点时要求打破常规而取得成功 。n就娱乐站点来说，目的是出售体验本身。 4门户站点 n门户站点是用户在网上冲浪的起始站点，该站点帮助人们查找信息。n门户站点经常试图提供尽可能多的信息，为用户尽可能多地提供服务，鼓励他们留在该站点或继续浏览该站点。n门户站点也包括搜索引擎或站点目录，这些是门户站点的关键。 网站网站网页设计的一般步骤网页设计

8、的一般步骤n需求分析n收集素材n网页设计（程序、美工）n网页制作（程序、美工）n发布网站n网站的维护静态文字图片动画声音超链接动态信息Dreamweaver、Frontpage、记事本Fireworks、PhotoshopFlash、Active GIF Creator 声音编辑工具Dreamweaver、Frontpage、记事本Javascript、ASP、PHP、JSP 网页设计的元素和工具网页设计的元素和工具 HTML语言语言HyperText Markup Language - 超文本标记语言超文本标记语言制作制作WebWeb页面的基本编程语言页面的基本编程语言 一系列标记的集合一系

9、列标记的集合例:这里是标题栏这里是网页文本的页面体部分几个基本标记基本标记基本标记web服务器Web服务简介服务简介一、Web服务概述 Web服务通过超文本传输协议（HTTP）向用户提供多媒体信息。所提供信息的基本单位是网页，每一个网页可以包含文字、图片、声音等多种信息。此外页面上还可加入超链接，使用户能够通过这些超链接直接访问另一个页面。Web服务基本工作原理服务基本工作原理Web服务器 Web浏览器使用HTTP命令向一个特定的服务器发出Web页面请求。 若该服务器在特定端口（通常是TCP 80端口）处接收到Web页面请求后，就发送一个应答并在客户和服务器之间建立连接。 web服务器查找客户

10、端所需文档，若Web服务器查找到所请求的文档，就会将所请求的文档传送给Web浏览器。若该文档不存在，则服务器会发送一个相应的错误提示文档给客户端。 Web浏览器接收到文档后，就将它显示出来。 当客户端浏览完成后，就断开与服务器的连接。 Web服务器配置服务器配置一、什么是Web服务器？qWeb 服务器也称为 HTTP 服务器，它响应来自客户机浏览器的请求，并且发送所请求的网页给客户机。q当访问者在浏览器的地址文本框中输入一个 URL，或者单击在浏览器中打开的网页上的某个链接时，便生成一个网页请求。 q常用的Web服务器软件有：nMicrosoft Internet Information Se

11、rver（IIS）nApache HTTP ServernApache Tomcat Server。 Web服务器配置服务器配置q二、五种常见的Web应用程序服务器nDreamweaver可以使用以下五种服务器技术的任何一种 设计Web 应用程序： ASP （Active Server Page：动态服务器网页技术） ASP .NET （.NET平台的动态服务器网页技术） JSP （Java Server Page ：Java服务器网页技术） PHP （Personal Home Page：个人主页技术） ColdFusion（可用于Windows和Solaris操作系统平台的动态服务器网页技

12、术） Web服务器配置服务器配置 选择哪一种Web 应用程序技术取决于多个因素，其中包括对各种脚本语言的熟悉程度以及要使用的应用程序服务器。如果采用IIS服务器，则可以选择 ASP或ASP.NET。如果采用PHP服务器，则可以选择 PHP；如果采用JSP服务器，则可以选择 JSP。如果采用ColdFusion MX服务器，则可以选择 ColdFusion 。nWeb应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制，还受Web网页的外观的影响。Web网页的外观经常是最先被用户注意到的。用户对网站的第一印象与界面外观是否友好、吸引人密切相关。所以对于设计人员来说，Web界面设计至关重要

13、。Web界面设计的人性化、易用性是Web界面设计的核心。7.1 Web界面及相关概念Web的发展趋势n图形Web页面的爆炸性发展。q网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的各个角落。 n新一代Web信息描述标准XMLq能更详尽地描述文档的结构信息，具有比HTML有更强大的功能，为Web的发展提供了强有力的支持。40可扩展标记语言是一种很像超文本标记语言的标记语言。它的标签没有被预定义。使用者需要自行定义标签。它是对超文本标记语言的补充。它和超文本标记语言为不同的目的而设计。它被设计用来传输和存储数据，其焦点是数据的内容。超文本标记语言被设计用来显示数据，其焦点是数据的外观。X

14、ML与HTMLn网格计算n网格是利用互联网把地理上广泛分布的各种资源（包括计算资源、存储资源、带宽资源、软件资源、数据资源、信息资源、知识资源等）连成一个逻辑整体，就像一台超级计算机一样，为用户提供一体化信息和应用服务（计算、存储、访问等），彻底消除资源“孤岛”，最充分的实现信息共享。n云服务n通过使计算分布在大量的分布式计算机上，而非本地计算机或远程服务器中，好比是从古老的单台发电机模式转向了电厂集中供电的模式。它意味着计算能力也可以作为一种商品进行流通，就像煤气、水电一样，取用方便，费用低廉。最大的不同在于，它是通过互联网进行传输的。超文本与超媒体 n超文本 （Hypertext）q是一种

15、使用于文本、图形或其他信息的组织形式，是一种非线性的信息组织形式。它使得单一的信息元素之间可以相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息。 n超媒体 （Hypermedia）q利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体 。43Web界面设计问题的提出 nWeb界面设计与站点外观直接相关q站点的界面外观是否友好直接关系到是否能吸引人的关注。n人性化的设计是Web界面设计的核心q如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的

16、重点。44Web界面设计基本原则 n1以用户为中心n2一致性n3简洁与明确n4体现特色n5兼顾不同的浏览器n6明确的导航设计45Web界面设计基本原则n1以用户为中心q一方面，不同类别的Web网站，面向的访问群体不同；同一类型的Web网站，用户群体也有年龄、行业等差别。因此，Web界面的设计只有了解不同用户的需求，才能在设计中体现用户的核心地位，设计出更合理、能满足用户需求的界面，以吸引用户。46n界面设计中的人因素：有限的短期记忆力（Limited short-term memory）人们在短期内可以记住7+2项信息。如果超过这个数量，人们很可能要出错。n人会犯错误（People make

17、mistakes）当人犯错之后系统就会不正常，不适当的警声和警示会造成紧张，进而可能产生更多的错误。n人是不同的（People are different）人的物理能力悬殊很大。设计者不应该只以自身的能力为设计依据。n人们有各自的交互偏好（People have different interaction preferences）一些人喜欢图画，一些则喜欢文本。Web界面设计基本原则n2. 一致性q内容一致：Web网站显示的信息、数据等q形式一致：Web界面设计的版式、构图、布局、色彩以及它们所呈现出的风格特点Web界面设计基本原则q Web界面自身的风格要一致性n各页面使用相同的页边距；文本

18、、图形间保持相同的间距；n各页面上都放上公司或网站的统一标志；n页面中的每个元素与整个页面以及站点的色彩和风格上保持一致性；n文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。55Web界面设计基本原则n3. 简洁与明确n使用一个醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。n限制所用的字体和颜色的数目。n界面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把界面装点起来。n尽量减少浏览层次56图7-5 Google首页（http:/，2009年9月）3简洁与明确简洁与明确 Web界面设计是设计的一种，要求简练、明确。应尽量把网页的层次简要化，力求以最少的点击次数链

19、接到具体的内容。 在主页的访问率为100人次的情况下，下一页的访问率降到30到50人次。网页的层次越复杂，实际内容的访问率也将越低，信息也就越难传达到读者的手里。Web界面设计基本原则n4体现特色q清楚地了解Web网站背景、体现主题和服务对象的基本情况，选择合适的表现手法，展示关键信息和特色内容，并形成独特、鲜明的风格。q利用相应逻辑结构来有序组织、开发出一个页面设计原型，进行测试，逐步精炼此原型，形成明确的特点q特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动它的浏览者q应清楚地了解Web网站用户的基本情况，从而能有的放矢，挑选关键信息Web界面设计基

20、本原则n5兼顾不同的浏览器q不同浏览器类别和版本在功能支持上有所区别n原因q站点浏览者可能使用不同类型和版本的浏览器。q以某一个浏览器的某一个版本为依据编写的网页程序，可能在其它的浏览器或其它版本上不能正常显示或运行。n方法 q通过使用JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数及对于某特定功能的支持情况，然后根据探测结果显示适用于特定浏览器的网页内容。 q根据用户浏览器分布情况决定设计所面向的浏览器类别和版本。Web界面设计基本原则n6明确的导航设计q网站首页导航应尽量展现整个网站的架构和内容；另外导航要能让浏览者确切地知道自己在整个网站中的位置，可以确定下一步的浏

21、览去向。n站点结构 q站点的结构可分为逻辑结构和物理结构:n逻辑结构描述文档间的关系，定义文档间的链接。 n物理结构描述文档的实际位置及显示方式 。q超文本结构中最常用层次结构n层次型结构按信息的必要性来改变信息的显示方式。n根网页是站点的主页，层次以根网页开始。n用户深入站点时，选择趋向于越来越具体，直到找到目标或叶子网页。n层次结构通过深度和广度来描述。 实例n灾难性目录q找苯甲酸苄酯n目录设计的目录设计google directory 的目录设计Web界面要素设计n1. Web界面规划n2. 文化与语言n3. 内容、风格与布局、色彩设计n4. 文本设计n5. 多媒体元素设计1. Web界

22、面规划qWeb界面的布局、元素的设计都要以”网站的目标和用途”这个目标为中心。q将网站作为一种文化、一种艺术作品看待，确定Web界面的设计风格，力求在设计Web界面时追求艺术效果与美感。n确定Web界面设计的目标q企业Web网站：n企业建立这个Web网站的目的n这个网站的作用n该提供哪些吸引访问者的东西n用户访问这个Web网站后，能给他们带来什么？ q个人Web网站 ：n主要是展现自我、演练技术 。n建立的Web网站要有个性和特色 。n站点的导航设计q导航系统对访问者来说是路径指示系统。q站点访问者通过导航系统寻找需要的信息。q用户感觉到能以满意的方式找到所需信息时，导航系统才是合适的。q由于

23、用户的差异，不可能实现完美的导航系统。 2. 文化与语言q全球服务型的网站还要考虑如何适应不同国家的不同类型的文化与语言环境。q在设计Web界面时，要将选择语言版本的功能放在网站的主页，并以不同版本的语言进行标注。图7-9 google网站（，2009年农历七月初七）图7-10 Nvidia网站（http:/ 内容、风格与布局、色彩设计qWeb界面的内容不仅要遵循简洁明确的原则，也要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。q设计者要对网站的标志、色彩、字体、布局、交互方式、内容价值、存在意义等有明确的认识。75n网站内容设计的原则 :qHTML文档的效果由其自身的质量和浏览器

24、解释的方法决定。应让所有的浏览器都能够正常浏览。 q网站信息的组织的总体结构要层次分明，尽量避免形成复杂的网状结构。 q要权衡图像和多媒体信息的数量，在不影响网站效果的前提下，尽量减少图像的数量和所占面积。n网站内容设计的原则 q网站的首页要给用户带来好的第一印象，能够吸引用户再次光临这个网站。q网站内容应是动态进行修改和更新；。q网页中应该提供联机帮助功能。q网页的文本内容应简明，通俗易懂。n所有的内容都要针对设计目标而写，不要画蛇添足。n文字要正确，不能有语法错误和错别字。 n确定网站的标准色彩q不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。n以红、绿、蓝三色称为三基色q其它的色

25、彩都可以用这三种色彩调和而成。n底色应柔和、素雅q柔和的底色配上深色文字，读起来自然，流畅。 n网页色彩搭配的原则：q色彩的鲜明性n网页的色彩要鲜艳，容易引人注目。 q色彩的独特性n要有与众不同的色彩，使得大家对网页的印象强烈。 q色彩的合适性n色彩和网页要表达的内容气氛相适合。q色彩的联想性n不同色彩会产生不同的联想，选择色彩要和网页的内涵相关联。 常见的网页布局结构n1“国字”型布局n“国”字型布局因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。 常见的网页布局结构n

26、2T型布局nT型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。 常见的网页布局结构n3标题正文型n标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。 常见的网页布局结构n4左右框架型布局n左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容 常见的网页布局结构n5上下框架型n上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。 常见的网页布局结构n6

27、. 综合框架型n综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术 常见的网页布局结构n7POP布局nPOP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。 常见的网页布局结构n8FLASH布局nFLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。 CNNUSA Today实例nUI花园 败笔4. 文本设计q文本不要太多，以免转移浏览者注意力。q要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代

28、表的内容。q选择的字体应和整个界面应融为一体。4. 文本设计q网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。q合理设置页边框、行间距等。q应该重视标题的处理，把标题排版作为界面修饰的主要手段之一。标题一般无分级要求，其字形一般较大。实例n文字的可用性q辨识度与可读性实例n文字大小qhttp:/ 多媒体元素设计n动画、音频和视频这样的多媒体可以补充平淡的文本或者二维图形。 nWeb设计者可以使用很多当前Web设计中的多媒体处理工具和技术；但是带宽以及浏览器的支持能力限制了多媒体技术的迅速采用。n为了充分享受新技术，通常需要大带宽、浏览器插件或第三方应用程序的支持。 10

29、3nWEB中的动画q动画是区别Web和其它媒体的一个重要展示形式，动画赋予了用户运动和投入的感受。q动画可以分为不同的级别，从简单的动画GIF图像到三维以及虚拟环境。q最常用的基本动画类型是GIF和Flash文件。q动画GIF是静止图像的汇集，可以按照指定的序列号和速度重复运动。许多标志广告就是动画GIF。104nWEB中的动画qFlash（.swf）文件在网站设计中被广泛地接受。qFlash引入了一种新的动画形式。它在带宽有限的情况下提供了媒体丰富的内容。qFlash特别适用于创建通过Internet提供的内容，因为它的文件非常小。Flash是通过广泛使用矢量图形做到这一点的。与位图图形相比

30、，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。105nWEB中的动画q全景图作为虚拟实景的一种重要表现形式，会让使用者有进入照片中的场景的感觉：全方位；真实的场景；三维立体的效果。Web界面设计技术基础 n1. 超文本标记语言HTML n2客户端脚本语言JavaScript n3服务器端脚本语言 1091. 超文本标记语言HTMLnHTML已经成为表示Web文档信息的标准方法，是构成Web页面的主要工具。nHTML是用来表示网上信息的符号标记语言，是一个跨平台语言。n从结构上讲，HTML

31、文件由各种标记元素组成，用于组织文件的内容和指导文件的输出格式。110（1）基本标记元素（部分） 111标记元素功能含义创建一个HTML文档，通知浏览器该文件含有HTML标记码设置文档标题以及其它不在Web网页上显示的信息网页标题，将显示在浏览器的标题栏中设置文档的可见部分，它包含了文件的内容设置背景颜色，使用颜色名或十六进制值设置背景图片设置文本文字颜色，使用颜色名或十六进制值设置超级链接文字的颜色，使用颜色名或十六进制值设置已访问过的超级链接文字的颜色，使用颜色名或十六进制值设置鼠标悬停于超级链接文字的颜色，使用颜色名或十六进制值创建最大的标题，在HTML中有六种标题 （2）图形标记元素

32、n目前能被Web浏览器直接解释的常见图像格式有：GIF格式(.GIF文件，支持256色)；X位图格式(.XBM文件，黑白图像)；JPEG格式(.JPG、.JPEG文件，支持RGB色)。112标记元素功能含义添加一个图像。SRC给定图片文件的定位，ALIGN属性定义图与文本行的对齐方式；BORDER属性设置围绕一个图像的边框的大小；WIDTH和HEIGHT分别重新定义图像的宽度和高度 加入一条水平线，SIZE设置水平线的大小，WIDTH设置水平线的宽度，NOSHADE表示创建无阴影的水平线（3）表格标记元素 （部分）标记元素功能含义定义表格，BORDER属性表示表格边框粗细程度，CELLSPAC

33、ING属性用于设置表格格子之间空间的大小，CELLPADDING用来设置表格格子边框与其内部内容之间空间的大小, WIDTH属性是用来定义表格宽度 定义表格标题表示一个新的表格行的开始，属性ALIGN表示横向对齐方式VALIGN属性规定单元格中内容的垂直排列方式。在表格的当前行里产生一个新的表项单元，表示一个表项标题(TableHeader)单元， 元素内部的文本通常会呈现为居中的粗体文本， ， COLSPAN及ROWSPAN表示进行横向及纵向地扩展表项单元在表格的当前行里产生一个新的表项单元，表示一个表项数据(TableData)单元，其它属性的含义同上（4）表单标记元素(部分) 114标记

34、元素功能含义 创建所有表单,表单元素允许用户输入信息 创建一个单行文本输入域，SIZE设置以字符计数的宽度文本 创建一个口令输入域，输入的字符全部显示为“*” 创建一个文本框区域，列的数目设置宽度，行的数目设置高度创建一个单选按钮，文字在标签后面创建一个复选框，文字在标签后面【例8-1】Demo.html115网页标题显示于浏览器窗口的标题栏 H1设定一级标题黑体字斜体字 红色5号字点击这里将超链到山东大学主页点击这里将超链到下面的锚点有意见请告诉我 这里是一个文档内部锚点的起始处【例8-2】用HTML实现表单实例 116HTML表单实例 用户名： 口令： 选学内容： Word Excel I

35、nternet 课程类别：必修选修 你的计算机是哪一种类型： PC UNIX MAC OTHER 备注：请在此填写补充内容 HTML5 117超文本标记语言（HTML）的第五次重大修改, 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。它的新特性包括：u 增加新属性u 淘汰过时的或冗余的属性u 一个HTML5文档到另一个文档间的拖放功能u 离线编辑u 信息传递的增强2客户端脚本语言JavaScript nHTML无法独自完成交互和客户端动态网页的任务,JavaScript，它弥补了HTML语言的缺陷。利用

36、JavaScript，可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互式的表达能力。nJavaScript是一种内嵌于HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。JavaScript 的 特点n（1）一种脚本编写语言 n（2）基于对象的语言 n（3）简单性 n（4）安全性 n（5）动态性 n（6）跨平台性 119JavaScript与HTML结合实例120/ JavaScript 在此出现alert(这是第一个JavaScript例子!);alert(欢迎你进入JavaScript世界!); alert(今后我们将共同学习J

37、avaScript知识！); / JavaScript 在此结束 /JavaScript代码由 .说明 /alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示括号中的字符串 4服务器端脚本语言 n目前流行的三大服务器端脚本语言是ASP、PHP、JSP。 qASP（Active Server Pages），是一个Web服务器端的开发环境， 利用它可以产生和运行动态的、交互的、高性能的Web服务应用程序。 qPHP（HyperText Preprocess）是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C、Java和Perl语言的语法，并耦合PHP自己的特

38、性，使Web开发者能够快速地写出动态生成页面。 qJSP （Java Server Page）是Sun公司推出的开发语言。121三大服务器端脚本语言n三者都提供在HTML代码中混合某种程序代码、由语言引擎解释执行程序代码的能力。n在ASP、PHP、JSP环境下，HTML代码主要负责描述信息的显示样式，而程序代码则用来描述处理逻辑。122常用Web界面设计工具 n1页面编辑器 qMicroSoft公司 的FrontpageqMacromedia公司 的DreamweaverqDreamweaver与Flash、Firework并称网页设计三剑客n2辅助工具 qAceHTML Pro 6.0全功能

39、的 HTML & JavaScript 编辑器。qAntenna Web Design Studio强大的可视化网页设计软件qEasy HTML简单的所见即所得的HTML 编辑器，有固定、类似浏览器的界面。qEasy Web Editor是一个 Web 发布工具，允许不了解HTML而在所见即所得环境中编辑Web网页。 123Dreamweaver的功能n（1）网站管理功能。nDreamweaver不仅能够编辑网页，还能够实现本地站点与服务器站点之间的文件同步。它可以进行大型网站的开发。对于需要多人维护的大型网站，拥有文件操作权限方面的限制，具有一定的安全保护功能。n（2）多种视图模式。

40、nDreamweaver提供了代码、设计和拆分3种视图模式。设计视图可以满足用户的设计需求，即使不懂HTML语言，不会书写网页源代码，也能创建出漂亮的网页；n（3）对象插入功能。nDreamweaver的插入面板中提供了常用字符、表格、框架、电子信箱和Flash文字等功能按钮，可以直接单击插入面板中的相关功能按钮，快速完成目标对象的制作。Dreamweaver的功能n（4）属性设置方式。nDreamweaver提供了属性面板，属性面板中显示了当前对象的属性，可以直接在属性面板中设置和修改当前对象的属性。n（5）CSS样式设置方式。nDreamweaver提供了CSS样式面板，通过CSS样式面板

41、，快速创建、查找和修改目标样式。n（6）内置大量的行为。nDreamweaver中内置了大量的行为，通过行为面板可以快速添加一些特殊效果，如网页的跳转、图像载入等。n（7）提供了资源管理功能。n在建立Dreamweaver站点后，Dreamweaver可以统一管理站点中的资源。可以通过资源面板来管理和使用这些资源。Dreamweaver 对主流技术的支持n（1）支持服务器环境。n支持如IIS、Aphache和ColdFusion等一些主流的服务器环境，满足不同的服务器环境开发要求。n（2）支持ASP、PHP和Java等主流技术。n可以支持ASP、PHP和Java等主流技术，可以在Dreamwe

42、aver中直接使用这些技术开发相关动态网页。n（3）支持数据库。n在Dreamweaver中可以直接连接到数据库。正确设置服务器环境后，通过Dreamweaver可以直接连接到数据库中进行动态网页的制作。n（4）支持多数的网页媒体。nDreamweaver可以完美支持常见的网页多媒体格式，如图片、Flash影片、MP3音乐等，都可以通过Dreamweaver直接添加，并能够进行即时测试。n（5）网页发布系统。nDreamweaver支持多种上传文件到服务器的方式，例如最常用的FTP上传文件方式。可以直接在Dreamweaver中选择和设置上传文件到服务器的方式，在Dreamweaver中完成所有的网页制作和上传发布的操作。Dreamweaver的工作界面n启动Dreamweaver后，Dreamweaver的起始页面中提供了一些常用操作命令。可以直接单