第4章页面布局设计..ppt

《第4章页面布局设计..ppt》由会员分享，可在线阅读，更多相关《第4章页面布局设计..ppt（51页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第4章章 页面布局设计页面布局设计主要内容主要内容l 表格、层、框架的有关概念l 使用表格布局网页l 使用层布局网页l 使用框架布局网页4.1使用表格进行页面布局使用表格进行页面布局表格是进行页面布局最常用的工具，它既可以用可见表的形式在网页中呈现表格式数据，也可以仅起布局作用，准确定位文本及图形元素。但二者在本质上是一致的，都是通过设计编辑表格，将页面元素在单元格中呈现出来。前者通常有表格线，后者通常会把表格线隐藏起来，作用都是在布局页面元素。使用表格进行页面布局主要包括三方面的操作，即设计创建表格、编辑表格、在表格中插入管理网页元素。通常，在一个Web页面中有多个表格，甚至在表格的单元格

2、中还会嵌入另外的表格。4.1使用表格进行页面布局使用表格进行页面布局创建表格创建表格 1插入表格Dreamweaver使用插入栏或插入菜单来创建一个新表格。具体步骤如下：在文档窗口的“设计”视图中，将插入点放在需要表格的位置。单击插入栏“常用”类别中的“表格”按钮，或选择“插入/表格”菜单，出现“表格”对话框。按需要设置表格参数，单击“确定”按钮后完成表格的创建。4.1使用表格进行页面布局使用表格进行页面布局创建表格创建表格关于“表格”对话框参数的说明：“表格大小”参数 行数：确定表格具有的行的数目。列数：确定表格具有的列的数目。表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度

3、。单元格边距：单元格边框和单元格内容之间的像素数。单元格间距：相邻的单元格之间的像素数。边框粗细：以像素为单位指定表格边框的宽度。“页眉”参数 “辅助功能”参数 4.1使用表格进行页面布局使用表格进行页面布局创建表格创建表格2导入Excel表格 Dreamweaver能够将Excel表格到当前文档中，并自动设置为Dreamweaver表格的格式。操作步骤如下：去定要导入表格的位置。选择“文件/导入/Excel文档”菜单，显示“导入Excel文档”对话框。浏览选择要导入的文件，按“打开”按钮，即导入到当前Dreamweaver文档中。4.1使用表格进行页面布局使用表格进行页面布局表格的编辑表格的

4、编辑 1选择表格元素 选择整个表格：单击表格的左上角或者单击右边或底部边缘的任意位置。选择行或列：首先定位鼠标指针使其指向行的左边缘或列的上边缘，当鼠标指针变为选择箭头时，单击选择行或列，当拖动时将选择多个行或列。选择一个单元格：在单元格中单击鼠标，将选中该单元格。选择矩形的单元格块：将鼠标从一个单元格拖到另一个单元格。选择不相邻的单元格：按住 Ctrl 键的同时单击要选择的单元格、行或列，将选中多个单元格。如果它已经被选中，则再次单击会将其从选择中删除。4.1使用表格进行页面布局使用表格进行页面布局表格的编辑表格的编辑 2.设置表格和单元格的格式 通过设置表格及表格单元格的属性，可以方便的设

5、置表格和单元格的格式。选中整个表格时属性检查器显示当前表格的属性；只选中单元格时，属性检查器显示选中单元格的属性。对属性检查器的修改，只适用于当前选定的元素。若要设置表格中文本的格式，可以对所选的文本应用格式设置或使用样式。4.1使用表格进行页面布局使用表格进行页面布局表格的编辑表格的编辑 3.调整表格的大小 通过拖动选择控制点可以调整整个表格或单个行和列的大小，当调整整个表格的大小时，表格中的所有单元格按比例更改大小。如果表格的单元格指定了明确的宽度或高度，则调整表格大小将更改“文档”窗口中单元格的可视大小，但不更改这些单元格的指定宽度和高度。通过更改属性检查器的高度和宽度值，也可以调整表格

