数字媒体技术课件：第07-1章 数字媒体的Web集成与应用.ppt

1、2022-1-201第七章第七章 数字媒体的数字媒体的WebWeb集成与应用集成与应用 华中师范大学清华大学出版社22022-1-20第七章第七章 数字媒体的数字媒体的WebWeb集成与应用集成与应用 7.1 HTML7.1 HTML基础基础 7.2 JavaScript7.2 JavaScript基础基础 7.3 Web7.3 Web的工作原理的工作原理 7.4 7.4 网站的设计与规划网站的设计与规划 7.5 7.5 网站的创作网站的创作 7.6 7.6 网站的测试与发布网站的测试与发布32022-1-207.1 HTML基础7.1.1 HTML7.1.1 HTML概述概述 HTML是英文

2、Hypertext Markup Language的缩写，中文的意思是超文本标记语言。 42022-1-207.1 HTML基础7.1.2HTML7.1.2HTML文档的结构文档的结构一个HTML文档的一般结构形式如下： 我的第一个网页 这是html文档的主体部分，也就是网页的内容。 52022-1-207.1 HTML基础7.1.3 HTML7.1.3 HTML中的标签中的标签 文字基本标签文字基本标签 页面布局标签页面布局标签 插入图像标签插入图像标签 插入超链接插入超链接 表格表格62022-1-201、文字基本标签（1 1）标题文字标签）标题文字标签 标题示例 最大的标题 使用h3的标

3、题 最小的标题 72022-1-201、文字基本标签（2 2）文字的字体、大小和颜色标签）文字的字体、大小和颜色标签 粗体文字示例 斜体文字示例 下划线文字示例 82022-1-202、页面布局标签页面布局标签 （1 1）换行标签）换行标签 换行标签是个单标签，也叫空标签，不包含任何内容，在HTML文件中的任何位置只要使用了标签，当文件显示在浏览器中时，该标签之后的内容将从下一行显示。例如在图7-4所示的效果中就使用了标签。92022-1-202、页面布局标签页面布局标签 （2 2）分段标签）分段标签 由和标签所标识的文字，代表同一个段落的文字。分段标签的一般格式为： 段落内容 其中，alig

4、n是标签的属性，属性值可以是left、center和right之一，它们分别用来设置段落文字的左对齐、居中对齐和右对齐。102022-1-203、插入图像标签插入图像标签 HTML支持的图像文件格式有gif、jpeg等，在HTML文档中插入图像文件要使用标签，其具体使用格式为： 其中src是source的英文缩写，“图像文件名”是图像文件的URL地址； 112022-1-203、插入图像标签插入图像标签如下的如下的HTMLHTML文档在浏览器中显示的效果如图所示。文档在浏览器中显示的效果如图所示。 插入图像文件示例 122022-1-204、插入超链接插入超链接 在HTML中，简单的链接标签是

5、。它的基本语法是： . 或 . 其中href是英文hypertext reference的写。例如，利用记事本输入下面的HTML文档。132022-1-204、插入超链接插入超链接如下的如下的HTMLHTML文档在浏览器中显示的效果如图所示。文档在浏览器中显示的效果如图所示。 HTML超链接 HTML超链接示例 我的第一个网页 | 网易 | 142022-1-205、表格表格 一张表格有许多表元素组成，例如表的标题、表行、表列标题等。HTML为表格规定了表元素标签和属性。一般的HTML文档表格结构如下所示： 第一行第一个单元格 第一行第二个单元格 152022-1-205、表格表格162022

6、-1-207.2 JavaScript基础 7.2.1 JavaScript7.2.1 JavaScript简介简介 JavaScriptJavaScript是由是由 NetscapeNetscape公司开发的一种脚本语公司开发的一种脚本语言，它是适应动态网页制作的需要而诞生的一种广言，它是适应动态网页制作的需要而诞生的一种广泛地使用于泛地使用于InternetInternet网页制作上编程语言。网页制作上编程语言。 在在HTMLHTML基础上，使用基础上，使用JavaScriptJavaScript可以开发交互式可以开发交互式WebWeb网页。网页。JavaScriptJavaScript的

7、出现使得网页和用户之间的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容网页包含更多活跃的元素和更加精彩的内容。172022-1-207.2 JavaScript基础 7.2.2 7.2.2 JavaScriptJavaScript语言语言 变量变量 运算符运算符 表达式表达式 语句语句 函数函数 对象对象 事件事件182022-1-207.2 JavaScript基础 7.2.1 JavaScript7.2.1 JavaScript在网页中的用法在网页中的用法 在在HTMLHTML中嵌入中嵌入

8、JavaScriptJavaScript 引用方式引用方式192022-1-201、在在HTMLHTML中嵌入中嵌入JavaScript JavaScript 如下的如下的HTMLHTML文档在浏览器中显示的效果如图所示。文档在浏览器中显示的效果如图所示。 JavaScript示例 202022-1-202、引用方式引用方式 如果已经存在一个如果已经存在一个JavaScriptJavaScript源文件（以源文件（以jsjs为扩展为扩展名），则可以采用这种引用的方式。其基本格式如下：名），则可以采用这种引用的方式。其基本格式如下： script language=JavaScript 例如：如

9、下的HTML文档引用了script.js文件。 链接JavaScripte代码212022-1-207.3 Web7.3 Web的工作原理的工作原理 WebWeb全称为全称为World Wide WebWorld Wide Web，简称简称WWWWWW，称为万维网或全球信，称为万维网或全球信息网。息网。WebWeb是目前是目前InternetInternet上最上最为流行、最受欢迎的一种信息检为流行、最受欢迎的一种信息检索和浏览服务索和浏览服务。 WebWeb的工作原理是基于客户的工作原理是基于客户/ /服务器计算模型，由服务器计算模型，由WebWeb浏览器浏览器（客户机）和（客户机）和Web

