多媒体技术应用案例教程PPT项目七多媒体应用系统开发—“多媒体技术学习网站”设计与开发.ppt

《多媒体技术应用案例教程PPT项目七多媒体应用系统开发—“多媒体技术学习网站”设计与开发.ppt》由会员分享，可在线阅读，更多相关《多媒体技术应用案例教程PPT项目七多媒体应用系统开发—“多媒体技术学习网站”设计与开发.ppt（49页珍藏版）》请在三一办公上搜索。

1、,项目七 多媒体应用系统开发,“多媒体技术学习网站”设计与开发,学习目标,知识目标,能力目标,1.了解多媒体应用系统基本知识。2.熟悉Dreamweaver软件界面与基本工具，掌握运用Dreamweaver软件创作与发布多媒体网页的基本过程。3.熟悉运用Photoshop、lash等媒体制作工具进行制作与处理多媒体素材的基本过程。,1.能根据需求分析确定系统主题及风格、规划系统结构并进行页面版式设计。2.能根据主题收集资料、准备素材并能对素材做好编辑处理工作。3.能进行系统的总体设计、界面设计、制作各页面并将各页进行有效整合；能应用多媒体创作软件设计、制作、测试、发布多媒体网页。4.能编写多媒

2、体应用系统设计说明书。5.能与人良好沟通，合作完成学习任务。,目录,7.1 项目提出,7.2 项目分析,7.3 相关知识,7.4 项目实现,7.5 项目评价,7.6 项目总结,7.7 拓展训练,7.1项目提出,多媒体应用系统是开发人员应用计算机编程或多媒体从创作工具制作的计算机应用程序，如多媒体网站、多媒体课件、多媒体交互系统等。多媒体系统具有完整性、多样化、集成性、实用性和交互性等特性，它属于应用软件范畴并直接为行业用户提供服务。本项目采用Photoshop技术实现静态页面效果图的制作，Flash技术实现网页动态导航及Banner，Dreamweaver技术实现多媒体应用系统的合成，Nero

3、刻录光盘，将该多媒体系统应用于课程教学，为教学提供方便快捷的服务。项目突出在Dreameeaver环境中，插入图片、Flash、音频、视频等多媒体元素。该项目以Dreamweaver技术为主，以Photoshop技术、Flash动画制作技术等为辅。,7.2项目分析,多媒体应用系统设计与制作的全过程，是指从系统需求分析开始，到完成发布的整个过程。如果是小规模项目，可以一个人承担多项任务自己完成，但通常情况是34名开发者（设计师、程序员等）一起组成一个小组来完成项目。,7.2.1多媒体应用系统设计与制作的基本流程,多媒体应用系统设计与制作的基本流程,7.3 相关知识,1关于项目主题 本项目的任务是

4、完成“多媒体技术学习网站”的设计与制作，包括多媒体技术学习网站的首页及各级页面的设计与制作、将网站进行光盘刻录等内容。通过多媒体应用系统的建构，集成了文本、平面、动画、视频、音频等学习内容的一级模块，每个模块包含各类媒体的作品欣赏、素材浏览、创作工具、知识链接等内容，从而为多媒体技术课程的学习提供方便。,2项目用户分析“多媒体技术学习网站”为广大在校大学生、培训部学员等多媒体技术爱好者、学习者提供一个图、文、声并茂的学习平台，让用户在轻松、愉悦的学习环境中欣赏优秀多媒体作品，了解文本、图形图像、动画、视频等多媒体领域的知识，促进多媒体技能的提升。,7.3相关知识,3Dreamweaver相关知

5、识,Dreamweaver CS3工作界面,7.4 项目实现,7.4.1 网站总体设计,1网站结构设计 网站的页面基本结构包括主页面、二级页面等次级页面。在实际建设网站过程中可根据实际需求，适当调整页面的级数。,2网站内容设计“多媒体技术学习网站”为从多媒体技术学习者提供学习服务出发，设计了主页模板页面index.dwt、主页面index.html、二级页面素材浏览的scll.html等4个模块。,网站基本内容结构,7.4 项目实现,主页左、右背景边框,7.4.2 运用Photoshop制作图形图像素材,1制作主页背景边框,最终效果图:,7.4 项目实现,渐变效果,主要操作步骤:,新建一个黄色

6、到白色渐变背景图。,滤镜效果,对背景进行滤镜效果处理。,7.4 项目实现,褐色渐变矩形框,主要操作步骤:,绘制褐色渐变矩形框（右侧）。,棕色矩形框,绘制棕色矩形框（右侧）。,7.4 项目实现,主页左侧背景边框,主要操作步骤:,保存文件。制作主页右侧背景边框。,主页右侧背景边框,7.4 项目实现,网站导航栏背景,7.4.2 运用Photoshop制作图形图像素材,2制作网站导航栏背景,最终效果图:,7.4 项目实现,斜面和浮雕、颜色叠加、光泽图层样式参数,主要操作步骤:,新建“zslj”图像文件。,添加“文字”图层。,应用文字图层样式。,7.4 项目实现,主要操作步骤:,保存文件。,“知识链接”

