《动态网页设计与制作实用教程(第二版)》-第11章.ppt

1、第十一章设计页面布局。在本章中，您应该在编辑网页之前设置网页的整体布局。合理的布局使网页看起来美观，易于插入和编辑。本章主要描述在Dreamweaver 8中使用可视化设计工具(如表格、布局视图、框架和图层)进行页面布局的过程。在学习完本章后，读者应该掌握以下内容：用表格布局页面；带有框架的布局页面；布局带有层的页面；第十一章设计页面布局；11.1带表格的布局页面；表格是在网页上显示表格数据、布局文本和图形的强大工具。表格由一行或多行组成，每行由一个或多个单元格组成。创建表格后，您可以轻松修改其外观和结构。11.1.1创建表1插入表您可以使用插入列或插入菜单创建新表。具体步骤如下：(1)在文档

2、窗口的设计视图中，将插入点放在需要表格的位置。(2)点击“插入”栏“常用”类别中的“表格”按钮，或选择“插入/表格”菜单。(3)根据需要设置表参数，完成表的创建。第11章设计页面布局，第2章向单元格添加内容您可以像文字编辑器(如Word)那样向表格单元格添加文本和图像等元素。3导入表格数据您可以将在另一个应用程序(如微软Excel)中创建的表格数据导入到Dreamweaver 8中，并将其设置为表格格式。第11章设计页面布局，11.1.2编辑表格1选择表格元素可以一次选择整个表格、行和列，也可以选择表格中的一个连续单元格块，还可以选择表格中多个不相邻的单元格并修改它们的属性。(1)选择整个表格

3、：单击表格的左上角或单击右边或底边的任意位置。(2)选择行或列：首先，将鼠标指针指向行的左边缘或列的上边缘。当鼠标指针变为选择箭头时，单击以选择一行或一列，或拖动以选择多行或多列。(3)选择矩形单元块：将鼠标从一个单元拖到另一个单元。(4)选择不相邻的单元格：按住Ctrl键，单击要选择的单元格、行或列，将选中该单元格。如果它已经被选中，再次单击它将从选择中删除它。第11章设计页面布局，2格式化表格和单元格您可以通过设置表格和表格单元格的属性或对表格应用预设设计来更改表格的外观。若要格式化表格中的文本，可以对选定的文本应用格式或使用样式。3调整表格的大小您可以通过拖动和选择控制点来调整整个表格或

4、单行和单列的大小。当调整整个表格的大小时，表格中的所有单元格都会根据示例改变大小。4更改列宽和行高您可以使用属性检查器或拖动列或行的边框来更改列宽或行高。您也可以使用代码视图直接在HTML代码中更改单元格的宽度和高度。在第11章“设计页面布局和场景中5个组件的应用”中，组件的应用包括该电影组件库中组件的应用和其他电影组件库中组件的应用。要应用电影库中的组件，您应该首先打开库面板，然后用鼠标将相应的组件拖到场景工作区中。要在其他影片中应用组件，您应该首先通过菜单“文件/作为库打开”打开相应的组件库，然后在其中应用组件。第11章设计页面布局，第5章添加和删除行和列要添加和删除行和列，首先要确定操作

5、位置，即选择当前行或列。(1)要添加和删除行和列，可以使用“修改/表格”子菜单中的命令。(2)要一次添加多行或多列，或在当前单元格下或右侧添加行或列，请选择“修改/表格/插入行或列”菜单，此时将出现“插入行或列”对话框。在对话框中输入必要的信息，然后单击确定按钮。(3)清除一整行或一整列时，可以直接按删除键，整行或整列将从表格中删除。6拆分或合并单元格拆分或合并单元格可以使用“修改/表格”子菜单中的命令。第11章设计页面布局，7嵌套表嵌套表是放置在另一个表的单元格中的表。嵌套表可以像任何其他表一样格式化，但是它们的宽度受到它们所在单元格宽度的限制。8剪切、复制和粘贴单元格您可以一次剪切、复制或

6、粘贴一个单元格或多个单元格，并保留单元格的格式。第11章设计页面布局，11.1.3排序表您可以根据单个列的内容对表中的行进行排序，也可以根据两个列的内容执行更复杂的表排序。不能对包含COLSPAN或ROWSPAN属性的表(即包含合并单元格的表)进行排序。第11章设计页面布局，11.2布局模式下的页面布局11.2.1布局模式简介在布局模式下，可以在添加内容之前对页面进行布局。例如，您可以沿页面顶部绘制一个单元格来放置标题图形，在左侧绘制另一个单元格来放置导航栏，在右侧绘制第三个单元格来放置内容。Dreamweaver 8会自动创建一个布局表格，以便在布局表格中未绘制布局单元格时容纳该单元格。布局

