布局模式、模板与资源列表讲堂

1、中文Dreamweaver 8网页设计教育技术学04级 课堂讲解 上机实战 第13课 布局模式、模板与资源列表 中文Dreamweaver 8网页设计教育技术学04级课堂讲解 布局模式 使用模板资源列表与库中文Dreamweaver 8网页设计教育技术学04级布局模式 认识布局模式 切换到布局模式 认识布局视图 退出布局模式 创建布局表格和布局单元格 在布局表格中添加内容 调整布局表格和布局单元格 设置布局模式首选参数 中文Dreamweaver 8网页设计教育技术学04级切换到布局模式 在绘制布局表格或布局单元格之前，必须切换到布局模式下。在“布局”插入栏中单击“布局”按钮即可切换到布局模式

2、。 中文Dreamweaver 8网页设计教育技术学04级认识布局视图 切换到布局模式后，在编辑窗口的顶部会出现标有“布局模式”的蓝色长条。如果当前网页上存在表格，则会自动转换为布局表格，而表格中的单元格则不会转换为布局单元格。 中文Dreamweaver 8网页设计教育技术学04级退出布局模式 在布局模式中制作完布局表格后，最好退出布局模式到标准模式下进行内容的添加和编辑。 在文档编辑区的顶部，单击“退出”布局模式。选择查看表格模式标准模式菜单命令。在“布局”插入栏中单击“标准”按钮。 中文Dreamweaver 8网页设计教育技术学04级创建布局表格和布局单元格 在布局模式下使用布局表格和

3、布局单元格进行页面布局时，一般先创建布局表格，再在布局表格中添加布局单元格，其绘制方法与层的绘制方法相同。 中文Dreamweaver 8网页设计教育技术学04级在布局表格中添加内容 在布局模式中可向布局表格中的布局单元格内添加文本、图像和其他网页元素，与在标准模式中将内容添加到表格单元格相同。在添加内容之前，必须先绘制布局单元格，因为内容只能添加到布局单元格中。 中文Dreamweaver 8网页设计教育技术学04级调整布局表格和布局单元格 清除布局单元格高度 布局单元格的大小调整及布局表格的移动 中文Dreamweaver 8网页设计教育技术学04级清除布局单元格高度 清除单元格高度之后，

4、单元格将自动被压缩，当向布局单元格内插入内容后，单元格将自动调整大小以适应插入的内容。 中文Dreamweaver 8网页设计教育技术学04级布局单元格的大小调整及布局表格的移动 在Dreamweaver 8中可以移动或调整布局单元格的大小，但不能重叠布局单元格。对布局单元格进行移动或调整大小时，只能在布局表格的边框与内容的边线之间，只有嵌套在布局表格内部的才能被移动，其他的布局表格均不能移动。 中文Dreamweaver 8网页设计教育技术学04级设置布局模式首选参数 要改变布局表格和布局单元格的显示颜色、自动插入间隔图像等属性，可通过设置布局模式参数来实现。 中文Dreamweaver 8

5、网页设计教育技术学04级使用模板建立模板 将现有网页保存为模板 创建空白模板 模板的编辑 创建可编辑区域 取消对可编辑区域的标记 更改可编辑区域的名称 基于模板创建网页管理模板 中文Dreamweaver 8网页设计教育技术学04级将现有网页保存为模板 中文Dreamweaver 8网页设计教育技术学04级创建空白模板 中文Dreamweaver 8网页设计教育技术学04级创建可编辑区域 可编辑区域是指可以进行添加、修改和删除等操作的区域。 中文Dreamweaver 8网页设计教育技术学04级取消对可编辑区域的标记 单击模板网页可编辑区域左上角要取消的可编辑区域标记。选择修改模板删除模板标记

