html网页制作浮动框架,浮动框架在网页制作中使用技巧.doc

浮动框架在网页制作中使用技巧

浮动框架在网页制作中使用技巧摘要：首先介绍了浮动框架的应用特点，然后结合实际的使用技巧介绍了在浮动框架中：可以制作与其它页面之间的链接，设置浮动框架的滚动条及区域的颜色，根据需要可以设置浮动框架的自调高度，以及浮动框架在网页设计的模板中同样可以灵活应用。在介绍这些应用技巧的同时指出浮动框架在应用中的缺点，那就是不能进行可视化地操作，只能由代码编写来执行。

关键词：网页设计；浮动框架；锚记；自适应高度；模板

中图分类号：TP393.092 文献标识码：A 文章编号：1007-9599 (2012) 09-0000-02

浮动框架也叫嵌入式框架或内联框架，是一种特殊的框架页面。浮动框架就是在网页中嵌入一个框架，可以自由控制窗口大小，可以配合表格随意地在网页中的任意位置插入窗口。通过链接可以在这个有限的浮动窗口中显示理想的网页效果。

一、浮动框架的应用特点

正确使用浮动框架，可以给网站的创建带来许多便利，比如在个人网站中，可以将留言内容放在一个嵌入式框架里，这样既方便又漂亮；也可以为框架定义一个名字，并在其中显示链接网页，这样就实现了在各个页面之间快速跳转的目的。

尽管浮动框架可以插入到页面中的任意位置，不过遗憾的是，在DreamweaverCS3中不能可能实现可视化地制作浮动框架，需要用手写代码方式来实现。

二、网页上的对象超链接到嵌入的浮动框架

关键点是一定要给这个iframe命名。操作是。再把网页上建立的超链接语句应该写为：xxx

语句中的URL用相对路径较好，但也可以用绝对路径，height表示高度， width表示宽度，在实际应用可根据实际情况调整。是否显示页面滚动条用scrolling表示，有三个可用的参数为auto、yes、no，若省略了选项，则默认为auto。

三、浮动框架外面的元素链接框架内的锚记

在上面制作的基础上，仍然可以用超链iframe来做，例如：可参照以下的代码来完成：

test

主要是 a标签的target属性应该是框架的名称， target 属性规定在何处打开链接文档。另外如果需要连接到锚记的话需要加#锚记名称，再比如说，那么就可以用test连接过去。而 标签的 href 属性用于指定超链接目标的 URL。

四、设置浮动框架滚动条的颜色

将以下这段CSS放在框架链接的页面就可以看到效果了。至于颜色值按你的具体要求修改。

html{

scrollbar-face-color:# #00CCFF;

scrollbar-highlight-color:#FFCC00;

scrollbar-3dlight-color:#336666;

scrollbar-darkshadow-color:#666633;

scrollbar-Shadow-color:#666633;

scrollbar-arrow-color:#336666;

scrollbar-track-color:#FFFF00;

}

各条语句含义如下：

Crollbar-face-color:设定滚动条页面颜色；

Scrollbar-highlight-Color:设定滚动条斜面和左面颜色；

Scrollbar-3Dlight-Color:设定滚动条上边和左边的边沿颜色；

Scrollbar-darkshadow-Color:设定滚动条下边、右边边沿颜色。

Scrollbar-shadow-Color:设定滚动条下斜面和右面颜色；

Scrollbar-arrow-Color:设定滚动条两端箭头颜色；

Scrollbar-track-Color:设定滚动条底版颜色；

五、设置浮动框架的自适应高度

在使用iframe时经常会遇到所调用的页面在预览时出现滚动或页面不能完整显示的情况，对整个页面的美观产生较大影响，此时可在“代码”中添加下例中的代码，问题就迎刃而解了。

比如网页上有3个链接：链接1、链接2、链接3、和1个浮动框架：Iframetest。如果想通过这3个链接来改变浮动框架的高度，例如：点击“链接1”就将Iframetest的高度设为110；点击“链接2”就将Iframetest的高度改为230；点击“链接3”就将Iframetest的高度改为350，这样的效果该如何实现？

可以设置一个实例Iframe的自适应高度来解决这个问题：

六、浮动框架应用于模板中

首先制作一个带有表格布局的网页模板，设置可编辑区域时要不同于常规的类型，需要使用嵌入式浮动框架来实现。

(一)将可编辑区域设置为嵌入式浮动框架

1.将插入点置于要设置可编辑区域的单元格中，单击文档工具栏