7、单元格不能存在于布局表格之外。可以通过在一个布局表格中使用多个布局单元格来布局页面，这是网页布局的最常见方法，也可以通过使用多个布局表格来进行更复杂的布局。第11章设计页面布局，11.2.2切换布局模式在绘制布局表格或布局单元格之前，必须先切换到布局模式。布局模式的切换操作如下：(1)如果设计视图不可见，选择视图/设计或视图/代码和设计菜单。在代码视图中不能启用或禁用布局模式。(2)选择视图/表格模式/布局模式菜单，或单击插入栏布局类别中的布局模式按钮。“设计”视图顶部会显示一个标有“布局模式”的绿色条，表示您当前处于布局模式。如果页面上存在表格，它们将显示为布局表格。第11章设计页面布局，1

8、1.2.3绘制布局单元格和表格在布局模式下，您可以直接在页面上绘制布局单元格和表格。Dreamweaver 8会自动创建一个布局表格单元格，以容纳未在布局表格中绘制的布局单元格。布局单元格不能存在于布局表格之外。注意：当Dreamweaver自动创建布局表格时，即使我们更改了文档窗口的大小，该表格最初也会填充整个设计视图。这个全窗口默认布局表使我们能够在设计视图中的任何位置绘制布局单元格。通过单击表格边框，然后拖动表格的大小调整控制点，可以将表格设置为特定的大小。第11章“设计页面布局”和11.2.4“向布局单元格添加内容”文本、图像和其他内容可以在布局模式下添加到布局单元格中。但是，在布局模

9、式下，不能将内容插入布局表格的空白(灰色)区域。因此，在添加内容之前，您必须首先创建一个布局单元格。当添加内容的宽度大于布局单元格时，单元格将自动扩展。11.2.5布局单元格的调整为了调整页面布局，布局单元格和嵌套布局表格可以移动和调整大小(最外面的布局表格只能调整大小)。布局单元格不能重叠，并且在移动或调整单元格大小时，它不能穿过包含它的布局表格的边框。11.2.6设置布局单元格的格式您可以使用属性检查器更改任何布局单元格或表格的各种属性，包括宽度和高度、背景颜色以及单元格内容的对齐方式。，第11章，设计页面布局，以及11.2.7设置布局视图参数您可以使用“编辑/首选项”对话框中的“布局模式

10、”类别项来指定有关间隔图像文件、布局表格和布局单元格的颜色信息。第11章，设计页面布局，11.3使用框架的页面布局11.3.1框架(集)概述1框架(集)的功能就像“画中画”彩色电视一样。框架提供了一种将浏览器窗口分成多个区域的方法，每个区域可以显示不同的超文本标记语言文档。使用框架最常见的情况是，一个框架显示包含导航控件的文档，而另一个框架显示包含内容的文档，如图11-4所示。2什么是框架框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分显示的内容无关的超文本标记语言文档。第11章设计页面布局，3什么是框架集框架集是一个超文本标记语言文件，它定义了一组框架的布局和属性，包括框架的数量

11、、框架的大小和位置，以及每个框架中最初显示的页面的网址。框架集文件本身不包含要在浏览器中显示的超文本标记语言内容，除了无框架部分；框架集文件只是向浏览器提供关于一组框架应该如何显示以及哪些文档应该在这些框架中显示的信息。由4个框架页面组成的文档如果一个站点在浏览器中显示为具有3个框架的单个页面，它实际上至少由4个独立的超文本标记语言文档组成：框架集文件和3个网页文档，它们包含最初在这些框架中显示的内容。在Dreamweaver 8中使用框架集设计页面时，必须保存所有四个文件，这样页面才能在浏览器中正常工作。第11章设计页面布局，第5章框架页面的使用原则并非所有浏览器都提供良好的框架支持，框架对

