网页制作与编程基础.ppt

《网页制作与编程基础.ppt》由会员分享，可在线阅读，更多相关《网页制作与编程基础.ppt（97页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1网页制作与编程基础 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望27.1 7.1 常用网页制作工具常用网页制作工具 随着随着Internet技术的不断发展，网页制作工具越来越多，技术的不断发展，网页制作工具越来越多，选择一种好的工具非常重要，能够起到事半功倍的效果。网选择一种好的工具非常重要，能够起到事半功倍的效果。网页制作工具大体上可以分为页制作工具大体上可以分为两类两类：着眼于网页、网站全局的，：着眼于网页、网站全局的，称之为基本工具；着眼于网页某些元素的

2、，称之为辅助工具。称之为基本工具；着眼于网页某些元素的，称之为辅助工具。网页制作基本工具网页制作基本工具是指那些专门用来设计能在浏览器中是指那些专门用来设计能在浏览器中显示为网页的显示为网页的HTML文档的专用工具软件，它能整合编排网文档的专用工具软件，它能整合编排网页元素，生成页元素，生成HTML网页代码文件。比较流行的网页制作工网页代码文件。比较流行的网页制作工具软件包括具软件包括Microsoft FrontPage和和Macromedia Dreamweaver等。等。网页制作辅助工具网页制作辅助工具是指用来创建或加工网页上的图形、是指用来创建或加工网页上的图形、图像、动画、声音和视频

3、等网页元素的工具软件。图像、动画、声音和视频等网页元素的工具软件。37.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 2003 FrontPage FrontPage是由是由MicrosoftMicrosoft公司推出的新一代公司推出的新一代WebWeb网页制作网页制作工具。工具。FrontPageFrontPage使网页制作者能够更加方便、快捷地创建和使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工发布网页，具有直观的网页制作和管理方法，简

4、化了大量工作。作。FrontPage FrontPage的最强大之处是其站点管理与远程发布功能。的最强大之处是其站点管理与远程发布功能。用户只需在本地对网页进行编辑，用户只需在本地对网页进行编辑，FrontPageFrontPage会跟踪用户编辑会跟踪用户编辑过的文件，在发布时，它会自动将修改过的网页进行发布，过的文件，在发布时，它会自动将修改过的网页进行发布，未编辑过的网页可由用户决定是否再次向服务器发送未编辑过的网页可由用户决定是否再次向服务器发送。47.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft

5、 FrontPage 20031 1FrontPage 2003FrontPage 2003的特色的特色 (1)(1)强大的网页设计功能强大的网页设计功能 可以智能地完成可以智能地完成HTMLHTML文本的编辑，并可以针对不同的浏文本的编辑，并可以针对不同的浏览器对网页进行设置；可以提供对多种版本的浏览器的支持；览器对网页进行设置；可以提供对多种版本的浏览器的支持；完善了所见即所得的网页编辑操作。完善了所见即所得的网页编辑操作。(2)(2)丰富的网页设计模板、设计向导和主题样式丰富的网页设计模板、设计向导和主题样式 提供了多种网页设计模板、网页设计向导和主题样式。提供了多种网页设计模板、网页设

6、计向导和主题样式。使用这些模板、向导和样式，即使是初学者也可以设计出具使用这些模板、向导和样式，即使是初学者也可以设计出具有专业水准的网站。有专业水准的网站。57.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20032FrontPage 2003的新增功能的新增功能 (1)设计网站设计网站 FrontPage 2003 具有经过改进的设计环境、新的布局和具有经过改进的设计环境、新的布局和设计工具、模板以及经过改进的主题，这一切可以帮助用户设计工具、模板以及经过改进的主题，这一切可以

7、帮助用户实现网站创意，而无需任何实现网站创意，而无需任何HTML知识。知识。(2)开发网站开发网站 FrontPage 2003具有改进的创作环境、新的图形功能、强具有改进的创作环境、新的图形功能、强大的编码工具（帮助用户应用并增加各种编码语言知识）、大的编码工具（帮助用户应用并增加各种编码语言知识）、以及创建交互式脚本的工具。此外，以及创建交互式脚本的工具。此外，FrontPage 2003可以生成可以生成有效和干净的有效和干净的HTML，能让用户更好地控制代码。，能让用户更好地控制代码。67.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage

