flash网页多媒体课程设计《多媒体技术应用》课程设计.doc

1、课程设计任务书学生姓名： 专业班级： 指导教师： 工作单位： 信息工程系 设计题目：*flash网页的设计与制作初始条件：要求较全面地理解、掌握和综合运用所学的多媒体方面的理论知识，会用photoshop进行图片处理，会用flash制作简单动画，以及用flash协助制作网页，美化页面。要求完成的主要任务：用flash协助设计与制作网页，以及相关文档的制作。要求有明确的主题，内容健康向上，不允许单纯的图片堆积，互动性强，声形并茂，有较强的动态的视觉特效。主要任务：1. 完成整个网页的设计及制作；经教师检查及答辩；2. 写出规范的课程设计说明书，课程设计报告采取统一格式；详细叙述设计的主要内容以及

2、设计的具体思路，在报告中要有个人总结和心得。3. 课程设计结束后交设计说明书等文档，设计作品以姓名命名，并以班集体为单位刻盘。4. 文档雷同者按不及格处理；设计报告撰写格式要求： 要求层次清楚、整洁规范、不得相互抄袭，凡正文内容有整段完全相同者一律以抄袭论处。设计报告正文字数不少于0.2万字（不包括附录）。第1级（章）题序和题名用黑体三号字，第2级（目）题序和题名用黑体小四号字，第3级（条）题序和题名用黑体小四号字，正文内容用宋体五号字(英文用新罗马体)，多倍行距1.25。报告内容一律使用A4打印纸计算机打印，页码在页下居中标明。必须使用国家公布的规范字。页面设置：上空2.5 cm，下空2.0

3、 cm，左空2.5 cm，右空2.0cm（左装订）。插图图面要整齐、美观，插图应与正文呼应，不能脱节。每幅插图应有图序与图题，图序编号要连续，图序与图题间空一格且要放在插图下方居中处。时间安排：2012年12月29日 布置课程设计任务；讲述设计目的、内容、时间安排与本次课程设计的要求查阅资料，学生进行分析及总体设计，理清设计思路；2012年12月 30日-2013年1月 3日按设计要求，查阅资料；进行设计及制作；2013年1月 4日 提交课程设计报告及相关文档。指 导 教 师 签 字： 2012年 12 月 29日系 主 任 签 字： 2012年 12月 29日 一、设计目的本课程的设计目的是

4、通过实践使我经历Aptana开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Aptana可视化开发工具进行网页开发的方法；了解网页设计制作过程。我本次主要是设计的“祖国六十年”为主题的网页，针对祖国六十年的发展了介绍。二、设计思想利用Aptana制作一个关于“oppo”的网站，利用表格、行为、层和链接等网页设计技术设计页面。本网站以手机的发展为素材，主要讲解了与oppo智能手机相关的内容。各网站链接示意图如下所示： 登记订单了解所选手机的 参数详情 进入官网，搜索喜爱的手机 搜索手机分别在oppo官网上登录、注册账号进入opp

5、o手机搜索世界登录、注册、my OPPO 进入OPPO Oppo官网网站的开发流程具体步骤：（1）设计网站主题、内容、结构（2）素材准备（3）创建站点（4）创建网页，调整网页布局，添加网页内容并为网页添加链接（5）网站测试、预览并发布站点三、网页详细设计分析1.建立布局 在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Aptana是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。1.1.网页中的图像1.2在网页中插入图像 利用Aptana可以方便地在网页中插入图像，还可以设置图像边框

6、、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：1.2.1.新建一个空白网页，把光标定位在网页的开始位置。1.2.2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。1.2.3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。1.2.4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。2、图像的各种属性设置2.1.选中所插入的图片，单击鼠标右键，弹出一个

7、快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.2.2.打开“外观”选项卡。2.2.1设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。2.2.2设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：左环绕：图像在左边，文本在图像的右边进行环绕。右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏中打开

8、“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。2.2.3.编辑图像大小：在Aptana中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。2.2.4设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800600的窗口，还是1024768的窗口，网页都要能正常的显示。设置图