12、于不能导航的访问者来说很难显示。因此，如果您想使用框架，您应该始终在框架集中提供noframes部分，以方便无法查看这些框架的访问者。最好为不喜欢使用框架的访问者提供一个到网站无框架版本的明确链接，即使他们的浏览器支持它。第11章设计页面布局，11.3.2创建框架和框架集在Dreamweaver 8中有两种创建框架集的方法：您可以自己设计框架集，也可以从干预定义的框架集中进行选择。选择预定义的框架集会自动设置创建布局所需的所有框架集和框架。预定义的框架集只能插入到“文档”窗口的“设计”视图中。11.3.3选择框架和框架集要更改框架或框架集的属性，必须先选择一个框架或框架集。您可以在“文档”窗口

13、或通过“框架”面板选择一个框架或框架集。当您选择框架或框架集时，在“框架”面板和“文档”窗口的“设计”视图中，框架或框架集周围都会显示一个选择大纲。在第11章，设计页面布局，1。在“框架”面板中选择框架和框架集，然后按1。选择窗口/其他/框架菜单以显示框架面板。(2)单击以在“框架”面板中选择一个框架。(3)在“框架”面板中单击框架集周围的边框，然后选择一个框架集。2在“文档”窗口中选择框架和框架集(1)要在当前选择的同一级别选择下一个框架(框架集)或前一个框架(框架集)，请在按左箭头键或右箭头键的同时按下Alt键。(2)选择父框架集(包含当前选定内容的框架集)，按住Alt键的同时按向上箭头键

14、。(3)要选择当前选定框架集的第一个子框架或框架集(即框架集文件中定义的顺序中的第一个)，请在按箭头键的同时按Alt键。第11章，设计页面布局，11.3.4在框架中打开文档通过在框架的空文档中插入新内容或在框架中打开现有文档来指定框架的初始内容。要在框架中打开现有文档，操作步骤如下：(1)将插入点放在框架中。(2)选择“文件/在框架中打开”菜单。(3)选择要在框架中打开的文档，单击确定，文档将显示在框架中。(4)要使文档成为在浏览器中打开框架集时框架中显示的默认文档，请保存框架集。第11章，设计页面布局，11.3.5保存框架和框架集文件，1。保存框架集文件的操作步骤如下：(1)在框架面板或文档

15、窗口中选择框架集。(2)选择下列项目之一：a)要保存框架集文件，请选择文件/保存框架集菜单。b)要将框架集文件另存为新文件，请选择“文件/框架集另存为”菜单。如果以前没有保存过框架集文件，这两个命令是等效的。2保存框架中显示的文档的操作步骤如下：点击框架，然后选择“文件/保存框架”菜单或“文件/框架另存为”菜单。第11章，设计页面布局，11.4使用图层来布局页面图层是一个超文本标记语言页面元素，可以放置在页面的任何位置。图层就像一个可移动的粘贴板，它可以包含文本、图像或任何其他可以放在超文本标记语言文档主体中的内容。图层允许您非常灵活地放置网页内容。11.4.1图层创建1图层创建(1)单击插入

16、栏上“布局”选项卡下的“绘制图层”图标。(2)在文档窗口的设计视图中拖动鼠标绘制图层。2层面板“层”面板允许您管理文档中的层。选择“窗口/图层”菜单打开“图层”面板，图层显示为按z轴顺序排列的名称列表。新创建的图层出现在列表的底部，新创建的图层出现在列表的顶部。嵌套层显示为连接到父层的名称。单击加号()或减号()图标可显示或隐藏嵌套层。3设置图层参数使用编辑/首选项/图层对话框中的图层类别指定新图层的默认设置。第11章设计页面布局，11.4.2层的基本操作处理页面布局时，您可以选择、移动、调整大小和对齐层。在移动、调整大小或对齐图层之前，必须选择一个图层。1选择图层2调整图层3移动图层4对齐图层5将图层与网格对齐11 . 4 . 3将内容添加到图层在图层中放置元素之前，插入点必须放置在图层中。插入操作的过程与在层外插入元素的过程相同。第11章，设计页面布局，11.4.4修改现有图层属性1查看和设置图层属性在属性检查器中查看和设置图层属性的操作步骤如下：(1)选择图层。(2)选择“窗口/属性”菜单打开属性检查器。(3)通过设置属性来更改层的属性当选择两个或更多层时，层属性检查器将显示文本属性和所有层属性的一部分，从而允许我们同时修改多个层。2更改层的堆叠顺序使用属性检查器或“层”面板更改层的堆叠顺序。“层”面板列表顶部的层将位于堆叠顺