第7章网页制作与编程基础计算机课件PPT

1、第第7 7章章 网页制作与编程基础网页制作与编程基础本章学习目标：本章学习目标：了解常用网页制作工具，基本掌握其中一种了解常用网页制作工具，基本掌握其中一种掌握掌握HTMLHTML语言语言初步掌握初步掌握VBScriptVBScript或或JavaScriptJavaScript脚本语言脚本语言了解动态网页技术了解动态网页技术初步掌握初步掌握ASPASP与数据库应用与数据库应用27.1 7.1 常用网页制作工具常用网页制作工具 随着随着Internet技术的不断发展，网页制作工具越来越多，技术的不断发展，网页制作工具越来越多，选择一种好的工具非常重要，能够起到事半功倍的效果。选择一种好的工具非

2、常重要，能够起到事半功倍的效果。网页制作工具大体上可以分为网页制作工具大体上可以分为两类两类：着眼于网页、网站全：着眼于网页、网站全局的，称之为基本工具；着眼于网页某些元素的，称之为局的，称之为基本工具；着眼于网页某些元素的，称之为辅助工具。辅助工具。 网页制作基本工具网页制作基本工具是指那些专门用来设计能在浏览器是指那些专门用来设计能在浏览器中显示为网页的中显示为网页的HTML文档的专用工具软件，它能整合编文档的专用工具软件，它能整合编排网页元素，生成排网页元素，生成HTML网页代码文件。比较流行的网页网页代码文件。比较流行的网页制作工具软件包括制作工具软件包括Microsoft Front

3、Page和和Macromedia Dreamweaver等。等。 网页制作辅助工具网页制作辅助工具是指用来创建或加工网页上的图形、是指用来创建或加工网页上的图形、图像、动画、声音和视频等网页元素的工具软件。图像、动画、声音和视频等网页元素的工具软件。37.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 2003 FrontPage FrontPage是由是由MicrosoftMicrosoft公司推出的新一代公司推出的新一代WebWeb网页制网页制作工具。作工具。FrontPageFr

4、ontPage使网页制作者能够更加方便、快捷地创使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。量工作。 FrontPage FrontPage的最强大之处是其站点管理与远程发布功能。的最强大之处是其站点管理与远程发布功能。用户只需在本地对网页进行编辑，用户只需在本地对网页进行编辑，FrontPageFrontPage会跟踪用户编会跟踪用户编辑过的文件，在发布时，它会自动将修改过的网页进行发布，辑过的文件，在发布时，它会自动将修改过的网页进行发布，未编辑过的网页可由用户决定是否再次向服务器发送未编

5、辑过的网页可由用户决定是否再次向服务器发送。47.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20031 1FrontPage 2003FrontPage 2003的特色的特色 (1) (1)强大的网页设计功能强大的网页设计功能 可以智能地完成可以智能地完成HTMLHTML文本的编辑，并可以针对不同的浏文本的编辑，并可以针对不同的浏览器对网页进行设置；可以提供对多种版本的浏览器的支持；览器对网页进行设置；可以提供对多种版本的浏览器的支持；完善了所见即所得的网页编辑操作。完善了所见即

6、所得的网页编辑操作。 (2) (2)丰富的网页设计模板、设计向导和主题样式丰富的网页设计模板、设计向导和主题样式 提供了多种网页设计模板、网页设计向导和主题样式。提供了多种网页设计模板、网页设计向导和主题样式。使用这些模板、向导和样式，即使是初学者也可以设计出具使用这些模板、向导和样式，即使是初学者也可以设计出具有专业水准的网站。有专业水准的网站。57.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20032FrontPage 2003的新增功能的新增功能 (1)设计网站设计网站 F

7、rontPage 2003 具有经过改进的设计环境、新的布局和具有经过改进的设计环境、新的布局和设计工具、模板以及经过改进的主题，这一切可以帮助用户设计工具、模板以及经过改进的主题，这一切可以帮助用户实现网站创意，而无需任何实现网站创意，而无需任何HTML知识。知识。 (2)开发网站开发网站 FrontPage 2003具有改进的创作环境、新的图形功能、具有改进的创作环境、新的图形功能、强大的编码工具（帮助用户应用并增加各种编码语言知识）、强大的编码工具（帮助用户应用并增加各种编码语言知识）、以及创建交互式脚本的工具。此外，以及创建交互式脚本的工具。此外，FrontPage 2003可以生可以

