人机交互第7章Web界面设计_第1页
人机交互第7章Web界面设计_第2页
人机交互第7章Web界面设计_第3页
人机交互第7章Web界面设计_第4页
人机交互第7章Web界面设计_第5页
已阅读5页，还剩138页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第7章Web界面设计本章内容简介Web相关概念Web界面设计原则Web界面要素设计Web界面基本设计技术Web3D界面设计技术7.1Web界面及相关概念关于Webweb的本意是蜘蛛网和网的意思，在计算机领域中我们称为网页的意思。现广泛译作网络、互联网等。互联网是近年来对社会影响最大的技术进步,影响到人类生活的很多方面。互联网已经成为全面支持多媒体，能在多种平台上运行的庞大信息服务系统。20世纪40年代以来，人们就梦想能拥有一个世界性的信息库。在这个信息库中，信息不仅能被全球的人们存取，而且能轻松地链接到其他地方的信息，使用户可以方便快捷地获得重要的信息。20世纪50年代末，正处于冷战时期。当时美国军方为使自己的计算机网络在受到袭击时，即使部分网络被摧毁，其余部分仍能保持通信联系，便由美国国防部的高级研究计划局（ARPA）建设了一个军用网，叫做“阿帕网”（ARPAnet）。70年代研究者提出互联网的概念。互联网的诞生万维网的诞生90年代初，瑞士日内瓦的欧洲核能研究中心分布在世界各地的科学家需要高效率的通讯方式来进行彼此交流与分享信息。该中心高能核物理学家TimBerners-Lee研究发展了万维网（WorldWideWeb，WWW）的雏形，常简称为Web。目的是为了建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。万维网并不等同互联网，万维网只是互联网所能提供的服务其中之一，是依靠着互联网运行的一项服务。7.1Web界面及相关概念简单来说，WWW是建立在客户/服务器模型之上，构成的一个环球信息网络空间，主要使用：超文本标记语言（HypertextMarkupLanguage，HTML）超文本传输协议（HypertextTransportProtocols，

HTTP）7.1Web界面及相关概念Web是一个由许多互相链接的超文本（HyperText）文档组成的系统。分布在世界各地的用户能够通过Internet对其访问，进行彼此交流与共享信息。在这个系统中，每个有用的事物，被称为一种“资源”，其由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（HyperTextTransferProtocol）传送给用户；而用户通过点击链接来获得这些资源。

Web网页网页一般由文字和图片组成，复杂一些的还有声音、动画等多媒体内容，几乎所有的网页都包含链接，可以方便地跳转到其它相关网页或相关网站。网页文件由HTML语言描述，通过浏览器将HTML文件（网页）解析成我们看到的图文并茂的页面。●

定义

Web网页

Web网页静态网页网页的内容一般不会变化，除非管理员手工修改网页内容

不能实现与浏览器用户的交互，用户只是被动的浏览网页的信息

网页文件扩展名一般为html或htm静态网页动态网页网页中包含了Web应用程序代码，网页的内容通常是动态可变的。网页中动态显示的数据通常放在后台的数据库里。

以数据库技术为基础，可以实现与浏览器用户的交互，用户可以通过网页输入和查询内容。不是静态的html文件，而是程序文件，一般扩展名为asp,,jsp,php,cgi动态网页网站是网页等文件的集合，拥有独立的域名，为用户提供各种信息和服务。●

定义网站优秀网站的特点1、结构和导航清晰，便于使用2、特色鲜明3、色彩搭配和谐4、较快的浏览速度5、不断更新的内容Web界面实例分析

简要介绍几种典型的网站的实例，以便了解门不同类型的网站的设计风格与特点。

1.商业站点

2.信息站点

3.娱乐站点

4.门户站点

1．商业站点

一般的，商业站点的主要受众是潜在的客户组织。第二种受众包括潜在的投资者，潜在的雇员。第三种受众，是新闻媒体或竞争者。

任何商业站点的最主要的目的是，以公司直接或间接受益的方式服务于用户。1．商业站点商业站点的共同特点包括：

基本信息的发布支持与帮助投资机会

公共关系

招聘信息

电子商务

2．信息站点

