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

上海理工大学计算机基础教研室,网页设计(第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实现步骤,页面基本制作创建站点创建主页文件设置标题Banner条的制作（透明背景的Flash)设置图片背景插入Flash设置背景透明参数导航条的制作插入Flash按钮,1.1网页的动感效果设计,1.1.3实现步骤,正文区的制作用CSS样式格式化页面插入Flash文本插入图像查看器插入JavaApplet小程序插入背景音乐扩展功能扩展命令扩展对象扩展行为,1.2插入Flash对象,Flash动画的优点：文件小，网上传输快。在Dreamweaver8中可以插入多种Flash对象包括：Flash动画、Flash按钮、Flash文本、Flash视频、Flash元素（图像查看器）、Flash文档等。,1.2插入Flash对象,1.2.1插入Flash动画插入Flash动画的操作步骤：将插入点置于要插入Flash影片的位置。选择【插入】|【媒体】|【Flash】命令，或【常用/媒体】插入栏中Flash按钮。在弹出的对话框中选择一个swf文件。插入的Flash动画显示为一个灰色的方框，里面有Flash标志。单击【属性】面板上的【播放】按钮，可预览动画。,1.2插入Flash对象,1.2.1插入Flash动画设置Flash影片属性：【Flash】:影片的名称。【宽】和【高】：以像素为单位指定影片的宽度和高度。【文件】：指定指向Flash或Shockwave文件的路径。【源文件】指定指向Flash源文档(fla)的路径。【编辑】可以启动MacromediaFlashMX2004以更新fla文件。【重设大小】将选定影片返回到其初始大小。【循环】选中则连续播放。,1.2插入Flash对象,1.2.1插入Flash动画设置Flash影片属性：【自动播放】选中则在加载页面时自动播放。【垂直边距】和【水平边距】指定空白的像素值。【品质】控制抗失真度。【比例】确定影片如何适合在【宽】和【高】文本框中设置的尺寸。【对齐】确定影片在页面上的对齐方式。【背景颜色】指定影片区域的背景颜色。【参数】打开一个对话框，可在其中输入传递给影片的附加参数,1.2插入Flash对象,1.2.2插入Flash按钮,操作步骤如下：将光标放到要插入Flash按钮对象的位置。选择【插入】|【媒体】|【Flash按钮】命令，或单击【插入】面板上【常用】|【媒体】|【Flash按钮】，打开【插入Flash按钮】对话框.设置完成后单击“确定”按钮。,1.2插入Flash对象,1.2.3插入Flash文本,操作步骤如下：将光标放到要插入Flash文本对象的位置。选择【插入】|【媒体】|【Flash文本】命令，或单击【插入】栏上【常用】|【媒体】|【Flash文本】，打开【插入Flash文本】对话框.设置完成后单击“确定”按钮。,1.2插入Flash对象,1.2.4插入图像查看器,操作步骤如下：将光标放到要插入Flash元素的位置。选择【插入】|【媒体】|【图像查看器】命令，打开【保存Flash元素】对话框。设置完成后单击“确定”按钮。,1.2插入Flash对象,1.2.5插入Flash视频,操作步骤如下：选择【插入】【媒体】【Flash视频】命令，或单击【插入】栏的【常用】类别中的【媒体】下拉框，选择【FlashVideo】。设置完成后单击“确定”按钮。,1.2插入Flash对象,1.2.6插入FlashPaper文档,操作步骤如下：将插入点放在页面上想要显示FlashPaper文档的位置，然后选择【插入】【媒体】【FlashPaper】命令，或单击【插入】栏的【常用】类别中的【媒体】下拉框，选择【FlashPager】。在【插入FlashPaper】对话框中，浏览到一个FlashPaper文档并将其选定。设置完成后单击“确定”按钮。,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的功能。在网站可以下载第三方插件，大部分是免费的。插入第三方插件的操作方法：在【文档】窗口中，将插入点置于要插入ActiveX控件的地方。选择【插入】栏|【常用】|【媒体】|【插件】图标，或【插入】|【媒体】|【插件】出现的图标会标记出页面中插件将在页面上出现的位置。,1.4插入第三方插件(扩展插件管理器),要保存下载的扩展：单击MacromediaExchangeWeb站点上的扩展链接，开始下载。将扩展保存到扩展管理器应用程序文件夹的DownloadedExtensions文件夹中。执行下列操作之一来安装扩展：在扩展管理器中，选择“文件”“安装扩展”。浏览到已保存在DownloadedExtensions文件夹中的该文件，然后双击文件图标。,安装扩展：用以下方法之一启动扩展管理器：双击Windows资源管理器(Windows)或Finder(Macintosh)中的扩展文件。在Windows中，选择“开始”菜单中的“Macromedia”“Macromedia扩展管理器”。在Macintosh中，双击Applications/MacromediaExtensionManager文件夹中的扩展管理器图标。在Dreamweaver中，选择“命令”“管理扩展”，或者在Flash或Fireworks中选择“帮助”“管理扩展功能”。,1.4插入第三方插件(扩展插件管理器),1.4插入第三方插件(扩展插件管理器),在扩展管理器工具栏的“产品”弹出菜单中，选择您要在其中安装该扩展的Macromedia产品。在扩展管理器中，选择“文件”“安装扩展”。在出现的文件选择对话框中，选择一个扩展名为.mxp的扩展文件，然后选择“安装”(Windows)或“选择”(Macintosh)。仔细阅读Macromedia扩展免责声明和所有可能附带的第三方扩展许可。选择“接受”，继续安装；或者选择“拒绝”，取消安装。,1.4插入第三方插件(扩展插件管理器),如果您已安装了该扩展的另一个版本，或者安装了具有相同名称的另一个扩展，扩展管理器会问您是否禁用已经安装的那个扩展。选择“是”会用新的扩展替换以前安装的扩展，或者选择“否”取消安装，保留现有的扩展。如果系统问您是否替换一个或多个现有文件，选择“是”或者“全是”将接受扩展中包括的一个或多个版本；或者选择“否”，则保留当前文件版本。如果您单击“取消”，则会取消安装，不安装或替换任何文件。,1.4插入第三方插件(扩展插件管理器),1.4.2使用扩展插件Dreamweaver插件一般有三大类：对象，命令，行为对象：将出现在【插入】菜单或【插入】栏中。命令：将出现在【命令】菜单下。行为：在行为面板的动作列表中。,1.5实战演练,一、实战效果旅游网,1.5实战演练,一、实战要求添加Flash动画。添加Applet小程序。添加背景音乐。,模板、库的应用,重点：模板、库的创建、编辑、应用、修改，站点的更新。难点：如何合理的设置和定义模板的可编辑区域。,模板、库的应用,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实现步骤制作模板基本元素的制作创建可编辑区域创建基于模板的网页文档修改模板并更新,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选择【文件】【新建】|【新建文档】|【模板】，选择新建的页面存放的站点及所用模板名称。步骤2选中【当模板改变时更新页面】的复选框时，当模板被修改后，用此模板创建的网页也会被修改。步骤3单击【创建】按钮，此时在网页编辑窗口建立了一个由模板生成的网页，设计者可在可编辑区域输入相关内容。,2.2模板的基本操作,2.2.4创建基于模板的网页方法二：用资源面板步骤1首先新建页面，通过【窗口】菜单打开资源面板。步骤2选择面板中的模板资源。步骤3选中欲使用的模板，单击【应用】按钮；或将选中的模板拖到编辑窗口。应用模板文档在右上角会标明模板名称。步骤4在应用了模板的文档的可编辑区域内编辑相关内容。,2.2模板的基本操作,2.2模板的基本操作,2.2.5更新模板及页面修改模板操作步骤：步骤1选择【窗口】【资源】命令，打开资源面板，切换到【模板】资源。步骤2选中要修改的模板后右击鼠标，在快捷菜单中选择【编辑】命令，或双击该模板，便可打开要修改的模板.步骤3在快捷菜单中选择【新建可编辑区域】【删除模板标记】以添加或删除可编辑区域。步骤4模板修改完成后，选择【文件】【保存】命令，保存模板。,2.2模板的基本操作,更新页面：保存模板时，Dreamweaver8会询问它是否更新所有附着到该模板的网页。也可以使用【修改】【模板】【更新页面】命令。或【模板】资源窗口右上角的按钮，选择【更新站点】命令，Dreamweaver在该模板所在的站点中更新基于模板的所有网页文档。,2.3库的应用,库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素（如图像、文本和其他对象）的方法。这些元素称为库项目使用库的意义：如果使用了库，就可以通过改动库更新所有采用库的网页，不用一个一个的修改网页元素或者重新制作网页。使用库比使用模板，有更大的灵活性。,2.3库的应用,2.3.1创建库项目创建库项目的方式有两种：选定内容创建为库项目。创建一个空白库项目,2.3库的应用,选定内容创建为库项目操作方法：步骤1选择【窗口】【资源】命令，出现“资源”面板，选择面板左侧的“库”类别。步骤2在“文档”窗口中，选择文档要另存为库项目的内容。步骤3将选定内容拖到“资源”面板的“库”类别中，或者单击“资源”面板的“库”类别底部的“新建库项目”按钮，一个库项目被创建，此时网页文档下方的属性检查器也变为“库项目”检查器。步骤4为新的库项目输入一个名称。,2.3库的应用,创建一个空白库项目操作方法：步骤1选择【窗口】【资源】【库】步骤2在“资源”面板中，单击“库”类别底部的“新建库项目”按钮。步骤3一个新的库项目被添加到面板上的列表中。步骤4为新的库项目输入一个名称。步骤5双击该库项目，在文档窗口进行编辑。,2.3库的应用,2.3.2插入库项目操作方法：步骤1将文本光标定位于“文档”窗口中。步骤2在“资源”面板上选择面板左侧的“库”类别。步骤3将一个库项目从“资源”面板拖动到“文档”窗口中，或者选择一个库项目，然后单击面板底部的“插入”按钮。,2.3库的应用,注意：插入库项目后，会在“文档”窗口的下方出现“库项目”属性检查器，如图所示。,【从源文件分离】可以断开文档中的项目和库之间的链接，从而使文档中的库项目可编辑。,“库项目”属性检查器,2.3库的应用,2.3.3修改库项目和更新站点当修改库项目时，可以更新使用该项目的所有文档。1修改库项目步骤1选中页面中的库项目。步骤2在属性面板中点击“打开”按钮。步骤3修改库项目，修改完成之后保存。步骤4在“更新库项目”对话框中点击“更新”按钮。步骤5选择更新的范围，更新完成之后关闭。,2.3库的应用,2.3.3修改库项目和更新站点2.更新整个站点或所有使用特定库项目的文档：选择【修改】【库】【更新页面】3.更改当前文档已使用所有库项目的当前版本选择【修改】|【库】【更新当前页】,2.4资源管理,利用【资源】面板的功能可以统一管理整个站点的资源，避免反复查找某些网页元素，能大大提高网页设计的效率，得到事半功倍的效果。在【资源】面板中管理的几种对象分别是：【图像】、【颜色】、【超链接】、：【Flash】、【Shockwave】、【视频】、【脚本】、【模板】、【库】。,2.4资源管理,选择【窗口】【资源】命令，或者直接按F10键，可打开【资源】面板。,2.4资源管理,2.4.1图像管理【资源】面板能自动管理本地站点内的每一幅图像。【资源】面板可对本地站点内的图像完成插入、编辑和管理，其操作步骤如下:（1）打开图像资源：单击资源面板左侧的图像按钮，可进入【图像】窗口。(2)插入图像：把光标定位在网页编辑窗口的图像插入处，然后在图像列表中选中要插入的图像，单击【插入】即可插入的图像。(3)编辑图像：在图像列表中选中要编辑修改的图像，然后单击该面板底部的编辑按钮，启动Dreamweaver8默认的图像编辑软件来对选中的图像进行编辑与修改。,2.4资源管理,2.4.1图像管理(4)图片收藏夹：添加：单击位于【资源】面板底端的【添加到收藏夹】按钮，可将图片收藏到收藏夹中。查看：在【图像】管理窗口的顶端选择【收藏】单选按钮，即可在图像列表栏中查看站点中的图片收藏情况。删除：单击位于【资源】面板底部的【从收藏夹中删除】按钮后即可将图像从收藏夹中删除。,2.4资源管理,2.4.2颜色管理打开资源面板：选择【窗口】【资源】命令，或者按F10键。打开颜色资源：单击【资源】面板左侧的【颜色】按钮即可进入【颜色】管理窗口。颜色收藏夹：单击位于【资源】面