第4章APDiv、框架与网页布局.ppt

《第4章APDiv、框架与网页布局.ppt》由会员分享，可在线阅读，更多相关《第4章APDiv、框架与网页布局.ppt（29页珍藏版）》请在三一文库上搜索。

1、,、,第 4 章,AP Div、框架与网页布局,4.1 【案例 17】“秦始皇兵马俑兵器介绍”网页 相关知识 1设置 AP Div 的默认属性 单击“编辑”“首选参数”命令，弹出“首选参数”对话框，再选择该对话框内“分类”列表框中的“AP 元素”选项，如图 4-1-3 所示。其中各个选项的作用如下： （1）“显示”下拉列表框：设置默认状态下 AP Div 的可视度。可以选择“default”（浏览器默认状态）“inherit” （继承母体可视度）、“visible”（可视）和“hidden”（隐藏）。 （2）“宽”和“高”文本框：设置默认状态下插入 AP Div 的宽度和高度，单位为像素。 （

2、3）“背景颜色”按钮与文本框：设置默认状态下插入 AP Div 的背景颜色，默认值为透明。单击 按钮可以 调出颜色面板，利用它来选中颜色；也可以在文本框内输入颜色的代码。 （4）“背景图像”文本框与“浏览”按钮：用来设置默认状态下插入 AP Div 的背景图像。单击“浏览”按钮， 可以弹出“选择图像源”对话框，从中可以设定 AP Div 的背景图像。 （5）“嵌套”复选框：选中它后，可以在将 AP Div 拖动到其他 AP Div 时实现嵌套。,（6）“Netscape 4 兼容性”复选框：选中它后，Dreamweaver 会向 HTML 文件的标记中加入 JavaScript 函数，用来解决

3、在 Netscape 4.0 浏览器中添加嵌入 CSSAP Div 时可自动调整 AP Div 的尺寸，避免异常问题产生。 2AP Div 的基本操作 （1）创建 AP Div 可以有以下三种方法： 单击“插入”（布局）栏内的“描绘 AP Div”按钮 ，在页面内拖动出一个矩形，即 可创建一个 AP Div，如图 4-1-4 所示。这时鼠标指针变为十字状态。 将“绘制 AP Div”按钮 拖动到网页页面中，也可在页面光标处插入一个默认属性的 AP Div。 将光标移到要插入 AP Div 的位置。单击“插入记录”“布局对象”“AP Div”命令，也可以在网页 内光标处创建一个 AP Div。,

4、图 4-1-4,创建一个 AP Div,（2）选中 AP Div：在改变 AP Div 的属性前应先选中 AP Div，选中的 AP Div 会在 AP Div 矩形的左上角产生 一个双矩形状控制柄图标 ，同时在 AP Div 矩形的四周产生八个黑色的方形控制柄。选中一个 AP Div 的效果如 图 4-1-5 所示。选中 AP Div 的方法有多种，操作方法如下： 单击 AP Div 的边框线，即可选中该 AP Div。 单击 AP Div 的内部，会在 AP Div 矩形的左上角产生一个双矩形状控制柄图标 ，单击该控制柄图标 ， 即可选中与它相应的 AP Div。 按住【Shift】键，分

5、别单击要选择的各个 AP Div 的内部或边框线，即可选中多个 AP Div。 如果选中的是多个 AP Div，则只有一个 AP Div 的方形控制柄是黑色实心的，其他选中的 AP Div 的方形控 制柄是空心的，如图 4-1-6 所示。,图 4-1-5,选中一个 AP Div,图 4-1-6,选中多个 AP Div,（3）调整一个 AP Div 大小：改变一个 AP Div 大小的方法有三种，首先要选中该对象。, 鼠标拖动调整的方法：将鼠标移到 AP Div 的方形控制柄处，当鼠标指针变为双箭头状时拖动鼠标，即可,调整 AP Div 的大小。, 按键调整的方法：按住【Ctrl】键，同时按【】

