Dreamweaver网页设计2

单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第二讲 HTML 语言,HTML语言是超文本标记语言（Hypertext Mark-up Language）的缩写,主要用来创立与系统平台无关的网页文档,它不是编程语言,而是一种描述性的标记语言。,所有网页软件都是以HTML为根底,学会了它可以更方便灵活地控制网页。特别是在动态网页的设计中,常常需要利用ASP、JSP、PHP等代码来输出网页的局部HTML代码,此时就必须对HTML标记相当熟悉才行。,HTML文件是纯文本文件,能用任意的文本编辑器编辑,如：记事本、写字板、Word、Dreamweaver、Frontpage等。,本讲将对常用的HTML标记符进行介绍。,1,一、HTML网页的根本组成与特点,1、用HTML制作网页的简单实例,【例2.1】制作杜牧诗秋夕,制作过程：,（1）用任何文本编辑器（如记事本、写字板、WORD等）输入以下文本（代码）：,杜牧诗秋夕,秋夕,杜牧,银烛秋光冷画屏,轻罗小扇扑流萤,天阶夜色凉如水,卧看牵牛织女星,（2）以纯文本格式存为example2-1.htm文件（设位置为：E:网页制作example）。,（3）翻开浏览器,在地址栏中输入E:网页制作exampleexample2-1.htm,就会看到所制作的网页。,2,一、HTML网页的根本组成与特点,2、HTML网页的根本组成,启动Dreamweaver后,切换到代码浏览窗口,此时看到的HTML代码,即是网页的根本组成局部,其代码为：,example2-1,从中可见,一个最根本的网页一般由三个局部组成,分别是：,（1）,标记用于定义网页文件的开始,对应的结束标记为则定义网页的结束。,（2）,该组标记用于定义网页的头,用来说明文件的一些根本信息,如文档标题、文档所用的字符集、搜索引擎可用的关键词、Javascript块以及不属于网页内容的其他信息等。,在这里,和标记定义网页的标题,该标题将显示在浏览器的标题栏中。标记有很多用法,这里是用于指定网页所使用的字符集,是可选项。,（3）,用于定义网页的正文开始,用于定义网页正文的结束。网页的正文内容必须放在这两个标记之间,bgcolor为标记的属性,用于指定网页的背景颜色,text也为标记的属性,用于指定网页正文的前景色。,3,一、HTML网页的根本组成与特点,3、HTML的特点,HTML文件是标准的文本文件,以纯文本形式存放,扩展名为*.htm或*.html。假设系统为UNIX系统,则扩展名为*.html。HTML是由假设干标记符和文本构成,标记符适用于组织网页的内容和控制输出格式,HTML具有以下几个特点：,（1）HTML标记的一般格式,HTML标记均是用括起来的,大多数标记是成对出现的,有开始标记和对应的结束标记,结束标记多一根斜杠。许多标记还有属性,用于对标记进行详细设置。HTML标记的一般格式为：,例如：,但有的标记没有结束标记,称为单标记,如：,（2）各属性项间用空格分隔,属性值可用双引号或单引号引起来,也可不引而直接表达。例如控制文本字体的标记为,该标记有face、size、color属性,分别用于控制字体名、字体大小和字体颜色,用法为：,字体属性测试,（3）HTML标记不区分大小写,与和是相同的。,4,一、HTML网页的根本组成与特点,3、HTML的特点,（4）HTML中一行可以写多个标记,一个标记也可以分多行书写,不用任何续行符号。,例如：,2001年7月13日,北京申奥成功！,和,2001年7月13日,北京申奥成功！,都是正确的,且显示效果相同,但HTML标记中的一个单词不能分两行书写,如：,2001年7月13日,北京申奥成功！,是不正确的。,5,一、HTML网页的根本组成与特点,3、HTML的特点,（5）HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。显示内容的换行用标记,换段用标记,表示段落开始,表示段落结束。如果源文件中有多个连续空格,显示时也只显示一个,假设要显示多个空格,可以使用多个 。,例如：,2008北京奥运,与,2008,北京奥运,的浏览器显示效果均为,2008北京奥运,2008北京奥运,与,2008,北京奥运,的浏览器显示效果均为,2008,北京奥运,但是,我们注意到时：在源文件中加换行符,虽然显示效果不换行,但在原换行符处会加一个空格。,6,一、HTML网页的根本组成与特点,3、HTML的特点,（6）网页中所有的显示内容都应受限于一个或多个标记,不应有游离于标记之外的文字或图像等,以免产生错误。,（7）HTML标记可以嵌套使用,实现从不同角度对文本进行格式控制。嵌套使用时注意不要发生交叉嵌套。,比方假设要以加粗、居中、红色显示“奥林匹克精神文本,则实现的代码为：,奥林匹克精神,判断是否发生交叉嵌套的方法是：分别将标记符的开始标记和对应结束标记用线连接起来,只要这些连接彼此不相交,则嵌套就正确,否则嵌套错误。比方以下用法就发生了嵌套错误。,奥林匹克精神,各种标记符书写的先后顺序没有特别要求,只要不发生交叉嵌套就行。因此,以下三种用法等效。,奥林匹克精神,奥林匹克精神,奥林匹克精神,（8）可以为网页加上注释,如例2.1中即为网页的注释局部,注释可以放在网页开头局部用于说明网页的功能等,或放在某个标记之后对标记加以说明。注释用“！标记,“表示注释结束,中间的所有内容表示注释,且可以换行。注释不是必须的,注释的内容不在浏览器中显示出来,仅为设计人员阅读方便。,7,二、文本及版面风格控制标记,（一）文本控制,1、文本格式标记,文本控制主要是控制文本的字体、字体大小和颜色,这通过标记来实现。,格式：,文本,功能：设置网页中普通文字的显示效果。,属性：,(1)Face属性用于指定文字字体,如“楷体_GB2312、“宋体、“黑体等。但要注意,浏览器显示的字体与客户端安装的字体有关,如果网页文件中设置了客户端滑安装的字体,则以默认的宋体字显示。因此,在使用字体时,应尽量使用一般操作系统都会安装的宋休、黑体、楷体等。,(2)color属性用于设置字体的颜色。在HTML中颜色通常用#RRGGBB来表达,RR、GG、BB分别代表红色、绿色、和蓝色的分量值,用十六进制数表示,取值范围为00FF。通过改变三基色的混合量,即可形成各种各样的颜色。另外,颜色也可以用英文单词来表示。下面是常用颜色的取值及英文单词表。,颜色 红色 绿色 蓝色 黄色 黑色 白色 紫色 浅蓝色,取值#FF0000#00FF00#0000FF#FFFF00#000000#FFFFFF#FF00FF#00FFFF,单词 Red Green Blue Yellow Black White Purple Aqua,8,二、文本及版面风格控制标记,（一）文本控制,(3)size属性用于指定字体的大小。,字体大小的表达方法有两种,一是设置为绝对字号,此时的设置值可以是1号,1号最小,7号最大,默认字号为3,可利用设置或更改默认字号。,例如,假设要以蓝色,宋体2号字输出“网页设计技术,则实现的代码为：,网页设计技术,另一种是设置为相对字号大小,此时的用法为,其中n代表字号改变的量,+表示字体在默认字号的根底上增大几号,-表示在默认字号的根底上递减几号字。,例如：,网页设计技术,9,二、文本及版面风格控制标记,2、标题格式标记,标题格式使用Hn标记控制。,格式：标题文本,功能：用于定义文章内章节标题的显示格式,同时包括了标题的字体、大小、和段落间距。,说明：n表示标题字号,共六级,分别是1,2,3,4,5,6,数字越大,字号越小。,Align表示水平对齐方式,取值为left、right或center。,【例2.2】在网页中分别用六级标题标记符输出一个测试效果文本。,实现的代码为：,演示标题字体,这是第一级标题,这是第二级标题,这是第三级标题,这是第四级标题,这是第五级标题,这是第六级标题,10,二、文本及版面风格控制标记,运行效果如图2.1所示。,图2.1 标题字演示,注意：用该标记实现的文章标题效果有限,通常还是用FONT标记实现文章实际标题的丰富多彩效果。,11,二、文本及版面风格控制标记,3、字体效果（字型设置）标记,HTML中还定义了一些用于改变字体效果的标记符,常用的有加粗、斜体、加下划线等。各种标记的格式和具体功能如表2.1所示：,表2.1字体效果标记表,标记 格式 功能,受影响的文字 加粗,受影响的文字 斜体,受影响的文字 加下划线 受影响的文字 标准打印机字体 受影响的文字 加删除线 受影响的文字 产生下标 受影响的文字 产生上标 受影响的文字 大字体文本 受影响的文字 小字体文本 受影响的文字 闪烁字注意：,不要频繁使用各种效果,太花哨的网页反而会引起读者的反感。,一些浏览器不能正常显示某些效果,如加粗和斜体时却加了下划线或反向显示,或忽略。,可以将几种效果混用,如：,霜叶红于二月花,12,二、文本及版面风格控制标记,(二)版面风格控制,1、网页整体风格控制（文件主体）标记,对网页整体风格的控制主要通过文件主体标记及其相关属性来实现。,格式：,功能：设置文件主体。,属性：,(1)background 设置网页背景图像,图像以平铺方式作为网页背景。image-url是图像文件的路径。,例如,假设要用images/bg.gif作为网页的背景图像,则设置方法为：,(2)bgcolor 设置网页的背景颜色,默认为白色。,(3)text 设置网页非可链接文字的色彩,默认为黑色。,(4)link 设置网页可链接文字的色彩,默认为蓝色。,alink 设置网页活动链接文字的色彩,默认为蓝色。,Vlink 设置网页已访问过链接的文字色彩,默认为蓝色。,(5)leftmargin 设置页面左边空白。,Topmargin 设置页面上边空白。,Value 是空白量,可以是数值,也可以是相对页面窗口宽度和高度的百分比。,(6)bgproperties 该属性只有一个取值,即为FIXED,用于锁定网页的背景图像。锁定后,当前滚动页面时,背景图片就不会跟着滚动了。例如：,说明：,body标记说明文件的主体,可以省略,中间可以插入其他标记和文字。,其属性可以省略,也可以有一个或多个。,13,二、文本及版面风格控制标记,(二)版面风格控制,2、段落标记,格式：,功能：设置文章段落开始和结束。,属性：align是水平对齐方式,取值为left、right或center。,说明：段落结束标记可以省略,因为一个段落的开始表示上一个段落的结束。,例如：,白日依山尽黄河入海流,和,白日依山尽黄河入海流,都是合法的,显示效果一样。,注意：HTML中显示文字的分段不能通过源文件中的回车来实现。,3、换行标记,格式：,功能：另起一行显示文字。,说明：,该标记是单标记。,标记标记中在显示效果上都是另起一行书写。它们的不同之处是标记的行距较大,标记和行距较小。另外换行后的文本与前面的文本仍属同一段落,因此换行后字符和段落格式不会改变,这也与标记不同。,为保证某一单词的完整性,有时需要禁止在某处换行,此时可使用标记来实现。其用法为：文本该标记符作用的文本将在同一行显示,假设一行显示不下,则超出局部将被裁剪掉。,14,二、文本及版面风格控制标记,(二)版面风格控制,4、预排格式标记,格式:预排格式的文本,功能：保存文字在纯文本编辑器中的格式,原样显示,不受前面的文字格式和段落格式的影响。,说明：假设已用其他文本编辑器编好了一段文本,如果把它放进网页文件,常常需要加许多标记才能到达原来的显示效果。如果在文本开头加上,在未尾加那么中间就不用加其他标记了,这时文本中间的回车换行符就起作用了。,5、文本对齐方式标记,格式：文本,功能：设置多个段落的文本居中、居左、不是居右。,属性：align是水平对齐方式,取值为left、right或center。,说明：,对齐方式可以在多个标记中实现,如、等。如果多个段落有相同的对齐方式,则可以将这些段落嵌套进、之中