人机交互与界面设计-第2章

《人机交互与界面设计》第2章Web应用基础----HTML语言和CSS2020/2/141《人机交互与界面设计》目录2.1WEB编程基础知识(教材第1章)2.2超文本标记语言HTML(教材第3章)2.3页面设计(教材第5章)2020/2/142《人机交互与界面设计》2.1WEB编程基础知识2.1.1什么是Web2.1.2Web的工作原理2.1.3Internet网络协议2.1.4IP地址、域名和URL2.1.5动态网页设计技术简介2.1.6.NET框架简介2020/2/143《人机交互与界面设计》2.1.1什么是Web•Web–全称为WorldWideWeb，缩写为。也称环球网、万维网、全球信息网等。•Web是一种体系结构，通过它可以访问分布于Internet主机上的链接文档。它有如下几层含义：–Web是Internet提供的一种服务。–Web不是Internet，Web是基于Internet、采用Internet协议的一种体系结构。–Web是存储在全世界Internet计算机中、数量巨大的文档的集合。–Web上的海量信息是由彼此关联的页面（Page）组成的。2020/2/144《人机交互与界面设计》2.1.1什么是Web–Web的内容保存在Web站点（Web服务器）中，用户可通过浏览器访问Web站点。–Web以一些简单的操作方式（如单击鼠标）连接全球范围的超媒体信息。2020/2/145《人机交互与界面设计》2.1.1什么是Web•几个概念：–超链接（hyperlink）：是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。–超文本（hypertext）：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。–超媒体（hypermedia）：超媒体是超文本和多媒体在信息浏览环境下的结合。用户可以通过链接激活一段声音，显示一个图形，甚至播放一段动画。2020/2/146《人机交互与界面设计》2.1.1什么是WebWeb的特点:（1）Web是一种超文本信息系统。（2）Web是图形化的和易于导航的。（3）Web与平台无关。（4）Web是分布式的。（5）Web具有新闻性。（6）Web是动态的、交互的。2020/2/147《人机交互与界面设计》2.1.2Web的工作原理•浏览器/服务器（Browser/Server，B/S）结构–客户端浏览器–浏览器是一种特定格式的文档阅读器，能根据网页内容对网页中的标记进行解释显示，并执行网页中包含的客户端脚本程序。–Web服务器–指安装了Web服务程序的计算机；–指Web服务器程序，可以管理各种Web文件，并为提出HTTP请求的浏览器提供响应。–数据库服务器2020/2/148Web的基本工作原理图《人机交互与界面设计》2.1.2Web的工作原理•客户机/服务器（Client/Server，C/S）结构–客户机–服务器•Web服务器的配置–配置服务器操作系统UNIX、WindowsServer2003、Linux等网络操作系统–安装专门的信息服务器程序IIS（InternetInformationServer）、Apache等2020/2/149《人机交互与界面设计》Web服务器提供服务的过程：用户在浏览器中输入一个网址，浏览器便向该网址所指向的Web服务器发出请求。Web服务器接到浏览器的请求后，把网址转换成页面所在服务器的文件路径名。如果网址指向的是普通的HTML文档，Web服务器将直接把它传送给浏览器。HTML文档中可能包含用Java、JavaScript、ActiveX、VBScript等编写的程序，服务器也将它们随HTML文档一起传送到浏览器，在浏览器所在的机器上执行。如果HTML文档中嵌有ASP程序，那么Web服务器就运行ASP程序，并将结果返回给浏览器。2020/2/14102.1.2Web的工作原理《人机交互与界面设计》•客户端编程–客户端编程就是客户端浏览器下载服务器上的程序来执行有关动态服务工作。–程序员把客户端代码编写到HTML文件中。–当用户提出对某个网页的请求时，这些客户端代码和HTML文件代码一起返回提出请求的浏览器。–程序在客户端浏览器上执行。•常见的客户端编程技术–VBScript–JavaScript–Javaapplet等。2020/2/14112.1.2Web的工作原理《人机交互与界面设计》•服务器端编程–程序员将编写的代码保存在服务器上。–当用户提出对某个网页的请求时，这个请求所要访问的页面代码都在服务器端执行，并把执行结果以HTML文件代码的形式传回浏览器，这样浏览器接收的只是程序执行的结果。•常见的服务器端编程技术–PHP–JSP–ASP–ASP.NET2020/2/14122.1.2Web的工作原理《人机交互与界面设计》2.1.3Internet网络协议TCP/IP协议•TCP/IP协议是一个协议集，其中最重要的是TCP（TransmissionControlProtocol）协议和IP（InternetProtocol）协议。•TCP/IP参考模型与OSI参考模型的对照2020/2/1413《人机交互与界面设计》2.1.3Internet网络协议HTTP协议•HTTP（HyperTextTransferProtocol）–专门为Web设计的协议–应用层协议–以TCP/IP协议集中的其他协议为基础–Web浏览器和服务器用HTTP协议来传输Web文档–HTTP基于客户端请求、服务器响应的工作模式•Web事务处理的步骤–客户端与服务器建立连接；–客户端向服务器提出请求；–如果请求被接受，则服务器送回响应，在响应中包括状态码和所需的文件；–客户端和服务器断开连接。2020/2/1414《人机交互与界面设计》•作用：使用户主机连入Internet上的Telnet服务器（称为远程主机）。•连接成功后，用户主机就成为该远程主机的一个终端，可以访问远程主机上的信息或运行远程主机上的程序。•用户使用远程主机的两种情况：•需要账号才能登陆•不需要账号即可登陆（开放式的）远程登录协议Telnet2.1.3Internet网络协议2020/2/1415《人机交互与界面设计》文件传输协议FTP•FTP（FileTransferProtocol）是一个客户-服务器协议，用于在两台计算机之间传输文件。•FTP既是一种文件传输协议，也是一种服务。提供FTP服务的设施叫做FTP服务器。•匿名FTP服务器−用户无须拥有口令和用户名就能与匿名FTP服务器实现连接并复制文件。2.1.3Internet网络协议2020/2/1416《人机交互与界面设计》2.1.4IP地址、域名和URL2.1.4.1IP地址•IP地址是识别Internet中主机及网络设备的唯一标识。•每个IP地址长度为4B（字节），共32位•IP地址由两部分组成：−网络地址−主机地址•点分十进制记法：−由4个用“.”分隔的十进制数组成−每个数不大于255−如202.119.106.2532020/2/1417《人机交互与界面设计》•IP地址可分成5类，其中常用的是如下3类：•A类：用于规模很大、主机数目非常多的网络。A类地址允许组成126个网络，每个网络可包含1700万台主机。•B类：用于中型和大型网络。B类地址允许组成16384个网络，每个网络可包含65000台主机。•C类：用于小型本地网络（LAN）。2.1.4.1IP地址2.1.4IP地址、域名和URL2020/2/1418net-id24位host-id24位net-id16位net-id8位IP地址中的网络号字段和主机号字段0A类地址host-id16位B类地址C类地址011host-id8位D类地址1110多播地址E类地址保留为今后使用111101《人机交互与界面设计》•TCP/IP协议中提供了域名服务系统（DNS），允许为主机分配字符名称，即域名。•域名不仅便于记忆，而且即使在IP地址发生变化的情况下，通过改变解析对应关系，域名仍可保持不变。•在网络通信时由DNS自动实现域名与IP地址的转换。•域是名字空间中一个可被管理的划分，域还可以继续划分为子域，如二级域、三级域等。•Internet中的域名采用分级命名，其基本结构如下：….三级域名.二级域名.顶级域名2.1.4.2域名2.1.4IP地址、域名和URL2020/2/1420《人机交互与界面设计》•统一资源定位器URL（UniformResourceLocator）通过定义资源位置的抽象标识来定位网络资源，其格式如下：信息服务类型://信息资源地址/文件路径–信息服务类型是指Internet的协议名，包括ftp（文件传输协议）、http（超文本传输协议）等。–信息资源地址指定一个网络主机的域名或IP地址。–在有些情况下，主机域名后还要加上端口号，域名与端口号之间用冒号（:）隔开。–一般情况下，服务器程序采用标准的保留端口号，因此在URL输入中可省略它们。2.1.4.3统一资源定位器URL2.1.4IP地址、域名和URL2020/2/1421《人机交互与界面设计》以下是一些URL的例子：://odysseus.circe.com:70://gopher.internet.com（gopher提供信息查询服务）news://comp.sys.novell（news提供网络新闻服务）wais://quake.think.com/directory-of-servers（提供检索数据库信息服务）2.1.4.3统一资源定位器URL2.1.4IP地址、域名和URL2020/2/1422《人机交互与界面设计》2.1.5动态网页设计技术简介•ASP（ActiveServerPages）是一种功能强大的服务器端脚本编程环境。ASP是微软公司的产品。•ASP可以结合HTML网页、ASP指令和ActiveX组件建立动态、交互且高效的Web服务器应用程序。•ASP中的命令和Script语句由服务器解释执行。•ASP是基于ActiveX技术的，它支持面向对象及可扩展的ActiveXServer组件。程序员可以用VisualC++、VisualBasic等语言创建特定功能的服务器端组件，以扩展ASP的应用功能。2.1.5.1ASP2020/2/1423《人机交互与界面设计》2.1.5动态网页设计技术简介ASP具有如下一些特点：（1）全嵌入HTML，与HTML及Script语言完美结合。（2）无须手动编译或链接程序。（3）面向对象，并可扩展ActiveXServer组件功能。（4）存取数据库轻松容易（使用ADO组件）。（5）可使用任何语言编写自己的ActiveXServer组件。（6）无浏览器兼容问题。（7）程序代码隐蔽，在客户端仅可看到由ASP输出的动态HTML文件。2.1.5.1ASP（续）2020/2/1424《人机交互与界面设计》2.1.5动态网页设计技术简介ASP的优点：（1）客户端浏览器接收到的是Web服务器执行后生成的一个纯粹的HTML文件，可被运行在任何平台上的浏览器执行。（2）ASP的脚本程序在服务器端执行，保证了程序代码的安全性。（3）程序执行完毕后，服务器仅将程序执行的结果返回给客户端浏览器，减轻了网络传输的负担。2.1.5.1ASP（续）2020/2/1425《人机交互与界面设计》2.1.5动态网页设计技术简介•PHP（HypertextPreprocessor，超文本预处理器）是一种跨平台的服务器端嵌入式脚本语言。•它是一种易于学习和使用的服务器端脚本语言，嵌入HTML文件，大量地借用C、Java和Perl语言的语法，并耦合PHP本身的特性，形成了自己的独特风格。•PHP支