Dreamweaver8和Flash8案例教程模板、命令、“资源”面板和外部插件

1、 【案例案例1818】“硬件超市硬件超市”模板和模板和“硬件超市硬件超市”网页网页 6.1 【案例案例1919】“时尚外设展示时尚外设展示”网页网页6.2【案例案例2020】“WordWord的基本操作的基本操作”网页网页6.36.1.1 学习目标学习目标 “硬件超市硬件超市”模板的显示效果如图模板的显示效果如图6-1-1所示，使用所示，使用“硬件超市硬件超市”模板制作的模板制作的“硬件超市硬件超市”网页的显示效果如图网页的显示效果如图6-1-2所所示。示。图图6-1-1 “硬件超市硬件超市”模板模板 图图6-1-2 “硬件超市硬件超市”网页网页 模板就是网页的样板，它有可编辑区模板就是网页的

2、样板，它有可编辑区和不可编辑区。不可编辑区的内容是不可和不可编辑区。不可编辑区的内容是不可以改变的，通常为标题栏、网页图标、框以改变的，通常为标题栏、网页图标、框架结构、链接文字和导航栏等。可编辑区架结构、链接文字和导航栏等。可编辑区的内容可以改变，通常为具体的文字和图的内容可以改变，通常为具体的文字和图像内容，例如，像内容，例如，“文字区文字区1”栏和栏和“图片区图片区1”栏。栏。 通常在一个网站中有成百上千个页面，通常在一个网站中有成百上千个页面，而且每个页面的布局也常常相同，尤其是而且每个页面的布局也常常相同，尤其是同一层次的页面，只有具体文字或图像内同一层次的页面，只有具体文字或图像内

3、容不同。将这样的网页定义为模板后，相容不同。将这样的网页定义为模板后，相同的部分都被锁定，只有一部分内容可以同的部分都被锁定，只有一部分内容可以编辑，避免了对无须改动部分的误操作。编辑，避免了对无须改动部分的误操作。6.1.2 操作过程操作过程1创建模板和可编辑区域创建模板和可编辑区域（1）创建新模板）创建新模板 单击单击“文件文件”“新建新建”菜单命令，菜单命令，弹出弹出“新建文档新建文档”对话框，选中对话框，选中“类别类别”栏内的栏内的“模板页模板页”选项，再选中选项，再选中“模板页模板页”栏内的栏内的“HTML模板模板”选项，如图选项，如图6-1-3所所示。然后单击示。然后单击“创建创建

4、”按钮，即可创建一按钮，即可创建一个新模板页。个新模板页。 编辑完成后，单击编辑完成后，单击“文件文件”“另存另存为模板为模板”菜单命令，弹出菜单命令，弹出“另存模板另存模板”对对话框，如图话框，如图6-1-5所示。在所示。在“另存为另存为”文本文本框中输入要保存的模板名称后，单击框中输入要保存的模板名称后，单击“保保存存”按钮，即可保存该模板。按钮，即可保存该模板。 单击单击“插入插入”（模板）栏中的（模板）栏中的“创建创建模板模板”按钮按钮 ，弹出，弹出“另存模板另存模板”对话对话框，如图框，如图6-1-5所示。然后在所示。然后在“站点站点”下拉下拉列表框内选择本地站点的名字，再在列表框内

5、选择本地站点的名字，再在“另另存为存为”文本框内输入模板的名字，最后单文本框内输入模板的名字，最后单击击“保存保存”按钮，即可完成模板的保存。按钮，即可完成模板的保存。（2）设置模板网页的可编辑区域）设置模板网页的可编辑区域 模板网页的编辑主要是设置可编辑区模板网页的编辑主要是设置可编辑区域，其方法是：单击域，其方法是：单击“插入插入”“模板对模板对象象”“可编辑区域可编辑区域”菜单命令，或单击菜单命令，或单击“插入插入”（常用）栏（常用）栏“模板模板”快捷菜单中快捷菜单中的的“可编辑区域可编辑区域”按钮按钮 ，弹出，弹出“新建新建可编辑区域可编辑区域”对话框，如图对话框，如图6-1-4所示。

6、在所示。在“名称名称”文本框中输入一个名称，单击文本框中输入一个名称，单击“确定确定”按钮，即可插入一个可编辑区域。按钮，即可插入一个可编辑区域。（3）将已有的）将已有的HTML文件创建为模文件创建为模板板在在Dreamweaver 8中打开一个网页。中打开一个网页。定义可编辑区域：将光标置于需要增加定义可编辑区域：将光标置于需要增加可编辑区域的地方（右下部分），单击可编辑区域的地方（右下部分），单击“插入插入”（常用）栏中的（常用）栏中的“模板模板”快捷菜快捷菜单中的单中的“可编辑区域可编辑区域”按钮，弹出按钮，弹出Dreamweaver提示信息：提示信息：“Dreamweaver将自动将此