10、Web服务器构成，服务器构成，两者之间采用超文本传输协议两者之间采用超文本传输协议（HTTPHTTP）进行通信。）进行通信。WebWeb工作原工作原理示意图如右图所示。理示意图如右图所示。客户机 HTTP 响应 HTTP 请求 Internet Web 服务器 222022-1-207.3 Web7.3 Web的工作原理的工作原理7.3.1 Web7.3.1 Web服务器服务器 World Wide WebWorld Wide Web上的所有内容都存储在世界上某处上的所有内容都存储在世界上某处的的WebWeb服务器上，服务器上，WebWeb服务器是运行在计算机上的一服务器是运行在计算机上的一种

11、软件，常见的种软件，常见的WebWeb服务器有服务器有ApacheApache和和IISIIS（Internet Information ServiceInternet Information Service）。它可以管理）。它可以管理各种各种WebWeb文件，并为提出文件，并为提出HTTPHTTP请求的浏览器提供请求的浏览器提供HTTPHTTP响应。客户机给响应。客户机给WebWeb服务器发送页面请求，服务器发送页面请求，WebWeb服务器根据请求，把相应的页面发回给客户机，由服务器根据请求，把相应的页面发回给客户机，由浏览器负责进行浏览浏览器负责进行浏览。232022-1-207.3 We

12、b7.3 Web的工作原理的工作原理7.3.2 7.3.2 客户端程序客户端程序 客户端程序是运行在计算机上的一个软件，最常用客户端程序是运行在计算机上的一个软件，最常用的是浏览器（如的是浏览器（如InternetInternet ExplorerExplorer），它是一种），它是一种专用程序，允许用户输入专用程序，允许用户输入 URL (Uniform Resource URL (Uniform Resource LocatorLocator，统一资源定位，统一资源定位) ) 地址。它负责向服务器地址。它负责向服务器发送请求，并显示服务器返回的发送请求，并显示服务器返回的WebWeb页页。

13、242022-1-207.3 Web7.3 Web的工作原理的工作原理7.3.3 HTTP7.3.3 HTTP协议协议 HTTPHTTP协议即超文本传输协议协议即超文本传输协议(Hypertext Transfer (Hypertext Transfer Protocol)Protocol)，是在，是在InternetInternet中进行信息传送的协议。中进行信息传送的协议。HTTPHTTP协议是基于请求协议是基于请求/ /响应模式的响应模式的。 浏览器默认的就是使用浏览器默认的就是使用HTTPHTTP协议，当在浏览器的地协议，当在浏览器的地址栏中输入一个址栏中输入一个URLURL或者是单击

14、一个超链接时，浏或者是单击一个超链接时，浏览器就会通过览器就会通过HTTPHTTP协议，把协议，把WebWeb服务器上的网页代服务器上的网页代码下载下来，并显示成相应的网页。码下载下来，并显示成相应的网页。252022-1-207.4 7.4 网站的设计与规划网站的设计与规划 7.4.17.4.1网站设计理念网站设计理念 7.4.27.4.2网站设计的定位网站设计的定位7.4.37.4.3网页制作的规划网页制作的规划7.4.47.4.4网页设计的布局理念网页设计的布局理念 网页布局大致可分为网页布局大致可分为“国国”字型、拐角字型、拐角型、标题正文型、左右框架型、上下框架型、型、标题正文型、左

15、右框架型、上下框架型、综合框架型、封面型等。综合框架型、封面型等。262022-1-207.5 7.5 网站的创作网站的创作 7.5.1 7.5.1 网站创作的准备阶段网站创作的准备阶段 7.5.27.5.2网站创作过程网站创作过程 站点的建立站点的建立 页面内容的制作页面内容的制作272022-1-207.6 7.6 网站的测试与发布网站的测试与发布 7.6.1 7.6.1 网站测试网站测试 在将站点上传到服务器并可供浏览之前，我们在将站点上传到服务器并可供浏览之前，我们首先要在本地对其进行测试。这一过程应该确保页首先要在本地对其进行测试。这一过程应该确保页面在目标浏览器中如预期的那样显示和

16、工作，而且面在目标浏览器中如预期的那样显示和工作，而且没有断开的链接没有断开的链接 282022-1-207.6 7.6 网站的测试与发布网站的测试与发布 7.6.2 7.6.2 网站发布网站发布 经过详细的检测，并完成最后的站点编辑工经过详细的检测，并完成最后的站点编辑工作后就可以发布站点了。发布站点之前，首先需作后就可以发布站点了。发布站点之前，首先需要申请站点的域名和租用服务器空间，然后通过要申请站点的域名和租用服务器空间，然后通过FTPFTP工具等工具把网站上传到服务器上，这样就可工具等工具把网站上传到服务器上，这样就可以让每一个角落的访问者浏览到站点的内容了。以让每一个角落的访问者浏

17、览到站点的内容了。292022-1-20练习与思考练习与思考1.1.解释解释下面一些术语：下面一些术语：WebWeb、HTTPHTTP、URLURL、网站、网站2.2.简述简述WebWeb的基本工作过程。的基本工作过程。3.3.什么什么是是HTMLHTML？HTMLHTML有什么特点？有什么特点？4.4.利用利用HTMLHTML编写一个包括文本、图片、超链接的网页编写一个包括文本、图片、超链接的网页并在浏览器中查看。并在浏览器中查看。5.5.设计设计一个包含有一个包含有3-53-5个页面的网站，对网页的内容进个页面的网站，对网页的内容进行规划，然后采用适当的制作软件进行创作。行规划，然后采用适当的制作软件进行创作。