网页制作基础教程第三章.ppt

1、第3章 网站设计基础语言HTML,3.1 HTML简介 3.2 超链接 3.3 页面的排版与文本处理 3.4 表格 3.5 加入多媒体效果 3.6 表单,3.1 HTML简介,HTML语言是为了在各种网络环境之间、不同文件格式之间进行交流而使用的一种语言格式。 HTML文档（即网页的源文件）是一个放置了标记的ASCII码文本文件，一个HTML文件的后缀名是.htm或者是.html。使用文本编辑软件就可以进行HTML文件编写。 目前，HTML的最新版本是HTML 4.0，但通用的是HTML 3.2。这是因为3.2版的功能比较标准，受到绝大部分浏览软件的支持，而较高版本的某些功能尚未得到完全实现和

2、普及，在某些流行的浏览软件上，可能不兼容。,下一页,3.1 HTML简介,1.HTML文档的结构 2. HTML文件名 HTML文档是普通的ASCII文档，可以用任何文本编辑器打开和编辑，但必须保存成扩展名为.htm或.html的文档才能被浏览器识别。 3. HTML的标记 在HTML文档中，标记是一些字母或单词，并被放在尖括号内。 （1）单标记。,下一页,上一页,3.1 HTML简介,（2）双标记。 另一类标记称为“双标记”，它由始标记和尾标记两部分构成，必须成对使用。 （3）标记的属性。 （4）注释标记。 注释内容是指在文档编写过程中对某段代码的文字说明。,返 回,上一页,3.2 超链接,

3、1. 超链接的基本格式 超链接由两部分组成：一部分是可显示在浏览器中的超链接文本及图像，当用户在其上单击时，就触发了此超链接；另一部分就是用于描述当超链接被触发后要链接到的URL信息。 2. 内部链接 内部链接有两种情况，一种是跳转到另一网页（即本地链接）；另一种是页内跳转。,下一页,3.2 超链接,（1）本地链接 对同一台电脑上的不同文件进行链接就称为本地链接，它使用UNIX或DOS系统中路径的表示方法，即绝对路径或相对路径来指示一个文件。 （2）页内跳转 页内跳转是指一个链接的指向并没有超越此链接所在的文档，仅在该文档的范围之内进行跳转，有点类似于Word的翻页功能，但它是通过链接来实现的

4、。 3. 外部文件链接,返 回,上一页,3.3 页面的排版与文本处理,3.3.1 标题 通常一篇文章都会有个标题，在各个章节还会有子标题，而在HTML中，用户也可以通过hn标记符来标识文档中的标题和副标题，其中n是1到6的数字。表示最大的标题，表示最小的标题。使用标题样式时，必须使用结束标记符。标题文字标记符的格式如下： 标题文字 ,下一页,3.3 页面的排版与文本处理,3.3.2 强制换行标记 在编写HTML文档时，不需要考虑太细的设置，也不必担心段落过长的部分不会被浏览器显示来。因为在HTML的规范里，若浏览器窗口缩小，则浏览器会自动将右边的文字转至下一行来显示；而对于需要断行的地方，应加

5、上强制换行标记。 强制应放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。,下一页,上一页,3.3 页面的排版与文本处理,3.3.3 段落标记 段落标记符是HTML标志符中最常见的一种符号，它位于各段落起始部位，使用该标志符后，每块文本段落之间都会空出一行。 而是可以省略的，因为下一个就意味着上一个的结束。还有一个属性align，它是用来指示段落显示时的对齐方式的，一般有center，left，right3种。,下一页,上一页,3.3 页面的排版与文本处理,3.3.4 文字的设置 1. 字号大小设置 在HTML语言中设置字号大小的标记符是

6、，它有一个属性size，通过指定size属性值就能够设置字号大小，size属性的有效值范围为17，默认值为3。 2. 字体与样式 HTML 4.0中提供了定义文字的功能，用face属性来完成这个工作。 3. 文字的颜色,下一页,上一页,3.3 页面的排版与文本处理,3.3.5 预编排结构 HTML还提供了一种非常有用的预排（Preformatted）结构，利用它可以使信息在浏览器中完全依照源文件中的编排格式显示出来。 它的语法格式如下： 预编排信息 因此，只需要将一对中间的预编排信息，按照你所需要的格式预先编排好就可以了。下面是一个预编排结构示例。,下一页,上一页,3.3 页面的排版与文本处理

