模块九使用模板和库PPT.ppt

模块九 使用模板和库,任务一 使用模板,新建“moban9-1”模板后设计“个人简历”模板。 在Dreamweaver CS3中有多种创建模板的方法，可以创建空白模板，也可以创建基于现存文档的模板，除此之外，还可以将现有的HTML文档另存为模板，然后根据需要加以修改。,新建模板,任务一 使用模板,打开Dreamweaver CS3，执行【窗口】【资源】菜单命令，打开【资源】面板。,新建模板,模 板,单击该面板上的“模板”按钮，装换到“模板”选项中。,任务一 使用模板,在“资源”面板的有下脚的单击“新建模板”按钮，重名为“moban9-1.dow”。,新建模板,任务一 使用模板,文档编辑窗口中单击鼠标右键，在弹出的快捷菜单中执行【模板】【新建重复区域】。文档编辑窗口中“新建重复区域”对话框。,新建模板,在“名称”文本框输入“rr1”后单击“确定”按钮。,任务一 使用模板,表格的第一行分别输入“个人信息”和“求职意向”，第三行分别输入“学历与获奖”和“技能与爱好”。,新建模板,表格的第二行一列中单击鼠标右键，在弹出的快捷菜单中执行【模板】【新建可编辑区域】。文档编辑窗口中“新建可编辑区域”对话框。,任务一 使用模板,在“名称”文本框输入“gr”后单击“确定”按钮。,新建模板,同样的方法在表格的第二行二列中新建可编辑区域，第四行两列分别新建可编辑区域。,任务一 使用模板,在四个可编辑区域输入相关的信息。,新建模板,使用“Ctrl+s”组合键保存模板。,任务二 使用模板创建文档,新建一个Dreamweaver CS3自带的模板的文档“index9-2-1”。 打开“Dreamweaver CS3”。,子任务1 创建基于模板的文档,单击 “HTML”按钮弹出“新建文档”对话框。,任务二 使用模板创建文档,选择【空白页】【HTML模板】【2列弹性，左侧栏、标题和脚注】后单击“创建”按钮。出现“Untitled-2.html”文件。,子任务1 创建基于模板的文档,任务二 使用模板创建文档,执行【文件】【保存】菜单命令后弹出“另存为”对话框。 在“另存为”下拉列表框中选择“module09”，在“文件名”下拉列表框中输入“index9-2-1.html”后单击“保存”按钮。,子任务1 创建基于模板的文档,浏览index9-2-1.html文件。,任务二 使用模板创建文档,子任务2 在现有文档上应用模板,新建一个index9-2-2.html文件。,执行【修改】【模板】【应用模板到页（A）】菜单命令弹出“选择模板”对话框如图所示。,在“模板”文本框中选择“mudan9-1”模板后单击“选定”按钮。,任务二 使用模板创建文档,子任务2 在现有文档上应用模板,应用“mudan9-1”模板后的“index9-2-2.html”文件如图所示。,执行【修改】【模板】【从模板中分离（D）】菜单命令。,任务二 使用模板创建文档,子任务2 在现有文档上应用模板,个人简历改为莫莫莫个人简历如图所示。,浏览index9-2-2.html文件。,任务二 使用模板创建文档,第一步：新建index9-2-3.html后使用“muban9-1”模板。 第二步：修改“muban9-1”模板。,子任务3 更新基于模板的页面,任务二 使用模板创建文档,子任务3 更新基于模板的页面,新建index9-2-3.html后使用“muban9-1”模板。,打开muban9-1模板如图所示。,任务二 使用模板创建文档,子任务3 更新基于模板的页面,新建外部样式表 。,新建h2和p标签CSS样式，如图所示。,任务二 使用模板创建文档,子任务3 更新基于模板的页面,保存“muban9-1”模板。,浏览index9-2-2.html和index9-2-3.html，如图所示。,index9-2-2.html和index9-2-3.html,任务三 创建、管理和编辑库项目,子任务1 创建库项目,使用库能够有效地减少一些重复性的操作，例如链接的设置等。另一方面，使用库的更新功能还能减少网站的维护量。 新建“ku9-3”库项目后插入表格。,任务三 创建、管理和编辑库项目,子任务1 创建库项目,打开Dreamweaver CS3，执行【窗口】【资源】菜单命令，打开【资源】面板，单击该面板上的“库”按钮，装换到“库”选项中，如图所示。,任务三 创建、管理和编辑库项目,子任务1 创建库项目,在“资源”面板的有下脚的 图标单击。,文件名改为“ku9-3.lbi”，如图所示。,任务三 创建、管理和编辑库项目,子任务1 创建库项目,插入1行4列表格如图所示。,保存“ku9-3.lbi”库。,任务三 创建、管理和编辑库项目,新建“index9-3”文件后使用“ku9-3”库。,子任务2 使用库项目,任务三 创建、管理和编辑库项目,新建index9-3.html文件，如图所示。,子任务2 使用库项目,单击“插入”按钮。,任务三 创建、管理和编辑库项目,表格下面输入“修改库文件”如图所示。,子任务2 使用库项目,浏览index9-3.ht