网页制作课程

课前导读课堂讲解上机实战课后练习,第章 应用模板和库设计网页,课前导读,基础知识重点知识,基础知识,资源列表的使用。,重点知识,模板的创建及其使用方法。,课堂讲解,模板和库 使用资源列表,模板和库,模板简介 创建模板 模板的编辑 用模板创建网页 管理模板,在进行大量的页面制作时，很多页面会用到同样的版式、导航、LOGO等，为了避免重复劳动，可以使用Dreamweaver提供的模板和库功能将具有相同版面结构的页面制作成模板，然后通过模板来创建其他页面。,模板简介,模板是一种具有固定格式的Web页面文件，可按自己的要求创建有格式的文档模板，这样可以在运用模板时自动生成具有相同风格的页面。在编辑网页时，只需输入每个文档中不同的内容即可。 在Dreamweaver模板中通过标记可编辑区域和锁定区域来设置站点中各页面的风格统一区域，同时也避免因操作失误导致模板被修改的情况。可编辑区是指利用模板生成的新文档中可以被编辑的区域，锁定区域是指模板的固定格式区域，即不能被编辑的区域。,这是通过模板特性还可以对站点中所有应用同一模板的文档进行批量更新。若要修改网页的风格可以只修改相应的模板文件，然后用Dreamweaver站点管理特性就可全面更新利用该模板创建的所有文档。,创建模板,模板必须保存在站点中，因此在创建模板前应先建立站点，否则系统也会提示建立站点。创建模板时可将新建的文档或现有文档以另存为模板的方式创建，也可在“插入栏”的“常用”选项卡中单击“模板” 按钮 创建模板。,将现有文档保存为模板 将现有文档保存为模板的具体操作如下。 （1）打开要作为模板的网页文档。 （2）选择文件另存为模板菜单命令，打开“另存模板”对话框，如图10-8所示。 （3）从“站点”下拉列表中选择一个用来保存模板的站点。 （4）在“另存为”文本框中设置要创建的模板的名称，如xyqc。 （5）单击 按钮，模板文件被保存在指定站点的Templates文件夹中，文件格式名为.dwt，如图10-9所示。,图10-8,图10-9,创建空白模板 要创建空白模板，具体操作如下。 （1）选择窗口资源菜单命令，打开“资源”面板。 （2）单击“模板” 按钮，然后单击“新建模板” 按钮，这时将在模板列表中添加一个未命名的模板，如图10-10所示。 （3）输入模板的名称，然后按【Enter】键即可创建一个空白的模板文件。 （4）双击新建的空白模板图标即可打开该模板文件进行编辑，如图10-11所示。 （5）编辑模板文件后，选择文件保存菜单命令即可保存该模板文件。,图10-10,图10-11,模板的编辑,模板创建好后即可对模板进行编辑。 创建可编辑区域 创建可编辑区域是给新创建的空白模板指定可编辑区域。 设置可编辑区域的具体操作如下：,（1）打开创建的模板文件，将鼠标定位到要标记为可编辑区域的位置。 （2）执行如下操作之一：在“插入栏”的“常用”选项卡中单击 按钮，打开如图10-12所示的模板编辑列表，单击“可编辑区域”按钮 ；选择插入模板对象可编辑区域菜单命令，打开“新建可编辑区域”对话框，如图10-13所示。,图10-12,图10-13,（3）在“名称”文本框中输入可编辑区域的名称（不能使用“双引号”、“单引号”、“小于号”、“大于号”及“与”符号等特殊字符）。 （4）单击 按钮，模板中可编辑区域以绿色高亮显示。新建的可编辑区域如图10-14所示。 （5）用同样的方法可以在同一文件的多个位置创建可编辑区域。,图10-14,取消对可编辑区域的标记 如果指定错了可编辑区域或想更改可编辑区域，可以在模板文件窗口中取消对该可编辑区域的标记，具体操作如下。 （1）选取模板文档中需要取消的可编辑区域标记。 （2）选择修改模板删除模板标记菜单命令即可。,更改可编辑区域的名称 插入可编辑区域后，可以在以后更改它的名称。具体操作如下。 （1）单击可编辑区域左上角的选项卡以选中它。 （2）在属性面板中输入一个新名称。 （3）按【Enter】键应用更改。,用模板创建网页,可以通过现有模板选择、预览和创建新文档，可以使用“新建文档”对话框从Dreamweaver定义的任何站点中选择模板，也可以使用“资源”面板从现有模板创建新的文档。另外，还可以给当前文档应用模板。创建基于现有模板的文档 创建基于模板的新文档的具体操作如下。 （1）选择文件新建菜单命令，打开“新建文档”对话框。,（2）单击“模板”选项卡。在“模板用于”列表中，选择包含要使用模板的Dreamweaver站点，然后从右侧的列表中选择一个模板，如图10-15所示。,图10-15,（3）单击 按钮。新文档出现在窗口中，鼠标移到可编辑区域时，光标变为可编辑状态，而移到锁定区域时则变为不可编辑状态，如图10-16所示。,图10-16,在“资源”面板中从模板创建新文档 具体操作如下。 （1）打开“资源”面板。 （2）在“资源”面板中单击左侧的“模板”按钮 以查看当前站点中的模板列表。 （3）用鼠标右键单击要应用的模板，在弹出的快捷菜单中选择“从模板新建”命令，文档即会在文档窗口中打开。,将当前文档应用模板 具体操作如下。 （1）打开要应用模板的现有文档。 （2）选择窗口资源菜单命令打开“资源”面板，单击面板左侧的按钮 打开模板列表，如图10-17所示。 （3）在“模板”列表中选中要应用的模板，单击 按钮，也可以直接从“模板”面板上将需要的模板拖到文件窗口中。,图10-17,（4）若文档中有不能自动指定到模板区域的内容，则打开如图10-18所示的“不一致的区域名称”对话框。 （5）在“可编辑区域”列表中选择要应用的模板中的所有可编辑区域。 （6）在“将内容移到新区域”下拉列表框中选择将现有内容移到新模板中的区域，如图10-19所示。,图10-18,图10-19,（7）单击 按钮即可将现有文档中的内容应用到指定的区域，如图10-20所示。 （8）选择文件另存为菜单命令，将文档另存即可。也可直接保存文档。,（7）单击按钮即可将现有文档中的内容应用到指定的区域，如图10-20所示。,图10-20,管理模板,学习创建模板和利用模板创建文档的方法后，下面介绍如何对模板进行重命名、删除等操作。重名命模块重命名模板的具体操作如下 （1）选择窗口资源菜单命令或按【F11】键，打开“资源”面板。 （2）在“资源”面板左侧的工具箱中单击“模板”按钮 ，打开模板列表。,（3）在模板列表中选取要重命名的模板项，双击模板名称或在选取的模板名称上单击鼠标右键，在弹出的快捷菜单中选择“重命名”命令，此时模板名称以反白显示。 （4）在反白显示区输入新名称，按【Enter】键结束操作。,删除模板 如果想将站点中不用的模板删除，具体操作如下 （1）在“资源”面板中，单击要删除的模板文件前的图标选取模板文件，如图10-21所示。 （2）单击面板右下方的“删除”按钮 ，打开询问是否确定要删除文件的对话框，如图10-22所示。 （3）单击 按钮，即可将模板从站点中删除，如图10-23所示。,图10-21,图10-22,图10-23,在“模板”面板中除按钮 外，底部其他按钮的含义如下。：单击该按钮可刷新站点列表。：单击该按钮可以创建一个新模板文件。 ：单击该按钮可打开模板文件并在编辑窗口中对模板文件进行编辑。,修改模板 创建模板文档后，文档与模板间就建立了一定的链接关系，这种应用了模板的文档常称为附着模板文档。当修改模板后，系统自动更新附着模板的文档。本节将介绍更新模板及附着模板的文档的方法。,打开文档所附模板 打开文档所附模板的具体操作如下。 （1）在站点中双击附着模板的文档，在当前窗口中打开。 （2）选择修改模板打开附加模板菜单命令即可在文档窗口中打开相应的模板。此时就可对模板进行编辑修改等操作。,打开文档所附模板 打开文档所附模板的具体操作如下。 （1）在站点中双击附着模板的文档，在当前窗口中打开。 （2）选择修改模板打开附加模板菜单命令即可在文档窗口中打开相应的模板。此时就可对模板进行编辑修改等操作。,更新模板 更新模板的具体操作如下。 （1）打开要更新的模板。 （2）如果要对可编辑区域重新设置，可先选择修改模板删除模板标记菜单命令取消可编辑区域标记，如取消moban.dwt中的Edit1可编辑区域标记。 （3）选取要标记的可编辑区域，并标记为可编辑区域。 （4）修改可编辑区域文档内容后，选择文件保存菜单命令，打开如图10-24所示的“更新模板文件”对话框。 （5）单击 按钮不更新文档，则只是对修改后的模板进行保存。,图10-24,更新当前页 前面已修改了模板，下面将介绍如何对当前页进行更新，具体操作如下。 （1）打开要更新风格的文档。 （2）选择修改模板更新当前页菜单命令，打开如图10-25所示的“不一致的区域名称”对话框。 （3）在“可编辑区域”列表中选择当前文档需要更新的可编辑区的名称。 （4）在“将内容移到新区域”下拉列表框中选择要将文档中的可编辑区域移到模板中可编辑区域的什么位置。列表中显示了模板中的所有可编辑区域名称，如图10-26所示。 （5）设置完成后单击按钮即可更新当前页。,图10-25,图10-26,将文档脱离模板 如果不想在文档中附有模板，或不希望文档与模板有联系，可以使文档与模板分开，具体操作如下。 （1）打开要脱离模板的文档。 （2）选择修改模板从模板中分离菜单命令即可进行分离。分离后该文档中的任意区域都可编辑。,使用资源列表,认识“资源”面板 使用站点列表 使用收藏资源,资源包括存储在站点中的各种元素，如图像或影片文件。“资源”面板（如图10-27所示）提供了两种查看资源的方式：“站点”列表显示站点的所有资源；“收藏”列表仅显示曾明确选择的资源。,图10-27,认识“资源”面板,在“站点”列表和“收藏”列表中，资源被分成下列类别，显示在“资源”面板的左侧： ：是GIF、JPEG或PNG格式的图像文件； :是站点的文档和样式表中使用的颜色，包括文本颜色、背景颜色和链接颜色； :是当前站点文档中的外部链接。此类别包括下列类型的链接：FTP、gopher、HTTP、HTTPS、JavaScript、电子邮件（mailto）和本地文件（file:/）； :是任意版本的Macromedia Flash格式文件。“资源”面板仅显示SWF文件，而不显示FLA（Flash源）文件；,：是任意版本的Macromedia Shockwave格式文件； ：是QuickTime或MPEG格式文件； ：是JavaScript或VBScript文件。HTML文件中的脚本（而不是独立的JavaScript或VBScript文件）不出现在“资源”面板中； ：提供了一种方便的方法，用于在多个页面上重复使用同一页面布局，以及在修改模板的同时修改附加到该模板的所有页面上的布局。 ：是在多个页面中使用的元素；当修改一个库项目时，所有包含该项目的页面都将被更新。,使用站点列表,在使用站点列表可以删除、排序资源，对资源进行编辑，以及在页面中插入资源等。下面来认识并使用站点列表中的资源。使用站点列表 要使用“站点”列表的具体操作如下。 （1）选择窗口资源菜单命令或按【F11】键，打开“资源”面板。 （2）选中 单选项，打开站点资源列表。 （3）单击相应的资源种类按钮，在资源列表中选择资源，这时在预览窗口中将显示所选中的资源。,（4）单击 按钮即可将选中的资源添加到文档中。（5）单击 按钮可以刷新资源列表。（6）单击 按钮可打开外部编辑器编辑选中的资源。（7）单击 按钮可将选中资源添加到“收藏”列表中。,在页面中添加资源 要在页面中插入资源，可在“资源”面板中选择要插入的资源种类（“颜色”和“模板”除外），将资源文件拖动到文档窗口的设计视图中，或单击 按钮将资源插入到页面中。同时，使用“资源”面板中的“颜色”资源可改变文档中文本的颜色。选中文本后，在“资源”面板中选择“颜色”资源种类，在列表中选择想要的颜色，单击 按钮即可。,改变资源顺序 默认情况下，资源按字母顺序排列。资源名可以是一个文件名、十六进制数（如颜色）或URL地址。要改变资源列表中各资源的排列顺序，可单击相应的标题栏，如图10-28所示。,图10-28,创建库项目 在Dreamweaver MX 2004中，如果要创建新的库项目，可在“资源”面板中选中“库”资源种类 按钮，然后单击“新建库项目”按钮 。如果要编辑库项目，可单击“编辑”按钮 ，打开一个新页面进行编辑即可。,使用收藏资源,要将在“资源”面板中，“收藏”列表的使用方法与“站点”列表的使用方法基本相同，但又有许多是只能在“收藏”列表中才能完成的操作。“资源”面板中的站点列表显示的是站点中的所有资源，对许多站点来说是比较繁杂的。如果将经常使用的资源添加到“收藏”列表中，并对它们进行命名，就可以快速找到这些资源。 认识“收藏”列表 要打开“收藏”列表，可选择窗口资源菜单命令或按【F11】键，在打开的“资源”面板中选中单选项，打开“收藏”列表，如图10-29所示。,图10-29,添加到“收藏”列表中的资源文件不能单独地被保存在磁盘上，它们是由“站点”列表提供的，Dreamweaver会保留从“站点”列表到“收藏”列表的指向关系。当资源从“收藏”列表中删除时，它仍然显示在“站点”列表中。,添加资源到“收藏”列表 要将资源添加到“收藏”列表，具体操作如下。 （1）打开“站点”列表，在“资源”面板中单击 按钮。 （2）在图像列表中选择要添加到“收藏”列表中的图像文件，单击底部的“添加到收藏夹”按钮 。 （3）打开如图10-30所示的提示框，提示资源已添加到收藏列表中，单击 按钮即可完成资源的添加，如图10-31所示。,新添加的资源文件,图10-31,图10-30,为收藏资源创建一个易记的名称 在“收藏”列表中可以将资源重新命名为一个易记的名称便于查找。用鼠标右键单击资源名称或图标，在弹出的快捷菜单中选择“编辑别名”命令，为资源输入一个新的名称即可。在收藏夹中将资源分组 在“收藏”列表中可以对资源进行分组，其方法为：单击“新建收藏夹”按钮 ，创建并命名收藏夹，然后将资源文件拖动到相应的收藏夹中即可。从“收藏”列表中删除资源 要从“收藏”列表中删除资源文件，可选择要删除的资源文件，然后单击“收藏”列表窗口底部的“从收藏中删除”按钮 即可。,上机实战,创建模板 应用模板,在本课上机实战中，将创建一个名为photo.htm的Web页面并进行编辑，编辑完成后将其另存为名为photo.dwt的模板文件，然后通过该模板创建一个新的Web页，最后对该新文档进行编辑保存。 本上机实战可分为两大步来进行，创建模板和应用模板。,创建模板,具体操作如下。 （1）新建一个名为“相册”的站点。 （2）新建一空白文件，命名为photo.htm。 （3）编辑该文档，效果如图10-32所示。 （4）选择文件另存为模板菜单命令，打开如图10-33所示的“另存模板”对话框。 （5）在“站点”下拉列表框中选择“相册”站点，在“另存为”文本框中输入模板的名称，如photo。,图10-32,图10-33,（6）单击 在打开的如图10-34所示的提示框中单击 按钮即可更新链接。 （7）选择文档编辑窗口中写有“这是可编辑区域”字样的单元