dreamweaver网页设计2

《dreamweaver网页设计2》由会员分享，可在线阅读，更多相关《dreamweaver网页设计2（45页珍藏版）》请在金锄头文库上搜索。

1、第二讲 HTML 语言,HTML语言是超文本标记语言（Hypertext Mark-up Language）的缩写,主要用来创建与系统平台无关的网页文档,它不是编程语言，而是一种描述性的标记语言。 所有网页软件都是以HTML为基础，学会了它可以更方便灵活地控制网页。特别是在动态网页的设计中，常常需要利用ASP、JSP、PHP等代码来输出网页的部分HTML代码，此时就必须对HTML标记相当熟悉才行。 HTML文件是纯文本文件，能用任意的文本编辑器编辑，如：记事本、写字板、Word、Dreamweaver、Frontpage等。 本讲将对常用的HTML标记符进行介绍。,一、HTML网页的基本组成与

2、特点,1、用HTML制作网页的简单实例 【例2.1】制作杜牧诗秋夕 制作过程： （1）用任何文本编辑器（如记事本、写字板、WORD等）输入下列文本（代码）： 杜牧诗秋夕 秋夕 杜牧 银烛秋光冷画屏 轻罗小扇扑流萤 天阶夜色凉如水 卧看牵牛织女星 （2）以纯文本格式存为example2-1.htm文件（设位置为：E:网页制作example）。 （3）打开浏览器，在地址栏中输入E:网页制作exampleexample2-1.htm，就会看到所制作的网页。,一、HTML网页的基本组成与特点,2、HTML网页的基本组成 启动Dreamweaver后，切换到代码浏览窗口，此时看到的HTML代码，即是网页

3、的基本组成部分，其代码为： example2-1 从中可见，一个最基本的网页一般由三个部分组成，分别是： （1） 标记用于定义网页文件的开始，对应的结束标记为则定义网页的结束。 （2） 该组标记用于定义网页的头，用来说明文件的一些基本信息，如文档标题、文档所用的字符集、搜索引擎可用的关键词、Javascript块以及不属于网页内容的其他信息等。 在这里，和标记定义网页的标题，该标题将显示在浏览器的标题栏中。 标记有很多用法，这里是用于指定网页所使用的字符集，是可选项。 （3） 用于定义网页的正文开始，用于定义网页正文的结束。网页的正文内容必须放在这两个标记之间，bgcolor为标记的属性，用于

4、指定网页的背景颜色，text也为标记的属性，用于指定网页正文的前景色。,一、HTML网页的基本组成与特点,3、HTML的特点 HTML文件是标准的文本文件，以纯文本形式存放，扩展名为“*.htm“或“*.html“。若系统为UNIX系统,则扩展名为“*.html“。HTML是由若干标记符和文本构成，标记符适用于组织网页的内容和控制输出格式，HTML具有以下几个特点： （1）HTML标记的一般格式 HTML标记均是用括起来的，大多数标记是成对出现的，有开始标记和对应的结束标记，结束标记多一根斜杠。许多标记还有属性，用于对标记进行详细设置。HTML标记的一般格式为： 例如： 但有的标记没有结束标记

5、，称为单标记，如： （2）各属性项间用空格分隔，属性值可用双引号或单引号引起来，也可不引而直接表达。例如控制文本字体的标记为，该标记有face、size、color属性，分别用于控制字体名、字体大小和字体颜色，用法为： 字体属性测试 （3）HTML标记不区分大小写，与和是相同的。,一、HTML网页的基本组成与特点,3、HTML的特点 （4）HTML中一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。 例如： 2001年7月13日，北京申奥成功！ 和 2001年7月13日， 北京申奥成功！ 都是正确的，且显示效果相同，但HTML标记中的一个单词不能分两行书写，如： 2001年7月1

6、3日，北京申奥成功！ 是不正确的。,一、HTML网页的基本组成与特点,3、HTML的特点 （5）HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。显示内容的换行用标记，换段用标记，表示段落开始，表示段落结束。如果源文件中有多个连续空格，显示时也只显示一个，若要显示多个空格，可以使用多个 。 例如： 2008北京奥运 与 2008 北京奥运 的浏览器显示效果均为 2008北京奥运 2008北京奥运 与 2008 北京奥运 的浏览器显示效果均为 2008 北京奥运 但是，我们注意到时：在源文件中加换行符，虽然显示效果不换行，但在原换行符处会加一个空格。,一、HTML网页的基

7、本组成与特点,3、HTML的特点 （6）网页中所有的显示内容都应受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。 （7）HTML标记可以嵌套使用，实现从不同角度对文本进行格式控制。嵌套使用时注意不要发生交叉嵌套。 比如若要以加粗、居中、红色显示“奥林匹克精神”文本，则实现的代码为： 奥林匹克精神 判断是否发生交叉嵌套的方法是：分别将标记符的开始标记和对应结束标记用线连接起来，只要这些连接彼此不相交，则嵌套就正确，否则嵌套错误。比如以下用法就发生了嵌套错误。 奥林匹克精神 各种标记符书写的先后顺序没有特别要求，只要不发生交叉嵌套就行。因此，以下三种用法等效。 奥林匹克精神

8、 奥林匹克精神 奥林匹克精神 （8）可以为网页加上注释，如例2.1中即为网页的注释部分，注释可以放在网页开头部分用于说明网页的功能等，或放在某个标记之后对标记加以说明。注释用“！”标记，“”表示注释结束，中间的所有内容表示注释，且可以换行。注释不是必须的，注释的内容不在浏览器中显示出来，仅为设计人员阅读方便。,二、文本及版面风格控制标记,（一）文本控制 1、文本格式标记 文本控制主要是控制文本的字体、字体大小和颜色，这通过标记来实现。 格式： 文本 功能：设置网页中普通文字的显示效果。 属性： (1)Face属性用于指定文字字体，如“楷体_GB2312”、“宋体”、“黑体”等。但要注意，浏览器

