HTML框架制作导航

HTML框架制作导航
HTML框架制作导航

HTML框架制作导航

本节单词记忆:属性 1.target 2._blank 3._self 4._top 5._parent

网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。

在上节作业中,如果单击left窗口中的导航列表超链接(如“注册&认证”、“买家帮助”等),在right窗口中显示链接的页面内容,其实这就是典型的导航页面,该如何实现?这就需要使用标签中的name属性和标签的target属性。

target目标窗口属性分为两类:一类是框架页面之间的链接;另一类是4个特殊窗口的超链接。

1.框架页面之间的链接

要设置框架之间的超链接,需要两步:

第一步:设计好框架集页面,并为每个框架窗口定义名称。https://www.360docs.net/doc/c35309148.html,

如:

第二步:设置导航栏中的超链接的target目标窗口属性,使其值为框架窗口的名字。

如:

下面我们就在上节示例的基础上,来实现框架之间的超链接。

示例1:

首先根据需要,创建好框架集页面,然后为每个框架窗口定义名称。设置框架集页面(frame Sets.html)的代码如下:

noresize="noresize" id="topFrame" title="topFrame" />

border="0">

noresize="noresize" />

下面设置导航页中的超链接,也就是设置示例1 1中left.html中的超链接,最关键的是将导航页中的各个链接图片或文字的目标打开方式设置为在框架中打开,即将target属性值设为框架窗口的名字。

由于left.html文档中有多个超链接,而且为了说明框架之间的链接,所以我们先准备几个链接页面,如:buy.html、sale.html、person_info.html。

设置了框架之间链接的left.html文档代码如下:

左侧导航页面

/>

/>

/>

设置左侧导航栏的超链接之后,使用浏览器打开frame Sets.html文档,运行效果如图1所示。

单击框架导航栏中的链接图片“买家帮助”,将会打开如图2所示的页面效果。同理,单击“卖家帮助”和“个人资料修改”超链接,在内容区都会打开相应的HTML文档页面。

图1 框架页面的默认显示页面

图2 在框架窗口中打开“买家帮助”介绍页面

2.4个特殊的窗口

在制作网页中的超链接时,默认情况下超链接会在当前窗口中打开。通过使用target属性,可以将目标页面在一个新的窗口中打开。

语法:

其中,target属性可以取4个值,这些值的具体含义见下表。

属性说明

_blank新启一个窗口打开链接

_self在同一个窗口中打开,默认取值(指没有设置target属性值时的情况)

_parent在上一级窗口中打开(框架页面中使用较多)

_top在整个浏览器窗口中打开

示例2:

左侧导航页面

/>

/>

/>

图3 打开了一个新窗口

本章总结

● 表单主要用来制作动态网页,方便和用户进行交互。例如:会员注册、购物订单、调查问卷、搜索等页面都会用到表单。

● 常用的表单元素有:文本框(text)、密码框(password)、单选按钮(radio)、复选框(checkbox)、列表框 (