第9章 情景9——提高网站制作效率和可维护性.pptVIP

任务一：管理和运用可重用资源 Dreamweaver CS5的每个站点都有自己的库，通常在每个站点下的库文件夹（library）中存放着库项目，若一个库项目放入文档中，Dreamweaver CS5则将该库项目对应的HTML代码制作一份拷贝，并加入相应的注释。 9.1.1 知识要点 1．使用库项目 单击“库”按钮，进入库管理面板， “库”面板的结构和和“模板”面板的结构几乎一样，通过此面板可完成库项目的大部分操作。 2．库元素的使用 选择“窗口”→“资源”或按下F11命令 操作步骤如下： （1）打开要添加库项目的页面 （2）选择“窗口” →“资源”或F11命令，打开资源面板，选择库项目。 （3）单击库面板左下角的“插入”按钮，即可将库项目应用到页面上。 3．创建库项目 选择文档的一部分并另存为库项目。 选择窗口→资源或F11命令，并将选定内容拖动到“资源”面板的“库”类别中，或单击“资源”面板底部的“新建”按钮，也可以选择修改→库→增加对象到库命令。 增加对象到库 输入新的库项目的名称。 3．创建库项目 选择文档的一部分并另存为库项目。 选择窗口→资源或F11命令，并将选定内容拖动到“资源”面板的“库”类别中，或单击“资源”面板底部的“新建”按钮，也可以选择修改→库→增加对象到库命令。 增加对象到库 输入新的库项目的名称。 4．在文档中插入库项目 （1）将插入点放在“文档”窗口中。 （2）选择“窗口” →“资源”命令，出现“资源”面板，显示“库”类别。 （3）从“资源”面板向“文档”窗口拖动一个库项目，或者选择一个库项目并单击“插入”按钮。 5．编辑库项目 选择“窗口”→“资源”命令，出现“资源”面板的库类别。 选择库项目。库项目的预览出现“资源”面板的顶部（不能再预览中进行任何编辑）。 单击“资源”面板底部的“编辑”按钮，或者双击库项目。Dreamweaver CS5将打开一个用于编辑该库项目的新窗口。 编辑库项目然后保存更改。 在出现的对话框中，然后是否跟新本地站点上那些使用编辑过的库项目的文档。 图9-1-4 保存库项目 单击“更新”按钮将更新本地站点中所包含编辑过的库项目的文档；单击“不更新”按钮将不更改任何文档，直到使用“修改” →“库”→“更新当前页”或“更新页面”命令进行更改。 工作任务与设计效果 现在有一个网站已经基本完成，网站logo正在设计当中，我们希望在不改变网站其他元素的情况下，单独修改logo，以便应用于整个网站 任务二：抽取网页模板并且生成其他页面 创建新模板的步骤如下： 按下F11键打开资源面板，或通过单击“窗口”菜单中的“资源”选项打开其面板。 在“资源”面板中单击模板图标，使得模板类别处于被选中状态， 在“模板”面板中单击底部的“新建”按钮，则一个新的、无标题的模板将被添加到面板中的“模板”列表中。 在模板仍处于选中状态时输入模板的名称，将在“模板”面板和Templates文件夹中创建一个新的空模板，但并不创建.dwt文件。如果开始定义可编辑区域，可单击“模板”面板底部的编辑按钮。 创建可编辑区域 将创建的模板文件打开。移动光标到页面中，单击“插入” →“创建模板” →“可编辑区域”，弹出选项卡。 新建可编辑区域 弹出“新建可编辑”区域对话框，在名称文本框中输入该区域的名称。 单击确定按钮，可编辑区域即被插入到模板页面中，可编辑区域在模板页面中由高亮显示的边框围绕，区域左上角的选项卡会显示该区域的名称。 当需要选择可编辑区域时，可以直接单击可编辑区域上面的标签，即可选中可编辑区域，还可以执行“修改” →“模板”，从子菜单底部的列表中选择可编辑区域的名称即可。 选择可编辑区域名称 当选中可编辑区域后，在“属性”面板上可以修改其名称。 3．定义可选区域 选中需要设置为可选区域的页面导航所在的Div。 选中Div对象 单击“插入”面板中“创建模板“按钮中的按钮，在弹出的下拉菜单中选择“可选区域”命令，弹出“新建可选区域”对话框。 插入可选区域 命名可选区域 同理插入“可编辑的可选区域”。 9.1.2 工作任务与设计效果 一个完整的网站中一定会有很多重复的内容，例如导航、广告位，标志等。这些内容基本在每个页面中都有，而且同一个网站出了首页的布局会稍有不同之外，其他页面都具有相同的页面布局。制作这些相似的内容，使用模板和库功能可以大大提高制作效率，也方便维护。 该工作任务设计一个企业信息网站，网站的基本布局已经完成，需要在广告部分插入可编辑区域，并且编辑可编辑区域，插入图片，制作页面的底部部分，并且生成模板文件，修改模板以便应用于整个网站。 整体效果图