多媒体技术应用案例教程项目七多媒体应用系统开发-多媒体技术学习网站设计与开发

工程七多媒体应用系统开发—“多媒体技术学习网站〞设计与开发学习目标知识目标能力目标1.了解多媒体应用系统根本知识。2.熟悉Dreamweaver软件界面与根本工具，掌握运用Dreamweaver软件创作与发布多媒体网页的根本过程。3.熟悉运用Photoshop、Ｆlash等媒体制作工具进行制作与处理多媒体素材的根本过程。1.能根据需求分析确定系统主题及风格、规划系统结构并进行页面版式设计。2.能根据主题收集资料、准备素材并能对素材做好编辑处理工作。3.能进行系统的总体设计、界面设计、制作各页面并将各页进行有效整合；能应用多媒体创作软件设计、制作、测试、发布多媒体网页。4.能编写多媒体应用系统设计说明书。5.能与人良好沟通，合作完成学习任务。目录7.1工程提出7.2工程分析7.3相关知识7.4工程实现7.5工程评价7.6工程总结7.7拓展训练7.1工程提出多媒体应用系统是开发人员应用计算机编程或多媒体从创作工具制作的计算机应用程序，如多媒体网站、多媒体课件、多媒体交互系统等。多媒体系统具有完整性、多样化、集成性、实用性和交互性等特性，它属于应用软件范畴并直接为行业用户提供效劳。本工程采用Photoshop技术实现静态页面效果图的制作，Flash技术实现网页动态导航及Banner，Dreamweaver技术实现多媒体应用系统的合成，Nero刻录光盘，将该多媒体系统应用于课程教学，为教学提供方便快捷的效劳。工程突出在Dreameeaver环境中，插入图片、Flash、音频、视频等多媒体元素。该工程以Dreamweaver技术为主，以Photoshop技术、Flash动画制作技术等为辅。7.2工程分析多媒体应用系统设计与制作的全过程，是指从系统需求分析开始，到完成发布的整个过程。如果是小规模工程，可以一个人承担多项任务自己完成，但通常情况是3～4名开发者〔设计师、程序员等〕一起组成一个小组来完成工程。多媒体应用系统设计与制作的根本流程多媒体应用系统设计与制作的根本流程7.3相关知识1．关于工程主题本工程的任务是完成“多媒体技术学习网站〞的设计与制作，包括多媒体技术学习网站的首页及各级页面的设计与制作、将网站进行光盘刻录等内容。通过多媒体应用系统的建构，集成了文本、平面、动画、视频、音频等学习内容的一级模块，每个模块包含各类媒体的作品欣赏、素材浏览、创作工具、知识链接等内容，从而为多媒体技术课程的学习提供方便。2．工程用户分析“多媒体技术学习网站〞为广阔在校大学生、培训部学员等多媒体技术爱好者、学习者提供一个图、文、声并茂的学习平台，让用户在轻松、愉悦的学习环境中欣赏优秀多媒体作品，了解文本、图形图像、动画、视频等多媒体领域的知识，促进多媒体技能的提升。7.3相关知识3．Dreamweaver相关知识DreamweaverCS3工作界面7.4工程实现7.4.1网站总体设计1．网站结构设计网站的页面根本结构包括主页面、二级页面等次级页面。在实际建设网站过程中可根据实际需求，适当调整页面的级数。2．网站内容设计“多媒体技术学习网站〞为从多媒体技术学习者提供学习效劳出发，设计了主页模板页面index.dwt、主页面index.html、二级页面素材浏览的scll.html等4个模块。主页二级页面二级页面栏目主页模板主页作品欣赏平面、图形图像、音频、动画、视频作品

素材浏览平面、图形图像、音频、动画、视频素材创作工具平面、图形图像、音频、动画、视频作品创作工具知识链接平面、图形图像、音频、动画、视频制作相关知识链接网址网站根本内容结构7.4工程实现主页左、右背景边框7.4.2运用Photoshop制作图形图像素材1．制作主页背景边框最终效果图:7.4工程实现渐变效果主要操作步骤:①新建一个黄色到白色渐变背景图。