6、或【】键，可使 AP Div 水平增加或减少一个像素；,每按【】或【】键一次，可使 AP Div 垂直增加或减少一个像素；按住【Ctrl+Shift】组合键的同时，按光,标移动键，可每次增加或减少五个像素。, 利用 AP Div“属性”栏设置：在其“属性”栏内的“宽”和“高”文本框内分别输入修改的数值（单位,是像素），即可调整 AP Div 的宽度和高度。,（4）调整多个 AP Div 大小的方法也有两种：, 命令方法：单击“修改”“排列顺序”“设成宽度相同”命令（见图 4-1-7），即可使选中的 AP Div,与最后选中的 AP Div（它的方形控制柄是黑色实心的）的宽度相同。, 利用 AP

7、 Div“属性”栏进行设置的方法：选中多个 AP Div 后，其“属性”栏变为多 AP Div“属性”栏。,在“宽”和“高”文本框内分别输入修改的数值（单位是像素），即可调整选中的多个 AP Div 的宽度和高度（单,位是像素）。,（5）设置多个 AP Div 的排列顺序和对齐可采用以下方法：, 命令的方法：选中多个 AP Div，单击“修改”“排列顺序”命令，可弹出它的下一级菜单，如图 4-1-7,所示。单击其中的一个命令，即可获得相应的对齐效果。 例如，选中多个 AP Div，单击“修改”“排列顺序”“对齐下缘”命令，即可将各 AP Div 以最后选中 的 AP Div（控制柄是实心）的下

8、边线为基准进行对齐，如图 4-1-8 所示。,图 4-1-7 “排列顺序”的下一级菜单,图 4-1-8,对齐下缘后的多个 AP Div, 按键调整的方法：按住【Ctrl】键，同时按光标移动键，即可将选中的多个 AP Div 对齐。按【】键可 右对齐，按【】键可左对齐，按【】键可下对齐，按【】键可上对齐。 利用 AP Div“属性”栏设置：选中多个 AP Div 后，在多 AP Div“属性”栏内的“左”或“上”文本框 内输入修改的数值，即可使多个 AP Div 的左边线或上边线以修改的数值对齐。 （6）调整 AP Div 的位置可以采用如下方法： 鼠标拖动调整的方法：将鼠标指针移到 AP Di

9、v 的边框上，当鼠标指针变为 形状时拖动，即可移动 AP Div。, 按键调整的方法：每按一次【】或【】键，可使 AP Div 向右或向左移动一个像素；每按一次【】 或【】键，可使 AP Div 向下或向上移动一个像素；如果按住【Shift】键的同时，按光标移动键，也可调整 AP Div 的位置，每次移动五个像素。 利用 AP Div“属性”栏进行设置的方法：选中要调整大小的 AP Div，在其单个 AP Div“属性”栏内的 “左”文本框中输入修改的数值（单位是像素），即可调整 AP Div 的水平位置；在“上”文本框内输入修改的数 值（单位是像素），可调整 AP Div 的垂直位置。 3A

10、P Div“属性”栏 AP Div“属性”栏有两种：一种是单 AP Div“属性”栏，这是在选中一个 AP Div 时出现的；另一个是多 AP Div“属性”栏，这是在选中多个 AP Div 时出现的。单 AP Div“属性”栏如图 4-1-9 所示，多 AP Div“属 性”栏如图 4-1-10 所示。从图中可以看出，多 AP Div“属性”栏内除了基本的属性设置选项外，还增加了关 于文本属性的设置选项。其中各选项的作用如下：,图 4-1-9,单 AP Div“属性”栏,图 4-1-10,多 AP Div“属性”栏,（1）“CSS-P 元素”下拉列表框：用来输入 AP Div 的名称，它会在

11、“AP 素材”面板中显示出来。该名称可以 在脚本中使用，例如通过脚本实现 AP Div 的显示或隐藏等。 （2）“左（L）”文本框用来确定 AP Div 在页面中的位置，单位为像素，其内的数据是 AP Div 左边线与页面 左边缘的间距。对于嵌套中的子 AP Div，“左（L）”文本框内的数据是相对于父 AP Div 的左边的位置。 （3）“上（T）”文本框内的数据是 AP Div 顶边线与页面顶边缘的间距。对于嵌套中的子 AP Div，是相对于 父 AP Div 的左边或顶端的位置。 （4）“宽”和“高”文本框：用来确定 AP Div 的大小，单位为像素。 （5）“Z 轴”文本框：用来确定