8、生成有效和干净的成有效和干净的HTML，能让用户更好地控制代码。，能让用户更好地控制代码。 67.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20033 3FrontPage 2003FrontPage 2003工作界面工作界面 77.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20033 3FrontPage 2003FrontPage 2003工作界面工作界面 窗口

9、栏的内容随着所选视图不同而不同。为了便于用户窗口栏的内容随着所选视图不同而不同。为了便于用户制作网页和查看、修改制作网页和查看、修改WebWeb站点的组织结构，站点的组织结构，FrontPage 2003FrontPage 2003提供了提供了6 6种视图。单击视图菜单相应的菜单项可以切换到不同种视图。单击视图菜单相应的菜单项可以切换到不同的视图。各个视图的功能分别为：的视图。各个视图的功能分别为： “网页网页”视图：网页视图是进行网页编辑的操作界面。视图：网页视图是进行网页编辑的操作界面。 “文件夹文件夹”视图：用来对网站的目录和文件夹进行管理。视图：用来对网站的目录和文件夹进行管理。 “报

10、表报表”视图：用于查看与网页制作有关的各项参数。视图：用于查看与网页制作有关的各项参数。 “远程网站远程网站”视图：可以发布整个网站或个别文件，还可视图：可以发布整个网站或个别文件，还可以在两个或更多个位置之间同步文件。以在两个或更多个位置之间同步文件。 “导航导航”视图：用来显示和编辑网页的导航关系。视图：用来显示和编辑网页的导航关系。 “超链接超链接”视图：显示某个网页与其他网页之间的关系。视图：显示某个网页与其他网页之间的关系。 “任务任务”视图：用来查看网站和网页设计的完成情况。视图：用来查看网站和网页设计的完成情况。87.1 7.1 常用网页制作工具常用网页制作工具 7.1.2 Ad

11、obe 7.1.2 Adobe DreamweaverDreamweaver CS3 CS3 使用使用DreamweaverDreamweaver，设计师可以随心所欲地编写代码、，设计师可以随心所欲地编写代码、设计网站网页以及进行高级开发。无论是喜欢手写设计网站网页以及进行高级开发。无论是喜欢手写HTMLHTML代码代码还是习惯于可视化环境，还是习惯于可视化环境，DreamweaverDreamweaver都能提供方便快捷、都能提供方便快捷、功能强大的工具，使用功能强大的工具，使用DreamweaverDreamweaver将是一种全新的体验。将是一种全新的体验。在易用、创新、规范等优点的基础

12、上，在易用、创新、规范等优点的基础上，DreamweaverDreamweaver还拥有还拥有更先进的网页布局和设计环境，以及更为强大的代码编辑功更先进的网页布局和设计环境，以及更为强大的代码编辑功能等卓越特性。能等卓越特性。DreamweaverDreamweaver CS3 CS3的操作界面主要由以下几个部分组成：的操作界面主要由以下几个部分组成：标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性检标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性检查器以及多个面板组，如图查器以及多个面板组，如图7-27-2所示。所示。97.1 7.1 常用网页制作工具常用网页制作工具 7.1.2 Ado

13、be 7.1.2 Adobe DreamweaverDreamweaver CS3 CS3 图7-2 Dreamweaver CS3 的界面布局 107.1 7.1 常用网页制作工具常用网页制作工具1 1标题栏标题栏( (注意区别文档的标题和文档的文件名称注意区别文档的标题和文档的文件名称) )2 2菜单栏菜单栏3 3插入栏插入栏4 4文档工具栏文档工具栏5 5“属性属性”检查器检查器 6 6其他面板其他面板 7.1.2 Adobe 7.1.2 Adobe DreamweaverDreamweaver CS3 CS3 117.1 7.1 常用网页制作工具常用网页制作工具 7.1.3 7.1.3

14、 网页美化工具网页美化工具 1Photoshop CS3 2Fireworks CS3 3Flash CS3 为了使制作的网页更为美观，用户在利用网页制作工具为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化工具对网页进行美化。制作网页时，还需利用网页美化工具对网页进行美化。 127.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述1 1什么是什么是HTML HTML HTML HTML英文全名是英文全名是Hyper Text Markup LanguageHyper Text Markup Language，即超，即超文

