05-网页设计(插多媒体元素和模板、库及资源管理)

上海理工大学计算机基础教研室网页设计(第5讲）学习目标插入多媒体元素模板、库和资源管理插入多媒体元素重点：如何使用Flash动画、Flash按钮、Flash元素和Applet小程序丰富网页。插入多媒体元素1.1网页的动感效果设计1.2插入Flash对象1.3插入其它多媒体元素1.4插入第三方插件1.5实战演练1.1网页的动感效果设计1.1.1案例综述本章案例主要是通过在网页中插入Flash动画和Applet插件等多媒体元素来美化网页，使网页看上去更加生动。1.1网页的动感效果设计1.1.2案例分析本页面的制作分五个步骤进行：页面基本制作Banner条的制作导航条的制作正文区的制作；扩展功能。1.1网页的动感效果设计1.1.3实现步骤1.页面基本制作创建站点→创建主页文件→设置标题2.Banner条的制作（透明背景的Flash)设置图片背景→插入Flash→设置背景透明参数3.导航条的制作插入Flash按钮1.1网页的动感效果设计1.1.3实现步骤4.正文区的制作用CSS样式格式化页面→插入Flash文本→插入图像查看器→插入JavaApplet小程序→插入背景音乐5.扩展功能扩展命令→扩展对象→扩展行为1.2插入Flash对象Flash动画的优点：文件小，网上传输快。在Dreamweaver8中可以插入多种Flash对象包括：Flash动画、Flash按钮、Flash文本、Flash视频、Flash元素（图像查看器）、Flash文档等。1.2插入Flash对象1.2.1插入Flash动画插入Flash动画的操作步骤：1.将插入点置于要插入Flash影片的位置。2.选择【插入】|【媒体】|【Flash】命令，或【常用/媒体】插入栏中Flash按钮。3.在弹出的对话框中选择一个swf文件。4.插入的Flash动画显示为一个灰色的方框，里面有Flash标志。5.单击【属性】面板上的【播放】按钮，可预览动画。1.2插入Flash对象1.2.1插入Flash动画设置Flash影片属性：1.【Flash】:影片的名称。2.【宽】和【高】：以像素为单位指定影片的宽度和高度。3.【文件】：指定指向Flash或Shockwave文件的路径。4.【源文件】指定指向Flash源文档(fla)的路径。5.【编辑】可以启动MacromediaFlashMX2004以更新fla文件。6.【重设大小】将选定影片返回到其初始大小。7.【循环】选中则连续播放。1.2插入Flash对象1.2.1插入Flash动画设置Flash影片属性：8.【自动播放】选中则在加载页面时自动播放。9.【垂直边距】和【水平边距】指定空白的像素值。10.【品质】控制抗失真度。11.【比例】确定影片如何适合在【宽】和【高】文本框中设置的尺寸。12.【对齐】确定影片在页面上的对齐方式。13.【背景颜色】指定影片区域的背景颜色。14.【参数】打开一个对话框，可在其中输入传递给影片的附加参数1.2插入Flash对象1.2.2插入Flash按钮操作步骤如下：1.将光标放到要插入Flash按钮对象的位置。2.选择【插入】|【媒体】|【Flash按钮】命令，或单击【插入】面板上【常用】|【媒体】|【Flash按钮】，打开【插入Flash按钮】对话框.3.设置完成后单击“确定”按钮。1.2插入Flash对象1.2.3插入Flash文本操作步骤如下：1.将光标放到要插入Flash文本对象的位置。2.选择【插入】|【媒体】|【Flash文本】命令，或单击【插入】栏上【常用】|【媒体】|【Flash文本】，打开【插入Flash文本】对话框.3.设置完成后单击“确定”按钮。1.2插入Flash对象1.2.4插入图像查看器操作步骤如下：1.将光标放到要插入Flash元素的位置。2.选择【插入】|【媒体】|【图像查看器】命令，打开【保存Flash元素】对话框。3.设置完成后单击“确定”按钮。1.2插入Flash对象1.2.5插入Flash视频操作步骤如下：1.选择【插入】｜【媒体】｜【Flash视频】命令，或单击【插入】栏的【常用】类别中的【媒体】下拉框，选择【FlashVideo】。2.设置完成后单击“确定”按钮。1.2插入Flash对象1.2.6插入FlashPaper文档操作步骤如下：1.将插入点放在页面上想要显示FlashPaper文档的位置，然后选择【插入】｜【媒体】｜【FlashPaper】命令，或单击【插入】栏的【常用】类别中的【媒体】下拉框，选择【FlashPager】。2.在【插入FlashPaper】对话框中，浏览到一个FlashPaper文档并将其选定。3.设置完成后单击“确定”按钮。1.3插入其它多媒体元素1.3.1插入JavaApplet小程序操作步骤如下：将光标放到要插入Applet小程序的位置。选择【插入】|【媒体】|【Applet】命令，或者单击【插入】面板上【常规】|【媒体】|【Applets】按钮，打开【选择文件】对话框，从对话框中选择扩展名为.class的文件。选中插入到页面中的Applet图标，打开属性面板，设置其属性。1.3插入其它多媒体元素1.3.2插入ActiveX控件操作步骤如下：将光标放到要插入ActiveX对象的位置。选择【插入】|【媒体】|【ActiveX】命令或者单击【插入】面板上【常规】|【媒体】|【ActiveX】按钮，即可在文档中插入ActiveX对象。选中ActiveX对象图标，打开它的属性面板，设置其属性。1.3插入其它多媒体元素1.3.3插入Shockwave影片操作步骤如下：将插入点置于要插入Shockwave影片的位置。选择【插入】|【媒体】|【Shockwave】命令，或【常用/媒体】插入栏中Shockwave图标。插入的Flash动画显示为一个灰色的方框，里面有Shockwave标志。选中此影片标记，在属性面板中设置其相关属性。1.4插入第三方插件1.4.1安装扩展插件利用插件可以增强Dreamweaver8的功能。在网站可以下载第三方插件，大部分是免费的。插入第三方插件的操作方法：1.在【文档】窗口中，将插入点置于要插入ActiveX控件的地方。2.选择【插入】栏|【常用】|【媒体】|【插件】图标，或【插入】|【媒体】|【插件】3.出现的图标会标记出页面中插件将在页面上出现的位置。1.4插入第三方插件(扩展插件管理器)要保存下载的扩展：1.单击MacromediaExchangeWeb站点上的扩展链接，开始下载。2.将扩展保存到扩展管理器应用程序文件夹的DownloadedExtensions文件夹中。3.执行下列操作之一来安装扩展：在扩展管理器中，选择“文件”“安装扩展”。浏览到已保存在DownloadedExtensions文件夹中的该文件，然后双击文件图标。安装扩展：1.用以下方法之一启动扩展管理器：双击Windows资源管理器(Windows)或Finder(Macintosh)中的扩展文件。在Windows中，选择“开始”菜单中的“Macromedia”“Macromedia扩展管理器”。在Macintosh中，双击Applications/MacromediaExtensionManager文件夹中的扩展管理器图标。在Dreamweaver中，选择“命令”“管理扩展”，或者在Flash或Fireworks中选择“帮助”“管理扩展功能”。1.4插入第三方插件(扩展插件管理器)1.4插入第三方插件(扩展插件管理器)2.在扩展管理器工具栏的“产品”弹出菜单中，选择您要在其中安装该扩展的Macromedia产品。3.在扩展管理器中，选择“文件”“安装扩展”。4.在出现的文件选择对话框中，选择一个扩展名为.mxp的扩展文件，然后选择“安装”(Windows)或“选择”(Macintosh)。5.仔细阅读Macromedia扩展免责声明和所有可能附带的第三方扩展许可。选择“接受”，继续安装；或者选择“拒绝”，取消安装。1.4插入第三方插件(扩展插件管理器)6.如果您已安装了该扩展的另一个版本，或者安装了具有相同名称的另一个扩展，扩展管理器会问您是否禁用已经安装的那个扩展。选择“是”会用新的扩展替换以前安装的扩展，或者选择“否”取消安装，保留现有的扩展。7.如果系统问您是否替换一个或多个现有文件，选择“是”或者“全是”将接受扩展中包括的一个或多个版本；或者选择“否”，则保留当前文件版本。如果您单击“取消”，则会取消安装，不安装或替换任何文件。1.4插入第三方插件(扩展插件管理器)1.4.2使用扩展插件Dreamweaver插件一般有三大类：对象，命令，行为对象：将出现在【插入】菜单或【插入】栏中。命令：将出现在【命令】菜单下。行为：在行为面板的动作列表中。1.5实战演练一、实战效果－－－旅游网1.5实战演练一、实战要求1.添加Flash动画。2.添加Applet小程序。3.添加背景音乐。模板、库的应用重点：模板、库的创建、编辑、应用、修改，站点的更新。难点：如何合理的设置和定义模板的可编辑区域。模板、库的应用2.1应用模板制作相似网页2.2模板的基本操作2.3库的应用2.4资源管理2.5实战演练2.1应用模板制作相似网页2.1.1案例综述本例通过模板设计出网页的整体风格、布局，当制作各个分页时，通过模板来创建，而当修改模板时，与之相链接的网页都将随之改变。2.1应用模板制作相似网页2.1.2案例分析在制作中，可利用模板来设计其相同部分，不同之处留为可编辑区域，待在具体制作网页时，再将具体内容填入可编辑区域。可编辑区域2.1应用模板制作相似网页2.1.3实现步骤1.制作模板1)基本元素的制作2)创建可编辑区域2.创建基于模板的网页文档3.修改模板并更新2.2模板的基本操作2.2.1模板的基本特点使用模板的好处在于：1.可以生成大批的风格相近的网页。2.一旦模板修改了，就修改了一批网页（自动更新）。2.2模板的基本操作2.2.2模板的创建与保存1.模板的创建方法方法一：通过菜单创建模板步骤1在文件面板中选择要创建模板的站点。步骤2选择【文件】｜【新建】｜【常规】｜模板页，选择需创建的模板类型。单击【确定】，创建了一个空白模板方法二：在【资源】面板创建模板步骤1在文件面板中选择要创建模板的站点。步骤2选择【窗口】｜【资源】命令，打开【资源】面板，选定面板左侧的【模板】按钮，单击“添加”按钮。方法三：利用现成网页创建模板步骤1打开欲做模板的网页。步骤2选择【文件】｜【另存为模板】命令。2.2模板的基本操作2、模板的保存新建的模板文件会保存在本地站点的Templates文件夹中。如果该Templates文件夹在站点中尙不存在，Dreamweaver8将在保存新建模板时自动创建该文件夹。模板文件的扩展名为.dwt。2.2模板的基本操作2.2.3创建可编辑区域可编辑模板区域控制基于模板的页面中的哪些区域可以编辑。设置可编辑区域，需要在制作模板的时候完成。相似网页完全一样部分（在模板中制作）不同部分（设为可编辑区域）设置可编辑区域的具体步骤如下：步骤1在已创建的模板文件中，编辑网页，其布局、制作方法与普通网页完全一致。步骤2将插入点放在想要插入可编辑区域的地方步骤3在插入栏中选择【模板】，然后单击【可编辑区域】按钮。步骤4在【新建可编辑区域】对话框中，输入该区域的名称,单击【确定】按钮2.2模板的基本操作要点提示：1.表格布局的模板定义可编辑区域时，可将整个表格或表格的某个单元格定义为可编辑区域，但是不能同时将多个单元格定义为一个单独的可编辑区域。2.层和层中的内容是不同的元素，当层设为可编辑区域时，在应用该模板编辑文档时，可改变层的位置和层中的内容。而将层的内容设为可编辑区域时，则只能改变层中的内容而不能改变层的位置。2.2模板的基本操作2.2.4创建基于模板的网页方法一：用菜单方式步骤1选择【文件】｜【新建】|【新建文档】|【模板】，选择新建的页面存放的站点及所用