12、AP Div 的 Z 轴顺序，用来设置嵌套 AP Div 的重叠层次，值越大，越靠上方。 （6）“可见性”和“显示”下拉列表框：用来确定 AP Div 的可视性。它有“default”（默认，由浏览器决定， 大多数会继承它的父 AP Div 的可见性）、“inherit”（与其父 AP Div 的可视性相同）、“visible”（显示 AP Div,图 4-1-11,和其内对象，与其父 AP Div 无关）和“hidden”（隐藏 AP Div 和其内对象，与其父 AP Div 无关）四个选项。,（7）“背景图像”文本框与,按钮：用来确定 AP Div 的背景图案。,（8）“背景颜色”按钮与文

13、本框：用来确定 AP Div 的背景颜色。 （9）“标签”下拉列表框：用来选择 AP Div 的样式，其内有 DIV 和 SPAN 两个选项，这是 HTML 的两个标签。 （10）“溢出”下拉列表框：它决定了当 AP Div 中的内容超出 AP Div 的边界时的处理方法。它有“visible”（可 见，即根据图像大小自动调整 AP Div 的大小，使内容全部显示，为系统默认）、“hidden”（当图像超出 AP Div 的范围后，超出的部分不显示）、“Scroll”（当图像超出 AP Div 的范围后，加滚动条）和“Auto”（根据 AP Div 中的内容能否超出 AP Div 的范围，决定

14、是否加滚动条）四个选项。选择前三个不同选项后，在浏览器中的显示 效果如图 4-1-11 所示。注意：在网页页面设计视图窗口内显示的都与图 4-1-11（a）一样。,（a）,（b）,（c）,在“溢出”下拉列表框中分别选择“Visible”、“Hidden”和“Scroll”后的不同效果,（11）“剪辑”选项组：用来确定 AP Div 的可见区域，即确定 AP Div 中的对象与 AP Div 边线的间距。“左”、,“上”、“右”和“下”四个文本框分别用来输入 AP Div 中的对象与 AP Div 的左边线、顶部边线、右边线和底部,边线的间距，单位为像素。,4.2 【案例 18】“不同亮度的图像

15、”网页,相关知识,1“AP 元素”面板和改变 AP Div 的重叠顺序,在“AP 元素”面板中，用户可以对 AP Div 的可视性、嵌套关系、显示顺序和相互覆盖性等属性进行设置。,单击“窗口”“AP Div”命令，即可调出“AP Div”面板，即 AP Div 监视器，如图 4-2-6（b）所示。,（1）显示 AP Div 的信息：在图 4-2-4 所示的“AP 元素”面板中有五个 AP Div，“名称”列，是各个 AP Div,的名称，“Z”列内的数据显示各 AP Div 的顺序，Z 值越高，显示越靠上。Z 值可以是负数，表示在网页下边，即,隐藏起来，网页的“Z 轴”数值为 0。,（2）选定

16、 AP Div：单击“AP 元素”面板中 AP Div 的名称，即可选中网页中相应的 AP Div。按住【Shift】键，同,时依次单击“AP 元素”面板中各个 AP Div 的名称，即可选中网页中相应的多个 AP Div。,（3）更改 AP Div 的名称：双击“名称”列中 AP Div 的名称，使此行名称处出现白色的矩形，如图 4-2-8,所示，即可输入 AP Div 的新名字。,（4）设定是否允许 AP Div 重叠：如果不选中“AP 元素”面板中的“防止重叠”复选框，则表示允许 AP Div 之间有重叠关系；如果选中“防止重叠”复选框，则表示不允许 AP Div 之间有重叠关系。 （5

17、）改变 AP Div 之间的嵌套关系：在 AP Div 中插入另一个 AP Div 叫做 AP Div 的嵌套。在 AP Div 的嵌套中， 子 AP Div 的属性决定于其父 AP Div 的属性。在选定父 AP Div 后，子 AP Div 也会被选定；在移动或复制父 AP Div 时， 子 AP Div 也会随之被移动或复制。 按住【Ctrl】键，同时拖动“AP 元素”面板中源 AP Div 的名称（“apDiv4”）到另一个 AP Div 名称之上（例如 “apDiv5”，可称为目标 AP Div），当目标 AP Div 名字（例如“apDiv5”）四周出现矩形框时释放鼠标左键，即可将