15、本标记语言，是一种用来制作超文本文档的简单标记语文本标记语言，是一种用来制作超文本文档的简单标记语言。言。 用用HTMLHTML编写的超文本文档称为编写的超文本文档称为HTMLHTML文档，它能独立于文档，它能独立于各种操作系统（如各种操作系统（如UNIXUNIX、WindowsWindows等）。它主要是在原来文等）。它主要是在原来文本文件的基础上，增加一系列的标识符来描述格式，形成本文件的基础上，增加一系列的标识符来描述格式，形成网络文件。当用户使用浏览器下载时，就把这些标识符解网络文件。当用户使用浏览器下载时，就把这些标识符解释成应有的含义，并按照一定的格式将这些被标识的文件释成应有的含

16、义，并按照一定的格式将这些被标识的文件显示在屏幕上，而显示在屏幕上，而HTMLHTML的标识符号并不显示在屏幕上。的标识符号并不显示在屏幕上。 137.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (1)HTML (1)HTML文档的基本结构文档的基本结构 下面是一个最基本的超文本文档的源代码下面是一个最基本的超文本文档的源代码My first page 我的第一个网页我的第一个网页 HTML文件由标记和被标记的内容组成。每个标记都有文件由标记和被标记的内容组成。每个标记都有“”围住，以表示这是围住，以

17、表示这是HTML代码而非普通文本，标记能产生所需的各种效代码而非普通文本，标记能产生所需的各种效果。就像一个排版程序，它将网页的内容排成理想的效果。这些标记名果。就像一个排版程序，它将网页的内容排成理想的效果。这些标记名称大都为相应的英文单词首字母或缩写，很好记忆。各种标记差别很大，称大都为相应的英文单词首字母或缩写，很好记忆。各种标记差别很大，但总的表示形式却大同小异。但总的表示形式却大同小异。147.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (2)HTML (2)HTML的标记的标记 单标签单标

18、签 某些标记称为某些标记称为“单标签单标签”，它只需单独使用就能完整地表达意思。，它只需单独使用就能完整地表达意思。 这类标记的这类标记的语法是：语法是： 最常用的单标签是最常用的单标签是, , 它表示换行。它表示换行。 双标签双标签 另一类标记称为另一类标记称为“双标签双标签”，它由，它由“始标签始标签”和和“尾标签尾标签”两部分构两部分构成，必须成对使用，其中始标签告诉成，必须成对使用，其中始标签告诉WebWeb浏览器从此处开始执行该标浏览器从此处开始执行该标记所表示的功能，而尾标签告诉记所表示的功能，而尾标签告诉WebWeb浏览器在这里结束该功能。始标浏览器在这里结束该功能。始标签前加一

19、个斜杠（签前加一个斜杠（/ /）即成为尾标记。）即成为尾标记。 这类标记的这类标记的语法是：语法是： 受标记影响的内容受标记影响的内容/ 例如你想对某段文字的加粗显示，就将此段文字放在例如你想对某段文字的加粗显示，就将此段文字放在 标记中标记中, , 如：如：你要加粗的字你要加粗的字 157.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (2)HTML (2)HTML的标记的标记 标签属性标签属性 许多单标记和双标记的始标记内可以包含一些属性，标记要通过属性许多单标记和双标记的始标记内可以包含一些属性，

20、标记要通过属性来制作出各种效果。来制作出各种效果。 其语法是：其语法是： 受影响内容受影响内容/ 需要注意的是，并不是所有的标记都有属性；根据需要可以用该标记需要注意的是，并不是所有的标记都有属性；根据需要可以用该标记的所有属性，也可以只用需要的几个属性。在使用时，属性之间没有顺序。的所有属性，也可以只用需要的几个属性。在使用时，属性之间没有顺序。 167.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (3)HTML (3)HTML的几个部分的几个部分 HTML HTML文件以文件以开头，以开头，以结尾

21、。浏览器解释网页代码的起结尾。浏览器解释网页代码的起始标志。始标志。HTMLHTML文件包括头部（文件包括头部（headhead）和正文（）和正文（bodybody）。）。 1)head1)head头部信息头部信息 ：表示这是网页的题头部分，用来说明文件命名和：表示这是网页的题头部分，用来说明文件命名和与文件本身的相关信息。通常这部分标记来声明此网页的默认语言编码、与文件本身的相关信息。通常这部分标记来声明此网页的默认语言编码、关键字、使用软件等，个别的标记产生页面动作，第关键字、使用软件等，个别的标记产生页面动作，第4 4行声明超文本头行声明超文本头部分结束。在简单的网页中这部分不重要，而较

