Web程序设计教程 教学课件 ppt 作者 吴昌雷 (5)

《Web程序设计教程 教学课件 ppt 作者 吴昌雷 (5)》由会员分享，可在线阅读，更多相关《Web程序设计教程 教学课件 ppt 作者 吴昌雷 (5)（53页珍藏版）》请在金锄头文库上搜索。

1、Web程序设计教程,作者：匡 松,责任编辑：吴昌雷 出版日期：2009年10月 IDPN：308-2009-186 课件章数：7,第3章 HTML页面设计,3.1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HTML页面设计,3.9 图片标记 3.10 超链接 3.11 表 格 3.12 表 单 3.13 框 架 3.14 层叠样式表CSS 3.15 综合网页案例,HTML是Hypertext Markup Language的英文缩写，中文称为超文本标记语言。从浏览器窗口中看到的网页是一个个包含丰

2、富多媒体信息的文档。 1. HTML文件 HTML编写的超文本网页就是一个HTML文件。 HTML语言是一种“标记”语言，它通过夹在两个尖括号标记字符串来控制文本、图像的显示方式，例如、。当用任何一种文本编辑器打开一个HTML文档时，所能看到的只是成对的尖括号和一些文档中的字符串，而用浏览器打开，则能看到漂亮的外观。,3.1 何谓HTML,HTML是文本文件，既可以用纯文本编辑器来编辑（如Windows的记事本、写字板、EditPlus、NotePad、UltraEdit），也可以用专门的网页编写工具（如Frontpage或Dreamwaver等）来编写。只要在保存文件时使用.html、.HT

3、ML、.htm或.HTM等扩展名即可。只有通过浏览器才可以对HTML文档进行相应的解释。 （1）标记：HTML是通过“标记”来实现网页的样式的。标记在使用时，必须用尖括号“”括起来，而且是成对出现。一般来说，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。,3.1 何谓HTML,（2）标记的语法：一个标记常常包含一些属性参数，而这些属性参数丰富标记的功能，标记可以有多个属性，属性之间用空格分隔，语法格式为： 例如：,3.1 何谓HTML,2. HTML的基本组件 HTML文档包含定义文档内容的文本和定义文档结构及外观的标记。HTML文档的结构很简单，整个文档处于标记与之间。

4、用以声明这是HTML文件，便于浏览器正确处理。,3.1 何谓HTML,3.1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HTML页面设计,3.9 图片标记 3.10 超链接 3.11 表 格 3.12 表 单 3.13 框 架 3.14 层叠样式表CSS 3.15 综合网页案例,和标记定义了网页在被浏览时浏览器窗口的工作区显示的内容。可以通过设置标记的属性来设置背景的图片、颜色以及文字和超链接的颜色等。具体的属性及其含义如表3-1所示。,3.2 背景设置,表3-1 主体中背景设置相关的属性,3.

5、1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HTML页面设计,3.9 图片标记 3.10 超链接 3.11 表 格 3.12 表 单 3.13 框 架 3.14 层叠样式表CSS 3.15 综合网页案例,HTML提供了各种关于文字和空格的标记。这些标记用于设置字体、字体大小、颜色以及样式等。 1.设置文字的字体、字体大小及颜色 在HTML语言中，标记用来说明文字的显示。通过标记的属性进行文字的字体、大小和颜色的设置。标记的常用属性如表3-2所示。,3.3 文字标记,表3-2 font标记的属性

6、,2.文字的样式 设置文字样式的标记如下： 标记：设置文本加粗显示。 标记：设置文本加下划线显示。 标记：设置文本倾斜显示。,3.3 文字标记,2.空格符 在HTML中，空格符的实体名为“”（使用时需要把引号去掉）。,3.3 文字标记,3.1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HTML页面设计,3.9 图片标记 3.10 超链接 3.11 表 格 3.12 表 单 3.13 框 架 3.14 层叠样式表CSS 3.15 综合网页案例,主体中的文字有预先设定的排版格式，但是当显示的时候，浏

7、览器往往会忽略这些预先设定的格式。如果需要按照预先设定的格式显示，必须使用标记。 换行标记示例 床前明月光， 疑是地上霜， 举头望明月， 低头思故乡。 ,3.4 换行,3.1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HTML页面设计,3.9 图片标记 3.10 超链接 3.11 表 格 3.12 表 单 3.13 框 架 3.14 层叠样式表CSS 3.15 综合网页案例,在HTML中，换行符标记为，此标记无需成对出现。例如: 格式预先设定示例 床前明月光， 疑是地上霜， 举头望明月， 低头思

8、故乡。 床前明月光，疑是地上霜，举头望明月，低头思故乡。 ,3.5 预先编排标记,3.1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HTML页面设计,3.9 图片标记 3.10 超链接 3.11 表 格 3.12 表 单 3.13 框 架 3.14 层叠样式表CSS 3.15 综合网页案例,列表标记用于列举，分为有序列表、无序列表和自定义列表。 有序列表用开始，每一个列表条目用引导，最后是，列表条目结束不需要标记。例如： 北京 上海 ,3.6 列表标记,无序列表用开始，每一个列表条目用引导，最后

