Dreamweaver网站制作毕业设计说明书优质资料Word文档下载推荐.docx
- 文档编号:21414009
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:12
- 大小:186.68KB
Dreamweaver网站制作毕业设计说明书优质资料Word文档下载推荐.docx
《Dreamweaver网站制作毕业设计说明书优质资料Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《Dreamweaver网站制作毕业设计说明书优质资料Word文档下载推荐.docx(12页珍藏版)》请在冰豆网上搜索。
4、网站布局设计4
5、网站的内容4
四、页面设计过程4
1、一级导航页面设计4
2、二级导航页面设计6
3、三级导航页面设计8
五、总结9
致谢10
参考文献11
Dreamweaver学习网站的设计与开发
内容摘要
本课题通过对Dreamweaver学习网站的制作,为使用者提供一个自主学习、测试的Dreamweaver的平台。
网站采用了清新自然的绿色为主色调,颜色明快柔和,界面美观简洁。
清新的绿色让学习者产生视觉上的放松。
本网站文本简明、通俗易懂,整体结构清晰、统一,便于学习。
网站资源丰富、层次清楚、内容严谨。
页面多处插入了flash,
使得页面更加生动、活泼,富有感染力。
网站导航清晰,布局简单却不单调,让学习者能够一目了然,方便快捷。
本网站采用了实例教学的手法,使得学习者能够更加直观地去学习。
此外,还增加了在线测试的功能,打破了以往只能够“教”而不能够“测”的网站,这样才能使学习者更加直接地了解自己的学习情况,从而提高自己的学习能力
」、引言
(一)Dreamweave啲发展前景与现状
Dreamweaver是美国MACROMEDIA开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网站设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
它于1997年首次推出。
2002年推出DreamweaverUltraDev,它主要运用其核心的
RoundtripHTML技术,可确保在切换程序代码与设计检视时的程序代码质量,
Dreamweaver成为专业网站外观设计的先驱。
2002年推出了DreamweaverMX,目的是支持现代网页专业人员兼备的多重角色。
2003年推出DreamweaverMX2004新增了对以往CSS为基础设计与开发提供支持的革命性功能,将网页设计提升到新的层次。
之后,又推出Dreamweaver8,它是以之前版本为基础,扩充了主要范围的功能,例如XML和css并简化了其工作流程,以帮助使用者事半功倍。
在这个高速发展的信息化时代,Dreamweaver仍然是目前最流行的网页制作软件之一,它最佳的制作效率、网站管理能力、及无可比拟的控制能力等特点,使得网页制作变得更加简单、快捷、方便。
(二)Dreamweaver学习网站的内容和意义
本网站的内容:
根据指定的主题制作的一个Dreamweaver学习网站,其中包括Dreamweaver知识的收集、分类、整理,确保内容的正确、逻辑严谨、层次清楚;
提供友好的操作界面,方便学习者自主地学习;
提供测试功能以便学习者及时测试自己的学习效果,以便更好地提高自己的能力。
形成的一个内容正确实用,布局合理,色彩搭配协调,页面美观且比较完整的学习Dreamweaver知识的专题网站。
本网站的意义:
网上虽然有许多关于本专题的学习网站,但此次想通过自己的努力制作一个专门针对大专院校生,以及一些行外者学习的Dreamweaver学习网站。
这样不
仅能给学习者提供良好的学习环境,让他们可以免费地、自主地学习有关Dreamweaver
软件的知识,还可以通过制作本主题网站更一步提高自己的网页制作能力以及进一步深入地学习有关Dreamweaver知识。
二、开发工具的介绍
在本次的专题网站制作中,我主要使用了DreamweaverPhotoshop、Flash等软件。
使用Dreamweaver制作整个网站,对网页进行合理的排版和布局,同时也采用了CSS样式,更好地显示了本网站元素及内容,具有更好的易用性和可扩展性,大大简化了网站的建设。
使用Photoshop来设计网站的界面,以及对网站中一些图片的处理,使得网站得到
了美化。
使用Flash软件制作了一些动态的LOGO滚动图片、滚动字幕等效果。
使得整个网站看上去不会太死板,让网站显得更生动,更能够吸引学习者。
三、网站的具体规划
(一)网站的功能结构
本专题网站中,主要设计了网站首页、课程展示、实例教程、在线测试、学习交流五个导航。
网站首页提供了专题简介、教学方法、教学目标以及教学内容,让学习者对本学习网站有个初步的认识;
课程展示提供了基础课程、进阶课程及网站技巧等内容,让学习者能够清晰地、循序渐进地学习相关内容;
实例教程提供了一些实例教学及视频教学,让学习者通过实例进一步学习;
在线测试提供了学习者自我检测的平台;
学习交流提供了学习者相互交流的平台。
各个功能导航下还具体划分了小的导航链接,详细结构请见图3—1。
网上虽然有许多关于本专题的学习网站,但此次想通过自己的努力制作一个专门针对大专院校生,以及一些行外者学习的Dreamweave学习网站。
首页
在线测试
图3—1网站功能结构图
(二)网站的主题思想
本网站是一个Dreamweaver专题学习网站,目的就是要提供给学习者一个舒适的学习平台。
网站的主题思想就是一切为了学习者能够通过本网站能够更好、更快、更舒适地学习。
所以本网站分类清晰、内容丰富、由浅到深。
语言通俗易懂,让那些原本对Dreamweaver知识一窍不通的学习者都能够自主学习
(三)网站LOGC设计
本专题网站LOGO是用Flash制作的一个动态的LOGO"
Dreamweave”从左往右滚动显示,“学习网站”从右向左滚动显示,这样会使得网站看上去不会太枯燥,单调。
(四)网站布局设计
本网站以清新自然的绿色为主色调,使学习者在视觉上产生眼前一亮的视觉效果。
本网站在布局上简单而又不显单调,朴素而又不失优雅。
采用图文结合的方法让学习者能够更直观地学习。
用Flash做一些动态效果,使得整个页面更加活泼生动。
(五)网站的内容
对本专题的学习课程内容进行收集、分类、整理,让学习者一目了然。
在导航上清楚地呈现每个课程的标题,以便于学习者分类学习以及查找。
在网站首页上的内容有:
专题简介、教学方法、教学目标、教学内容四个链接导航,查看具体内容点击即可。
在课程展示上的内容有:
基础课程、进阶课程和网站技巧三块,其中基础课程中有新功能简介、窗口布局、菜单概述、常用工具栏、定义站点、创建页面、页面制作、超级链接、表格设计、框架技术和创建导航条共十一章内容;
进阶课程中有可视化操作iframe、滚动字幕、弹出菜单、Dreamweaver的插件、弹出窗口、添加音乐背景、操作框架、创建模板、应用模板、层及应用、行为事件和发布网站共十二章内容;
网站技巧中有网页建设之色彩全攻略、网站优化的十大奇招妙计、网页设计应防止的10个错误、
令网站打开提高速度的7大秘方、网页制作高手进阶、浅谈设计中的文字、网页设计高手进阶技巧、巧用记事本编辑网页、Dreamweaver编写CSS需要掌握的技巧、小技巧让
你轻松Diy你的网页滚动条、巧用DW进行网页制作技巧、Dreamweaver技巧12条、个性化表单设计技巧五则、巧用背景颜色和间距制细边表格共十二项内容。
实例教学提供了以实例为基础的教学,可以让学习者更加直观地学习。
主要采用录频工具制作了视频教学课程。
在线测试提供了自我检测的平台,让学习者在学习的同时能够对自己所学内容的掌握情况有个认识,以便更好地提高自己的学习效率。
学习交流提供了一个互相交流的平台,让学习者对所学习内容有个相互探讨的平台,以便促进学习。
四、页面设计过程
(一)一级导航页面设计
首页设计首先是用Photoshop设计出页面的原型,将网站的导航都包括在里面,本网站导航是采用的一个四叶草的图片,跟网站主色调融合,使得整体页面更加和谐;
然后进行切片,将切片好的图片放在指定的文件夹内;
最后,在Dreamweaver界面中插入
图片,以及所制作的Flash,制作模板,这样更有利于网站页面的修改。
制作效果如图
4-1所示。
却+工业职业摂朮麺
图4—1网站首页效果图
设计思想:
网站的左上角是一个女孩在拿着一本书躺在宽阔的天空下,一眼就让人
看出来这是一个学习网站,宽阔的天空正说明了知识的无穷无尽。
右上角是用Flash制
作的一个动态的LOGC突出了本网站的主题一Dreamweaver学习网站。
中间一部分是用Flash制作的一个滚动的图片展示效果,将一些本专题的教程和一些优秀的作品呈现出来。
左下方是一个圆孤形状的图片,里面是网站首页的二级导航。
右下方是一个友情提
示,让学习者注意休息,保护视力!
课程展示设计方法同上,设计效果如4-2所示
耳咄谍程
茶阶溟评
刪菟枝巧
图4—2课程展示效果图
邮■:
加LL
】r聒胃盘54屯屯弄*•畋峙
?
.同耳佻叱】。
亠爭沟密汁
3,IhrttiaveriMsrj2+-
q,禺貝谣计辰愴】叶楝审
5,巧用R遙铮罔翌利TK地可
Dmm*可以用量决U沏式狷Ei『电枷fk
右pM“沁轉爲莒案移至顾上.使用检色吸管工具选把翥屏上的颤色可设定咼接逬网而的垂全色•只要一亍蔺单的歩澤便可完成.
哽用网站电圉可快建制榨网站養陥>谡计丄更新和蓝祖测・改3E刚页应JE巫君実容称』它令自动更覇所皙连结■便用语洁的頂寻最总换功老使得复訣的瞬更新査得迅ii又AS单.
、枫觉化圖5与廉垢码狷拇盼前段计工且甲它
■是唯一科马是供:
抵血肌臼戸HTIffL
*1用』“師血叫■设计的网贡■可方应的
呈规莊任何平倉的按门i训扯黑上.鹿用不冋浏益
图4—3专题简介效果图
3
ua
1
弟二至
面口木局
W£
*
MEB*
第用工良栏
9)
整五中
定文站点
I-寤更MU冬实匕妙愛¥
■磚
2,叩JitvitdD我廿Is屮r
』・叶*訴"
射・「:
^工512索
忙曲灵诈廿■呂愴旳平时鼻
5»
T7Hr*irkiMF
璽丸章创逢匹面
逻七章
页询制悴
表格邊计
M+*
框起技菲
慎十一审创站航秦
图4—4基础课程效果图
(三)三级导航页面设计
页面上方与二级导航页面一致,下方则为课程内容展示,如下图
所示,其余与之相同
笫一章新功能简介
IWf”胡w禹心注沁*mME2004(简称时MX2004)■副也柠血曲丸爭jtf幵St的的错霍」用于朗料t站审“讼bpT和丙血乱用卷序逬行设
沐操码和秆发・MHI200^包含背f崭紙睛洛髙就的界面丿且性陀也得到了改进.此外■走包含了联卿嘶功能•裁善了較件的易用住井瑛眶无论处于设计环慎还昙聊瞬擁都可即力便鮭盛页而.
【讯眶皿kesm的新功能首介】
■简洁高効的设计和开接界而:
畀直更易于楼月-可礎的工柞效事和工忤质量切査幌鬲・
■"
ffiA"
芒踽逬:
陋洁鬲效的》i外观』占周更少的工作H空问.还浙埒加了1片^收ar無刖•迓可以科!
ftAH,芒逬行目足义・鶴6寓隹用的对缺放置在谯拦上.
矗表格集輯可视化:
在褰梏甲建行壷调JEtfttt时乍留和实就尅果.
■用尸界耐逬:
可得到绘雄可用工柞区■更浩号也显录上下文和偉点』更易于•史用甜更MLSSK:
・
■起始艮:
隹痢濟谕阿蚤近便用过的丈件•创遲新史件耐问酬ra2CO4SiS.起顷总隹思启励加ra2CM或尚未打开寰档时話示.
心保存点面IS项:
使倨叩递择肖倨賣航启动巩虹2TO*聊sm开雄上一Ji曜用的轴.
耳讥旨逾迴示相廉存这眩手炼
Anin览的歧持Mm虱抵山叭匚蔚吏持踰有空牢績码方比桂可U哽用几乎蘭有堆船系境申珈的選吉宇俸・&
*KE
图4—5新功能简介效果图
五、总结
通过本次专题网站的制作自己对Dreamweaver有了进一步的深入了解,觉得自己学到了许多知识,在制作网站技术上也有了一定的提高。
之所以会选择该课题,是由于之前做过类似的网站,所以很有信心的选择了此课题。
但当老师告知,这是要做一个学习网站,工作量是非常大的,而且还增加了以前从来没有接触过的录频工具和在线测试功能。
这些显然使我的信心减少了许多,不过相信通过自己的不断努力,虚心请教一定会成功完成此次项目的。
满怀信心的开始了本次的项目设计,在设计的过程中真的是问题不断,大大小小的问题全有,不过我并没有放弃,通过了自己的努力学习以及向老师同学请教,几乎都一一解决了这些问题。
有句话说得好,问题并不可怕,可怕的是你在遇到这些问题时选择了放弃。
通过不断地学习,不断地努力,在制作网页时为让我的网页更加丰富多彩,在网页中插入图像、动画、动态特效等,让浏览者更加直接,方便地了解我们的网站,同时在视觉上给人一种赏心悦目的感受。
在制作网站中,我使用了PS图片处理工具、FLASH软件、Dreamweave及css处理样式等。
以前也只是掌握了些基础的知识,现在对这些已经有了进一步的了解,也比以前更能熟练地运用这些软件了。
在制作网站时,我也浏览了一些相关的网站,它们有的网站不仅内容丰富,页面图文并茂,在整体样式上也比较新颖,这是我去值得学习的,我们应该学习它们的精华部分,让自己的网站更加地完善。
通过这次制作网站的过程,我个人有以下几点心得体会:
(1)在制作网站的前期工作也很重要,这是我们容易忽略的。
一个好的计划可以详细制定网站的相关内容,为后期的制作节省不少时间,同时也使网页的结构,主题更加清晰。
⑵在制作网站时,不能随心所欲,要有一个大体的构思,使整个网页层次分明,使人看了一目了然。
(3)在内容选取上要全面、可靠、严谨。
(4)要有自己的独特风格,不能一味地去借鉴别人的网站,结构要新颖,有创意。
虽然我的网站并不是用很专业的技术手段制作而成的,也有许多的不足之处,例如:
网站的导航过于简单、flash做得还不够专业、视频教学及在线测试功能还需强化等。
但是我也有自己的特色,如:
页面布局简洁清晰、内容由浅到深层层递进、语言通俗易懂及提供了在线测试功能等。
我相信通过自己的不断学习、不断丰富自己、不断开拓视野、增强自己的实践操作技能,为以后能做出更加出色的网站而努力!
致谢
在做毕业设计期间,并不是一帆风顺的。
虽然以前做过网站,但是像这种专题学习网站还是第一次接触。
就在我一头雾水,不知从何做起的时候,我的指导老师密老师给我仔细地讲解了一些关于学习网站要完成的任务,以及达到什么样一个效果,让我有了一个大概的思路。
为了让我们能够按时完成项目设计,暑假期间,密老师也时常督促我们,为我们解决遇到的一些问题。
非常感谢密海英老师的耐心指导和帮助,让我能够成功地完成此项目。
同时也要感谢给我帮助的同学们,谢谢你们!
参考文献
[1]王蒙田•网页制作三合一教程[M].中国水利水电学出版社,2006.7
[2]刘瑞新.Dreamweaver8网页制作短训教程[M].机械工业出版社,2007.1
[3]陆玉柱.Dreamweaver网页制作宝典[M].电子工业出版社,2007.1
[4]陈学平.Dreamweaver8.0网页制作自学手册[M].电子工业出版社,2006.6
[5]王娜.Dreamweaver网页制作与色彩搭配全攻略[M].清华大学出版社,2006.9
[6]杨志姝、吴俊海.Dreamweaver8网页制作与网站开发标准教程[M].清华大学出
版社,2006.5
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver 网站 制作 毕业设计 说明书 优质 资料
![提示](https://static.bdocx.com/images/bang_tan.gif)