6、元素的大小。4.1使用表格进行页面布局使用表格进行页面布局表格的编辑表格的编辑 4.更改列宽和行高 拖动列或行的边框，更改表格列宽或行高。当鼠标移动到边框线上变成十字箭头形状“”时，按下鼠标拖动边框线，即可更改相应的列宽和行高。使用属性检查器更改列宽和行高。选中表格的行或列，在属性检查器中修改行高和列宽的值，相应的行高和列宽将会调整。4.1使用表格进行页面布局使用表格进行页面布局表格的编辑表格的编辑 5插入、删除行或列 通过选定行或列来确定操作的位置。然后使用“修改/表格”菜单，进行插入删除操作。若要删除完整的行或列，在选择后直接按 Delete 键，整个行或列将从表格中删除。4.1使用表格进

7、行页面布局使用表格进行页面布局表格的编辑表格的编辑 6和并拆分单元格 合并单元格选定合并单元格后，使用属性检查器左下角的工具，或选择“修改/表格/合并单元格”，则选定的单元格合并为一个单元格。拆分单元格单元格可以拆分行或拆分为列。步骤如下：选定要拆分的单元格。使用属性检查器左下角的工具，或选择“修改/表格/拆分单元格”，在出现的“拆分单元格”对话框确定拆方式，并进一步给定拆分个数。4.1使用表格进行页面布局使用表格进行页面布局表格的编辑表格的编辑 7嵌套表格 嵌套表格是放置在另一个表格的单元格中的表格。可以象对其他任何表格一样对嵌套表格进行格式设置。选定单元格后，在单元格中施行插入表格操作，即

8、生成嵌套表。4.1使用表格进行页面布局使用表格进行页面布局利用表格布局页面利用表格布局页面 用表格布局页面一般经过如下步骤：页面分析。针对页面要展现的内容，进行页面导航和页面展示内容的布局设计，确定页面整体布局。页面区域划分。根据页面的整体布局和页面功能，划分页面的区域。表格设计。根据页面区域划分情况，设计页面中的表格，确定表格数目、表格功能、表格位置、表格格式等内容。插入编辑表格。选定位置，插入有关表格，并设定表格的格式。在表格中插入、编辑页面元素。在这个过程中，通常会对表格进行一定的格式调整。进行页面的整体调整，和页面属性设置。4.1使用表格进行页面布局使用表格进行页面布局利用表格布局页面

9、利用表格布局页面 示例：用表格技术对“五岳览胜”网页作进一步设计，生成如图4-14所示的网页。4.2利用布局表格对页面布局利用布局表格对页面布局进行页面布局的一种常用的方法是使用HTML表格对元素进行定位。但是，有的页面使用HTML表格进行布局时不太方便，会使布局过程复杂化。为了 简 化 使 用 表 格 进 行 页 布 局 的 过 程，Dreamweaver提供了布局视图。在布局视图中，可以使用表格作为基础结构设计页面，避免了使用传统的方法创建时经常出现的一些问题。例如：在布局视图中可以在页面上方便地绘制布局单元格，然后将这些单元格移动到所需的位置；还可以方便地创建固定宽度的布局和自动伸展为整

10、个浏览器窗口宽度的布局等。4.2利用布局表格对页面布局利用布局表格对页面布局布局表格的三种模式布局表格的三种模式 1布局模式布局模式用于绘制布局表格和布局单元格，是页面布局设计的主要模式。在布局单元格中，可以插入文本、图像、对象等网页元素。2标准模式标准模式将布局表格转化为HTML常规表格的形式，从而能够使用HTML表格的编辑方法对布局表格进行编辑，如拆分单元格、合并单元格、调整大小、设定格式等。3扩展表格模式扩展表格模式临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，可以选择表格中的项目或者精确地放置插入点。4.2利用布局表格对页面布局利用布

