网页设计javascript-窗口框架.ppt

**网页设计JavaScript-窗口框架详解** 窗口框架是HTML中一种特殊布局技术，允许在一个浏览器窗口内分割出多个独立的区域，每个区域可以加载不同的网页内容。这种技术在创建复杂的网页布局，尤其是需要多个关联页面同时展示的情况下非常有用。 **8.1 窗口框架简介** 窗口框架的基本思想是通过`<frameset>`标签将浏览器窗口划分为多个小窗口，每个小窗口由`<frame>`标签定义，可以加载不同的HTML文档。以下是一个基本的框架结构： ```html <frameset> <frame src="url1" name="window1"> <frame src="url2" name="window2"> ... <NOFRAMES>...</NOFRAMES> </frameset> ``` `<frameset>`标签用来定义整个框架集，`<frame>`标签则定义每个子窗口，`src`属性指定了子窗口要加载的URL，`name`属性为子窗口命名，便于后续的引用。`<NOFRAMES>`标签用于提供不支持框架的浏览器的替代内容。 **8.1.3 窗口框架的分割方式** 窗口框架的分割有两种方式：水平分割（使用`rows`属性）和垂直分割（使用`cols`属性）。例如： ```html <frameset rows="180, *" cols="*"> <frame name="windows1" src="left.html" scrolling="auto"> <frame name="windows2" src="main.html"> </frameset> ``` 在这个例子中，窗口被分为两行，第一行高度为180像素，第二行占据剩余空间。同样，可以使用`cols`属性来定义列的分割。 **8.2 窗口框架控制** 在框架设置中，`<frameset>`标签有一些关键属性，如`rows`、`cols`、`border`、`bordercolor`和`frameborder`。 - `rows`和`cols`属性分别用于定义行和列的大小，可以使用像素值、百分比或剩余值（用星号`*`表示）。 - `border`属性设置框架边框的宽度，单位通常为像素。 - `bordercolor`属性定义边框的颜色。 - `frameborder`属性控制是否显示框架之间的边框，取值为`0`或`1`，`0`表示无边框，`1`表示有边框。 **8.2.1 框架设置举例** 例如，以下代码创建了一个三列的框架，第一列宽40%，第二列宽为剩余空间的2/3，第三列宽为剩余空间的1/3： ```html <frameset cols="40%,2*,*"> ... </frameset> ``` **8.3 FRAME间的链接** 在框架环境中，可以通过`<a>`标签的`target`属性来指定链接打开的位置。例如，如果希望链接在名为`window1`的框架中打开，可以这样写： ```html <a href="newpage.html" target="window1">点击打开新页面</a> ``` **8.4 浮动窗口** 浮动窗口是一种特殊的框架形式，它可以在网页的任何位置浮动显示，而不是固定在浏览器窗口的某个部分。实现浮动窗口通常需要JavaScript的支持，通过动态改变`<iframe>`元素的CSS属性（如`position`、`top`、`left`等）来实现。 窗口框架是网页设计中的一个重要工具，它提供了更灵活的布局选项，使得在单个浏览器窗口内管理多个独立页面成为可能。理解并熟练运用框架技术，可以帮助开发者创建出更加丰富和互动的网页体验。然而，需要注意的是，由于框架可能对搜索引擎优化（SEO）和无障碍访问（WCAG）造成挑战，因此在设计时应谨慎考虑其适用性。