(中职）网页制作基础（Dreamweaver CS6）（第2版）项目七 使用模板和库电子课件（）.pptx

(中职）网页制作基础（Dreamweaver CS6）（第2版）项目七 使用模板和库电子课件（工信版）项目七 使用模板和库项目目标（1）理解模板和库在网页制作过程中的作用；（2）学习模板和库的创建与编辑；（3）能够应用模板和库制作、更新网页。项目描述 本项目将通过5个任务来说明如何创建并应用模板与库快速制作风格一致的网页。任务1 认识模板 n任务任务目标目标（1）理解什么是模板；（2）理解模板的作用；（3）了解模板的优点。n任务任务描述描述 本任务主要学习什么是模板，模板在网页制作中起什么作用，以及使用模板制作和更新网页有什么优点。任务1 认识模板 n任务分析任务分析 在使用Dreamweaver建设一个大规模的网站时，通常需要制作很多页面，而且要保证这些页面的风格统一。为了提高网站建设与维护的工作效率，避免重复操作，需要用到模板。模板实质上就是创建其他具有相同版式和风格文档的基础文档，它是一种特殊类型的文档，模板文件的扩展名为.dwt，是Dreamweaver提供的一种对站点中的文档进行管理的功能，而非HTML本身的功能。当创建一个模板或将一个网页另存为模板时，Dreamweaver默认将所有区域标志为“锁定”。通过模板生成网页时，Dreamweaver会自动生成网页共用部分（模板中相同布局网页的公共部分），并且这些锁定区域处于不允许编辑的状态，也称为不可编辑区域，用户无法修改。当要更新公共部分时，只能在模板中编辑，或者将页面与模板分离。只需要更改模板，所有应用该模板的页面就会随之改变。用户可以根据需要在模板中创建可编辑区域，模板的可编辑区域是指基于模板创建的网页中用户可以编辑的区域。在制作模板时，可以创建可编辑区域，以决定模板中的哪些部分是基于模板生成的网页中能自由编辑的，应用该模板的页面只能在可编辑区域中进行编辑，用户可以在可编辑区域中放置各页面之间不同的主体部分。任务1 认识模板 n任务分析任务分析 模板的最大作用是快速创建及更新具有统一结构和风格的网页，省去了重复操作的麻烦，提高了工作效率，维护网站更轻松。就快速创建页面来讲，通过复制网页内容、另存网页等操作也能实现，但是快速更新大批量网页是模板特有的功能，具有高效的特点。使用模板的优点如下。（1）省去了重复劳动的麻烦，提高了设计者的工作效率。（2）更新站点时，如果要修改共同的页面元素，则只要更改应用的模板即可，所有相同模板的网页文件可快速更新，不必一个一个地逐页修改。（3）基于模板生成的网页文件与模板之间相互关联，公共内容可保证完全一致，风格统一，看起来比较系统。在需要时还可以断开页面与模板之间的链接。任务2 创建模板n任务任务目标目标（1）掌握空白模板的创建方法；（2）了解空白模板保存并关闭的方法；（3）掌握使用已有文档生成模板、保存模板并关闭模板的方法。n任务任务描述描述 本任务主要学习如何创建空白模板，以及如何将已有文档转换为模板。任务2 创建模板n任务任务分析分析 在创建模板前一定要先创建站点，才能在保存一个新模板时保存到Dreamweaver在站点根目录下自动生成的Templates文件夹中，才能在新建“模板中的页”时从“站点的模板”列表框中找到该模板，才能有效管理站点中应用模板的页面。不能将模板文件移动到其他位置存放，如果模板文件改变了位置，则Dreamweaver将无法识别并管理该模板文件。可以直接创建空白模板，也可以将已有文档转换为模板。在新创建的模板中，如果用户没有定义任何可编辑区域，那么由模板生成的网页是不可编辑的，用户无法编辑网页之间不同内容的部分，虽然快速创建相似网页是模板的优点，但一个站点中的页面如果全部一样也就没有任何意义了，因此，在保存或关闭模板时，Dreamweaver会弹出“此模板不含有任何可编辑区域”的警告对话框，以提醒用户进行设置。操作步骤n步骤步骤1创建站点。将素材文件夹myweb复制到E盘根目录中，创建站点myweb。n步骤步骤2创建空白模板，保存后关闭模板。（1）创建空白模板。（2）保存“Untitled-1”模板。（3）关闭模板。n步骤步骤3将已有文档转换为模板。（1）打开要转换为模板的网页文档。选择“文件”“打开”命令，弹出“打开”对话框，在myweb站点文件夹中选择要转换为模板的网页文档“moban.html”，单击“打开”按钮。（2）将当前打开的文档转换为模板时，可使用3种方法操作步骤（3）设置模板保存位置及名称。（4）单击当前“文档”窗口中的“还原”按钮，在“文档”窗口处于还原状态时可以看到标题栏处显示“moban.dwt(XHTML)”字样，表明当前文档是一个模板文档。试一试 打开本书素材“素材项目7试一试02mywebhtmlGuanYuWoMen42.html”，将该网页文档转换为以页头、页脚和主体部分右侧的用户登录、服务项目、最新客户及网站调查4个板块为公共内容的模板文件“blycmoban.dwt”。任务3 编辑模板 n任务任务目标目标（1）了解编辑模板的方法；（2）掌握在模板中设置可编辑区域的方法。n任务任务描述描述 前面学习了如何创建模板，下面来学习如何制作模板及在模板中设置可编辑区域。任务3 编辑模板 n任务分析任务分析 空白模板就如同空白网页一样，创建好空白模板后，可以像编辑普通网页一样在模板中制作公共部分，包括结构和内容。如果已经有制作好的网页文档包含了所需要的公共部分，则可以将其复制粘贴到模板中，也可以直接将其转换为模板，然后再像编辑修改普通网页一样对模板文档进行修改，得到需要的公共部分。可编辑区域是可以在基于模板的文档中进行编辑的区域。模板的制作与普通网页的制作方法相同。但要使模板生效，至少要设置一个可编辑区域，否则基于模板的页面是不可编辑的。在关闭或保存模板文件时，如果用户没有创建任何可编辑区域，则Dreamweaver会弹出警告对话框提醒用户。操作步骤n步骤步骤1编辑模板。（1）打开本项目任务2中创建的模板“moban.dwt”。（2）像编辑普通网页一样对模板进行编辑。n步骤步骤2定义模板可编辑区域。（1）在Banner下方的时间条前端定义可编辑区域“导航路径”。（2）将步骤1中在主体区域添加的ID为“main”的Div定义为可编辑区域。知识链接1模板的特征模板的特征2可编辑区域的显示可编辑区域的显示3可编辑区域的删除可编辑区域的删除4使用可编辑区域的注意事项使用可编辑区域的注意事项（1）可编辑区域命名时不能使用双引号、单引号、小于号、大于号等特殊字符。（2）同一个模板中的多个可编辑区域不能重名。（3）可以将整个表格、整个表格行或单独的单元格标记为可编辑区域，但不能在多个单元格周围创建模板区域。如果被选中，则可编辑区域中包括单元格周围的区域；如果未被选中，则可编辑区域将只影响单元格中的内容。（4）层和层内容是单独的元素。使层可编辑时，可以更改层的位置及内容；使层的内容可编辑时，只能更改层的内容，而不能更改层的位置。（5）如果要在网页文档中插入可编辑区域，则Dreamweaver会自动将该文档转换为模板。（6）可编辑区域不能嵌套插入。如果在可编辑区域中再次插入可编辑区域，则Dreamweaver会提示“选定内容已位于可编辑、重复或可选区域中”。拓展与提高1模板重复区域模板重复区域 在模板中还可以创建重复区域，重复区域是可以根据需要在基于模板的页面中复制任意次数的模板部分。使用重复区域可以通过重复特定项目来控制页面布局，如目录项、说明项、列表项等。重复区域通常用于表格，但也可以为其他页面元素定义重复区域。可以使用“重复区域”在模板中复制任意次数的指定区域，也可以使用“重复表格”创建包含重复行的表格式的可编辑区域。重复区域是不可编辑的，若要使重复区域中的内容可以编辑，则必须在重复区域中插入可编辑区域。2模板可选区域模板可选区域 在模板中也可以创建可选区域，可选区域是指可将其设置为在基于模板的网页文档中显示或隐藏的区域。可以通过选择“修改”“模板属性”命令设置可选区域的显示或隐藏。可选区域有以下两种类型。（1）不可编辑的可选区域：在基于模板的网页文档中可以显示或隐藏该区域，但不允许编辑该区域中的内容。（2）可编辑的可选区域：用户可以自己设定是否显示标注的区域，并能够编辑该区域中的内容。试一试 打开本项目任务2试一试中创建的模板文件“blycmoban.dwt”，保留页头、页脚和主体区域右侧的用户登录、服务项目、最新客户及网站调查4个板块等公共内容，将Banner下方时间条前端class为“path”的Div定义为可编辑区域“导航路径”，将主体区域左侧ID为“main-left”的Div设置为可编辑区域“主体左侧”。任务4 应用模板n任务任务目标目标（1）掌握创建基于模板的网页的方法；（2）掌握更新网页的方法；（3）掌握从模板中分离网页的方法；（4）了解将模板应用于现有文档的方法。n任务任务描述描述 前面学习了创建及编辑模板，下面来学习如何应用模板。任务4 应用模板n任务分析任务分析 将页面中相同的部分制作成一个模板文件后，可以通过模板来快速创建这些相似的页面。只需要在套用了模板的页面中进行修改，就可以制作出风格相似，但又有区别的页面。模板一旦被更新，应用了模板的页面就都可以随之更新，从而极大地提高了工作效率，避免了反复修改。当需要对页面中受不可编辑区域限制被锁定的区域进行编辑时，可以将网页从模板中分离出来。使用模板不仅可以创建基于模板的新页，还可以将模板应用于已经存在的网页。操作步骤n步骤步骤1新建基于模板的页。（1）选择“文件”“新建”命令，弹出“新建文档”对话框，选择“模板中的页”选项卡，在“站点”列表框中选择“myweb”站点，在“站点myweb的模板”列表框中选择“moban”选项，单击“创建”按钮，在“文档”窗口中按照模板中的设置创建基于模板的新文档“Untitled-1”，其右上方有“模板：moban”标记，表示此文档与“moban”模板关联，鼠标指针指向不可编辑区域时为禁止编辑状态“”。（2）在新文档可编辑区域编辑新闻页面，编辑完网页标题、导航路径及主体内容后，选择“文件”“保存”命令，将新文档保存到“mywebhtml GongSiXinWen”文件夹中，将其命名为“gsxw257.html”。操作步骤n步骤步骤2更新基于模板的页。（1）在模板文件“moban.dwt”中将导航栏的“客户反馈”修改为“客户留言”，可以看到有变更的文件标示了更新标记 ，选择“文件”“保存”命令，保存模板更新的内容，此时自动弹出“更新模板文件”对话框。（2）单击“更新”按钮，不可编辑区域中不相同的公共内容会被更新为相同内容，可以看到基于“moban.dwt”的网页“gsxw257.html”已经更新为“客户留言”，并且文件名处显示了更新标记*。如果单击“不更新”按钮，或者没有弹出询问对话框，则可以在以后选择“修改”“模板”“更新当前页”或者“更新页面”命令时进行更新。操作步骤n步骤步骤3分离基于模板的页面。如果要对基于模板的页面的锁定区域进行修改，则必须先把页面从模板中分离出来。一旦页面被分离出来，就可以像没有应用模板的普通网页一样进行编辑。但当模板被更新时，该页面将不能随之被更新。（1）打开要分离的网页文档“gsxw257.html”。（2）选择“修改”“模板”“从模板中分离”命令，即可把页面从模板中分离出来。与模板分离后，可以看到文档右上方的“模板：moban”标记没有了，鼠标指针指向原来不可编辑的区域时也不再是禁止编辑状态“”。知识链接应用模板到页应用模板到页 除可以通过“新建模板中的页”操作创建出基于模板的页外，还可以将已经存在的页面通过“应用模板到页”功能与模板建立关联。（1）应用模板到空白页。（2）应用模板到已经编辑过的页面。拓展与提高1资源管理资源管理 “站点”面板组中有“资源”面板，可对资源进行分类组织和管理，并以列表形式显示。如果要显示所有该网站中的图像（无论是否使用），则可以直接在“资源”面板中将资源拖动到插入点所在的位置，这样不仅方便，还能在某个资源改变后，使所有使用该资源网页的信息得到及时更新。2应用应用“资源资源”面板管理模板面板管理模板（1）打开“资源”面板。选择“窗口”“资源”命令，选中“资源”复选框后可以在Dreamweaver窗口的右侧面板组中看到“资源”面板。（2）在“资源”面板中，单击其左侧的“模板”按钮，可以打开“模板”子面板，在此可以完成有关模板的新建、编辑、重命名、应用、更新等操作。如在“模板”列表框中选择相应的模板，单击下方的“应用”按钮，即可在当前文档中应用该模板。试一试 创建基于本项目任务3定义的可编辑区域模板“mobanblyc.dwt”的网页，如“经典案例”页面，编辑下图主体区域左侧的内容后保存页面，并进行更新、分离等操作。任务5 应用库项目n任务任务目标目标（1）理解库项目的作用；（2）掌握创建库项目的方法；（3）掌握插入库项目的方法；（4）掌握更新库项目的方法；（5）掌握分离库项目的方法。n任务任务描述描述 在 Dreamweaver中，除了可以使用模板功能减少重复性劳动，利用库项目同样可以实现对文件风格的维护。很多网页带有相同的内容（如图像、文本和其他对象），可以将这些文档中的共有内容定义为库项目，并插入需要这些页面元素的网页文档中。任务5 应用库项目n任务分析任务分析 将站点中多个页面都要用到的页面元素创建成库项目，可以满足重复使用或频繁更新维护的需要。利用库项目，可以将一个固定内容（如联系方式、最新客户等）插入到多个页面中。当需要更新时，只要改变库项目文件就能使站点中的相关页面得到更新。库项目是一种特殊的Dreamweaver文档，其扩展名为.lbi，存储在站点中的Library文件夹中。这个文件夹是第一次在“资源”面板中创建库项目时自动生成的，不能随意对其进行修改，否则库项目将不能正常使用。库项目比模板灵活，可以插入到页面的任何位置，而不会固定在同一位置。可以新建一个空白库文件，也可以使用文档部分中的任意元素创建库文件。将经常用到的图片、文字、链接、广告条、页头、页脚等制作成库项目是最合适的。当修改库项目时，会更新使用该项目的所有文档。如果选择不更新，那么文档将保持与库项目的关联，可以在以后进行更新。操作步骤n步骤步骤1创建空白库项目。n步骤步骤2将现有内容转换为库项目。（1）在“文档”窗口中选中要转换为库项目的元素。（2）创建库项目。（3）如果选中元素应用了CSS，则在将其转换为库项目时会弹出提示信息，如下图所示，单击“确定”按钮，创建库项目；单击“取消”按钮，放弃创建库项目。操作步骤（4）为新创建的库项目设置名称，如果内容中含有链接，则会询问是否更新链接，单击“更新”按钮。注意观察库项目“属性”面板中源文件名称是否随之变化，如果命名前做了其他操作，则源文件名称会保持为原名称，选中内容与改名后的库项目失去连接。单击“打开”按钮，提示找不到源文件；单击“重新创建”按钮，可以重新创建原名称的库项目；单击“从源文件分离”按钮，可以将选中内容恢复到初始可编辑状态。n步骤步骤3插入库项目。（1）将光标移动到页面的合适位置。（2）在“库”列表框中选择要添加的库项目，单击左下方的“插入”按钮，即可将其插入到页面中。n步骤步骤4删除库项目。在“库”列表框中选择要删除的库项目，单击右下方的“删除”按钮 ，即可将其删除。操作步骤n步骤步骤5重新创建库项目。如果库项目被误删除了，则可以在页面中选择该库项目中的一个实例，单击库项目“属性”面板中的“重新创建”按钮，重新创建被误删除的库项目。如果库项目还存在，则单击“重新创建”按钮会弹出是否覆盖现存库项目的提示信息。n步骤步骤6编辑库项目。在“库”列表框中，双击要修改的库项目，可打开库项目，可以根据需要像编辑普通网页一样修改库项目中的内容。n步骤步骤7更新库项目。（1）选择“修改”“库”“更新当前页”命令，可对当前页面进行更新。（2）选择“修改”“库”“更新页面”命令，弹出“更新页面”对话框，可以设置用库项目中的最新内容更新整个站点，或只更新插入特定库项目的页面。（3）修改库项目后进行保存，会弹出“更新库项目”对话框，单击“更新”按钮，所有应用此库项目的页面都会自动更新。操作步骤n步骤步骤8分离库。（1）打开插入了库项目的页面文件，选中页面中要分离的库项目。（2）将页面中当前选中的对象与库项目分离。（3）弹出“Dreamweaver”提示框，单击“确定”按钮，当前选中的对象即可从库项目中分离出来，并恢复为可编辑状态。但是，以后再对库项目进行修改时，此对象将不再随之更改。知识链接1库项目的作用库项目的作用（1）将网页中经常用到的对象制作成库项目，可以是各种各样的页面元素，如文本、图像、表格、表单、Flash动画等，库项目可以作为一个对象轻松插入多个页面中，使用灵活、方便、高效。（2）通过修改库项目，并使用更新命令，即可实现整个网站所有页面上与库项目连接内容的一次性更新，这是对多个地方重复出现的同一内容进行修改的有效方式。（3）库项目的功能与模板的功能相似，但又有所不同。模板是可以被整个页面文件反复使用的、结构固定；而库项目则可将页面中某局部元素多次使用到多个页面中的任意位置。2库项目的显示库项目的显示 创建为库项目的内容，在页面中显示时有淡黄色底纹，插入到页面中的库项目同样有淡黄色底纹，处于不可编辑状态，如果需要编辑，则可以通过在库项目中编辑后更新来实现，或者与库项目分离后进行编辑，分离后其不再显示淡黄色底纹。拓展与提高 库项目实际上是要插入到页面中的一段代码。把库项目插入到页面中，就是把该库项目的源代码的一份副本复制到页面中，并创建一个对外部库项目的引用。将已有内容创建为库项目时不复制样式表信息，因为这些对象所使用的样式表信息代码位于文档的head中。重命名库项目会断开其与文档或模板的连接。可以重新创建同名库项目，或者修改名称使其一致，以恢复库项目与页面的连接。试一试 将本素材“素材项目7试一试05mywebhtmlGuanYuWoMen42.html”页面的“最新客户”板块创建为库项目并进行插入、更新、分离等操作。