8、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工作界面工作界面 窗口栏的内容随着所选视图不同而不同。为了便于用户窗口栏的内容随着所选视图不同而不同。为了便于用户制作网页和查看、修改制作网页和查看、修改WebWeb站点的组织结构，站点的组织结构，FrontPage

9、2003FrontPage 2003提供了提供了6 6种视图。单击视图菜单相应的菜单项可以切换到不同种视图。单击视图菜单相应的菜单项可以切换到不同的视图。各个视图的功能分别为：的视图。各个视图的功能分别为：“网页网页”视图：网页视图是进行网页编辑的操作界面。视图：网页视图是进行网页编辑的操作界面。“文件夹文件夹”视图：用来对网站的目录和文件夹进行管理。视图：用来对网站的目录和文件夹进行管理。“报表报表”视图：用于查看与网页制作有关的各项参数。视图：用于查看与网页制作有关的各项参数。“远程网站远程网站”视图：可以发布整个网站或个别文件，还可以视图：可以发布整个网站或个别文件，还可以在两个或更多个

10、位置之间同步文件。在两个或更多个位置之间同步文件。“导航导航”视图：用来显示和编辑网页的导航关系。视图：用来显示和编辑网页的导航关系。“超链接超链接”视图：显示某个网页与其他网页之间的关系。视图：显示某个网页与其他网页之间的关系。“任务任务”视图：用来查看网站和网页设计的完成情况。视图：用来查看网站和网页设计的完成情况。87.1 7.1 常用网页制作工具常用网页制作工具 7.1.2 Adobe Dreamweaver CS37.1.2 Adobe Dreamweaver CS3 使用使用DreamweaverDreamweaver，设计师可以随心所欲地编写代码、，设计师可以随心所欲地编写代码、

11、设计网站网页以及进行高级开发。无论是喜欢手写设计网站网页以及进行高级开发。无论是喜欢手写HTMLHTML代码代码还是习惯于可视化环境，还是习惯于可视化环境，DreamweaverDreamweaver都能提供方便快捷、都能提供方便快捷、功能强大的工具，使用功能强大的工具，使用DreamweaverDreamweaver将是一种全新的体验。将是一种全新的体验。在易用、创新、规范等优点的基础上，在易用、创新、规范等优点的基础上，DreamweaverDreamweaver还拥有还拥有更先进的网页布局和设计环境，以及更为强大的代码编辑功更先进的网页布局和设计环境，以及更为强大的代码编辑功能等卓越特性

12、。能等卓越特性。Dreamweaver CS3Dreamweaver CS3的操作界面主要由以下几个部分组成：的操作界面主要由以下几个部分组成：标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性检标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性检查器以及多个面板组，如图查器以及多个面板组，如图7-27-2所示。所示。97.1 7.1 常用网页制作工具常用网页制作工具 7.1.2 Adobe Dreamweaver CS37.1.2 Adobe Dreamweaver CS3 图7-2 Dreamweaver CS3 的界面布局 107.1 7.1 常用网页制作工具常用网页制作工具1 1标题栏

13、标题栏(注意区别文档的标题和文档的文件名称注意区别文档的标题和文档的文件名称)2 2菜单栏菜单栏3 3插入栏插入栏4 4文档工具栏文档工具栏5 5“属性属性”检查器检查器 6 6其他面板其他面板 7.1.2 Adobe Dreamweaver CS37.1.2 Adobe Dreamweaver CS3 117.1 7.1 常用网页制作工具常用网页制作工具 7.1.3 7.1.3 网页美化工具网页美化工具 1Photoshop CS3 2Fireworks CS3 3Flash CS3 为了使制作的网页更为美观，用户在利用网页制作工具制为了使制作的网页更为美观，用户在利用网页制作工具制作网页时

14、，还需利用网页美化工具对网页进行美化。作网页时，还需利用网页美化工具对网页进行美化。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，即超，即超文本标记语言，是一种用来制作超文本文档的简单标记语文本标记语言，是一种用来制作超文本文档的简单标记语言。言。用用HTMLHTML编写的超文本文档称为编写的超文本文档称为HTMLHTML文档，它能独立于文档，它能独立于各种操

