《框架网页的特点及制作方法..doc》由会员分享，可在线阅读，更多相关《框架网页的特点及制作方法..doc（7页珍藏版）》请在三一文库上搜索。
1、框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML 页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。一个框架结构有两部分网页文件构成：框架( Frame )：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。框架集( Frameset )：框架集也是一个网页文件，它将一个窗口通过行和列的方
2、式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。一、创建框架在创建框架集或使用框架前，通过选择 “查看 /可视化助理 /框架边框命令，使框架边框在文档窗口的设计视图中可见。1 、使用预制框架集(1、新建一个 HTML 文件，在快捷工具栏选择 “布局 ”，单击 “框架 按钮，在弹出的下拉菜单中选择 “顶部和嵌套的左侧框架 ”。2）、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动，直至合适的位置，这样顶部和嵌套的左侧框架就完成了。2、鼠标拖动创建框架（1）、新建普通网页，命名后将其打开。（2）、把鼠标放到框架边框上，出现双箭头光标时拖拽框架边框，可以垂直
3、或水平分割网页。二、保存框架每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称 topFrame （上方）、leftFrame （左侧）、 mainFrame （右侧）。选择菜单栏 文件 保存全部，将框架集保存为 index.html ，上方框架保存为 07.html ，左侧框架保存为 08.html ，右侧框架保存为09.html 。这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存 在本地站点根目录下，才能保证浏览页面时显示正常。三、编辑框架式网页虽然框架式网页把屏幕分割成几个窗口，每个框架（窗口）中放置 一个普通的网页，但是编辑
4、框架式网页时，要把整个编辑窗口当作一个网 页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。 框架的大小可以随意修改。1 、 改变框架大小用鼠标拖拽框架边框可随意改变框架大小。2 、 删除框架用鼠标把框架边框拖拽到父框架的边框上，可删除框架。3 、设置框架属性设置框架属性时，必须先选中框架。选择框架方法如下：选择菜单栏 窗口 框架，打开框架面板，单击某个框架，即可选中 该框架。在编辑窗口某个框架内按住 Alt 键并单击鼠标，即可选择该框架。 当一个框架被选择时，它的边框带有点线轮廓2. 设置框架属性选中框架，在属性面板上可以设置框架属性：框架名称、源文件、 空白边距、滚动条、重置
5、大小和边框属性等。需要注意的是： 1、框架是不可以合并的。 2、在创建链接时要用到框架名称，所以我们要很清楚的知道每个框架对应的框架名。四、在框架中使用超级链接在框架式网页中制作超级链接时，一定要设置链接的目标属性，为 链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在 新窗口，在导航条上创建链接时，一般将目标文档放在另一个框架中显示 （当页面较小时）或全屏幕显示（当页面较大时）。“目标 ”下拉菜单中的选项：* _blank 放在新窗口中。* _parent 放到父框架集或包含该链接的框架窗口中。* _self 放在相同窗口中（默认窗口无须指定）。* _top 放到整个浏览器窗口
6、并删除所有框架。在我们保存有框架名为 mainFrame 、leftFrame 、 topFrame 的框架后，在目标下拉菜单中，还会出现 mainFrame 、 leftFrame 、topFrame 选项：* mainFrame 放到名为 mainFrame 的框架中。* leftFrame 放到名为 leftFrame 的框架中。* topFrame 放到名为 topFrame 的框架中。五、制作框架页面1、选择菜单栏 窗口 框架，打开框架面板，选中整个框架集，如下图所示：在属性面板中，将行的值设置为 100，单位为像素，如下图所示：2、选择菜单栏 窗口 框架，打开框架面板，选中子框架集
7、，如下图所示：在属性面板中，将列的值设置为 200，单位为像素，如下图所示：这样，我们就完成了对整个框架的布局。下面我们来布局各个框架页面。3 、鼠标在 topFrame 框架中的空白处点击一下，我们会看见文档窗 口上方的文件名变为了 07.html 。在页面属性中将上、下、左。右边距全 部设为 0。插入一个 1 行 2 列的表格，宽度为 100 ，高度为 100px ，左单元 格宽度为 382px 并插入背景图片 img/103.jpg ，设置表格的背景颜色为 103.jpg 图片右边缘的绿色（用吸管吸取）。4 、鼠标在 leftFrame 框架中的空白处点击一下，我们会看见文档窗 口上方的
8、文件名变为了 08.html ，在页面属性中将上、下、左。右边距全 部设为 0。插入一个 6 行 1 列 的表格，表格宽度为 95 ，居中对齐。将第一个单元格的高度设为 20px ，选中其余单元格将高度设置为 50px 。分别输入文字设置导航栏目。分别对各个导航栏目建立链接关系，链接路径指向要链接到的网页，目标选择 mainFrame 框架。5 、鼠标在 mainFrame 框架中的空白处点击一下，我们会看见文档 窗口上方的文件名变为了 09.html ，在页面属性中将上、下、左。右边距 全部设为 0。自己设置一个欢迎页面至此，我们完成了一个框架网站的制作。这篇教程为 “Dreamweaver
9、 8 入门经典教程 ”的一部分。查看全套教程 >>>>> 。网页设计中使用框架的优缺点剖析2007-01-28 信息来源： 酷络网视力保护色：【大 中 小】【打印本页 】【关闭窗口 】框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主 要内容页面的框架。但是，框架的设计可能比较复杂 ;并且在许多情况下，您可以创建没有框架的Web 页，它可以达到使用一组框架所能达到的许多同样效果。例如，如果您想让导航条显示在页面的左 侧，则既可以用一组框架代替您的页面，也可以只是在站点中的每一页上包含该导航条。许多专业 Web 设计人员不喜欢使用框架，并
10、且许多浏览Web 的人也不喜欢框架。在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点 （例如， 每当访问者单击导航按钮时就重新加载导航框架内容的框架集。如果框架使用得法（例如，在允许其他框架的内容发生更改的同时，使一个框架中的导航控件保持静态，则这些框架对于某 些站点可能非常有用。并不是所有的浏览器都提供良好的框架支持，框架对于无法导航的访问者而言可能难以显 示。所以，如果您确实要使用框架，应始终在您的框架集中提供 noframes 部分，以方便不能 查看这些框架的访问者。您最好还要提供指向站点的无框架版本的显式链接，以用于那些虽然 其浏览器支持框架但不喜欢使用框架的访问者。使用框架具有以下优点每个框架都具有自己的滚动条 （如果内容太大，在窗口中显示不下，因此访问者可以独立 滚动这些框架。例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面 底部的访问者就不需要再滚动回顶部来使用导航条。使用框架具有以下缺点可能难以实现不同框架中各元素的精确图形对齐。对导航进行测试可能很耗时间。各个带有框架的页面的 URL 不显示在浏览器中，因此访问者可能难以将特定页面设为书签（除非您提供了服务器代码，使访问者可以加载特定页面的带框架版本。