11、局表格对页面布局布局表格的三种模式布局表格的三种模式4三种模式的切换使用以下任何一种方法，都能实现三种模式的切换：选择“查看/表格模式”菜单。使用插入栏“布局”类别中的“标准”、“扩展”、“布局”按钮进行切换。4.2利用布局表格对页面布局利用布局表格对页面布局 布局表格和单元格的绘制布局表格和单元格的绘制1绘制布局表格绘制布局表格操作步骤如下：确定正在布局视图中，单击插入栏“布局”分类中的“布局表格”按钮,鼠标指针变为加号“+”。将鼠标指针放置在页上，然后拖动指针即创建布局表格。说明：不能在现有内容旁边绘制布局表格。如果当前页上已包含内容，则只能在现有内容的下方绘制新的布局表格。当需要在现有内

12、容之下绘制布局表格但是出现禁止绘制鼠标指针时，须重新调整文档窗口的大小，以使现有内容底部和窗口底部之间产生更多的空白空间。4.2利用布局表格对页面布局利用布局表格对页面布局 布局表格和单元格的绘制布局表格和单元格的绘制2.绘制布局单元格 切换到布局视图中，单击插入栏“布局”分类中的“绘制布局单元格”按钮。鼠标指针变为加号“+”。将鼠标指针放置在开始绘制单元格的位置上，然后拖动指针创建布局单元格。若要创建多个单元格，请按住 Ctrl 键并拖动指针来创建每个布局单元格。4.2利用布局表格对页面布局利用布局表格对页面布局布局表格和单元格的编辑布局表格和单元格的编辑 1布局表格的调整和移动 调整布局表

13、格的大小 单击表格顶部的标签选择一个表格。拖动选择控制点即可调整表格的大小。移动布局表格 单击表格顶部的标签选择一个表格。执行下列操作之一：n将表格拖到页上的另一个位置。n按箭头键移动该表格，每次移动1个像素。在按住 Shift 键的同时按箭头键移动该表格，每次移动10个像素。4.2利用布局表格对页面布局利用布局表格对页面布局布局表格和单元格的编辑布局表格和单元格的编辑 2布局单元格的调整和移动 选中布局单元格。选中的方法是单击该单元格的边缘，或者在按住 Ctrl 键的同时单击该单元格中的任何位置。当鼠标如图4-31所示状态时，拖动即调整大小；当鼠标如图4-32所示状态时，拖动即移动单元格。4

14、.2利用布局表格对页面布局利用布局表格对页面布局布局表格和单元格的编辑布局表格和单元格的编辑 3向布局单元格中添加内容在布局视图中可以将文本、图像和其他内容添加到布局单元格中，就象在标准视图中一样。但在布局视图中不能向布局表格的空白（灰色）区域插入内容，因此在添加内容之前，必须先创建布局单元格，当添加内容的宽度大于布局单元格时，该单元格自动扩展。4.2利用布局表格对页面布局利用布局表格对页面布局布局表格和单元格的编辑布局表格和单元格的编辑 3布局表格和布局单元格的格式设置 布局表格的格式设置 单击表格顶部的标签选择表格。打开属性检查器，设置属性参数值。布局表格的主要参数说明：固定：将表格设置为

15、固定宽度，单位是像素。自动伸展：使表格最右边的列自动伸展。高度：表格的高度，单位是像素。填充：单元格边距，即布局单元格内容和单元格边框之间的间隔，单位是像素。间距：单元格间距，设置相邻布局单元格之间的间隔，单位是像素。4.2利用布局表格对页面布局利用布局表格对页面布局布局表格和单元格的编辑布局表格和单元格的编辑 布局单元格的格式设置 选择单元格。打开属性检查器，设置属性参数值。主要参数说明：固定：将单元格设置为固定宽度，单位是像素。自动伸展：使单元格自动伸展高度：单元格的高度，单位是像素。背景颜色：布局单元格的背景颜色。水平：设置单元格内容的水平对齐方式。垂直：设置单元格内容的垂直对齐方式。不