15、作系统（如各种操作系统（如UNIXUNIX、WindowsWindows等）。它主要是在原来文等）。它主要是在原来文本文件的基础上，增加一系列的标识符来描述格式，形成本文件的基础上，增加一系列的标识符来描述格式，形成网络文件。当用户使用浏览器下载时，就把这些标识符解网络文件。当用户使用浏览器下载时，就把这些标识符解释成应有的含义，并按照一定的格式将这些被标识的文件释成应有的含义，并按照一定的格式将这些被标识的文件显示在屏幕上，而显示在屏幕上，而HTMLHTML的标识符号并不显示在屏幕上。的标识符号并不显示在屏幕上。137.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 H

16、TML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (1)HTML (1)HTML文档的基本结构文档的基本结构 下面是一个最基本的超文本文档的源代码下面是一个最基本的超文本文档的源代码My first page 我的第一个网页我的第一个网页 HTML文件由标记和被标记的内容组成。每个标记都有文件由标记和被标记的内容组成。每个标记都有“”围住，以表示这是围住，以表示这是HTML代码而非普通文本，标记能产生所需的各代码而非普通文本，标记能产生所需的各种效果。就像一个排版程序，它将网页的内容排成理想的效果。这些标种效果。就像一个排版程序，它将网页的内容排成理想的效果。这些标记名称大都为

17、相应的英文单词首字母或缩写，很好记忆。各种标记差别记名称大都为相应的英文单词首字母或缩写，很好记忆。各种标记差别很大，但总的表示形式却大同小异。很大，但总的表示形式却大同小异。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文件以文件以开头，以开头，以结尾。浏览器解释网页代码的起结尾。浏览器解释网页代码的起始标志。始标志。HTMLHTML文件包括头部（文件包括头部（headhead）和正文（）和正文（bodybody）。）。1)head1)head头部信息头部信息 ：表示这是网页的题头部分，用来说明文件命名和：

21、表示这是网页的题头部分，用来说明文件命名和与文件本身的相关信息。通常这部分标记来声明此网页的默认语言编码、与文件本身的相关信息。通常这部分标记来声明此网页的默认语言编码、关键字、使用软件等，个别的标记产生页面动作，第关键字、使用软件等，个别的标记产生页面动作，第4 4行声明超文本头部行声明超文本头部分结束。在简单的网页中这部分不重要，而较复杂的网页中，比如：用分结束。在简单的网页中这部分不重要，而较复杂的网页中，比如：用CSSCSS样式表、样式表、JavaScriptJavaScript语言等，这部分会相当重要。语言等，这部分会相当重要。：网页的标题。标题概括了网页的内容，能迅速：网页的标题。

22、标题概括了网页的内容，能迅速了解网页的大意。在文件头部定义的标题内容不在浏览器窗口中显示，了解网页的大意。在文件头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。器标题栏中显示的信息只有标题。在网页的头部代码中，还有另外一种文头标记在网页的头部代码中，还有另外一种文头标记metameta标记标记，基本语，基本语法是：法是：meta http-equiv=。177.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言

23、概述2 2HTMLHTML文档的结构文档的结构 (3)HTML (3)HTML的几个部分的几个部分 2 2）bodybody文档主体部分文档主体部分 ：是网页的正文部分。：是网页的正文部分。HTMLHTML文件主体标记的格式文件主体标记的格式为：为：body bgcolor=。作为网。作为网页的主体部分，有很多的内置属性，这些属性用于设定网页的总体风页的主体部分，有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等，主要属性如表接颜色等，主要属性如表7-17-1所示。所示。

24、HTML HTML代码在书写时不严格区分大小写，也并不要求在书写时缩代码在书写时不严格区分大小写，也并不要求在书写时缩进，但为了程序的易读性，建议网页设计者使标记的首尾对齐，内进，但为了程序的易读性，建议网页设计者使标记的首尾对齐，内部的内容向右缩进几格。部的内容向右缩进几格。187.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (3)HTML (3)HTML的几个部分的几个部分 2 2）bodybody文档主体部分文档主体部分 表表7-1 BODY7-1 BODY标记属性值标记属性值 197.2 HT