9、是。输出时每一列表条目以黑点标示。例如： 北京 上海 ,3.6 列表标记,自定义列表可自定义条目符号。自定义列表由开始，列表条目用引导，其说明用引导。例如： 城市1 北京 城市2 上海 ,3.6 列表标记,3.1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HTML页面设计,3.9 图片标记 3.10 超链接 3.11 表 格 3.12 表 单 3.13 框 架 3.14 层叠样式表CSS 3.15 综合网页案例,在HTML中，段落标记为。它可以单独使用，也可以成对使用。单独使用时，它位于段落的开

10、始。成对使用时，还需要使用来做结尾。 段落标记有多种属性，其中比较常用的属性是对齐方式align，其值可以是left、center或right。 例如： HTML中，段落标记可以单独使用，也可以成对使用。 段落标记有多种属性。,3.7 段落标记,3.1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HTML页面设计,3.9 图片标记 3.10 超链接 3.11 表 格 3.12 表 单 3.13 框 架 3.14 层叠样式表CSS 3.15 综合网页案例,水平线标记是HTML常用的标记，其用途是画一

11、条水平线。标记的常用属性如表3-3所示。 表3-3 标记的属性,3.8 水平线标记,3.1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HTML页面设计,3.9 图片标记 3.10 超链接 3.11 表 格 3.12 表 单 3.13 框 架 3.14 层叠样式表CSS 3.15 综合网页案例,一个生动的网页除了包含文字，还可能包含各种图片。在HTML语言中，标记用于在网页中嵌入图像。 标记中指定图片来源的属性为src，取值为图片的url路径；指定图片宽度和高度的属性分别为width和height

12、，取值为整数，单位为屏幕象素点；指定图片边框的属性是border，取值为整数，用于指明图片边框的粗细，若取值为0，表示无边框；指定图片和文字对齐方式的属性是align，当其取值为“top”时，表示顶对齐；取值为“middle”时，表示居中对齐；取值为“bottom”时，表示底对齐。,3.9 图片标记,3.1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HTML页面设计,3.9 图片标记 3.10 超链接 3.11 表 格 3.12 表 单 3.13 框 架 3.14 层叠样式表CSS 3.15 综

13、合网页案例,一般而言，超链接有文字型的、图片型、电子邮件型几种形式。 1.文字超链接 在HTML语言中，标记用于建立超文本链接。一个超链接唯一地指向另一个Web页。超链接标记的格式为： 超链接文字,3.10 超链接标记,2.图片超链接 建立图片超链接和建立文字超链接类似，具体格式为： 图片,3.10 超链接标记,3.网页内部超链接 超链接不仅可以让用户在不同的网页间跳转，还能让用户在网页内部跳转。 在建立网页内部超链接之前，首先要在网页中创建书签。在一个网页中可以创建若干个书签。这些书签就是网页内部超链接所链接的起始位置。创建书签的格式如下： 文字信息 然后就可以在网页的任何位置创建超链接，让

14、超链接指向已经创建好的书签。,3.10 超链接标记,4.超链接电子邮件账号 在HTML中，可以利用超链接建立指向电子邮件账号的超链接。具体格式如下： 超链接文字,3.10 超链接标记,超链接标记除了属性Href和Name以外，Title和Target也比较常用。属性Title主要用于描述鼠标放在该链接上时应当显示的文字。属性Target主要用于描述点击超链接后，链接的文档应当在何处显示，其属性值主有“window_name（窗口名称，一般由网站制作人员指定）”、“_blank”、“_parent”、“_self”、“_top”五种情况，属性值等于“_blank”时表示会将链接的文档在一个新的网

15、页窗口中打开，属性值等于“_parent”时表示会将链接的文档在该超链接的父框架集或父窗口中打开（该属性值主要用在超链接位于框架集FrameSet中一个特定框架Frame中的情况），属性值等于“_self”时表示会将链接的文档在当前网页窗口中打开，属性值等于“_top”时表示会在当前整个浏览器窗口中打开所链接的文档（因而会删除所有框架）。,3.10 超链接标记,3.1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HTML页面设计,3.9 图片标记 3.10 超链接 3.11 表 格 3.12 表

16、单 3.13 框 架 3.14 层叠样式表CSS 3.15 综合网页案例,表格是网页设计中常见元素。HTML语言中，定义表格的标记是。表格中的内容放在标记与之间。而表格的宽度可以用width属性来定义，同样有两种方法：绝对定义和相对定义。相对定义是用屏幕的宽度的百分比来定义。 1.行与列 表格中行以及单元格的相关标记如下： ：定义行，即用和表示表格每一行的开始与结束。 ：定义表头，即用和表示表头。 ：定义单元格，用和表示单元格，用于存放数据。 在定义表中的行和单元格的同时，可以使用属性bgcolor定义它们的背景颜色。,3.11 表格标记,2.表格的边框和间距 表格的边框和间距通过标记的几个属性来定义，如表3-4所示。 表3-4 表格边框属性,3.11 表格标记,3.合并单元格 在表格的设计中，某些单元格可能跨多行或多列。 单元格跨多列的具体格式为: 单元格跨多行的具体格式为:,3.11 表格标记,3.1 何谓HTML 3.2 背景设置 3.3 文字标记 3.4 换 行 3.5 预先编排标记 3.6 列 表 3.7 段落 3.8 水平线,第3章 HT