政府、教育、新闻、无利润的组织、宗教组织，或变化多样的社会站点经常被认为是信息站点。信息站点的访问者，是他们对站点提供的信息有兴趣或需要。信息站点的建立满足某些设计条件，但不需要考虑财政方面的因素。信息站点的目的差别很大。在大学的站点可能尽力以某个题目如某个国家的历史等帮助受教育的访问者。3．娱乐站点

娱乐站点一般是商业性质的。娱乐站点的意图仅仅是使参观者欢乐。在某种程度上，他们是出售娱乐节目或娱乐内容。建立娱乐站点时要求打破常规而取得成功。就娱乐站点来说，目的是出售体验本身。

4．门户站点

门户站点是用户在网上冲浪的起始站点，该站点帮助人们查找信息。门户站点经常试图提供尽可能多的信息，为用户尽可能多地提供服务，鼓励他们留在该站点或继续浏览该站点。门户站点也包括搜索引擎或站点目录，这些是门户站点的关键。网站网页设计的一般步骤需求分析收集素材网页设计（程序、美工）网页制作（程序、美工）发布网站网站的维护静态文字●图片●动画●声音●超链接●动态信息●Dreamweaver、Frontpage、记事本Fireworks、PhotoshopFlash、ActiveGIFCreator声音编辑工具Dreamweaver、Frontpage、记事本Javascript、ASP、PHP、JSP网页设计的元素和工具HTML语言●HyperTextMarkupLanguage

超文本标记语言

制作Web页面的基本编程语言一系列标记的集合●

分类●

双边标记：头标与尾标。如：<title>…</title>●单边标记：只有头标。如：<hr><br>●

属性●

对标记的行为进行控制<hrwidth=“600”size=“1”color=“black”>例:<html><head><title>这里是标题栏</title></head><body><p>这里是网页文本的页面体部分</p><hr></body></html><html></html>1<head></head>2<title></title>3<body></body>4<p>5<hr>6●几个基本标记基本标记

Web服务器的配置

Web服务简介web服务器Web服务简介一、Web服务概述

Web服务通过超文本传输协议（HTTP）向用户提供多媒体信息。所提供信息的基本单位是网页，每一个网页可以包含文字、图片、声音等多种信息。此外页面上还可加入超链接，使用户能够通过这些超链接直接访问另一个页面。Web服务基本工作原理Web服务器/index.html40/index.htm客户机浏览器软件安装IIS或Apache软件Web服务工作原理①Web浏览器使用HTTP命令向一个特定的服务器发出Web页面请求。②若该服务器在特定端口（通常是TCP80端口）处接收到Web页面请求后，就发送一个应答并在客户和服务器之间建立连接。③web服务器查找客户端所需文档，若Web服务器查找到所请求的文档，就会将所请求的文档传送给Web浏览器。若该文档不存在，则服务器会发送一个相应的错误提示文档给客户端。④Web浏览器接收到文档后，就将它显示出来。⑤当客户端浏览完成后，就断开与服务器的连接。Web服务器配置一、什么是Web服务器？Web服务器也称为HTTP服务器，它响应来自客户机浏览器的请求，并且发送所请求的网页给客户机。当访问者在浏览器的地址文本框中输入一个URL，或者单击在浏览器中打开的网页上的某个链接时，便生成一个网页请求。常用的Web服务器软件有：MicrosoftInternetInformationServer（IIS）ApacheHTTPServerApacheTomcatServer。Web服务器配置二、五种常见的Web应用程序服务器Dreamweaver可以使用以下五种服务器技术的任何一种设计Web应用程序：

ASP（ActiveServerPage：动态服务器网页技术）

ASP.NET（.NET平台的动态服务器网页技术）

JSP（JavaServerPage：Java服务器网页技术）

PHP（PersonalHomePage：个人主页技术）ColdFusion（可用于Windows和Solaris操作系统平台的动态服务器网页技术）

Web服务器配置

选择哪一种Web应用程序技术取决于多个因素，其中包括对各种脚本语言的熟悉程度以及要使用的应用程序服务器。如果采用IIS服务器，则可以选择ASP或ASP.NET。如果采用PHP服务器，则可以选择PHP；如果采用JSP服务器，则可以选择JSP。如果采用ColdFusion