16、换行:禁止文字换行。4.2利用布局表格对页面布局利用布局表格对页面布局布局表格和单元格的编辑布局表格和单元格的编辑 3向布局单元格中添加内容在布局视图中可以将文本、图像和其他内容添加到布局单元格中，就象在标准视图中一样。但在布局视图中不能向布局表格的空白（灰色）区域插入内容，因此在添加内容之前，必须先创建布局单元格，当添加内容的宽度大于布局单元格时，该单元格自动扩展。4.2 利用布局表格对页面布局利用布局表格对页面布局设计页面示例设计页面示例 n示例：使用布局表格设计图4-35所示“五岳览胜”页面。n 设计步骤 1页面分析 2绘制布局表格和单元格 3调整布局单元格大小及位置 4插入内容，并设置

17、格式 5预览页面，进行细微调整，完成页面设计。4.3使用层进行页面布局使用层进行页面布局层是一种 HTML 页面元素，可以将它定位在页面上的任意位置。层象一个可移动的粘贴板，可以包含文本、图像或其他任何可在 HTML 文档正文中放入的内容。利用层可以非常灵活地放置网页内容。网页制作中层概念的引进，为网页设计者提供了强大的网页控制能力：一个网页可以有多个层；各个层可以重叠，可以设定是否可见，是否有子层等等。在 Dreamweaver 中，层既可以作为一种网页定位技术出现，也可以作为一种特效形式出现。4.3.1 层的创建层的创建1.创建层 在插入栏的“布局”类别中单击“绘制层”按钮。执行下列操作之

18、一：n拖动以绘制一个层（通过按住 Ctrl 键并拖动来连续绘制多个层）n在选定了插入点后，使用菜单“插入/布局对象/层”绘制层。4.3.1 层的创建层的创建2层面板在文档窗口中绘制的每一个层都会出现在层面板中，通过层面板可以管理文档中的层。在层面板，层显示为按z轴顺序排列的名称列表。先创建的层出现在列表的底部，新创建的层出现列表的顶部。嵌套的层显示为连接到父层的名称。单击加号“+”或减号“-”图标显示或隐藏嵌套的层。使用层面板可防止层重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。4.3.2 层的基本操作层的基本操作1选择层 选择一个层：在层面板中单击该层的名称或单击一个层的边框。

19、选择多个层：按住Shift键并单击层面板上的两个或更多个名称或在两个或更多个层的边框内（或边框上）按住 Shift 键并单击。当选定多个层时，最后选定层的大小调整柄将以实心突出显示，其他层的大小调整柄则以空心显示。在设计视图中直接点击层标记或层左上角的选择柄也能实现层选择。4.3.2 层的基本操作层的基本操作2调整层大小 调整单个层的大小 拖动层的调整柄调整层的大小。按箭头键时按住Ctrl键，对层一次调整一个像素的大小。按箭头键时按住Shift+Ctrl键，则按网格靠齐增量来调整层的大小。在属性检查器中，键入“宽”和“高”的值，调整层的大小。调整多个层的大小 在设计视图中选择多个层。选择如下菜

20、单“修改/排列顺序/设成宽度相同”或“修改/排列顺序/设成高度相同”，则将选择的层设定为相同的宽度或高度，其结果值取决于最后选定的层的大小。4.3.2 层的基本操作层的基本操作3移动层（1）选择要移动的一个或多个层（2）用鼠标拖动或用键盘箭头键都能移动层4对齐层（1）选择层。（2）选择“修改/排列顺序”菜单，然后选择一个对齐选项。4.3.2 层的基本操作层的基本操作5将层靠齐到网格 n操作选择“查看/网格/靠齐到网格”菜单，启用或禁用靠齐。n说明无论网格是否可见，都可以使用靠齐。显示或隐藏网格，选择“查看/网格/显示网格”菜单。n更改网格设置 选择“查看/网格/网格设置”，出现“网格设置”对话

21、框。设置选项后单击“确定”按钮。4.3.3 层的属性设置层的属性设置1.查看和设置层的属性在属性检查器中查看和设置层属性的操作步骤如下：选择一个层。选择“窗口/属性”菜单，打开属性检查器。通过设置属性来更改层的属性。n主要参数说明4.3.3 层的属性设置层的属性设置主要参数说明：层编号：用于指定层的名称，每个层都必须有它自己的唯一ID。左和上：指定层的左上角相对于页面左上角的位置，默认单位为px。Z 轴：确定层的堆叠顺序。编号较大的层出现在编号较小的层的前面。可见性：指定该层最初是否是可见的。背景图像：指定层的背景图像。背景颜色：指定层的背景颜色。标签：指定用来定义该层的 HTML 标签。溢出

