使用模板和库制作网页课件

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,*,利用模板和库制作网页,在进行大量的页面制作时，很多页面会用到相同的布局、图片和文字等元素。为了避免重复劳动，可以使用模板和库功能，将具有相同版面结构的页面制作成模板，将相同的页面元素制作成库项目，并存储在库文件中以便随时调用。,利用模板和库制作网页 在进行大量的页面制作时，很多页面,1,理解模板和库的作用。,学会将已有网页生成模板的操作方法。,掌握编辑模板和将模板生成新网页的操作方法。,掌握如何应用库项目制作网页。,学习目标,理解模板和库的作用。学习目标,2,什么是模板,模板是一种特殊类型的网页文档，只是被加入了特殊的模板信息，一般用来设计“固定的”页面布局并定义可编辑区域，只需从模板创建网页并在可编辑区域中进行编辑即可完成新页面的设计，大大提高了工作效率。简单地说，模板是一种用来批量创建具有相同结构及风格的网页的最重要手段；从模板创建的文档与该模板保持连接状态，修改模板就可以实现基于该模板设计的网页批量更新。,什么是模板模板是一种特殊类型的网页文档，只是被加入了特殊的模,3,模板创建,模板创建的方法有两种：直接创建模板或者将普通网页另存为模板。创建模板文件和创建一个普通页面的方法完全相同，不需要把页面的所有部分都制作完成，仅需要制作导航条、标题栏等各个页面的共有部分就可以了。,模板创建,4,模板的,可编辑区域,为了避免编辑时因误操作而导致模板中的元素发生变化，模板中的内容默认为不可编辑。模板创建者可以在模板的任何区域指定可编辑的区域，而且要使模板生效，至少包含一个可编辑区域，否则该模板没有任何实质意义。,创建可编辑区域的方法：,方法一：,单击“常用”选项卡中的“可编辑区域”按钮,方法二：,直接在模板空白处单击右键，选择“模板”下的“新建可编辑区域”选项,模板的可编辑区域为了避免编辑时因误操作而导致模板中的元素发生,5,模板的重复区域,是模板的一部分，设置该部分可以使模板用户必要时在基于模板的文档中添加或删除重复区域的副本。重复区域通常与表格一起使用，但也可以为其他页面元素定义重复区域。使用重复区域，可以通过重复特定项目来控制页面布局，例如目录项、说明布局或重复数据行。可以在模板中插入的重复区域的模板对象有两种：重复区域和重复表格。,模板用户可以使用重复区域在模板中重制任意次数的指定区域。要将重复区域中的内容设置为可编辑（如允许用户在基于模板的文档的表格单元格中输入文本），必须在重复区域中插入可编辑区域。,模板的重复区域是模板的一部分，设置该部分可以使模板用户必要时,6,保存模板,Dreamweaver CS3将模板文件以文件扩展名.dwt保存在站点本地根文件夹的Templates文件夹中。如果该文件夹在站点中不存在，Dreamweaver CS3中将在你保存新建模板时自动创建该文件夹。,运行菜单命令“文件/保存”，此时将出现提示信息，告诉我们文档还未建立可编辑区域，是否继续。单击“确定”按钮则打开“另存模板”对话框。在“另存为”文本框中输入“Template1”，这时在模板面板中出现新建的模板。,将文档另存为模板后，文档的大部分区域就被锁定。模板创作者在模板中插入可编辑区域或可编辑参数，从而指定在基于模板的文档中哪些区域可以编辑。,保存模板Dreamweaver CS3将模板文件以文件扩展名,7,应用模板创建网页文档,单击菜单【文件】【新建】，弹出“新建文档”对话框，在“新建文档”对话框中选择“模板中的页”标签，选择要使用的模板，然后单击【创建】按钮，这样将基于这个模板创建一个新的网页。,在基于模板创建的网页中，只有可编辑区域是可以进行编辑的，可编辑区域之外的区域均被锁定。,若要将文档从模板中分离，方法是执行,“修改”菜单下的“模板”中的“从模板中分离”命令，,这就使网页成为一个普通文档，不再与模板有关系,应用模板创建网页文档单击菜单【文件】【新建】，弹出“新建文,8,对模板进行修改后，可以将模板的修改应用于所有由模板生成的网页。操作步骤如下：,（1）打开模板文档，对模板进行必须的修改。,（2）单击菜单【修改】【模板】【更新页面】，弹出“更新页面”对话框。,（3）在对话框中设置相应参数，在“查看”下拉列表框中如果选择“整个站点”，则要选择更新哪个站点，如果选择“文件使用”，则要选择更新哪个模板文件。如果选中了“显示记录”复选框，则会在更新之后显示更新记录。,更新模板的变化,对模板进行修改后，可以将模板的修改应用于所有由模板生成的网页,9,库项目的应用,库是一种特殊的,Dreamweaver CS3文件，它其中包含可以放置到页面中的一组单个资源或资源副本。库中的这些资源称为库项目，它与模板本质区别在于：模板本质是一个独立的页面文件，它可以控制大的设计区域以及重复使用完整的布局，而库项目则只是页面中的某一段HTML代码。每当编辑某个库项目时，可以自动更新所有使用该项目的页面，使用库比模板有更大的灵活性。,库项目的应用,10,项目三 布局技术,库项目的应用,Dreamweaver CS3将库项目存储在每个站点的本地根文件夹下的Library文件夹中。使用库项目时，页面中的库是该项目的链接而不是项目本身。也就是说，Dreamweaver CS3在文档中插入的是该项目的HTML源代码副本，并添加一个包含对原始外部项目的引用的HTM L注释，库项目的自动更新就是通过这个外部引用来实现的。,项目三 布局技术库项目的应用 Drea,11,项目三 布局技术,库项目的应用,库项目的创建,库项目是整个网站范围内重新使用或经常更新的元素，每个,库项目作为一个单独的文件（扩展名为.lbi）保存在站点本地,根文件夹下Library文件夹中，其创建方法十分简单多样。,库项目的插入,把库项目插入到文档中，与模板类似能够批量生产风格的页面。,脱离库,文档中由库项目创建的元素，会随着库项目的变化而变化，,如果我们修改了某个库项目，那么由这个库项目创建的页面,元素也会自动更新。我们也可以让文档不受库项目的控制,以便可以自由地编辑。,项目三 布局技术库项目的应用库项目的创建,12,项目三 布局技术,资源的应用,在Dreamweaver CS3中，可以直接跟踪和预览站点中存储的资源，如图像、影片、颜色、脚本和链接，还可以直接拖动某个资源，将其插入到当前文档的某一页中。还可以通过各种来源获取资源，如在应用程序（Fireworks或Flash）中创建资源。,项目三 布局技术资源的应用 在Dreamwe,13,项目三 布局技术,资源面板左侧的各按钮意义,图像按钮：,在资源列表框中显示GIF、JPEG或PNG格式的图像文件。,颜色按钮：,在资源列表框中显示文档和样式表中使用的颜色，包括文本颜色、背景颜色、链接颜色。,URLS按钮：,在资源列表框中显示当前文档中使用的外部链接，包括FTP、Gopher、HTTP、HTTPS、JavaScript、电子邮件（mailto）、本地文件（file:/）链接。,Flash按钮：,在资源列表框中显示SWF（压缩的Flash文件），而不显示FLA文件（Flash源文件）。,Shockwave按钮：,在资源列表框中显示Adobe Shockwave版本的文件。,影片按钮：,在资源列表框中显示QuickTime或MPEG文件。,脚本按钮：,在资源列表框中显示JavaScript或VBScript文件。HTML文件中的脚本不出现在面板中。,模板按钮：,在资源列表框中显示多个页机上使用的主页面布局，修改模板时会自动修改附加到该模板的所有页面。,库按钮：,在资源列表框中显示多个页面中使用的设计元素。当修改一个库项目时，所有包含该项目的页面都将得到更新。,项目三 布局技术资源面板左侧的各按钮意义图像按钮：在资源列,14,小结,制作网页不仅追求美观、而且要提高制作效率，使用模板和库文件是提高网页制作效率的有效途径。,小结 制作网页不仅追求美观、而且要提高制作效率,15,