MX服务器，则可以选择ColdFusion。Web应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制，还受Web网页的外观的影响。Web网页的外观经常是最先被用户注意到的。用户对网站的第一印象与界面外观是否友好、吸引人密切相关。所以对于设计人员来说，Web界面设计至关重要。Web界面设计的人性化、易用性是Web界面设计的核心。7.1Web界面及相关概念Web的发展趋势图形Web页面的爆炸性发展。网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的各个角落。新一代Web信息描述标准XML能更详尽地描述文档的结构信息，具有比HTML有更强大的功能，为Web的发展提供了强有力的支持。40可扩展标记语言是一种很像超文本标记语言的标记语言。它的标签没有被预定义。使用者需要自行定义标签。它是对超文本标记语言的补充。它和超文本标记语言为不同的目的而设计。它被设计用来传输和存储数据，其焦点是数据的内容。超文本标记语言被设计用来显示数据，其焦点是数据的外观。XML与HTML网格计算网格是利用互联网把地理上广泛分布的各种资源（包括计算资源、存储资源、带宽资源、软件资源、数据资源、信息资源、知识资源等）连成一个逻辑整体，就像一台超级计算机一样，为用户提供一体化信息和应用服务（计算、存储、访问等），彻底消除资源“孤岛”，最充分的实现信息共享。云服务通过使计算分布在大量的分布式计算机上，而非本地计算机或远程服务器中，好比是从古老的单台发电机模式转向了电厂集中供电的模式。它意味着计算能力也可以作为一种商品进行流通，就像煤气、水电一样，取用方便，费用低廉。最大的不同在于，它是通过互联网进行传输的。超文本与超媒体超文本（Hypertext）是一种使用于文本、图形或其他信息的组织形式，是一种非线性的信息组织形式。它使得单一的信息元素之间可以相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息。超媒体（Hypermedia）利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体。43Web界面设计问题的提出Web界面设计与站点外观直接相关站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。44Web界面设计基本原则1．以用户为中心2．一致性3．简洁与明确4．体现特色5．兼顾不同的浏览器6．明确的导航设计45Web界面设计基本原则1．以用户为中心一方面，不同类别的Web网站，面向的访问群体不同；同一类型的Web网站，用户群体也有年龄、行业等差别。因此，Web界面的设计只有了解不同用户的需求，才能在设计中体现用户的核心地位，设计出更合理、能满足用户需求的界面，以吸引用户。46界面设计中的人因素：

有限的短期记忆力（Limitedshort-termmemory）

人们在短期内可以记住7+2项信息。如果超过这个数量，人们很可能要出错。

人会犯错误（Peoplemakemistakes）

当人犯错之后系统就会不正常，不适当的警声和警示会造成紧张，进而可能产生更多的错误。

人是不同的（Peoplearedifferent）

人的物理能力悬殊很大。设计者不应该只以自身的能力为设计依据。

人们有各自的交互偏好（Peoplehavedifferentinteractionpreferences）

一些人喜欢图画，一些则喜欢文本。Web界面设计基本原则2.一致性内容一致：Web网站显示的信息、数据等形式一致：Web界面设计的版式、构图、布局、色彩以及它们所呈现出的风格特点Web界面设计基本原则Web界面自身的风格要一致性各页面使用相同的页边距；文本、图形间保持相同的间距；各页面上都放上公司或网站的统一标志；页面中的每个元素与整个页面以及站点的色彩和风格上保持一致性；文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。55Web界面设计基本原则3.简洁与明确使用一个醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。限制所用的字体和颜色的数目。界面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把界面装点起来。尽量减少浏览层次56图7-5Google首页（，2009年9月）3．简洁与明确

Web界面设计是设计的一种，要求简练、明确。应尽量把网页的层次简要化，力求以最少的点击次数链接到具体的内容。

