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

《列表标签超链接标签框架标签.ppt》由会员分享，可在线阅读，更多相关《列表标签超链接标签框架标签.ppt（30页珍藏版）》请在三一办公上搜索。

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

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

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

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

5、指定的文件格式是浏览器能够直接显示的，那么单击超链接时将会直接显示相应文件。例如，如将href的值指定为图像文件，那么单击超链接就可以直接在浏览器中显示图像。如果href属性指定的文件格式是浏览器所不能识别的格式，那么将获得下载超链接的效果。例如，如果我们将超链接的目标文件指定为xxx.zip，那么当浏览者在浏览器中单击相应超链接时，则将弹出如图所示的对话框，提示进行下载。,提示文件下载对话框,锚点链接,1、设置锚点,2、创建锚点 链接,亚马逊战士,亚马逊战士,以下 HTML 代码说明了如何使用指向同一页面特定部分的超链接。锚点链接示例目录亚马逊战士|游侠|巫师亚马逊战士一个强悍的女人，唯一知

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

7、一样，巫师来自不体面的男巫师族，他能够使用死亡和召唤魔法控制怪物为已所用，擅长使用召唤亡灵的魔法。因为小时候在沼泽地里生活和学习魔法，致使他的皮肤犹如死尸，体型和骨胳的怪异更使得人们不敢正视并且远离他。但是毫无疑问，他是一位充满魔法力量的法师。返回目录,电子邮件链接 当浏览网页的用户单击了指向电子邮件的超链接后，系统将自动启动邮件客户程序（对于安装了 Windows 98/2000 操作系统的计算机，默认时启动 Outlook Express），并将指定的邮件地址填写到“收件人”栏中，用户可以编辑并发送该邮件，如图 所示。,联系,使用图像映射 1.什么是图像映射 例如，图 显示了一个表示中国政

8、区的电子地图页面，如果单击图中的不同区域，将跳转到不同的页面，介绍中国的各政区。,电子地图页面,又例如，图 显示了一个采用图像映射作为导航图的例子，当单击图中不同区域时，将把浏览者带到不同的栏目。此外，在这两个页面中，最下面一行的导航条也是用图像映射做的。,页面导航图实例,跳转到的栏目页面,2.创建图像映射 定义映射区域 对映射区域进行引用 下面以一个简单的实例来说明图像映射的制作方法。（1）首先在任意图形图像处理软件中打开要制作为图像映射的图像，找出所要定义的映射区域的坐标（例如在 Fireworks 中可以借助 Info 面板，在“画图”中则可以直接看状态栏），用笔记下来。,找出要定义区域

9、的坐标,例如，在图 中就要定义两个矩形区域，它们的坐标分别是“30,152,366,218”和“171,256,228,288”。,（2）编写 HTML 文件，在其中定义出映射区域，并在 IMG 标记符中引用映射区域，如下所示：-以下代码是 main.htm-图像映射示例请单击以下图像中的不同区域，以便跳转到不同的文件,（3）分别编写超链接的目标文件，并将它们放到与刚才编写的 HTML 文件所在的同一个目录中，如下所示：-以下代码是file1.htm-file1 我爱玩暗黑！-以下代码是file2.htm-file2暴雪公司太酷了！,（4）在浏览器中打开 main.htm，效果如图 3-32

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

11、表示打开同一的页面（这也是一般默认的打开方式）,（3）框架标签,我们在讨论框架时通常是指一个网页是不是框架网页，是不是框架网页的决定因素就是在一个IE浏览器里有几个页面组成。最常见的框架网页就是电子邮件。我们在左边点击相应的信箱，在右边就打开信箱。这样的网页结构就称为框架网页。,认识一下框架的标记：.New Page 2,此网页使用了框架，但您的浏览器不支持框架。,这是用来决定我们框架里的页面的宽度，其实也就是如何分配我们框架中窗口的大小和位置cols=20%,*表示我们这里的两个页面一个占浏览器的20%，另一个每写，意思也就是占剩下的80%,同样我们也可以通过象素的大小来定义，如果写成：co

12、ls=200,*则表示左边的是占200象素，右边同样是剩下的象素。,如果我们写成，即表示该框架网页是上下框架。,这两句也就是决定所分布的页面的位置名称，以及对他们进行命名。命名的主要目的是决定打开方式。在上面我们讨论过，如果希望在新窗口打开是_blank。但是，如果我们现在是个框架网页，我们希望左边的了解在右边的窗口打开，那超链接标签应该这样写：target=right 这里还要注意，right是由框架的名称决定的，如果框架名称改成其它内容，那target也应该改成相应内容。,在框架这里还有一个一种框架是嵌入页面里这里所用的语句是：Here is a Floating Frame这个标记是放在页面里面的，也就是放在.里在这里面所显示的也就是eg9.htm里的内容，还Here is a Floating Frame仅仅是个说明性语句，并不会显示在页面上。,框架在网页中的应用很多，比如我们经常用到的电子邮件，或是西祠里的版块等等。有一点一定要注意：框架页面的名称定义很重要，并且文件名与框架名不能混淆。,