《框架里的乾坤》doc版

《《框架里的乾坤》doc版》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、6、框架里的乾坤（1）什么是框架　　前面我们介绍了很多网站的页面是用表格制作的，还有一种更方便的工具，就是使用框架。　　框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。　　将文档分割为几个框架后，Dreamweaver会自动产生一个没名字的框架体文件，比如我们看到的一个简单的左右框架页面（图1），实际上包含3个不同的文件，一个是框架体文件，还有两个在框架中显示内容的文件。图1　左右结构的框架页面　　框架体文件中保存页面中框架的数量，框架的尺寸、位置及每个框架的网页源文件和其它可

2、定义的属性。　　这是一个典型的利用框架制作的页面（图2），主体结构为上下结构，上面是主导航区，下面该是频道的内容。下部又被分为左右两个子框架，左侧为主要栏目，右侧为具体内容。图2　典型框架页面的效果（点击浏览） （2）建立一个简单的框架　　下面我们就来一起创建这个框架。新建一个空文档，调出“Object”面板，打开“Common”下拉菜单，选择“Frames”，这里提供了创建框架的快捷方式（图1）。　　　　　图1　创建框架的面板　　　　　　　　　　　　　图2　上下结构的框架　　　　　　　单击“Insert

3、TopFrame”图标，整个页面被拆分为上下两部分（图2）。　　我们选择“Windows”菜单下的“Frames”命令，调出Frame视窗（快捷键Ctrl+F10），在这里可以清楚地看到框架体的层次结构（图3），框架体边框为立体加粗的立体边界，而框架则是灰色的单线边界，里面显示框架的名字。图3　Frame视窗中的效果　　上面是topFrame，下面是mainframe。单击topFrame，选定这个框架，此时框架外有黑色框，表示我们现在处于此框架内（图4）。图4　选中上部框架　　单击mainframe，下

4、面的框架出现黑色边框，上面框架的黑色边框消失，表示我们处于mainframe框架内。　　我们将mainframe进行拆分。单击“Object”面板中的第一个图标，名字为“InsertLeftFrame”，可以看到下面的框架被拆分为左右两部分，一个简单的框架结构就建好了（图5）。图5　创建好的框架结构（3）框架属性的设置　　接下来我们向框架中添加网页内容。　　我们先制作好四个网页，分别为top.htm，用于显示在上部框架中；left.htm用于显示在下部左框架中；001.htm、002.htm用于显示在下部

5、右侧框架中（图1）。　　　top.htm　　　　　　left.htm　　　　　　001.htm　　　　　　002.htm图1　事先做好的四个页面（点击查看网页效果）　　单击Frame视窗中的topFrame，将上面的框架选定，此时可以看到编辑页面中此框架边界以虚线包围。　　调出属性面板，可以看到此框架的缺省名字为topFrame，如果框架很复杂，这个名字就不适用了。我们可以将其改名，只要在下面的输入框中输入新名字就行了，这里我们将其命名为myframe_top，给框架命名是为了便于区分各个网页中的框架（图

6、2）。图2　上部框架中引入文件　　接下来指定此框架中的源文件。单击“Src”输入框左面的文件图标，选择事先制作好的文件“Top.htm”，看，Top.htm网页显示在上面的框架中了（图3）。图3　上部框架引入文件后的效果　　我们可以调整框架的高度，使其与内容相适应。将鼠标指针放在上下框架的分界线上，当鼠标变为上下双箭头时，按下鼠标左键进行拖动，直接改变框架高度（图4）。图4　调整框架线高度　　这时我们看到框架与里面内容间总有一个间隙，我们可将这个间隙去掉。先选中myframe_top框架，将属性面板中的“

7、MarginWidth”、“MarginHeight”值均设为0（图5），这回再调整框架高度，可以使其刚好容纳里面的内容。图5　设置margin值为0　　按住ALT键，单击左侧的框架，选中leftFrame框架，将框架命名为“myframe_left”，源文件设为left.htm（图6），并调整框架宽度。图6　左部框架引入文件　　现在网页变成这个样子了（图7）。图7　左部框架引入文件后的效果　　最后我们选中右侧的框架，框架名为“myframe_main”，将其源文件设为001.htm。因为右侧框架内容可能

8、比较多，可以让此框架存在滚动条。在属性面板中，在Scroll列表中选择“Auto”。　　这样，如果右侧框架中的内容很多，就会自动出现滚动条（图8）。图8　右部框架引入文件　　别忘了保存文件哟！选择“File”菜单下的“Frameset”命令，将主框架体文件命名为myframe.htm。　　myframe.htm文件中保存的是什么信息呢？这个文件相当于一个汇总文件，要让浏览器知道框架的数目、大小比例，预先载入那些网页等信息。保存