25、ML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述3 3一个简单的一个简单的HTMLHTML实例实例一个简单的一个简单的HTMLHTML示例示例欢迎光临我的主页欢迎光临我的主页这是我第一次做主页，无论怎么样，我这是我第一次做主页，无论怎么样，我都会努力做好！都会努力做好！207.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述4 4HTMLHTML的特点的特点HTMLHTML是独立于平台的，它兼容多平台。是独立于平台的，它兼容多平台。HTMLHTML文件中含有大量的特定标记文件中含有大量的特定标记(tags)(t

26、ags)，该标记用于，该标记用于解释如何显示指定的内容。解释如何显示指定的内容。HTMLHTML文件中包含超文本内容，如多媒体信息、文件中包含超文本内容，如多媒体信息、E-mailE-mail地址、数据库查询结果等。地址、数据库查询结果等。HTMLHTML文件是一个有特定标记的、可识别的文件是一个有特定标记的、可识别的ASCIIASCII文本文文本文件，通常文件扩展名为件，通常文件扩展名为.html.html或或.htm.htm。编写一个编写一个HTMLHTML文件不需要特殊的软件，只要有一个字文件不需要特殊的软件，只要有一个字符编辑器就可以完成。符编辑器就可以完成。217.2 HTML7.2

27、 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1字符的格式化字符的格式化(1)(1)标题文字标记标题文字标记 标题文字的标题文字的格式为：格式为：Hn align=标题文字标题文字属性属性align用来设置标题在页面中的对齐方式：用来设置标题在页面中的对齐方式：left（左（左对齐）对齐）right（右对齐）（右对齐）center（居中对齐）（居中对齐）属性属性n用来指定标题文字的大小。用来指定标题文字的大小。N可以取可以取16的整数的整数值，取值，取1时文字最大，时文字最大，6时文字最小时文字最小与用与用定义的网页标题不同，标题格式定义的网页标题不同，标题格式显

28、示在浏览器窗口中，而不显示在浏览器的标题栏中。显示在浏览器窗口中，而不显示在浏览器的标题栏中。227.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1字符的格式化字符的格式化(1)(1)标题文字标记标题文字标记 设置标题 第1级标题(h1)第2级标题(h2)第3级标题(h3)第4级标题(h4)（居左）第5级标题(h5)（居右）第6级标题(h6)（居中）237.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化(2)(2)字符格式标记字符格式标记 格式为：格式为：font s

29、ize=被设置的文字被设置的文字标记可设定文字的字号（大小）、字体和颜色。标记可设定文字的字号（大小）、字体和颜色。sizesize用来设置文字的大小。数字的取值范围从用来设置文字的大小。数字的取值范围从1 17 7，sizesize取取1 1时最小，取时最小，取7 7时最大。时最大。FaceFace用来设置字体。用来设置字体。ColorColor用来设置文字颜色。用来设置文字颜色。247.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 1)1)和和标记都可以设置文字的大小，二者

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

31、中的colorcolor属性，属性，设定网页、段落、短语、词或设定网页、段落、短语、词或字的颜色。字的颜色。与与的优先级，的优先级，标记优先。标记优先。<body>与<font>标记同时对文字颜色进行定义今天天气真好黑色蓝色粉红色267.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 3)3)设置文字的颜色：设置文字的颜色：颜色可以用相应英文单词或以颜色可以用相应英文单词或以“#”#”引导的一个十六进制数代码来表引导的一个十六进制数代码来表示。上例中同时使

32、用了示。上例中同时使用了bodybody的的texttext属性和属性和fontfont的的colorcolor属性来对文字的颜属性来对文字的颜色进行设置，但最后在网页中的文字颜色应该是离文字本身最近的标记色进行设置，但最后在网页中的文字颜色应该是离文字本身最近的标记属性所定义的。另外，在属性所定义的。另外，在titletitle中涉及网页中的特殊替换字符，其字符所中涉及网页中的特殊替换字符，其字符所表示的的含义如下表所示。表示的的含义如下表所示。277.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字

33、符格式标记字符格式标记 4)4)设置字型：设置字型：字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型的控制标记见下表所示：字型的控制标记见下表所示：287.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (1)(1)强行换行标记强行换行标记 格式为：文字格式为：文字 实例实例1 1：不使用：不使用无换行示例无换行示例登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河入海流。黄河入海流。欲穷千里目，欲穷千里目，更上一层楼。更上一层楼。297.2 HTML7.

34、2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (1)(1)强行换行标记强行换行标记 实例实例2：使用：使用后的效果后的效果换行示例换行示例登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河入海流。黄河入海流。欲穷千欲穷千里目，里目，更上一层楼。更上一层楼。307.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (2)(2)段落标记段落标记 格式为：格式为：文字文字 实例实例1 1：居中对齐：居中对齐CENTERCENTER段落标签段落标签浣溪沙浣溪沙一曲新词酒一杯，去

