第6章 模板、命令、“资源”面板和外部插件

null第6章 模板、命令、“资源”面板和外部插件第6章 模板、命令、“资源”面板和外部插件6.1 【案例18】“硬件超市”模板和“硬件超市”网页6.1 【案例18】“硬件超市”模板和“硬件超市”网页6.1.1 学习目标 “硬件超市”模板的显示效果如图6-1-1所示，使用“硬件超市”模板制作的“硬件超市”网页的显示效果如图6-1-2所示。null图6-1-1 “硬件超市”模板 null图6-1-2 “硬件超市”网页null 模板就是网页的样板，它有可编辑区和不可编辑区。不可编辑区的内容是不可以改变的，通常为标题栏、网页图标、框架结构、链接文字和导航栏等。可编辑区的内容可以改变，通常为具体的文字和图像内容，例如，“文字区1”栏和“图片区1”栏。null 通常在一个网站中有成百上千个页面，而且每个页面的布局也常常相同，尤其是同一层次的页面，只有具体文字或图像内容不同。将这样的网页定义为模板后，相同的部分都被锁定，只有一部分内容可以编辑，避免了对无须改动部分的误操作。 6.1.2 操作过程 6.1.3 相关知识6.1.3 相关知识1．创建模板和可编辑区域 （1）创建新模板 单击“文件”→“新建”菜单命令，弹出“新建文档”对话框，选中“类别”栏内的“模板页”选项，再选中“模板页”栏内的“HTML模板”选项，如图6-1-3所示。然后单击“创建”按钮，即可创建一个新模板页。null 编辑完成后，单击“文件”→“另存为模板”菜单命令，弹出“另存模板”对话框，如图6-1-5所示。在“另存为”文本框中输入要保存的模板名称后，单击“保存”按钮，即可保存该模板。null 单击“插入”（模板）栏中的“创建模板”按钮 ，弹出“另存模板”对话框，如图6-1-5所示。然后在“站点”下拉列表框内选择本地站点的名字，再在“另存为”文本框内输入模板的名字，最后单击“保存”按钮，即可完成模板的保存。null（2）设置模板网页的可编辑区域 模板网页的编辑主要是设置可编辑区域，其 方法 快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载 是：单击“插入”→“模板对象”→“可编辑区域”菜单命令，或单击“插入”（常用）栏“模板”快捷菜单中的“可编辑区域”按钮 ，弹出“新建可编辑区域”对话框，如图6-1-4所示。在“名称”文本框中输入一个名称，单击“确定”按钮，即可插入一个可编辑区域。null（3）将已有的HTML文件创建为模板 在Dreamweaver 8中打开一个网页。 定义可编辑区域：将光标置于需要增加可编辑区域的地方（右下部分），单击“插入”（常用）栏中的“模板”快捷菜单中的“可编辑区域”按钮，弹出Dreamweaver提示信息：“Dreamweaver将自动将此文档转换为模板”。null 单击“确定”按钮，弹出“新建可编辑区域”对话框，如图6-1-4所示。在“名称”文本框中输入可编辑区域的名称，再单击“确定”按钮，这样，就新建了一个的可编辑区域。 null单击“文件”→“另存为模板”菜单命令，弹出“另存模板”对话框，如图6-1-5所示。然后，在“站点”下拉列表框内选择本地站点的名字，再在“另存为”文本框内输入模板的名字，最后单击“保存”按钮，即可完成模板的保存。2．使用模板制作网页2．使用模板制作网页（1）使用模板创建新网页 单击“文件”→“新建”菜单命令，弹出“新建文档”对话框，单击“模板”标签，“新建文档”对话框变为“从模板新建”对话框。在“模板用于”列表框中，选择一个站点名称选项，在中间的列表框中选择要使用的模板名称，即可在“预览”栏内看到模板的缩略图，如图6-1-6所示。null图6-1-6 “从模板新建”对话框null如果选中了“当模板改变时更新页面”复选框，模板被修改后，所有应用该模板的页面将会自动更新。单击“创建”按钮，即可用选定模板制作网页。 以后就可以在该网页的可编辑区域内插入相应的内容，单击“文件”→“保存”菜单命令，弹出“另存为”对话框，选择路径和文件名，再单击“保存”按钮，即可完成网页的制作。null 另外，单击“修改”→“模板”→“应用模板到页”菜单命令，弹出“选择模板”对话框，如图6-1-7所示。再选择新模板，单击“选定”按钮。null图6-1-7 “选择模板”对话框null（2）在页面内使用新模板 在模板所在站点的文件夹内创建一个新的HTML网页。 单击“窗口”→“资源”菜单命令，弹出“资源”面板，单击该面板中的“模板”按钮 ，再单击模板文件的名称，此时的“资源”面板如图6-1-8所示。null图6-1-8 “资源”面板null用鼠标拖曳“正文”文件到页面中或单击“资源”面板中的“应用”按钮，网页将自动套用“正文”模板的内容。 null如果打开一个使用了模板的网页，但是该网页使用的模板与新模板中可编辑区域的名字不相同，则系统会弹出一个如图6-1-9所示的对话框，要求用户选择将页面的内容放到新模板的哪个可编辑区域中。单击可编辑区域的名称，再在下边的“将内容移到新区域”下拉列表框中选择可编辑区域的名称，然后单击“确定”按钮，即可完成替换。 null图6-1-9 “不一致的区域名称”对话框 6.2 【案例19】“时尚外设展示”网页 6.2 【案例19】“时尚外设展示”网页 6.2.1 学习目标 “时尚外设展示”网页的显示效果如图6-2-1所示。网页中的图像按照指定的顺序进行排列，在该页面中单击图像后，可以链接到相应的浏览页面，如图6-2-2所示。在该页面中，会显示出该图像的原始图，图像名称以及到“上一个”、“首页”和“下一个”的链接。null图6-2-1 “时尚外设展示”网页的显示效果null图6-2-2 浏览页面的显示效果 null 有许多网站是以图片为主要内容的，这些网站中往往先显示图片的缩略图，浏览者如果感兴趣的话，单击缩略图就可以浏览源图。当一个网站的图片非常多时，如果要分别制作每个页面，则工作量是很大的。创建相册命令可以自动创建这样的一系列页面，使网页制作变得非常简单。下面介绍如何创建相册网页。 6.2.2 操作过程 6.2.3 相关知识6.2.3 相关知识1．应用Dreamweaver 8内置命令创建相册 （1）打开“创建网站相册”对话框 单击“命令”→“创建网站相册”菜单命令，弹出“创建网站相册”对话框，如图6-2-3所示（还没有进行相关的设置）。null（2）“创建网站相册”对话框中的各选项的作用  “相册标题”文本框：输入相册的标题，该标题是必须填入的。  “副标信息”文本框：输入相册的副标题信息。  “其他信息”文本框：输入相册的其他说明信息。 null “源图像文件夹”栏：选择源图像文件所在的文件夹（名称为英文）。  “目标文件夹”栏：选择创建的相册放置的目录（名称为英文）。  “缩略图大小”下拉列表框：缩略图的大小。 null  “显示文件名称”复选框：选中它后，将会在缩略图下方显示每个图片的文件名。利用这一功能，可以将图片文件名设为对该图片的简单说明，这样，最后生成的页面就会包含图片说明了。不过该软件对中文说明的支持不是很好，最好使用英文说明。  “列”文本框：输入图像的列数。默认值是5，即每行显示5张缩略图。 null “缩略图格式”下拉列表框：用来选择缩略图的格式。Dreamweaver 8会自动产生选定格式的缩略图。  “相片格式”下拉列表框：用来选择源图像显示的格式。源图像可能是各种格式的，Dreamweaver 8可以将它们转化为统一的格式。null “小数位数”文本框：用来输入图像缩放的百分比。  “为每张相片建立导览页面”复选框：选中该复选框后，Dreamweaver 8将为每个图像生成单独的导航页。 null 单击“确定”按钮完成设置，Dreamweaver 8就开始自动生成相册。 单击其中任意一幅缩略图，都会显示相应的源图图像页面，如图6-2-2所示。页面最上端显示相册标题和该图片的文件名，中间是导航栏，下边是原图图像。2．设置配色 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 2．设置配色方案 单击“命令”→“设定配色方案”菜单命令，弹出“设置配色方案命令”对话框，如图6-2-4所示。利用它可以方便地设置配色，并且可以即时预览配色效果。null 从“背景”列表框中选择一种背景色，再从“文本和链接”列表框中选择一种文字和链接色彩，右侧可以预览配色效果。选择好后，单击“确定”按钮，即可应用选取的配色方案。也可以先单击“应用”按钮，预览应用后的效果。6.3 【案例20】“Word的基本操作”网页6.3 【案例20】“Word的基本操作”网页6.3.1 学习目标 “Word的基本操作”网页的显示效果如图6-3-1所示。在该网页中，以网络流媒体的形式显示了Word软件的基本操作过程。null图6-3-1 “Word的基本操作”网页null 网络流媒体的原理是将原来连续不断的音频和视频分割成一个个带有顺序标记的数据包，将这些数据包通过网络进行传递，在接收的时候，再将这些数据包重新按顺序组织起来播放。null 如果网络质量比较差，有些数据包收不到或者延缓了到达，它就跳过这些数据包不播放，以保证用户聆听和观看的内容是基本连续的。null 利用Realmadia插件在网页中插入Real播放器，不仅可以在网页中插入声音和动画，还可以插入一个简单的播放器，便于用户的操作。但是，如果浏览者想使用网页中的Real播放器，其前提条件是使用的计算机中已经安装了Real播放器软件。 6.3.2 操作过程 6.3.3 相关知识6.3.3 相关知识1．扩展管理器 使用“插件”可以轻松地向Macromeida公司的软件中增加新的功能。许多Macromedia的合作伙伴以及独立开发人员创建了自定义服务器行为，以便满足特定的Web开发需要。null 可以从Macromedia Exchange for Dreamweaver Web 站点访问和下载这些自定义服务器行为。 在“Macromeida扩展管理器”中安装插件后，其显示效果如图6-3-2所示。 null “Macromeida扩展管理器”中包括标题栏、菜单栏、工具栏、插件栏和说明栏。标题栏与菜单栏和其他软件的功能基本相同。工具栏中包含插件的基本操作按钮和插件应用对象的下拉列表框。null “说明栏”中显示了选中插件的说明，不过绝大部分的说明都是英文的。插件栏中显示了已经安装的插件。Dreamweaver中的插件分为“命令”型和“插入”型两种。其中，“命令”型插件显示为“命令”菜单中的一个菜单命令，“插入”型插件显示为“插入”栏中的一个标签项，如图6-3-4所示。null图6-3-4 插入栏中的RealAudio插件标签项2．“RealAudio”选项卡中各按钮的作用2．“RealAudio”选项卡中各按钮的作用 安装RealAudio插件后，会在“插入”栏中增加一个名为“RealAudio”的标签项，如图6-3-4所示。其中各按钮的作用如下所述。nullRealAudio按钮 ：单击该按钮，可以弹出“选择文件”对话框，在该对话框中选择一个音频格式的文件后，单击“确定”按钮，即可在网页中插入RealAudio格式的背景音乐。nullRealMedia Control按钮 ：单击该按钮，可以在网页中插入RealMedia控制器，用来控制网页中的Real视频文件和声音文件。nullRealVedio按钮 ：单击该按钮后，在弹出的“选择文件”对话框中选择一个视频格式的文件，即可在网页中插入Real格式的视频文件。nullSMIL按钮 ：单击该按钮，在弹出的“选择文件”对话框中选择一个Real音频或者视频格式的文件，即可在网页中插入一个在线播放的窗口（使用同步多媒体语言）。nullRealAbout按钮 ：单击该按钮，可以弹出“About RealSystem Extensions”网页，其中包括RealSystem的介绍文档和帮助信息，如图6-3-5所示。null图6-3-5 About RealSystem Extensions网页文档