第10章 模板和扩展Dreamweaver

1第10章模板和扩展reamweaver模板文件可以将较好的网页文档格式保留下来以备反复使用。Fireworks是一款集矢量图和位图编辑功能为一体的网页图像制作软件，它是“网页三剑客”之一，它可以与Dreamweaver软件的紧密结合进行网页设计。Dreamweaver的扩展功能使其如虎添翼，构成了一种强大的开发环境。本章讲解的主要内容包括：模板Dreamweaver与Fireworks结合使用Dreamweaver扩展210.1模板在Dreamweaver中，如果设计了一种比较好的布局，页面看上去很美观，那么可以把它生成相应的模板文件保留下来，需要的时候直接套用该模板，会迅速生成风格一致的页面。310.1.1使用模板如果需要设计很多页面，而且这些页面中有相同的内容（比如导航栏），可以通过模板来实现。具体步骤是，首先建立模板文件，在模板中添加共有内容并添加可编辑区域，然后根据这个模板文件建立多个网页，这些网页中都将自动具有模板中的内容。当模板的内容发生变化的时候，所有这些网页也会随之变化。1．建立模板2．编辑模板3．使用模板4．更新文件410.1.2模板的重复表格和重复区域Dreamweaver8模板中的重复区域和重复表格是类似的，重复区域和重复表格中的内容在模板中编辑，根据这样的模板建立网页文件后，这些内容将会根据用户的需要多次重复。本小节通过实例先尝试使用重复表格，然后再利用重复区域建立交替背景表格。1．建立重复表格2．使用重复表格3．建立重复区域4．建立交替背景表格510.1.3模板的可选区域如果模板中包含可选区域，那么编辑根据这个模板建立的网页文件时，可以手工设置可选区域是否显示。本小节将在模板中添加两个不同风格的导航栏，将其分别放在两个可选区域当中。根据这个模板建立网页时，可以任意选用其中一种导航栏。1．添加可选区域2．插入可编辑区域3．使用模板的可选区域610.1.4使用可编辑的可选区域前面分别介绍了可选区域和可编辑区域，在大多数情况下，可选区域和可编辑区域是配套出现的，因此Dreamweaver8提供了一种可编辑的可选区域，可以提高此类区域的制作效率。1．创建可编辑可选区域2．设置模板参数3．保存并应用模板4．利用参数控制模板的作用710.2Dreamweaver与Fireworks结合Fireworks最独特的功能，在于既可以编辑网页图像，又可以制作一些网页上的动画，具有强大的矢量图和位图综合处理的功能。它可以与Dreamweaver软件的紧密结合，无须离开Dreamweaver软件环境就可以对Fireworks图像修剪、调整大小及进行二次编辑。本节以一个网站主页的制作过程讲解Dreamweaver与Fireworks结合制作网页的方法。实例效果如图所示。810.2.1用Fireworks制作网页切片在Internet上冲浪时，会发现有些网页的整个背景是一幅完整的画，非常有个性，也很漂亮。其实这样的网页效果是利用Fireworks制作出网页图像，然后通过切片导出为HTML代码，最后再在Dreamweaver中编辑完成的。1．用Fireworks制作网页图像2．制作网页切片910.2.2导出FireworksHTML和切片1．导出第三个切片2．导出全部切片和HTML文档1010.2.3在Dreamweaver中编辑FireworksHTML接下来要在Dreamweaver中编辑导出的网页文档，编辑的主要操作包括删除多余的切片图像、重新设置单元格的属性等。1．将第一和第二个切片区域设置成可编辑单元格2．将单元格设置成可自动伸展填充图像1110.2.4在Dreamweaver中直接启动、修改Fireworks文件经过前面的操作，一个效果独特的网站首页基本制作完成，下面在网页右侧加上一个漂亮的网站标题。Fireworks是个图像处理软件，用它可以制作出漂亮的文字和图像。可以在Dreamweaver中直接启动Fireworks来对网页右侧的图像进行修改加上网站标题。1210.3使用Dreamweaver扩展为了满足用户的不同使用需要，Dreamweaver提供了扩展功能，这些扩展能够提供各种各样的功能，其使用流程被集成到Dreamweaver的界面中。1310.3.1安装和使用扩展插件利用为Dreamweaver扩展功能的第三方插件，可以把网页制作得更加美观。本小节介绍扩展插件的安装方法，以及扩展管理器的使用方法。1．安装扩展插件2．使用扩展插件CNInsertGreeting1410.3.2课堂实例――页面过渡PageTransition扩展插件用来为页面设置过渡效果，包括进入效果和离开效果。它提供了一系列预定义的过渡效果，使用时只需要进行选择就可以了。1．安装PageTransition扩展插件2．使用扩展1510.3.3课堂实例――模拟打字Typewriter扩展插件可以在页面上显示打字效果，这个扩展插件的类型是行为，可以从行为面板中调用，并且使用这个扩展插件时页面中必须至少有一个层。1．安装Typewriter扩展插件2．使用Typewriter扩展插件16本章习题上机练习17练习1课件吧网站教程网页模板课件吧网站是一个以教程为主的网站，要经常制作大量的教程网页，为了提高制作效率，设计了一个教程模板，效果如图10-89所示。这个模板只设计了一个可编辑区，这个可编辑区是输入教程内容的区域。可在本教材配套光盘上找到这个模板文件（路径：\samples\Templates\10-lianxi001.dwt），请参考进行练习。18练习2Dreamweaver与Fireworks结合制作网站首页利用Dreamweaver与Fireworks结合制作一个漂亮的网站首页，效果如图10-90所示。本教材配套光盘上提供了在Fireworks中绘制的网站首页图片文件（lianxi002.png），首先对这个图片进行合理的切片并导出，然后在Dreamweaver打开并进行编辑。图10-90网站首页效果19练习3利用扩展插件制作网页日历利用扩展插件calendar.mxp和alternate_table_rows.mxp在网页中创建一个日历，效果如图所示。其中calendar.mxp插件用来创建日历，alternate_table_rows.mxp插件用来实现表格中行与行之间的背景色交替显示。