35、年天气旧亭一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。台，夕阳西下几时回。无可奈何花落去，无可奈何花落去，似曾相识燕归来。小园香径几徘徊。似曾相识燕归来。小园香径几徘徊。317.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (2)(2)段落标记段落标记 实例实例2 2：参见右图：参见右图段落标签段落标签登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河黄河入海流。入海流。欲穷千里目，欲穷千里目，更上更上一层楼。一层楼。327.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2

36、 2段落格式化段落格式化 (2)(2)段落标记段落标记 文件段落的开始由文件段落的开始由来标记，段落的结束由来标记，段落的结束由来标记。来标记。标记不但能使后面的文字换到下一行，还可以使两段之标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味着新一段的开始，所以使间多一空行。由于一段的结束意味着新一段的开始，所以使用用也可省略结束标记。也可省略结束标记。一个强制换段标记一个强制换段标记可以看作是两个强制换行标记可以看作是两个强制换行标记。其中属性其中属性alignalign用来设置段落的对齐方式，可以为用来设置段落的对齐方式，可以为leftleft、centerce

37、nter或或rightright，分别表示居左、居中、居右。默认时默认，分别表示居左、居中、居右。默认时默认为为leftleft。格式为：格式为：文字文字 337.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (3)分区显示标记分区显示标记 格式格式:文本或图象文本或图象 文本块、一段文字或标题在网页上的布局都有文本块、一段文字或标题在网页上的布局都有3 3种方式：左对齐、居种方式：左对齐、居中和右对齐。在标记中使用中和右对齐。在标记中使用alignalign属性，其属性取值分别为：属性，其属性取值分别为：leftle

38、ft、centercenter、rightright。可以设置布局的标记有：。可以设置布局的标记有：、。当在许多段落中设置对齐方式。当在许多段落中设置对齐方式时，常使用时，常使用标记。标记。347.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (3)分区显示标记分区显示标记 实例实例1 1，参照右图，参照右图 分区显示标记的应用分区显示标记的应用 居中居中centercenter居居中中centercenter 居左居左leftleft居左居左leftleft 居右居右rightright居右居右rightright

39、357.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (4)水平线水平线 格式为：格式为：hr align=noshade align align设定横线放置的位置，其属性取值为：设定横线放置的位置，其属性取值为：leftleft、centercenter、rightright。Size Size设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为2 2。Width Width设定线段长度，可以是绝对值或相对值。所谓绝对值，是指线段设定线段长度，可以是绝对值或相对值。所谓绝对值，是指线段的长度是固定的，

40、不随窗口尺寸的改变而改变。所谓相对值，是指长度的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为默认值为100%100%，即始终填满当前窗口。，即始终填满当前窗口。Noshade Noshade设定线条为无阴影，若默认则有阴影或立体效果。设定线条为无阴影，若默认则有阴影或立体效果。Color Color设定线条颜色，默认为黑色。可以采用颜色的名称。颜色可以用设定线条颜色，默认为黑色。可以采用颜色的名称。颜色可以用相应英文单词或以相应英文单词或以“#”#

41、”引导的一个十六进制代码来表示。引导的一个十六进制代码来表示。367.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(1)(1)插入图形插入图形 格式为格式为：img src=例：例：img src=bj.jpg width=100 height=100 hspace=10 vspace=10 align=middle 设置网页的背景图像、背景颜色可参照设置网页的背景图像、背景颜色可参照BODYBODY标记的相关属性。标记的相关属性。377.2 HTML7.2 HTML语言语言 7.2.3 7

42、.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(2)(2)插入背景音乐插入背景音乐 1)1)音频标记音频标记能在网页中加入背景声音，能在网页中加入背景声音，格式为格式为：bgsound src=src=your.midsrc=your.mid：设定：设定midimidi档案及路径，可以是相对或绝对。档案及路径，可以是相对或绝对。autostart=trueautostart=true：是否在音乐档下载完之后就自动播放。：是否在音乐档下载完之后就自动播放。truetrue是，是，falsefalse否否（默认值（默认值)。loop=infinit

