《框架里的乾坤.docx》由会员分享，可在线阅读，更多相关《框架里的乾坤.docx（10页珍藏版）》请在三一文库上搜索。
1、.6、框架里的乾坤（1）什么是框架 前面我们介绍了很多网站的页面是用表格制作的，还有一种更方便的工具，就是使用框架。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。将文档分割为几个框架后，Dreamweaver会自动产生一个没名字的框架体文件，比如我们看到的一个简单的左右框架页面（图1），实际上包含3个不同的文件，一个是框架体文件，还有两个在框架中显示内容的文件。 图1左右结构的框架页面框架体文件中保存页面中框架的数量，框架的尺寸、位置及每个框架的网页源文件和其它可定义的属性。 这是一个典型的利用框架制作的页面（图2），主体结构为上下结构，上面是主导航区，下面该是频
2、道的内容。下部又被分为左右两个子框架，左侧为主要栏目，右侧为具体内容。 图2典型框架页面的效果（点击浏览） （2）建立一个简单的框架下面我们就来一起创建这个框架。新建一个空文档，调出“Object”面板，打开“Common”下拉菜单，选择“Frames”，这里提供了创建框架的快捷方式（图1）。 图1创建框架的面板图2上下结构的框架 单击“Insert Top Frame”图标，整个页面被拆分为上下两部分（图2）。我们选择“Windows”菜单下的 “Frames”命令，调出Frame视窗（快捷键Ctrl+F10），在这里可以清楚地看到框架体的层次结构（图3），框架体边框为立体加粗的立
3、体边界，而框架则是灰色的单线边界，里面显示框架的名字。图3Frame视窗中的效果上面是topFrame，下面是mainframe。单击topFrame，选定这个框架，此时框架外有黑色框，表示我们现在处于此框架内（图4）。图4选中上部框架单击mainframe，下面的框架出现黑色边框，上面框架的黑色边框消失，表示我们处于mainframe框架内。我们将mainframe进行拆分。单击“Object”面板中的第一个图标，名字为“Insert Left Frame”，可以看到下面的框架被拆分为左右两部分，一个简单的框架结构就建好了（图5）。 图5创建好的框架结构（3）框架属性的设置接下来我们向框架中
4、添加网页内容。我们先制作好四个网页，分别为top.htm，用于显示在上部框架中；left.htm用于显示在下部左框架中；001.htm、002.htm用于显示在下部右侧框架中（图1）。top.htmleft.htm001.htm002.htm图1事先做好的四个页面（点击查看网页效果）单击Frame视窗中的topFrame，将上面的框架选定，此时可以看到编辑页面中此框架边界以虚线包围。调出属性面板，可以看到此框架的缺省名字为topFrame，如果框架很复杂，这个名字就不适用了。我们可以将其改名，只要在下面的输入框中输入新名字就行了，这里我们将其命名为myframe_top，给框架命名是为了便于区
5、分各个网页中的框架（图2）。图2上部框架中引入文件接下来指定此框架中的源文件。单击“Src”输入框左面的文件图标，选择事先制作好的文件“Top.htm”，看，Top.htm网页显示在上面的框架中了（图3）。图3上部框架引入文件后的效果我们可以调整框架的高度，使其与内容相适应。将鼠标指针放在上下框架的分界线上，当鼠标变为上下双箭头时，按下鼠标左键进行拖动，直接改变框架高度（图4）。图4调整框架线高度这时我们看到框架与里面内容间总有一个间隙，我们可将这个间隙去掉。先选中myframe_top框架，将属性面板中的“Margin Width”、“Margin Height”值均设为0（图5），这回再调
6、整框架高度，可以使其刚好容纳里面的内容。 图5设置margin值为0按住ALT键，单击左侧的框架，选中leftFrame框架，将框架命名为“myframe_left”，源文件设为left.htm （图6），并调整框架宽度。 图6左部框架引入文件现在网页变成这个样子了（图7）。图7左部框架引入文件后的效果最后我们选中右侧的框架，框架名为“myframe_main”，将其源文件设为001.htm。因为右侧框架内容可能比较多，可以让此框架存在滚动条。在属性面板中，在Scroll列表中选择“Auto”。这样，如果右侧框架中的内容很多，就会自动出现滚动条（图8）。 图8右部框架引入文件别忘了保存文件哟！
7、选择“File”菜单下的“Frameset”命令，将主框架体文件命名为myframe.htm。myframe.htm文件中保存的是什么信息呢？这个文件相当于一个汇总文件，要让浏览器知道框架的数目、大小比例，预先载入那些网页等信息。保存此文件的另一个好处是框架中调入网页文件时，Src框中会呈现相对目录，而不是本地的目录名称。按下F12，预览一下我们刚做的网页吧！（图9）图9三个框架都引入文件后的效果（点击浏览）看来框架的使用也并不难！ （4）框架间的链接现在我们想实现这样一个目标，点击左侧框架中的主题，对应的文章便会呈现在右侧的页框架中。下面来看看如何来完成这样的链接。选中左侧的第一个条目“集邮
8、天地”，调出属性面板，在Link框中选择相应的文件，这里我们选择001.htm，再单击“target”列表框，从中选择要显示此内容的框架名，这里选择“myframe_main”，表示链接在框架myframe_main中打开（图1）。 图1选择打开文件的目标框架接下来我们选择“文学天地”，链接到002.htm文件， “target”还是设为“myframe_main”（图2）。 图2框架间的链接其余的链接也这样建立，这里就不再细说。 进入浏览器，单击左侧条目，右侧框架就显示出页面的内容（图3）。 图3框架间加入链接后的效果（5）设置主框架标题主框架文件（也就是最外面的框架）是所以框架文件的载体，
9、通常是首页或特定主题的进入点，因而有必要设置网页的标题。 当光标在框架内时，按下Ctrl+J调出的“Page Properties”对话框只能设置对应框架内源文件的页面属性。要想设置主框架文件（myframe.htm）的属性，可以将鼠标移动到最外层框架（在本例中为上下结构的框架）的框线上，当鼠标指针变为双向箭头时单击鼠标左键，使可选定整体框架（图1）。图1选中框架的方法再次调出“Page Properties”对话框，就可以设置主框架文件的属性了（图2）。图2设置主框架标题我们将Title设为“笨象的家”，对框架集而言，背景图或背景颜色的设定是没有任何意义的（图3）。 图3设置过标题的框架网页（点击浏览）单击“OK”，主框架标题设置完了。看看效果吧！（6）去掉框架的分隔线有些网站是用框架来设计的，但表面却看不出来，这是因为看不到页框间分隔线和页框滚动条。下面我们就看一下如何设计这样的框架。 先选取整个框架集，在属性面板上，从Borders下拉菜单中选择“No”（图1）。图1设置框架分隔线同样，将下面的框架体的Borders也设为No，再浏览此页面，框线消失了（图2）。图2无框线框架网页效果（点击浏览）好了，框架里的乾坤很大，这里只是用了个简单的例子讲了其基本的使用方法，你可以根据这些内容创建更复杂的框架，充分展示自己的设计才能。 :