22、复杂的网页中，比如：部分结束。在简单的网页中这部分不重要，而较复杂的网页中，比如：用用CSSCSS样式表、样式表、JavaScriptJavaScript语言等，这部分会相当重要。语言等，这部分会相当重要。 ：网页的标题。标题概括了网页的内容，能迅速：网页的标题。标题概括了网页的内容，能迅速了解网页的大意。在文件头部定义的标题内容不在浏览器窗口中显示，了解网页的大意。在文件头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。器标题栏中显示的信息只有标题。

23、 在网页的头部代码中，还有另外一种文头标记在网页的头部代码中，还有另外一种文头标记metameta标记标记，基本语，基本语法是：法是：meta http-equiv=。177.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (3)HTML (3)HTML的几个部分的几个部分 2 2）bodybody文档主体部分文档主体部分 ：是网页的正文部分。：是网页的正文部分。HTMLHTML文件主体标记的格式文件主体标记的格式为：为：body 。作为网。作为网页的主体部分，有很多的内置属性，这些属性用于设定网页的总体

24、风页的主体部分，有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等，主要属性如表接颜色等，主要属性如表7-17-1所示。所示。 HTML HTML代码在书写时不严格区分大小写，也并不要求在书写时缩代码在书写时不严格区分大小写，也并不要求在书写时缩进，但为了程序的易读性，建议网页设计者使标记的首尾对齐，内进，但为了程序的易读性，建议网页设计者使标记的首尾对齐，内部的内容向右缩进几格。部的内容向右缩进几格。 187.2 HTML7.2 HTML语言语言 7.2.1 HTML7

25、.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (3)HTML (3)HTML的几个部分的几个部分 2 2）bodybody文档主体部分文档主体部分 表表7-1 BODY7-1 BODY标记属性值标记属性值 197.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述3 3一个简单的一个简单的HTMLHTML实例实例一个简单的一个简单的HTMLHTML示例示例欢迎光临我的主页欢迎光临我的主页这是我第一次做主页，无论怎么样，我这是我第一次做主页，无论怎么样，我都会努力做好！都会努力做好！207.2 HTML7.2 HTML语

26、言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述4 4HTMLHTML的特点的特点HTMLHTML是独立于平台的，它兼容多平台。是独立于平台的，它兼容多平台。HTMLHTML文件中含有大量的特定标记文件中含有大量的特定标记(tags)(tags)，该标记用于，该标记用于解释如何显示指定的内容。解释如何显示指定的内容。HTMLHTML文件中包含超文本内容，如多媒体信息、文件中包含超文本内容，如多媒体信息、E-mailE-mail地址、数据库查询结果等。地址、数据库查询结果等。HTMLHTML文件是一个有特定标记的、可识别的文件是一个有特定标记的、可识别的ASCIIASCII文本文

27、文本文件，通常文件扩展名为件，通常文件扩展名为.html.html或或. .htmhtm。编写一个编写一个HTMLHTML文件不需要特殊的软件，只要有一个字文件不需要特殊的软件，只要有一个字符编辑器就可以完成。符编辑器就可以完成。217.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1字符的格式化字符的格式化 (1)(1)标题文字标记标题文字标记 标题文字的标题文字的格式为：格式为： 标题文字标题文字/ 属性属性align用来设置标题在页面中的对齐方式：用来设置标题在页面中的对齐方式：left（左（左对齐）对齐）right（右对齐）（右对齐）ce

28、nter（居中对齐）（居中对齐） 属性属性n用来指定标题文字的大小。用来指定标题文字的大小。N可以取可以取16的整数的整数值，取值，取1时文字最大，时文字最大，6时文字最小时文字最小 与用与用定义的网页标题不同，标题格式定义的网页标题不同，标题格式显示在浏览器窗口中，而不显示在浏览器的标题栏中。显示在浏览器窗口中，而不显示在浏览器的标题栏中。227.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1字符的格式化字符的格式化 (1)(1)标题文字标记标题文字标记 设置标题 第1级标题(h1) 第2级标题(h2) 第3级标题(h3) 第4级标题(h4)

29、（居左） 第5级标题(h5)（居右） 第6级标题(h6)（居中） 237.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 格式为：格式为：font size= 被设置的文字被设置的文字标记可设定文字的字号（大小）、字体和颜色。标记可设定文字的字号（大小）、字体和颜色。sizesize用来设置文字的大小。数字的取值范围从用来设置文字的大小。数字的取值范围从1 17 7，sizesize取取1 1时最小，取时最小，取7 7时最大。时最大。FaceFace用来设置字体。用来设置字体。C

