011统一站点风格

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Dreamweaver 应用技术,Dreamweaver 8,实,训教程讲义,第,11,章 统一站点风格,重点内容：,模板的创建,编辑模板的方法,模板的应用,库的创建和使用,1,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,一、模板的创建：,1. 将现有文档保存为模板,打开要保存为模板的文件，选择,【,文件,】|【,另存为模板,】,命令，弹出,【,另存为模板,】,对话框，保存模板文件。,【另存为模板】对话框,2,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,一、模板的创建：,2. 创建空白模板,选择,【,文件,】|【,新建,】,命令，弹出,【,新建文档,】,对话框，切换到,【,常规,】,选项卡，在,【,类别,】,列表框中选择,【,基本页,】,或,【,动态页,】,选项，并在右侧的列表框中选择任意选项，然后单击,【,创建,】,按钮创建一个空白文档，再选择,【,文件,】|【,另存为模板,】,命令，弹出,【,另存为模板,】,对话框，即可将文档另存为模板文件。,3,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,一、模板的创建：,3. 创建嵌套模板,在,【,资源,】,面板的,【,模板,】,类别中右击要作为创建新文档基础的模板，从弹出菜单中选择,【,从模板新建,】,命令，即可创建新文档，并出现在文档窗口中。然后，选择,【,文件,】|【,另存为模板,】,命令，或者在,【,插入,】,工具栏的,【,常用,】,类别中单击,【,模板,】,按钮右侧的下拉按钮，从弹出菜单中选择,【,创建嵌套模板,】,命令，弹出,【,另存为模板,】,对话框，从中指定嵌套模板的名称，然后单击,【,确定,】,按钮，即可创建一个嵌套模板。,4,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,一、模板的创建：,嵌套模板,5,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,二、编辑模板：,1. 创建可编辑区域,选择,【,插入,】|【,模板对象,】|【,可编辑区域,】,命令，弹出,【,新建可编辑区域,】,对话框。在,【,名称,】,文本框中输入可编辑区域的名称，然后单击,【,确定,】,按钮。,【新建可编辑区域】对话框,6,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,二、编辑模板：,2. 锁定可编辑区域,单击可编辑区域的标签以选定此区域，然后选择,【,修改,】|【,模板,】|【,删除模板标记,】,命令。,7,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,二、编辑模板：,3. 创建可选区域,插入可选区域,选择,【,插入,】|【,模板对象,】|【,可选区域,】,命令，弹出,【,新建可选区域,】,对话框。切换到,【,基本,】,选项卡，在,【,名称,】,文本框中输入此可选区域的名称。,插入可编辑的可选区域,选择,【,插入,】|【,模板对象,】|【,可编辑的可选区域,】,命令，弹出,【,新建可选区域,】,对话框。为该区域输入名称，并设置其他所需选项。,8,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,二、编辑模板：,4. 创建重复区域,选择,【,插入,】|【,模板对象,】|【,重复区域,】,命令，弹出,【,新建重复区域,】,对话框，在,【,名称,】,文本框中输入重复区域名称，然后单击,【,确定,】,按钮。,【新建重复区域】对话框,9,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,二、编辑模板：,5. 插入重复表格,选择,【,插入,】|【,模板对象,】|【,重复表格,】,命令，弹出,【,插入重复表格,】,对话框，进行所需的设置。,【插入重复表格】对话框,10,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,二、编辑模板：,在模板中创建不同的区域,11,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,三、模板的应用：,1.创建基于模板的文档,选择,【,文件,】|【,新建,】,命令，弹出,【,新建文档,】,对话框，切换至,【,模板,】,选项卡，从,【,模板用于,】,列表框中选择一个站点，然后从右侧的站点文档列表框中选择一个模板，单击,【,创建,】,按钮。,【模板】选项卡,12,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,三、模板的应用：,2. 在现有文档上应用模板,可以利用,【,资源,】,面板或通过文档窗口将模板应用于现有文档。把模板应用到现有文档时，,Dreamweaver,将尝试将现有内容与模板中的区域进行匹配。如果应用的是现有模板的修订版本，则名称会根据情况自动匹配。如果把模板应用到一个尚未应用模板的文档，则没有可编辑的区域可以进行比较，且会出现不匹配。,Dreamweaver,会跟踪这些不匹配的情况，这样用户就可以选择将当前页的内容移动到哪些区域，或者删除这些不匹配的内容。,13,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,三、模板的应用：,2. 在现有文档上应用模板,【不一致的匹配名称】对话框,14,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,三、模板的应用：,3. 更新基于模板的页面,修改模板后，,Dreamweaver,会自动提示用户更新基于该模板的文档，用户可以根据需要自动更新或手动更新当前文档或整个站点。,【更新模板文件】对话框,15,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,四、库的创建和使用：,1. 创建库项目,选择,【,窗口,】|【,资源,】,命令，显示,【,资源,】,面板，单击面板左侧的,【,库,】,按钮，显示库类别。然后，将元素拖到库类别中，即可创建一个新的库项目。为新的库项目输入所需名称后按,Enter,键即可。库项目保存在站点本地根文件夹的,Library,文件夹中。每个库项目都保存为一个单独的文件，文件扩展名为*,.,lbi,。,16,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,四、库的创建和使用：,2. 应用库项目,选择,【,窗口,】|【,资源,】,命令，显示,【,资源,】,面板，切换到库类别，在库项目列表中选择要插入的库项目，单击面板底部的,【,插入,】,按钮，即可将库项目应用到网页中。,【资源】面板的库类别,17,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,四、库的创建和使用：,3. 编辑库项目,显示,【,资源,】,面板的库类别，从库列表中选择要进行编辑的库项目，然后单击面板底部的,【,编辑,】,按钮，或者直接双击库项目名称，系统会自动打开一个用于编辑该库项目的窗口。,库项目的编辑窗口,18,Dreamweaver 应用技术,Dreamweaver,8,实训教程讲义,四、库的创建和使用：,4. 更新应用库项目的页面,选择,【,修改,】|【,库,】|【,更新页面,】,命令，弹出,【,更新页面,】,对话框，选择要更新的网页范围及所需站点或模板名称，并确保选择了,【,更新,】,选项组中的,【,库项目,】,复选框，单击,【,开始,】,按钮即可更新网站。,【更新页面】对话框,19,