7、文档转换为模板将自动将此文档转换为模板”。 单击单击“确定确定”按钮，弹出按钮，弹出“新建可编新建可编辑区域辑区域”对话框，如图对话框，如图6-1-4所示。在所示。在“名名称称”文本框中输入可编辑区域的名称，再文本框中输入可编辑区域的名称，再单击单击“确定确定”按钮，这样，就新建了一个按钮，这样，就新建了一个的可编辑区域。的可编辑区域。单击单击“文件文件”“另存为模板另存为模板”菜单命令，菜单命令，弹出弹出“另存模板另存模板”对话框，如图对话框，如图6-1-5所示。所示。然后，在然后，在“站点站点”下拉列表框内选择本地下拉列表框内选择本地站点的名字，再在站点的名字，再在“另存为另存为”文本框内

8、输文本框内输入模板的名字，最后单击入模板的名字，最后单击“保存保存”按钮，按钮，即可完成模板的保存。即可完成模板的保存。（1）使用模板创建新网页）使用模板创建新网页单击单击“文件文件”“新建新建”菜单命令，弹出菜单命令，弹出“新建文档新建文档”对话框，单击对话框，单击“模板模板”标签，标签，“新建文档新建文档”对话框变为对话框变为“从模板新建从模板新建”对话框。在对话框。在“模板用于模板用于”列表框中，选择列表框中，选择一个站点名称选项，在中间的列表框中选一个站点名称选项，在中间的列表框中选择要使用的模板名称，即可在择要使用的模板名称，即可在“预览预览”栏栏内看到模板的缩略图，如图内看到模板的

9、缩略图，如图6-1-6所示。所示。图图6-1-6 “从模板新建从模板新建”对话框对话框如果选中了如果选中了“当模板改变时更新页面当模板改变时更新页面”复选框，模板被修改后，所有应用该模板复选框，模板被修改后，所有应用该模板的页面将会自动更新。单击的页面将会自动更新。单击“创建创建”按钮，按钮，即可用选定模板制作网页。即可用选定模板制作网页。以后就可以在该网页的可编辑区域内插以后就可以在该网页的可编辑区域内插入相应的内容，单击入相应的内容，单击“文件文件”“保存保存”菜单命令，弹出菜单命令，弹出“另存为另存为”对话框，选择对话框，选择路径和文件名，再单击路径和文件名，再单击“保存保存”按钮，即按

10、钮，即可完成网页的制作。可完成网页的制作。 另外，单击另外，单击“修改修改”“模模板板”“应用模板到页应用模板到页”菜单命令，弹出菜单命令，弹出“选择模板选择模板”对话框，如图对话框，如图6-1-7所示。再所示。再选择新模板，单击选择新模板，单击“选定选定”按钮。按钮。图图6-1-7 “选择模板选择模板”对话框对话框（2）在页面内使用新模板）在页面内使用新模板在模板所在站点的文件夹内创建一个新的在模板所在站点的文件夹内创建一个新的HTML网页。网页。单击单击“窗口窗口”“资源资源”菜单命令，弹出菜单命令，弹出“资源资源”面板，单击该面板中的面板，单击该面板中的“模板模板”按钮按钮 ，再单击模板

11、文件的名称，此时的，再单击模板文件的名称，此时的“资源资源”面板如图面板如图6-1-8所示。所示。图图6-1-8 “资源资源”面板面板用鼠标拖曳用鼠标拖曳“正文正文”文件到页面中或单文件到页面中或单击击“资源资源”面板中的面板中的“应用应用”按钮，网页按钮，网页将自动套用将自动套用“正文正文”模板的内容。模板的内容。如果打开一个使用了模板的网页，但是如果打开一个使用了模板的网页，但是该网页使用的模板与新模板中可编辑区域该网页使用的模板与新模板中可编辑区域的名字不相同，则系统会弹出一个如图的名字不相同，则系统会弹出一个如图6-1-9所示的对话框，要求用户选择将页面的所示的对话框，要求用户选择将页

12、面的内容放到新模板的哪个可编辑区域中。单内容放到新模板的哪个可编辑区域中。单击可编辑区域的名称，再在下边的击可编辑区域的名称，再在下边的“将内将内容移到新区域容移到新区域”下拉列表框中选择可编辑下拉列表框中选择可编辑区域的名称，然后单击区域的名称，然后单击“确定确定”按钮，即按钮，即可完成替换。可完成替换。图图6-1-9 “不一致的区域名称不一致的区域名称”对话框对话框 6.2.1 学习目标学习目标 “时尚外设展示时尚外设展示”网页的显示效果如网页的显示效果如图图6-2-1所示。网页中的图像按照指定的顺所示。网页中的图像按照指定的顺序进行排列，在该页面中单击图像后，可序进行排列，在该页面中单击