30、olorColor用来设置文字颜色。用来设置文字颜色。247.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 1) 1)和和 标记都可以设置文字的大小，二者的区标记都可以设置文字的大小，二者的区别见下表别见下表( (当当中的中的sizesize取取7 7时，文字比时，文字比要大要大) )。 2) 2)设置字体：设置字体：在网页设计中要尽量用常见的字体。在网页设计中要尽量用常见的字体。必要必要的罕见字体可以转化为文字图像。的罕见字体可以转化为文字图像。257.2 HTML7.2 H

31、TML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 3) 3)设置文字的颜色：设置文字的颜色：标记中的标记中的texttext属性，属性，设定整个网页文字的颜色设定整个网页文字的颜色 标记中的标记中的colorcolor属性，属性，设定网页、段落、短语、词或设定网页、段落、短语、词或字的颜色。字的颜色。 与与的优先级，的优先级，标记优先。标记优先。<body>与<font>标记同时对文字颜色进行定义今天天气真好黑色蓝色粉红色267.2 HTML7.2

32、 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 3) 3)设置文字的颜色：设置文字的颜色： 颜色可以用相应英文单词或以颜色可以用相应英文单词或以“#”#”引导的一个十六进制数代码来引导的一个十六进制数代码来表示。上例中同时使用了表示。上例中同时使用了bodybody的的texttext属性和属性和fontfont的的colorcolor属性来对文字属性来对文字的颜色进行设置，但最后在网页中的文字颜色应该是离文字本身最近的的颜色进行设置，但最后在网页中的文字颜色应该是离文字本身最近的标记属性所定义的

33、。另外，在标记属性所定义的。另外，在titletitle中涉及网页中的特殊替换字符，其中涉及网页中的特殊替换字符，其字符所表示的的含义如下表所示。字符所表示的的含义如下表所示。 277.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 4) 4)设置字型：设置字型： 字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型的控制标记见下表所示：字型的控制标记见下表所示：287.2 HTML7.2 HTML语言语言 7.

34、2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (1) (1)强行换行标记强行换行标记 格式为：文字格式为：文字 实例实例1 1：不使用：不使用 无换行示例无换行示例登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河入海流。黄河入海流。欲穷千里目，欲穷千里目，更上一层楼。更上一层楼。297.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (1) (1)强行换行标记强行换行标记 实例实例2：使用：使用后的效果后的效果换行示例换行示例登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河入海流。黄河入海流。欲

35、穷千欲穷千里目，里目，更上一层楼。更上一层楼。307.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (2) (2) 段落标记段落标记 格式为：格式为：文字文字 实例实例1 1：居中对齐：居中对齐CENTERCENTER段落标签段落标签浣溪沙浣溪沙一曲新词酒一杯，去年天气旧亭一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。台，夕阳西下几时回。无可奈何花落去，无可奈何花落去，似曾相识燕归来。小园香径几徘徊。似曾相识燕归来。小园香径几徘徊。317.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格

36、文档的格式与风格2 2段落格式化段落格式化 (2) (2)段落标记段落标记 实例实例2 2：参见右图：参见右图段落标签段落标签登鹳雀楼登鹳雀楼白日依山尽，白日依山尽， 黄河黄河入海流。入海流。 欲穷千里目，欲穷千里目， 更上更上一层楼。一层楼。327.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (2) (2)段落标记段落标记 文件段落的开始由文件段落的开始由来标记，段落的结束由来标记，段落的结束由来标记。来标记。标记不但能使后面的文字换到下一行，还可以使两段之标记不但能使后面的文字换到下一行，还可以使两段之间多一空行

37、。由于一段的结束意味着新一段的开始，所以使间多一空行。由于一段的结束意味着新一段的开始，所以使用用也可省略结束标记。也可省略结束标记。 一个强制换段标记一个强制换段标记可以看作是两个强制换行标记可以看作是两个强制换行标记 。 其中属性其中属性alignalign用来设置段落的对齐方式，可以为用来设置段落的对齐方式，可以为leftleft、centercenter或或rightright，分别表示居左、居中、居右。默认时默认，分别表示居左、居中、居右。默认时默认为为leftleft。 格式为：格式为：文字文字 337.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格

