码迷,mamicode.com
首页 > 其他好文 > 详细

3.4 框架制作导航

时间:2014-06-20 18:28:29      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   http   tar   

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

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

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

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

1.框架页面之间的链接

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

第一步:设计好框架集页面,并为每个框架窗口定义名称。

如:<FRAME src="right.html” name="ightframe">

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

如:<a href=”right.html” target=”rightframe”>

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

示例1:

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

<FRAMESET rows="20%,*"  frameborder="no" border="0" framespacing="0">
  <FRAME src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <FRAMESET   cols="20%,*" framespacing="0" frameborder="no" border="0">
    <FRAME src="left.html" name="leftFrame" scrolling="No" noresize="noresize"  />
    <FRAME src="main.html" name="rightFrame"  />

    <!--name="rightFrame" 定义框架名,方便target引用-->
  </FRAMESET>
</FRAMESET>

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

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

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

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>左侧导航页面</TITLE>
</HEAD>

<BODY>
<P><A href="right.html" target="rightFrame">

   <!--target="rightFrame" right.html文档就会在名称为rightframe框架窗口中打开-->
   <IMG src="images/reg.jpg" width="158" height="31" border="0" /></A></P>
<P><A href="buy.html" target="rightFrame">
   <IMG src="images/buy.jpg" width="160" height="32" border="0" /></A></P>
<P><A href="sale.html" target="rightFrame">
   <IMG src="images/sale.jpg" width="158" height="31" border="0" /></A></P>
<P><IMG src="images/person.jpg" width="157" height="31" border="0" /></P>
</BODY>
</HTML>
 

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

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

bubuko.com,布布扣
图1 框架页面的默认显示页面
 
bubuko.com,布布扣
图2 在框架窗口中打开“买家帮助”介绍页面

2.4个特殊的窗口

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

语法:

<a href="url" target="_blank">

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

属 性说 明
_blank 新启一个窗口打开链接
_self 在同一个窗口中打开,默认取值(指没有设置target属性值时的情况)
_parent 在上一级窗口中打开(框架页面中使用较多)
_top 在整个浏览器窗口中打开

示例2:

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>左侧导航页面</TITLE>
</HEAD>

<BODY>
<P><A href="right.html" target="_blank">
   <IMG src="images/reg.jpg" width="158" height="31" border="0" /></A></P>
<P><A href="buy.html" target="_self">
   <IMG src="images/buy.jpg" width="160" height="32" border="0" /></A></P>
<P><A href="sale.html" target="r_parent">
   <IMG src="images/sale.jpg" width="158" height="31" border="0" /></A></P>
<P><A href="person_info.html" target="_topt">
   <IMG src="images/person.jpg" width="157" height="31" border="0" /></A></P>
</BODY>
</HTML>

 
bubuko.com,布布扣
图3 打开了一个新窗口

本章总结

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

● 常用的表单元素有:文本框(text)、密码框(password)、单选按钮(radio)、复选框(checkbox)、列表框(<select>和<option>)、按钮(button、submit和reset)、多行文本框(<textarea>)。

● 一个框架结构是由两部分组成的:框架集(FRAMESET)和框架(FRAME)。

● 框架集(FRAMESET)页面被划分的区域多少是通过属性rows和cols来设置的。

● 网页中超链接目标页面的打开方式有5种,可以通过target属性来设置。

本节作业:

制作如下图网页。 

 
bubuko.com,布布扣

注意事项:

1.框架制作导航对于新手还是较为复杂的,先要理清思路再来制作。

2.注意框架导航是多个网页,分清各个网页的关系和作用

3.关键是导航中的<A>中target一定要指定右边框架name属性的值。

网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧!

点击下载第三章案例及作业资源 返回《HTML入门经典》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/html/jc/506.html

3.4 框架制作导航,布布扣,bubuko.com

3.4 框架制作导航

标签:style   class   blog   code   http   tar   

原文地址:http://www.cnblogs.com/you-me/p/3796584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!