[浮动框架在网页制作中的使用技巧] 想在浮动框架中显示某个网页
时间：2019-04-23 03:34:49 来源：雅意学习网 本文已影响 人 
摘要：首先介绍了浮动框架的应用特点，然后结合实际的使用技巧介绍了在浮动框架中：可以制作与其它页面之间的链接，设置浮动框架的滚动条及区域的颜色，根据需要可以设置浮动框架的自调高度，以及浮动框架在网页设计的模板中同样可以灵活应用。在介绍这些应用技巧的同时指出浮动框架在应用中的缺点，那就是不能进行可视化地操作，只能由代码编写来执行。
关键词：网页设计；浮动框架；锚记；自适应高度；模板
中图分类号：TP393.092 文献标识码：A 文章编号：1007-9599 (2012) 09-0000-02
浮动框架也叫嵌入式框架或内联框架，是一种特殊的框架页面。浮动框架就是在网页中嵌入一个框架，可以自由控制窗口大小，可以配合表格随意地在网页中的任意位置插入窗口。通过链接可以在这个有限的浮动窗口中显示理想的网页效果。
一、浮动框架的应用特点
正确使用浮动框架，可以给网站的创建带来许多便利，比如在个人网站中，可以将留言内容放在一个嵌入式框架里，这样既方便又漂亮；也可以为框架定义一个名字，并在其中显示链接网页，这样就实现了在各个页面之间快速跳转的目的。
尽管浮动框架可以插入到页面中的任意位置，不过遗憾的是，在DreamweaverCS3中不能可能实现可视化地制作浮动框架，需要用手写代码方式来实现。
二、网页上的对象超链接到嵌入的浮动框架
关键点是一定要给这个iframe命名。操作是，比如把iframe命名为page，然后写入HTML语言。再把网页上建立的超链接语句应该写为：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的自适应高度来解决这个问题：
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
六、浮动框架应用于模板中
首先制作一个带有表格布局的网页模板，设置可编辑区域时要不同于常规的类型，需要使用嵌入式浮动框架来实现。
（一）将可编辑区域设置为嵌入式浮动框架
1.将插入点置于要设置可编辑区域的单元格中，单击文档工具栏中的“拆分”按钮，在文档窗口上方打开代码视图，单击“布局”插入栏中的“iframe”按钮，在单元格中插入代码。
2.在标签中“>”左侧单击，按一空格后应用快速标签编辑器依次输入代码“name=”iframe_name” frameborder=”0” width=”value” height=”value” ”。
3.接着单击标签选择器中标签左侧的“td”标签，选中此单元格，然后选择“插入记录”|“模板对象”|“可编辑区域”，可设置可编辑区域的名称为“editregion1”。至此嵌入式浮动框架类型的可编辑区域设置完成，可保存此模板文件为“md.dwt”。
（二）应用模板创建网站浮动框架网页
创建网站网页主要是制作可编辑区域，此处就是嵌入式浮动框架中的内容。例如我们首先要制作一个简单的网页，然后将其设置为嵌入式浮动框架的起始页，完成此网页的创建。
在站点中新建网页文档。选择“文件”|“新建”，打开“新建文档”对话框，在左侧的“文档类型”列表中选择“模板中的页”，在“站点”中选择当前的站点，在“站点‘XX’的模板”列表中选择“md.dwt”，然后完成创建基于模板的网页，可保存为“ifpage.html”网页文件。
（三）基于浮动框架模板的网页应用
在利用模板创建的“ifpage.html”网页中，只有浮动框架可编辑区域在此页中才能被编辑修改，如何才能在此浮动框架中展示内容呢？
假如已经设置好了另外的一个网页“page1.html”，这时打开“ifpage.html”，打开代码视图，在标签内部单击，按空格键后打开快速标签编辑器，选择“src”然后单击“浏览”，在“选择文件”对话框中，选择“page1.html”后确定既可。保存预览“ifpage.html”网页时可看到此页的浮动框架区域展示的是“page1.html”网页内容。
正确使用浮动框架可以给网站的创建带来许多方便，网页设计者不需要单独增加复杂的框架集文档，直接在可以在浏览器窗口中嵌套子窗口中来显示网页，而且每个浮动框架都可以独立地定义，而不仅仅局限在一个浏览器窗口，可以在有限的空间里放无限的东西来展示网页丰富多彩的魅力。
参考文献：
[1]黄世吉等.Dreamweaver 网页制作案例教程（CS3版）[M].北京:航空工业出版社,2010
[2]赵静宇.利用浮动框架与表格结合设计网络课件的探索[J].中国医学教育技术.2007,21(3)
[3]卢成均.内联框架(Iframework)在网页设计中的一种应用[J].重庆文理学院学报(自然科学版).2006,5(2)
[4]吴智君,丘昊.浅析网格系统在网页设计中的重要性[J].计算机光盘软件与应用,2010,5
[作者简介]
田彦(1969.12-)，女，山东省淄博市高新技术开发区人，高级讲师，研究生，从事计算机应用技术与网络技术的教学工作。