18、 源 AP Div 成为目标 AP Div 的子 AP Div。再按住【Ctrl】键，将“apDiv3”AP Div 拖动到“apDiv4”AP Div 之上， 然后释放鼠标左键，“apDiv3”AP Div 即可成为“apDiv4”AP Div 的子 AP Div。 “AP Div”面板如图 4-2-9 所示。,图 4-2-8,更改 AP Div 的名称,）,按钮，使,由图 4-2-9 可以看出，“apDiv3”AP Div 是“apDiv4”AP Div 的子 AP Div，“apDiv4”AP Div 是“apDiv5” AP Div 的子 AP Div。父 AP Div 名称的左边有一

19、个 图标，单击该图标，可以使父 AP Div 收缩， 图标变为 图 标。再单击 图标，可使父 AP Div 的子 AP Div 展开， 图标变为 图标。 如果向左下方拖动子 AP Div 的名称，可以取消它与父 AP Div 的嵌套关系。 （6）改变 AP Div 的显示顺序：单击要更改显示顺序的 AP Div 的 Z 值（例如“apDiv3”，使它周围出现矩形 框，如图 4-2-10 所示，输入新的 Z 值。此外，在 AP Div 的“属性”栏内的“Z 轴”文本框内也可以改变 Z 值。,（7）设置 AP Div 的可视性：单击“AP 元素”面板内的,按钮列出现许多人眼图像，如图 4-2-11

20、,所示。“AP 元素”面板内的,按钮列显示的,图像（睁开的人眼图像），表示此行的 AP Div 可视（即可见的）。,图 4-2-9,AP Div 之间的嵌套,图 4-2-10,修改 Z 值,图 4-2-11,单击,按钮后效果,l,l,l,l,单击,图像，可使,图像消失，再单击原,图像处，会出现,图像，表示此行的 AP Div 是不可视的。,如果再单击,图像，可使它变为,图像，表示此行的 AP Div 又变为可视的。将“apDiv3”AP Div 变为不可视,后的“AP 元素”面板如图 4-2-12 所示。 2AP Div 与表格互相转换 （1）将 AP Div 转换为表格：单击“修改”“转换”

21、“将 AP Div 转换为表格”命令，弹出“将 AP Div 转换为表格”对话框，如图 4-2-13 所示。其内各选项的作用如下： “最精确”单选按钮：表示使用最高的精度转换。转换后的单元格位置基本不变，空白处会产生空的单元 格。 “最小：合并空白单元格”单选按钮：选中它后，会合并空白单元格。 文本框：选中“最小：合并空白单元格”单选按钮后，该文本框会变为有效，其内可输入数 值，单位为像素。当 AP Div 与 AP Div 的间距小于此值时，AP Div 转换为表格后会自动对齐，而不是以空 白单元格去补充，从而避免产生过多的表格和单元格。 “使用透明 GIFs”复选框：选中该复选框后，AP

22、Div 转换后的表格空白单元格用透明的 GIF 图像填充，以 保证在任何浏览器中都能正常显示。,l,l,l,l,l,“置于页面中央”复选框：选中该复选框后，转换后的表格在页面居中显示。不选中此复选框时，转换后 的表格居页面左上角显示。 “防止重叠”复选框：选中该复选框后，可防止 AP Div 重叠。 “显示 AP 元素面板”复选框：选中该复选框后，可显示“AP 元素”面板。 “显示网格”复选框：选中该复选框后，可显示网格。 “靠齐到网格”复选框：选中它后，可使网格吸附（捕捉）功能有效。 （2）将表格转换为 AP Div：由于 AP Div 的功能比表格的功能要强得多，所以将表格转换为 AP D

23、iv 以后， 可以使网页更丰富多彩。将表格转换成 AP Div 的方法如下：,图 4-2-12,将“apDiv3” AP Div 不可视,单击“修改”“转换”“将表格转换为 AP Div”命令，弹出“将表格转换为 AP Div”对话框，如图 4-2-14 所示。该对话框内各复选框的作用与“转换 AP Div 为表格”对话框内“布局工具”选项组中各选项的含义一样。,图 4-2-13 “转换 AP Div 为表格”对话框,图 4-2-14 “将表格转换为 AP Div”对话框,4.3 【案例 19】“中国名胜图像浏览 2”网页 相关知识 1创建框架和“框架”面板 （1）创建框架的常用方法：在网页中

