网页设计与制作网页设计与制作老虎工作室老虎工作室20122012年年1212月月 项目十项目十 库和模板库和模板────制作职业学校主页制作职业学校主页 任务一任务一 制作库制作库 任务二任务二 制作模板制作模板 实实 训训 制作制作““一翔学校一翔学校””网页模板网页模板 任务三任务三 制作网页制作网页 在在Dreamweaver 8中，可以使用库和中，可以使用库和模板来统一网站风格，提高工作效率本模板来统一网站风格，提高工作效率本项目以制作职业学校主页为例，介绍使用项目以制作职业学校主页为例，介绍使用库和模板制作网页的基本方法在项目中，库和模板制作网页的基本方法在项目中，首先制作库项目页眉和页脚，然后制作模首先制作库项目页眉和页脚，然后制作模板，最后根据模板制作主页板，最后根据模板制作主页 任务一任务一 制作库制作库 （一）创建库项目（一）创建库项目 （二）编排库项目（二）编排库项目 （一）创建库项目（一）创建库项目 需要掌握的内容主要有：需要掌握的内容主要有： 1、库概念的理解、库概念的理解 2、【资源】面板、【资源】面板 3、创建库项目、创建库项目 4、删除库项目、删除库项目 如果在一个站点的众多网页中，有些内容是完全相如果在一个站点的众多网页中，有些内容是完全相同的，就没有必要在每一页重复制作这些内容。
在同的，就没有必要在每一页重复制作这些内容在Dreamweaver中，可以将众多网页相同的某一部分内容中，可以将众多网页相同的某一部分内容做成库项目，然后将库项目插入到网页中当需要修改做成库项目，然后将库项目插入到网页中当需要修改时，只需修改库项目，使用库项目的网页就会自动进行时，只需修改库项目，使用库项目的网页就会自动进行更新，这样即省时又省力更新，这样即省时又省力 在在Dreamweaver中，创建的库项目的文件扩展名为中，创建的库项目的文件扩展名为“.lbi”，保存在，保存在“Library”文件夹内，文件夹内，“Library”文件夹是自动生成的，不能对其名称进行修改文件夹是自动生成的，不能对其名称进行修改 1 1、库概念的理解、库概念的理解 在主菜单中选择【窗口】／【资源】命令，打开【资在主菜单中选择【窗口】／【资源】命令，打开【资源】面板源】面板 【资源】面板将网页的元素分为【资源】面板将网页的元素分为9类，面板的左边垂直类，面板的左边垂直并排着（图像）、（颜色）、（并排着（图像）、（颜色）、（URLs）、（）、（Flash）、）、（（Shockwave）、（影片）、（脚本）、（模板）和（库））、（影片）、（脚本）、（模板）和（库）9个按钮，每一个按钮代表一大类网页元素。
面板的右边个按钮，每一个按钮代表一大类网页元素面板的右边是列表区，分为上栏和下栏，上栏是元素的预览图，下栏是列表区，分为上栏和下栏，上栏是元素的预览图，下栏是明细列表是明细列表 在【库】和【模板】分类的明细列表栏的下面依次排在【库】和【模板】分类的明细列表栏的下面依次排列着（插入）或（应用）、（刷新站点列表）、（新建）、列着（插入）或（应用）、（刷新站点列表）、（新建）、（编辑）和（删除）（编辑）和（删除）5个按钮 2 2、【资源】面板、【资源】面板 （（1）创建空白库项目创建空白库项目 在主菜单中选择【窗口】／【资源】命令，在主菜单中选择【窗口】／【资源】命令，打开【资源】面板在【资源】面板中单击打开【资源】面板在【资源】面板中单击 （库）按钮切换至【库】分类，单击面板右下角（库）按钮切换至【库】分类，单击面板右下角的的 （新建）按钮新建一个库，然后在列表框（新建）按钮新建一个库，然后在列表框中输入库的名称并加以确认中输入库的名称并加以确认 也可以在主菜单中选择【文件】／【新建】也可以在主菜单中选择【文件】／【新建】命令打开【新建文件】对话框，然后选择【常规命令打开【新建文件】对话框，然后选择【常规】／【基本页】／【库项目】命令来创建空白库】／【基本页】／【库项目】命令来创建空白库项目项目。
3 3、创建库项目、创建库项目 （（2））从已有的网页创建库项目从已有的网页创建库项目 首先打开一个已有的文档，从中选择要保存首先打开一个已有的文档，从中选择要保存为库项目的对象，如表格、图像等，然后在主菜为库项目的对象，如表格、图像等，然后在主菜单中选择【修改】／【库】／【增加对象到库】单中选择【修改】／【库】／【增加对象到库】命令或在【资源】面板【库】分类模式下，单击命令或在【资源】面板【库】分类模式下，单击右下角的右下角的 （新建）按钮，则该对象即被添加（新建）按钮，则该对象即被添加到库项目列表中，库项目名为系统默认的名称，到库项目列表中，库项目名为系统默认的名称，修改名称后按修改名称后按Enter键确认即可键确认即可 如果要删除库项目，只要先选中该如果要删除库项目，只要先选中该项目，然后单击【资源】面板右下角项目，然后单击【资源】面板右下角的的 （删除）按钮或按（删除）按钮或按Delete键即可 4 4、删除库项目、删除库项目 （二）编排库项目（二）编排库项目 在【资源】面板中选中库项目，再单击【资源】面在【资源】面板中选中库项目，再单击【资源】面板右下角的板右下角的 （编辑）按钮，或者双击库项目名称打开（编辑）按钮，或者双击库项目名称打开库项目进行添加内容。
这和平常制作网页是一样的，不库项目进行添加内容这和平常制作网页是一样的，不再详述 在库项目中使用在库项目中使用CSS样式时，尽量不要使用样式时，尽量不要使用“标签标签”类类型的型的CSS样式，因为样式，因为HTML标签类型的标签类型的CSS样式定义后，样式定义后，所有引用该样式表的文档中只要有该所有引用该样式表的文档中只要有该HTML标签，该样标签，该样式就要自动起作用，容易引起混乱式就要自动起作用，容易引起混乱 任务二任务二 制作模板制作模板 （一）创建模板（一）创建模板（二）插入库项目（二）插入库项目 （三）插入模板对象（三）插入模板对象 （一）创建模板（一）创建模板 需要掌握的内容主要有：需要掌握的内容主要有： 1、模板概念的理解、模板概念的理解 2、创建模板文件、创建模板文件 3、删除模板文件、删除模板文件 1 1、模板概念的理解、模板概念的理解 通常在一个站点的众多网页中，有许多网页的结通常在一个站点的众多网页中，有许多网页的结构是相同的，这时就没有必要一页一页地重复制作这构是相同的，这时就没有必要一页一页地重复制作这些网页。
在些网页在Dreamweaver中，可以将网页结构相同的中，可以将网页结构相同的网页做成库模板，然后通过模板创建网页当模板修网页做成库模板，然后通过模板创建网页当模板修改时，使用模板的网页也会自动进行更新如果说库改时，使用模板的网页也会自动进行更新如果说库项目解决的是网页内容相同的问题，那么模板解决的项目解决的是网页内容相同的问题，那么模板解决的恰恰是网页结构相同的问题恰恰是网页结构相同的问题 在在Dreamweaver中，创建的模板文件的文件扩展中，创建的模板文件的文件扩展名为名为“.dwt”，保存在，保存在“Templates”文件夹内，文件夹内，“Templates”文件夹是自动生成的，不能对其名称进行文件夹是自动生成的，不能对其名称进行修改 2 2、创建模板文件、创建模板文件 创建模板也有两种方法，即直接创建空白模板和将创建模板也有两种方法，即直接创建空白模板和将现有网页保存为模板现有网页保存为模板 （（1）直接创建空白模板）直接创建空白模板 在【资源】面板中切换到【模板】分类，然后单击在【资源】面板中切换到【模板】分类，然后单击【资源】面板右下角的【资源】面板右下角的 （新建）按钮来创建空白模板。
新建）按钮来创建空白模板 也可以在主菜单中选择【文件】／【新建】命令打也可以在主菜单中选择【文件】／【新建】命令打开【新建文件】对话框，然后选择【常规】／【模板页开【新建文件】对话框，然后选择【常规】／【模板页】／【】／【HTML模板】命令来创建空白模板模板】命令来创建空白模板 创建空白模板后，还需要打开模板文件，在其中添创建空白模板后，还需要打开模板文件，在其中添加网页元素和模板对象加网页元素和模板对象 （（2）将现有网页保存为模板）将现有网页保存为模板 首先打开一个已有内容的网页文档，根据实际需要在首先打开一个已有内容的网页文档，根据实际需要在网页中选择网页元素，并将其转换为模板对象，然后在网页中选择网页元素，并将其转换为模板对象，然后在主菜单中选择【文件】／【另存为模板】命令将网页保主菜单中选择【文件】／【另存为模板】命令将网页保存为模板存为模板 3 3、删除模板文件、删除模板文件 如果要删除模板，只要先选中该模如果要删除模板，只要先选中该模板，然后单击【资源】面板右下角的板，然后单击【资源】面板右下角的 按钮或按按钮或按Delete键即可。
键即可 需要掌握的内容主要有：需要掌握的内容主要有： 1、插入库项目、插入库项目 2、、修改库项目修改库项目 3、分离库项目、分离库项目（二）插入库项目（二）插入库项目 在【资源】面板中切换至库分类，选中库文件，单在【资源】面板中切换至库分类，选中库文件，单击面板底部的【插入】按钮或者单击鼠标右键，在弹出击面板底部的【插入】按钮或者单击鼠标右键，在弹出的快捷菜单中选择【插入】命令，将库项目插入到文档的快捷菜单中选择【插入】命令，将库项目插入到文档中1 1、插入库项目、插入库项目 库项目是可以在多个页面中重复使用的页面元素在使用库项库项目是可以在多个页面中重复使用的页面元素在使用库项目时，目时，Dreamweaver不是向网页中插入库项目，而是向库项目中插不是向网页中插入库项目，而是向库项目中插入一个链接，【属性】面板的入一个链接，【属性】面板的“Src /Library/top.lbi”可以清楚地说明可以清楚地说明这一点 在网页中引用的库项目无法直接进行修改，如果要修改库项目，在网页中引用的库项目无法直接进行修改，如果要修改库项目，需要直接打开库项目进行修改。
打开库项目的方式通常有两种：一需要直接打开库项目进行修改打开库项目的方式通常有两种：一种是在【资源】面板中打开库项目，另一种是在引用库项目的网页种是在【资源】面板中打开库项目，另一种是在引用库项目的网页中选中库项目，然后在【属性】面板中单击中选中库项目，然后在【属性】面板中单击 按钮，打开库项目按钮，打开库项目在库项目被打开修改且保存后，通常引用该库项目的网页会自动进在库项目被打开修改且保存后，通常引用该库项目的网页会自动进行更新如果没有进行自动更新，可以在菜单栏中选择【修改】／行更新如果没有进行自动更新，可以在菜单栏中选择【修改】／【库】／【更新当前页面】或【更新页面】命令进行更新库】／【更新当前页面】或【更新页面】命令进行更新 2 2、、修改库项目修改库项目 在【属性】面板中单击在【属性】面板中单击 按钮，可将库按钮，可将库项目的内容与库文件分离，分离后库项目的内容将自动项目的内容与库文件分离，分离后库项目的内容将自动变成网页中的内容，网页与库项目不再有关联变成网页中的内容，网页与库项目不再有关联。
3 3、、 分离库项目分离库项目 需要掌握的内容主要有：需要掌握的内容主要有： 1、、重复区域重复区域 2、可编辑区域、可编辑区域 3、、 重复表格重复表格 4、修改模板对象的名称、修改模板对象的名称（三）插入模板对象（三）插入模板对象 重复区域是指可以复制任意次数的指重复区域是指可以复制任意次数的指定区域重复区域不是可编辑区域，若要定区域重复区域不是可编辑区域，若要使重复区域中的内容可编辑，必须在重复使重复区域中的内容可编辑，必须在重复区域内插入可编辑区域或重复表格在一区域内插入可编辑区域或重复表格在一个重复区域内可以继续插入另一个重复区个重复区域内可以继续插入另一个重复区域整个被定义为重复区域的部分都可以域整个被定义为重复区域的部分都可以被重复使用被重复使用 1 1、、 重复区域重复区域 在主菜单中选择【插入】／【模板对象】／【重复在主菜单中选择【插入】／【模板对象】／【重复区域】命令，区域】命令，也可以在【插入】／【常用】／【模板】也可以在【插入】／【常用】／【模板】面板中单击面板中单击 （重复区域）按钮，打开【新建重复区（重复区域）按钮，打开【新建重复区域】对话框，将当前选定的区域设置为重复区域。
域】对话框，将当前选定的区域设置为重复区域 可编辑区域是指可以对其进行添加、修改和可编辑区域是指可以对其进行添加、修改和删除网页元素等操作的区域当创建了一个可编删除网页元素等操作的区域当创建了一个可编辑区域后，在该区域内不能再继续创建可编辑区辑区域后，在该区域内不能再继续创建可编辑区域 在主菜单中选择【插入】／【模板对象】／在主菜单中选择【插入】／【模板对象】／【可编辑区域】命令，也可在【插入】／【常用【可编辑区域】命令，也可在【插入】／【常用】／【模板】面板中单击】／【模板】面板中单击 （可编辑区域）按（可编辑区域）按钮，打开【新建可编辑区域】对话框，插入或者钮，打开【新建可编辑区域】对话框，插入或者将当前选定区域设为可编辑区域将当前选定区域设为可编辑区域 2 2、可编辑区域、可编辑区域 重复表格是指包含重复行的表格格式重复表格是指包含重复行的表格格式的可编辑区域，可以定义表格的属性并设的可编辑区域，可以定义表格的属性并设置哪些单元格可编辑置哪些单元格可编辑 重复表格可以被包含在重复区域内，重复表格可以被包含在重复区域内，但不能被包含在可编辑区域内。
另外，不但不能被包含在可编辑区域内另外，不能将选定的区域变成重复表格，只能插入能将选定的区域变成重复表格，只能插入重复表格重复表格 3 3、、重复表格重复表格 在主菜单中选择【插入】／【模板对象】／【重复在主菜单中选择【插入】／【模板对象】／【重复表格】命令，也可以在【插入】／【常用】／【模板】表格】命令，也可以在【插入】／【常用】／【模板】面板中单击面板中单击 （重复表格）按钮，打开【插入重复表（重复表格）按钮，打开【插入重复表格】对话框，在当前区域插入重复表格格】对话框，在当前区域插入重复表格 4 4、修改模板对象的名称、修改模板对象的名称 修改模板对象的名称可通过【属性】修改模板对象的名称可通过【属性】面板进行这时首先需要选择模板对象，面板进行这时首先需要选择模板对象，方法是单击模板对象的名称或者将鼠标光方法是单击模板对象的名称或者将鼠标光标定位在模板对象处，然后在工作区下面标定位在模板对象处，然后在工作区下面选择相应的标签，在选择模板对象时会显选择相应的标签，在选择模板对象时会显示其【属性】面板，在【属性】面板中修示其【属性】面板，在【属性】面板中修改模板对象名称即可。
改模板对象名称即可 任务三任务三 制作主页制作主页 需要掌握的内容主要有：需要掌握的内容主要有： 1、从模板新建网页、从模板新建网页 2、在已存在页面应用模板、在已存在页面应用模板 3、、更新由模板生成的页面更新由模板生成的页面 4、分离模板、分离模板 在主菜单中选择【文件】／【新建】在主菜单中选择【文件】／【新建】命令打开【新建文档】对话框，切换至【命令打开【新建文档】对话框，切换至【模板】选项卡，选择已创建的模板模板】选项卡，选择已创建的模板 也可以在【资源】面板中切换到模板也可以在【资源】面板中切换到模板分类，在模板列表用鼠标右键单击需要的分类，在模板列表用鼠标右键单击需要的模板，在弹出的快捷菜单中选择【从模板模板，在弹出的快捷菜单中选择【从模板新建】命令，基于模板的新文档即会在文新建】命令，基于模板的新文档即会在文档窗口中打开档窗口中打开1 1、从模板新建网页、从模板新建网页 首先打开要应用模板的网页文档，然后在主首先打开要应用模板的网页文档，然后在主菜单中选择【修改】／【模板】菜单中选择【修改】／【模板】/【套用模板到页【套用模板到页】命令，或在【资源】面板的模板列表框中选中】命令，或在【资源】面板的模板列表框中选中要应用的模板，再单击面板底部的【应用】按钮要应用的模板，再单击面板底部的【应用】按钮即可应用模板。
如果已打开的文档是一个空白文即可应用模板如果已打开的文档是一个空白文档，文档将直接应用模板，如果打开的文档是一档，文档将直接应用模板，如果打开的文档是一个有内容的文档，这时通常会打开一个【不一致个有内容的文档，这时通常会打开一个【不一致的区域名称】对话框，该对话框会提示读者将文的区域名称】对话框，该对话框会提示读者将文档中的已有内容放在模板的什么区域档中的已有内容放在模板的什么区域 2 2、在已存在页面应用模板、在已存在页面应用模板 3 3、更新由模板生成的页面、更新由模板生成的页面 通过模板生成的网页，在模板更新时通过模板生成的网页，在模板更新时可以对站点中所有应用同一模板的网页进可以对站点中所有应用同一模板的网页进行批量更新，这就要求在【从模板新建】行批量更新，这就要求在【从模板新建】对话框中勾选【当模板改变时更新页面】对话框中勾选【当模板改变时更新页面】复选框如果页面没有更新，可以在菜单复选框如果页面没有更新，可以在菜单栏中选择【修改】／【模板】／【更新当栏中选择【修改】／【模板】／【更新当前页】或【更新页面】命令对由模板生成前页】或【更新页面】命令对由模板生成的网页进行更新。
的网页进行更新 通过【从模板中分离】命令将使用模通过【从模板中分离】命令将使用模板的网页脱离模板，脱离模板后，模板中板的网页脱离模板，脱离模板后，模板中的内容将自动变成网页中的内容，网页与的内容将自动变成网页中的内容，网页与模板不再有关联模板不再有关联4 4、分离模板、分离模板 实训实训 制作制作““一翔学校一翔学校””网页模板网页模板 本项目主要介绍了使用库和模板制作本项目主要介绍了使用库和模板制作网页的基本方法，本实训将让读者进一步网页的基本方法，本实训将让读者进一步巩固所学的基本知识巩固所学的基本知识 要求：将素材文件复制到站点根文件要求：将素材文件复制到站点根文件夹下，然后创建网页夹下，然后创建网页制作“送孟浩然之广陵”网页 制作“送孟浩然之广陵”网页 项目小结项目小结 本项目以创建学校主页为例，介绍了库和模板的创建、本项目以创建学校主页为例，介绍了库和模板的创建、编辑和应用方法通过本项目的学习，读者应该掌握使用库编辑和应用方法通过本项目的学习，读者应该掌握使用库和模板创建网页的方法，特别是模板中可编辑区域、重复表和模板创建网页的方法，特别是模板中可编辑区域、重复表格和重复区域的创建和应用。
需要注意的是，单独使用模板格和重复区域的创建和应用需要注意的是，单独使用模板对象重复区域没有实际意义，只有将其与可编辑区域或重复对象重复区域没有实际意义，只有将其与可编辑区域或重复表格一起使用才能发挥其作用另外，在模板中，如果将可表格一起使用才能发挥其作用另外，在模板中，如果将可编辑区域、重复表格或重复区域的位置指定错了，可以将其编辑区域、重复表格或重复区域的位置指定错了，可以将其删除进行重新设置选取需要删除的模板对象，然后在菜单删除进行重新设置选取需要删除的模板对象，然后在菜单栏中选择【修改】／【模板】／【删除模板标记】命令或按栏中选择【修改】／【模板】／【删除模板标记】命令或按Delete键即可 9、静夜四无邻，荒居旧业贫静夜四无邻，荒居旧业贫2024/9/182024/9/18Wednesday, September 18, 202410、雨中黄叶树，灯下白头人雨中黄叶树，灯下白头人2024/9/182024/9/182024/9/189/18/2024 9:54:15 PM11、以我独沈久，愧君相见频以我独沈久，愧君相见频2024/9/182024/9/182024/9/18Sep-2418-Sep-2412、故人江海别，几度隔山川。
故人江海别，几度隔山川2024/9/182024/9/182024/9/18Wednesday, September 18, 202413、乍见翻疑梦，相悲各问年乍见翻疑梦，相悲各问年2024/9/182024/9/182024/9/182024/9/189/18/202414、他乡生白发，旧国见青山他乡生白发，旧国见青山18 九月九月 20242024/9/182024/9/182024/9/1815、比不了得就不比，得不到的就不要比不了得就不比，得不到的就不要九月九月 242024/9/182024/9/182024/9/189/18/202416、行动出成果，工作出财富行动出成果，工作出财富2024/9/182024/9/1818 September 202417、做前，能够环视四周；做时，你只能或者最好沿着以脚为起点的射线向前做前，能够环视四周；做时，你只能或者最好沿着以脚为起点的射线向前2024/9/182024/9/182024/9/182024/9/189、没有失败，只有暂时停止成功！没有失败，只有暂时停止成功！2024/9/182024/9/18Wednesday, September 18, 202410、很多事情努力了未必有结果，但是不努力却什么改变也没有。
很多事情努力了未必有结果，但是不努力却什么改变也没有2024/9/182024/9/182024/9/189/18/2024 9:54:15 PM11、成功就是日复一日那一点点小小努力的积累成功就是日复一日那一点点小小努力的积累2024/9/182024/9/182024/9/18Sep-2418-Sep-2412、世间成事，不求其绝对圆满，留一份不足，可得无限完美世间成事，不求其绝对圆满，留一份不足，可得无限完美2024/9/182024/9/182024/9/18Wednesday, September 18, 202413、不知香积寺，数里入云峰不知香积寺，数里入云峰2024/9/182024/9/182024/9/182024/9/189/18/202414、意志坚强的人能把世界放在手中像泥块一样任意揉捏意志坚强的人能把世界放在手中像泥块一样任意揉捏18 九月九月 20242024/9/182024/9/182024/9/1815、楚塞三湘接，荆门九派通楚塞三湘接，荆门九派通九月九月 242024/9/182024/9/182024/9/189/18/202416、少年十五二十时，步行夺得胡马骑。
少年十五二十时，步行夺得胡马骑2024/9/182024/9/1818 September 202417、空山新雨后，天气晚来秋空山新雨后，天气晚来秋2024/9/182024/9/182024/9/182024/9/189、杨柳散和风，青山澹吾虑杨柳散和风，青山澹吾虑2024/9/182024/9/18Wednesday, September 18, 202410、阅读一切好书如同和过去最杰出的人谈话阅读一切好书如同和过去最杰出的人谈话2024/9/182024/9/182024/9/189/18/2024 9:54:15 PM11、越是没有本领的就越加自命不凡越是没有本领的就越加自命不凡2024/9/182024/9/182024/9/18Sep-2418-Sep-2412、越是无能的人，越喜欢挑剔别人的错儿越是无能的人，越喜欢挑剔别人的错儿2024/9/182024/9/182024/9/18Wednesday, September 18, 202413、知人者智，自知者明胜人者有力，自胜者强知人者智，自知者明胜人者有力，自胜者强2024/9/182024/9/182024/9/182024/9/189/18/202414、意志坚强的人能把世界放在手中像泥块一样任意揉捏。
意志坚强的人能把世界放在手中像泥块一样任意揉捏18 九月九月 20242024/9/182024/9/182024/9/1815、最具挑战性的挑战莫过于提升自我最具挑战性的挑战莫过于提升自我九月九月 242024/9/182024/9/182024/9/189/18/202416、业余生活要有意义，不要越轨业余生活要有意义，不要越轨2024/9/182024/9/1818 September 202417、一个人即使已登上顶峰，也仍要自强不息一个人即使已登上顶峰，也仍要自强不息2024/9/182024/9/182024/9/182024/9/18MOMODA POWERPOINTLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id urna blandit, eleifend nulla ac, fringilla purus. Nulla iaculis tempor felis ut cursus. 感感 谢谢 您您 的的 下下 载载 观观 看看专家告诉 。