7、导航背景,提示：除导航栏的文字外，本网站中技术主页的“学习公告”、“技术介绍”以及二级页面的“文本”、“图形图像”、“音频”、“动画”、“视频”、“当前位置”等文字的制作，都用了和导航栏文字相同的文字大小及图层样式。,7.4 项目实现,“技术介绍”等模块文字及底图,7.4.2 运用Photoshop制作图形图像素材,3制作“技术介绍”等模块背景,最终效果图:,7.4 项目实现,文字底图,主要操作步骤:,制作文字底图。,制作文字特效。保存文件。,“技术介绍”模块,7.4 项目实现,7.4.3运用Flash制作网页动画素材,1.新建并保存文件。,2.制作“沙滩贝壳”影片剪辑元件。,新建“沙滩贝壳”

8、影片剪辑元件。制作“沙滩贝壳”逐帧动画。,7.4 项目实现,“边框”影片剪辑,7.4.3运用Flash制作网页动画素材,3.制作“边框”影片剪辑元件。,新建“边框”影片剪辑元件。插入图片并处理。,7.4 项目实现,7.4.3运用Flash制作网页动画素材,4.制作“多媒体技术”影片剪辑元件。,新建“边框”影片剪辑元件。插入图片并处理。创建“多”图层补间动画。创建“媒”图层的补间动画。,“多媒体技术”影片剪辑,7.4 项目实现,7.4.3运用Flash制作网页动画素材,5.合成网站Banner。,制作“沙滩贝壳”图层。制作“边框”图层。制作“文字”图层。保存并导出swf文件。,网站Banner,

9、7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,1.新建站点。,定义站点名称。选择是否使用服务器技术。设置文件保存位置。设置文件在服务器上的存储位置。设置是否存回和取出文件。完成站点定义。,定义网站名字,提示：为了方便后续制作网页时的素材查找与使用，建议在站点当前目录中分别建立text、images、flash、audio、video等素材文件夹，并将之前各类素材分别放置于相应文件夹中。,完成站点定义,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,2.制作网站模板,新建并保存模板文件。,新建HTML模板,“另存模板”对话框,注意：新建模板文件后，将在站

10、点下自动生成Templates文件夹，并将模板保存于所选站点中。,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,2.制作网站模板,插入一个1行3列的表格。,表格对话框参数,注意：“代码”视图显示HTML代码，“拆分”视图同时在上下方分别显示代码和设计效果，“设计”视图中只显示设计效果。,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,2.制作网站模板,左右侧单元格中插入边框图片。,背景边框插入效果,注意：在插入图片时，可以根据需要设置替换文本。“替换文本”主要是用于当网页中无法正常显示图片时，在图片处出现的文字。,图像标签辅助功能属性对话框,7.4 项

11、目实现,7.4.4运用Dreamweaver制作各级页面,2.制作网站模板,在中间单元格中插入1行4列的表格。插入Banner动画。插入导航栏图片。,插入中间表格,插入Banner动画,导航栏,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,2.制作网站模板,设置可编辑区域。输入“版权所有”等信息。保存模板文件。,网站模板,7.4 项目实现,网站主页浏览效果,7.4.4运用Dreamweaver制作各级页面,最终效果图:,3.制作网站主页,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,（1）利用模板新建主页文档,新建基于模板的主页。保存主页。,模板选择

12、对话框,7.4 项目实现,“学习公告”效果,7.4.4运用Dreamweaver制作各级页面,最终效果图:,（2）制作“学习公告”模块,主要操作步骤:,在可编辑区域插入2行2列表格。在左侧上方单元格中插入2行1列表格。设置“学习公告”模块表格边框。插入“学习公告”图片。在“学习公告”下方的单元格中插入1行1列的表格。插入“喇叭”图片。输入“学习公告”文字并设置文字样式。,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,（2）制作“学习公告”模块,主要操作步骤:,制作公告滚动效果。为使公告产生滚动效果，将视图切换为“拆分”视图，在这个2行1列的表格中外围添加如下语句：,注意：

13、为使滚动效果正常，此段代码标签将包含表格标签。,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,（3）制作“作品集锦”模块,“作品集锦”模块,最终效果图:,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,（3）制作“作品集锦”模块,主要操作步骤:,注意：为使滚动效果正常，此段代码标签将包含表格标签。,合并最下方的单元格并插入1行7列的表格。在表格中插入相应多媒体内容。制作图片滚动效果。切换到代码视图，在这个1行7列的表格中外围添加如下代码：保存文件。,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,2制作网站二级页面,二级页面“作品欣

