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

《人机交互与界面设计_第2章》由会员分享，可在线阅读，更多相关《人机交互与界面设计_第2章（142页珍藏版）》请在金锄头文库上搜索。

1、第2章 Web应用基础-HTML语言和CSS,2018/9/18,1,目 录,2.1 WEB编程基础知识(教材第1章) 2.2 超文本标记语言HTML (教材第3章) 2.3 页面设计(教材第5章),2018/9/18,2,2.1 WEB编程基础知识,2.1.1 什么是Web 2.1.2 Web的工作原理 2.1.3 Internet网络协议 2.1.4 IP地址、域名和URL 2.1.5 动态网页设计技术简介 2.1.6 .NET框架简介,2018/9/18,3,2.1.1 什么是Web,Web 全称为World Wide Web，缩写为WWW。也称环球网、万维网、全球信息网等。Web是一种

2、体系结构，通过它可以访问分布于Internet主机上的链接文档。它有如下几层含义： Web是Internet提供的一种服务。 Web不是Internet，Web是基于Internet、采用Internet协议的一种体系结构。 Web是存储在全世界Internet计算机中、数量巨大的文档的集合。 Web上的海量信息是由彼此关联的页面（Page）组成的。,2018/9/18,4,2.1.1 什么是Web,Web的内容保存在Web站点（Web服务器）中，用户可通过浏览器访问Web站点。 Web以一些简单的操作方式（如单击鼠标）连接全球范围的超媒体信息。,2018/9/18,5,2.1.1 什么是We

3、b,几个概念： 超链接（hyperlink）：是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。 超文本（hypertext）：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。 超媒体（hypermedia）：超媒体是超文本和多媒体在信息浏览环境下的结合。用户可以通过链接激活一段声音，显示一个图形，甚至播放一段动画。,2018/9/18,6,2.1.1 什么是Web,Web的特点: （1）Web是一种超文本信息系统。 （2）Web是图形化的和易于导航的。 （3）Web与平

4、台无关。 （4）Web是分布式的。 （5）Web具有新闻性。 （6）Web是动态的、交互的。,2018/9/18,7,2.1.2 Web的工作原理,浏览器/服务器（Browser/Server，B/S）结构客户端浏览器 浏览器是一种特定格式的文档阅读器，能根据网页内容对网页中的标记进行解释显示，并执行网页中包含的客户端脚本程序。Web服务器指安装了Web服务程序的计算机；指Web服务器程序，可以管理各种Web文件，并为提出HTTP请求的浏览器提供响应。数据库服务器,2018/9/18,8,Web的基本工作原理图,2.1.2 Web的工作原理,客户机/服务器（Client/Server，C/S）

5、结构 客户机 服务器 Web服务器的配置配置服务器操作系统UNIX、Windows Server 2003、Linux等网络操作系统安装专门的信息服务器程序IIS（Internet Information Server）、 Apache等,2018/9/18,9,Web服务器提供服务的过程： 用户在浏览器中输入一个网址，浏览器便向该网址所指向的Web服务器发出请求。 Web服务器接到浏览器的请求后，把网址转换成页面所在服务器的文件路径名。 如果网址指向的是普通的HTML文档，Web服务器将直接把它传送给浏览器。 HTML文档中可能包含用Java、JavaScript、ActiveX、VBScr

6、ipt等编写的程序，服务器也将它们随HTML文档一起传送到浏览器，在浏览器所在的机器上执行。 如果HTML文档中嵌有ASP程序，那么Web服务器就运行ASP程序，并将结果返回给浏览器。,2018/9/18,10,2.1.2 Web的工作原理,客户端编程 客户端编程就是客户端浏览器下载服务器上的程序来执行有关动态服务工作。 程序员把客户端代码编写到HTML文件中。 当用户提出对某个网页的请求时，这些客户端代码和HTML文件代码一起返回提出请求的浏览器。 程序在客户端浏览器上执行。 常见的客户端编程技术 VBScript JavaScript Java applet等。,2018/9/18,11,

7、2.1.2 Web的工作原理,服务器端编程 程序员将编写的代码保存在服务器上。 当用户提出对某个网页的请求时，这个请求所要访问的页面代码都在服务器端执行，并把执行结果以HTML文件代码的形式传回浏览器，这样浏览器接收的只是程序执行的结果。 常见的服务器端编程技术 PHP JSP ASP ASP.NET,2018/9/18,12,2.1.2 Web的工作原理,2.1.3 Internet网络协议,TCP/IP协议,TCP/IP协议是一个协议集，其中最重要的是TCP（ Transmission Control Protocol ）协议和IP（ Internet Protocol ）协议 。TCP/

8、IP参考模型与OSI参考模型的对照,2018/9/18,13,2.1.3 Internet网络协议,HTTP协议,HTTP（HyperText Transfer Protocol）专门为Web设计的协议应用层协议以TCP/IP协议集中的其他协议为基础Web浏览器和服务器用HTTP协议来传输Web文档HTTP基于客户端请求、服务器响应的工作模式Web事务处理的步骤客户端与服务器建立连接；客户端向服务器提出请求；如果请求被接受，则服务器送回响应，在响应中包括状态码和所需的文件；客户端和服务器断开连接。,2018/9/18,14,作用：使用户主机连入Internet上的Telnet服务器（称为远程主

