《计算机网络应用教学课件》计算机网络应用之四.ppt

计算机网络应用 课程安排 u搜索引擎的原理与使用技巧 u文件传输共享与FTP服务器的配置和使用 u电子邮件原理与邮件客户端的配置和使用 uWWW服务、网页设计基础及WEB服务器的配置和使用 u流媒体基础知识及流媒体服务器的配置和使用 u路由器与网络连接共享等常用网络配置技巧 uWindows常用网络命令 实验报告一次(两项) Web的基本概念 nWeb是什么？ u Web是World Wide Web（WWW）的简称，译为万维网，它 是因特网上的一种分布式信息服务系统，并已成为集成 其他信息服务的门户。 万维网 站点 A 万维网 站点 C 万维网站点 E万维网站点 D 万维网站点 B 链接到 链接到 链接到 链接到 链接到 链接到 Web的基本概念 nWeb的特点 u1.Web是非线性的：想要了解网页上某一个主题的内容只 要在这个主题上点击一下，就可以跳转到关于这一主题 的网页上。文本不再象书一样是线性的，而是可以从一 个位置跳到另外的位置。 u2.Web是分布式的：Web可以使不同站点的信息在逻辑上 一体化，从用户看来这些信息是一体的。 u3.Web是多媒体化的：Web可以将数据、文本、图形、动 画、视频和音频集成在一起。 u4.Web是可以交互的：用户通过填写表单向服务器提交请 求，服务器可以根据用户的请求返回相应信息。 u5.Web是平台无关的：无论从Windows、Linux、UNIX、 Macintosh还是别的什么平台，都可以通过浏览器（ browser）访问Web。 Web的基本概念 nWeb技术发展简史 u1989年，欧洲粒子物理实验室（CERN）的Tim Berners- Lee构思了Web（万维网）。他提出了HTTP协议和HTML语 言，编写了世界上第一个Web服务器HTTPD和第一个浏览 器，并全部放在互联网上免费传播。 /People/Berners-Lee/ 1994年，欧洲粒子物理实验 室（CERN）和麻省理工学院 （MIT）签订协议成立World Wide Web Consortium （即 W3C，网址是）， 由Tim Berners-Lee任主席。 Web的基本概念 nWeb技术的应用现状 uWeb页面简单易用，推动了因特网的普及，加快了世界信息化的进程。 uWeb页面标准通用，简化了网络软件的开发，引起了软件业的革命。 uWeb 1.0 传统的主要为单向向用户传递信息的Web应用 uWeb 2.0 核心:互动、分享与关系（不是一个技术标准） The term Web 2.0 is commonly associated with web applications that facilitate interactive information sharing, interoperability, user-centered design and collaboration on the World Wide Web. 博客、百科、社交网站、P2P、IM uWeb 3.0 关于如何定义Web 3.0，及其所代表的含义的争论非常激烈 无处不联网：移动互联网 网络计算：SaaS软件即服务，网格计算、云计算 uWeb vs Native App Web：跨平台、即需即用、一致性、自由开放、实现和分发新产品新内容成本低 Native App: 性能、用户体验 Web的基本概念 nWeb系统的构成 uWeb服务器 uWeb浏览器 u超文本传输协议HTTP (HyperText Transfer Protocol) u超文本标记语言HTML(HyperText Markup Language) Web服务器Web浏览器 HTTP请求 HTTP响应 Web系统的工作过程 因特网 服务器 链接到URL的超链 HTTP 使用此 TCP 连接 浏览器 程序 服务器 程序 HTTP 客户 北京 邮电大学 建立 TCP 连接 释放 TCP 连接 HTTP 响应报文 响应文档 HTTP 请求报文 请求文档 用户点击鼠标后所发生的事件 (1) 浏览器分析超链指向页面的 URL。 (2) 浏览器向 DNS 请求解析 的 IP 地址 。 (3) 域名系统 DNS 解析出北京邮电大学服务器的 IP 地址。 (4) 浏览器与服务器建立 TCP 连接 (5) 浏览器发出取文件命令： GET index.html。 (6) 服务器给出响应，把文件 index.html 发给浏览器。 (7) TCP 连接释放。 (8) 浏览器显示“北京邮电大学主页”文件 index.html 中的所有 文本。 万维网必须解决的问题 (1) 怎样标志分布在整个因特网上的万维网文档？ n使用统一资源定位符 URL (Uniform Resource Locator)来标志万维网上的各种文档。 n使每一个文档在整个因特网的范围内具有唯一的标识 符 URL。 :/:/ ftp 文件传送协议 FTP http 超文本传送协议 HTTP 使用 HTTP 的 URL n使用 HTTP 的 URL 的一般形式 http:/:/ HTTP 的默认端口号是 80，通常可省略 n n http:/:/ 若再省略文件的项，则 URL 就指 到因特网上的某个主页(home page)。 万维网必须解决的问题 (2) 用何协议实现万维网上各种超链的链接？ n在万维网客户程序与万维网服务器程序之间进行 交互所使用的协议，是超文本传送协议 HTTP (HyperText Transfer Protocol)。 nHTTP 是一个应用层协议，它使用 TCP 连接进行 可靠的传送。 HTTP 有两类报文： n请求报文从客户向服务器发送请求报文。 n响应报文从服务器到客户的回答。 n由于 HTTP 是面向正文的(text-oriented)，因此 在报文中的每一个字段都是一些 ASCII 码串，因 而每个字段的长度都是不确定的。 万维网必须解决的问题 (3) 怎样使各种万维网文档都能在因特网上的各种计算 机上显示出来，同时使用户清楚地知道在什么地 方存在着超链？ n超文本标记语言 HTML (HyperText Markup Language)使得万维网页面的设计者可以很方便 地用一个超链从本页面的某处链接到因特网上的 任何一个万维网页面，并且能够在自己的计算机 屏幕上将这些页面显示出来。 n HTML 定义了许多用于排版的命令（即标签）。 nHTML 把各种标签嵌入到万维网的页面中。这样 就构成了所谓的 HTML 文档。HTML 文档是一种 可以用任何文本编辑器创建的 ASCII 码文件。 HTML 文档中标签的用法 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 HTML 文档开始 HTML 文档中标签的用法 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 首部开始 HTML 文档中标签的用法 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 标题 HTML 文档中标签的用法 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 首部结束 HTML 文档中标签的用法 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 主体开始 HTML 文档中标签的用法 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 1 级标题 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 HTML 文档中标签的用法 第一个段落 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 HTML 文档中标签的用法 第二个段落 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 HTML 文档中标签的用法 一个本地链接 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 HTML 文档中标签的用法 一个远程链接 HTML 文档中标签的用法 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 主体结束 HTML 文档中标签的用法 我的主页 我的计网实验示例网页 我的学号：* 我的姓名：* 我的第二个页面 我同学*的主页 HTML 文档结束 uWeb客户端 Internet Explorer （微软） Firefox (Mozilla) Safari (Apple) Chrome (Geogle) Opera (Opera) 遨游、搜狗浏览器、世界之窗 uWeb服务端 1. windows系统自带的IIS服务 2.Apache 3.Tomcat u网页制作工具 DreamWeaver等 WEB服务器安装与配置 n1.从如下网址下载Windows版 apache WEB服务器安装程序 u/download.cgi#apache22 n2.如果计算机已安装IIS的Web服务器，请进入控制面板管 理工具IIS默认web站点将其关闭。 u或者修改即将安装的Apache Web服务器工作在其它未使用的端口 n3.运行安装程序安装apache WEB服务器。 n4.安装成功后，打开IE输入地址 看能否出 现测试页面。 WEB服务器安装与配置 n5.若需修改页面文件存放路径可修改apache的配置文件 u主配置文件在安装路径下apache2.2confhttpd.conf文件，在 apache2.2confextra下面还有其它专项配置。 u配置文件中以#开头的行为注释行，仅起说明作用。 u修改httpd.conf第178行的DocumentRoot 将路径指定到自己主站 点的页面存储位置，请注意表示路径的斜杠用“/”而不是“” u修改httpd.conf第206行修改主站点的的目录为自己设定的目录 u修改第219行为 Options Indexes FollowSymLinks 此处为修改主站点目录的访问权限，Indexes:表示当用户访问 该目录时，如果用户找不到Directoryindex指定的主页文件，则 返回该目录下的文件列表给用户。 u还可修改confextrahttpd-languages.conf文件设置默认语言为 中文 DefaultLanguage zh-cn u修改完配置文件必须重启Web服务器才能生效 u在开始Apache HTTP Server2.2Configure Apache Server 里面有Test Configuration工具用来检查配置文件是否正确。如配 置文件正确Dos窗口会一闪而过，如错误会显示错误信息。 WEB系统进阶 n如何更简单快捷的设置页面显示格式？ CSS nCSS层叠样式表单（Cascading Style Sheets） u可以辅助HTML更简易地设置页面元素的显示格式，并解 决HTML无法解决的页面元素的精确定位、重叠、滤镜等 效果，已成为与HTML不可分割的一项技术。 u 核心目的实现页面内容与样式分离 uDIV+CSS DIV是HTML中的一个标签，表示它是一个“块”元素， 这个块中所含元素的特性有DIV标签的属性来控制。 WEB系统进阶 n实现数据交互的一种重要方式表单 u 是实现交互功能的主要方式，用户一 般通过form向服务器提交信息。 u可设以下属性： method设置提交表单内容到服务器的HTTP方法，可以 选get和post。get传送的数据量最大4000字符，表单 提交时表单域数值将在地址栏显示。post传送的数据 量不受限制，表单提交时表单域数值将不会在地址栏 显示。 action设置表单处理程序的URL。 text 设置单行文本域 password 设置密码域 file 文件输入域，这时form应设属性method=“post“ enctype=“multipart/form-data“ hidden 隐藏域，用于发送几个不用浏览者填写，但是处 理程序需要的数据，比如一份调查问卷的期次。 checkbox 设置复选框 radio 设置单选按钮，同名单选按钮只允许选择一个。 button 一般按钮 image 图像按钮，当被点击时，发送的是点击处的坐标 ， 形式如“name.x=x值，name.y=y值“。 reset 设置重置按钮，点此按钮将把所有表单域的值恢 复为缺省值。 submit 设置提交按钮，这是每个表单都有的，表示开始 提交信息，激活服务器端的脚本程序。 设置表单域，可设以下属性： type 可取如下值： name 表单域标识，作为“名称/取值对”的一部分传给服务器程序。 value 输入的值 对text和hidden类型，是表单域的缺省值。 对checkbox和radio类型，是被选择后传给CGI 程序的取值。 对reset和submit类型，是按钮上显示的文字。 checked 设置初始时被选中，无取值（适用于check、 radio类型） size 可视的文本输入字符数（适用于text、password 类型） maxlength 能输入的最大字符数（适于text、password类型） alt 输入域描述（适于text类型） src 图像的URL（适于image类型） tabindex tab键次序 参见示例代码：formdemo.html 表单域的主要属性 WEB系统进阶 n网页要想有一定的动态与交互性怎么办？ uQ：比如网站注册新用户时某一必填项没填，或者两次输入的密码不同 uS：在页面中嵌入一些简单的代码，即“脚本语言”程序 用户访问含有脚本程序的网页时，服务器将程序代码与其他内容一 起发给客户端，由客户端浏览器的脚本语言解释器解释执行。 一定程度上减少了客户机和服务器之间的通信开销，占用服务器的 资源少，执行灵活快速。 JavaScript与VBScript 万维网服务器 浏览器 程序 万维网客户 服务器 程序 HTTP 含有代码的 HTML文档 含有代码的 HTML文档 代码只在客户 端运行 WEB系统进阶- JavaScript nJavaScript u受Java启发而设计的，语法也和Java很相似 u但二者的本质是不同的 JavaScript是一种脚本语言。它可以嵌入在html文件 内，被客户端浏览器解释执行，用以实现不依赖Web服 务器的动态页面效果。 Java是一种面向对象的通用语言，它即可以做成 Applets嵌到网页中，也可以做独立应用程序 n参见示例网页 second.html WEB系统进阶动态页面技术 n服务器如何根据用户的需求动态生成页面？ uQ：比如登陆教务处成绩查询系统，看到的成绩页面需各不相同 uS：在服务器端放置一些程序代码，让其分析用户提交的参数，然后 从数据库等服务器获取相应业务数据，并动态的将网页和数据组合 拼装成网页的HTML传输到客户端浏览器 CGI-（Common Gateway Interface，公共网关接口）是第 一个用于建立动态网页的实用技术。使用CGI服务器调用某一个 程序来响应客户请求。被改进为FASTCGI ASP- （Active Server Pages）是Microsoft 于1996年推出 的动态页面生成技术。它通过在HTML文档中嵌套脚本代码生成动 态页面。升级的框架是ASP.NET，事先编译好，运行效率更高， 界面设计与程序设计分离，易用重用和维护。 JSP-（Java Server Pages）包含JAVA程序片的html文件， 在服务器端对这些JAVA程序片进行处理，然后将生成的HTML页 面返回给客户端。 PHP-（超文本预处理语言），是一种HTML内嵌式语言，在服 务器端执行嵌入HTML文档的脚本语言，然后将生成的HTML页 面返回给客户端。 为ApacheWEB服务器添加PHP支持 n下载PHP安装包 /download/ 注意需要下载PHP5.3 VC6 X86 Thread Safe的版本。 n想手动配置的可下载Zip格式。 n想自动配置的可下载Installer格式 为ApacheWEB服务器添加PHP支持 n运行PHP安装程序后同意协议并选择安装路径后出现如下界 面，供选择加入的Web服务器类型，选第一项，以模块形 式加入Apache 2.2.X版本的服务器 为ApacheWEB服务器添加PHP支持 n运行PHP安装程序后同意协议并选择安装路径后出现如下界 面，供选择加入的Web服务器类型，选第一项，以模块形 式加入Apache 2.2.X版本的服务器 为ApacheWEB服务器添加PHP支持 n点击下一步后出现如下页面供用户设定Apache Web服务 器的配置文件httpd.conf文件所在的文件夹，安装程序会 自动对httpd.conf进行修改。若Apache为默认安装的话文 件夹应指向： C:Program FilesApache Software FoundationApache2.2conf 为ApacheWEB服务器添加PHP支持 n安装成功后，重启Apache Web服务器，即可加载PHP模 块，实现对PH