22、：控制当层的内容超过层的指定大小时如何在浏览器中显示层。4.3.3 层的属性设置层的属性设置2更改层的层叠顺序使用属性检查器或层面板可更改层的层叠顺序。层面板列表顶部的层将位于层叠顺序的顶部，并且会出现在其他层之前。在属性检查器的“Z轴”文本框中输入层叠序号，可直接改变层叠顺序；在层面板中移动层也可改变层叠顺序。4.3.3 层的属性设置层的属性设置3设置层可见性 使用层面板设置层的可见性睁开的眼睛表示层是可见的。当设置为闭合状态时，对应的层将不被显示。如果没有眼形图标，该层通常会继承其父层的可见性。使用层属性检查器设置层的可见性在层属性检查器中设置“可见性”的选项值，即可控制层的可见性。“可见

23、性”选项及含义：default:默认状态inherit：继承父层属性visible：层可见hidden：层不可见说明：如果层没有嵌套，父层就是文档正文，而文档正文始终是可见的。另外，如果未指定可见性，则不会显示眼形图标。4.3.4 层和表格的转换层和表格的转换 1层转换为表格 选择“修改/转换/层到表”菜单，打开“层转化为表格”对话框。在对话框中选择所需的选项，然后单击“确定”按钮。2表格转换为层 选择“修改/转换/表格到层”菜单，打开“转化表格为层”对话框。在对话框中选择所需的选项，然后单击“确定”按钮。4.3.5 层应用示例层应用示例1示例：设计一个包括三个超链接的导航菜单，当鼠标移动到一

24、个超链接文本时，即弹出一个与其相关的导航菜单，如图4-50所示。2设计过程4.3.5 层应用示例层应用示例2设计过程 新建一个文档，在文档窗口中连续绘制三个层，并分别插入文本“东岳泰山”、“西岳华山”、“南岳衡山”。全部选定新建的三个层，在属性检查器中设定宽度和高度，然后调整层的水平位置，再使三个层“对齐上缘”。继续绘制第四、五、六三个层，在第四个和第六个层中各插入一个4行的表格，在第五个层中插入一个5行的表格，并分别插入相应文本。对所有文本建立空链接。设置新建层的宽度与前三个层的宽度相同，并调整层的高度、位置，进行层对齐。在层面板中，将第四、五、六三个层分别命名为“taishan”、“hua

25、shan”、“hengshan”，并设置该三个层为“隐藏”。设置超链接文本“东岳泰山”、“西岳华山”、“南岳衡山”的行为属性 4.4使用框架进行页面布局使用框架进行页面布局4.4.1 概述概述框架是浏览器窗口中的一个区域，任何一个框架都可以显示任意一个文档。框架只是存放文档的容器，框架本身不是文档，而框架集则是HTML文档，它定义一组框架的布局和属性。当在浏览器地址中输入框架集文件的URL时，即可查看一组框架，浏览器随后打开要显示在这些框架中的相应文档。4.4.2 框架的基本操作框架的基本操作 使用预定义框架集 将插入点放置在文档中。执行下列操作之一：n在插入栏的布局类别中，单击“框架”按钮的

26、下拉箭头，然后选择预定义的框架集。n选择“插入/HTML/框架”菜单，中选择预定义的框架集。4.4.2 框架的基本操作框架的基本操作 创建自定义框架集 选择“文件/新建”菜单，打开“新建文档”对话框。在“新建文档”对话框中，选择“框架集”类别，。从“框架集”列表选择框架方式，然后单击“创建”按钮。4.4.2 框架的基本操作框架的基本操作2编辑框架集 拆分框架 拆分插入点所在的框架：从“修改/框架页”子菜单选择拆分项。以垂直或水平方式拆分框架：将框架边框从“设计”视图的边缘向“设计”视图的内部拖入。使用不在“设计”视图边缘的框架边框拆分框架：在按住 Alt 键的同时拖动框架边框。将一个框架拆分成

