《Dreamweaver CS3网页设计案例教程（第二版） 教学课件 ppt 作者 沈大林 主编 第1章 HTML简介》由会员分享，可在线阅读，更多相关《Dreamweaver CS3网页设计案例教程（第二版） 教学课件 ppt 作者 沈大林 主编 第1章 HTML简介（16页珍藏版）》请在金锄头文库上搜索。
1、,第 1 章,HTML 简介,1.1 【案例 1】第 1 个 HTML 网页 相关知识 1HTML 文件特点 HTML（hypertext makeup language，超文本置标语言）不是一种程序语言，而是一种描述文档结构的置标语 言，它与操作系统平台的选择无关，只要有浏览器就可以运行 HTML 文档。HTML 使用了一些约定的标记，对 WWW 上 的各种信息进行标记后，浏览器会自动根据这些标记，在屏幕上显示出相应的内容。自从 1990 年它首次用于网页 制作后，大多数网页都是由 HTML 或将其他（如 JavaScript 语言等）嵌套在 HTML 中编写的。 一个元素的元素体中可以有其
2、他的元素。“属性名”、“”和“属性值”合起来构成一个完整的属性，一个 元素可以有多个属性，各个属性用空格分开。 需要说明的是，HTML 是一门发展很快的语言，早期的 HTML 文件并没有如此严格的结构，但是现在流行的浏 览器为了保持对早期 HTML 文件的兼容性，也支持不按上述结构编写的 HTML 文件。一般来讲，HTML 的元素有下 列三种表示方法： （1）文件或超文本。,（2）元素名,属性名“属性值“文本或超文本。,（3）。,第三种写法仅用于一些特殊的标识，例如换行标识，它仅仅通知浏览器在此处换行，因而不需要界定作,用范围。部分标识拥有自己的属性，能够为页面上的 HTML 标识提供附加信息
3、。属性通常由属性名和值成对出现，,只可加于起始标识中。格式如下：,name=“value“,其中，name 为属性名称，value 为所设置的属性值。例如：,标识定义了 HTML 页面的主体标识，附加的 bgcolor 属性将可以告诉浏览器网页的背景颜色，上面代,码的意思是将网页的背景色设置为蓝色。,属性值通常被包含在双引号中。在某些情况下，属性值本身包含引号，此时可以使用单引号代替通常使用的,双引号。,标识名称不区分大小写，例如、和表示相同的意思。万维网联盟（world wide web,consortium，W3C）在 HTML 4 中建议使用小写标识。,2网页基本结构标记,（1）：最基本
4、的标识，用来通知客户端该文档是 HTML 文档，该标记在 HTML 文档中不可缺,少。表示 HTML 文档开始，表示 HTML 文档结束。注意：HTML 文档中的起始链接标签“：网页头部标识，标明文档的头部信息，可以提高网页文档的可读性，一般包括标题、 段落、列表等。它可以忽略，但一般不推荐这样做。 （3）：网页主题内容标识，用来指明文档的主体区域。其中包含了网页的正文内容，一般 不可缺少。 上述三个标记用于描述页面的整体结构，它们不影响页面的显示效果，是帮助 HTML 工具对 HTML 文档进行解 释和过滤的。 （4）：网页标题，必须放在标识之内。 TITLE 标识是文件头中的标识，只能出现
5、在文件头中。TITLE 标明该 HTML 文件的题目，是对文件内容的概括。 一个好的题目应该能让读者从中判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中，而是以窗口 的名称显示出来。除了标识窗口外，当将某一个网页存入书签或文件时，TITLE 还用做书签名或默认的文件名。 其长度没有限制，但过长的题目会导致回行，一般情况下它的长度不应超过 64 个字符。,（5）BODY,BGCOLOR=“#RRGGBB“：使用标识中的 BGCOLOR 属性，可以设置网页的背景颜色。使用的,格式有以下两种：,在第一种格式中，RR、GG、BB 分别用来表示颜色中的红色、绿色和蓝色成分的多少，数值越大，颜色
6、越深，,它们取值分别为 00FF 的十六进制数。红、绿、蓝三色按一定比例混合，可以得到各种颜色。例如，当 RR=FF，,GG=FF，BB=00 时，表示为黄色；当 RRGGBB 取值为 000000 时，则为黑色；当 RRGGBB 取值为 FFFFFF 时，则为白,色。,第二种格式是直接使用颜色的英文名称来设置网页的背景颜色。例如：,：用来设置网页的背景颜色为蓝色。,：用来设置网页的背景颜色为红色。,：用来设置网页的背景颜色为白色。,（6）：图像标识，用来加载图像与 GIF 动画。标识最重要的属性是 SRC，用来指明图像与 GIF 动,画文件的路径。其格式如下：,（7）：换行标识，表示以后的内
7、容移到下一行。它是单向标识，没有。,（8）：保留文本原来格式的标识，可以将其中的文本内容按照原来的格式显示，否则浏览器,、,会自动取消文本中的连续多个空格、回车换行等内容。,（9）：粗体标识，可使其中的文字变为粗体。,3其他常用标记,（1）：正文的标题标识。此外，还有第一、二、三、四、五、六级标题标识，分别为、,、和。一般情况下，浏览器对标题作如下解,释：,H1 黑体，特大字体，居中，上下各有两行空行。,H2 黑体，大字体，上下各有一到两行空行。,H3 黑体（斜体），大字体，左端微缩进，上下空行。,H4 黑体，普通字体，比 H3 要有更多的缩进，上边空一行。,H5 黑体（斜体），与 H4 有相
8、同的缩进，上边空一行。,H6 黑体，与正文有相同的缩进，上边空一行。,标题标识可以有对齐属性“ALIGN#“，“#”一般取值为“Left”（标题居左）“Center”（标题居中）和,“Right”（标题居右）。例如， 标题 2 。,（2）：段落标识，可以将其内的文字另起一段显示，段与段之间有一个空行。段落标识可以有多,种属性，比较常用的属性是“Aligh#”。“#”可以是“Left”、“Center”或“Right”，其含义同上文。浏览器 是基于窗口的，用户可随时改变显示区的大小，所以 HTML 将多个空格以及回车等效为一个空格，这和通常的文 字处理器不同。 （3）注释标识：用来在 HTML
9、源文件中插入注释，注释在显示时会被浏览器忽略，在浏览器窗口中是不可见,的。它以“结束，即“,这里是注释,“。,4文件的路径名 （1）绝对路径：绝对路径是写出文件所在位置的全部路径，系统按照全部路径时文件进行查找。绝对路径中 的盘符后用“：”或“：/”，各个目录名之间以及目录名与文件名之间应用“”或“/”分隔开。绝对路径名 的写法及其含义如表 1-1-1 所示。 （2）相对路径：相对路径是以当前文件所在路径和子目录为起始目录，所查找文件相对于这个其实目录的相 对位置。通常都采用相对路径，这样可以保证文件整体移动后，不会产生断链现象。相对路径名的写法及其含义 如表 1-1-2 所示。 5URL 统
10、一资源定位器（uniform resource locator，URL）是某一文件在 WWW 上的地址编码。它指出了文件在 Internet 中的位置，这样就不会出现重复或由于编码不统一而出现无法浏览等问题。当用户因查询信息给出 URL,地址时，WWW 服务器就可以根据它找到网络资源的位置，并将该资源传送给用户的计算机。当单击网页中的链接,点时，就将 URL 地址的请求传送给了 WWW 服务器。,1.2 【案例 2】“中国诗词佳句-作者”网页,相关知识,1文字的大小、颜色和字体,（1）字体大小：HTML 文件默认可以有七种字号，1 号最小，7 号最大。默认字号为 3，可以用“FONT SIZE
11、=,字号“设置默认字号。设置文本的字号有两种办法：一种是设置绝对字号，即使用标志“；另,一种是设置文本的相对字号，即使用标志“。用第二种方法时，“+”号表示字号变大，“-”号,表示字号变小。,（2）文字颜色：文字的颜色可以用指定，其中的 rrggbb 可以是 6 位十六进制数，,分别指定红、绿、蓝的值；也可以在标识中直接使用标准颜色的英文名称直接指定文字的颜色，如表 1-2-1 所示。,（3）文字字体：文字字体可以用指定。FACE 属性的值可以有一个或,多个，即可以设置多个字体。首选第一种字体显示，在第一种字体不存在时使用第二种字体显示，以此类推。例,如：,文字的字体,2文字风格,网页中的文字
12、可以有多种多样的效果，使文字具有不同的风格，使网页更加绚丽。部分文字风格标识符如表,1-2-2 所示。,3边框包围的文字,用户可以通过标记定义文字的边框。,1.3 【案例 3】“飞鱼和飞鸟”网页,相关知识,1调整图像大小和给图像加边框,在网页中插入图像时使用的标记是，用来加载 GIF 图像与动画，“SRC”属性用来输入图像的路径。在,网页中加载 GIF 动画的方法与加载 GIF 图像的方法一样，GIF 动画文件的扩展名也是.gif，文件格式是 GIF89A。,（1）调整图像大小：使用标记中的 HEIGHT 和 WIDTH 属性可以调整图像的大小。HEIGHT（决定图像的高）,和 WIDTH（决
13、定图像的宽）的取值单位为像素。,（2）给图像加边框：使用标记中的 BORDER 属性可以给图像加边框。BORDER 的取值单位为像素，当它,的取值为 0 或者不加 BORDER 属性时，则没有边框。,通过标记中的 HEIGHT 和 WIDTH 属性调整图像，虽然可以改变图像在网页中的大小，但是调整过大会使图像,严重失真，因此合理设置 HEIGHT 和 WIDTH 属性，才能得到最好的显示效果。 2背景平铺图像和图像文字说明 （1）设置背景平铺图像：使用标记中的 BACKGROUND 属性，可设置网页的平铺背景图像，其格式如下：,BODY,BACKGROUND=“图像文件名或 URL“,（2）添
14、加图像文字说明：为了增强图像在网页中的显示效果，可以为图像添加文字说明。当鼠标移到图片上 方时，会出现说明文字。在关闭浏览器中的载入图像命令时，说明文字可以替代图像。使用标记的 ALT 属 性可为图像添加文字说明。 在网页中，经常需要将图像和文本放在一起进行显示。使用标记的 ALIGN 属性可以调整图像与文本的 相对位置。使用标记中的 VSPACE 和 HSPACE 属性可以调整图像与文本间的距离。VSPACE（图与文上下距离） 和 HSPACE（图与文左右距离）的单位均为像素。 标记中的 ALIGN 属性用于调整图像与文字的对齐方式，其主要含义如下： （1）ALIGN 项为默认设置时：图像的
15、底部与其他文本或图像的底部对齐。 （2）ALIGN=top：图像的顶部与其他文本或图像的顶部对齐。 （3）ALIGN=middle：图像的中间与其他文本或图像的中部对齐。 （4）ALIGN=bottom：图像的底部与其他文本或图像的底部对齐。,（5）ALIGN=left：图像位于屏幕左边。,（6）ALIGN=right：图像位于屏幕右边。,1.4 【案例 4】“数字指针表”网页,相关知识,1添加背景音乐,使用标记可以在网页中插入背景音乐，标记可以放在与标记内的任何地,方。引导音乐文件的属性是 SRC，其格式如下：,2在网页中插入 Flash 动画,在网页中包含多媒体对象，最常用刻的两个标记是和
16、。,（1）标记：使用标记不仅可以在网页中插入 Flash 动画，还可以使用户下载并显示由插件支,持的其他多媒体应用程序。插入 Flash 对象的方法同添加背景音乐的方法一样，标记可以放在与,标记内的任何地方。引导 Flash 动画文件的属性是 SRC，格式如下：,当浏览器遇到标记时，会加载其中指定的文件并确定它的 MIME 类型。MIME 信息告知浏览器正在下,载的文件类型，然后浏览器查找与该 MIME 类型一致的插件，如果有就使用，如果没有则会显示一条错误信息，,并且提示用户下载该插件。,（2）标记：该标记可以使网页中包含 Java Apple、多媒体文件。当浏览器遇到标记时，,会加载相应的文件并根据该标记包含属性的值来显示它。,1.5 【案例 5】“链接技术演示”网页,相关知识,1链接文件使用的 HTML 标记,链接也叫超文本链接。在网页中加入超文本链接，就是通过单击一部分文字、图像或图像中的一个区域，即,可弹出另一个网页或本网页的另一部分内容。,HTML 文