38、文档的格式与风格2 2段落格式化段落格式化 ( (3) )分区显示标记分区显示标记 格式格式:文本或图象文本或图象 文本块、一段文字或标题在网页上的布局都有文本块、一段文字或标题在网页上的布局都有3 3种方式：左对齐、种方式：左对齐、居中和右对齐。在标记中使用居中和右对齐。在标记中使用alignalign属性，其属性取值分别为：属性，其属性取值分别为：leftleft、centercenter、rightright。可以设置布局的标记有：。可以设置布局的标记有：、 、。当在许多段落中设置对齐方式。当在许多段落中设置对齐方式时，常使用时，常使用标记。标记。 347.2 HTML7.2 HTML语

39、言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 ( (3) )分区显示标记分区显示标记 实例实例1 1，参照右图，参照右图 分区显示标记的应用分区显示标记的应用 居中居中centercenter 居居中中 centercenter 居左居左leftleft 居左居左 leftleft 居右居右rightright 居右居右 rightright 357.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 ( (4) )水平线水平线 格式为：格式为：hr align= align a

40、lign设定横线放置的位置，其属性取值为：设定横线放置的位置，其属性取值为：leftleft、centercenter、rightright。 Size Size设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为2 2。 Width Width设定线段长度，可以是绝对值或相对值。所谓绝对值，是指线设定线段长度，可以是绝对值或相对值。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指长段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，度相对于窗口的宽度而定，窗口的宽度改变时，

41、线段的长度也随之增减，默认值为默认值为100%100%，即始终填满当前窗口。，即始终填满当前窗口。 NoshadeNoshade设定线条为无阴影，若默认则有阴影或立体效果。设定线条为无阴影，若默认则有阴影或立体效果。 Color Color设定线条颜色，默认为黑色。可以采用颜色的名称。颜色可以设定线条颜色，默认为黑色。可以采用颜色的名称。颜色可以用相应英文单词或以用相应英文单词或以“#”#”引导的一个十六进制代码来表示。引导的一个十六进制代码来表示。367.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、

42、视频、动画(1)(1)插入图形插入图形 格式为格式为： 例：例： =10 align=middle 设置网页的背景图像、背景颜色可参照设置网页的背景图像、背景颜色可参照BODYBODY标记的相关属性。标记的相关属性。377.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(2)(2)插入背景音乐插入背景音乐 1) 1)音频标记音频标记 能在网页中加入背景声音，能在网页中加入背景声音，格式为格式为： srcsrc=your.midyour.mid ：设定：设定 midimidi 档案及路径，可以是

43、相对或绝对。档案及路径，可以是相对或绝对。 autostartautostart=true=true ：是否在音乐档下载完之后就自动播放。：是否在音乐档下载完之后就自动播放。truetrue 是，是，falsefalse 否否 （默认值（默认值) )。 loop=infiniteloop=infinite ：是否自动反复播放。：是否自动反复播放。LOOP=2LOOP=2 表示重复两次，表示重复两次，InfiniteInfinite 表示重复多次。表示重复多次。 要加入的背景声音文件的格式为要加入的背景声音文件的格式为.wav.wav、.mid.mid、.ram.ram等，播放次数为等，播放次数

44、为-1-1时，声音将一直播放直到关闭网页。时，声音将一直播放直到关闭网页。387.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(2)(2)插入背景音乐插入背景音乐 2)2)使用使用EMBEDEMBED标签嵌入音乐文件标签嵌入音乐文件 使用使用BGSOUNDBGSOUND标签嵌入背景音乐时，当最小化窗口时标签嵌入背景音乐时，当最小化窗口时BGSOUNDBGSOUND就会暂停，就会暂停，为了保证背景音乐的连贯性，建议使用为了保证背景音乐的连贯性，建议使用HIDDENHIDDEN了的了的EMBED

45、EMBED标签。标签。embed =true loop=true hidden=true srcsrc=your.midyour.mid ：设定：设定midimidi档案及路径，可以是相对或绝对档案及路径，可以是相对或绝对autostartautostart=true=true：是否在音乐档下载完之后就自动播放。：是否在音乐档下载完之后就自动播放。truetrue是，是，falsefalse否否( (默认值默认值) )loop=trueloop=true：是否自动反复播放。：是否自动反复播放。LOOP=2 LOOP=2 表示重复两次，表示重复两次，truetrue是，是， falsefalse

46、否否hidden=truehidden=true：是否完全隐藏控制画面，：是否完全隐藏控制画面，truetrue为是，为是，nono为否为否( (默认默认值值) )397.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(3)(3)插入视频插入视频 1) 1)用用 标记的标记的dynsrcdynsrc属性可以向网页中加入属性可以向网页中加入. .aviavi视频剪辑文件。视频剪辑文件。格式为格式为： BorderBorder：边框大小。：边框大小。SrcSrc：在浏览器尚未完全读入：在浏览器尚未

