Dreamweaver布局模式、模板与资源列表

首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
如果在靠近布局表格边缘的位置绘 制单元格，则单元格的边缘会自动与包 含它的布局表格的边缘对齐。若要临时 禁用靠齐，在绘制单元格时按住【Alt】 键即可。
首页 末页 向上 向下 返回 结束 调音
局 表格布局页面的方法，模 板的创建及其使用方法。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
课堂讲解
“布局”模式 模板和库 使用资源列表
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
图10-3
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
该对话框中各项参数的含义如下。 自动插入间隔符：指定Dreamweaver是否应该在将列设置 为自动伸展时自动插入间隔符。 站点的间隔图像：为的站点设置间隔图像文件。从下拉列 表中选择一个站点，然后单击 按钮创建一个新的间 隔图像文件，或 单击按钮定位该站点中现有的间隔 图像文件。 单元格外框：设置布局单元格外框的颜色。 表格外框：设置布局表格外框的颜色。 表格背景：设置布局表格中没有布局单元格的区域的颜色 （4）设置完成后单击 按钮保存设置即可。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
绘制嵌套布局表格的具体操作如下。 （1）切换到“布局”模式。 （2）在“插入栏”的“布局”选项卡中单 击“绘制布局表格”按钮 。 （3）将鼠标光标放置在页面上，此时鼠标 光标变为加号（+）。 （4）指向现有布局表格中的空白（灰色） 区域，然后拖动鼠标以创建嵌套布局表格。
《中文版Dreamweaver MX 2004网页制作培训教程 》
第十课 布局模式、模板与资源列表
课前导读 课堂讲解 上机实战 课后练习
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
课前导读
基础知识 重点知识
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
移动布局表格的具体操作如下。 （1）通过单击表格顶部的标签选择一个表格，该表格 周围会出现选择控制点。 （2）执行下列操作之一： 按住鼠标左键直接将表格拖到页上的另一个位置； 按键盘上的方向键移动该表格，每次可移动1个像 素。如果按住【Shift】键的同时再按方向键移动 该表格，每次可移动10个像素。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
图10-5 ：选中该单选项将单元格设置为 固定宽度。在旁边的数值框中输入宽度 （以像素为单位）。图10-6 “选择占位 图像”对话框 ：选中该单选项使单元格能够 自动伸展。
某些表格单元格可能在垂直方向上会收缩。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
图10-4
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
布局单元格的大小调整及布局表格的移动 可以调整布局单元格的大小或移动它们， 但是不能使它们重叠。对单元格进行移动或调 整大小之后，该单元格不能跨越包含它的布局 表格的边框。布局单元格不能小于其内容的大 小。只有当布局表格嵌套在另一个布局表格中 时，才可以移动该布局表格。 调整布局单元格大ቤተ መጻሕፍቲ ባይዱ的具体操作如下。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
（2）在“插入”栏的“布局”选项卡中单击“绘 制布局表格”按钮 。 （3）将鼠标光标放置在页面上，此时鼠标光标变 为加号（+）。 （4）将鼠标移到要创建表格的左上角位置并按住 鼠标不放拖动到要创建表格的右下角后释放鼠标。 若要绘制多个布局表格，只需在绘制布局表格时 按【Ctrl】键拖动便可以连续绘制出多个布局表格。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
设置布局表格和单元格属性
可以通过属性面板来更改任何布局单元格或表格的 外观，包括宽度和高度、背景颜色以及单元格内容的对 齐方式等。 布局单元格属性设置 在属性面板中设置布局单元格格式的具体操作如下。 （1）选择一个单元格，单击该单元格的边缘，或者在 按住【Ctrl】键的同时单击该单元格中的任何位置。 （2）在属性面板中设置各项参数，属性面板如图 10-5所示。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
调整布局表格和布局单元格
当创建布局单元格时，Dreamweaver会自动 指定单元格的高度，使单元格以绘制的高度显 示，即使单元格是空的也是如此。将内容插入 到单元格之后，可能不再需要指定高度，则可 清除所有高度，让表格自动根据单元格中的内 容进行高度调整。另外，可能还会根据需要对 布局表格或布局单元格的大小、位置等进行调 整，下面具体讲解。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
在布局表格中添加具体内容
在“布局”模式中可以将文本、图像和 其他内容添加到布局单元格中，就像在“标 准”模式中将内容添加到表格单元格一样。 单击要添加内容的单元格，然后输入文本或 插入其他内容即可。 只能将内容插入布局单元格中，而不是 布局表格的空白（灰色）区域，因此在可以 添加内容之前，必须先创建布局单元格。
切换到“布局”模式
在绘制布局表格或布局单元格之前，必须从 “标准”模式切换到“布局”模式。要从“标准” 模式（设计视图）切换到“布局”模式，可执行 如下操作。 （1）执行如下操作之一： 选择[查看][表格模式][布局模式]菜单命令； 在“插入栏”的“布局”选项卡中单击 按钮。
首页 末页 向上 向下 返回 结束 调音
首页 末页 向上 向下 返回 结束 调音


