flash网页多媒体课程设计.docx
- 文档编号:12057059
- 上传时间:2023-04-16
- 格式:DOCX
- 页数:22
- 大小:2.29MB
flash网页多媒体课程设计.docx
《flash网页多媒体课程设计.docx》由会员分享,可在线阅读,更多相关《flash网页多媒体课程设计.docx(22页珍藏版)》请在冰豆网上搜索。
flash网页多媒体课程设计
课程设计报告书
课程名称:
《多媒体技术应用》课程设计
题目:
flash网页的设计与制作
系名:
信息工程系
专业班级:
姓名:
学号:
指导教师:
2012年12月29日
课程设计任务书
学生姓名:
专业班级:
指导教师:
工作单位:
信息工程系
设计题目:
**flash网页的设计与制作
初始条件:
要求较全面地理解、掌握和综合运用所学的多媒体方面的理论知识,会用photoshop进行图片处理,会用flash制作简单动画,以及用flash协助制作网页,美化页面。
要求完成的主要任务:
用flash协助设计与制作网页,以及相关文档的制作。
要求有明确的主题,内容健康向上,不允许单纯的图片堆积,互动性强,声形并茂,有较强的动态的视觉特效。
主要任务:
1.完成整个网页的设计及制作;经教师检查及答辩;
2.写出规范的课程设计说明书,课程设计报告采取统一格式;详细叙述设计的主要内容以及设计的具体思路,在报告中要有个人总结和心得。
3.课程设计结束后交设计说明书等文档,设计作品以姓名命名,并以班集体为单位刻盘。
4.文档雷同者按不及格处理;
设计报告撰写格式要求:
要求层次清楚、整洁规范、不得相互抄袭,凡正文内容有整段完全相同者一律以抄袭论处。
设计报告正文字数不少于0.2万字(不包括附录)。
第1级(章)题序和题名用黑体三号字,第2级(目)题序和题名用黑体小四号字,第3级(条)题序和题名用黑体小四号字,正文内容用宋体五号字(英文用新罗马体),多倍行距1.25。
报告内容一律使用A4打印纸计算机打印,页码在页下居中标明。
必须使用国家公布的规范字。
页面设置:
上空2.5cm,下空2.0cm,左空2.5cm,右空2.0cm(左装订)。
插图图面要整齐、美观,插图应与正文呼应,不能脱节。
每幅插图应有图序与图题,图序编号要连续,图序与图题间空一格且要放在插图下方居中处。
时间安排:
2012年12月29日布置课程设计任务;讲述设计目的、内容、时间安排与本次课程设计的要求查阅资料,学生进行分析及总体设计,理清设计思路;
2012年12月30日-2013年1月3日按设计要求,查阅资料;进行设计及制作;
2013年1月4日提交课程设计报告及相关文档。
指导教师签字:
2012年12月29日
系主任签字:
2012年12月29日
一、设计目的
本课程的设计目的是通过实践使我经历Aptana开发的全过程和受到一次综合训练,以便能较全面地理解、掌握和综合运用所学的知识。
结合具体的开发案例,理解并初步掌握运用Aptana可视化开发工具进行网页开发的方法;了解网页设计制作过程。
我本次主要是设计的“祖国六十年”为主题的网页,针对祖国六十年的发展了介绍。
二、设计思想
利用Aptana制作一个关于“oppo”的网站,利用表格、行为、层和链接等网页设计技术设计页面。
本网站以手机的发展为素材,主要讲解了与oppo智能手机相关的内容。
各网站链接示意图如下所示:
网站的开发流程
具体步骤:
(1)设计网站主题、内容、结构
(2)素材准备
(3)创建站点
(4)创建网页,调整网页布局,添加网页内容并为网页添加链接
(5)网站测试、预览并发布站点
三、网页详细设计分析
1.建立布局
在这次的网页设计中用到大量的布局,所以怎么样建立布局是关键。
Aptana是大多数人设计网页的称手兵器,也是众多入门者的捷径。
特别是其在布局方面的出色表现,更受青睐。
大家都知道,没有表格的帮助,很难组织出一个协调合理的页面。
1.1.网页中的图像
1.2在网页中插入图像
利用Aptana可以方便地在网页中插入图像,还可以设置图像边框、大小、和位置,并且可以直接对图像进行编辑。
在网页中加入图像的操作非常简单:
1.2.1.新建一个空白网页,把光标定位在网页的开始位置。
1.2.2.打开“工具”菜单,选择“图片”菜单项,在子菜单中选择“来自文件”菜单项,或者单击工具栏中的图片工具图标,弹出一个“图片”对话框。
1.2.3.在此对话框中单击“浏览”按钮,出现一个“选择文件”对话框。
1.2.4.在“选择文件”对话框的文件列表中选择某个图像文件,然后单击“确定”按钮,或直接双击该图像文件,该图像即被加入到网页中。
在网页中插入图像后我们就可以对图像的各种属性进行设置了。
2、图像的各种属性设置
2.1.选中所插入的图片,单击鼠标右键,弹出一个快捷菜单,在菜单中选择“图片属性”菜单项,出现一个“图片属性”对话框.
2.2.打开“外观”选项卡。
2.2.1设定图像边框粗细:
在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框,也可以定义边框值为“0”,即无边框。
2.2.2设置图像环绕方式:
一般情况下一幅图像只能与一行文字处在同一高度,但有时需要将图像和文字分开,且两者互不影响。
比如在网页左边插入一幅图像,要求右边的文字就像没有图像时可以多行输入,这就要通过设置图像的环绕方式来实现。
在网页中图像的环绕方式有两种:
①左环绕:
图像在左边,文本在图像的右边进行环绕。
②右环绕:
图像在右边,文本在图像的左边进行环绕。
在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框,选择“左”选项,并单击“确定”按钮,图像就被设置为左环绕方式,同样,如果选“右”,图像就被设置为右环绕方式。
2.2.3.编辑图像大小:
在Aptana中,当在网页中加入一幅图像后,图像大小默认设置为其原来的大小,如果加入的图像太大或太小,或有其他特别需要,就得调整图像的大小。
调整图像大小非常简单灵活,只要你选中加入的图像,用鼠标左键拖动图像边框,可任意调整图像的宽度和高度直到达到你满意的尺寸。
2.2.4设置图像缩放比例:
网页设计的一个重要原则就是网页的兼容性,对于不同的浏览器或者不同的分辨率,不管是800×600的窗口,还是1024×768的窗口,网页都要能正常的显示。
设置图像缩放比例就是将图像设置为大小可以按比例变化,与浏览器的大小成一固定比例,这样在不同大小的浏览器窗口里图像都能正常的显示外观。
设置图像缩放比例的步骤如下:
2.2.4.1.选中网页中的图像,单击鼠标右键,在弹出的快捷菜单里,选择“图像属性”菜单项,弹出一个“图像属性”对话框.
2.2.4.2.在“大小”栏中选中“指定大小”复选框,同时选中“宽度”和“高度”下面的“百分比”单选按钮,然后在“宽度”和“高度”栏里输入想显示的比例,单击“确定”完成设置。
外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置,水平间距是指图像与周围元素在水平方向的间距,以象素为单位;垂直间距指图像与周围元素在垂直方向的间距。
3.怎样编辑网页中的图像
在Aptana中,可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑,编辑功能主要有:
图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。
另外,为了使图片更符合要求,我们还在photoshop中对所用的图片进行了处理,使得图片看起来更加精细美观,符合我们的主题要求。
4.使用背景图像
使用背景图像与使用背景色不同,使用背景色只将网页的背景用某种颜色填充,而使用背景图像则是将网页的背景用图像平铺。
这样做可以使制作的网页更美观好看。
网页中使用背景图像的具体步骤如下:
2.4.1.新建一个空白网页。
2.4.2.单击鼠标右键,弹出的快捷菜单里选“网页属性”,弹出“网页属性”对话框.
2.4.3.开“背景”选项卡。
2.4.4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框,然后单击下面的“浏览”按钮,出现一个“选择背景图片”对话框。
2.4.5.在“选择背景图像”对话框中单击“浏览文件”按钮,出现一个“选择文件”对话框。
2.4.6.在“选择文件”对话框的文件列表中选择图像文件,单击“确定”按钮。
这样,所选图片将作为整个网页的背景,如果在第4步时同时选中“水印”复选框,背景图片将显示为特殊的水印效果,当网页滚动时,背景不动,只有网页内容滚动,产生一种透明层的效果,非常吸引人。
5设置链接
选中图片或者文字,在下面的链接属性中输入所要连接到的地址,同时,下方的目标属性被激活,输入blank设置成在新窗口中打开网页。
我们设置了链接本站点的网页页面,同时也连接了外网,使得大家访问页面时能够查询更多详细的信息,方便用户查询。
4、网页制作过程
1.创建oppo主页
1.1在flash中用文字工具写一句“欢迎来到oppo世界”,降温子字体放大到合适大小,改颜色为红色,降帧数延伸到二十帧,在添加一个引导层,用椭圆工具画出一个椭圆,用橡皮擦擦去椭圆的一点,再在第一帧的时候把编辑好的文字移动到椭圆曲线的一段,再在第二十帧的时候把文字应椭圆曲线的另一段,再创建补间动画,一个主页欢迎词就设计好了
最后将其导出到所做作业的文件夹中即可。
1.2按照设计编写代码:
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http:
//www.w3.org/TR/html4/strict.dtd">
">登录 ">MYOPPO
/">
{if(this.value=="搜索..."){this.value=""}}'onfocus='javascript: {if(this.value=="搜索..."){this.value=""}}'onblur='javascript: {if(this.value==""){this.value="搜索..."}}'/> do_dearch($('#search_txt').val());">