27、四个框架：将框架边框从“设计”视图一角拖入框架的中间。删除框架将框架的边框拖离页面或拖到父框架的边框上后，当前框架即被删除。4.4.2 框架的基本操作框架的基本操作3选择框架和框架集 在框架面板中选择框架和框架集 选择框架：在框架面板中单击框架内部。选择一个框架集：在框架面板中单击环绕框架集的边框。在文档窗口中选择框架和框架集 选择框架：在“设计”视图中，按住 Alt 键的同时单击框架内部。选择框架集：在“设计”视图中，单击框架集的某一内部框架边框。4.4.2 框架的基本操作框架的基本操作4指定框架的打开文档要在框架中打开现有文档，操作步骤如下：将插入点放置在框架中。选择“文件/在框架中打开”

28、菜单。选择要在框架中打开的文档并单击“确定”。该文档随即显示在框架中。要使文档成为在浏览器中打开框架集时在框架中显示的默认文档，则须保存该框架集。4.4.2 框架的基本操作框架的基本操作5框架集文件和框架的保存 保存框架集文件 在框架面板或文档窗口中选择框架集。选择下列项之一：n保存框架集文件：选择“文件/保存框架集”菜单。n将框架集文件另存为新文件：选择“文件/框架集另存为”菜单。保存在框架中显示的文档 在框架中单击。选择“文件/保存框架”或“文件/框架另存为”菜单。保存与一组框架关联的所有文件选择“文件/保存全部”菜单。4.4.2 框架的基本操作框架的基本操作6设置框架和框架集的属性 框架

29、属性框架名称：链接的 target 属性或脚本在引用该框架时所用的名称。源文件：指定在框架中显示的源文档。滚动：指定在框架中是否显示滚动条。不能调整大小：钩选该项后，浏览网页时不能通过拖动框架边框调整框架大小。边框：在浏览器中查看框架时显示或隐藏当前框架的边框。边框颜色：为所有框架的边框设置边框颜色。边界宽度：以像素为单位设置左边距和右边距的宽度。边界高度：以像素为单位设置上边距和下边距的高度。4.4.2 框架的基本操作框架的基本操作 框架集属性属性检查器中“行列选择范围”窗的显示形式因框架结构而变化：当框架为左右结构时显示为左右垂直窗；为上下结构时，显示为上下水平窗。设置框架大小的最常用方法

30、是将左侧框架设置为固定像素宽度，将右侧框架大小设置为相对大小，这样在分配像素宽度后，能够使右侧框架伸展以占据所有剩余空间。对于应始终保持相同大小的框架，通常以“像素”为单位列或行绝对值，例如导航条框架。4.4.3框架应用示例框架应用示例示例：应用框架技术，设计图4-62所示页面。页面的说明如下：页面主窗口区显示的初始文档“五岳简介”为一HTML文档，文件名为five.html。页面左侧为导航区。超链接“东岳泰山”、“西岳华山”、“南岳衡山”、“北岳恒山”、“中岳嵩山”的链接文档在主窗口区中打开；其他超链接的链接文档在新窗口中打开。页面顶端标题区使用图片文件top.png，导航区背景使用图片文件pic1.png，这些项目在浏览页面时保持不变。本章小结本章小结1表格是进行页面布局最常用的工具，使用表格进行页面布局主要包括三方面的操作，即设计创建表格、编辑表格、在表格中插入管理网页元素。2层是一种HTML页面元素，可以将它定位在页面上的任意位置。一个网页可以有多个层，各个层可以重叠，可以设定是否可见，是否有子层等。3框架是浏览器窗口中的一个区域，任何一个框架都可以显示任意一个文档。框架只是存放文档的容器，框架本身不是文档，而框架集则是HTML文档，它定义一组框架的布局和属性。