24、创建框架的常用方法可以有以下三种。, 单击“文件”“新建”命令，弹出“新建文档”对话框，如图 4-3-7 所示。在该对话框中可以创建有,框架的网页。, 单击“插入”（布局）栏内“框架”快捷菜单中的一个命令，如图 4-3-14 所示，即可在页面内设置出相,应的框架。, 单击“修改”“框架集”“”命令或单击“插入记录”“HTML”“框架”“”,命令，也可以创建框架。,（2）增减框架个数：在创建框架后，要增加或删除框架的个数，首先应单击框架内部，再单击“查看”“可,视化助理”“框架边框”命令选项，然后可采用如下方法进行。, 增加新框架：将鼠标指针移到框架的四周边缘处，当鼠标指针为“n”或“o”形状时

25、，向鼠标指针箭头,指示的方向向内拖动，即可在水平或垂直方向增加一个框架。, 在框架区域内增加新框架：单击某一个框架区域内部，使光标在此区域内出现，然后按照上述方法在框,架区域内增加新框架。, 调整框架的大小：用鼠标拖动框架线，即可调整框架的大小。, 删除框架：拖动框架线，一直拖动到另一条框架线或边框处，即可删除框架。,（3）“框架”面板：单击“窗口”“框架”命令，调出“框架”面板，“框架”面板也叫框架观察器，如图,4-3-15 所示。如果光标在框架内，则框架观察器中对应框架内的文字变为黑色，如图 4-3-16 所示。 “框架”面板的作用是显示出框架网页的框架结构（也叫分栏结构）。单击某一个分栏

26、框架（选中的框架边框 呈黑色），即可选中该分栏框架，同时“属性”栏变为该分栏框架“属性”栏。如果单击框架的外框线，可以选 中整个框架（即框架集），如图 4-3-17 所示，同时“属性”栏变为框架集“属性”栏。,图 4-3-15 “框架”快捷菜单,图 4-3-16 “框架”面板,图 4-3-17,选中整个框架集,2在框架内插入 HTML 文件 （1）单击网页分栏框架的某一个分栏框架窗口内部，使光标在该分栏框架窗口内出现。在选中的分栏框架窗,口内输入文字和导入对象，然后将该分栏框架中的内容保存为网页文件。 （2）按住【Alt】键，单击一个框架分栏的内部，使光标出现在该分栏框架窗口内，或者单击“框架

27、”面板,中的分栏框架内部，选中相应的分栏框架。然后，单击其“属性”栏中“源文件”文本框后的按钮,，弹出“选,择 HTML 文件”对话框。从中选择文件夹、要加载的文件，在“相对于”下拉列表框中选择“站点根目录”选项 后，“URL”文本框中会给出选中文件相对于站点文件夹的相对路径和文件名称；选择“文档”选项后，“URL”文 本框中会给出选中文件的名称。然后，单击“确定”按钮，即可完成在分栏框架内插入 HTML 文件的案例。 （3）也可以单击“文件”“在框架中打开”命令，弹出“选择 HTML 文件”对话框。利用它可将外部的 HTML 文件加载到选定的分栏框架窗口内。 3保存框架文件 在文件菜单内有许

28、多命令用来保存框架集和框架分栏内的网页，而且具有智能化，用户可以针对需要保存的 内容显示可以使用的相应的命令。 （1）如果网页中的框架集是新建的或是进行过修改的，则单击“文件”“保存全部”命令，弹出“另存为” 对话框，同时整个框架（即框架集）会被虚线框住。然后输入文件名，再单击“保存”按钮，完成整个框架集网 页文件的存储。此时再次调出“另存为”对话框，同时某一个框架会被虚线框住。输入文件名，再单击“保存” 按钮，完成该框架内网页文件的存储。以后依次将框架分栏内的内容保存为 HTML 网页文件，保存的是哪个分栏,l,l,中的网页文件，则该分栏就会被虚线框住。 （2）如果网页中的框架集是新建的或修

29、改后的，则单击“文件”“框架集另存为”命令，或单击“文件” “保存框架页”命令，可弹出“另存为”对话框。从中输入文件名，再单击“保存”按钮，完成框架集文件的 保存。 （3）单击一个框架分栏内部，使光标出现在该框架窗口内。单击“文件”“保存框架”命令，弹出“另存为” 对话框。输入网页的名字，单击“保存”按钮，即可将该框架分栏中的网页保存。 （4）修改框架文件后，单击“文件”“关闭”命令，会弹出一个提示框，提示是否存储各个 HTML 文件。 连续单击“是”按钮可依次保存各框架（先保存光标所在的框架，最后保存整个框架集）。 4框架集和分栏框架的“属性”栏 （1）框架集的“属性”栏：单击框架的外边框后