43、eloop=infinite：是否自动反复播放。：是否自动反复播放。LOOP=2LOOP=2表示重复两次，表示重复两次，InfiniteInfinite表示重复多次。表示重复多次。要加入的背景声音文件的格式为要加入的背景声音文件的格式为.wav.wav、.mid.mid、.ram.ram等，播放次数为等，播放次数为-1-1时，声音将一直播放直到关闭网页。时，声音将一直播放直到关闭网页。387.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(2)(2)插入背景音乐插入背景音乐 2)2)使用使用E

44、MBEDEMBED标签嵌入音乐文件标签嵌入音乐文件 使用使用BGSOUNDBGSOUND标签嵌入背景音乐时，当最小化窗口时标签嵌入背景音乐时，当最小化窗口时BGSOUNDBGSOUND就会暂停，就会暂停，为了保证背景音乐的连贯性，建议使用为了保证背景音乐的连贯性，建议使用HIDDENHIDDEN了的了的EMBEDEMBED标签。标签。src=your.midsrc=your.mid：设定：设定midimidi档案及路径，可以是相对或绝对档案及路径，可以是相对或绝对autostart=trueautostart=true：是否在音乐档下载完之后就自动播放。：是否在音乐档下载完之后就自动播放。tr

45、uetrue是，是，falsefalse否否(默认值默认值)loop=trueloop=true：是否自动反复播放。：是否自动反复播放。LOOP=2 LOOP=2 表示重复两次，表示重复两次，truetrue是，是，falsefalse否否hidden=truehidden=true：是否完全隐藏控制画面，：是否完全隐藏控制画面，truetrue为是，为是，nono为否为否(默认值默认值)397.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(3)(3)插入视频插入视频 1)1)用用标记的标记

46、的dynsrcdynsrc属性可以向网页中加入属性可以向网页中加入.avi.avi视频剪辑文件。视频剪辑文件。格式为格式为：img border=BorderBorder：边框大小。：边框大小。SrcSrc：在浏览器尚未完全读入：在浏览器尚未完全读入AVIAVI文件时，先在文件时，先在AVIAVI播放区域显示的图像。播放区域显示的图像。DynsrcDynsrc：指定播放视频文件的路径和文件名。：指定播放视频文件的路径和文件名。LoopLoop：指定播放循环的次数。当为：指定播放循环的次数。当为-1-1时，则反复播放。时，则反复播放。LoopdelayLoopdelay：两次播放的时间间隔。：两

47、次播放的时间间隔。StartStart：指定何时开始播放。：指定何时开始播放。FileopenFileopen是文件打开时，是文件打开时，mouseovermouseover是鼠标是鼠标移到视频文件上时。移到视频文件上时。2)2)插入插入flashflash用用标记，其格式为标记，其格式为embed src=”flash文件文件407.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接2 2加入超级链接加入超级链接 超链接（超链接（HyperlinkHyperlink）可以看作是一个热点，它可以从当前）可以看作是一个热点，它可以从当前WebW

48、eb页定义的页定义的位置跳转到其他位置，包括当前页的某个位置、位置跳转到其他位置，包括当前页的某个位置、InternetInternet或本地硬盘或局域或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。网上的其他文件，甚至跳转到声音、图片等多媒体文件。当当WebWeb页包含超链接时，页包含超链接时，WebWeb页中的外观形式为彩色且带下划线的文字或页中的外观形式为彩色且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用锚点标记示文本或图片时

49、，将变成手形。超文本链接使用锚点标记来定义。来定义。标标记的记的格式为格式为：a href=“热点热点417.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接2 2加入超级链接加入超级链接 (1)(1)属性属性hrefhref为超文本引用，它的值为一个为超文本引用，它的值为一个URLURL，是目标资源的有效地址。，是目标资源的有效地址。在书写在书写URLURL时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，应写绝对路径应写绝对路径.(2)(2)属性属性namename指

50、定当前文档内的一个字符串作为链接时可以使用有效的指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址。目标资源的地址。(注意：注意：HrefHref不能与不能与namename同时使用。同时使用。)(3)Target=”_blank”(3)Target=”_blank”或或Target=”new”Target=”new”，将链接打开的空白页面或在，将链接打开的空白页面或在新的浏览器窗口中打开。新的浏览器窗口中打开。Target=”_parent”Target=”_parent”，将链接的页面内容，显示在直接父框架窗口中。，将链接的页面内容，显示在直接父框架窗口中。Target=”_