47、完全读入AVIAVI文件时，先在文件时，先在AVIAVI播放区域显示的图像。播放区域显示的图像。DynsrcDynsrc：指定播放视频文件的路径和文件名。：指定播放视频文件的路径和文件名。LoopLoop：指定播放循环的次数。当为：指定播放循环的次数。当为-1-1时，则反复播放。时，则反复播放。LoopdelayLoopdelay：两次播放的时间间隔。：两次播放的时间间隔。StartStart：指定何时开始播放。：指定何时开始播放。FileopenFileopen是文件打开时，是文件打开时，mouseovermouseover是鼠标是鼠标移到视频文件上时。移到视频文件上时。2)2)插入插入fl

48、ashflash用用标记，其格式为标记，其格式为embed 文件文件407.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接2 2加入超级链接加入超级链接 超链接（超链接（HyperlinkHyperlink）可以看作是一个热点，它可以从当前）可以看作是一个热点，它可以从当前WebWeb页定义的页定义的位置跳转到其他位置，包括当前页的某个位置、位置跳转到其他位置，包括当前页的某个位置、InternetInternet或本地硬盘或局域或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。网上的其他文件，甚至跳转到声音、图片等多媒体

49、文件。 当当WebWeb页包含超链接时，页包含超链接时，WebWeb页中的外观形式为彩色且带下划线的文字或页中的外观形式为彩色且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用锚点标记示文本或图片时，将变成手形。超文本链接使用锚点标记来定义。来定义。标标记的记的格式为格式为：a 热点热点417.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接2 2加入超级链接加入超级链接 (1)(1)属性属性href

50、href为超文本引用，它的值为一个为超文本引用，它的值为一个URLURL，是目标资源的有效地址。，是目标资源的有效地址。在书写在书写URLURL时要注意，如果资源放在自己的服务器上，可以写相对路径。否时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，应写绝对路径则，应写绝对路径. . (2) (2)属性属性namename指定当前文档内的一个字符串作为链接时可以使用有效的指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址。目标资源的地址。( (注意：注意：HrefHref不能与不能与namename同时使用。同时使用。) ) (3)Target=”_blank” (3)

51、Target=”_blank”或或Target=”new”Target=”new”，将链接打开的空白页面或在，将链接打开的空白页面或在新的浏览器窗口中打开。新的浏览器窗口中打开。 Target=”_parent” Target=”_parent”，将链接的页面内容，显示在直接父框架窗口中。，将链接的页面内容，显示在直接父框架窗口中。 Target=”_self” Target=”_self”，将链接的页面内容，显示在当前窗口中（默认值）。，将链接的页面内容，显示在当前窗口中（默认值）。 Target=”_top” Target=”_top”，将框架中链接的页面内容，显示在没有框架的窗口，将框架

52、中链接的页面内容，显示在没有框架的窗口中。中。 Target=” Target=”框架名称框架名称”，只运用于框架中，若被设定则链接结果将显示，只运用于框架中，若被设定则链接结果将显示于该于该“框架名称框架名称”指定的框架窗口中，框架窗口名称是事先由框架标记所命指定的框架窗口中，框架窗口名称是事先由框架标记所命名的，可以理解为程序设计中的变量名称。名的，可以理解为程序设计中的变量名称。427.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接2 2加入超级链接加入超级链接 (4)(4)创建指向其他页面的链接，就是在当前页面与其他相关页面间建立

53、超创建指向其他页面的链接，就是在当前页面与其他相关页面间建立超链接。无论目标文件与当前文件的目录关系如何，其格式为：链接。无论目标文件与当前文件的目录关系如何，其格式为：a .html” (5) (5)创建指向本页中的链接时，需要定义两个标记：一个为超级链接标记，创建指向本页中的链接时，需要定义两个标记：一个为超级链接标记，另一个为书签标记。格式为：另一个为书签标记。格式为：a 。书签为该超级链。书签为该超级链接的目标，定义格式为：接的目标，定义格式为：a name=。同理，如果要创建指向。同理，如果要创建指向其他页面中的书签，定义的格式为：其他页面中的书签，定义的格式为：a 。 (6) (6

54、)在网页中，超级链接还可以指向下载文件和电子邮件。他们的格式分在网页中，超级链接还可以指向下载文件和电子邮件。他们的格式分别为：别为：a ；a (7) (7)图像也可以做为链接指针。格式为：图像也可以做为链接指针。格式为：a ，可以看出，用，可以看出，用 取代了链接指针中取代了链接指针中texttext的位的位置。置。 是图像元素，它表明显示是图像元素，它表明显示urlurl代表的图像文件。代表的图像文件。437.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑1 1表格的基本形式表格的基本形式 表格对于格式化信息有着强大的功能，它能控制各种信息的位置，使表格对于