零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
绘制布局单元格 绘制布局单元格的具体操作如下。 （1）切换到“布局”模式。 （2）在“插入”栏的“布局”选项卡中单击“绘制布局 单元格”按钮 。 （3）将鼠标光标放置在页面上，此时鼠标光标变为加号 （+）。 （4）将鼠标移到要创建布局单元格的左上角位置并按住 鼠标不放拖动到要创建布局单元格的右下角后释放鼠标。若 要绘制多个布局单元格，只需在绘制布局单元格时按【Ctrl】 键拖动即可。
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
（2）首次执行以上操作之一后，会打开“从 布局模式开始”对话框，如图10-1所示，在该对 话框中给出在“布局模式”下创建表格的方法的 提示。 （3）单击 按钮即可切换到布局模式。 切换到“布局”模式后，在“文档”窗口的顶部会 出现标有“布局模式”的蓝色长条。如果当前页 上存在表格，这些表格则会显示为布局表格，如 图10-2所示。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
（1）选择要调整大小的布局单元格， 方法是单击该单元格的边缘，或者在按住 【Ctrl】键的同时单击该单元格中的任何 位置。所选布局单元格周围将出现选择控 制点。 （2）拖动选择控制点来调整单元格的 大小。单元格边缘会自动与其他单元格的 边缘靠齐。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
删除单元格高度 删除单元格高度可执行如下操作之一： 单击表格标题菜单，然后选择“清除所有高度” 命令，如图10-4所示。 通过单击表格顶部的选项卡选择一个布局表格， 然后单击属性面板中的“清除行高”按钮 。 当Dreamweaver删除该表格中指定的所有高度时，
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
认识“布局视图”
页面上显示的布局表格外框为绿色， 而布局单元格外框为蓝色。当鼠标光标移 动到表格单元格上时，Dreamweaver会高 亮显示该单元格（单元格边框线变为红 色），如图10-2所示。
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
绘制嵌套布局表格 可以将一个布局表格绘制在另一个布局表 格中，即创建嵌套表格。对外部表格所进行 的更改不会影响嵌套表格中的单元格。例如， 当更改外部表格中行或列的大小时，内部表 格中单元格的大小不发生变化。可以插入多 级嵌套表格。嵌套布局表格的大小不能超过 包含它的表格。
“布局”模式
切换到“布局”模式 退出“布局”模式 认识“布局视图” 认识“布局视图” 在布局表格中添加具体内容 调整布局表格和布局单元格 设置布局表格和单元格属性
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
图10-1
图10-2
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
退出“布局”模式
在“布局”模式中创建完布局表格后，如 果要向表格中添加内容或对表格进行编辑，最好 切换回“标准”模式。退出“布局”模式可执行 如下操作之一： 在“文档”窗口的顶部，单击标有“布局模式” 的长条中的“退出”命令； 选择[查看][表格模式][标准模式]菜单命令； 在“插入栏”的“布局”选项卡中单击 按 钮。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
基础知识
资源列表的使用。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
重点知识
“布局”模式中用布
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
认识“布局视图”
在“布局”模式下，可以在一个布局表格中 使用多个布局单元格对页面进行布局，也可以使 用多个单独的布局表格进行更复杂的布局，还可 以通过将一个新的布局表格放置在现有的布局表 格中进行布局表格嵌套。 绘制布局表格 绘制布局表格的具体操作如下。 （1）切换到“布局”模式。
首页 末页 向上 向下 返回 结束 调音
零点 起飞电脑培训学校
《中文版Dreamweaver MX 2004网页制作培训教程 》
页面上显示的布局表格外框为绿色。若 要更改外框颜色，具体操作如下。 （1）选择[编辑][首选参数]菜单命令，打 开“首选参数”对话框。 （2）从左侧的“分类”列表中选择“布局 模式”选项。 （3）在右侧的各项参数中按需要进行设置， 如图10-3所示。