在主页的访问率为100人次的情况下，下一页的访问率降到30到50人次。网页的层次越复杂，实际内容的访问率也将越低，信息也就越难传达到读者的手里。Web界面设计基本原则4．体现特色清楚地了解Web网站背景、体现主题和服务对象的基本情况，选择合适的表现手法，展示关键信息和特色内容，并形成独特、鲜明的风格。利用相应逻辑结构来有序组织、开发出一个页面设计原型，进行测试，逐步精炼此原型，形成明确的特点特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动它的浏览者应清楚地了解Web网站用户的基本情况，从而能有的放矢，挑选关键信息Web界面设计基本原则5．兼顾不同的浏览器不同浏览器类别和版本在功能支持上有所区别原因站点浏览者可能使用不同类型和版本的浏览器。以某一个浏览器的某一个版本为依据编写的网页程序，可能在其它的浏览器或其它版本上不能正常显示或运行。方法通过使用JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数及对于某特定功能的支持情况，然后根据探测结果显示适用于特定浏览器的网页内容。根据用户浏览器分布情况决定设计所面向的浏览器类别和版本。Web界面设计基本原则6．明确的导航设计网站首页导航应尽量展现整个网站的架构和内容；另外导航要能让浏览者确切地知道自己在整个网站中的位置，可以确定下一步的浏览去向。站点结构

站点的结构可分为逻辑结构和物理结构:逻辑结构描述文档间的关系，定义文档间的链接。

物理结构描述文档的实际位置及显示方式。超文本结构中最常用层次结构层次型结构按信息的必要性来改变信息的显示方式。根网页是站点的主页，层次以根网页开始。用户深入站点时，选择趋向于越来越具体，直到找到目标或叶子网页。层次结构通过深度和广度来描述。

实例灾难性目录找"苯甲酸苄酯"目录设计的目录设计googledirectory的目录设计Web界面要素设计1.Web界面规划2.文化与语言3.内容、风格与布局、色彩设计4.文本设计5.多媒体元素设计

1.Web界面规划

Web界面的布局、元素的设计都要以”网站的目标和用途”这个目标为中心。将网站作为一种文化、一种艺术作品看待，确定Web界面的设计风格，力求在设计Web界面时追求艺术效果与美感。确定Web界面设计的目标企业Web网站：企业建立这个Web网站的目的这个网站的作用该提供哪些吸引访问者的东西用户访问这个Web网站后，能给他们带来什么？

个人Web网站：主要是展现自我、演练技术。建立的Web网站要有个性和特色。站点的导航设计导航系统对访问者来说是路径指示系统。站点访问者通过导航系统寻找需要的信息。用户感觉到能以满意的方式找到所需信息时，导航系统才是合适的。由于用户的差异，不可能实现完美的导航系统。2.文化与语言

全球服务型的网站还要考虑如何适应不同国家的不同类型的文化与语言环境。在设计Web界面时，要将选择语言版本的功能放在网站的主页，并以不同版本的语言进行标注。图7-9google网站（，2009年农历七月初七）图7-10Nvidia网站（/，2009年9月）Google首页图标（中国七夕）3.内容、风格与布局、色彩设计Web界面的内容不仅要遵循简洁明确的原则，也要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。设计者要对网站的标志、色彩、字体、布局、交互方式、内容价值、存在意义等有明确的认识。75网站内容设计的原则

:HTML文档的效果由其自身的质量和浏览器解释的方法决定。应让所有的浏览器都能够正常浏览。网站信息的组织的总体结构要层次分明，尽量避免形成复杂的网状结构。要权衡图像和多媒体信息的数量，在不影响网站效果的前提下，尽量减少图像的数量和所占面积。网站内容设计的原则

网站的首页要给用户带来好的第一印象，能够吸引用户再次光临这个网站。网站内容应是动态进行修改和更新；。网页中应该提供联机帮助功能。网页的文本内容应简明，通俗易懂。所有的内容都要针对设计目标而写，不要画蛇添足。文字要正确，不能有语法错误和错别字。确定网站的标准色彩不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。以红、绿、蓝三色称为三基色其它的色彩都可以用这三种色彩调和而成。底色应柔和、素雅柔和的底色配上深色文字，读起来自然，流畅。网页色彩搭配的原则：色彩的鲜明性网页的色彩要鲜艳，容易引人注目。

色彩的独特性要有与众不同的色彩，使得大家对网页的印象强烈。

色彩的合适性色彩和网页要表达的内容气氛相适合。色彩的联想性不同色彩会产生不同的联想，选择色彩要和网页的内涵相关联。