55、格式化信息有着强大的功能，它能控制各种信息的位置，使得页面结构协调一致，用其他标记不容易做到的文本对齐，只要把文本块得页面结构协调一致，用其他标记不容易做到的文本对齐，只要把文本块放到表格中就行了。任何表格都有放到表格中就行了。任何表格都有三个基本要素：表行、表头和表项三个基本要素：表行、表头和表项，每，每个要素都有自己的标签个要素都有自己的标签 一个表由一个表由开始，开始，结束，表的内容由结束，表的内容由 ， 和和定义，其中：定义，其中： 说明表的一个行，表有多少行就有多少个说明表的一个行，表有多少行就有多少个 ，即定义表行；，即定义表行； 说明表的列数和相应栏目的名称，有多少个栏目就有多少

56、个说明表的列数和相应栏目的名称，有多少个栏目就有多少个 ，即定义表头；，即定义表头； 则填充由则填充由 和和 组成的表格，即定义表项。组成的表格，即定义表项。是否用表格线分开为部分内容用是否用表格线分开为部分内容用borderborder属性说明。属性说明。447.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑1 1表格的基本形式表格的基本形式 实例实例1 1：一个有表格线和一个元：一个有表格线和一个元组的组成的表格，参照右图。组的组成的表格，参照右图。the simplest html the simplest html filefile 食品食品/ 饮料饮料

57、/ 水果水果/ 面包面包可乐可乐西瓜西瓜 457.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑2表格的修饰形式表格的修饰形式 (1) (1)有通栏的表有通栏的表 有横向通栏的表用有横向通栏的表用 =#属性说明，属性说明，colspancolspan表示横向栏距，表示横向栏距，# #代表通栏占据的网格数，它是一个小于表的横向网格数的整数。代表通栏占据的网格数，它是一个小于表的横向网格数的整数。 实例实例2 2：下面是一个有表格线和有横向通栏的表格。：下面是一个有表格线和有横向通栏的表格。the simplest html filethe simplest htm

58、l file =2食品食品/ 饮料饮料/ 水果水果/ 面包面包牛奶牛奶可乐可乐西瓜西瓜467.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑2表格的修饰形式表格的修饰形式 (1) (1)有通栏的表有通栏的表 有纵向通栏的表用有纵向通栏的表用rowspan=#属性说明。属性说明。rowspan表示纵向栏距，表示纵向栏距，#表示表示通栏占据的网格数，小于纵向网络数。需要说明的是有纵向通栏的表，每通栏占据的网格数，小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用一行必须用明确给出一横向栏目结束明确给出一横向栏目结束,这和表格的基本形式是不同的。这和表格的基本形

59、式是不同的。 实例实例3：下面是一个有表格线和有纵向通栏的表格。：下面是一个有表格线和有纵向通栏的表格。the simplest html the simplest html filefile =3早餐早餐/ 食品食品/面包面包/ 饮料饮料/可乐可乐/ 水果水果/西瓜西瓜/ 477.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑2表格的修饰形式表格的修饰形式 (2) (2)表的大小，边框宽度，表格间距表的大小，边框宽度，表格间距表的大小用表的大小用width=#width=#和和height=#height=#属性说明。前者为表宽，后者为表高，属性说明。前者为表

60、宽，后者为表高，# #是是以象素为单位整数。以象素为单位整数。表格间距即划分表格的线的粗细用标记表格间距即划分表格的线的粗细用标记ellspacingellspacing=#=#表示，表示，# #的单位是象的单位是象素。素。 (3) (3)表中文本的输出表中文本的输出 文本与表框的距离用文本与表框的距离用cellpaddingcellpadding=#=#说明。说明。# #的单位是象素。的单位是象素。 表格的宽度大于其中的文本宽度时，文本在其中的输出位置与用表格的宽度大于其中的文本宽度时，文本在其中的输出位置与用align=#align=#说明。说明。# #是是 leftleft，centercenter和和rightri