列表标签超链接标签框架标签.ppt

1、第三章,列表标记 超链接标记框架标记,（1）列表标记,有序列表 无序列表,列表标记在网页中的应用也是很广泛的.列表的效果和我们在word的操作一样,当输入1等序列符号时,如果我们回车,此时则会自动产生2.在网页里也是一样.只不过此时我们得使用标记来定义. 列表主要分为:,有序列表 1. 创建有序列表 创建有序列表需要使用有序列表标记符 OL 和列表项标记符 LI，其中 LI 标记符的结束标记符可以省略，基本语法如下： 列表项 1 列表项 2 列表项 3 OL标记符具有两个常用的属性：type 和 start，分别用来设置数字序列样式和数字序列的起始值。start 属性的值可以是任意整数，typ

2、e 属性的值如表 2-3 所示：,有序列表的 type 属性值,当位于 OL 标记符内时，LI 标记符具有两个常用的属性：type 和 value。type 属性用于设置数字样式，取值与 OL 的 type 属性相同；value 属性用于指定一个新的数字序列起始值，以获得非连续性的数字序列。 例如，以下 HTML 代码显示了如何创建不同的有序列表，效果如图所示。,有序列表示例, 有序列表示例 用大写罗马字母表示的有序列表： 列表项1 列表项2 列表项3 起始数字为 3 的有序列表： 列表项1 列表项2 列表项3 编号不连续的有序列表 列表项1 列表项2 列表项3 变换了数字样式的有序列表 列表

3、项1 列表项2 列表项3 ,2. 有序列表的嵌套,以下HTML代码即显示了一个嵌套的有序列表，效果如图 2-12 所示。 嵌套的有序列表 嵌套的有序列表 列表项 1 子列表项 1子列表项 2子列表项 3 列表项 2 列表项 3 ,图 2-12 嵌套有序列表,无序列表 1 . 创建无序列表 以下 HTML 代码显示了如何创建无序列表，效果如图所示。 无序列表示例 默认无序列表： 列表项1列表项2列表项3 使用方块作为列表项标记的无序列表： 列表项1列表项2列表项3 使用圆形作为列表项标记的无序列表： 列表项1列表项2列表项3 ,有序列表和无序列表也可互相嵌套，如以下 HTML 代码所示（效果如图

4、所示）： 列表项1 列表项2 子列表项1 子列表项2 列表项3 ,混合嵌套列表,混合嵌套列表,（2）超链接标记,相对地址与绝对地址 什么是 URL 绝对 URL 与相对 URL 页面链接 锚点链接 电子邮件链接 使用图像映射,文字超链接默认时有下划线，并且显示为蓝色。当浏览者将鼠标移动到超链接上时，鼠标指针通常会变成手形，同时在状态栏中显示出超链接的目标文件。另外，超链接包括多种不同的状态，可以在 body 标记符中设置 link 等属性来控制超链接颜色的显示。 超链接示例 这是一个超链接 欢迎参观我的个人站点 ,在网页中设置超链接,“Link”决定还未访问的超链接的颜色，“Alink”决定访

5、问时超链接的颜色，而“Vlink”决定已访问过的超链接的颜色。,说明：如果href属性指定的文件格式是浏览器能够直接显示的，那么单击超链接时将会直接显示相应文件。例如，如将href的值指定为图像文件，那么单击超链接就可以直接在浏览器中显示图像。如果href属性指定的文件格式是浏览器所不能识别的格式，那么将获得下载超链接的效果。例如，如果我们将超链接的目标文件指定为xxx.zip，那么当浏览者在浏览器中单击相应超链接时，则将弹出如图所示的对话框，提示进行下载。,提示文件下载对话框,锚点链接,1、设置锚点,2 、创建锚点 链接,亚马逊战士,亚马逊战士,以下 HTML 代码说明了如何使用指向同一页面

6、特定部分的超链接。 锚点链接示例 目录 亚马逊战士|游侠|巫师 亚马逊战士一个强悍的女人，唯一知道的是，她来自靠近南部海域的广阔平原上的游牧民族，因为部落之间不断发生冲突，使得这位游牧战士习惯为自已而战，并促使她拥有强烈的中立个性和能在恶劣的环境中战斗旅行的体能。她擅长使用弓箭对付敌人，并能熟练使用长矛和其他的一些投掷类武器，空手格斗也是她所擅长的。 返回目录,游侠来自一个特殊的军队，靠近宗教圣地 Zakarum，一个以信念为盾随时准备战斗的军人。他为自己认为正确的信念而战，他的坚定给予他力量并祝福他的战友，同时残酷的惩罚那些罪人。因此有一些人称他为过度紧张的狂热者，但是其他的人公认他充满了力

