《中文DreamWeaverMX 网页制作教程》课件第9章.pptVIP

(3)保存文档。

按下F12键，我们就可以预览到一个完整的“商品分类”页面了。*第9章框架布局——“商品分类”页面制作9.1框架结构规划9.2创建、保存框架和框架集9.3编辑框架9.4在框架内实现页面跳转所谓框架，是指将浏览器窗口分成不同的区域，每个区域都可以显示不同的网页。如图9-1所示的“商品分类”页面(本书配套电子文档中的root/fenleipage_index.htm文件，打开时请将显示器分辨率调至1280×1024，分辨率为1024×768的显示器可参考fenleipage_index1024.htm文件)中，用户在左边单击“T恤小衫”、“外贸长裤”、“连衣裙”链接时，其指向的网页只在右下方窗口中显示，而不是在整个浏览器窗口中显示链接的页面，这就是一个包含框架的页面。本章将以图9-1所示的“商品分类”页面为例，讲述网页框架布局的技巧。图9-1“商品分类”页面

在建立框架前，首先要对框架的结构进行规划，比如有哪部分内容是固定不变的，在哪部分显示链接的内容等，整个网页规划好才能使用框架技术实现页面的内容。根据图9-1所示的页面，我们规划将框架分为三栏(见图9-2)：顶部用来放置网页标题信息；左边是栏目分类，通过这一栏，访问者可以对网页整体有所了解；9.1框架结构规划右边则显示由链接指向的每一个具体的页面。通过对网页整体结构的规划我们可以确定框架组大概需要的独立页面数，如“商品分类”页面中，三个栏目需要三个独立的网页文件，而这三个页面整合为一个框架布局则是由“框架集”来完成的。

图9-2框架结构规划

所谓“框架集”，是指一组框架的布局和属性，它包含了框架的数目、框架的大小和位置以及每个框架中初始显示的页面链接地址等信息。框架集仅仅用来存储框架的显示信息。而我们所说的“框架”只是浏览器窗口中的一个区域，每个框架都由独立的网页填充。实际上，框架页面是一个仅仅包含框架集的页面，里面的内容则是各个框架加载的页面产生的。9.2创建、保存框架和框架集框架集和框架的创建是同步的，只要创建了框架集，框架就同时被创建；同样，只要创建了框架，框架集就一定会形成。下面介绍创建框架和框架集的方法：

方法一：在“插入”工具栏的类别中选择“布局”类别，在? “框架”按钮下拉菜单(见图9-3)中选择合适的框架布局。

方法二：在菜单栏中选择“插入”→“HTML”→“框架”，在子菜单中可选择相对应的框架布局(见图9-4)。

图9-3“框架”按钮下拉菜单图9-4“框架”命令子菜单项利用以上方法，根据图9-1所示的页面布局，我们在新建页面后，创建一个“顶部和嵌套的左侧框架”，创建后的页面如图9-5所示。

框架创建好后先将文件保存。由于使用框架的页面是由若干个文件组成的，在初次保存时，一般选择“文件”菜单下的“保存全部”选项。在选择“保存全部”选项后，首先弹出对话框保存的是主框架集，默认的名称为“UntitledFrameset”，且此时整个框架用斜线框包围。在保存好框架集后，接下来依次出现三个对话框，分别保存三个框架文件，从斜线框包围的范围可判断正在保存的框架区域。如保存的是顶部框架，则斜线框将包围住顶部区域。为了使用方便，我们将保存的框架集和框架分别取名为“feileipage_index.htm”、“fenleipage_top.htm”、“fenlei_left.htm”、“fenleipage_right.htm”。图9-5顶部和嵌套的左侧框架

9.3.1选中框架和框架集

要选中框架集，可在设计视图中单击其框架的任一边框，而要选择框架，则在按住Alt键的同时在该框架内部单击。而另一种较为直观的方法是利用Dreamweaver中的“框架”面板来进行选取：在菜单栏中选择“窗口”→“框架”或使用Shift+F2快捷键打开“框架”面板，如图9-6所示，在“框架”面板中形象地显示出了网页框架的结构。9.3编辑框架在“框架”面板中，单击最外层的边框可选中框架集，而要选择某一个框架，只要在“框架面板”中单击该框架对应的区域即可，选定后的框架或框架集在设计视图中呈虚线显示。图9-6“框架”面板9.3.2拆分、合并框架

在已存在的框架集中，可再次拆分形成嵌套框架集，具体方法是：在文档窗口中按下Alt键的同时拖动边框，位于页面边缘的边框可直接拖动。此方法除用于创建嵌套框架集外，同时还能用于创建新的框架集。合并框架(即删除框架)的方法与拆分框架相反，只需将框架边框拖动到父框架的边框上即