DREAMWEAVERcs6模块10使用模板和库
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
。 利用模板和库能够加快网页打开的速度，另一方面模板和库的自动更
新功能可以大大地减少网站更新和维护的工作量。
模块十 使用模板和库
任务一 使用模板 内容介绍
。模板是一种特殊类型的文档，用于设计布局比较“固定的”页面。在
Dreamweaver CS6中有多种创建模板的方法，可以创建空白模板，也可以 创建基于现存文档的模板，除此之外，还可以将现有的HTML文档另存为模 板，然后根据需要加以修改。
任务一 使用模板
步骤2：在“资源”面板的有下脚的单击“新建模板”按钮，重名为 “moban10-1.dow”如图10-2所示。
图10-2 模板moban10-1.dow
模块十 使用模板和库
任务一 使用模板
步骤3：文档编辑窗口中单击鼠标右键，在弹出的快捷菜单中执行【模板】 →【新建重复区域】，如图10-3所示。文档编辑窗口中“新建重复区域” 对话框。 步骤4：在“名称”文本框输入“rr1”后单击“确定”按钮。
图10-12 “选择模板”对话框
模块十 使用模板和库
任务二 使用模板创建文档 子任务2 在现有文档上应用模板：
步骤3：在“模板”文本框中选择“moban10-1”模板后单击“选定”按钮， 应用“moban10-1”模板后的“index10-2-2.html”文件如图10-13所示。
图10-13 应用模板后
模块十 使用模板和库
任务二 使用模板创建文档 子任务2 在现有文档上应用模板：
步骤4：执行【修改】→【模板】→【从模板中分离（D）】菜单命令后如 图10-14所示。
图10-14 从模板中分离文档后
模块十 使用模板和库
任务二 使用模板创建文档 子任务2 在现有文档上应用模板：
步骤5：个人简历改为莫莫莫个人简历如图10-15所示。 步骤6：浏览index10-2-2.html文件。
图10-11 保存index10-2-1.html文件
模块十 使用模板和库
任务二 使用模板创建文档 子任务2 在现有文档上应用模板：
新建一个index10-2-2.html文件后应用“moban10-1”模板。 步骤1：新建一个index10-2-2.html文件。 步骤2：执行【修改】→【模板】→【应用模板到页（A）】菜单命令弹出 “选择模板”对话框如图10-12所示。
模块十 使用模板和库
任务一 使用模板
新建“moban10-1”模板 后设计“个人简历”模板。 步骤1：打开Dreamweaver CS6，执行【窗口】→【资源】 菜单命令，打开【资源】面板， 单击该面板上的“模板”按钮， 装换到“模板”选项中，如图 10-1所示。
图10-1 “模板”面板
模块十 使用模板和库
图10-8 Dreamweaver CS6
模块十 使用模板和库
任务二 使用模板创建文档 子任务1 创建基于模板的文档：
步骤2：执行【文件】→【新建】菜单命令弹出“新建文档”对话框如图109所示。
图10-9 “新建文档”对话框
模块十 使用模板和库
任务二 使用模板创建文档 子任务1 创建基于模板的文档：
步骤3：选择【空白页】→【HTML】→【2列液态，左侧栏、标题和脚注】 后单击“创建”按钮。出现“Untitled-1.html”文件如图10-10所示。
图10-10 新建的HTML文件
模块十 使用模板和库
任务二 使用模板创建文档 子任务1 创建基于模板的文档：
步骤4：执行【文件】→【保存】菜单命 令后弹出“另存为”对话框。 步骤5：在“另存为”下拉列表框中选择 “moban10”，在“文件名”下拉列表框 中输入“index10-2-1.html”后单击“保存” 按钮。 步骤6：浏览index10-2-1.html文件。
图10-15 修改后的index10-2-2.html
模块十 使用模板和库
任务二 使用模板创建文档
子任务3 更新基于模板 的页面：
第一步：新建index10-23.html后使用“moban10-1”模板。 第二步：修改“moban10-1”模 板。 步骤1：新建index10-2-3.html后 使用“moban10-1”模板后保存。 （子任务2的前三步） 步骤2：打开moban10-1模板如 图10-16所示。
模块十 使用模板和库
任务一 使用模板
步骤7：表格的第二行一列中单击鼠标右键，在弹出的快捷菜单中执行 【模板】→【新建可编辑区域】，如图10-3所示。文档编辑窗口中“新 建可编辑区域”对话框。 步骤8：在“名称”文本框输入“gr1”后单击“确定”按钮。如图10-6所 示。
图10-Leabharlann Baidu 插入可编辑区域后
模块十---使用模板和库
模块介绍： 。 在进行批量网页制作的过程中，很多页面都会使用到相同的图片、文
字或布局。为了避免不必要的重复操作，减少用户的工作量，可以使用 Dreamweaver CS6提供的模板和库功能，将具有相同布局结构的页面制作 成模板，将相同的元素制作为库项目，以便随时调用。本章将主要介绍在 Dreamweaver CS6中创建与编辑模板和库的方法。
。 如果一个网站的布局比较统一，拥有相同的导航，且显示不同栏目内
容的位置基本保持不变，那么这种布局的网站就可以考虑使用模板来创建。 例如，个人简历就适合采用模板来进行布局。
模块十 使用模板和库
任务二 使用模板创建文档 子任务1 创建基于模板的文档：
新建一个Dreamweaver CS6自带的模板的文档“index10-2-1”。 步骤1：打开“Dreamweaver CS6”如图10-8所示。
模块十 使用模板和库
任务一 使用模板
步骤9：同样的方法在表格的第二行二列中新建可编辑区域，第四行两列 分别新建可编辑区域。 步骤10：在四个可编辑区域输入相关的信息如图10-7所示。 步骤11：使用“Ctrl+s”组合键保存模板。
图10-7 最终的效果
模块十 使用模板和库
任务二 使用模板创建文档 内容介绍：
图10-3 选择模板区域
图10-4 重复区域
模块十 使用模板和库
任务一 使用模板
步骤5：在图10-4的“重复区域”里输入“个人简历”再插入4行两列表 格如图10-5所示。 步骤6：表格的第一行分别输入“个人信息”和“求职意向”，第三行 分别输入“学历与获奖”和“技能与爱好”。
图10-5 插入表格后
新功能可以大大地减少网站更新和维护的工作量。
模块十 使用模板和库
任务一 使用模板 内容介绍
。模板是一种特殊类型的文档，用于设计布局比较“固定的”页面。在
Dreamweaver CS6中有多种创建模板的方法，可以创建空白模板，也可以 创建基于现存文档的模板，除此之外，还可以将现有的HTML文档另存为模 板，然后根据需要加以修改。
任务一 使用模板
步骤2：在“资源”面板的有下脚的单击“新建模板”按钮，重名为 “moban10-1.dow”如图10-2所示。
图10-2 模板moban10-1.dow
模块十 使用模板和库
任务一 使用模板
步骤3：文档编辑窗口中单击鼠标右键，在弹出的快捷菜单中执行【模板】 →【新建重复区域】，如图10-3所示。文档编辑窗口中“新建重复区域” 对话框。 步骤4：在“名称”文本框输入“rr1”后单击“确定”按钮。
图10-12 “选择模板”对话框
模块十 使用模板和库
任务二 使用模板创建文档 子任务2 在现有文档上应用模板：
步骤3：在“模板”文本框中选择“moban10-1”模板后单击“选定”按钮， 应用“moban10-1”模板后的“index10-2-2.html”文件如图10-13所示。
图10-13 应用模板后
模块十 使用模板和库
任务二 使用模板创建文档 子任务2 在现有文档上应用模板：
步骤4：执行【修改】→【模板】→【从模板中分离（D）】菜单命令后如 图10-14所示。
图10-14 从模板中分离文档后
模块十 使用模板和库
任务二 使用模板创建文档 子任务2 在现有文档上应用模板：
步骤5：个人简历改为莫莫莫个人简历如图10-15所示。 步骤6：浏览index10-2-2.html文件。
图10-11 保存index10-2-1.html文件
模块十 使用模板和库
任务二 使用模板创建文档 子任务2 在现有文档上应用模板：
新建一个index10-2-2.html文件后应用“moban10-1”模板。 步骤1：新建一个index10-2-2.html文件。 步骤2：执行【修改】→【模板】→【应用模板到页（A）】菜单命令弹出 “选择模板”对话框如图10-12所示。
模块十 使用模板和库
任务一 使用模板
新建“moban10-1”模板 后设计“个人简历”模板。 步骤1：打开Dreamweaver CS6，执行【窗口】→【资源】 菜单命令，打开【资源】面板， 单击该面板上的“模板”按钮， 装换到“模板”选项中，如图 10-1所示。
图10-1 “模板”面板
模块十 使用模板和库
图10-8 Dreamweaver CS6
模块十 使用模板和库
任务二 使用模板创建文档 子任务1 创建基于模板的文档：
步骤2：执行【文件】→【新建】菜单命令弹出“新建文档”对话框如图109所示。
图10-9 “新建文档”对话框
模块十 使用模板和库
任务二 使用模板创建文档 子任务1 创建基于模板的文档：
步骤3：选择【空白页】→【HTML】→【2列液态，左侧栏、标题和脚注】 后单击“创建”按钮。出现“Untitled-1.html”文件如图10-10所示。
图10-10 新建的HTML文件
模块十 使用模板和库
任务二 使用模板创建文档 子任务1 创建基于模板的文档：
步骤4：执行【文件】→【保存】菜单命 令后弹出“另存为”对话框。 步骤5：在“另存为”下拉列表框中选择 “moban10”，在“文件名”下拉列表框 中输入“index10-2-1.html”后单击“保存” 按钮。 步骤6：浏览index10-2-1.html文件。
图10-15 修改后的index10-2-2.html
模块十 使用模板和库
任务二 使用模板创建文档
子任务3 更新基于模板 的页面：
第一步：新建index10-23.html后使用“moban10-1”模板。 第二步：修改“moban10-1”模 板。 步骤1：新建index10-2-3.html后 使用“moban10-1”模板后保存。 （子任务2的前三步） 步骤2：打开moban10-1模板如 图10-16所示。
模块十 使用模板和库
任务一 使用模板
步骤7：表格的第二行一列中单击鼠标右键，在弹出的快捷菜单中执行 【模板】→【新建可编辑区域】，如图10-3所示。文档编辑窗口中“新 建可编辑区域”对话框。 步骤8：在“名称”文本框输入“gr1”后单击“确定”按钮。如图10-6所 示。
图10-Leabharlann Baidu 插入可编辑区域后
模块十---使用模板和库
模块介绍： 。 在进行批量网页制作的过程中，很多页面都会使用到相同的图片、文
字或布局。为了避免不必要的重复操作，减少用户的工作量，可以使用 Dreamweaver CS6提供的模板和库功能，将具有相同布局结构的页面制作 成模板，将相同的元素制作为库项目，以便随时调用。本章将主要介绍在 Dreamweaver CS6中创建与编辑模板和库的方法。
。 如果一个网站的布局比较统一，拥有相同的导航，且显示不同栏目内
容的位置基本保持不变，那么这种布局的网站就可以考虑使用模板来创建。 例如，个人简历就适合采用模板来进行布局。
模块十 使用模板和库
任务二 使用模板创建文档 子任务1 创建基于模板的文档：
新建一个Dreamweaver CS6自带的模板的文档“index10-2-1”。 步骤1：打开“Dreamweaver CS6”如图10-8所示。
模块十 使用模板和库
任务一 使用模板
步骤9：同样的方法在表格的第二行二列中新建可编辑区域，第四行两列 分别新建可编辑区域。 步骤10：在四个可编辑区域输入相关的信息如图10-7所示。 步骤11：使用“Ctrl+s”组合键保存模板。
图10-7 最终的效果
模块十 使用模板和库
任务二 使用模板创建文档 内容介绍：
图10-3 选择模板区域
图10-4 重复区域
模块十 使用模板和库
任务一 使用模板
步骤5：在图10-4的“重复区域”里输入“个人简历”再插入4行两列表 格如图10-5所示。 步骤6：表格的第一行分别输入“个人信息”和“求职意向”，第三行 分别输入“学历与获奖”和“技能与爱好”。
图10-5 插入表格后