13、图像后，可以链接到相应的浏览页面，如图以链接到相应的浏览页面，如图6-2-2所示。所示。在该页面中，会显示出该图像的原始图，在该页面中，会显示出该图像的原始图，图像名称以及到图像名称以及到“上一个上一个”、“首页首页”和和“下一个下一个”的链接。的链接。图图6-2-1 “时尚外设展示时尚外设展示”网页的显示效果网页的显示效果图图6-2-2 浏览页面的显示效果浏览页面的显示效果 有许多网站是以图片为主要内容的，有许多网站是以图片为主要内容的，这些网站中往往先显示图片的缩略图，浏这些网站中往往先显示图片的缩略图，浏览者如果感兴趣的话，单击缩略图就可以览者如果感兴趣的话，单击缩略图就可以浏览源图。当

14、一个网站的图片非常多时，浏览源图。当一个网站的图片非常多时，如果要分别制作每个页面，则工作量是很如果要分别制作每个页面，则工作量是很大的。创建相册命令可以自动创建这样的大的。创建相册命令可以自动创建这样的一系列页面，使网页制作变得非常简单。一系列页面，使网页制作变得非常简单。下面介绍如何创建相册网页。下面介绍如何创建相册网页。6.2.2 操作过程操作过程1应用应用Dreamweaver 8内置命令创内置命令创建相册建相册（1）打开）打开“创建网站相册创建网站相册”对话框对话框 单击单击“命令命令”“创建网站相册创建网站相册”菜菜单命令，弹出单命令，弹出“创建网站相册创建网站相册”对话框，对话框

15、，如图如图6-2-3所示（还没有进行相关的设置）。所示（还没有进行相关的设置）。（2）“创建网站相册创建网站相册”对话框中的对话框中的各选项的作用各选项的作用 “相册标题相册标题”文本框：输入相册的标题，文本框：输入相册的标题，该标题是必须填入的。该标题是必须填入的。 “副标信息副标信息”文本框：输入相册的副标文本框：输入相册的副标题信息。题信息。 “其他信息其他信息”文本框：输入相册的其他文本框：输入相册的其他说明信息。说明信息。 “源图像文件夹源图像文件夹”栏：选择源图像文件所栏：选择源图像文件所在的文件夹（名称为英文）。在的文件夹（名称为英文）。 “目标文件夹目标文件夹”栏：选择创建的相

16、册放栏：选择创建的相册放置的目录（名称为英文）。置的目录（名称为英文）。 “缩略图大小缩略图大小”下拉列表框：缩略图的下拉列表框：缩略图的大小。大小。 “显示文件名称显示文件名称”复选框：选中它后，将复选框：选中它后，将会在缩略图下方显示每个图片的文件名。利会在缩略图下方显示每个图片的文件名。利用这一功能，可以将图片文件名设为对该图用这一功能，可以将图片文件名设为对该图片的简单说明，这样，最后生成的页面就会片的简单说明，这样，最后生成的页面就会包含图片说明了。不过该软件对中文说明的包含图片说明了。不过该软件对中文说明的支持不是很好，最好使用英文说明。支持不是很好，最好使用英文说明。 “列列”文

17、本框：输入图像的列数。默认值文本框：输入图像的列数。默认值是是5，即每行显示，即每行显示5张缩略图。张缩略图。 “缩略图格式缩略图格式”下拉列表框：用来选择缩下拉列表框：用来选择缩略图的格式。略图的格式。Dreamweaver 8会自动产生会自动产生选定格式的缩略图。选定格式的缩略图。 “相片格式相片格式”下拉列表框：用来选择源下拉列表框：用来选择源图像显示的格式。源图像可能是各种格式图像显示的格式。源图像可能是各种格式的，的，Dreamweaver 8可以将它们转化为统可以将它们转化为统一的格式。一的格式。 “小数位数小数位数”文本框：用来输入图像缩放文本框：用来输入图像缩放的百分比。的百分

18、比。 “为每张相片建立导览页面为每张相片建立导览页面”复选框：复选框：选中该复选框后，选中该复选框后，Dreamweaver 8将为每将为每个图像生成单独的导航页。个图像生成单独的导航页。 单击单击“确定确定”按钮完成设置，按钮完成设置，Dreamweaver 8就开始自动生成相册。就开始自动生成相册。 单击其中任意一幅缩略图，都会显示单击其中任意一幅缩略图，都会显示相应的源图图像页面，如图相应的源图图像页面，如图6-2-2所示。页所示。页面最上端显示相册标题和该图片的文件名，面最上端显示相册标题和该图片的文件名，中间是导航栏，下边是原图图像。中间是导航栏，下边是原图图像。 单击单击“命令命令