9、机）。连接成功后，用户主机就成为该远程主机的一个终端，可以访问远程主机上的信息或运行远程主机上的程序。 用户使用远程主机的两种情况： 需要账号才能登陆 不需要账号即可登陆（开放式的）,远程登录协议Telnet,2.1.3 Internet网络协议,2018/9/18,15,文件传输协议FTP,FTP（File Transfer Protocol）是一个客户-服务器协议，用于在两台计算机之间传输文件。FTP既是一种文件传输协议，也是一种服务。 提供FTP服务的设施叫做FTP服务器。匿名FTP服务器 用户无须拥有口令和用户名就能与匿名FTP服务器实现连接并复制文件。,2.1.3 Internet网

10、络协议,2018/9/18,16,2.1.4 IP地址、域名和URL,2.1.4.1 IP地址,IP地址是识别Internet中主机及网络设备的唯一标识。每个IP地址长度为4 B（字节），共32位IP地址由两部分组成：网络地址主机地址点分十进制记法：由4个用“.”分隔的十进制数组成每个数不大于255如202.119.106.253,2018/9/18,17,IP地址可分成5类，其中常用的是如下3类： A类：用于规模很大、主机数目非常多的网络。A类地址允许组成126个网络，每个网络可包含1700万台主机。 B类：用于中型和大型网络。B类地址允许组成16 384个网络，每个网络可包含65 000台

11、主机。 C类：用于小型本地网络（LAN）。,2.1.4.1 IP地址,2.1.4 IP地址、域名和URL,2018/9/18,18,net-id 24 位,host-id 24 位,net-id 16 位,net-id 8 位,IP 地址中的网络号字段和主机号字段,0,A 类地址,host-id 16 位,B 类地址,C 类地址,0,1,1,D 类地址,1 1 1 0,多 播 地 址,E 类地址,保 留 为 今 后 使 用,1 1 1 1,0,1,TCP/IP协议中提供了域名服务系统（DNS），允许为主机分配字符名称，即域名。域名不仅便于记忆，而且即使在IP地址发生变化的情况下，通过改变解析对

12、应关系，域名仍可保持不变。在网络通信时由DNS自动实现域名与IP地址的转换。域是名字空间中一个可被管理的划分，域还可以继续划分为子域，如二级域 、三级域等。Internet中的域名采用分级命名，其基本结构如下： .三级域名.二级域名.顶级域名,2.1.4.2 域名,2.1.4 IP地址、域名和URL,2018/9/18,20,统一资源定位器URL（Uniform Resource Locator）通过定义资源位置的抽象标识来定位网络资源，其格式如下： :/是指Internet的协议名，包括ftp（文件传输协议）、http（超文本传输协议）等。指定一个网络主机的域名或IP地址。 在有些情况下，主

13、机域名后还要加上端口号，域名与端口号之间用冒号（:）隔开。 一般情况下，服务器程序采用标准的保留端口号，因此在URL输入中可省略它们。,2.1.4.3 统一资源定位器URL,2.1.4 IP地址、域名和URL,2018/9/18,21,以下是一些URL的例子： http: / http: /www.whitehouse.gov telnet: /:70 ftp: /ftp.w3.org/pub/www/doc gopher: / （gopher提供信息查询服务） news: /comp.sys.novell （news提供网络新闻服务） wais: / （提供检索数据库信息服务）,2.1.4.

14、3 统一资源定位器URL,2.1.4 IP地址、域名和URL,2018/9/18,22,2.1.5 动态网页设计技术简介,ASP（Active Server Pages）是一种功能强大的服务器端脚本编程环境。ASP是微软公司的产品。ASP可以结合HTML网页、ASP指令和ActiveX组件建立动态、交互且高效的Web服务器应用程序。ASP中的命令和Script语句由服务器解释执行。ASP是基于ActiveX技术的，它支持面向对象及可扩展的ActiveX Server组件。程序员可以用Visual C+、Visual Basic等语言创建特定功能的服务器端组件，以扩展ASP的应用功能。,2.1.

15、5.1 ASP,2018/9/18,23,2.1.5 动态网页设计技术简介,ASP具有如下一些特点： （1）全嵌入HTML，与HTML及Script语言完美结合。 （2）无须手动编译或链接程序。 （3）面向对象，并可扩展ActiveX Server组件功能。 （4）存取数据库轻松容易（使用ADO组件）。 （5）可使用任何语言编写自己的ActiveX Server组件。 （6）无浏览器兼容问题。 （7）程序代码隐蔽，在客户端仅可看到由ASP输出的动态HTML文件。,2.1.5.1 ASP（续）,2018/9/18,24,2.1.5 动态网页设计技术简介,ASP的优点： （1）客户端浏览器接收到的

16、是Web服务器执行后生成的一个纯粹的HTML文件，可被运行在任何平台上的浏览器执行。 （2）ASP的脚本程序在服务器端执行，保证了程序代码的安全性。 （3）程序执行完毕后，服务器仅将程序执行的结果返回给客户端浏览器，减轻了网络传输的负担。,2.1.5.1 ASP（续）,2018/9/18,25,2.1.5 动态网页设计技术简介,PHP（Hypertext Preprocessor，超文本预处理器）是一种跨平台的服务器端嵌入式脚本语言。它是一种易于学习和使用的服务器端脚本语言，嵌入HTML文件，大量地借用C、Java和Perl语言的语法，并耦合PHP本身的特性，形成了自己的独特风格。PHP支持目前绝大多数的数据库，Web开发者使用PHP能够快速地写出生成动态网页的脚本代码。PHP是完全免费的，可以从PHP官方网站（http:/）自由下载，可以不受限制地获得源代码，并可加入自己需要的功能。,