9、显示的字体与客户端安装的字体有关，如果网页文件中设置了客户端滑安装的字体，则以默认的宋体字显示。因此，在使用字体时，应尽量使用一般操作系统都会安装的宋休、黑体、楷体等。 (2)color属性用于设置字体的颜色。在HTML中颜色通常用#RRGGBB来表达，RR、GG、BB分别代表红色、绿色、和蓝色的分量值，用十六进制数表示，取值范围为00FF。通过改变三基色的混合量，即可形成各种各样的颜色。另外，颜色也可以用英文单词来表示。下面是常用颜色的取值及英文单词表。 颜色 红色 绿色 蓝色 黄色 黑色 白色 紫色 浅蓝色 取值 #FF0000 #00FF00 #0000FF #FFFF00 #00000

10、0 #FFFFFF #FF00FF #00FFFF 单词 Red Green Blue Yellow Black White Purple Aqua,二、文本及版面风格控制标记,（一）文本控制 (3)size属性用于指定字体的大小。 字体大小的表达方法有两种，一是设置为绝对字号，此时的设置值可以是1号，1号最小，7号最大，默认字号为3，可利用设置或更改默认字号。 例如，若要以蓝色，宋体2号字输出“网页设计技术”，则实现的代码为： 网页设计技术 另一种是设置为相对字号大小，此时的用法为，其中n代表字号改变的量，+表示字体在默认字号的基础上增大几号，-表示在默认字号的基础上递减几号字。 例如： 网

11、页设计技术,二、文本及版面风格控制标记,2、标题格式标记 标题格式使用Hn标记控制。 格式：标题文本 功能：用于定义文章内章节标题的显示格式，同时包括了标题的字体、大小、和段落间距。 说明：n表示标题字号，共六级，分别是1，2，3，4，5，6，数字越大，字号越小。 Align表示水平对齐方式，取值为left、right或center。 【例2.2】在网页中分别用六级标题标记符输出一个测试效果文本。 实现的代码为： 演示标题字体 这是第一级标题 这是第二级标题 这是第三级标题 这是第四级标题 这是第五级标题 这是第六级标题 ,二、文本及版面风格控制标记,运行效果如图2.1所示。,图2.1 标题字

12、演示,注意：用该标记实现的文章标题效果有限，通常还是用FONT标记实现文章实际标题的丰富多彩效果。,二、文本及版面风格控制标记,3、字体效果（字型设置）标记 HTML中还定义了一些用于改变字体效果的标记符，常用的有加粗、斜体、加下划线等。各种标记的格式和具体功能如表2.1所示： 表2.1字体效果标记表 标记 格式 功能 受影响的文字 加粗 受影响的文字 斜体 受影响的文字 加下划线 受影响的文字 标准打印机字体 受影响的文字 加删除线 受影响的文字 产生下标 受影响的文字 产生上标 受影响的文字 大字体文本 受影响的文字 小字体文本 受影响的文字 闪烁字注意： 不要频繁使用各种效果，太花哨的网

13、页反而会引起读者的反感。 一些浏览器不能正常显示某些效果，如加粗和斜体时却加了下划线或反向显示，或忽略。 可以将几种效果混用，如： 霜叶红于二月花,二、文本及版面风格控制标记,(二)版面风格控制 1、网页整体风格控制（文件主体）标记 对网页整体风格的控制主要通过文件主体标记及其相关属性来实现。 格式： 功能：设置文件主体。 属性： (1)background 设置网页背景图像，图像以平铺方式作为网页背景。image-url是图像文件的路径。 例如，若要用images/bg.gif作为网页的背景图像，则设置方法为： (2)bgcolor 设置网页的背景颜色，默认为白色。 (3)text 设置网页

14、非可链接文字的色彩，默认为黑色。 (4)link 设置网页可链接文字的色彩，默认为蓝色。 alink 设置网页活动链接文字的色彩，默认为蓝色。 Vlink 设置网页已访问过链接的文字色彩，默认为蓝色。 (5)leftmargin 设置页面左边空白。 Topmargin 设置页面上边空白。 Value 是空白量，可以是数值，也可以是相对页面窗口宽度和高度的百分比。 (6)bgproperties 该属性只有一个取值，即为FIXED，用于锁定网页的背景图像。锁定后，当前滚动页面时，背景图片就不会跟着滚动了。例如： 说明： body标记说明文件的主体，可以省略，中间可以插入其他标记和文字。 其属性可

15、以省略，也可以有一个或多个。,二、文本及版面风格控制标记,(二)版面风格控制 2、段落标记 格式： 功能：设置文章段落开始和结束。 属性：align是水平对齐方式，取值为left、right或center。 说明：段落结束标记可以省略，因为一个段落的开始表示上一个段落的结束。 例如： 白日依山尽黄河入海流 和 白日依山尽黄河入海流 都是合法的，显示效果一样。 注意：HTML中显示文字的分段不能通过源文件中的回车来实现。 3、换行标记 格式： 功能：另起一行显示文字。 说明： 该标记是单标记。 标记标记中在显示效果上都是另起一行书写。它们的不同之处是标记的行距较大，标记和行距较小。另外换行后的文本与前面的文本仍属同一段落，因此换行后字符和段落格式不会改变，这也与标记不同。 为保证某一单词的完整性，有时需要禁止在某处换行，此时可使用标记来实现。其用法为：文本该标记符作用的文本将在同一行显示，若一行显示不下，则超出部分