第10章 模板和扩展Dreamweaver

1、1,第10章模板和扩展reamweaver,模板文件可以将较好的网页文档格式保留下来以备反复使用。Fireworks是一款集矢量图和位图编辑功能为一体的网页图像制作软件，它是“网页三剑客”之一，它可以与Dreamweaver软件的紧密结合进行网页设计。Dreamweaver的扩展功能使其如虎添翼，构成了一种强大的开发环境。本章讲解的主要内容包括：模板Dreamweaver与Fireworks结合使用Dreamweaver扩展,2,10.1模板,在Dreamweaver中，如果设计了一种比较好的布局，页面看上去很美观，那么可以把它生成相应的模板文件保留下来，需要的时候直接套用该模板，会迅速生成风

2、格一致的页面。,3,10.1.1使用模板,如果需要设计很多页面，而且这些页面中有相同的内容（比如导航栏），可以通过模板来实现。具体步骤是，首先建立模板文件，在模板中添加共有内容并添加可编辑区域，然后根据这个模板文件建立多个网页，这些网页中都将自动具有模板中的内容。当模板的内容发生变化的时候，所有这些网页也会随之变化。1建立模板2编辑模板3使用模板4更新文件,4,10.1.2模板的重复表格和重复区域,Dreamweaver8模板中的重复区域和重复表格是类似的，重复区域和重复表格中的内容在模板中编辑，根据这样的模板建立网页文件后，这些内容将会根据用户的需要多次重复。本小节通过实例先尝试使用重复表格

3、，然后再利用重复区域建立交替背景表格。1建立重复表格2使用重复表格3建立重复区域4建立交替背景表格,5,10.1.3模板的可选区域,如果模板中包含可选区域，那么编辑根据这个模板建立的网页文件时，可以手工设置可选区域是否显示。本小节将在模板中添加两个不同风格的导航栏，将其分别放在两个可选区域当中。根据这个模板建立网页时，可以任意选用其中一种导航栏。1添加可选区域2插入可编辑区域3使用模板的可选区域,6,10.1.4使用可编辑的可选区域,前面分别介绍了可选区域和可编辑区域，在大多数情况下，可选区域和可编辑区域是配套出现的，因此Dreamweaver8提供了一种可编辑的可选区域，可以提高此类区域的制

4、作效率。1创建可编辑可选区域2设置模板参数3保存并应用模板4利用参数控制模板的作用,7,10.2Dreamweaver与Fireworks结合,Fireworks最独特的功能，在于既可以编辑网页图像，又可以制作一些网页上的动画，具有强大的矢量图和位图综合处理的功能。它可以与Dreamweaver软件的紧密结合，无须离开Dreamweaver软件环境就可以对Fireworks图像修剪、调整大小及进行二次编辑。本节以一个网站主页的制作过程讲解Dreamweaver与Fireworks结合制作网页的方法。实例效果如图所示。,8,10.2.1用Fireworks制作网页切片,在Internet上冲浪时

5、，会发现有些网页的整个背景是一幅完整的画，非常有个性，也很漂亮。其实这样的网页效果是利用Fireworks制作出网页图像，然后通过切片导出为HTML代码，最后再在Dreamweaver中编辑完成的。1用Fireworks制作网页图像2制作网页切片,9,10.2.2导出FireworksHTML和切片,1导出第三个切片2导出全部切片和HTML文档,10,10.2.3在Dreamweaver中编辑FireworksHTML,接下来要在Dreamweaver中编辑导出的网页文档，编辑的主要操作包括删除多余的切片图像、重新设置单元格的属性等。1将第一和第二个切片区域设置成可编辑单元格2将单元格设置成可

6、自动伸展填充图像,11,10.2.4在Dreamweaver中直接启动、修改Fireworks文件,经过前面的操作，一个效果独特的网站首页基本制作完成，下面在网页右侧加上一个漂亮的网站标题。Fireworks是个图像处理软件，用它可以制作出漂亮的文字和图像。可以在Dreamweaver中直接启动Fireworks来对网页右侧的图像进行修改加上网站标题。,12,10.3使用Dreamweaver扩展,为了满足用户的不同使用需要，Dreamweaver提供了扩展功能，这些扩展能够提供各种各样的功能，其使用流程被集成到Dreamweaver的界面中。,13,10.3.1安装和使用扩展插件,利用为Dr

7、eamweaver扩展功能的第三方插件，可以把网页制作得更加美观。本小节介绍扩展插件的安装方法，以及扩展管理器的使用方法。1安装扩展插件2使用扩展插件CNInsertGreeting,14,10.3.2课堂实例页面过渡,PageTransition扩展插件用来为页面设置过渡效果，包括进入效果和离开效果。它提供了一系列预定义的过渡效果，使用时只需要进行选择就可以了。1安装PageTransition扩展插件2使用扩展,15,10.3.3课堂实例模拟打字,Typewriter扩展插件可以在页面上显示打字效果，这个扩展插件的类型是行为，可以从行为面板中调用，并且使用这个扩展插件时页面中必须至少有一个

8、层。1安装Typewriter扩展插件2使用Typewriter扩展插件,16,本章习题上机练习,17,练习1课件吧网站教程网页模板,课件吧网站是一个以教程为主的网站，要经常制作大量的教程网页，为了提高制作效率，设计了一个教程模板，效果如图10-89所示。这个模板只设计了一个可编辑区，这个可编辑区是输入教程内容的区域。可在本教材配套光盘上找到这个模板文件（路径：samplesTemplates10-lianxi001.dwt），请参考进行练习。,18,练习2Dreamweaver与Fireworks结合制作网站首页,利用Dreamweaver与Fireworks结合制作一个漂亮的网站首页，效果如图10-90所示。本教材配套光盘上提供了在Fireworks中绘制的网站首页图片文件（lianxi002.png），首先对这个图片进行合理的切片并导出，然后在Dreamweaver打开并进行编辑。,图10-90网站首页效果,19,练习3利用扩展插件制作网页日历