常见的网页布局结构1．“国字”型布局“国”字型布局因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。

常见的网页布局结构2．T型布局T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。

常见的网页布局结构3．标题正文型标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。

常见的网页布局结构4．左右框架型布局左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容

常见的网页布局结构5．上下框架型上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。

常见的网页布局结构6.综合框架型综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术

常见的网页布局结构7．POP布局POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。

常见的网页布局结构8．FLASH布局FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。

CNNUSAToday实例UI花园

败笔4.文本设计文本不要太多，以免转移浏览者注意力。要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。选择的字体应和整个界面应融为一体。4.文本设计网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。合理设置页边框、行间距等。应该重视标题的处理，把标题排版作为界面修饰的主要手段之一。标题一般无分级要求，其字形一般较大。实例文字的可用性辨识度与可读性实例文字大小/blog/?p=324实例下划线主要区分是否有链接实例视觉显著性5.多媒体元素设计动画、音频和视频这样的多媒体可以补充平淡的文本或者二维图形。Web设计者可以使用很多当前Web设计中的多媒体处理工具和技术；但是带宽以及浏览器的支持能力限制了多媒体技术的迅速采用。为了充分享受新技术，通常需要大带宽、浏览器插件或第三方应用程序的支持。103WEB中的动画动画是区别Web和其它媒体的一个重要展示形式，动画赋予了用户运动和投入的感受。动画可以分为不同的级别，从简单的动画GIF图像到三维以及虚拟环境。最常用的基本动画类型是GIF和Flash文件。动画GIF是静止图像的汇集，可以按照指定的序列号和速度重复运动。许多标志广告就是动画GIF。104WEB中的动画Flash（.swf）文件在网站设计中被广泛地接受。Flash引入了一种新的动画形式。它在带宽有限的情况下提供了媒体丰富的内容。Flash特别适用于创建通过Internet提供的内容，因为它的文件非常小。Flash是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。105WEB中的动画全景图作为虚拟实景的一种重要表现形式，会让使用者有进入照片中的场景的感觉：全方位；真实的场景；三维立体的效果。Web界面设计技术基础1.超文本标记语言HTML

2．客户端脚本语言JavaScript3．服务器端脚本语言1091.超文本标记语言HTMLHTML已经成为表示Web文档信息的标准方法，是构成Web页面的主要工具。HTML是用来表示网上信息的符号标记语言，是一个跨平台语言。从结构上讲，HTML文件由各种标记元素组成，用于组织文件的内容和指导文件的输出格式。110（1）基本标记元素（部分）111标记元素功能含义<HTML></HTML>创建一个HTML文档，通知浏览器该文件含有HTML标记码<HEAD></HEAD>设置文档标题以及其它不在Web网页上显示的信息<TITLE></TITLE>网页标题，将显示在浏览器的标题栏中<BODY></BODY>设置文档的可见部分，它包含了文件的内容<BODYBGCOLOR=？>设置背景颜色，使用颜色名或十六进制值<BODYBACKGROUND=？>设置背景图片<BODYTEXT=？>设置文本文字颜色，使用颜色名或十六进制值<BODYLINK=？>设置超级链接文字的颜色，使用颜色名或十六进制值<BODYVLINK=？>设置已访问过的超级链接文字的颜色，使用颜色名或十六进制值<BODYALINK=？>设置鼠标悬停于超级链接文字的颜色，使用颜色名或十六进制值<H1></H1>创建最大的标题，在HTML中有六种标题

（2）图形标记元素目前能被Web浏览器直接解释的常见图像格式有：GIF格式(.GIF文件，支持256色)；X位图格式(.XBM文件，黑白图像)；JPEG格式(.JPG、.JPEG文件，支持RGB色)。112标记元素功能含义<IMGSRC="name"ALIGN=?BORDER=?WIDTH=?HEIGHT=?>添加一个图像。SRC给定图片文件的定位，ALIGN属性定义图与文本行的对齐方式；BORDER属性设置围绕一个图像的边框的大小；WIDTH和HEIGHT分别重新定义图像的宽度和高度

