模板和站点管理.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第,7,章 模板和站点管理,第,7,章 模板和站点管理,7.1,模板,7.2,资源管理,7.3,站点的管理和维护,开 始,网站设计过程中，如果网站的规模比较大，模板的应用就显得特别重要。模板是一种特殊网页文档，用户可以把它作为创建其他网页文档的基础。创建模板可以提高网站设计的工作效率，快速地修改或更新站点中多个页面的外观。,站点管理是,Web,开发至关重要的组成部分，它对于站点的持续发展十分重要。,Dreamweaver,提供了大量的管理工具，可以让用户方便地更新和控制,Web,站点、维护本地文件夹和远程服务器上的站点文件。,本章主要内容：,7.1.1,新建模板的方法,7.1.2,可编辑区域,7.1.3,创建基于模板的页面,返回本章首页,7.1,模板,Dreamweaver,提供了模板这种特殊文档，使用它能批量生成风格类似的网页，还能实现关联网页自动更新，大大简化了网页制作。,7.1.1,新建模板的方法,返回本节,1.,在,【,资源,】,面板新建模板,（,1,）执行,【,窗口,】|【,资源,】,命令打开,【,资源,】,面板，单击左侧栏上的,【,模板,】,按钮切换到模板，如图,7-1,所示。,图,7-1【,资源,】,面板中的模板,（,2,）单击面板下方的,【,新建模板,】,按钮 ，也可以在,【,名称,】,下方的空白处右击，在弹出的快捷菜单中选择,【,新建模板,】,命令。,（,3,）,Dreamweaver,会自动建立一个空的模板 ，如图,7-2,所示，可以修改新模板的名称，并根据提示单击,“,编辑,”,按钮进入模板编辑区对模板进行编辑。,图,7-2,新建一个空模板,7.1.1,新建模板的方法,返回本节,2,利用菜单或者工具栏上的命令新建模板,（,1,）执行,【,插入记录,】|【,模板对象,】|【,创建模板,】,命令，或者单击,【,常用,】,工具栏中的,【,模板,】,按钮，并在下拉菜单中选择,【,创建模板,】,命令。如图,7-3,所示。,图,7-3,执行创建模板命令,图,7-4,保存模板对话框,（,2,）在弹出的,“,另存模板,”,对话框中，可以对模板名称等进行编辑。如图,7-4,所示。最后单击,【,保存,】,按钮。,7.1.1,新建模板的方法,返回本节,用以上两种方法创建的新模板文档，此时还没有添加任何的元素，可以像编辑普通网页一样在模板文档中添加表格、图像、文字等。添加完后，选择,【,文件,】|【,保存,】,命令保存模板，此时会弹出一个对话框，如图,7-5,所示。这是因为模板文档中不含有任何可编辑区域，所以弹出此警示对话框。一般情况下，创建模板时应创建可编辑区域。所谓可编辑区域就是基于模板创建的页面里能够修改的文档部分。,图,7-5,保存模板时,弹出的对话框,专家点拨：,模板保存后可以在默认站点文件夹的,Templates,子文件夹下找到，文件扩展名,.dwt,。不要将模板文件移动到,Templates,文件夹之外或者将任何非模板文件放在,Templates,文件夹中。此外，不要将,Templates,文件夹移动到本地根文件夹之外，否则模板中的路径会发生错误。,7.1.2,可编辑区域,返回本节,在创建模板时，可以在模板页面中创建可编辑区域和锁定区域。在基于模板而创建的网页文档中，只能在可编辑区域中进行修改操作，填入不同的网页内容，而无法修改锁定区域。,1,插入可编辑区域,（,1,）打开事先制作好的一个网页文件,7.1.2.html,。执行,【,文件,】|【,另存为模板,】,命令，弹出,【,另存模板,】,对话框，在其中选择站点并输入模板文件名，如图,7-6,所示。单击,【,保存,】,按钮即可得到一个模板文档。下面在这个模板页面中进行操作。,图,7-6【,另存模板,】,对话框,7.1.2,可编辑区域,返回本节,（,2,）选中要插入可编辑区域的表格。单击,【,常用,】,工具栏中,【,模板,】,按钮，在弹出的下拉菜单中选择,【,可编辑区域,】,命令。如图,7-7,所示。,图,7-7,执行,【,可编辑区域,】,命令,7.1.2,可编辑区域,返回本节,（,3,）这时会弹出,【,新建可编辑区域,】,对话框。如图,7-8,所示。,【,名称,】,文本框中会自动包含,Dreamweaver,系统生成的默认名称，名称末尾的数字是自动递增的。,图,7-8,弹出新建可编辑区域对话框,专家点拨：,在,【,名称,】,文本框中可以为该可编辑区域输入唯一的名称，在实际应用中可以给编辑区域起一个与作用相关的名称。不要在,【,名称,】,文本框中使用特殊字符（引号、括号等）。,7.1.2,可编辑区域,返回本节,（,4,）在这里使用其默认名称，单击,【,确定,】,按钮。可编辑区域在模板页面中由蓝色高亮显示的矩形边框围绕，该区域左上角的选项卡显示该区域的名称。如图,7-9,所示。,专家点拨：,如果看不到可编辑区域的名称和轮廓，可以选择,【,查看,】|【,可视化助理,】|【,不可见元素,】,命令。,（,5,）这样一个可编辑区域就创建完成了。如果创建基于这个模板的网页，那么带有可编辑区域标志的表格就可以被用户编辑，其它的区域则不能被用户编辑。最后执行,【,文件,】|【,保存,】,命令保存模板。,图,7-9,可编辑区域效果,7.1.2,可编辑区域,返回本节,2,删除可编辑区域,根据实际的需要，经常要对已经制作好的模板进行编辑，如果已经将模板文件的一个区域标记为可编辑，而现在想要再次锁定它，使它在基于模板创建的文档中不可编辑，可以先单击可编辑区域左上角的选项卡选中它，然后执行,【,修改,】|【,模板,】|【,删除模板标记,】,命令，可以删除这个可编辑区域。,专家点拨：,也可以在选中可编辑区域后，直接按,Delete,键删除所选的可编辑区域。,3,更改可编辑区域的名称,插入可编辑区域后，可以随时更改它的名称。具体方法如下所述。,（,1,）单击可编辑区域左上角的选项卡选中它。,（,2,）在,“,属性,”,面板中的,【,名称,】,文本框中输入一个新名称，按,Enter,键确认即可。,7.1.2,可编辑区域,返回本节,4,保存更改后的模板,模板修改后执行,【,文件,】|【,保存,】,命令即可。如果此模板已经应用到网页中，此时,Dreamweaver,会提示用户更新基于该模板的网页文档，系统会弹出一个,【,更新模板文件,】,对话框。如图,7-10,所示。选择需要更新的网页（可以选择其中的几个或全部），单击,【,更新,】,按钮即可。更新完毕后会弹出,【,更新页面,】,的对话框。如图,7-11,所示。,专家点拨：,修改模板后可以即时地更新所有应用此模板的网页，也可以选择不更新应用此模板的网页。以后还可以根据自己的需要执行,【,修改,】|【,模板,】|【,更新当前页,】,命令或者执行,【,修改,】|【,模板,】|【,更新页面,】,来更新网页。,图,7-10,“,更新模板文件,”,对话框,图,7-11,更新页面对话框,7.1.3,创建基于模板的页面,返回本节,模板设计好以后，可以创建基于该模板的网页。具体方法如下所述。,（,1,）执行,【,文件,】|【,新建,】,命令，弹出,“,新建文档,”,对话框。单击,【,模板中的页,】,选项。如果,Dreamweaver,有多个站点，将在,【,站点,】,列表中列出，可以从其中选择一个站点，这里选择,samples_web,。如图,7-12,所示。,图,7-12,“,新建文档,”,对话框,7.1.3,创建基于模板的页面,返回本节,（,2,）,【,站点,“,samples_web,”,的模板,】,列表中列出的是该站点中的模板，如果有多个模板，将在这里显示出来。选择一个模板，然后单击,【,创建,】,按钮，就创建了一个基于该模板的文档。,（,3,）,Dreamweaver,为基于模板的文档指定了锁定区域（不可编辑区域）和其它可编辑区域，当把鼠标指针放到不可编辑区域内时，鼠标指针会变成禁止标志，表示不可以对该区域进行编辑。如图,7-13,所示。用户只能在可编辑区域内对该文档进行编辑。,图,7-13,锁定区域,7.2.1,库,7.2.2,其他资源管理,返回本章首页,7.2,资源管理,Dreamweaver,中的,【,资源,】,面板可以让站内元素的管理相对变得轻松。在此面板中，可以查看站点内存在的所有元素，包括所有图像、颜色、,URLs,、,Flash,、,Shockwave,、影片、脚本、模板、库元素等。而且对于常用元素，可以将其拖拉到个人收藏中，从而更加方便查找和使用。,7.2.1,库,返回本节,库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素的方法，这些元素称为库项目。可以在库中存储各种各样的页面元素，如图像、表格、声音和,Flash,文件。,1,创建库项目,可以从网页中的任意元素创建库项目，这些元素包括文本、表格、表单、,Java applet,、插件、,ActiveX,元素、导航条和图像。下面以图像为例来创建一个库项目。,2,在文档中插入库项目,库项目建好以后就可以在文档中插入并使用了，当向页面插入库项目时，将把实际内容以及对该库项目的引用一起插入到文档中。,例如要将库项目插入到某一个网页文档中，定位好插入点后，在,“,资源,”,面板中选择库项目，单击,“,资源,”,面板底部的,【,插入,】,按钮即可。,7.2.2,其他资源管理,返回本节,可以使用拖动鼠标的方式在编辑文档时应用,【,资源,】,面板中的元素，例如插入图像时，除了使用,【,插入,】,菜单下的,【,图像,】,命令和,【,常用,】,工具栏上的,【,图像,】,按扭 的方式以外，也可以在,【,资源,】,面板上选择某个图像资源，可以马上预览到该图像，然后用鼠标拖动该图片到文档中相应位置即可。,单击,【,资源,】,面板中的,【,颜色,】,按钮 切换到网站色彩管理，可以查看站点内应用到的所有颜色设置，更方便统一网站色彩。同样地，选中想要设置的文本，然后用鼠标拖动某颜色到该文本上，则该颜色自动应用到文本上，如图,7-18,所示。,图,7-18,利用颜色管理器,设置网页颜色,专家点拨：,其它资源的应用与上面的介绍的方法相类似，均可使用鼠标拖动来完成，此处不再赘述。,7.3.1,管理站点,7.3.2,使用,【,文件,】,面板管理站点文件,7.3.3,站点地图,返回本章首页,7.3,站点的管理和维护,完成站点制作阶段的工作后，关于,Web,站点的工作并没有结束。在完成制作工作之后，站点需要对访问者开放，这个过程称为,“,发行,”,，也就是把站点上传到服务器，发布站点并进行宣传。另外，,Web,站点还需要根据访问者的需求而不断发展完善，从而保持活力并且继续吸引新老访问者。这个持续进行修改、更新和添加新内容、不断优化,Web,站点的过程被称为,“,站点维护,”,。,7.3.1,管理站点,返回本节,选择,【,站点,】|【,管理站点,】,命令，就可以打开,【,管理站点,】,对话框，如图,7-19,所示。,利用这个对话框,可以对站点进行新建、编辑、复制、删除、导出和导入等操作。,图,7-19,【,管理站点,】,对话框,1,新建站点,在,【,站点管理,】,对话框中，单击,【,新建,】,按钮，可打开站点定义对话框，建立新的站点。新建站点的相关内容，可以参考第,2,章中的介绍。,7.3.1,管理站点,返回本节,2,编辑站点,在,【,站点管理,】,对话框中选择站点后，单击,【,编辑,】,按钮，在,弹出对话框中单击,【,高级,】,选项卡，,就能,根据需要编辑修改其中的参数。如图,7-20,所示。,图,7-20,【,高级,】,选项卡,专家点拨：,在,“,高级,”,选项卡中，在,“,分类,”,列表中可以分别对,“,本地信息,”,、,“,远程信息,”,、,“,测试服务器,”,、,“,遮盖,”“,设计备注,”,、,“,站点地图布局,”,、,“,文件视图列,”,、,“,Contribute,”,、,“,模板,”,、,“,Spry,”,等进行修改，来完善自己站点的设置。,7.3.1,管理站点,返回本节,3,复制站点,要复制站点，可在选择站点后，单击,【,复制,】,按钮。默认情况下，复制的站点名会在原站点名的后面增加,“,复制,”,两个字，如图,7-21,所示。,图,7-21,复制站点后的,【,管理站点,】,对话框,4,删除站点,要删除站点，可在选择站点后，单击,【,删除,】,按钮。删除时，,Dreamweaver,会提示该操作无法撤销，如图,7-22,所示。,图,7-22,删除站点时,的提示框,7.3.1,管理站点,返回本节,5,导出站点,通过,Dreamweaver,，可以将站点导出为,XML,文件，并且还可以将保存站点信息的,XML,文件导入到,Dreamweaver,。这样，就可以在不同计算机之间移动站点，或者与其他用户共享站点。,选择要导出的站点，单击,【,导出,】,按钮，弹出,【,导出站点,】,对话框，如图,7-23,所示。,图,7-23,【,导出站点,】,对话框,7.3.1,管理站点,返回本节,单击,【,确定,】,按钮后，弹出,【,站点导出,】,对话框，选择保存该站点的位置以及输入文件名，单击,【,保存,】,按钮，,Dreamweaver,会在指定位置将站点保存为,ste,扩展名的,XML,文件。如图,7-24,所示。,图,7-24,“,导出站点,”,对话框,6,导入站点,在,【,管理站点,】,对话框中，单击,【,导入,】,按钮，弹出,【,导入站点,】,对话框，选择要导入的站点（*,.ste,文件）。单击,【,打开,】,按钮后，即可将站点导入到,Dreamweaver,中。,7.3.2,使用,【,文件,】,面板管理站点文件,返回本节,【,文件,】,面板显示了站点的文件和文件夹结构，它可以显示为,“,折叠模式,”,或,“,扩展模式,”,，无论在哪种模式下，用户都可以利用,“,文件,”,面板执行多种维护工作，比如添加、删除、重命名和移动文件与文件夹。在,Dreamweaver,里完成所有的文件维护工作可以确保链接、图像和其他元素的路径自动实现更新，因为,Dreamweaver,会追踪用户所做的修改，并根据用户在定义的站点中所做的修改而对文件进行相应的更新。,1,调出并查看站点文件,本地与远程站点文件管理方法除调出文件目录的方法不同之外，其余均相同。,（,1,）选择,【,窗口,】|【,文件,】,命令，打开,【,文件,】,面板。,（,2,）在,【,文件,】,选项卡下方的下拉列表中选择需要打开的站点，在右边的下拉列表中选择,【,本地视图,】,，站点管理窗口下方列出所选站点的全部文件，如图,7-25,所示。,图,7-25,查看本地网站文件,7.3.2,使用,【,文件,】,面板管理站点文件,返回本节,（,3,）对于远程站点，先选择需要打开的网站，然后在右边的下拉列表中选择,【,远程视图,】,，单击工具栏上的,【,连接到远端主机,】,按钮 ，计算机会自动进行连接。在连接的过程中，计算机会有提示,“,更新文件夹中远端文件列表,”,对话框出现，如图,7-26,所示。连接成功后，就会在窗口中看到远程网站上的文件目录了。同时，,【,连接到远端主机,】,按钮变成了,【,从远端主机断开,】,按钮 ，如图,7-27,所示。,图,7-26,【,状态,】,对话框,图,7-27,查看远程站点文件,专家点拨：,在,【,文件,】,面板中选择,【,文件,】,选项卡，然后单击其中的,【,展开以显示本地和远端站点,】,按钮 ，可以切换到站点管理模式，在这里，可以非常方便地调出和查看远端和本地站点中的文件和文件夹。,7.3.2,使用,【,文件,】,面板管理站点文件,返回本节,2,打开站点文件,在,【,文件,】,面板中，先选择要管理的站点，再双击欲打开的文件（或者执行,【,文件,】|【,打开,】,命令），该文件稍候则显示在文档窗口内。也可以选中要打开的文件后右击，在弹出的快捷菜单中选择,【,打开,】,命令，就能打开站点中的文件进行编辑修改。,3,增添文件及文件夹,在制作站点的一个个栏目时，最好是建立一个个独立的文件夹，这样便于管理。如果由于某种原因要增添栏目，也可以增添新的文件夹及文件。在,【,文件,】,面板中，选中一个要在其中建立新文件或新文件夹的目录，右击，在弹出的快捷菜单中选择,【,新建文件,】,命令或,【,新建文件夹,】,命令，即可建立文件或文件夹，如图,7-28,所示。,7.3.2,使用,【,文件,】,面板管理站点文件,返回本节,图,7-28,在,【,文件,】,面板中新建文件夹,4,文件及文件夹的操作,选择所要操作的文件或文件夹，右击，在弹出的快捷菜单中运用,【,编辑,】,菜单下的,【,剪切,】,、,【,复制,】,、,【,粘帖,】,、,【,删除,】,、,【,重制,】,、,【,重命名,】,命令，可以对文件或文件夹进行删除、移动、重命名等操作。这些操作相对比较简单，这里就不赘述了。,7.3.3,站点地图,返回本节,站点地图是理想的站点结构布局工具，利用它可以快速地设置整个站点结构。利用站点地图可以将新文件添加到,Dreamweaver,站点，或者添加、修改、删除链接。站点地图从主页开始显示两个级别深度的站点结构，每个页面以图标形式显示，并按在源代码中出现的顺序来显示链接。,站点地图提供了组织网站内容直观快捷的方式，使用站点地图必须首先设置站点地图的首页，这个首页可以是任意的文件，站点地图将会以这个文件为线索显示站内的其他文件。,7.3.3,站点地图,返回本节,1,制作网站地图,（,1,）打开示例文件,Samples,siteMapsiteMap.html,。选择,【,站点,】|【,管理站点,】,命令，从弹出的,【,管理站点,】,对话框中选择,“,samples_web,”,，然后单击,【,编辑,】,按钮，如图,7-29,所示。,图,7-29,编辑站点,（,2,）在弹出的,【samples,的站点定义为,】,对话框中，选择,【,高级,】,选项卡，在,【,分类,】,列表中选择,“,站点地图布局,”,选项，然后在右侧单击,【,主页,】,后面的,【,浏览文件,】,按钮 ，如图,7-30,所示。,图,7-30【samples,的站点定义为,】,对话框,7.3.3,站点地图,返回本节,（,3,）从弹出的,【,选择首页,】,对话框中，选择文件,Samples,siteMapsiteMap.html,，然后单击,【,打开,】,按钮，如图,7-31,所示。,图,7-31,选择首页文件,（,4,）回到,【samples,的站点定义为,】,对话框中，勾选,【,显示相关文件,】,复选框，然后单击,【,确定,】,按钮，如图,7-32,所示。,图,7-32,站点地图布局的设置,7.3.3,站点地图,返回本节,（,5,）在,“,管理站点,”,对话框中单击,“,完成,”,按钮。,（,6,）进入,【,文件,】,面板，单击,【,展开以显示本地和远端站点,】,按钮 ，切换到站点管理模式。单击,【,站点地图,】,按钮 ，从弹出下拉菜单中选择,【,地图和文件,】,，如图,7-33,所示。,图,7-33,显示站点地图,7.3.3,站点地图,返回本节,（,7,）站点地图打开后可以看到站内文件的结构，窗口左侧是站点地图，右侧是站点内的文件列表。站点地图以,siteMap.html,为根节点显示文件之间的关系，在这个例子中，,siteMap.html,内含有指向三个文件的链接，另外还包括一张图片，这些内容都列了出来。,fileC.html,中又进一步含有文件链接，同样也包含在下方，如图,7-34,所示。,图,7-34,站点地图,专家点拨：,站点地图提供了管理链接的直观途径，文件之间的链接关系用箭头表示出来，箭头出发的文件中包含有链接，而箭头指向的文件就是链接所指向的文件。,7.3.3,站点地图,返回本节,2,利用网站地图管理链接,（,1,）在站点地图的根节点（也就是,siteMap.html,）上右击，从弹出的快捷菜单中选择,【,链接到已有文件,】,命令，这时会弹出,【,选择,HTML,文件,】,对话框，从中选择文件,Samples,siteMapfileD.html,，然后单击,【,确定,】,按钮，如图,7-35,所示。,图,7-35,选择链接目标,7.3.3,站点地图,返回本节,（,3,）在站点地图中，可以看到,siteMap.html,增加了一个字节点,fileD.html,，这表明,siteMap.html,中含有了指向文件,fileD.html,的链接，如图,7-36,所示。,图,7-36,站点地图中增加了新节点,7.3.3,站点地图,返回本节,（,4,）在站点地图中双击,siteMap.html,，可以看到自动生成的链接，链接指向文件,fileD.html,，连接文本是,fileD,，如图,7-37,所示。,图,7-37,文件中自动增加的新链接,7.3.3,站点地图,返回本节,（,5,）在站点地图中,fileA.html,的图标上单击，选中图标后其右上角将会出现拖放图标 ，单击拖放图标并且拖动，到,fileB.html,对应的图标上释放鼠标左键，如图,7-38,所示。,图,7-38,在文件之间建立链接,7.3.3,站点地图,返回本节,（,6,）完成以上设置后，在站点地图中可以看到，,fileA.html,的图标下方出现了新的链接目标,fileB.html,，如图,7-39,所示。,图,7-39,链接建立后站点地图的显示效果,Thank you very much!,本章到此结束，,谢谢您的光临！,结束放映,返回本章首页,