7、量并且散发着仁慈的光芒。 返回目录 巫师来自南方充满蒸汽的沼泽地，一位披着斗蓬的神秘人物。就像他的名字一样，巫师来自不体面的男巫师族，他能够使用死亡和召唤魔法控制怪物为已所用，擅长使用召唤亡灵的魔法。因为小时候在沼泽地里生活和学习魔法，致使他的皮肤犹如死尸，体型和骨胳的怪异更使得人们不敢正视并且远离他。但是毫无疑问，他是一位充满魔法力量的法师。 返回目录 ,电子邮件链接 当浏览网页的用户单击了指向电子邮件的超链接后，系统将自动启动邮件客户程序（对于安装了 Windows 98/2000 操作系统的计算机，默认时启动 Outlook Express），并将指定的邮件地址填写到“收件人”栏中，用户

8、可以编辑并发送该邮件，如图 所示。,联系,使用图像映射 1. 什么是图像映射 例如，图 显示了一个表示中国政区的电子地图页面，如果单击图中的不同区域，将跳转到不同的页面，介绍中国的各政区。,电子地图页面,又例如，图 显示了一个采用图像映射作为导航图的例子，当单击图中不同区域时，将把浏览者带到不同的栏目。此外，在这两个页面中，最下面一行的导航条也是用图像映射做的。,页面导航图实例,跳转到的栏目页面,2. 创建图像映射 定义映射区域 对映射区域进行引用 下面以一个简单的实例来说明图像映射的制作方法。 （1）首先在任意图形图像处理软件中打开要制作为图像映射的图像，找出所要定义的映射区域的坐标（例如在

9、 Fireworks 中可以借助 Info 面板，在“画图”中则可以直接看状态栏），用笔记下来。,找出要定义区域的坐标,例如，在图 中就要定义两个矩形区域，它们的坐标分别是“30,152,366,218”和“171,256,228,288”。,（2）编写 HTML 文件，在其中定义出映射区域，并在 IMG 标记符中引用映射区域，如下所示： -以下代码是 main.htm- 图像映射示例 请单击以下图像中的不同区域，以便跳转到不同的文件 ,（3）分别编写超链接的目标文件，并将它们放到与刚才编写的 HTML 文件所在的同一个目录中，如下所示： -以下代码是file1.htm- file1 我爱玩暗

10、黑！ -以下代码是file2.htm- file2 暴雪公司太酷了！ ,（4）在浏览器中打开 main.htm，效果如图 3-32 所示。当用户单击“diabloII”所在区域时，将跳转到 file1；而单击下面的商标区域时，则跳转到 file2。,图 3-32 图像映射效果,超链接的打开方式,我们上网的时候，当我们点击了一个超链接，有时会在同一个窗口打开，而有的时候会打开新的窗口，当然有的时候我们可以人为的控制，点住超链接，右键在新窗口打开，这样我们就相当于建立一个新的页面 。还有的时候是在页面的一个区域打开，这些都是由超链接另外一个属性决定的：,target （目标） 一般写法： 新窗口

11、本窗口 父窗口 整个浏览器窗口 我们用的比较多的就是： target=_blank 表示超链接的页面在新的窗口打开 target=“_self” 则表示打开同一的页面（这也是一般默认的 打开方式）,（3）框架标签,我们在讨论框架时通常是指一个网页是不是框架网页，是不是框架网页的决定因素就是在一个IE浏览器里有几个页面组成。最常见的框架网页就是电子邮件。我们在左边点击相应的信箱，在右边就打开信箱。这样的网页结构就称为框架网页。,认识一下框架的标记：. New Page 2, 此网页使用了框架，但您的浏览器不支持框架。, 这是用来决定我们框架里的页面的宽度，其实也就是如何分配我们框架中窗口的大小和

12、位置cols=20%,*表示我们这里的两个页面一个占浏览器的20%，另一个每写，意思也就是占剩下的80%,同样我们也可以通过象素的大小来定义，如果写成：cols=200,*则表示左边的是占200象素，右边同样是剩下的象素。,如果我们写成，即表示该框架网页是上下框架。, 这两句也就是决定所分布的页面的位置名称，以及对他们进行命名。 命名的主要目的是决定打开方式。在上面我们讨论过，如果希望在新窗口打开是_blank。但是，如果我们现在是个框架网页，我们希望左边的了解在右边的窗口打开，那超链接标签应该这样写： target=right 这里还要注意，right是由框架的名称决定的，如果框架名称改成其它内容，那target也应该改成相应内容。,在框架这里还有一个一种框架是嵌入页面里 这里所用的语句是：