Adobe Dreamweaver 设计 制作 钱海军讲师
Adobe Dreamweaver 钱海军 讲师 设计 制作
使用模板和库制作网站 ·使用模板和库建立网站的好处 ·建立、使用并更新模板 ·在页面中使用库 ZhuHai Radio And Television University
ZhuHai Radio And Television University 使用模板和库制作网站 • 使用模板和库建立网站的好处 • 建立、使用并更新模板 • 在页面中使用库
一、使用模板 使用DW8中的模板和库可以将网站设计得风格一致，使网站维护变得轻松。实际上库与 模板都与服务器端包含对象相似，并且都源于XL技术。通过简单的描述，将一个固定的内 容插入到不同的页面中，在需要更新时，只要改变一个、文件就可以使整个站点的相关页面同 时得到更新。对于制作大型站点、静态页面，特别是需要整个站点风格统一的用户来讲，模板 与库是最佳的也是必须的选择。 为了体现网站的专业性，使站点中的文档具有统一风格是非常重要的。例如，可以在每 文档的左上角显示公司的徽标，在一定的位置显示站点的主题文字，这样不仅会加深用户对站 点的印象，也有助于用户了解站点要说明的主题。利用常规的网页创作手段，要在多个文档中 包含相同的内容，则不得不在每个文档中重复进行输入和编辑。如果利用模板功能，可以帮助 用户批量生成具有固定格式的文档。 1.建立模板 2,建立基于模板的页面 3.更新模板 ZhuHai Radio And Television University
ZhuHai Radio And Television University 一、使用模板 使用DW8中的模板和库可以将网站设计得风格一致，使网站维护变得轻松。实际上库与 模板都与服务器端包含对象相似，并且都源于XML技术。通过简单的描述，将一个固定的内 容插入到不同的页面中，在需要更新时，只要改变一个、文件就可以使整个站点的相关页面同 时得到更新。对于制作大型站点、静态页面，特别是需要整个站点风格统一的用户来讲，模板 与库是最佳的也是必须的选择。 为了体现网站的专业性，使站点中的文档具有统一风格是非常重要的。例如，可以在每 文档的左上角显示公司的徽标，在一定的位置显示站点的主题文字，这样不仅会加深用户对站 点的印象，也有助于用户了解站点要说明的主题。利用常规的网页创作手段，要在多个文档中 包含相同的内容，则不得不在每个文档中重复进行输入和编辑。如果利用模板功能，可以帮助 用户批量生成具有固定格式的文档。 1. 建立模板 2. 建立基于模板的页面 3. 更新模板
1.1建立模板 有两种方式建立模板：一种是将现有的网页文件另存为模板，然后根据需要进行修改： 另外一种是直接新建一个空白模板，再在其中插入需要显示的文档内容。模板也是一种文 档，扩展名为“.dwt”,存放在根目录下的Templates文件夹中，如果该文件夹在站点中尚 不存在，Dreamweaver将在保存新的模板时自动将其创建。 1.打开网页文件，选择“文件”菜单中的“另存为模板”命令，将页面另存为模板。 2.在弹出的“另存为模板”对话框中，“站点”下拉式列表用来设置模板保存的站点： “现存的模板”选框显示当前站点中的所有模板：“另存为”文本框用来输入模板的名称。 Save As Template Site:mysite Save Existing templates:(no templates Cancel Description: Save as:Untited-1 Help ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.1 建立模板 有两种方式建立模板：一种是将现有的网页文件另存为模板，然后根据需要进行修改； 另外一种是直接新建一个空白模板，再在其中插入需要显示的文档内容。模板也是一种文 档，扩展名为“.dwt”，存放在根目录下的Templates文件夹中，如果该文件夹在站点中尚 不存在，Dreamweaver将在保存新的模板时自动将其创建。 1. 打开网页文件，选择“文件”菜单中的“另存为模板”命令，将页面另存为模板。 2. 在弹出的“另存为模板”对话框中，“站点”下拉式列表用来设置模板保存的站点； “现存的模板”选框显示当前站点中的所有模板；“另存为”文本框用来输入模板的名称
1.1建立模板 3.单击“保存”按钮，将把当前网页转换为模板，同时将模板另存到选择的站点中。创建 的模板文件保存在Templates文件夹中。窗口的左上角会出现模板的名称。 4.在弹出的“另存为模板”对话框中，“站点”下拉式列表用来设置模板保存的站点： “现存的模板”选框显示当前站点中的所有模板：“另存为？文本框用来输入模板的名称。 注意： 不要将模板移动到Templates文件夹之外，或者将任何非模板文件放在Templates文件 夹中，此外，不用将Templates文件夹移动到本地根文件夹之外，否则，将会在模板的路 径中引起错误。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.1 建立模板 3. 单击“保存”按钮，将把当前网页转换为模板，同时将模板另存到选择的站点中。创建 的模板文件保存在Templates文件夹中。窗口的左上角会出现模板的名称。 4. 在弹出的“另存为模板”对话框中，“站点”下拉式列表用来设置模板保存的站点； “现存的模板”选框显示当前站点中的所有模板；“另存为”文本框用来输入模板的名称。 注意： 不要将模板移动到Templates文件夹之外，或者将任何非模板文件放在Templates文件 夹中，此外， 不用将Templates文件夹移动到本地根文件夹之外，否则，将会在模板的路 径中引起错误
1.1建立模板 5.由模板生成的网页上，哪些地方可以编辑，是需要预先设定的。设定可编辑区域，需要 在制作模板的时候完成。可以将网页上任意选中的区域设置为可编辑区域，但是最好是基 于HML代码的，这样在制作的时候更加清楚。将光标置于要插入可编辑区域的位置，将 正文所在的表格选中，选择“插入”→“模板对象”→“可编辑区域”，或者在“插入” 快捷工具栏的“常用”对象组中单击“模板”按钮上的箭头，然后选择“可编辑区域”。 sert Modify Text Commands Site Wir Object New Editable Region X Name:EdtRegion3 OK Cancel Date template. HTML tri-Alt-v Get More Objects. ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.1 建立模板 5. 由模板生成的网页上，哪些地方可以编辑，是需要预先设定的。设定可编辑区域，需要 在制作模板的时候完成。可以将网页上任意选中的区域设置为可编辑区域，但是最好是基 于HTML代码的，这样在制作的时候更加清楚。将光标置于要插入可编辑区域的位置，将 正文所在的表格选中，选择“插入”→“模板对象” →“可编辑区域”，或者在“插入” 快捷工具栏的“常用”对象组中单击“模板”按钮上的箭头，然后选择“可编辑区域
1.1建立模板 6:在弹出的窗口给可编辑区域命名后单击“确定”按钮。 7.新添加的可编辑区域有蓝色标签，标签上是可编辑区域的名称 提示： 如果希望删除可编辑区域，可以将光标置于要删除的可编辑区域之内，选择“修改” 一→“模板”→“删除模板标记”，光标所在的可编辑区域即被删除。 EditRegion3 EditRegion3 ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.1 建立模板 6. 在弹出的窗口给可编辑区域命名后单击“确定”按钮。 7. 新添加的可编辑区域有蓝色标签，标签上是可编辑区域的名称。 提示： 如果希望删除可编辑区域，可以将光标置于要删除的可编辑区域之内，选择“修改” →“模板” →“删除模板标记”，光标所在的可编辑区域即被删除
1.2建立基于模板的页面 创建基于模板的新文档有很多方法，可以使用“资源”面板，或者菜单“文件”→“新建” 选项。1.在“文件”面板中新建一个网页文件，然后双击该文档，使之在网页编辑窗口中 处于被编辑的状态。 2.选择“窗口”→“资源”打开“资源”面板，切换至其中的“模板”分类，站点中所有 的模板文件将显示在列表中。 3.选中刚才创建好的模板，然后将其拖动至网页编辑窗口处于被编辑状态的网页中。 4.这样，网页就套用了己有的模板。在基于模板的网页中，可编辑区域在DW8主窗口中 被套上蓝色的边框，只有可编辑区域的内容能够被编辑。可编辑区域之外的内容被锁定， 无法编辑。整个页面被套上黄色的边框，右上角的位置有个黄色的标签，其中说明了页面 是一个基于模板的页面，并且后面还列出了基于的模板的名称。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.2 建立基于模板的页面 创建基于模板的新文档有很多方法，可以使用“资源”面板，或者菜单“文件”→“新建” 选项。1. 在“文件”面板中新建一个网页文件，然后双击该文档，使之在网页编辑窗口中 处于被编辑的状态。 2. 选择“窗口”→“资源”打开“资源”面板，切换至其中的“模板”分类，站点中所有 的模板文件将显示在列表中。 3. 选中刚才创建好的模板，然后将其拖动至网页编辑窗口处于被编辑状态的网页中。 4. 这样，网页就套用了已有的模板。在基于模板的网页中，可编辑区域在DW8主窗口中 被套上蓝色的边框，只有可编辑区域的内容能够被编辑。可编辑区域之外的内容被锁定， 无法编辑。整个页面被套上黄色的边框，右上角的位置有个黄色的标签，其中说明了页面 是一个基于模板的页面，并且后面还列出了基于的模板的名称
1.3更新模板 1.如果对模板进行了修改，保存这个模板后，将弹出“更新模板文件”对话框，“更新模板文 件”对话框中列出了所有基于这个模板的网页。单击“更新模板文件”对话框中的“更新”按 钮，将根据模板的改动，自动更新这些网页。 2.更新完毕后，将弹出“更新页面”对话框，显示更新的结果，“查看”项如果选择的是“整 个站点”，则要确认的是更新哪个站点的模板生成网页。如果选择的是“文件使用”，则要选 择更新使用哪个模板生成的网页。“更新”项选择“模板”。选中“显示记录”，会在更新之 后显示更新记录。更新完毕后，单击窗口上的“关闭”按钮，结束操作。 ⑤odate Pages 回x Update Template Files Look in:ntire Site▣netbook Start pdate al fes tempate Update Update:厂Library Ite Close Don't Update Templates Help Show Log Done ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.3 更新模板 1. 如果对模板进行了修改，保存这个模板后，将弹出“更新模板文件”对话框，“更新模板文 件”对话框中列出了所有基于这个模板的网页。单击“更新模板文件”对话框中的“更新”按 钮，将根据模板的改动，自动更新这些网页。 2. 更新完毕后，将弹出“更新页面”对话框，显示更新的结果，“查看”项如果选择的是“整 个站点”，则要确认的是更新哪个站点的模板生成网页。如果选择的是“文件使用”，则要选 择更新使用哪个模板生成的网页。“更新”项选择“模板”。选中“显示记录”，会在更新之 后显示更新记录。更新完毕后，单击窗口上的“关闭”按钮，结束操作
二、使用库 除了模板之外，还可以利用库项目机制快速在文档中输入具有相同格式和内容的文档元 素组合。所谓库项目，就是文档内容的任意组合，可以将文档中的任意内容存储为库项目，使 它在其他地方被重复使用。将网页的某一部分内容变为库中的元素，在制作网页时只要简单的 执行插入操作就可以将这些内容进行重复使用。 1.在网页编辑窗口中选择需要保存为库项目的内容。 2.单击“资源”面板“库”分类中右下角的“新建库项目”按钮，将选择的网页内容保存为 库项目。在“文件”面板中打开站点根目录下的Liarbry文件夹，其中出现了新建的库项目文 件。 3.刚创建好的库项目文件，对于转换成库文件的内容，网页中已经拥有了这个库文件，即背 景会显示为淡黄色，不可编辑。 5.如果希望在网页中插入库文件，首先将光标放置在网页中要插入库文件的位置，在“资源 “面板”库“分类中选择需要插入的库项目，直接拖曳至光标所在的位置即可。 6.如果修改了库文件，选择”文件“一→”保存“，这时弹出对话框，询问是否更新网站中使 用了该库文件的网页。 7.单击”更新“按钮，将更新因内量文的 ZhuHai Radio And Television University
ZhuHai Radio And Television University 二、使用库 除了模板之外，还可以利用库项目机制快速在文档中输入具有相同格式和内容的文档元 素组合。所谓库项目，就是文档内容的任意组合，可以将文档中的任意内容存储为库项目，使 它在其他地方被重复使用。将网页的某一部分内容变为库中的元素，在制作网页时只要简单的 执行插入操作就可以将这些内容进行重复使用。 1. 在网页编辑窗口中选择需要保存为库项目的内容。 2. 单击“资源”面板“库”分类中右下角的“新建库项目”按钮，将选择的网页内容保存为 库项目。在“文件”面板中打开站点根目录下的Liarbry文件夹，其中出现了新建的库项目文 件。 3. 刚创建好的库项目文件，对于转换成库文件的内容，网页中已经拥有了这个库文件，即背 景会显示为淡黄色，不可编辑。 5. 如果希望在网页中插入库文件，首先将光标放置在网页中要插入库文件的位置，在“资源 “面板”库“分类中选择需要插入的库项目，直接拖曳至光标所在的位置即可。 6. 如果修改了库文件，选择”文件“→”保存“，这时弹出对话框，询问是否更新网站中使 用了该库文件的网页。 7. 单击”更新“按钮，将更新网站内使用了该库文件的网页