网页设计flash+xml网站毕业设计文档格式.docx
- 文档编号:17646061
- 上传时间:2022-12-07
- 格式:DOCX
- 页数:10
- 大小:104.02KB
网页设计flash+xml网站毕业设计文档格式.docx
《网页设计flash+xml网站毕业设计文档格式.docx》由会员分享,可在线阅读,更多相关《网页设计flash+xml网站毕业设计文档格式.docx(10页珍藏版)》请在冰豆网上搜索。
2.1.技术框架设计4
2.2.功能模块设计4
2.2.1首页4
2.2.2关于我5
2.2.3我的日志5
2.2.4平时收集5
2.2.5感谢你们5
2.2.6联系我6
2.2.7博客6
3项目功能描述7
3.1.加载环境7
3.2.首页7
3.3.关于我7
3.4.我的日志7
3.5.平时收集8
3.5.1网页截图8
3.5.2平面8
3.6.感谢你们8
3.7.联系我9
3.8博客9
4项目技术总结10
4.1技术创新及特点10
4.1.1技术创新10
4.1.2技术特点10
4.2个人收获与体会10
1项目开发目标
1.1.项目来源
本项目是自选题目
1.2.开发目标
以计算机、网络为特征的信息社会深深改变了人们的生活方式,商业化的Internet自崛起开始便爆炸式的发展至世界各地,成为新的传播媒体。
全球各行各业纷纷利用互联网建立自己的Web站点,吐纳着信息潮流,竞争日益激烈。
这就是网站传达效率的竞争。
数字媒体时代的到来,使人们不在满足于简单直接的信息传达,人们渴望在接受信息的同时能够带来一种视觉享受。
Flash网站能帮助企业在激烈的商业竞争中全面、动态的展示企业的优势与产品特点,让浏览者在轻松、有趣的视觉感受中,以最短的时间了解企业资讯。
Flash是目前在网络应用中最好的多媒体动画,强烈的视觉冲击力给浏览者带来全新的感受,更易留下深刻的印象,能够极好的达到理想的宣传效果,全力营造出美仑美化的企业形象。
综合来说,Flash网站是一种艺术与技术相结合产物。
Flash网站是以艺术介入技术层面来达到视觉推广的目的,这样的好处是能够更好的针对目标人群,把商品的档次、适应人群,以艺术效果的形式体现出来。
随着互联网带宽的不断增加和Flash对互联网的影响力的不断增强,人们已经认可在HTML页面上加入一些Flash的元素会使页面更生动形象。
自从2000年以后,开始不断涌现全Flash网站,但人们对他的认识并不是很深,大部分人会认为Flash网站会影响访问的速度。
在Flash发展初期和带宽有限的情况下确实存在这种现象,随着计算机网络的发展,传输速率加快,这一现状也将得到解决。
目前Flash网站在较多应用于企业产品文化推广,或者自身业务宣传,在较少部分也有个人、风景、音乐类纯艺术Flash网站。
基于上述,此项目主要用于对个人资料,经历等资料进行介绍,日志,作品的发布分享以及展示,及有相同爱好的朋友提供联系的个人网站
2项目总体设计
2.1.技术框架设计
根据网站配色资料指导,应用photoshop5对各类图片素材进行编辑处理,用Dreamweaver对javascript代码以及xml文件进行编写,最后在flash5.5环境下,根据Actionscript编写实现对外部的xml文件进行读取。
配色是每个网站首先考虑的部分,好的配色方案可以影响网站布局和谐美观,吸引浏览者;
photoshop5强大的图片处理功能,提供处理网站的logo,图标,以及一些内容图片;
dreamweaver是网站布局设计的首选环境,不仅各种视图使用方便而且提供强大的联想功能;
javascript对普遍使用的脚本工具对本网站留言进行内容验证;
flash5.5是最新的flash编辑环境,通过对舞台,角色控制,以及各种动画的控制,完成整个页面的静态设计。
Actionscript是flash中的语言,可以实现比较复杂的动画效果,与用户交互部分,xml文件此时可以看做是一个小型的数据库,比如图片地址,但同时一些参数同样写在其中。
2.2.功能模块设计
本项项目共有7个一级模块,分别是首页,关于我,我的日志,平日搜集,感谢你们,联系我,博客;
2个二级模块,是平日搜集中得网页截图,平面。
图1功能模块树形图
2.2.1首页
搜集的优秀图片或者照片进行展示,栏目包括两个自动进行图片及注解定时切换,左右暂停按钮控制图片的浏览
其中图片及注解浏览自动播放主要用于解说对一些个人比较满意或者特别有感触的图片进行展示,可以看做是幻灯片式的图片切换展示。
左右按钮暂停控制,当用户对播放形式速度想有自己的操作时,可以点击相应按钮进行控制,当点击左右按钮是可以进行向前向后的图片切换,点击暂停,开始时控制图片展示的自动播放。
此外如果用户鼠标移出图片展示范围时,则自动隐藏按钮。
2.2.2关于我
对我自己进行展示介绍以及资料展示,栏目包括个人信息浏览;
滚动条牵引浏览隐藏内容
展示个人信息,对本人的信息进行展示,供浏览者进行阅览
滚动条牵引浏览隐藏内容的作用是当浏览者阅读完本页内容后,点击滚动条可以浏览下放被隐藏的个人信息内容,此外当用户鼠标经过滚动条时,则滚动条变宽加长。
2.2.3我的日志
进行日志的选择,详细浏览功能,其中包括鼠标经过自动进行上滚下滚得日志列表;
展示日志时超出指定高度时,出现鼠标经过会变化滚动条。
日志列表部分中页面加载后是静止的,但是当浏览者鼠标经过时,如果靠近上部,则自动动态的向上滚动,显示上部分被隐藏的列表信息,如果靠近下部分效果同样。
点击后进入详细信息,如果比部分的日志内容超过指定的遮罩层宽度,则出现滚动条,同时用户经过滚动条时滚动条发生变化,上下拉动式时牵引内容滚动。
2.2.4平时收集
1)网页截图
对曾经设计,静态化制作的网页进行截图展示,包括自动切换图片、左右暂停按钮控制播放、头部前后按钮控制图片组的切换。
当浏览者打开此栏目时,网页截图自动定时向左切换,如果遇到最后一张也会自动跳到第一张,而且右部分打开此图片组的描述。
左右暂停按钮控制播放,如果浏览者不满意当前浏览形式,或者想仔细看某一张图片时,可以点击左右按钮控制,或者不想要自动浏览效果时,可以点击暂停控制
如果浏览者希望看下组的网页截图时,可以点击头部的向上向下按钮进行切换,同样也是动态的向左快速切换效果。
2)平面
对一些好的设计效果,或者有哲理的图片进行展示,模块包括自动切换图片、左右暂停按钮控制播放、头部前后按钮控制图片组的切换。
当浏览者打开此栏目时,图片自动定时向左切换,如果遇到最后一张也会自动跳到第一张,而且右部分打开此图片组的描述。
如果浏览者希望看下组的平面设计时,可以点击头部的向上向下按钮进行切换,同样也是动态的向左快速切换效果。
2.2.5感谢你们
完成项目时给予帮助指导的人员表示感谢,模块包括感谢文字,以及一些参考网站的logo列举
当用户鼠标经过停留在此内容上时,图片清晰度发生变化,一方面提示浏览者当前选择的部分,也使得文字或者图标清晰可见,增加阅读的方便性
2.2.6联系我
当用户想要对我发邮件进行交流时,此部分则提供此项功能。
其中包括对填写内容的验证和发送模块
内容验证中,对填写者的用户名,电子邮箱,内容进行为空验证,如果不符合习惯则进行友好提示
发送模块,当用户内容全部都符合规范时,点击按钮则可以向本人的邮箱发送邮件,而且也会提示邮件发送成功,并且会及时处理
2.2.7博客
如果用户觉得次个人网站仍然不能足够了解,可以点击此项目打开新的窗口连接到我的博客,进一步交流。
3项目功能描述
flash+xml网站包含首页,关于我,我的日志,平时收集,感谢你们,联系我,博客多个模块,不仅方便浏览者更加了解我的个人情况,还可以吸引更多招聘者对我的观者,同时此也为一个比较好的自我认识,分享的平台。
3.1.加载环境
打开网站loading动画:
可以检测网站内容的实际加载情况,实现对width的控制,实现从两边向中间收拢的动态效果。
加载版权所有,加载背景音乐:
实现渐现效果,根据参数调节alpha属性控制,根据时间,将alpha参数进行递归数值改变。
加载背景图片及遮罩背景:
根据template.xml中提供的地址数据进行背景图片和遮罩图片的加载。
轮次加载标题头部,网站签名,以及各栏目:
个栏目按钮之间逐个加载,而且监控鼠标的移动,当鼠标经过某个栏目时,栏目所载的按钮width参数加大,实现按钮的长度变化,而且替换按钮的文字,及显示注释。
加载声音控制按钮,全屏按钮:
声音按钮通过onclick时间点击实现关闭声音,打开声音,全屏点击是触发计算屏幕宽高
3.2.首页
动态打开遮罩层及更换背景:
遮罩层从屏幕右方滑出,有细线展开,即首先加大width的数值,达到一定后改变height的数值,实现动态展开,同时从template.xml中读取此时对应得背景图片路径,并且替换当前的bgimage参数内容。
加载home.swf文件以及连接template.xml文件中内容:
根据template.xm打开swf文件,并自动播放flash,即动态开始切换图片的以及图片的注解
定时对图片进行各类切换效果:
不进行任何操作时图片隔时间自动切换,同时切换效果自主控制,即根据参数kenburn指定的方向速度,例如由左上向右下角切换以及切换速度等自动隐藏左右以及暂停按钮:
当鼠标移开flash范围时,自动隐藏暂停,向左,向右按钮,当放上的时候显示,即修改参数alpha为0或者1,以及递归性变化;
点击左向按钮向前翻页,点击向右按钮向后翻页,暂停按钮停止自动播放。
关闭home.swf文件以及遮罩层:
单击其他项目时关闭flash.swf文件加载新的文件,以及收拢遮罩层
3.3.关于我
动态打开遮罩层及更换背景:
遮罩层从屏幕右方滑出,细线,即首先加大width的数值,达到一定后改变height的数值,实现动态展开,同时从template.xml中读取此时对应得背景图片路径,并且替换当前的bgimage参数内容然后动态展开指定宽度,同时从template.xml中读取此时对应得背景图片,以及在bio_settings.xml制定的宽高以及滚动条属性
加载html.swf文件以及链接bio_settings.xml文件:
根据宽度高度参数设置,等比缩放flash文件,然后自动打开swf文件,等待浏览者操作。
引滚动条进行内容滚动:
当鼠标经过时滚动条变粗,跟踪鼠标位置,当鼠标进入滚动条范围内width加大,左键不放可以进行下拉进行查看内容。
3.4.我的日志
点击动态打开遮罩层以及更换背景:
遮罩层从屏幕右方滑出,细线,即首先加大width的数值,达到一定后改变height的数值,实现动态展开,同时从template.xml中读取此时对应得背景图片路径,并且替换当前的bgimage参数内容然后动态展开指定宽度,然后动态展开指定宽度,同时从template.xml中读取此时对应得背景
加载news.swf文件以及链接news_settings.xml文件:
打开swf文件,等待浏览者操作。
志列表跟随鼠标滚动:
当鼠标移至列表最上一条时,自动向上滚动,同样方法向下滚动,即监控鼠标移动,当一直列表最上的栏目是后,列表数组指针上移动实现上滚,同样方法实现下滚
日志列表项目颜色改变:
当加载后为第一种颜色,鼠标经过后为第二种颜色,当点击瞬间出现第三种颜色
自动出现滚动条:
自动判断内容是否超过指定高度,如果已经超过则出现滚动条;
当鼠标经过时候宽度加大,即改变width属性值,点击拖动后实现内容滑动跟随。
关闭news.swf文件以及遮罩层
3.5.平时收集
点击打开二级菜单列表:
将此项目type属性设置成为multiple,即说明此栏目下有子项目,当鼠标点击时候,平滑滑出被隐藏的两个二级项目
3.5.1网页截图
点击打开遮罩层以及更换背景:
遮罩层从屏幕右方滑出,细线,然后动态展开指定宽度,即首先加大width的数值,达到一定后改变height的数值,实现动态展开,同时从template.xml中读取此时对应得背景图片路径,并且替换当前的bgimage参数内容然后动态展开指定宽度,同时从template.xml中读取此时对应得背景
加载folio.swf文件以及链接folio_web_settings.xml文件:
打开swf文件,开始默认切换图片以及图片注解
图片切换:
当用户不进行任何操作时图片,默认情况下图片向左定时切换。
图片上左右以及暂停隐藏按钮,监控鼠标移动,当移出范围时候将alpha设置成为0,即实现隐藏
头部prev以及next按钮进行内容组切换,使用数组,根据用户点击,触发指针移动的事件,进行切换组。
3.5.2平面
加载folio.swf文件以及链接folio_photo_settings.xm文件:
打开swf文件,开始默认切换图片以及图片注解。
进行图片定时向左切换:
把图片读进数组,监控时间,经过一段时间后,指针后移,实现图片切换。
图片上左右以及暂停隐藏按钮,监控鼠标移动,当移出范围时候将alpha设置成为0,即实现隐藏。
头部prev以及next按钮进行内容组切换:
使用数组,根据用户点击,触发指针移动的事件,进行切换组。
关闭folio.swf文件以及遮罩层:
单击其他项目时关闭flash文件,加载新的文件,以及收拢遮罩层。
3.6.感谢你们
动态打开遮罩层以及更换背景:
遮罩层从屏幕右方滑出,细线,然后动态展开指定宽度,即首先加大width的数值,达到一定后改变height的数值,实现动态展开,同时从template.xml中读取此时对应得背景图片路径,并且替换当前的bgimage参数内容然后动态展开指定宽度,同时从template.xml中读取此时对应得背景。
加载clients.swf文件以及链接clients_settings.xml文件:
指定为一行两列的表格形式,即rows和cols分别为1和2,同时指定宽高各个“单元格”;
为避免文字样式问题直接将问题切成图片加载使用。
鼠标经过栏目透明度发生变化:
当鼠标移到图片范围内时出发事件,改变图片的透明度alpha参数值,当鼠标移走时恢复默认透明度。
3.7.联系我
加载contact.swf文件以及链接contact_settings.xml文件:
加载本人联系信息以及加载各个文本框,等待用户操作。
文本框鼠标经过颜色变化:
输入框内颜色变化,读取xml中color值,提示为浏览者此时为可以输入状态。
点击输入后颜色变化清晰,方便输入:
当用户单击鼠标,输入框进行第三次变色,颜色变淡,为用户更加看得清楚。
发送按钮:
经过发送按钮颜色变化,单机后执行向邮箱发送电子邮箱函数,以及提示有好信息。
各个文本框验证:
对姓名框进行为空验证,电子邮箱当为空或者格式不正确时进行提示,留言内同为空时进行提示修改,获取输入框内的值,判断是否符合规范,如果是则通过可以点击按钮,如果不合规范则提示重新输入。
关闭contact.swf文件以及遮罩层:
3.8博客
链接腾讯微博:
链接按钮直接点击在新的页面打开个人腾讯微博,设置栏目为链接形式,即type参数类型为"
link"
同时链接目标源scr为个人博客网址。
4项目技术总结
4.1技术创新及特点
4.1.1技术创新
普通全flash网站不具有很强的移植性,而本网站将多数参数写入外部独立文件中,为之后的网站继续升级维护提供方便。
其次可将本项目中xml文件一定程度上视为小型数据库,对数据添加,删除,修改等操作可以直接在xml文件中进行,实现网站与数据分离,网站结构清晰。
4.1.2技术特点
本次项目首先是结构清晰,一定程度上实现数据与网站flash的分离。
第二是用户体验良好,很多部分都是点击触发后动态生成,脱离了以往web网页的静态古板的感觉。
第三兼容性好,已经经过各主流浏览器如IE6IE7IE8火狐谷歌等验证,没有任何兼容性问题产生
Flash网站多采用代码是显示区域占据这个浏览器,是主体明确突出,不易在传达信息的时候,受到其他信息的干扰。
在层次结构上也更加人性化,既有应用性,又具有艺术性,切合现代人们的需求心理。
达到更好的效果,进而创造更多的利益。
在服装销售方面,原来的网站只能静态的展示各式各样的产品,即使是多角度的,也是没有交互性可言的。
Flash网站恰恰弥补了这种缺陷,配合3DSMAX、maya软件制作了类似上面可以360°
展示,并且可以随意换装的Flash销售网。
这种Flash网站同样适用于汽车等销售,360°
展示、随意更换颜色,是消费者在网上就可以对自己待定的车型进行全面的比对。
以生动形象的动画和交互式操作,给每一位访问者带来一种切身体验的访问感受,使用者在浏览的过程中自然而然的融入到网站中。
同时Flash已经具备了后端开发和数据显示的能力,可以完全胜任中小型网站的开发。
计算机网络发展日新月异,带宽不断提高,使得动画、音乐、电影的传输瓶颈正在逐渐消失。
在线实时收看高品质画面将成为现实,而这作为静态网页的优势将不再构成优势。
在未来虽然纯Flash网站不可能代替静态网站,但Flash网站成为主流,将在不久的将来成为现实。
4.2个人收获与体会
本文在指导教师的多次指导下终于完稿,感激之情,溢于言表。
同时在项目报告写作过程中,得到了其他许多教师和同学的指导和帮助,老师们严谨的治学态度、渊博的专业知识、崇高的职业品德、无私的奉献精神令我很感动,我从老师身上学到了做学问的态度、方法与知识,但更重要的是学到了做人的道理与做任何事情都应有的认真、严谨的态度。
另外,感谢校方给予我们这样一次机会,能够独立地完成一个课题,并在这个过程当中,给予我们各种方便,使我们在即将离校的最后一段时间里,能够更多学习一些实践应用知识,增强了我们实践操作和动手应用能力,提高了独立思考的能力。
再一次对我的母校表示感谢。
最后感谢在整个毕业设计期间和我密切合作的同学,和曾经在各个方面给予过我帮助的伙伴们,在大学生活即将结束的最后的日子里,我们再一次演绎了团结合作,让我把一个庞大的,从来没有上手的课题,圆满地完成了。
正是因为有了他们的帮助,才让我不仅学到了本次课题所涉及的新知识,更让我感觉到了知识以外的东西,那就是团结的力量。
此外经过本次项目的编写锻炼,我将这几年大学中学习的很多知识都进行了复习与应用。
在此次项目编写中我不仅应用学习的技术,而且按照很多理论知识,将各个步骤认真实施,即使其中遇到很多问题,但是在理论指导与老师同学帮助下,终于完成。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 flash xml 网站 毕业设计