《框架表格APDiv》PPT课件.ppt

第3章 框架、表格、AP Div,框架、表格、AP Div都是设计和布局页面的重要工具 本章要点 能够使用框架布局网页。 熟练掌握表格的创建、编辑过程。 熟练掌握表格的嵌套方法。 熟练掌握表格的宽度、边框、背景色及背景 图像的设置方法。 熟练掌握Div标签的使用方法。 掌握AP Div的使用方法。,3.1 在网页中使用框架,利用框架可以非常方便地对页面进行布局。Dreamweaver CS3提供了许多框架模板，用户也可手工修改框架的结构。 3.1.1 框架操作 3.1.2 框架观察器 3.1.3 在框架内插入HTML文件内容与保存框架文件,3.1 在网页中使用框架,3.1.1 框架操作 创建框架、调整框架、删除框架、对框架属性的设置。 一、创建框架 二、调整框架 三、删除框架 四、设置框架集属性 五、设置分栏框架属性,3.1.1 框架操作,3.1.1 框架操作 一、创建框架 创建框架有以下几种方法。 （1）方法一：单击【文件】/【新建】命令，调出【新建文档】对话框，如图3-1所示。单击该对话框左边【类别】栏中【示例中的页】，再单击示例文件夹中的【框架集】选项，单击选中该对话框右边【框架集】栏内的一种框架选项，然后单击【创建】按钮，即可创建有框架的网页。,图3-1 在页面内创建上下两个框架,3.1.1 框架操作,（2）方法二：单击【插入】（布局）面板的【框架】快捷菜单中的一个按钮，即可在页面内设置出相应的框架，如图3-2所示。,3.1.1 框架操作,图3-2 【框架】快捷菜单,（3）方法三： 利用【修改】/【框架集】下相应的命令 或利用【插入记录】/【HTML】/【框架】下相应的命令，也可以创建框架。,3.1.1 框架操作,（3）方法三： 利用【修改】/【框架集】下相应的命令 或利用【插入记录】/【HTML】/【框架】下相应的命令，也可以创建框架。,3.1.1 框架操作,建立框架之后，要增加框架的个数，可采用如下方法： 单击框架内部，再单击【查看】/【可视化助 理】/【框架边框】命令，使该命令左边有。 然后，将鼠标指针移到框架的边缘处，当鼠 标指针为“”或“”形状时，向鼠标指针箭头 指示的方向拖曳鼠标，即可在水平或垂直方 向增加一个框架。 辅助的边框线在浏览器中不会显示。,3.1.1 框架操作,3.1.1 框架操作,显示框架边框,二、调整框架 用鼠标拖曳框架线，即可调整框架的大小。(图3-3)P57 三、删除框架 用鼠标拖曳框架线，一直拖曳到另一条框架 线或边框处，即可删除框架。(图3-4)P57,3.1.1 框架操作,四、设置框架集属性 单击框架的外边框，可使属性栏变为框架集属性栏。边框、 边框颜色、 边框宽度,图3-5 框架集【属性】栏,3.1.1 框架操作,五、设置分栏框架属性 按住Alt键，单击分栏框架的内部，可使【属 性】栏变为分栏框架【属性】栏，如图3-6所 示。,3.1.1 框架操作,图3-6 分栏框架【属性】栏,图3-6 分栏框架【属性】栏,3.1.1 框架操作,框架名称文本框、源文件文本框、 滚动下拉列表框、 不能调整大小复选框、 边框下拉列表框、 边框颜色按钮,3.1.2 框架观察器 单击【窗口】/【框架】命令，或按下 Shift+F2组合键，调出【框架】面板，也叫 框架观察器，如图3-7所示。如果光标在框架 内，则框架观察器中对应框架内的文字变为 黑色，如图3-7所示。,3.1 在网页中使用框架,3.1.2 框架观察器,图3-7 框架观察器,3.1.2 框架观察器,框架观察器的作用是显示出框架网页的框架 结构（也叫分栏结构）。单击某一个分栏框 架（选中的框架边框呈黑色），即可选中该 分栏框架，同时【属性】栏变为该分栏框架 【属性】栏。如果单击框架的外框线，可以 选中整个框架，如图3-8所示，同时【属性】 栏变为框架集【属性】栏。,3.1.2 框架观察器,图3-8 选中整个框架后的观察器,3.1.3 在框架内插入HTML文件内容 与保存框架文件 一、在框架内插入HTML文件内容的操作步骤如下： 1. 单击网页框架的某一个区域内部，使光标在该区域内出现。 2. 可以象在没有框架的网页页面内输入文字和导入对象那样，在选中的框架区域内输入文字和导入对象。也可以单击【文件】/【在框架中打开】命令，调出【选择HTML文件】对话框。利用它可将外部的HTML文件加载到选定的框架区域内。,3.1 在网页中使用框架,在框架内插入HTML文件内容,图3-9 【选择HTML文件】对话框,3.1.3 在框架内插入HTML文件内容与保存框架文件,二、保存框架文件 1. 单击【文件】/【框架集另存为】命令，调出【另存为】对话框。利用该对话框可输入文件名，再单击【保存】按钮，完成框架文件的存储。 2. 如果网页中的框架进行了修改，而且框架网页已经保存过，则单击【文件】/【保存框架页】命令即可再保存。,二、保存框架文件 3. 单击【文件】/【框架另存为】命令，调出【另存为】对话框。利用该对话框可输入文件名，再单击【保存】按钮，完成该框架窗口中的内容存储(该框架窗口中的HTML)。 4. 单击【文件】/【保存全部】命令。先保存框架，再依次保存框架窗口内的HTML文件 。,3.1.3 在框架内插入HTML文件内容与保存框架文件,二、保存框架文件 5. 单击【文件】/【关闭】命令，关闭框架时，系统会弹出一系列对话框，依次保存框架及各框架窗口内的HTML文件 。,3.1.3 在框架内插入HTML文件内容与保存框架文件,3.2 在网页中创建表格,表格是最常用的页面布局工具。 3.2.1 制作简单表格与调整表格大小 3.2.2 选择表格和设置表格的属性 3.2.3 编辑表格,3.2 在网页中创建表格,3.2.1 制作简单表格与调整表格大小 将光标移到需要插入表格的位置，单击【插入】（常用）面板内的【表格】按钮，调出【表格】对话框，如图3-11所示。,图3-11 【表格】对话框,一、【表格】对话框内各选项的作用 （1）【行数】和【列数】文本框：输入表格的行数和列数。 （2）【表格宽度】文本框：输入表格宽度值，其单位为像素或百分数。如果选择【百分比】，则表示表格占页面或它的母体容量宽度的百分比。,一、【表格】对话框内各选项的作用 （3）【边框粗细】文本框：输入表格边框的宽度数值，其单位为像素。当它的值为0时，表示没有表格线。 (边框P61) （4）【单元格边距】文本框：输入的数表示单元格之间两个相邻边框线（左与右、上和下边框线）间的距离。(填充P61),一、【表格】对话框内各选项的作用 （5）【单元格间距】文本框：输入单元格内的内容与单元格边框间的空白数值，其单位为像素。这种空白存在于单元格内容的四周。 (间距P61),一、【表格】对话框内各选项的作用 （6）【页眉】栏：用来设置表格的页眉单元格样式。被设置为页眉的单元格，其中的字体将被设置成居中和黑体格式。,（7）【辅助功能】栏：【辅助功能】栏中各选项的作用如下。 【标题】文本框：设置表格的标题。 【摘要】文本框：设置表格的摘要。 【对齐标题】下拉列表框：设置标题与表格的位置关系，默认为表格的顶部。,通过上述设置后，单击【确定】按钮，即可 插入符合要求的表格，如图3-12所示。,3.2.1 制作简单表格与调整表格大小,图3-12 制作的第一个表格,二、调整表格大小 （1）调整整个表格的大小：单击表格的边框，选中该表格，此时表格右边、下边和右下角会出现三个方形的黑色控制柄，再用鼠标拖曳控制柄，即可调整整个表格的大小。,3.2.1 制作简单表格与调整表格大小,二、调整表格大小 （2）调整表格中行或列的大小：将鼠标指针移到表格线处，当鼠标指针变为双箭头横线或双箭头竖线时，拖曳鼠标，即可调整表格线的位置，从而调整了表格行或列的大小。,3.2.1 制作简单表格与调整表格大小,三、表格和单元格标签 表格标签：选中表格后，在表格的下面用绿色显示出了表格的宽度，如图3-15所示。单击下边的三角按钮，可以调出【表格】快捷菜单，利用此菜单可以对表格进行选择、清除列的宽度、左侧插入列和右侧插入列等操作。,3.2.1 制作简单表格与调整表格大小,3.2.2 选择表格和设置表格的属性 一、选择表格 （1）选择整个表格：单击表格的外边框，可选中整个表格，此时表格右边、下边和右下角会出现三个方形黑色控制柄。 （2）选择多个表格单元格：按住Ctrl键，同时依次单击所有要选择的表格单元格。,3.2 在网页中创建表格,3.2.2 选择表格和设置表格的属性,一、选择表格 （3）选择表格的一行或一列单元格：将鼠标移到一行的最左边或一列的最上边，当鼠标指针呈黑色箭头时单击鼠标，即可选中一行或一列。 （4）选择表格的多行或多列单元格：按住Ctrl键，将鼠标依次移到要选择的各行或各列，当鼠标指针呈黑色箭头时单击鼠标，即可选中多行或多列。还可以将鼠标移到要选择的多行或多列的起始处，当鼠标指针呈黑色箭头时，拖曳鼠标也可选择多行或多列单元格。,二、设置整个表格的属性 单击表格的外边框，选中整个表格，此时表 格的【属性】栏如图3-16所示。,3.2.2 选择表格和设置表格的属性,图3-16 表格的【属性】栏,3.2.2 选择表格和设置表格的属性,(1)表格id: 表格的名称 (2)行和列: 表格的行数和列数 (3)宽和高: 表格的宽度数 %(百分数) 像素 (4)填充: 单元格边距P60 (5)间距: 单元格间距P60 (6)对齐: “默认”、“左对齐”、“居中对齐”、“右对齐” (7)边框: 边框粗细P60,3.2.2 选择表格和设置表格的属性,(8)背景颜色 (9)背景图案 (10)边框颜色 (11)4个按钮: 清除行高、清除列宽、将表格宽度的单位改为像素、将表格宽度的单位改为百分比 (12)类: 设置表格的样式,三、设置表格单元格的属性 按住Ctrl键，单击表格中的单元格，选中几个 单元格。此时【属性】栏变为表格单元格 【属性】栏，如图3-17所示。其上半部分用来设置单元格内文本的属性P30，下半部分用来设置单元格的属性。,3.2.2 选择表格和设置表格的属性,图3-17 表格单元格【属性】栏,3.2.2 选择表格和设置表格的属性,(1) 合并所选单元格: 先选中，再单击按钮 (2) 拆分单元格: 先选中，再单击按钮，打开拆分单元格对话框，如图3-19。,3.2.2 选择表格和设置表格的属性,(3) 水平和垂直: 水平对齐方式和垂直对齐方式 (4) 宽和高: 单元格的宽度和高度 (5)不换行复选框: 单元格内的文字超过单元格宽度时，是自动换行还是加大单元格宽度。 (6)标题复选框: 该单元格内的文字以标题格式显示(粗体、居中) (7)背景按钮与文本框、背景颜色按钮与文本框 (8)边框按钮与文本框: 设置单元格双线条边框的颜色。,3.2 在网页中创建表格,3.2.3 编辑表格 将鼠标指针移到表格内，单击鼠标右键，调出其快捷菜单，再单击快捷菜单内的【表格】菜单命令，调出它的下一级菜单，如图3-21所示。利用该快捷菜单，可对表格进行许多编辑操作。,图3-21 表格的快捷菜单,一、在表格中插入行或列 （1）在表格中插入一行或一列：选中一行或一列单元格，再单击图3-21所示的菜单中的【插入行】或【插入列】命令，即可在选中行的上边插入一行或在选中列的左边插入一列。按Tab键可以在表格单元格内移动光标，当光标在最后一个单元格时，再按Tab键，即可在表格的下边增加一行。,3.2.3 编辑表格,图3-21 表格的快捷菜单,（2）在表格中插入多行或多列：选中一行或一列。单击图3-21所示菜单中的【插入行或列】命令，即可调出【插入行或列】对话框，如图3-22所示。(插入、行数 、位置),3.2.3 编辑表格,图3-22 【插入行或列】对话框,二、删除表格中的行或列 删除表格中的行或列可采用以下几种方法。 （1）利用表格的快捷菜单删除表格中的行与列：选中要删除的行或列，再单击图3-21所示菜单中的【删除行】或【删除列】命令，即可删除选定的行或列。例如，选中图3-20所示表格中右边的1列，再删除该列，其效果如图3-23所示。,3.2.3 编辑表格,图3-21 表格的快捷菜单,（2）利用【清除】命令删除表格中的行与列：选中要删除的行或列，再单击【编辑】/【清除】命令，即可删除选定的行或列。,3.2.3 编辑表格,三、复制和移动表格的单元格的内容 复制和移动表格的单元格操作如下。 （1）选中要复制或移动的表格的单元格，它们应构成一个矩形。然后，单击【编辑】/【复制】或单击【编辑】/【剪切】命令。 （2）将光标移到要复制或移动处，再单击【编辑】/【粘贴】命令。,3.2.3 编辑表格,四、在表格中插入对象 （1）在表格中插入表格：单击要插入表格的一个单元格内部。再按照上述创建表格的方法建立一个新的表格，如图3-24所示。,3.2.3 编辑表格,图3-24 在表格单元格内插入表格,（2）在表格中插入图像或文字：单击要插入对象的一个单元格内部，再按照以前所述方法在单元格内输入文字或粘贴文字。也可以在单元格内插入图像或动画，如图3-25所示。,3.2.3 编辑表格,图3-25 在表格单元格内插入文字和图像,3.3 AP Div与Div标签,Dreamweaver CS3中的层，称为AP Div，它是一种被定义了绝对位置的特殊的HTML标签，可包含其他网页元素。 (1)由于AP Div是绝对定位的，因此， AP Div可以游离在文档之上。利用AP Div可以浮动定位网页元素，它可以包括文本、图像甚至其他AP Div。 (2)AP Div的z轴属性使多个AP Div可以发生堆叠，即产生多重叠加的效果。 (3)可以控制AP Div的显示和隐藏，使网页的内容变得更加丰富。 3.3.1 创建AP Div 3.3.2 选定AP Div 3.3.3 AP Div属性 3.3.4 AP Div的默认属性 3.3.5 AP 元素面板 3.3.6 Div标签,3.3.7 缩放AP Div 3.3.8 移动AP Div 3.3.9 对齐AP Div 3.3.10 AP Div可见性 3.3.11 设置AP Div的Z轴顺序 3.3.12 嵌套AP Div,3.3 AP Div与Div标签,3.3.1 创建AP Div 新建一个网页文档，将光标置于欲插入AP Div的位置。 (1)选择菜单栏中的【插入记录】/【布局对象】/【AP Div】命令，插入一个默认的AP Div,3.3 AP Div与Div标签,3.3.1 创建AP Div 新建一个网页文档，将光标置于欲插入AP Div的位置。 (2) 将【插入】/【布局】面板上的按钮 拖曳到 文档窗口中，插入一个默认的AP Div (3)单击【插入】/【布局】面板上的按钮 ，在文档窗口中拖曳十字形鼠标，画出一个自定义大小的AP Div,3.3 AP Div与Div标签,3.3.1 创建AP Div 创建好AP Div后，将光标置于AP Div内，然后插入一副图片。 AP Div会随着图像的增大而自动增大。,3.3.2 选定AP Div 单击文档中的图标来选定AP Div 将光标置于AP Div内，然后在文档窗口底边的标签条中选择“”标签 单击AP Div的边框线 在AP元素面板中单击AP Div的名称。 如果要选定两个以上的AP Div，只要按住Shift键，逐个单击AP Div手柄，就可将AP Div同时选定。,3.3 AP Div与Div标签,3.3.3 AP Div属性 CSS-P元素: AP Div的名称 左上: AP Div的左边框、上边框距文档左边界、上边界的距离。 宽高,图3-30 AP Div的属性面板,3.3 AP Div与Div标签,3.3.3 AP Div属性 Z轴: 可见性: default inherit visible hidden 背景图像背景颜色 溢出: AP Div的内容超过AP Div大小时的显示方式，visible hidden scroll auto 剪辑: 距AP Div的4个边界的距离,图3-30 AP Div的属性面板,3.3 AP Div与Div标签,3.3.4 AP Div的默认属性 AP Div的默认属性是可以改变的。 选择文档窗口菜单栏中的【编辑】/【首选参 数】命令，打开【首选参数】对话框，在其 中的【分类】列表框中选择【AP元素】选 项，如图3-31所示。,3.3 AP Div与Div标签,图3-31首选参数对话框,3.3 AP Div与Div标签,显示: 可见性。 宽高 背景图像背景颜色 嵌套: 当AP Div出现重叠时，将采用嵌套的方式。,3.3.5 AP 元素面板 选择菜单栏中的【窗口】/【AP元素】命令， 打开【AP元素】面板，如图3-24所示。,图3-32 AP元素面板,3.3 AP Div与Div标签,嵌套、 选定、 z轴顺序、 可见性、 重叠,3.3.6 Div标签 AP Div与Div标签使用的是同一个标签“”，只是AP Div被赋予了CSS样式，而Div标签只有id一个属性参数。 打开文档窗口，将【插入】/【布局】面板上的按钮 拖曳到文档窗口中，在弹出的插入Div标签对话框中输入ID。 【插入记录】/【布局对象】/【Div 标签】,3.3 AP Div与Div标签,3.3.6 Div标签,3.3 AP Div与Div标签,Div标签并没有可见的特性，只显示其中的内容，只有当鼠标接近时，它才显示红边框。,AP Div标签转换为AP标签,CSS规则定义对话框的定位分类中，将“类型”选项设置为绝对，表示层，即为AP Div标签；否则为Div标签。,3.3.7 缩放AP Div 可同时缩放一个或多个AP Div，使它们具有相同的尺寸。,3.3 AP Div与Div标签,缩放单个AP Div的几种方法： 1. 选定AP Div，拖曳缩放句柄。 2. 选定AP Div，然后按住Ctrl键，再按方向键。 3. 选定AP Div，然后按住Shift+Ctrl键，再按方向键。,3.3.7 缩放AP Div,3.3 AP Div与Div标签,同时缩放多个AP Div的方法： 按住Shift键，选定多个AP Div。在属性面板中，修改宽高文本框即可。,修改/排列顺序/设置宽度相同命令 设置高度相同命令,3.3.8 移动AP Div,3.3 AP Div与Div标签,1. 选定一个或多个AP Div，鼠标指针靠近标签边框时，出现十字箭头，按住鼠标左键拖动鼠标即可。 2.选定一个或多个AP Div，再按方向键。 3.选定一个或多个AP Div，按住Shift键，再按方向键。,3.3.9 对齐AP Div,3.3 AP Div与Div标签,将要对齐的所有AP Div选定后， 修改/排列顺序/左对齐 右对齐 上对齐 对齐下缘,3.3.10 AP Div的可见性 控制AP Div内元素的显示与隐藏。 1. 窗口/AP元素，打开AP元素面板，AP Div按z轴顺序排列。 2. 图标和图标列，可以改变可见性。 3. 也可通过AP Div的属性面板， 改变其可见性。,3.3 AP Div与Div标签,3.3.11 设置AP Div的z轴顺序 在定位元素方面，AP Div可以重叠和嵌套，而表格只能嵌套。 AP Div的z轴坐标值可正可负，可以是0。数值最大的为最上层的AP Div。 在AP元素面板中，用鼠标上下拖曳AP名称，即可改变z轴顺序。 可用JavaScript动态改变AP Div的z轴顺序。,3.3 AP Div与Div标签,3.3.12 嵌套AP Div 重叠的AP Div，仅有视觉上的联系。嵌套的AP Div，对可见性存在继承关系，在页面上保持相对位移量。 先创建父AP Div，将光标置于AP Div当中，在插入子AP Div。它们在AP元素面板中，呈树状结构表示。,3.3 AP Div与Div标签,3.3.12 嵌套AP Div 嵌套的AP Div，并不意味着子AP Div必须在父AP Div中。它们仅在页面上保持相对位移量。 移动子AP Div 移动父AP Div,3.3 AP Div与Div标签,AP Div 的操作包括： 缩放AP Div 移动AP Div 对齐AP Div 设置AP Div的z轴顺序 AP Div的嵌套等。,3.4.1 “我的主页”网页 3.4.2 用表格编排的“常用软件下载”网页,3.4 应用实例,小 结,本章分别对布局网页的常用方法包括框架、 表格和AP Div进行了介绍，并对三者的创建 和属性的修改做了讲解。,