30、，可使“属性”栏变为框架集“属性”栏。改变框架集属性 需要通过框架集“属性”栏来完成，如图 4-3-14 所示。 “边框”下拉列表框：用来确定是否要边框。选择“是”选项保留边框；选“否”选项是不保留边框；选 “默认”选项是采用默认状态，通常要保留边框。,“边框颜色”下拉按钮：用来确定边框的颜色。单击 可在后面的文本框中直接输入颜色数据。,按钮，可调出颜色面板，从中可选择边框的颜色，也,l,l,l,l,l,l,l,“边框宽度”文本框：用来输入边框的宽度数值，其单位是像素。如果在该文本框内输入 0，则没有边框。,如果单击“查看”“框架边框”命令，则网页页面编辑窗口内会显示辅助的边框线（不会在浏览器

31、中显,示出来）。,“值”文本框：用来确定网页左边分栏的宽度或上边分栏的高度。,“单位”下拉列表框：用来选择“值”文本框内数据的单位，单位有“像素”等。,（2）分栏框架的“属性”栏：按住【Alt】键，单击分栏框架的内部后，可使“属性”栏变为分栏框架“属,性”栏。分栏框架属性的改变需要通过分栏框架“属性”栏来完成。分栏框架的框架“属性”栏中各选项的作用,如下：,“框架名称”文本框：用来输入分栏的名字。,“源文件”文本框：用来设置该分栏内 HTML 文件的路径和文件的名字。,“滚动”下拉列表框：用来选择分栏是否在框架的右边和下边添加滚动条。选择“是”选项，表示添加滚,动条；选择“否”选项，表示不添加

32、滚动条；选择“自动”选项，表示根据框架分栏内是否能够完全显示,出其网页的内容来自动选择是否在框架的右边和下边添加滚动条；选择“默认”选项，表示采用默认状态。,“不能调整大小”复选框：如果选中该复选框，则不能用鼠标拖动框架的边框线，调整分栏大小；如果有,选中该复选框，则可以用鼠标拖动框架的边框线，调整分栏大小。,l,l,“边框”下拉列表框：用来确定是否要边框。当此处的设置与框架集“属性”栏的设置不一致时，以此处,设置为准。,“边框颜色”下拉按钮：用来确定边框的颜色。,4.4 【案例 20】“中国旅游万里行”网页,相关知识,1描图,（1）将描图与其他对象对齐：载入描图，在网页内插入一个对象，单击选

33、中网页内的对象（例如，图像或文,字等）。单击“查看”“跟踪图像”“对齐所选范围”命令，即可将描图的左上角与选中对象的左上角对齐。,（2）显示/隐藏描图：在网页中调入描图后，单击“查看”“跟踪图像”“显示”命令，可以在显示描,图和隐藏描图之间切换。,（3）调整描图的位置：单击“查看”“跟踪图像”“调整位置”命令，弹出“调整跟踪图像位置”对话,框，如图 4-4-10 所示。利用它可以改变描图的位置。在该对话框的“X”和“Y”文本框内分别输入坐标值（单,位为像素），即可将描图的左上角以指定的坐标值定位。单击“确定”按钮完成重定位。,另外，在打开“调整跟踪图像位置”对话框的情况下，也可以通过按键盘中的

34、方向键来移动描图，每按一次,键即可移动一个像素。按住【Shift】键的同时，按键盘中的方向键也可以移动描图，每按一次键即可移动五个,、 、,像素。 （4）重设描图位置：单击“查看”“跟踪图像”“重设位置”命令，可将描图的位置恢复到调整前 的位置。 图 4-4-10 “调整跟踪图像位置”对话框 2“插入”（布局）栏简介和网页布局的调整 Dreamweaver CS3 的“插入”（布局）栏如图 4-4-7 所示。“插入”（布局）栏从左到右的主要按钮有“插入,Div 标签”按钮,、“绘制 AP Div”按钮 、“Spry 菜单栏”按钮 、“Spry 选项卡式面板”按钮 、“Spry 折叠,式”按钮