14、赏”模块浏览效果,最终效果图:,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,2制作网站二级页面,主要操作步骤:,1）利用模板新建二级页面文件。新建网页。应用模板。保存文件。,3）制作作品欣赏列表内容。在第2行中插入表格并设置表格属性。导入“文本”模块作品并设置属性。导入“图形图像”模块作品并设置属性。制作“音频”模块作品超链接。导入“动画”模块作品并设置属性。制作“视频”模块作品超链接。,2)制作当前位置信息。插入2行1列的表格。在第1行输入“当前位置”等信息。,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,（2）素材浏览模块制作,二级页面“素材浏

15、览”模块浏览效果,最终效果图:,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,（3）创作工具模块制作,二级页面“创作工具”模块浏览效果,最终效果图:,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,（3）知识链接模块制作,二级页面“知识链接”模块浏览效果,最终效果图:,7.4 项目实现,7.4.4运用Dreamweaver制作各级页面,3.设置主页与二级页面的链接,编辑模板，设置链接。保存模板。,更新模板文件对话框,7.4 项目实现,7.4.5网站测试与发布,1.网站测试,文档工具栏中的“检查页面”工具,7.4 项目实现,7.4.5网站测试与发布,2.

16、网站发布,文件管理器,远程服务器定义,75项目评价,751评价指标（表格见书本附录）考核对站点的目录结构、各页面的布局结构、颜色搭配、文字、图像、动画设置是否合理，网页链接是否顺畅，网页制作技术的应用及整体浏览效果等。752评价方法（表格见书本附录）在组内个人评价基础上，小组互评与教师总评由各组指定代表演示和讲演作品完成过程时进行按上表评价体系打分。小组将个人任务在评价完成后交于教师签写任务的总体评价。,76 项目总结,7.6.1问题探究,1.如何在网页中插入空格？2.如何让网页紧贴顶部和左部？3.如何制作表格细边框？4.如何利用Dreamweaver徒手编辑网页代码？5.如何搜寻网页并替换内

17、容？6.网页的布局有哪些常用方法？7.有时修改了模板内容，但运行基于此模板的页面时发现内容没有更新?,76 项目总结,7.6.2知识拓展,1.HTML标签 2.XML 3.CSS 4.DIV+CSS布局 5.动态网页制作工具,制作多媒体技术学习光盘,选择数据刻录类型。添加文件或文件夹。,制作数据光盘,添加文件或文件夹,7.6.3技术提升,76 项目总结,7.5 技术提升,设置参数并进行刻录。显示刻录进度。完成刻录。,设置磁盘名称,显示刻录进度,刻录完成,制作多媒体技术学习光盘,7.6.3技术提升,7.7 拓展训练,7.7.1改进训练1.训练内容 运用Photoshop、Flash、Dreamw

18、eaver等工具为“多媒体技术学习网”的导航栏添加“案例学习”模块，即当浏览者单击导航中“案例学习”图形按钮时，“案例学习”模块。2.训练要求（1）“案例学习”模块的布局、字体样式等与其它二级页面相近。（2）“案例学习”的内容包括文本、图形图像、动画、视频、音频制作的典型案例至少每类1个。3.重点提示（1）合理设计“案例学习”模块，内容与页面风格可以借鉴前面模块，也可自行创新，但整体风格必须和谐统一。（2）“案例学习”的形式可以图文为主，也可以添加相应动画。,7.7 拓展训练,7.7.2创新训练1.训练内容 运用Photoshop图形图像处理技术、Flash动画制作技术、Dreamweaver

19、网页制作技术等制作旅游网站。2.训练要求（1）主题选择要求 选择一个旅游景点，收集图形、声音、动画、视频等媒体素材，制作旅游主题网站。（2）内容要求 要求主题明确、内容健康、具体，各页面的文字、图像、动画能够清晰地表达主题。（3）版面与色彩要求 版面结构合理，每一页面都能方便实现链接。色彩搭配协调、美观、页面设计规范，无乱码、空链接和错误链接。3.重点提示 合理设计主题旅游网站的色彩与风格，使之各模块风格统一，能衬托主题。,本项目小结,本项目以策划、设计并制作“多媒体技术学习”网站为主要任务。以Dreamweaver为主要制作工具，辅之以Photoshop、Flash等技术。训练学生系统总体设计、界面设计、制作各页面并将各页进行有效整合能力；运用多媒体创作软件设计、制作、测试、发布多媒体网站的技能；撰写多媒体应用系统说明文档的能力；与人良好沟通，合作完成学习任务的能力。围绕项目完成，在项目分析的基础上提供了完成该项目需要的相关知识，详细的项目设计与制作过程、项目评价指标与方法、说明文档的编写，最后从问题探究、知识拓展、技术提升三方面对项目进行了总结。在完成此项目示范训练的基础上，增加了改进型训练、创新型训练，以逐步提高学习者完成多媒体应用系统的综合职业能力。,