第 10 章 模板和扩展 reamweaver

1. 第10章 模板和扩展reamweaver 模板文件可以将较好的网页文档格式保留下来以备反复使用。Fireworks是一款集矢量图和位图编辑功能为一体的网页图像制作软件，它是“网页三剑客”之一，它可以与Dreamweaver软件的紧密结合进行网页设计。Dreamweaver的扩展功能使其如虎添翼，构成了一种强大的开发环境。 本章讲解的主要内容包括： 模板 Dreamweaver与Fireworks结合 使用Dreamweaver扩展

2. 10.1 模板 • 在Dreamweaver中，如果设计了一种比较好的布局，页面看上去很美观，那么可以把它生成相应的模板文件保留下来，需要的时候直接套用该模板，会迅速生成风格一致的页面。

3. 10.1.1 使用模板 • 如果需要设计很多页面，而且这些页面中有相同的内容（比如导航栏），可以通过模板来实现。具体步骤是，首先建立模板文件，在模板中添加共有内容并添加可编辑区域，然后根据这个模板文件建立多个网页，这些网页中都将自动具有模板中的内容。当模板的内容发生变化的时候，所有这些网页也会随之变化。 • 1．建立模板 • 2．编辑模板 • 3．使用模板 • 4．更新文件

4. 10.1.2 模板的重复表格和重复区域 • Dreamweaver 8模板中的重复区域和重复表格是类似的，重复区域和重复表格中的内容在模板中编辑，根据这样的模板建立网页文件后，这些内容将会根据用户的需要多次重复。本小节通过实例先尝试使用重复表格，然后再利用重复区域建立交替背景表格。 • 1．建立重复表格 • 2．使用重复表格 • 3．建立重复区域 • 4．建立交替背景表格

5. 10.1.3 模板的可选区域 • 如果模板中包含可选区域，那么编辑根据这个模板建立的网页文件时，可以手工设置可选区域是否显示。本小节将在模板中添加两个不同风格的导航栏，将其分别放在两个可选区域当中。根据这个模板建立网页时，可以任意选用其中一种导航栏。 • 1．添加可选区域 • 2．插入可编辑区域 • 3．使用模板的可选区域

6. 10.1.4 使用可编辑的可选区域 • 前面分别介绍了可选区域和可编辑区域，在大多数情况下，可选区域和可编辑区域是配套出现的，因此Dreamweaver 8提供了一种可编辑的可选区域，可以提高此类区域的制作效率。 • 1．创建可编辑可选区域 • 2．设置模板参数 • 3．保存并应用模板 • 4．利用参数控制模板的作用

7. 10.2 Dreamweaver与Fireworks结合 • Fireworks最独特的功能，在于既可以编辑网页图像，又可以制作一些网页上的动画，具有强大的矢量图和位图综合处理的功能。它可以与Dreamweaver软件的紧密结合，无须离开Dreamweaver软件环境就可以对Fireworks图像修剪、调整大小及进行二次编辑。 • 本节以一个网站主页的制作过程讲解Dreamweaver与Fireworks结合制作网页的方法。实例效果如图所示。

8. 10.2.1 用Fireworks制作网页切片 • 在Internet上冲浪时，会发现有些网页的整个背景是一幅完整的画，非常有个性，也很漂亮。其实这样的网页效果是利用Fireworks制作出网页图像，然后通过切片导出为HTML代码，最后再在Dreamweaver中编辑完成的。 • 1．用Fireworks制作网页图像 • 2．制作网页切片

9. 10.2.2 导出Fireworks HTML和切片 • 1．导出第三个切片 • 2．导出全部切片和HTML文档

10. 10.2.3 在Dreamweaver中编辑Fireworks HTML • 接下来要在Dreamweaver中编辑导出的网页文档，编辑的主要操作包括删除多余的切片图像、重新设置单元格的属性等。 • 1．将第一和第二个切片区域设置成可编辑单元格 • 2．将单元格设置成可自动伸展填充图像

11. 10.2.4 在Dreamweaver中直接启动、修改Fireworks文件 • 经过前面的操作，一个效果独特的网站首页基本制作完成，下面在网页右侧加上一个漂亮的网站标题。Fireworks是个图像处理软件，用它可以制作出漂亮的文字和图像。可以在Dreamweaver中直接启动Fireworks来对网页右侧的图像进行修改加上网站标题。

12. 10.3 使用Dreamweaver扩展 • 为了满足用户的不同使用需要，Dreamweaver提供了扩展功能，这些扩展能够提供各种各样的功能，其使用流程被集成到Dreamweaver的界面中。

13. 10.3.1 安装和使用扩展插件 • 利用为Dreamweaver扩展功能的第三方插件，可以把网页制作得更加美观。本小节介绍扩展插件的安装方法，以及扩展管理器的使用方法。 • 1．安装扩展插件 • 2．使用扩展插件CN Insert Greeting

14. 10.3.2 课堂实例――页面过渡 • Page Transition扩展插件用来为页面设置过渡效果，包括进入效果和离开效果。它提供了一系列预定义的过渡效果，使用时只需要进行选择就可以了。 • 1．安装Page Transition扩展插件 • 2．使用扩展

15. 10.3.3 课堂实例――模拟打字 • Typewriter扩展插件可以在页面上显示打字效果，这个扩展插件的类型是行为，可以从行为面板中调用，并且使用这个扩展插件时页面中必须至少有一个层。 • 1．安装Typewriter扩展插件 • 2．使用Typewriter扩展插件

16. 本章习题 上机练习

17. 练习1 课件吧网站教程网页模板 • 课件吧网站是一个以教程为主的网站，要经常制作大量的教程网页，为了提高制作效率，设计了一个教程模板，效果如图10-89所示。这个模板只设计了一个可编辑区，这个可编辑区是输入教程内容的区域。可在本教材配套光盘上找到这个模板文件（路径：\samples\Templates\ 10-lianxi001.dwt），请参考进行练习。

18. 练习2 Dreamweaver与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插件用来实现表格中行与行之间的背景色交替显示。