HTML框架制作导航.doc

HTML框架制作导航 网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。 在上节作业中，如果单击left窗口中的导航列表超链接（如“注册认证”、“买家帮助”等），在right窗口中显示链接的页面内容，其 实这就是典型的导航页面，该如何实现？这就需要使用FRAME标签中的name属性和A标签的target属性。 target目标窗口属性分为两类：一类是框架页面之间的链接；另一类是4个特殊窗口的超链接。 1.框架页面之间的链接 要设置框架之间的超链接，需要两步： 第一步：设计好框架集页面，并为每个框架窗口定义名称。WANGYEXX.COM 如：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文档代码如下： HTMLHEADMETA http-equiv=Content-Type content=text/html; charset=gb2312 /TITLE左侧导航页面/TITLE/HEAD BODYPA href=right.html target=rightFrame ?? !--target=rightFrame right.html文档就会在名称为rightframe框架窗口中打开--?? IMG src=images/reg.jpg width=158 height=31 border=0 //A/PPA href=buy.html target=rightFrame?? IMG src=images/buy.jpg width=160 height=32 border=0 //A/PPA href=sale.html target=rightFrame?? IMG src=images/sale.jpg width=158 height=31 border=0 //A/PPIMG src=images/person.jpg width=157 height=31 border=0 //P/BODY/HTML? 设置左侧导航栏的超链接之后，使用浏览器打开frame Sets.html文档，运行效果如图1所示。 单击框架导航栏中的链接图片“买家帮助”，将会打开如图2所示的页面效果。同理，单击“卖家帮助”和“个人资料修改”超链接，在内容区都会打开相应的HTML文档页面。 图1 框架页面的默认显示页面? 图2 在框架窗口中打开“买家帮助”介绍页面 2.4个特殊的窗口 在制作网页中的超链接时，默认情况下超链接会在当前窗口中打开。通过使用target属性，可以将目标页面在一个新的窗口中打开。 语法: a href=url target=_blank 其中，target属性可以取4个值，这些值的具体含义见下表。 属 性 说 明 _blank