19、”“设定配色方案设定配色方案”菜菜单命令，弹出单命令，弹出“设置配色方案命令设置配色方案命令”对话对话框，如图框，如图6-2-4所示。利用它可以方便地设所示。利用它可以方便地设置配色，并且可以即时预览配色效果。置配色，并且可以即时预览配色效果。 从从“背景背景”列表框中选择一种背景色，列表框中选择一种背景色，再从再从“文本和链接文本和链接”列表框中选择一种文列表框中选择一种文字和链接色彩，右侧可以预览配色效果。字和链接色彩，右侧可以预览配色效果。选择好后，单击选择好后，单击“确定确定”按钮，即可应用按钮，即可应用选取的配色方案。也可以先单击选取的配色方案。也可以先单击“应用应用”按钮，预览应用

20、后的效果。按钮，预览应用后的效果。6.3.1 学习目标学习目标 “Word的基本操作的基本操作”网页的显示效果网页的显示效果如图如图6-3-1所示。在该网页中，以网络流媒所示。在该网页中，以网络流媒体的形式显示了体的形式显示了Word软件的基本操作过程。软件的基本操作过程。图图6-3-1 “Word的基本操作的基本操作”网页网页 网络流媒体的原理是将原来连续不断网络流媒体的原理是将原来连续不断的音频和视频分割成一个个带有顺序标记的音频和视频分割成一个个带有顺序标记的数据包，将这些数据包通过网络进行传的数据包，将这些数据包通过网络进行传递，在接收的时候，再将这些数据包重新递，在接收的时候，再将这

21、些数据包重新按顺序组织起来播放。按顺序组织起来播放。 如果网络质量比较差，有些数据包收如果网络质量比较差，有些数据包收不到或者延缓了到达，它就跳过这些数据不到或者延缓了到达，它就跳过这些数据包不播放，以保证用户聆听和观看的内容包不播放，以保证用户聆听和观看的内容是基本连续的。是基本连续的。 利用利用Realmadia插件在网页中插入插件在网页中插入Real播放器，不仅可以在网页中插入声音和动播放器，不仅可以在网页中插入声音和动画，还可以插入一个简单的播放器，便于画，还可以插入一个简单的播放器，便于用户的操作。但是，如果浏览者想使用网用户的操作。但是，如果浏览者想使用网页中的页中的Real播放器

22、，其前提条件是使用的播放器，其前提条件是使用的计算机中已经安装了计算机中已经安装了Real播放器软件。播放器软件。6.3.2 操作过程操作过程1扩展管理器扩展管理器 使用使用“插件插件”可以轻松地向可以轻松地向Macromeida公司的软件中增加新的功能。公司的软件中增加新的功能。许多许多Macromedia的合作伙伴以及独立开发的合作伙伴以及独立开发人员创建了自定义服务器行为，以便满足人员创建了自定义服务器行为，以便满足特定的特定的Web开发需要。开发需要。 可以从可以从Macromedia Exchange for Dreamweaver Web 站点访问和下载这些自站点访问和下载这些自定

23、义服务器行为。定义服务器行为。 在在“Macromeida扩展管理器扩展管理器”中安装中安装插件后，其显示效果如图插件后，其显示效果如图6-3-2所示。所示。 “Macromeida扩展管理器扩展管理器”中包括标中包括标题栏、菜单栏、工具栏、插件栏和说明栏。题栏、菜单栏、工具栏、插件栏和说明栏。标题栏与菜单栏和其他软件的功能基本相标题栏与菜单栏和其他软件的功能基本相同。工具栏中包含插件的基本操作按钮和同。工具栏中包含插件的基本操作按钮和插件应用对象的下拉列表框。插件应用对象的下拉列表框。 “说明栏说明栏”中显示了选中插件的说明，中显示了选中插件的说明，不过绝大部分的说明都是英文的。插件栏不过绝大部分的说明都是英文的。插件栏中显示了已经安装的插件。中显示了已经安装的插件。Dreamweaver中的插件分为中的插件分为“命令命令”型和型和“插入插入”型两型两种。其中，种。其中，“命令命令”型插件显示为型插件显示为“命令命令”菜单中的一个菜单命令，菜单中的一个菜单命令，“插入插入”型插件型插件显示为显示为“插入插入”栏中的一个标签项，如图栏中的一个标签项，如图6-3-4所示。所示。图图6-3-4 插入栏中的插入栏中的RealAudio插件标签项插件标签项 安装安