9、像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：2.2.4.1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.2.2.4.2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂

10、直方向的间距。3.怎样编辑网页中的图像在Aptana中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外，为了使图片更符合要求，我们还在photoshop中对所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。4.使用背景图像使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用背景图像的具体步骤如下：2.4.1.新建一个空白网页。2.4.2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属

11、性”对话框.2.4.3.开“背景”选项卡。2.4.4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮，出现一个“选择背景图片”对话框。2.4.5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。2.4.6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。这样，所选图片将作为整个网页的背景，如果在第4步时同时选中“水印”复选框，背景图片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸引人。5设置链接选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属

12、性被激活，输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。四、 网页制作过程 1.创建oppo主页 1.1在flash中用文字工具写一句“欢迎来到oppo世界”，降温子字体放大到合适大小，改颜色为红色，降帧数延伸到二十帧，在添加一个引导层，用椭圆工具画出一个椭圆，用橡皮擦擦去椭圆的一点，再在第一帧的时候把编辑好的文字移动到椭圆曲线的一段，再在第二十帧的时候把文字应椭圆曲线的另一段，再创建补间动画，一个主页欢迎词就设计好了最后将其导出到所做作业的文件夹中即可。1.2按照设计编写代码：我的表格 注册

13、登录MY OPPO 1.3主页界面图：2. 创建oppo搜索网页 2.1制作网页幻灯片 首先到网上下载几张精美的oppo智能手机图片加载到flash中，按ctrl+f8创建一个元件，再选中一张图片将其拖到元件中，改变其大小值为高400宽550，坐标为0 ，0.将帧数延续到30，再按ctrl+f8创建一个元件，重选一张图片，将其拖到元件中，调整其大小和属性，回到场景。新建一个图层，把原件拖到该图层中，延续到50帧。在新建一个元件用矩形工具画一个矩形，宽为16，高为403，放到图片的左端，再左下角的滤镜，将此元件改为模糊，在第50帧的时候添加关键帧，再把矩形拖到足够大，以遮住整个图片，再在该图层创

14、建补间动画。在新建一个图层，在第20帧的时候添加帧，按f9编写代码：p2.setMask(pu2);将图层2的矩形元件遮罩图层2的图片。再将图层1和图层2 延续到80帧,在第50帧的时候插入关键帧按ctrl+f8创建新元件，在选择一张图片，改变其大小和属性，将帧数延续到80帧。再在图层3第50帧的时候插入关键帧按ctrl+f8新建元件，用椭圆工具化一个小椭圆，再回到场景1中,在50帧时候将所建的元件拖到中间,用任意变形工具将其变小,放到最中间,再将帧数延续到80帧,在第80帧的时候将椭圆元件放大到遮住整个图片,再创建补间动画,在图层4的第50帧的时候按f9，编入代码p3.setMask(pu1

15、);将图层3的图片遮罩图层2的图片,这样就完成了最终效果:2.2编写标题：“欢迎来到oppo的世界”，在创建搜索栏，添加图片按钮，设计界面如下：3. 创建第3 页 对“版权表格”的操作：在属性面板中设置其单元格水平对齐方式为“居中对齐”在菜单栏中选择“插入”|“HTML”|“水平线”插入一条水平线。输入文本“版权所有青岛大学软件技术学院”“更新日期”，设置其大小为12px,颜色为#003300。将光标定位于文本“版权所有”后，在菜单栏中选择“插入”|“HTML”|“特殊字符”|“版权”插入版权符号，将光标定位于文本“更新日期”后，在菜单栏中选择“插入”|“日期”当前日期。对“导航表格”的操作：