滤镜效果②对背景进行滤镜效果处理。7.4工程实现褐色渐变矩形框主要操作步骤:③绘制褐色渐变矩形框〔右侧〕。棕色矩形框④绘制棕色矩形框〔右侧〕。7.4工程实现主页左侧背景边框主要操作步骤:⑤保存文件。⑥制作主页右侧背景边框。主页右侧背景边框7.4工程实现网站导航栏背景7.4.2运用Photoshop制作图形图像素材2．制作网站导航栏背景最终效果图:7.4工程实现斜面和浮雕、颜色叠加、光泽图层样式参数主要操作步骤:①新建“zslj〞图像文件。②添加“文字〞图层。③应用文字图层样式。7.4工程实现主要操作步骤:④保存文件。“知识链接〞导航背景提示：除导航栏的文字外，本网站中技术主页的“学习公告〞、“技术介绍〞以及二级页面的“文本〞、“图形图像〞、“音频〞、“动画〞、“视频〞、“当前位置〞等文字的制作，都用了和导航栏文字相同的文字大小及图层样式。7.4工程实现“技术介绍〞等模块文字及底图7.4.2运用Photoshop制作图形图像素材3．制作“技术介绍〞等模块背景最终效果图:7.4工程实现文字底图主要操作步骤:①制作文字底图。②制作文字特效。③保存文件。“技术介绍〞模块7.4工程实现运用Flash制作网页动画素材1.新建并保存文件。2.制作“沙滩贝壳〞影片剪辑元件。①新建“沙滩贝壳〞影片剪辑元件。②制作“沙滩贝壳〞逐帧动画。7.4工程实现“边框〞影片剪辑运用Flash制作网页动画素材3.制作“边框〞影片剪辑元件。①新建“边框〞影片剪辑元件。②插入图片并处理。7.4工程实现运用Flash制作网页动画素材4.制作“多媒体技术〞影片剪辑元件。①新建“边框〞影片剪辑元件。②插入图片并处理。③创立“多〞图层补间动画。④创立“媒〞图层的补间动画。“多媒体技术〞影片剪辑7.4工程实现运用Flash制作网页动画素材5.合成网站Banner。①制作“沙滩贝壳〞图层。②制作“边框〞图层。③制作“文字〞图层。④保存并导出swf文件。网站Banner7.4工程实现7.4.4运用Dreamweaver制作各级页面1.新建站点。①定义站点名称。②选择是否使用效劳器技术。③设置文件保存位置。④设置文件在效劳器上的存储位置。⑤设置是否存回和取出文件。⑥完成站点定义。定义网站名字提示：为了方便后续制作网页时的素材查找与使用，建议在站点当前目录中分别建立text、images、flash、audio、video等素材文件夹，并将之前各类素材分别放置于相应文件夹中。完成站点定义7.4工程实现7.4.4运用Dreamweaver制作各级页面2.制作网站模板①新建并保存模板文件。新建HTML模板“另存模板〞对话框注意：新建模板文件后，将在站点下自动生成Templates文件夹，并将模板保存于所选站点中。7.4工程实现7.4.4运用Dreamweaver制作各级页面2.制作网站模板②插入一个1行3列的表格。表格对话框参数注意：“代码〞视图显示HTML代码，“拆分〞视图同时在上下方分别显示代码和设计效果，“设计〞视图中只显示设计效果。7.4工程实现7.4.4运用Dreamweaver制作各级页面2.制作网站模板③左右侧单元格中插入边框图片。背景边框插入效果注意：在插入图片时，可以根据需要设置替换文本。“替换文本〞主要是用于当网页中无法正常显示图片时，在图片处出现的文字。图像标签辅助功能属性对话框7.4工程实现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〕利用模板新建主页文档①新建基于模板的主页。②保存主页。模板选择对话框7.4工程实现“学习公告〞效果7.4.4运用Dreamweaver制作各级页面最终效果图:〔2〕制作“学习公告〞模块主要操作步骤:①在可编辑区域插入2行2列表格。②在左侧上方单元格中插入2行1列表格。③设置“学习公告〞模块表格边框。④插入“学习公告〞图片。⑤在“学习公告〞下方的单元格中插入1行1列的表格。⑥插入“喇叭〞图片。⑦输入“学习公告〞文字并设置文字样式。7.4工程实现7.4.4运用Dreamweaver制作各级页面〔2〕制作“学习公告〞模块主要操作步骤:⑧制作公告滚动效果。为使公告产生滚动效果，将视图切换为“拆分〞视图，在这个2行1列的表格中外围添加如下语句：<marqueeonmousemove="stop()"onmouseout="start()"scrollamount="1"scrolldelay="50"direction="up"width="100%"height="166"></marquee><!--marquee是个容器标签，设置相对应的属性可使容器中的内容产生相应的移动—>注意：为使滚动效果正常，此段代码标签将包含表格标签。7.4工程实现7.4.4运用Dreamweaver制作各级页面〔3〕制作“作品集锦〞模块“作品集锦〞模块最终效果图:7.4工程实现7.4.4运用Dreamweaver制作各级页面〔3〕制作“作品集锦〞模块主要操作步骤:注意：为使滚动效果正常，此段代码标签将包含表格标签。①合并最下方的单元格并插入1行7列的表格。②在表格中插入相应多媒体内容。③制作图片滚动效果。切换到代码视图，在这个1行7列的表格中外围添加如下代码：<marqueeonmousemove=“stop()〞onmouseout=“start()〞scrollamount=“2〞scrolldelay=“10〞direction=“left〞width=“100%〞height=“195〞behavior=“alternate〞>④保存文件。7.4工程实现7.4.4运用Dreamweaver制作各级页面2．制作网站二级页面二级页面“作品欣赏〞模块浏览效果最终效果图:7.4工程实现7.4.4运用Dreamweaver制作各级页面2．制作网站二级页面主要操作步骤:1〕利用模板新建二级页面文件。①新建网页。②应用模板。③保存文件。3〕制作作品欣赏列表内容。①在第2行中插入表格并设置表格属性。②导入“文本〞模块作品并设置属性。③导入“图形图像〞模块作品并设置属性。④制作“音频〞模块作品超链接。⑤导入“动画〞模块作品并设置属性。⑥制作“视频〞模块作品超链接。2)制作当前位置信息。①插入2行1列的表格。②在第1行输入“当前位置〞等信息。7.4工程实现7.4.4运用Dreamweaver制作各级页面〔2〕素材浏览模块制作二级页面“素材浏览〞模块浏览效果最终效果图:7.4工程实现7.4.4运用Dreamweaver制作各级页面〔3〕创作工具模块制作二级页面“创作工具〞模块浏览效果最终效果图:7.4工程实现7.4.4运用Dreamweaver制作各级页面〔3〕知识链接模块制作二级页面“知识链接〞模块浏览效果最终效果图:7.4工程实现7.4.4运用Dreamweaver制作各级页面3.设置主页与二级页面的链接①编辑模板，设置链接。②保存模板。更新模板文件对话框7.4工程实现网站测试与发布1.网站测试文档工具栏中的“检查页面〞工具7.4工程实现网站测试与发布2.网站发布文件管理器远程效劳器定义7．5工程评价