35、“Spry 可折叠面板”按钮 “表格”按钮 ，右边的两个按钮是“绘制布局表格”工具按钮 和“绘,制布局单元格”工具按钮 。单击“查看”“表格模式”“布局模式”命令，进入网页布局模式状态，此时，,“绘制布局表格”工具按钮 和“绘制布局单元格”工具按钮 有效。利用“绘制布局表格”工具按钮 可以绘制,布局表格，如图 4-4-11 所示。利用“绘制布局单元格”工具按钮 ，可在布局表格内绘制出网页布局单元格，,如图 4-4-12 所示。,如果没有绘制布局表格就绘制布局单元格，则会自动产生一个布局表格。注意：不可以在布局单元格内绘制,布局表格和布局单元格。,（1）选中布局表格：单击布局表格内部或它的标签布

36、局表格，即可选中布局表格。选中的布局表格的四周会,出现三个控制柄和布局表格宽度标注，如图 4-4-11 所示。,（2）调整布局表格的大小：用鼠标拖动布局表格的标签，可改变布局表格的位置；用鼠标拖动布局表格的绿,色控制柄，可改变布局表格的大小。注意：不能将布局表格调整到比其中的单元格还小，也不能将布局表格移到,其他布局表格之上。,图 4-4-11,绘制的布局表格,图 4-4-12,绘制的布局单元格,（3）选中布局单元格：将鼠标指针移到布局单元格的蓝色线条处，布局单元格的线条会变为红色，此时单击 布局单元格的线条，即可选中布局单元格。选中的布局单元格四周会有八个控制柄，如图 4-4-12 所示。

37、（4）调整单元格的大小与位置：选中单元格后，用鼠标拖动单元格线条，可改变单元格的位置；用鼠标拖动 单元格的控制柄，可改变单元格的大小。注意：不能将单元格移出所在的布局表格，也不能将单元格移到其他单 元格之上。 3布局表格和布局单元格的“属性”栏 （1）布局表格的“属性”栏：单击选中布局表格后，调出布局表格的“属性”栏，它与表格的“属性”栏不 一样，如图 4-4-13 所示。布局表格“属性”栏内各选项的作用如下：,l,l,l,l,l,l,l,l,“宽”选项组：它有两个单选按钮，分别是“固定”和“自动伸展”。选择“固定”单选按钮后，还需要 在其文本框内输入布局表格的宽度数值（单位为像素），可以保证

38、布局表格的固定宽度；选择“自动伸展” 单选按钮后，布局表格的宽度可以自动伸展为整个窗口的宽度。 “高”文本框：用来设置布局表格的高度数值（单位为像素）。 “背景颜色”按钮与文本框：用来设置布局表格的背景颜色。,图 4-4-13,网页布局表格“属性”栏,“填充”文本框：用来设置布局表格内布局单元格中插入对象距边线的距离数值（单位为像素）。该值为 0 时，如图 4-4-14 所示；该值为 10 时，如图 4-4-15 所示。 “间距”文本框：用来设置布局表格内各布局单元格的间距数值（单位为像素）。该值为 0 时，如图 4-4-14 所示；该值为 10、填充值为 10 时，如图 4-4-15 所示。

39、 “清除行高”按钮 ：单击该按钮，可清除行高。 “使单元格宽度一致”按钮 ：单击该按钮，可使单元格宽度一致。 “删除所有间隔图像”按钮 ：该按钮在添加间隔图像后才会有效。单击该按钮，可删除所有的间隔图像。,l,l,图 4-4-14 “填充”和“间距”值均为 0,图 4-4-15 “填充”和“间距”值均为 10,“删除嵌套”按钮 ：单击该按钮，可删除嵌套在布局表格内的选中的布局表格。,（2）布局单元格的“属性”栏：选中布局单元格，调出布局单元格的“属性”栏，如,图 4-4-16,所示。布局单元格“属性”栏内前面没有提到的选项的作用如下： “水平”下拉列表框：用来确定布局单元格内对象在水平方向的对