16、选中导航表格，在“属性”面板中设置其属性，宽设为100%，高设为120px，对齐方式为居中对齐，类选择“.table1”,边框为0，背景颜色为#339900。选中第1行五个单元格，在“属性”面板中选择“合并单元格”按钮，将单元格合并，将光标定位于“导航表格”第一行，选择插入面板组中的“常用”|“图像”按钮，插入图片“导航.jpg”，单击图片，在 “属性”面板中单击编辑中的“裁剪”按钮对图片进行裁剪，裁剪完成后，将图片的宽设置为100%，高设置为120px。用此方法在开头位置编写单行表格第一格放”oppo”首页图片,第二格放”首页”图片,第三、第四、第五格分别放“商城”、“手机”、“服务”图片作

17、为一行选择菜单：编写代码作为连接到oppo官网: 在选择几张oppo手机作为该页的动态播放图片,最终设计代码如下我的作业 我要购买 最终视图效果如下:4. 创建第4页(注册页) 选一张oppo手机图片放到该作业的文件夹中,编写背景代码: 将这张图片充斥整个页面;在排版注册表的样式,排版如图所示:”姓名”类为普通输入框,样式代码为;密码输入框为特殊输入框,输入的密码值要不可见,样式代码为:;”性别”为单选框,属性值为“男、女”其中“checked”为默认值“男”；“您的住址”为多选框代码值为:;“上传”控件需啊哟上传的是整个表格的信息，故需要将该页代码打包成块，运用到代码：，其中“form ac

18、tion”后为链接的网页;再就是“注册”、“重置”、“普通”按钮，其分别得控件代码为， 、 和隐藏按钮:最终代码为: 姓名： 密码： 性别：男 女 您的住址：江南 北京 上海 上传： 最终效果图为:5.完善链接网页创建完成后，即可完善链接。更新模板“欢迎来到oppo的世界”的链接，可更新部分二级页面“手机搜索”“我要购买”“登记注册”的链接。而三级页面的链接在模板中即可实现。五、总结通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，整个学期的学习过程，我学会了很多知识， 在

19、此次网页设计中，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！ 做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好，页面过于简单，创新意识反面薄弱，这是我需要提高的地方。需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。总体来说，通过这次的对网页课程设计，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提

20、高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。“书到用时方恨少”，从这次实训当中我深刻的体会到理论知识的重要性，理论结合实际才能将知识掌握牢固。为了使自己的网页风格统一，是自己在设计过程中更加省时省力，我使用了较多的模板，这使我的工作效率大大提高。在设计的过程中遇到了很多问题，有些知识理解得不够深刻，掌握得不够牢固，操作不够熟练，没有能完全达到自己预期的效果，还好通过老师的细心指导和同学们的帮助才能达到最终效果。 实训期间上网查看了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。当前的软件的功能日趋复杂，

21、不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出自己学习的还不够，存在许多缺点疏漏，需要更加刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页而努力。实训将要结束，其中的酸甜苦辣我会在今后的日子里不断地去咀嚼，去回味，去探索。从制作网页过程中，我学到了新的美化网页的方法，运用了更多以前未运用的技巧。这使我学到了更多的知识，不仅可以巩固了以前所学过的知识，而且学到了很多在书本上所没有学到过的知识，为我自己在制作网页这方面积累了一些经验。通过这次课程设计使我懂得了理论与实际相结合是很重要的，只有理论知识是远远不够的，只有把所学的理论知识与实践相结合起来，从理

22、论中得出结论，才能真正为掌握技术，从而提高自己的实际动手能力和独立思考的能力。参考文献1葛艳玲.网页制作基础教程（Dreamweaver 8.0）.电子工业出版社.2009年9月第2版2. 马宪敏. Dreamweaver 8基础与实例教程.中国水利水电出版社.3. 佩奇. Dreamweaver 8网页设计标准教程.电子工业出版社. 设计过程及答辩回答问题记载：（至少三个问题）1.如何在网页中嵌入flash动态? 答;将设计好的flash导出为.swf格式,再将其放在所做作业的文件夹中,再在代码中指明路径(相对路径)实现代码为:2. 如何实现网页之间的链接? 答:链接代码为其中A href=enter13.html为链接的对象,img src=images/right_daohang2.jpg为链接的图片的属性，同样需要指明相对路径。指导教师评语： 签名： 2013年1月4日16