7．5．1评价指标〔表格见书本附录〕考核对站点的目录结构、各页面的布局结构、颜色搭配、文字、图像、动画设置是否合理，网页链接是否顺畅，网页制作技术的应用及整体浏览效果等。7．5．2评价方法〔表格见书本附录〕在组内个人评价根底上，小组互评与教师总评由各组指定代表演示和讲演作品完成过程时进行按上表评价体系打分。小组将个人任务在评价完成后交于教师签写任务的总体评价。7．6工程总结问题探究1.如何在网页中插入空格？2.如何让网页紧贴顶部和左部？3.如何制作表格细边框？4.如何利用Dreamweaver徒手编辑网页代码？5.如何搜寻网页并替换内容？6.网页的布局有哪些常用方法？7.有时修改了模板内容，但运行基于此模板的页面时发现内容没有更新?7．6工程总结知识拓展1.HTML标签2.XML 3.CSS4.DIV+CSS布局5.动态网页制作工具制作多媒体技术学习光盘

①选择数据刻录类型。②添加文件或文件夹。制作数据光盘添加文件或文件夹技术提升7．6工程总结7.5技术提升③设置参数并进行刻录。④显示刻录进度。⑤完成刻录。设置磁盘名称显示刻录进度刻录完成制作多媒体技术学习光盘技术提升7.7拓展训练改进训练1.训练内容运用Photoshop、Flash、Dreamweaver等工具为“多媒体技术学习网〞的导航栏添加“案例学习〞模块，即当浏览者单击导航中“案例学习〞图形按钮时，“案例学习〞模块。2.训练要求〔1〕“案例学习〞模块的布局、字体样式等与其它二级页面相近。〔2〕“案例学习〞的内容包括文本、图形图像、动画、视频、音频制作的典型案例至少每类1个。3.重点提示〔1〕合理设计“案例学习〞模块，内容与页面风格可以借鉴前面模块，也可自行创新，但整体风