Download presentation
Presentation is loading. Please wait.
1
第2章 XHTML语言基础 标记语言简介 1 XHTML文档基础 2 文本及段落标记 3 列表标记 4 超链接 5
2
第2章 XHTML语言基础 在网页中使用图像 6 使用表格 7 使用框架 8 使用表单 9 网页中的多媒体对象 10
3
第2讲 XHTML语言基础（一） 学习目标 了解HTML和XHTML标记语言； 理解XHTML标记、属性及其语法规范；
掌握常见的网页文本标记、段落标记及其属性的用法； 掌握列表标记及其属性的用法； 掌握超链接标记的用法以及不同超链接的创建方法。
4
第2章 XHTML语言基础 学习目标 了解常用的Web图像格式。 掌握在网页中插入图像的方法和使用Web图像的基本原则。
掌握在网页中创建和使用表格的方法 掌握使用框架进行网页布局的方法。
5
第2章 XHTML语言基础 学习目标 理解表单及其作用。 掌握表单及常用表单控件的创建方法。 掌握表单网页的制作方法。
掌握如何在网页中插入常见的多媒体对象。
6
2.1 标记语言简介 2.1.1 通用标准化标记语言——SGML 1969年，IBM公司开发了通用标记语言（ GML ）
2.1 标记语言简介 2.1.1 通用标准化标记语言——SGML 1969年，IBM公司开发了通用标记语言（ GML ） 1978年，ANSI（American National Standards Institute，美国国家标准学会）的CLPTC委员会和GCA的GENCODE委员会合作，在GML的基础上制定了SGML（Standard General Markup Language） SGML允许使用者定义出自己的文件格式(DTD),具有高稳定性和完整性
7
2.1 标记语言简介 超文本标记语言——HTML HTML英文全称为HyperText Markup Language，中文全称为超文本标记语言。 HTML最早源于SGML语言，是SGML的应用。 1993年W3C（制定HTML标准的国际性组织）正式推出HTML1.0版。 1995年推出了HTML2.0版。 1996年推出了HTML3.2版。 1997年制定了HTML4.0版。 1999年制定了HTML4.01版（相对成熟）
8
2.1 标记语言简介 2.1.3 可扩展标记语言——XML 1998年，W3C组织公布并推荐使用一种可扩展的标记语言—— XML（eXtensible Markup Language）。 XML并不是要取代HTML，两者被赋于不同的应用。HTML着重于如何描述文件数据显示在浏览器中，而XML的目的是定义一种互联网上交换数据的标准。
9
2.1 标记语言简介 2.1.4 可扩展超文本标记语言——XHTML
2.1 标记语言简介 2.1.4 可扩展超文本标记语言——XHTML 2000年，W3C组织公布发行了XHTML1.0规范。XHTML1.0是一种以HTML4.0基础上优化和改进的新标记语言，目的是基于XML的应用。W3C组织最终目的是要以XHTML取代HTML。 XHTML是一种增强了的HTML，它有标准严谨的结构，可以很容易被不同的浏览器平台所解读，它的可扩展性和灵活性将适应未来网络应用更多的需求。
10
2.2 XHTML基础 2.2.1 XHTML标记及属性 1、标记
1、标记 XHTML是通过使用标记告诉浏览器如何显示网页的。浏览器按顺序阅读网页文件（XHTML文件），然后根据内容周围的XHTML标记解释和显示各种内容。 在XHTML中，所有标记都是用尖括号<>括起来的，绝大多数的标记都是成对出现的（即包括开始标记和结束标记），只有少数标记是单一标记（如换行标记<br />），开始标记和相应的结束标记定义了标记所影响的范围，结束标记和开始标记的区别是有一个斜线，如：<body>和</body>。
11
2.2 XHTML基础 2.2.1 XHTML标记及属性 2、属性
2、属性 在XHTML中，大多数标记都有一个或多个属性，标记的属性是用来对标记所作用的内容进行更详细的控制。所有的属性都放置在开始标记的尖括号内，属性与标记之间用空格分隔；属性的值放在相应的属性之后，用“=”分隔，而不同的属性之间用空格分隔。如： <font size=“3” color=“#ff0000”>国防学院</font>
12
2.2 XHTML基础 2.2.1 XHTML标记及属性 3、XHTML代码规范
（1）所有的标记都必须要有一个相应的结束标记。如果是单标记，则必须在标记名后加一个“/”来表示结束，标记名和“/”之间必须有一个空格。如： <br /> /*表示换行*/ <hr width=“50%” color=“green” /> /*表示产生一个宽度为50%，颜色为绿色的水平线*/ （2）所有标记名和属性名都必须小写。 （3）标记可以嵌套，但必须合理嵌套，不能出现交叉嵌套。
13
2.2 XHTML基础 2.2.1 XHTML标记及属性 （4）属性和属性值之间用等号（=）隔开，属性值必须用双引号（“”)括起来，不同的属性之间用空格隔开。如: <font color=“red” size=“5”>国防学院</font> （5）网页中所有的<、>、&等特殊称号用相应的编码表示。如：“<”用“<”表示，“>”用“>”表示，“&”用“&”表示。 （6）给所有的属性赋一个值。如： <hr size=“2” color=“blue” noshade=“noshade” /> （7）不要在注释中使用“- -”。 “- -”只能发生在XHTML注释的开关和结束。如： <!- -这里是注释- ->
14
2.2 XHTML基础 2.2.2 XHTML文档基本结构 1、HTML文档基本结构 HTML文档的基本结构：
<html> //文件开始 <head> //文档头开始 <title>...</title> //标题区 </head> //文档头结束 <body> //文件主体内容开始 文件主体内容…… </body> //文件主体内容结束 </html> //文件结束 其中<html></html>之间表示这是个网页文件，是必有的标记。
15
2.2 XHTML基础 2.2.2 XHTML文档基本结构 2、XHTML文档基本结构
16
2.2 XHTML基础 2.2.2 XHTML文档基本结构 3、XHTML文档根标记——<html>…</html>
<html>表示XHTML文档的开始，</html>表示XHTML文档的结束。 每个XHTML文档均以<html>开始，以</html>结束。浏览器总是从<html>开始解释，直到遇到</html>为止。 4、XHTML文档头标记 XHTML文档包括头部（head）和主体（body）。 文档头标记（<head>…</head>）主要用来描述XHTML文档的一些基本数据，或设置一些特殊功能（如调用外部样式表），且在文档头内所设置的数据并不会被显示在浏览器的窗口中。
17
2.2 XHTML基础 2.2.2 XHTML文档基本结构 <head>
<meta http-equev=“Content-Type” content=“text/html;charset=gb2312” /> <title>网页的标题</title> </head> （1）meta标记 用于说明与网页（Web页）有关的信息。在<head>标记内可以有多条<meta>标记。 meta标记还有一个常用功能是设置自动转址功能，即使浏览器从一个地址跳转到另个一个地址。例如：
18
2.2 XHTML基础 2.2.2 XHTML文档基本结构 <meta http-equiv="refresh" content=“5; url=2-2.html”> （2）title标记（标题标记） 用于定义XHTML文档的标题（显示在浏览器窗口标题栏中的标题）。例如： <title>网页的标题</title> （3）bgsound标记 用于定义网页的背景音乐。例如： <bgsound src=“bg.mp3” loop=“-1” /> 注意：bgsound标记必须位于<head>于</head>之间
19
2.2 XHTML基础 2.2.2 XHTML文档基本结构 5、XHTML文档主体标记——<body>…</body> 主体标记<body>位于文档头标记<head>之后。它定义了网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在此标记中。 <body>标记有很多属性，用于对网页进行一些整体设置，如网页的背景颜色、背景图像、文本颜色以及超链接的颜色等。 <body bgcolor=“颜色值” background=“颜色值” text=“颜色值” link=“颜色值” vlink=“颜色值” alink=“颜色值”> 6、注释标记——<!--注释内容--> 注释内容是不会在浏览器中显示的。
20
2.3 XHTML文本及段落标记 2.3.1 段落标记——<p>…</p>
段落标记p用于将文档划分为段落，且使段落前后多一个空行，包括开始标记<p>和结束标记</p>。 <p>标记有一个属性align，用来设置文字的水平对齐方式，取值有：left（左对齐，默认值）、right（右对齐）、center（居中对齐）。 2.3.2 换行标记——<br /> 换行标记br用于在文档中强制断行，是一个单标记。使用<br />标记进行强行断行的内容只是换行了，但换行的内容仍是一个段落，且行与行之间的不会产生空行。请看下列实例： 例2-4.html
21
2.3 XHTML文本及段落标记 2.3.3 标题标记——<hn>…</hn>
在 XHTML 中，用户可以通过 Hn 标记来定义文档内容中的标题和副标题，其中 n 是1至6的数字；H1表示最大的标题，H6表示最小的标题。例如： <h1 align=“center”>网页设计与编程</h1> <h2 align=“center”>网页设计与编程</h2> <h3 align=“center”>网页设计与编程</h3> <h4 align=“center”>网页设计与编程</h4> <h5 align=“center”>网页设计与编程</h5> <h6 align=“center”>网页设计与编程</h6>
22
2.3 XHTML文本及段落标记 2.3.4 水平线标记——<hr />
（1）align：设置水平线水平对齐方式，取值有left、right、center（默认值）。 （2）width：设置水平线的宽度，单位为px或百分比 （3）size：设置水平线的粗细，以px为单位。 （4）color：设置水平线的颜色。 （5）noshade：去掉水平线的阴影。 请看下列实例： 例2-2.html
23
2.3 XHTML文本及段落标记 2.3.5 特殊字符 在XHTML文档中，有些符号有特殊含义，例如<和>是用来标识标记的，若要在网页中显示<或>，就必须将其作为特殊字符。在XHTML中，这些特殊字符都必须用相应的字符编码来表示。常用的特殊字符如下： 特殊字符 字符编码 说明 < 小于号 > 大于号 空格 & & ” " 双引号 版权符 注册符
24
2.3 XHTML文本及段落标记 2.3.6 字体标记——<font>…</font>
font标记用于控制字符的格式，包括<font>和</font>。font标记具有3个常用的属性： 1.size属性：用于控制字符的大小，它的取值可以是绝对值（1-7），也可以是相对值（如+2、-1等）。 2.color属性：用于控制字符的颜色，它的取值可以是颜色名称，也可以是十六进制值（如#00ccbb等）。 3.face属性：用于设置字符的字体样式，如宋体（默认）、楷体_2312等。 例如：<font size=“5” face=“黑体” color=“red”>内容</font>
25
2.3 XHTML文本及段落标记 2.3.7 特殊文字样式标记
2.3.7 特殊文字样式标记 在网页中，有些文字或短语需要强调或者突出显示等，XHTML中提供了一些特殊文字样式标记来实现。如<em>…</em>被用来强调文本，显示为斜体字，<sup>…</sup>用来定义上标，<sub>…</sub>用来定义下标等。 标 记 作 用 <b>…</b> 将文本加粗显示 <i>…</i> 定义文本为斜体 <u>…</u> 为文本添加下划线 <s>…</s> 为文本添加删除线 <big>…</big> 将文本显示为比正常文本字体大 <small>…</small> 将文本显示为比正常文本字体小 <sup>…</sup> 设置文本为上标 <sub>…</sub> 设置文本为下标 <em></em> 强调文本，通常显示为斜体 <strong>…</strong> 强调文本，通常加粗显示
26
2.3 XHTML文本及段落标记 2.3.8 滚动字幕 语法格式：<marquee>……</marquee> 属性：
2.3.8 滚动字幕 语法格式：<marquee>……</marquee> 属性： （1）width和height：定义滚动字幕滚动区的宽度和高度。 （2）align：指定滚动字幕如何与周围对象对齐。取值有left/center/right/top/bootom （3）behavior：设置字幕的滚动方式。取值scroll/slide/alternate （4）bgcolor：定义滚动字幕区域的背景色。 （5）direction：设置文本滚动的方向。取值有left/right/up/down （6）hspace和vspace：指定滚动字幕四周水平和垂直方向的间隙 （7）loop：指定字幕滚动重复的次数。-1表示无限循环 （8）scrollamount：设置字幕一次滚动的距离。 （9）scrolldelay：设置字幕滚动两次之间的延迟时间。
27
2.3 XHTML文本及段落标记 2.3.7 滚动字幕
28
2.4 列表标记 2.4.1 无序列表 XHTML提供了3种列表形式：无序列表、有序列表和自定义列表。 无序列表也称项目列表，语法格式如下：
2.4 列表标记 2.4.1 无序列表 XHTML提供了3种列表形式：无序列表、有序列表和自定义列表。 无序列表也称项目列表，语法格式如下： <ul type=“”> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> …… </ul>
29
2.4 列表标记 2.4.1 无序列表 type属性用于定义每个列表前显示的列表项目符号，取值有disc（实心圆点●）、circle（空心圆点○）、square（方块■）三种。 type属性也可以用于li标记内，用于某个列表项前的项目符号。
30
2.4 列表标记 2.4.2 有序列表 有序列表也称编号列表，语法格式如下： <ol type=“” start=“”>
2.4 列表标记 2.4.2 有序列表 有序列表也称编号列表，语法格式如下： <ol type=“” start=“”> <li>列表项1</li> <li>列表项2</li> …… </ol> 有序列表有两个属性：typet和start。type属性用于定义编号的类型，取值有：1（阿拉伯数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、 i（小写罗马字母）5种。
31
2.4 列表标记 2.4.2 有序列表
32
2.4 列表标记 2.4.3 定义列表 当网页中出现新词汇或术语时，为了给访问者一个明确的提示，需要对它们进行定义和说明，用户可使用XHTML提供的定义列表。定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表的语法格式如下： <dl> <dt>项目1</dt><dd>项目1的说明</dd> <dt>项目2</dt><dd>项目2的说明</dd> …… </dl> 请看实例：例2-9.html
33
2.4 列表标记 2.4.4 列表的嵌套 无序列表、有序列表和定义列表可以相互嵌套，一种列表中可包含另一种列表，但不能出现交叉嵌套。例如：
2.4 列表标记 2.4.4 列表的嵌套 无序列表、有序列表和定义列表可以相互嵌套，一种列表中可包含另一种列表，但不能出现交叉嵌套。例如： <ol> <li>有序列表项1</li> <li>有序列表项2</li> <ul> <li>子列表项1</li> <li>子列表项2</li> <li>子列表项3</li> </ul> <li>有序列表项3</li> <li>有序列表项4</li> </ol>
34
2.5 超链接 2.5.1 超链接标记 超链接（Hyperlink）是网络资源之间的一个连接，它是超文本（或超媒体）结构的基本组成部分，是超文本的一个重要特征，是驱使互联网成功的主要力量。 超链接通常包括两个部分：链接源和链接目标。 链接源是指在浏览器中能够直接看到的有链接功能的文本或图片等对象，通常当鼠标停留在这些对象上时鼠标指针会变成手形。 链接目标是指在单击链接源时网页链接所打开的另外一个资源。 根据链接目标的不同，超链接又分为页面链接、锚点链接、电子邮件链接、文件下载链接和空链接。
35
2.5 超链接 2.5.1 超链接标记 <a href=“URL” target=“”>链接源</a>
2.5 超链接 2.5.1 超链接标记 创建超链接的基本语法格式如下： <a href=“URL” target=“”>链接源</a> （1）href属性指定链接目标的地址（URL）； （2）target属性用来设置单击超链接后在浏览器中打开链接目标的方式。取值有： _blank 表示在新的浏览器窗口打开链接目标； _self 表示在原来的浏览器窗口中打开链接目标； _parent 表示在当前浏览器窗口的父窗口中打开链接目标； _top 表示在当前浏览器窗口的上一个窗口中打开。
36
2.5 超链接 （3）URL URL（Universal Resources Locator）：统一资源定位符，表示Web上资源的一种方法，通常可以理解为资源的地址。 URL又分为绝对URL和相对URL，即绝对地址和相对地址。绝对URL是指资源的完整地址，例如：
37
2.5 超链接 相对URL是指目标资源（文件）位置相对于当前页面文件的地址，通常有下列4种形式：
2.5 超链接 相对URL是指目标资源（文件）位置相对于当前页面文件的地址，通常有下列4种形式： 目标文件与当前页面文件在同一目录（文件夹）内。例如：<a href=“目标文件名”>链接源</a> 链接到下一级目录（文件夹）内的目标文件。例如： <a href=“子目录名/目标文件名”>链接源</a> 链接到上一级目录（文件夹）内的目标文件。例如： <a href=“../目标文件名”>链接源</a> 链接到同一级目录（文件夹）内的目标文件。例如： <a href=“../子目录名/目标文件名”>链接源</a>
38
2.5 超链接 2.5.2 锚点（书签）链接 所谓锚点链接是指同一页面内的链接，即在同一页面内从一个位置链接到另一个位置。 创建锚点链接：
2.5 超链接 2.5.2 锚点（书签）链接 所谓锚点链接是指同一页面内的链接，即在同一页面内从一个位置链接到另一个位置。 创建锚点链接： 第一步，在页面内确定锚点（书签）的位置（定义锚点），方法如下： <a name=“锚点名”>目录</a> 第二步，创建指向锚点位置的超链接。方法如下： <a href=“#锚点名”>返回目录</a> 请看下列实例：例2-11.html
39
2.5 超链接 2.5.3 文件下载链接 若链接的目标文件是浏览器不能直接识别的文件格式，如音乐文件、视频文件、word文档等，则浏览器将会弹出下载链接目标文件的效果。例如： <a href=“第1讲 网页设计基础知识.ppt”>文件下载</a>
40
2.5 超链接 2.5.4 电子邮件链接 2.5.5 设置超链接的颜色 创建指向电子邮件地址的链接称为电子邮件链接。
2.5 超链接 2.5.4 电子邮件链接 创建指向电子邮件地址的链接称为电子邮件链接。 <a 2.5.5 设置超链接的颜色 在body标记中使用link 属性设置未被访问的超链接的颜色；vlink设置已被访问过的超链接的颜色；alink 设置活动超链接（即当前选定的链接）的颜色。例如： <body link=“#0000ff” vlink=“#cccccc” alink=“# ff0000”> <a href=“#”>空链接</a> </body>
41
3.1 在网页中使用图像 3.1.1 常用的Web图像格式 在网页中使用的图像通常有3种格式： 1、GIF格式 这种格式的图像具有以下特点：
3.1 在网页中使用图像 3.1.1 常用的Web图像格式 在网页中使用的图像通常有3种格式： 1、GIF格式 这种格式的图像具有以下特点： 无损压缩。也就是说你可以对gif图像进行任何操作也不会使gif图像的质量损耗。 支持最多256色，只能适用于线条图以及使用大块色的图片。 支持使用透明色。 支持动画（Gif动画）。 不适用于表现真彩色照片或具有渐进色的图片。
42
3.1 在网页中使用图像 2、JPEG格式 JPEG格式的图像具有以下特点： 有损压缩。
3.1 在网页中使用图像 2、JPEG格式 JPEG格式的图像具有以下特点： 有损压缩。 没有颜色限制，适用于使用真彩色或平滑过渡色的照片和图片。 可以控制压缩比。 不支持透明色。 不支持动画。
43
3.1 在网页中使用图像 3.1.2 在网页中使用图像的要点 3、PNG格式 PNG格式的图像具有以下特点： 无损压缩。
3.1 在网页中使用图像 3、PNG格式 PNG格式的图像具有以下特点： 无损压缩。 没有颜色限制，适用于任何类型、任何颜色深度的图片。 支持透明色。 不支持动画。 3.1.2 在网页中使用图像的要点 1、确保文件较小 2、控制图像的数量和质量 3、合理使用动画
44
3.1 在网页中使用图像 3.1.3 在网页中插入图像 在XHTML中，使用img标记在网页插入图像，其基本语法格式如下：
3.1 在网页中使用图像 3.1.3 在网页中插入图像 在XHTML中，使用img标记在网页插入图像，其基本语法格式如下： <img src=“图像文件的URL” alt=“” width=“” height=“” border=“” align=“” hspace=“” vspace=“”/> src属性用于指定插入的图像文件名（包括路径）； alt属性用于设置描述图像的文字； width属性用于设置图像的宽度； height属性用于设置图像的高度； border属性用于设置图像的边框； align属性用于设置图像的水平对齐方式； hspace用于设置图像左右两侧空白空间的大小; vspace用于设置图像上下空白空间的大小;
45
3.1 在网页中使用图像 3.1.3 在网页中插入图像
46
3.1 在网页中使用图像 3.1.4 图像与超链接 图像既作为超链接的链接源，也可以作为超链接的链接目标，在图像上还可以创建超链接（称之为图像映射）。 1、创建图像超链接 <a href=“url”><img src=“图像文件url” /></a> 例如：<a href=“jxz.jpg” target=“_blank”><img src=“sun.gif” width=“120” height=“120” /></a> 2、图像映射 图像映射是指在同一幅图像中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。
47
3.1 在网页中使用图像 3.1.4 图像与超链接 图像映射的使用方法：
3.1 在网页中使用图像 3.1.4 图像与超链接 图像映射的使用方法： （1）定义映射区域；定义映射区域使用<map>标记符和<area>标记符 （2）在映射区域上创建超链接。方法：<img usemap=“#映射区名称”> 例如： <img src="china.jpg" width="600" height="521" border="0" usemap="#map1" /> <map name=“map1" id=“map1"> <area shape="circle" coords="452,215,16" href="beijing.jpg" /> </map>
48
3.2 使用表格 表格是网页中一个重要的元素，不仅可以用来制作通常意义的表格，还可以用来布局网页，是网页排版和元素定位的重要手段之一。 3.2.1 创建表格 XHTML中，创建表格的基本语法格式如下： <table> <caption>表格标题</caption> <tr> <td>…</td><td>…</td> </tr> …… </table>
49
3.2 使用表格 1、table标记 table标记用于定义表格,包括<table>和</table>。
3.2 使用表格 1、table标记 table标记用于定义表格,包括<table>和</table>。 2、tr标记 tr标记定义表格中的行，包括<tr>和</tr>。 3、th标记和td标记 th标记和td标记都是用来定义表格中的单元格。其中，th标记用于定义标题单元格，td标记用于定义普通单元格，两者都有结束标记。<th>…</th>、<td>…</td> 4、caption标记 caption标记用来定义表格的标题，包括<cation>和</caption>。它必须紧随<table>标记之后，每个表格只能定义一个标题。
50
3.2 使用表格 请看实例。 <table border="1">
3.2 使用表格 请看实例。 <table border="1"> <caption>课程表</caption> <tr> <th><IMG src="jxz.jpg" width="68" height="42"></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th> <th>第1大节</th><td>数学</td><td>英语</td><td>数学</td><td>英语<td>哲学</td> <th>第2大节</th><td>物理</td><td>计算机</td><td>计算机</td><td>自习</td><td>计算机</td> <th>第3大节</th><td>计算机</td><td>自习</td><td>英语</td><td>计算机</td><td>自习</td> </table>
51
3.2 使用表格 3.2.2 table标记的属性 （1）border：设置表格边框的粗细。其值为0（默认值），表示表格没有边框。
3.2 使用表格 3.2.2 table标记的属性 table标记有以下常见的属性： （1）border：设置表格边框的粗细。其值为0（默认值），表示表格没有边框。 （2）align：定义表格在浏览器窗口中水平方向上的位置，取值有left、right、center。 （3）width：设置表格的宽度。取值为像素值或百分比值。 （4）hieght：设置表格的高度，取值为像素值或百分比值。 （5）cellpadding：设置单元格边框与内容之间的距离。 （6）cellspacing：设置相邻单元格边框之间的距离。 （7）bgcolor：设置表格的背景颜色。 （8）background：设置表格的背景图像。 （9）bordercolor：设置表格边框的颜色。
52
3.2 使用表格 请看实例。
53
3.2 使用表格 3.2.3 行标记和单元格标记的属性 1、tr标记的属性 （1）align：设置整行内容的水平对齐方式。
3.2 使用表格 3.2.3 行标记和单元格标记的属性 1、tr标记的属性 （1）align：设置整行内容的水平对齐方式。 （2）valign：设置整行内容的垂直对齐方式。取值有：top、middle、bottom。 （3）bgcolor：设置整行的背景颜色。 （4）bordercolor：设置整行边框的颜色。 2、td（th）标记的属性 （1）align（2）valign（3）width（4）height （5）bgcolor（6）background（7）bordercolor （8）colspan：设置可横向合并的单元格数。 （9）rowspan：设置可纵向合并的单元格数。
54
3.2 使用表格 请看实例。
55
3.2 使用表格 3.2.4 表格布局 表格还有一个重要的应用就是页面布局。利用表格进行网页布局，通常要将表格的属性进行重新设置：
3.2 使用表格 3.2.4 表格布局 表格还有一个重要的应用就是页面布局。利用表格进行网页布局，通常要将表格的属性进行重新设置： （1）边框设置为0，即border=“0”； （2）将cellspacing和cellpadding属性都设置为0。 （3）正确设置表格的宽度和高度。一般情况下，使用像素（px）为单位确定整个表格的宽度。 请看实例：例3-8.html
56
3.3 使用框架 3.3.1 什么是框架 框架（frame）是在一个浏览器窗口中同时显示多个网页的页面结构。每个框架都可以显示一个XHTML文件，多个框架组成了一个框架集（frameset）。 3.3.2 创建框架 建立框架的基本语法格式如下： <framset cols=“”或rows=“”> <frame src=“网页文件1” name=“框架名1” /> <frame src=“网页文件2” name=“框架名2” /> …… </frameset>
57
3.3 使用框架 一、框架集标记－－<frameset>…</frameset>
3.3 使用框架 一、框架集标记－－<frameset>…</frameset> frameset标记定义一个框架集，用来组织多个框架。它只告诉浏览器框架如何划分，不会显示具体页面的内容，在框架网页中，用<frameset>标记取代<body>标记，也就是说，框架网页是没有<body>标记的。 在frameset标记中必须使用cols或rows属性告诉浏览器框架是如何划分的。 cols属性用来定义纵向分割的框架数; rows属性用来定义横向分割的框架数。 两者的取值可以百分比、绝对值或星号（*）。 例如：<frameset cols=“20%,*,20%>
58
3.3 使用框架 除了cols、rows属性外，frameset标记还有border（设置边框的宽度）、bordercolor（设置边框颜色）、frameborder（设置有/无边框，取值为yes或no）、framespacing（定义各框架之间的空白）。 二、框架标记－－<frame src=“网页文件1” /> frame标记用于定义框架集中的一个特定框架。 frame标记有两个基本属性：src属性和name属性，分别用于设定框架中打开的初始页面和框架名称。 frame标记除了src和name属性外，还有bordercolor、frameborder、marginwidth（设置框架内容与左右边框之间的距离）、marginheight（设置框架内容与上下边框之间的距离）、scrolling（设置是否有滚动条）、noresize（设置调整框架大小）。
59
3.3 使用框架 三、设置目标框架 所谓目标框架，是指单击框架网页中的超链接时，对应的目标文件显示在哪个框架中。方法是：
3.3 使用框架 三、设置目标框架 所谓目标框架，是指单击框架网页中的超链接时，对应的目标文件显示在哪个框架中。方法是： <a href=“目标文件名” target=“框架名”>链接源</a> target属性用于指定目标文件在哪个框架中打开显示。取值除了前面frame标记中name属性的值（框架名）外，还有如下特定取值： _blank：目标文件在新的浏览器窗口中打开； _parent：目标文件在超链接所在窗口的父窗口中打开； _self：目标文件在超链接所在的窗口中打开； _top：目标文件在当前浏览器窗口中打开。
60
3.3 使用框架 3.3.3 嵌入式框架 嵌入式框架可以放在任何网页的主体（body）部分，在浏览器窗中看到的嵌入式框架只是一个单独的子窗口，它并不属于框架集的一部分。 定义嵌入式框架的基本语法格式如下： <iframe src=“url”>浏览器不支持iframe时显示的内容</iframe> iframe标记是一个容器标记，用于在网页中开辟一个区域，将另一个网页文件显示在其中。默认情况下，这个内嵌区域宽300像素，高150像素，可以用width和height属性设置它的精确大小。
61
3.3 使用框架 3.3.3 嵌入式框架 iframe标记有多种属性： src：设定在嵌入框架中显示的初始网页文件；
3.3 使用框架 3.3.3 嵌入式框架 iframe标记有多种属性： src：设定在嵌入框架中显示的初始网页文件； name：设置嵌入式框架的名称； align：设置嵌入式框架的水平对齐方式； width：设置嵌入式框架的宽度； height：设置嵌入式框架的高度； frameborder：设置有/无边框，取值有0（无）或1； marginwidth：设置框架内容与左右边框之间的距离 marginheight：设置框架内容与上下边框之间的距离 scrolling：设置有/无滚动条，取值有yes/no/auto。
62
3.3 使用框架 3.3.4 嵌套框架 框架可以嵌套，例如： <frameset cols=“200,*”>
3.3 使用框架 3.3.4 嵌套框架 框架可以嵌套，例如： <frameset cols=“200,*”> <frame src=“” /> <frameset rows=“200,*”> </framset> </frameset>
63
4.1 使用表单 什么是表单 表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。 例如：注册表单、登录表单、网上调查等。
64
4.1 使用表单 4.1.3 表单的基本工作原理
65
4.1 使用表单 4.1.2 创建表单 表单的设计一般包括两个部分：一是表单界面的设计；二是表单处理程序的编写。在这里我们先介绍如何创建表单界面。 在XHTML中，创建表单的基本语法格式如下： <form action=“表单处理程序URL” method=“get|post” name=“”> 表单控件 <!—此处为各种表单控件--> </form>
66
4.1 使用表单 4.1.2 创建表单 <form>…</from>标记用于创建一个表单。
4.1 使用表单 4.1.2 创建表单 <form>…</from>标记用于创建一个表单。 action属性设置表单处理程序的地址，也就是告诉服务器，该表单数据提交给哪个处理程序进行处理。 method属性规定表单数据的提交（发送）方式，取值有get或post。使用get方式可以直接一个传输步骤中发送所有的表单数据，但传送的数据量有限（1KB以下），且保密性比较差。使用post方式传送数据时，浏览器会按分段传输的方式将数据发送给服务器，传送的数据比用get方式大得多，同时用post方式传送数据的安全性较高。
67
4.1 使用表单 4.1.4 创建表单控件（表单元素） 表单控件是表单中用于接收信息的特定页面元素，例如：文本框、单选框、复选框、按钮、选项菜单、文件选择框、隐藏控件、对象控件等 1、文本框（例4-1.html） （1）单行文本输入框 <input type=“text” size=“” maxlength=“” value=“”> （2）密码输入框 <input type=“password” size=“” maxlength=“”>
68
4.1 使用表单 2、单选框与复选框 （1）单选框 <input type=“radio” name=“” check=“checked” /> （2）复选框 <input type=“checkbox” name=“” check=“checked” /> 例4-2.html 3、按钮 （1）普通按钮
69
4.1 使用表单 <input type=“button” name=“” value=“” /> （2）提交按钮
4.1 使用表单 <input type=“button” name=“” value=“” /> （2）提交按钮 <input type=“submit” name=“” value=“” /> （3）重置按钮 <input type=“reset” name=“” value=“” /> 例4-3.html 4、文件选择框 <input type=“file” name=“” value=“” /> 例4-4.html
70
4.1 使用表单 5、选项菜单（下拉菜单、滚动列表）
4.1 使用表单 5、选项菜单（下拉菜单、滚动列表） <select name=“” size=“” multiple=“multiple”> <option value=“” selected=“selected”> 选项1内容 </option> 选项2内容 …… </select> 例4-5.html
71
4.1 使用表单 6、多行文本框 <textarea name=“” cols=“” rows=“”>
4.1 使用表单 6、多行文本框 <textarea name=“” cols=“” rows=“”> </textarea> 其中，cols属性用于设置多行文本框的列数；rows属性用于设置多行文本框的行数。这里的行数和列数是字符数为单位的。 例4-6.html
72
4.2 插入多媒体对象 在网页中除了常用的文字、图像元素以外，还可以插入音乐、影视及动画等多媒体对象。但要注意，浏览器中可播放的常见音乐文件格式有：mp3、mid和wav等几种，可播放的影视文件格式有：mov、avi、asf及mpeg等，可插入的动画文件格式有：swf和gif等。在网页使用多媒体对象通常有以下两种方法： 1、直接链接 <a href=“多媒体对象文件URL”>链接源</a> 缺点：在播放多媒体文件时，要先将该多媒体文件下载到个人计算机的临时文件夹中，等下载完后才能进行播放。
73
4.2 插入多媒体对象 2、嵌入到网页中 <embed src=“多媒体对象文件URL” width=“” height=“” autostart=“true/false” hidden=“true/no” loop=“”/> 其中,src属性用于指定插入的多媒体对象文件地址； width和height分别设置播放面板的宽和高； autostart用于设置是否自动播放。取值为true/false hidden属性用于设置是否隐藏播放面板； loop属性用于设置播放次数，取值有：n/true/false
74
4.2 插入多媒体对象 优点：使用<embed>标记将多媒体对象嵌入到网页中，只需把下载的文件缓存，就可以一边下载一边播放。
4.2 插入多媒体对象 优点：使用<embed>标记将多媒体对象嵌入到网页中，只需把下载的文件缓存，就可以一边下载一边播放。 例2-7.html
Similar presentations