6、菜单命令即可。 中文Dreamweaver 8网页设计教育技术学04级更改可编辑区域的名称 插入可编辑区域后，可以更改它的名称。 中文Dreamweaver 8网页设计教育技术学04级基于模板创建网页用现有模板创建网页 在“资源”面板中从模板创建新网页 将当前网页应用模板 中文Dreamweaver 8网页设计教育技术学04级用现有模板创建网页 中文Dreamweaver 8网页设计教育技术学04级在“资源”面板中从模板创建新网页 按【F11】键打开“资源”面板。在“资源”面板中单击左侧的按钮，查看当前站点中的模板列表框。用鼠标右键单击要应用的模板，在弹出的快捷菜单中选择“从模板新建”命令，模

7、板即会在编辑窗口中打开。 中文Dreamweaver 8网页设计教育技术学04级将当前网页应用模板 中文Dreamweaver 8网页设计教育技术学04级管理模板 重命名模板 删除模板 打开网页所附模板 更新模板 将网页脱离模板 中文Dreamweaver 8网页设计教育技术学04级重命名模板 选择窗口资源菜单命令或按【F11】键，打开“资源”面板。在“资源”面板单击左侧的 按钮，打开模板列表框。在模板列表框中选择要重命名的模板文件，再单击模板名称或在选择的模板名称上单击鼠标右键，在弹出的快捷菜单中选择“重命名”命令，此时模板名称处于反白显示，重新输入新名称即可。 中文Dreamweaver

8、8网页设计教育技术学04级删除模板 中文Dreamweaver 8网页设计教育技术学04级打开网页所附模板 通过模板创建网页后，网页与模板间就是链接关系，这种应用了模板的网页常称为附着模板网页。修改模板后，系统自动更新附着模板的网页。 中文Dreamweaver 8网页设计教育技术学04级更新模板 打开要更新的模板。如果要对可编辑区域重新设置，可先取消可编辑区域标记，再选择要设置的可编辑区域，重新标记即可。修改可编辑区域网页内容后，选择文件保存菜单命令，打开“更新模板文件”对话框。单击“更新”按钮更新通过该模板创建的所有网页。如只是保存该模板而不更新通过该模板创建的网页，则单击“不更新”按钮。

9、 中文Dreamweaver 8网页设计教育技术学04级将网页脱离模板 如果不想在网页中附着模板，或不希望网页与模板有联系，可以使网页与模板分开。 中文Dreamweaver 8网页设计教育技术学04级资源列表与库 认识“资源”面板 使用站点列表 使用收藏资源 库中文Dreamweaver 8网页设计教育技术学04级认识“资源”面板中文Dreamweaver 8网页设计教育技术学04级使用站点列表 使用站点列表可以进行删除、排序、插入资源等操作，对资源进行编辑。 使用站点列表 在页面中添加资源 改变资源顺序 中文Dreamweaver 8网页设计教育技术学04级使用站点列表 选择窗口资源菜单命

10、令或按【F11】键，打开“资源”面板。选中“站点”单选项，打开站点列表。单击相应的资源类别按钮，在资源列表中选择资源，这时在预览窗口中将显示所选择的资源。单击“插入”按钮即可将选择的资源添加到网页中。单击 按钮可以刷新资源列表。单击 按钮可打开外部编辑器编辑选择的资源。单击 按钮可将选择资源添加到收藏列表。 中文Dreamweaver 8网页设计教育技术学04级在页面中添加资源 在页面中添加资源，可在“资源”面板中选择要插入的资源类别（“颜色”和“模板”类别除外），将资源拖动到编辑窗口中，或单击“插入”按钮将资源插入到页面中。 中文Dreamweaver 8网页设计教育技术学04级改变资源顺序 中文Dreamweaver 8网页设计教育技术学04级使用收藏资源 在“资源”面板中，收藏列表的使用方法与站点列表的使用方法基本相同，但有许多资源只能在收藏列表中才能完成。 中文Dreamweaver 8网页设计教育技术学04级库 库是特殊的Dreamweaver文件，它可以存储各种各样的网页元素。如