<HRSIZE=?WIDTH=?NOSHADE>加入一条水平线，SIZE设置水平线的大小，WIDTH设置水平线的宽度，NOSHADE表示创建无阴影的水平线（3）表格标记元素（部分）标记元素功能含义<TABLEBORDER=#CELLSPACING=#CELLPADDING=#WIDTH=#or%>定义表格，BORDER属性表示表格边框粗细程度，CELLSPACING属性用于设置表格格子之间空间的大小，CELLPADDING用来设置表格格子边框与其内部内容之间空间的大小,WIDTH属性是用来定义表格宽度<CAPTION></CAPTION>定义表格标题<TRALIGN=?VALIGN=?>表示一个新的表格行的开始，属性ALIGN表示横向对齐方式VALIGN属性规定单元格中内容的垂直排列方式。<THALIGN=?VALIGN=?COLSPAN=?ROWSPAN=?>在表格的当前行里产生一个新的表项单元，表示一个表项标题(TableHeader)单元，<TH>元素内部的文本通常会呈现为居中的粗体文本，，

COLSPAN及ROWSPAN表示进行横向及纵向地扩展表项单元<TDALIGN=?VALIGN=?COLSPAN=?ROWSPAN=?>在表格的当前行里产生一个新的表项单元，<TD>表示一个表项数据(TableData)单元，其它属性的含义同上（4）表单标记元素(部分)114标记元素功能含义<FORM></FORM>创建所有表单,表单元素允许用户输入信息<INPUTTYPE="TEXT"NAME="name"SIZE=#>创建一个单行文本输入域，SIZE设置以字符计数的宽度文本<INPUTTYPE="PASSWORD"NAME="name"VALUE="*"SIZE=#>创建一个口令输入域，输入的字符全部显示为“*”<TEXTAREANAME="name"COLS=#ROWS=#></TEXTAREA>创建一个文本框区域，列的数目设置宽度，行的数目设置高度<INPUTTYPE="RADIO"NAME="name"VALUE="x">创建一个单选按钮，文字在标签后面<INPUTTYPE="CHECKBOX"NAME="name">创建一个复选框，文字在标签后面【例8-1】Demo.html115<HTML><HEAD><TITLE>网页标题显示于浏览器窗口的标题栏</TITLE></HEAD><BODYBGCOLOR="#E7F9F3"><H1>H1设定一级标题</H1><BR><B>黑体字</B><BR><I>斜体字</I><PALIGN="right"><FONTSIZE=5COLOR="red">红色5号字</FONT><BR><BR><BR><BR><BR><PALIGN="center"><AHREF="">点击这里将超链到山东大学主页</A><P><BR><BR><AHREF="#next">点击这里将超链到下面的锚点</A><PALIGN="center"><AHREF="mailto:xueqingli@">有意见请告诉我</A><P><ANAME="next">这里是一个文档内部锚点的起始处</A></BODY></HTML>【例8-2】用HTML实现表单实例116<HTML><HEAD><TITLE>HTML表单实例</TITLE></HEAD><BODYBGCOLOR="#E7F9F3"><FORM>用户名：<INPUTTYPE="TEXT"NAME="username"SIZE=10>口令：<INPUTTYPE="PASSWORD"NAME="password"SIZE=8><HR>选学内容：<INPUTTYPE="CHECKBOX"NAME="ck1"VALUE="W">Word<INPUTTYPE="CHECKBOX"NAME="ck2"VALUE="E">Excel<INPUTTYPE="CHECKBOX"NAME="ck3"VALUE="I">Internet<P>课程类别：<INPUTTYPE="RADIO"NAME="class"VALUE="must">必修<INPUTTYPE="RADIO"NAME="class"VALUE="option">选修

<HR>你的计算机是哪一种类型：

<SELECTNAME="computer"><OPTION>PC<OPTION>UNIX<OPTION>MAC<OPTION>OTHER</SELECT><P>备注：<BR><TEXTAREANAME="comment"ROWS=5COLS=25>请在此填写补充内容</TEXTAREA><PALIGN="center"><INPUTTYPE="SUBMIT"VALUE="确定"><INPUTTYPE="RESET"VALUE="重填"></FORM></BODY></HTML>HTML5117超文本标记语言（HTML）的第五次重大修改,

