项目11 使用框架布局页面.pptVIP

* * 项目十一 使用框架布局页面 情 境 设 置 网页布局技术还有一种，叫做框架。然而框架本质上是一种浏览器窗口的分割技术。而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口” 的布局技术。按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。 项 目 展 示 本项目完成后的大体效果如下 项 目 目 标 能够理解框架的作用 能够合理使用框架划分窗口布局 能够明白框架和框架集的关系 能在框架中创建编辑网页 能在框架中打开已有的网页进行编辑 能够正确保存框架和框架集 能够理解和编辑框架的属性 项 目 分 析 具体工作任务： 制作一个框架网页，主题为“网页制作学习网” 在上部框架中建立一个新网页，用来放置网站标题性图片和文字 在左侧框架中建立一个新网页，用来放置导航栏 在右侧框架中显示现有的网页 拆分左侧框架为上下两部分 实 施 步 骤 步骤一：新建一个站点，并在站点根文件夹中建立一个images子文件夹，以及创建两个辅助用的HTML文件，将它们分别命名为“1.html”和“2.html”。 步骤二：创建框架网页 这一步将要用到框架技术将整个编辑窗口分成三个部分，这三个部分每一部分都叫做一个框架，它们构成一个框架集。每个框架都相当于一个子窗口，在每个子窗口中都可以独立的编辑和显示一个网页。 实 施 步 骤 步骤三：在每个框架窗口中创建和编辑一个网页 ，这样就同时显示出了三个网页。每个网页中均放置不同的内容，每个网页中均放置不同的内容，并有机整合在了一起显示，给人的感觉就象在一个页面上。 另外需要注意的是框架网页的保存。采用了框架技术的网页实际上涉及了多个文件：每个框架中的网页文件，包含各个框架信息（如大小）的框架集文件。 如果框架中的网页是在框架中直接新建的，则在保存时会给出保存提示，若框架中显示的是已经存在的某个网页，则在保存是不会有专门的提示。大家在保存的时候注意观察一下。 实 施 步 骤 步骤四：制作导航条，在框架中打开链接网页。 注意：这里是要将链接的文件在框架窗口中打开。以前我们在讲链接时已经知道，链接文件可以在四种目标窗口中打开，即_blank、_top、_self、_parent，现在由于有了框架技术，它把整个浏览器窗口划分成了若干叫做框架的子窗口，页面可以在这些子窗口中打开，因此，打开的目标除了选择_blank等，还可以选择这四个框架中的任何一个作为打开的目标窗口，这里就选择了“mainframe”框架。 知 识 链 接 一、框架和框架集的概念 框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。 知 识 链 接 二、框架页面的创建 三、框架布局页面的特点 我们在项目中已经介绍了框架的建立过程，这种方法是自己设计框架的整个结构，除此之外，Dreamweaver还为我们提供了各种样式的框架集模板，这为我们快速创建类似布局的框架带来了方便。具体使用方法是点击菜单栏【新建】→【框架集】选项，在打开的对话框中选取合适的样式即可。 其最大特点就是能将多个网页有机整合在一起，实现了多个页面的同时显示，每个页面可以放置不同的内容。 知 识 链 接 四、网页布局总结 我们已经介绍完了三种常规的网页布局技术，它们是表格、层和框架。 表格是目前在网页设计中应用比较广泛的一种，主要是利用表格和表格的嵌套来实现页面的规划。层的最大优点是可以精确定位元素，并且可以轻松的重叠放置元素，设置元素的堆叠顺序。而框架则是一种窗口的分割布局技术，可以实现在浏览器中同是显示多个网页。对于这三种技术，我们在日常的网页制作中要首先考虑使用表格，把表格作为布局的主要工具。对于表格难以实现的效果，可以辅之以层或框架 。 知 识 拓