40、齐方式。它有四个选项，分别为“默认” （一般为左对齐）、“左对齐”、“居中对齐”和“右对齐”。,图 4-4-16,布局单元格的“属性”栏,l,l,“垂直”下拉列表框：用来确定布局单元格内对象在垂直方向的对齐方式。它有五个选项，分别为“默认” （一般为居中）、“顶端”、“中间”、“底部”和“基线”。 “不换行”复选框：选中该复选框后，可取消外框线。 4布局表格和布局单元格菜单 单击选中布局表格，再单击总宽度标注右边的箭头，可调出布局表格菜单，如图 4-4-17 所示。单击单元格 宽度标注右边的箭头，可调出单元格菜单，如图 4-4-18 所示。,图 4-4-17,布局表格菜单,图 4-4-18,单

41、元格菜单,（1）“清除所有高度”：可以将布局表格内的单元格的高（即单元格顶部与布局表格顶端的间距）清除。如果 布局表格内没有单元格，则自动建立充满布局表格的单元格。 （2）“使所有宽度一致”：使所有布局单元格的宽度一样。 （3）“移除所有分隔符图像”：删除所有的间隔图像。 （4）“删除嵌套”：删除选中的布局表格中的间隔图像。,（5）“列设置为自动伸展”：使选中的布局单元格的列自动适应布局表格的宽度。,（6）“添加间隔图像”：在选中的布局单元格内添加间隔图像。间隔图像是透明图，它可以用来控制自动伸展,表的间隔。间隔图像会适应页面上已经设置的表格和单元格的宽度。,5自动伸展和间隔图像,（1）自动伸

42、展：布局视图给网页设计者提供了表的两种宽度，即指定宽度和自动伸展。每个表的宽度都会显,示在表顶部的页眉显示区中。指定宽度是一个明确的数字（例如 160 像素），设置指定宽度会影响同一列的其他,单元格或表；自动伸展是根据窗口的大小调整宽度。如果使用自动伸展，不论浏览器的窗口设置为多大，设计的,版面都会充满整个浏览器的窗口。在一个版面中只有一列可以自动伸展。, 设置自动伸展宽度：单击需要设置自动伸展的表顶部的下拉按钮，再单击布局表格下拉菜单中的“列设,置为自动伸展”命令。另外，也可以选择要操作的列，再选中“属性”栏中的“自动伸展”单选按钮。,当某一列被设置为自动伸展后，Dreamweaver CS

43、3 会插入间隔图到指定宽度的列以控制版面。, 设置指定宽度：并不是所有的列都适合于自动伸展宽度，有时需要精确指定列的宽度，可单击选中“属,性”栏中的“固定”单选按钮，再在其文本框中输入宽度数值。如果输入的数值小于对象的宽度，Dreamweaver,会自动设置宽度到正确的大小。,（2）间隔图像：如果选择在自动伸展表里不插入间隔图像的话，并且如果列里没有内容，列就会被改变大小，,甚至完全消失。用户可以在每一列中插入或删除间隔图像，也可以在创建自动伸展列的同时让 Dreamweaver CS3,自动增加间隔图像。插入间隔图像后，列会有些微小的移动，并且在列的顶部会出现两条横线。创建间隔图像的,方法如

44、下：, 单击单元格菜单（见图 4-4-18）中的“添加间隔图像”命令，会弹出“选择占位图像”（应叫“选择间,隔图像”）对话框，如图 4-4-19 所示。,图 4-4-19 “选择间隔图像”对话框,另外，单击单元格菜单中的“列设置为自动伸展”命令，可以弹出“选择占位图像”对话框（增加了一个“对,于自动伸展表格不要使用间隔图像”单选按钮）。, 如果选中了“创建占位图像文件”单选按钮，再单击“确定”按钮，就会弹出“保存间隔图像文件为”,对话框。在该对话框中，用户可以在“文件名”文本框中输入间隔图像的名称，再单击“保存”按钮，将间隔图,像保存到本地的站点中。, 如果选中了“使用现存的占位图像文件”单选按钮，再单击“确定”按钮，就会弹出“选择间隔图像文,件”对话框。在这个对话框里可以选择已存在的图片作为间隔图像。, 如果单击布局表格菜单中的“列设置为自动伸展”命令，则弹出的“选择间隔图像”对话框中会增加一,个“对于自动伸展表格不要使用间隔图像”单选按钮，选中该单选按钮，再单击“确定”按钮，会显示一个提示,信息框。如果已经在要设置自动伸展的表格内填入了内容，可以单击“确定”按钮，完成设置自动伸展的工作。,