电子商务网站设计

1、电子商务网站设计电子商务网站设计 教师：屈莉莉 2010-2011年下学期 信息管理与信息系统2010级(部分) u第10章 帧 帧=框架 第第1010章章 帧帧 u10.1 帧概述 u10.2 帧集和帧文档 u10.3 将链接定位到帧 u10.4 嵌套帧集 u10.5 内联帧 10.1 10.1 帧概述帧概述 u引入帧的概念 u许多非web应用程序使用独立窗口的概念协助进行组 织和控制。 在windows资源管理器这 样的应用程序中，不同窗口 可以独立于其他窗格单独操 作。 对于使用了帧的文档来说， 也能这样操作。 10.1 10.1 帧概述帧概述 u在最简单的层次上，帧在一个用户窗口提供了

2、多个独 立的可滚动的区域。 10.2 10.2 帧集和帧文档帧集和帧文档 u需要在单独的文档中定义帧的布局 u还要单独定义占据每个帧的文档 u10.2.1创建帧集 u10.2.2 帧的边界、边框和滚动栏 u10.2.3允许或禁止用户修改 .1创建帧集创建帧集 u以下代码是帧集文档的一个示例 关于这段代码的说明： (1)文档使用了帧集dtd(frameset.dtd) (2)没有body元素，改用标签 提供元素之下次一级容器 (3) 标签嵌套在标签 内，定义帧的内容以及帧本身的各种属性。 (4)除了和标签外，在 文档中再无其他内容。 .1创建帧集创建帧集

3、u1. 标签 u标签定义了文档中帧的布局。 指定帧应该位于行内还是列内，并指定每列的宽度 行或列的大小可以用用户代理窗口的如下方法指定： 1.百分比 2.像素 3.星号(*)：由用户代理分配大小 列frameset.html .1创建帧集创建帧集 u整个帧集都会占据整个用户代理窗口， ucols或rows属性中大小的数量还决定了有多少帧 u即在标签中的每个行、列大小值，具有 一个相应的标签对应。 ! 75 % - !-75 % - frameset cols = 25%, ! 325% - frameset rows = 50%, ! 2- 行frameset.html 1

4、.1创建帧集创建帧集 u2. 标签 u标签负责定义整个页面的布局（定义帧的数量 和每个帧的大小）定义如何将窗口分割为 框架 u标签负责定义每个帧的属性。定义了放置在每个帧 中的 html 文档。 uname属性指定 帧唯一的名称，可以在url、脚本中引用， 用来控制帧的内容。 usrc属性用来指定帧内要显示的内容的url u只使用这两个属性所形成的框架只有最小的边界，没有边 框，带有自动滚动栏。 10.2.2 10.2.2 帧的边界、边框和滚动栏帧的边界、边框和滚动栏 u说明 在这个例子中，我们设置了一个两列的帧集。 两个列各占据浏览器窗口的 50%。 html 文档 “fr

5、ame_a.htm” 被置于第一个列中， html 文档 frame_b.htm 被置于第二个列中： 10.2.2 10.2.2 帧的边界、边框和滚动栏帧的边界、边框和滚动栏 u标签支持以下属性 属性值用途 frameborder 取值为(1|0),缺省值为1 1 - 在每个页面之间都 显示边框 0 - 不显示边框 定义了内容页的边框 longdesc url定义框架页的说明，用作帧的说明 marginheight 像素 定义了框架中html文件显示的上下边界的 宽度,取值为px,缺省值由浏览器决定；帧 的内容与边框之间的距离 marginwidth 像素 定义了框架中html文件显示的左右边

6、界的 宽度,取值为px,缺省值由浏览器决定；帧 的内容与边框之间的距离 scrolling yes - 显示滚动条 no - 不显示滚动条 auto - 当 需要时再显示滚动条 定义是否有滚动条；取值为(yes|no|auto), 缺省值为auto 10.2.2 10.2.2 帧的边界、边框和滚动栏帧的边界、边框和滚动栏 u示例 frameborder属性0.html frameborder属性1.html scrolling属性yes.html scrolling属性no.html scrolling属性auto.html 10.2.310.2.3允许或禁止用户修改允许或禁止用户修改 u标签

7、还有一个noresize 属性 u作用：允许用户修改帧的大小或不允许用户修改。 u定义了浏览者是否可以通过拖拽改变框架页尺寸, u默认设置允许用户调整帧的大小。 noresize属性.html 10.3 10.3 将链接定位到帧将链接定位到帧 u要修改帧的内容，必须能够将目标指向帧。 u方法： （1）用name属性唯一标识每个帧；（2）在脚 本和锚链标签中使用这些名称将新内容放在帧内。 u例如 要将的内容填充到news帧： parent.news.location.href = http:/; 10.3 10.3 将链接定位到帧将链接定位到帧 u将内容放入帧内的最简单的方法就是在锚链的targ

8、et属 性中使用帧的名称 utarget属性用来定位内容出现的目标帧。 target属性可用的值 值 用途 _blank 在新窗口中打开被链接文档。 _self （默认）在当前帧中打开被链接文档。 _parent 在父帧集中打开被链接文档。 _top 在整个窗口中打开被链接文档，不在其他帧内 帧名称在“framename”中指定的帧中打开被链接文档 10.3 10.3 将链接定位到帧将链接定位到帧 将链接定位到帧将链接定位到帧.html.html menu.htmlmenu.html 前言 第1章 第2章 第3章 将链接定位到帧.html 10.4 10.4 嵌套帧集嵌套帧集 u如果希望既有行

9、又有列，则需要在一个帧集内嵌入另 一个帧集。 在这个布局中，在 基于行的帧集中第 二行内嵌入了一个 基于列的帧集。 frameset嵌套.html 10.5 10.5 内联帧内联帧 u内联帧用iframe 标签实现，会创建包含另外一个文档的内 联帧（即行内帧）。 10.5 10.5 内联帧内联帧 u内联帧属性 属性值描述 alignalign left 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此 框架。 right top middle bottom frameborderframeborder 1 规定是否显示框架周围的边框。 0 heightheight pixels 规定 iframe 的高度。 % longdesclongdesc url规定一个页面，该页面包含了有关 iframe 的较长描述。 marginheightmarginheight pixels定义 iframe 的顶部和底部的边距。 marginwidthmarginwidth pixels定义 iframe 的左侧和右侧的边距。 namename frame_name规定 iframe 的名称。 scrollingscrolling yes 规定是否在 iframe 中显示滚动条。no aut