7、,3.3.6 列表 列表是一种规定格式的文字排列方式，分为无次序列表、有次序列表和定义性列表三种。 1. 无次序列表 无次序列表使用的一对标记是，每一个列表项前使用。 2. 有次序列表 有次序列表和无次序列表的使用方法基本相同，标记为，第一个列表项前使用。,下一页,上一页,3.3 页面的排版与文本处理,3. 定义性列表 定义性列表可以用来给每一个列表项再加上一段说明性的文字，说明文字独立于列表项并另起一行显示，列表项使用，说明性文字使用。 在定义性列表中，还有一个属性是compact，使用这个属性后，说明文字和列表项将在同一行中显示,下一页,上一页,3.3 页面的排版与文本处理,3.3.7 框

8、架网页 框架网页是一种特殊的HTML网页，它可将浏览器窗口通过框架分成不同的区域，称为框架区域。 1. 框架网页的基本结构 2. 各窗口的尺寸设置 使用框架网页可以将浏览器窗口分割成为几块，横向分割使用rows属性，纵向分割使用cols属性，块的大小可以由这两个属性的值来确定。,下一页,上一页,3.3 页面的排版与文本处理,3. 各窗口之间的相互操作 用框架分割出来的几个窗口中的内容并不是静止不变的，往往一个窗口的内容会随着另一个窗口的要求而变化。为了完成各窗口之间的相互操作，必须为每一个窗口起一个名称，该名称用属性name来定义，其语法格式如下： ,返 回,上一页,3.4 表格,表格在网页制

9、作中有着十分重要的作用，制作数据处理表并不是表格的主要功能，更多情况下表格还是用来对页面进行布局的。 1.表格的基本结构 2. 表格的标题 表格标题的位置可以通过align属性来设置，其位置分为表格上方和表格下方。 3. 表格的尺寸设置 （1）表格的大小。,下一页,3.4 表格,（2）边框的尺寸。 表格边框的设置是用border属性来实现的，它表示表格边框的厚度和框线。 （3）单元格间距。 单元格与单元格之间的线为格间线，它的宽度可以使用cellspacing属性来调节。 4. 单元格内文字的排列 单元格中文字的排列方式有两种，分别是水平排列和垂直排列。,下一页,上一页,3.4 表格,5. 单

10、元格的跨行和跨列 要创建占多行或多列的单元格，只需在或中加入rowspan或colspan属性，这两个属性的值表明了表格单元中要跨越的行或列的个数。 （1）跨多列的单元格 （2）跨多行的单元格 6. 表格的颜色设置 在表格中，既可以对整个表格，也可以对任意一行或一个单元格使用背景色。,返 回,上一页,3.5 加入多媒体效果,1. 图片的插入和定位 在网页中插入图片可使用单标记，当浏览器读取到时，就会显示此标记所设定的图像。 2. 播放音乐 除了可以插入图片之外，使用HTML还可以播放音乐和视频等多媒体文件。用浏览器可以播放的音乐格式有：MIDI，WAV和AU以及从网络上下载的MP3等。其中MP

11、3是压缩率最高、音质最好的文件格式。 （1）点播音乐。,下一页,3.5 加入多媒体效果,（2）以插件方式播放音乐。 实际上，浏览器仅能显示几种文件格式，是播放插件扩展了浏览器的能力。 3. 视频的插入 用浏览器可以播放的视频文件格式有：AVI，MOV。 （1）视频文件的链接。 （2）视频的自动载入。,返 回,上一页,3.6 表单,3.6.1 表单的概念 表单无论是在我们的日常生活中还是在Web上，都是一种结构化的交流类型，表单是网页上常用来进行输入输出的对话窗口，其中可嵌入的输入输出的组件也称为对象，包括文本域、按钮、复选框、单选按钮、文件域、列表、选单、图像域、隐藏域、跳转菜单和表单本身。图3-15就是一个典型的表单。,下一页,3.6 表单,3.6.2 表单的结构 1. 定义表单 是表单标记，该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。 （1）action：用来定义处理数据的CGI程序。 （2）method：用来指定数据的传递方式。这里的数据是指用户在表单上输入的数据，而传递则是指由HTML将上述数据传递给action属性所指定的CGI程序。,下一页,上一页,3.6 表单