图4.1框架集框架示例_猫扑大杂烩浏览者在浏览器窗口中所看到的画面，实际上是由多个页面一起形成的。图4.2框架集框架示例_华声论坛窗口左侧的导航区内显示众多版块分类的链接，它们可将用户导航到某个版块的帖子列表页面；窗口右侧的内容区则显示最热帖子或编辑推荐帖子等论坛的全局信息。当需要将多个网页组织到同一个窗口中同时显示时，需要使用框架集和框架。......
2023-10-19
HTML和CSS网页设计：超链接和表单目标框架与窗口
【摘要】：图4.11例4.8 的运行结果_超链接的默认目标为当前框架之所以会这样，是因为超链接的默认目标为当前框架或当前窗口。有时我们希望超链接指向的页面在指定的某个框架内显示，或在新的浏览器窗口中显示。图4.12例4.8 的运行结果_为超链接指定目标框架为超链接标签的target 赋值指定目标框架或目标窗口时，其值除了可以指定为事先命名的框架名称之外，还可以指定为几个浏览器能识别的关键字，这些关键字表示某些特定的框架或窗口。
当框架页面中包含链接时，我们希望设置超链接href 属性指向的目标页面在指定的框架中打开显示。此时，需要为<a></a>标签设置target 属性，将属性值赋为目标框架的名称即它的name 属性值。
以下代码简单演示了论坛版块导航的场景。
例4.8：
代码运行结果如图4.10 所示。
图4.10 例4.8 的运行结果_论坛版块导航
浏览器窗口左侧框架用于显示版块导航的页面nav.html，即论坛中的版块列表，右侧框架中的content.html 页面则是用户尚未选择具体版块时论坛的全局信息。
nav.html 页面的源代码如下：
单击超链接“版块一”，可以发现它的href 属性指向的页面board_1.html 将在当前框架本身中打开，这样覆盖了版块导航页面nav.html，如图4.11 所示。
图4.11 例4.8 的运行结果_超链接的默认目标为当前框架
之所以会这样，是因为超链接的默认目标为当前框架或当前窗口。即如果超链接所在的页面位于框架中，则超链接被单击后，框架中的页面从之前的页面跳转到超链接指向的页面；如果超链接所在的页面不在框架中而是占据整个窗口，则超链接被单击后，整个窗口从之前的页面跳转到超链接指向的页面。
这不是我们期望的结果。
有时我们希望超链接指向的页面在指定的某个框架内显示，或在新的浏览器窗口中显示。可在超链接<a></a>标签中设置target 属性实现这一点。
修改nav.html 页面的源代码如下：
(www.chuimin.cn)
重新运行页面。单击左侧框架中的论坛版块导航页面nav.html 中的某个版块，可以发现这些超链接指向的页面在右侧框架中打开了，覆盖了右侧框架之前的content.html页面。结果如图4.12 所示。
图4.12 例4.8 的运行结果_为超链接指定目标框架
为<a></a>超链接标签的target 赋值指定目标框架或目标窗口时，其值除了可以指定为事先命名的框架名称之外，还可以指定为几个浏览器能识别的关键字，这些关键字表示某些特定的框架或窗口。
target 属性的值见表4.4。
表4.4 超链接标签的target 属性的值
再次修改nav.html 页面的源代码如下：
然后重新测试页面。
➢单击版块一，board_1.html 在超链接所在的当前框架中打开显示，当前框架原有的nav.html 页面被覆盖。
➢单击版块二，board_2.html 在新的浏览器窗口中打开，如果保持这个新的窗口不关闭，此时再单击版块二，浏览器会再次新建窗口显示board_2.html 页面。
➢单击版块三，board_3.html 在整个浏览器窗口中打开，框架集中所有框架都被覆盖。
➢单击版块四或版块五，board_4.html 或board_5.html 在新的浏览器窗口中打开，如果保持这个新的窗口不关闭，此时再单击版块四或版块五，浏览器不再新建窗口，而是在刚才新的窗口中显示另一个页面或者在新的窗口中刷新已显示的页面。实际上，这是多个超链接共享同一个新窗口的情形：如果自定义名称的窗口目前存在则直接使用它，如果目前不存在则新建它再使用它。
➢单击版块六，board_6.html 在右侧框架即name 属性值为mainFrame 的框架中打开显示。
有关基于HTML与CSS网页设计的文章
- 详细阅读
- 详细阅读
-
HTML与CSS网页设计：输入标签详细阅读
图3.5例3.2 的运行结果说明代码中两个标签分别创建了一个文本框和一个提交按钮。标签的type 属性用于设置标签创建哪种类型的表单元素，这个属性的默认值为text 即文本框。表3.1标签的type 属性除type 属性用于设置标签的类型之外，还支持其他一些属性，用于设置其名称，初始值、图像地址、选中与否的状态等。表3.2标签的属性......
2023-10-19
-
清除浮动-基于HTML与CSS网页设计详细阅读
清除浮动可以理解为打破横向排列。图8.10例8.6 的运行结果_未清除浮动前说明按照之前所述的浮动的规则，secondDiv 上浮到firstDiv 右侧。假设出于某种需要，我们希望secondDiv 仍然出现在firstDiv 的下方，就像firstDiv没有设置浮动，仅为secondDiv 设置向左浮动那样。图8.11例8.7 的运行结果_清除左侧浮动说明在secondDiv 上设置了清除左侧浮动，也就是说它的左侧不能有浮动元素，这样导致它自己换行显示以满足这一规则。以下代码演示了清除右侧浮动的场景。......
2023-10-19
-
HTML与CSS网页设计：表格与列表详细阅读
视频教学资源学校目标理解表格的结构掌握表格相关的标签掌握单元格合并理解列表的分类掌握两种列表及列表项目的标签本章单词请在预习前完成下列单词的学习，将其写在横线上。A.width cellspacingB.cellspacing widthC.cellspacing cellpaddingD.cellpadding cellspaing2.使用（）标签为表格创建标题，使用（）标签代替
标签可以创建标题单元格。表格8.创建网页，使用表格存储你所在班级的学生成绩表，包含学号、姓名、语文、数学和外语等信息。学生成绩表9.在网页中使用有序列表显示水果名称，如下图所示。...... 2023-10-19
-
CSS层叠样式表-基于HTML与CSS网页设详细阅读
A.ID 选择器B.伪类选择器C.类选择器D.HTML 标签选择器3.假设有多条样式规则由一个独立的样式文件包含，现在有一个网页要使用这个样式文件中的样式规则，应在此网页中使用（ ）标签链接这个样式文件，并设置此标签的（ ）属性的值为这个样式文件的地址。登录页面CSS 的英文全称为Cascading Style Sheet，中文译名通常是层叠样式表或级联样式表。......
2023-10-19
-
HTML与CSS网页设计中的背景设置详细阅读
使用与背景相关的CSS 属性，可以设置一个区域的背景颜色、背景图像。与背景相关的CSS 属性见表6.1。表6.1常用的CSS 样式属性_背景例6.1：代码运行结果如图6.1 所示。图6.1例6.1 的运行结果_背景说明网页元素的背景显示时，背景图像优先于背景颜色。......
2023-10-19
-
HTML与CSS网页设计：嵌入多媒体功能示范详细阅读
例1.17：在网页中的显示结果如图1.19 所示。图1.19例1.17 的运行结果注意浏览器本身并不具备播放音频、视频和FLASH 动画等多媒体的能力，它需要调用本机安装的ActiveX 控件或浏览器插件才能播放。大部分浏览器识别标签，但仍有少部分浏览器只将标签视作嵌入网页的多媒体。其中object 标签的属性见表1.4。图1.22球员信息4.制作一个网页，背景颜色是“#FFD39B”，如图1.23 所示。图1.32腾讯首页其中有京东商城的通栏广告，它是嵌入在网页中的FLASH 动画。......
2023-10-19
相关推荐