2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。它的新特性包括：增加新属性淘汰过时的或冗余的属性一个HTML5文档到另一个文档间的拖放功能离线编辑信息传递的增强2．客户端脚本语言JavaScriptHTML无法独自完成交互和客户端动态网页的任务,JavaScript，它弥补了HTML语言的缺陷。利用JavaScript，可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互式的表达能力。JavaScript是一种内嵌于HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。JavaScript的特点（1）一种脚本编写语言（2）基于对象的语言（3）简单性（4）安全性（5）动态性（6）跨平台性119JavaScript与HTML结合实例120

<html>

<head>

<ScriptLanguage="JavaScript">

//JavaScript在此出现

alert("这是第一个JavaScript例子!");

alert("欢迎你进入JavaScript世界!");

alert("今后我们将共同学习JavaScript知识！");

</Script>

//JavaScript在此结束

</Head>

</Html>

//JavaScript代码由<ScriptLanguage=“JavaScript”>...</Script>说明//alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示括号中的字符串4．服务器端脚本语言目前流行的三大服务器端脚本语言是ASP、PHP、JSP。ASP（Active

Server

Pages），是一个Web服务器端的开发环境，

利用它可以产生和运行动态的、交互的、高性能的Web服务应用程序。PHP（HyperTextPreprocess）是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C、Java和Perl语言的语法，并耦合PHP自己的特性，使Web开发者能够快速地写出动态生成页面。JSP（Java

Server

Page）是Sun公司推出的开发语言。121三大服务器端脚本语言三者都提供在HTML代码中混合某种程序代码、由语言引擎解释执行程序代码的能力。在ASP、PHP、JSP环境下，HTML代码主要负责描述信息的显示样式，而程序代码则用来描述处理逻辑。122常用Web界面设计工具1．页面编辑器MicroSoft公司的FrontpageMacromedia公司的DreamweaverDreamweaver与Flash、Firework并称网页设计三剑客2．辅助工具AceHTMLPro6.0—全功能的HTML&JavaScript编辑器。AntennaWebDesignStudio—强大的可视化网页设计软件EasyHTML—简单的所见即所得的HTML编辑器，有固定、类似浏览器的界面。EasyWebEditor—是一个Web发布工具，允许不了解HTML而在所见即所得环境中编辑Web网页。123Dreamweaver的功能（1）网站管理功能。Dreamweaver不仅能够编辑网页，还能够实现本地站点与服务器站点之间的文件同步。它可以进行大型网站的开发。对于需要多人维护的大型网站，拥有文件操作权限方面的限制，具有一定的安全保护功能。（2）多种视图模式。Dreamweaver提供了代码、设计和拆分3种视图模式。设计视图可以满足用户的设计需求，即使不懂HTML语言，不会书写网页源代码，也能创建出漂亮的网页；（3）对象插入功能。Dreamweaver的插入面板中提供了常用字符、表格、框架、电子信箱和Flash文字等功能按钮，可以直接单击插入面板中的相关功能按钮，快速完成目标对象的制作。Dreamweaver的功能（4）属性设置方式。Dreamweaver提供了属性面板，属性面板中显示了当前对象的属性，可以直接在属性面板中设置和修改当前对象的属性。（5）CSS样式设置方式。Dreamweaver提供了CSS样式面板，通过CSS样式面板，快速创建、查找和修改目标样式。（6）内置大量的行为。Dreamweaver中内置了大量的行为，通过行为面板可以快速添加一些特殊效果，如网页的跳转、图像载入等。（7）提供了资源管理功能。在建立Dreamweaver站点后，Dreamweaver可以统一管理站点中的资源。可以通过资源面板来管理和使用这些资源。Dreamweaver对主流技术的支持（1）支持服务器环境。支持如IIS、Aphache和ColdFusion等一些主流的服务器环境，满足不同的服务器环境开发要求。（2）支持ASP、PHP和Java等主流技术。可以支持ASP、PHP和Java等主流技术，可以在Dreamweaver中直接使用这些技术开发相关动态网页。（3）支持数据库。在Dreamweaver中可以直接连接到数据库。正确设置服务器环境后，通过Dreamweaver可以直接连接到数据库中进行动态网页的制作。（4）支持多数的网页媒体。Dreamweaver可以完美支持常见的网页多媒体格式，如图片、

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论