第12讲  布局技术-框架
1.1教学目标：
◆ 知识目标
1. 熟练掌握框架页面的创建过程。
2. 掌握框架集和框架文件的区别。
3. 掌握框架集属性和框架文件属性的设置。
4. 掌握框架结构中文件的链接添加方法。
◆ 技能目标
1. 能灵活运用Dreamweaver CS6提供的框架结构定制不同的页面布局。
2. 实现在框架结构指定区域引入外部文件。
◆ 品质目标
培养学生认真细致、踏实进取的精神
1.2教学重点：
1. 掌握框架集和框架文件的区别。
2. 掌握框架集属性和框架文件属性的设置。
3. 掌握框架结构中文件的链接添加方法。
1.3 教学难点
掌握框架集属性和框架文件属性的设置。掌握框架结构中文件的链接添加方法。
1.4教学方法：讲练结合，任务驱动、分子任务操练
1.5课时安排：2课时
1.6教学对象分析：
这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：
一、激趣导入，揭示课题
在网页设计中，框架是经常被用到的一种技术，用框架可以将浏览器[窗口分成几个部分，每个部分各自包含独立的页面文件，当替换或修改某个页面时将不会影响其他页面。框架结构通常用于将网航区和内容区。
二、使用框架
我们访问Internet时经常可以看到这样一些论坛网站，左边是每个讨论区的名称，点击任意一个讨论区就可以在右部区域中看见相应讨论区的内容，不过左右部分是独立显示的。例如拖动左边的滚动条不会影响右侧的显示效果。这是因为在页面中利用了框架技术，把浏览器的显示空间分割为几个部分，每个部分都独立地显示页面内容。而且把几个框架结合
在一起构成框架集，能够让页面具有更为丰富的效果。
0.1  框架的概念
框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。框架集是HTML文件，它定义一组框架的布局和属性。
框架的作用是把浏览器划分成几个部分，每个部分可以各自独立地显示在窗口中，但也可以实现彼此互相控制的作用。使用框架可以使页面的结构更加合理、清晰而丰富多彩。基于框架的页面作为单一页面时，每个框架都包含单一的HTML文挡，该文挡包含完全独立的内容和独立的滚动条。
html下拉菜单的制作方法下面的示例显示了一个由三个框架组成的框架布局：一个较窄的框架位于左侧面，其中包含导航条；一个框架横放在顶部，其中包含Web站点的徽标（LOGO）和标题，一个大框架占据了页面的其余部分，其中包含主要内容。这些框架中的每一个窗口都显示单独的HTML文档。如图3-96所示。
图3-96  一个了应用框架的页面
在此示例中，当访问者浏览站点时，在顶部框架中显示的文档永远不更改。侧面框架导航条包含链接，单击其中某一链接会更改主要内容框架的内容，但左侧面框架本身的内容保持静态。无论访问者在左侧单击了哪一个链接，右侧主要内容框架都会显示适当的文档。
注意，框架不是文件。您很可能会以为当前显示在框架中的文档是构成框架的一部分，但该文档实际上并不是框架的一部分。框架是存放文档的容器，任何一个框架都可以显示任意一个文档。
0.2  创建框架和框架集
框架的构建也是从一个正常的文档开始的，我们可以很容易地将一个页面分割为多个框架窗格，从而构建框架。在Dreamweaver中，可以自己设计各种框架，也可以使用预设的几种框架格式。
1．创建框架集
在创建框架之前，应使用“框架边框”命令。我们可以先新建一个页面，然后执行“查看/可视化助理/框架边框”命令，可以看见编辑窗口中出现一个边框，用鼠标点击边框之后可以看见虚线框，说明新建的页面中已经附带了框架。如图3-97所示。
图3-97  在文档窗口的四周显示出框架的边框
用鼠标拖拽边框，松开鼠标之后就可以把窗口一分为二，这样就把页面分为两个边框。比如拖拽左右边框可以把窗口分为左右两个部分，而拖拽上下边框可以把窗口分为上下两个部分。另外，窗口的四个角也可以拖拽，这样可以直接把窗口分为四个区域。如图3-98所示。
如需删除边框，可用鼠标把需要删除的线拖拽到父框架的边框上即可删除它。
2．插入预置的框架集
Dreamweaver预先设计了多种框架集，这些预定义的框架集包括了最常见的几种框架集格式，有了这些框架集，创建框架就变得更加简易直观了。
具体操作如下：单击“常用”面板右侧的小三角，切换到“布局”面板，在面板上有一个“框架”按钮。单击右侧的三角按钮，在弹出的下拉列表会出现预定义的框架集，选择需要的框架类型即可。如图3-99所示。
图3-98 拖动边框角创建框架
图3-99 选择预定义的框架集
使用预定义的框架集，也可在“插入”菜单中执行“HTML/框架”命令，在打开的下拉菜单中选择需要的框架样式。
3．使用框架检视器
使用框架检视器就可以在框架检视器中查看或编辑了，框架检视器为文件中的框架提供了一种可视的方法，不仅可以显示框架结构，而且可以通过单击框架检视器面板里的框架或框架集，以选定文件中的框架或框架集。使用框架检视器可以使用户更方便地编辑不同框架中的文档。执行“窗口/框架”命令，就会在右侧的面板组中显示框架检视器面板。如图3-100所示。
图3-100  框架检视器
每一个框架集都由一个较粗的立体边框所包围，而每一个框架都有一个细边框。用户可以从框架面板中直观地看到整个页面的框架结构，包括每个框架的名称。
4．嵌套的框架集
框架允许嵌套，即在一个框架集中插入另一个框架集。比如要创建图3-101所示的框架，可以先拖动边框垂直一分为二，然后在右下角的框架面板中点击右部的框架，再按下鼠标拖拽边框。
图3-101  嵌套的框架集
0.3  框架和框架集的保存
框架页面是由多个文挡组成的，对框架的编辑事实上是对多个文档在进行编辑，因此在保存框架时需要多个步骤。由于各文挡都是独立的，需要对它们逐一进行保存。
1．保存框架文件
保存框架文件可按如下方法操作：
在框架面板中单击要保存的框架，选择“文件\保存框架”命令，或按Ctrl+S键，出现“另存为”对话框，在“文件名”文本框中输入恰当的文件名，以便处理这些文挡时，能够区分框架名。“文件/框架另存为”命令可把框架结构另存为HTML文件。
该命令只保存框架结构的HTML文件，而不保存框架中显示的HTML文件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。