photoshop基本环境和操作.pptVIP

第十章 模板和库 教学目标： 了解模板与库概念。 理解库和模板的作用。 掌握创建模板和利用模板创建页面。 掌握创建库项目和库项目的应用。 教学重点: 模板的创建与应用 库项目的创建与应用 教学难点: 使用模板快速制作网页 教学方法 任务驱动法 任务一、创建模板 知识点： 创建空白模板文档； 网页另存为模板文档； 定义模板的可编辑区域； 删除模板的可编辑区域； 任务描述 为一经典音乐网站制作一个模板文档 任务分析 创建模板两种途径： 一是创建一个空白模板文档，然后编辑空白模板文档； 二是通过已有的网页另存为模板文档。 创建模板需要两个过程： 一是创建模板文档； 二是在模板中定义模板中的可编辑区域。 一、创建空白模板文档 操作步骤 1.单击“文件”菜单下的“新建”命令。 2.在 “新建文档”对话框中选择“空白模板”选项，在“模板类型”列表中选择“HTML模板”选项，在“布局”列表中选择相应的布局格式，然后单击“创建”按钮。 3 .打开模板进行编辑，编辑后按下组合键【Ctrl+S】存盘，输入模板文档名，完成模板的创建。 二、网页另存为模板 操作步骤 1.打开已有的网页文件, 单击“文件”菜单下的“另存为模板”命令。 2.在 “另存模板”对话框中，单击“另存为”文本框，在文本框中输入模板文档名称，单击“保存”按钮。 3.在弹出的对话框中单击“是”按钮，即可将当前页面转换成模板 。 4.选中即将定义为可编辑区域的区域 。 5.选择菜单中的“插入记录”菜单下的“模板对象”子菜单，然后单击“可编辑区域”命令 。 6.在 “新建可编辑区域”对话框中的“名称”文本框中输入可编辑区域的名称后单击“确定”按钮。 三、删除可编辑区域 操作步骤 选中要删除的可编辑区域，然后选择 “修改”菜单下的“模板”子菜单下的“删除模板标记”命令，即可将可编辑区域删除。 试一试 1.利用“附带光盘\电子资料包\第十章\练习\01\原始文件\”文件夹下提供的素材，创建如图所示模板。 任务二、将模板应用到网页 知识点： 将模板应用到页面； 更新模板文件； 任务描述： 以任务一中制作的模板为基础， 为站点添加一个与主页相同布 局的音乐美文页面 ，如下图。 任务分析： 两种方法： 一是使用菜单； 二是使用“模板”面板下方的“应用”按钮。 操作步骤： 方法一 1.单击“文件”菜单下的“新建”命令，创建一个简单的新页面，在文档中插入文本并设置文本的属性。 2.单击 “修改”菜单下的“模板”下的子菜单“应用模板到页”命令。 3.在 “选择模板”对话框中选择模板“moban”，然后单击“确定”按钮。 4.在 “不一致的区域名称”对话框中的“将内容移到新区域”列表框中选择可编辑区域，单击“用于所有内容”按钮，然后再单击“确定”按钮。 方法二 1.单击“文件”菜单下的“新建”命令，创建一个简单的新页面，在文档中插入文本并设置文本的属性。 2.在“资源”面板中，选中要应用的模板。 3.单击面板下方的“应用”按钮将模板应用到页面。 更新模板文件 在对模板修改，保存模板以后，将弹出“更新模板文件”对话框，其中 列出了所有基于这个模板创建的网页，单击对话框中的“更新”按钮，将自动更新站点中应用了该模板的所有网页。 拓展与提高： 使用图像制作工具软件Photoshop或Fireworks和dreamweare共同完成模板的制作。具体步骤如下： 步骤1．用Photoshop或Fireworks软件制作页面效果图。 步骤2．用Photoshop或Fireworks中的切片工具对效果图进行切片并输出*.html文件。 步骤３．用Dreamweare打开输出的*.html文档，将其另存为模板。 步骤4．用Dreamweare打开模板文档，在模板中定义可编辑区域，完成模板的制作。 试一试： 利用“附书光盘\电子资料包\第十章\练习\02\原始文件”文件夹中提供的素材， 制作一个经典老歌页面jdlg．Html文档，如图所示。 任务三、 创建库项目 知识点： 创建库项目； 使用库项目更新文件； 库项目与源文件分离； 任务描述： 制作如下图所示的库项目 任务分析： 创建库项目有两种方法： 新建库项目和将网页中的对象转化为库项目。 具体操作： 一、新建库项目 1．单击“文件”菜单下的“新建”命令，在弹出的“新建文档”对话框中