第1章 基于开放平台的Web开发 《网页设计与编程》
本章内容 什么是万维网？ HTML简介 万维网的动态服务机制 Web服务器安装与测试 第1章 基于开放平台的Web开发环境
万维网、超文本、超媒体 万维网(World Wide Web，WWW，Web)是因特网所提供的服务项目之一 一个分布式超文本系统 它的文件可与同一机器上的其他文件的链 也可与在网络上的不同计算机上的文件链接 万维网也是个超媒体系统，它的文件可以包括声音、图像以及其它媒体如视频信息等 第1章 基于开放平台Web开发环境 39-
主导万维网发展的组织-W3C 第1章 基于开放平台Web开发环境 39-
万维网的四大件 因特网指全球公用计算机互联网络，是万维网存在的基础 除了因特网基础，万维网由四个部分组成：Web服务器、浏览器、HTTP和HTML 浏览器用于查看万维网的网页，网页可以包含文本、图片、动画、声音等元素，主要由HTML(Hypertext Markup Language)语言构成并驻留在世界各地的网站上。 第1章 基于开放平台Web开发环境 39-
请求 vs. 响应 用户上网浏览网页，实际上是发送请求到Web服务器上：请求它发送将某些些特定的文件（通常是超文本和图片） 作为响应，服务器把这些文件送到用户计算机上，而浏览器通过对HTML语言的解读，将Web服务器送来的文件展现在浏览器窗口 第1章 基于开放平台Web开发环境 39-
Web Site 、server 、document 网站就是指放在Web服务器(Web server)上的一系列网页文档（Web documents） 而Web服务器，就是在因特网上昼夜不停地运行某些特别的程序的计算机，使得世界各地的用户可随时对其进行访问 网页文档不同于网页文件，一般意义上的网页文档（或网页）是由一系列网页对象（Web Objects）或网页文件组成的 第1章 基于开放平台Web开发环境 39-
超文本（hypertext） 超文本可以通过文档中的超链接打开另一个相关的文档，把地理上分散存储的电子文档信息相互链接 超链接是内嵌在文本或都图像中的： 文本超链接在浏览器中通常带下划线 图像超链接有时不容易分辨，但鼠标指针碰到它，通常会变成手指状 第1章 基于开放平台Web开发环境 39-
万维网指南针--URL 万维网的使用非常简单，用户唯一的困难是确定主题的起始点 第1章 基于开放平台Web开发环境 39-
URL的结构 统一资源定位器（Uniform Resource Locator，URL）是专为标识因特网上资源位置而设的一种编址方式 传输协议://主机IP地址或主机域名/资源所在路径和文件名 第1章 基于开放平台Web开发环境 39-
URL支持的常用协议 URL用于定位和标识因特网服务或文件： http：定位在Web服务器上文件 file：定位在本地主机或局域网上文件 ftp：定位在FTP服务器上文件 telnet：将用户连接到一个支持Telnet远程登录的服务器上 第1章 基于开放平台Web开发环境 39-
如何理解URL URL结构类似于DOS中的目录。例如：http://www.ctec.xjtu.edu/bbs/index.htm 如http表示超文本传输协议，相当于驱动器符号； www.ctec.xjtu.edu是站点名，类似根目录； bbs为子目录 index.html为文件名 标识因特网上的资源位置可用下列三种方式： IP地址：例如“202.117.35.170” 域名地址：例如“ctec.xjtu.edu.cn” URL：例如“http://www.sina.com.cn” 第1章 基于开放平台Web开发环境 39-
HTTP协议 浏览器向服务器请求网页服务，服务器响应请求向用户发送网页，都需要遵循一定的规程或协议，而超文本传输协议（HyperText Transfer Protocol，HTTP）就是用来在因特网上传送超文本的通信协议 HTTP是运行是TCP/IP协议的应用协议之一，是因特网上应用最为频繁的协议 第1章 基于开放平台Web开发环境 39-
浏览器、Web服务器、HTTP 浏览器是实现HTTP协议的客户端(client)程序，当用户在浏览器地址栏中输入一个URL或点击一个超链接时，浏览器就向服务器发出了HTTP请求（首先发言者） Web服务器（Server）收到请求后，进行相关文档的检索并以HTTP规定的格式送回所要求的文件或其他相关信息 用户计算机上的浏览器负责解释和显示 第1章 基于开放平台Web开发环境 39-
HTML的起源 HTML是万维网的基本规范之一，最初由蒂姆.本尼斯李(Tim Berners-Lee)在1989制定的 第1章 基于开放平台Web开发环境 39-
HTML必须具备的特点 独立于平台（即计算机硬件和操作系统）：文档可以在具有不同性能（即字体、图形和颜色差异）的计算机上以相似的形式显示文档内容 超文本：允许文档中的任何文字或词组参照另一文档，这个特性将允许用户在不同计算机中的文档之间及文档内部的漫游。 精确的结构化文档：以支持更高级别应用： HTML文档和其它格式文档间互相转换 搜索引擎。 第1章 基于开放平台Web开发环境 39-
HTML文档组成 在万维网中传送的文档，绝大部分使用超文本标记语言编写，称为HTML文档（ HTML document）。 一般的HTML文档是由若干对象（objects）构成的，其中必须有一个基本HTML文件(base HTML file)，其他对象可以是图像、声音、视频等各种与基本文件存在链接关系的文件。 在基本HTML文件中，只允许两种元素存在，一种是所谓HTML标记，另一种则是普通文本 第1章 基于开放平台Web开发环境 39-
HTML文档结构 <HTML> <!--超文本文件开始--> <HEAD> <!--首部元素开始--> <TITLE>网页的标题</TITLE> </HEAD> <BODY> <!--主体元素开始--> 这里是网页主体内容 </BODY> <!--主体元素结束--> </HTML> <!--超文本文件结束--> 第1章 基于开放平台Web开发环境 39-
有关HTML标记的一些约定 超文本标记用“<”和“>”表示 超文本标记一般成对出现，用带“/”的标记表示结束 成对出现的超文本标记亦称容器元素 但有些标记只有起始标记而没有结束标记(亦称空元素)。 超文本标记可以忽略字母的大小写 第1章 基于开放平台Web开发环境 39-
因特网的主要应用模式 Client/Server:因特网的主要应用范式 Browser/Server：因特网上的最主要应用形式，也就是万维网 HTML：万维网上的应用语言 第1章 基于开放平台Web开发环境 39-
万维网应用的发展 万维网发明已经有近20年的历史，它大大促进了网络的应用与普及 随着应用的深入，万维网已经从一个信息发布的平台，逐步演变为信息处理平台 社会大量利用万维网技术来构建服务于企事业单位内部/外部的信息系统 万维网技术从静态内容发展到动态的交互 第1章 基于开放平台Web开发环境 39-
Web服务平台应用的三种主要形式 静态网页(HTML) 客户端动态网页( Active Document,下载程序到客户端主机执行, 以DHTML为代表) 服务器端动态网页(Dynamic Document，在服务器端执行程序，把结果送给浏览器，以 ASP、JSP、PHP为代表） 第1章 基于开放平台Web开发环境 39-
Web服务平台应用的三种形式（图示） 第1章 基于开放平台Web开发环境 39-
DHTML vs. ASP/JSP/PHP DHTML存在比较严重的厂家标准冲突，统一标准存在障碍，导致不同厂家的浏览器不能得到相同的效果 ASP/JSP/PHP主要在服务器端执行，输出结果为HTML, 不存在标准冲突，成为e-Business的主要解决方案 第1章 基于开放平台Web开发环境 39-
普通网站的基本组件 实用Web站点一般都需要以下基本组件： Web 服务器 数据库服务器 静态和动态网页 其他相关服务器（Mail、FTP等） 中间件（常见JSP/ASP/PHP实现） 第1章 基于开放平台Web开发环境 39-
普通网站的基本组件（图示） 第1章 基于开放平台Web开发环境 39-
Apache Friends Apache server是世界上Web服务器的No.1 Apache Friends 整合了一批与网站服务相关的服务器软件（FTP, Mail, DBMS），其他应用软件（Webliazer）和应用示例 For windows (xampp) for Linux (lampp) 第1章 基于开放平台Web开发环境 39-
Apache Friends的用途 方便Web服务平台的安装、测试 动态网页的设计、测试 网站数据库的设计、测试 进行课件：netclass的安装、课程举例 Web应用软件和信息的调试和评估 第1章 基于开放平台Web开发环境 39-
Apach Friends(xampp) XAMPP是Apache Friends for windows Version 1.0在windows下的实现版本 XAMPP是整合性的Apache套件，包括了： Apache(web server) MySQL(Database) PHP, Perl (动态网页设计语言) FTP server phpMyAdmin（MySQL的Web客户端） 利用XAMPP可以在Windows下能快速完成网站架设 构建PHP和网络数据库实验环境 第1章 基于开放平台Web开发环境 39-
Xampp 1.0的安装 获取XAMPP的压缩包文件，解压缩至指定目录(d:\xampp)。 双击 "setup_xampp.bat“①开始安xampp 选择 1 安装 MOD_PERL ,否则选择2。 双击"apache_start“②启动Apache 服务, 双击" mysql_start" ③启动MySQL. 打开浏览器输入http://127.0.0.1 或http://localhost 检查xampp的测试页面 第1章 基于开放平台Web开发环境 39-
安装注意事项： For Windows的Apache Friends必须安装任意盘符的根目录下，例如d:\xampp XAMPP1.0有四个服务器启动作业：分别是Aapche_start.bat(Web)②、mysql_start.bat(DBMS)③、filezilla_start.bat(FTP)④、mercury_start.bat(Mail)⑤ Web服务器测试地址： http://localhost 或 http://127.0.0.1 第1章 基于开放平台Web开发环境 39-
Apache Friends的目录和作业 第1章 基于开放平台Web开发环境 39-
Apache Friends常用目录 Apache ⑧//Web Server（配置文件、程序） Htdocs ⑨//Web 发布目录（网页、文件） Anonymous ⑩//FTP发布、上传 Mysql ⑾//DBMS (Server、Native Client) PHPmyadmin ⑿// DBMS web Client 第1章 基于开放平台Web开发环境 39-
安装网络课件：Netclass Netclass是为方便学习使用的一套电子课件，内容包括静态网页、动态网页、数据库的基本内容 所有内容可以连接在服务器环境下联机运行、并观测代码 安装方法：Netclass.rar解压到xampp/ htdoc/ netclass目录下 测试和使用：http://localhost/netclass/ 第1章 基于开放平台Web开发环境 39-
Netclass的应用界面 第1章 基于开放平台Web开发环境 39-
Q&A:我的AF为何不启动? 检查原因：在dos下，键入d:\xampp\Apache_start.bat 常见原因： 观察系统的报错信息。 80端口被占用（用Netstat -abn检查原因）,查出相关进程，使用“任务管理器”关闭 配置文件修改有误，改正错误 第1章 基于开放平台Web开发环境 39-
Q&A:xampp如何卸载？ 如果想要卸载xampp? 这是xampp的优点,可不写入注册表,安装和卸载都十分方便 注意:删除之前但是以前请关闭 apache 和 mysql两个命令窗口。 第1章 基于开放平台Web开发环境 39-
Q&A:我发的中文网页见乱码？ 由于XAMPP1.0的默认Latin-1码，如果使用中文网页，需修改Apache的配置文件 请使用编辑器修改： C:\xampp\apache\conf\httpd.conf文件中 将： AddDefaultCharSet ISO-8859-1 改为： AddDefaultCharSet GB2312 第1章 基于开放平台Web开发环境 39-
本章小结 什么是万维网？ HTML发展历史 万维网的动态服务机制 基于Windows的Web服务器安装与测试