1、Dreamweaver 学习网站制作设计说明书系 部： 信息工程系 学生姓名：专业班级： 网络 08D1 学 号：指导教师：2010 年 10 月 25 日目录内容摘要 .1一、引言 .11、Dreamweaver 发展前景与现状 .12、Dreamweaver 专题学习网站的内容和意义 .2二、开发工具的介绍 .2三、网站的具体规划 .31、 网站的功能结构 .32、网站的主题思想 .33、网站 LOGO 设计 .34、网站布局设计 .35、网站的内容 .4四、 页面设计过程 .41、一级导航页面设计 .42、 二级导航页面设计 .63、 三级导航页面设计 .8五、 总结 .9致谢 .10参
2、考文献 .11Dreamweaver 学习网站的设计与开发内容摘要本课题通过对 Dreamweaver 学习网站的制作，为使用者提供一个自主学习、测试的 Dreamweaver 的平台。网站采用了清新自然的绿色为主色调，颜色明快柔和，界面美观简洁。清新的绿色让学习者产生视觉上的放松。本网站文本简明、通俗易懂，整体结构清晰、统一，便于学习。网站资源丰富、层次清楚、内容严谨。页面多处插入了 flash，使得页面更加生动、活泼，富有感染力。网站导航清晰，布局简单却不单调，让学习者能够一目了然，方便快捷。本网站采用了实例教学的手法，使得学习者能够更加直观地去学习。此外，还增加了在线测试的功能，打破了以
3、往只能够“教”而不能够“测”的网站，这样才能使学习者更加直接地了解自己的学习情况，从而提高自己的学习能力1、引言（1）Dreamweaver 的发展前景与现状Dreamweaver 是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网站设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它于 1997 年首次推出。2002 年推出 Dreamweaver UltraDev，它主要运用其核心的 Roundtrip HTML 技术，可确保在切换程序代码与设计检视时的程序代码质量，Dre
4、amweaver 成为专业网站外观设计的先驱。2002 年推出了 Dreamweaver MX ,目的是支持现代网页专业人员兼备的多重角色。2003 年推出 Dreamweaver MX 2004，新增了对以往 CSS 为基础设计与开发提供支持的革命性功能，将网页设计提升到新的层次。之后，又推出 Dreamweaver 8,它是以之前版本为基础，扩充了主要范围的功能，例如XML 和 CSS，并简化了其工作流程，以帮助使用者事半功倍。在这个高速发展的信息化时代，Dreamweaver 仍然是目前最流行的网页制作软件之一，它最佳的制作效率、网站管理能力、及无可比拟的控制能力等特点，使得网页制作变得
5、更加简单、快捷、方便。（二）Dreamweaver 学习网站的内容和意义本网站的内容：根据指定的主题制作的一个 Dreamweaver 学习网站，其中包括Dreamweaver 知识的收集、分类、整理，确保内容的正确、逻辑严谨、层次清楚；提供友好的操作界面，方便学习者自主地学习；提供测试功能以便学习者及时测试自己的学习效果，以便更好地提高自己的能力。形成的一个内容正确实用，布局合理，色彩搭配协调，页面美观且比较完整的学习 Dreamweaver 知识的专题网站。本网站的意义：网上虽然有许多关于本专题的学习网站，但此次想通过自己的努力制作一个专门针对大专院校生，以及一些行外者学习的 Dreamw
6、eaver 学习网站。这样不仅能给学习者提供良好的学习环境，让他们可以免费地、自主地学习有关Dreamweaver 软件的知识，还可以通过制作本主题网站更一步提高自己的网页制作能力以及进一步深入地学习有关 Dreamweaver 知识。二、开发工具的介绍在本次的专题网站制作中，我主要使用了 Dreamweaver、Photoshop、Flash 等软件。使用 Dreamweaver 制作整个网站，对网页进行合理的排版和布局，同时也采用了CSS 样式，更好地显示了本网站元素及内容，具有更好的易用性和可扩展性，大大简化了网站的建设。使用 Photoshop 来设计网站的界面，以及对网站中一些图片的
7、处理，使得网站得到了美化。使用 Flash 软件制作了一些动态的 LOGO、滚动图片、滚动字幕等效果。使得整个网站看上去不会太死板，让网站显得更生动，更能够吸引学习者。三、网站的具体规划（一）网站的功能结构本专题网站中，主要设计了网站首页、课程展示、实例教程、在线测试、学习交流五个导航。网站首页提供了专题简介、教学方法、教学目标以及教学内容，让学习者对本学习网站有个初步的认识；课程展示提供了基础课程、进阶课程及网站技巧等内容，让学习者能够清晰地、循序渐进地学习相关内容；实例教程提供了一些实例教学及视频教学，让学习者通过实例进一步学习；在线测试提供了学习者自我检测的平台；学习交流提供了学习者相互
8、交流的平台。各个功能导航下还具体划分了小的导航链接，详细结构请见图31。本网站的意义：网上虽然有许多关于本专题的学习网站，但此次想通过自己的努力制作一个专门针对大专院校生，以及一些行外者学习的 Dreamweaver 学习网站。这样不仅能给学习者提供良好的学习环境，让他们可以免费地、自主地学习有关Dreamweaver 软件的知识，还可以通过制作本主题网站更一步提高自己的网页制作能力以及进一步深入地学习有关 Dreamweaver 知识。图 31 网站功能结构图（二）网站的主题思想首页网站首页 课程展示 实例教程 在线测试 学习交流专题简介教学方法教学目标教学内容基础课程进阶课程网站技巧视频教
9、程在线测试留言板本网站是一个 Dreamweaver 专题学习网站，目的就是要提供给学习者一个舒适的学习平台。网站的主题思想就是一切为了学习者能够通过本网站能够更好、更快、更舒适地学习。所以本网站分类清晰、内容丰富、由浅到深。语言通俗易懂，让那些原本对 Dreamweaver 知识一窍不通的学习者都能够自主学习。（三）网站 LOGO 设计本专题网站 LOGO，是用 Flash 制作的一个动态的 LOGO。 “Dreamweaver”从左往右滚动显示， “学习网站”从右向左滚动显示，这样会使得网站看上去不会太枯燥，单调。（四）网站布局设计本网站以清新自然的绿色为主色调，使学习者在视觉上产生眼前一
10、亮的视觉效果。本网站在布局上简单而又不显单调，朴素而又不失优雅。采用图文结合的方法让学习者能够更直观地学习。用 Flash 做一些动态效果，使得整个页面更加活泼生动。（五）网站的内容对本专题的学习课程内容进行收集、分类、整理，让学习者一目了然。在导航上清楚地呈现每个课程的标题，以便于学习者分类学习以及查找。在网站首页上的内容有：专题简介、教学方法、教学目标、教学内容四个链接导航，查看具体内容点击即可。在课程展示上的内容有：基础课程、进阶课程和网站技巧三块，其中基础课程中有新功能简介、窗口布局、菜单概述、常用工具栏、定义站点、创建页面、页面制作、超级链接、表格设计、框架技术和创建导航条共十一章内
11、容；进阶课程中有可视化操作 iframe、滚动字幕、弹出菜单、Dreamweaver 的插件、弹出窗口、添加音乐背景、操作框架、创建模板、应用模板、层及应用、行为事件和发布网站共十二章内容；网站技巧中有网页建设之色彩全攻略、网站优化的十大奇招妙计、网页设计应防止的 10个错误、令网站打开提高速度的 7 大秘方、网页制作高手进阶、浅谈设计中的文字、网页设计高手进阶技巧、巧用记事本编辑网页、Dreamweaver 编写 CSS 需要掌握的技巧、小技巧让你轻松 Diy 你的网页滚动条、巧用 DW 进行网页制作技巧、Dreamweaver 技巧12 条、个性化表单设计技巧五则、巧用背景颜色和间距制细边
12、表格共十二项内容。实例教学提供了以实例为基础的教学，可以让学习者更加直观地学习。主要采用录频工具制作了视频教学课程。在线测试提供了自我检测的平台，让学习者在学习的同时能够对自己所学内容的掌握情况有个认识，以便更好地提高自己的学习效率。学习交流提供了一个互相交流的平台，让学习者对所学习内容有个相互探讨的平台，以便促进学习。4、页面设计过程（一）一级导航页面设计首页设计首先是用 Photoshop 设计出页面的原型，将网站的导航都包括在里面，本网站导航是采用的一个四叶草的图片，跟网站主色调融合，使得整体页面更加和谐；然后进行切片，将切片好的图片放在指定的文件夹内；最后，在 Dreamweaver
13、界面中插入图片，以及所制作的 Flash，制作模板，这样更有利于网站页面的修改。制作效果如图 41 所示。图 41 网站首页效果图设计思想：网站的左上角是一个女孩在拿着一本书躺在宽阔的天空下，一眼就让人看出来这是一个学习网站，宽阔的天空正说明了知识的无穷无尽。右上角是用 Flash制作的一个动态的 LOGO,突出了本网站的主题Dreamweaver 学习网站。中间一部分是用 Flash 制作的一个滚动的图片展示效果，将一些本专题的教程和一些优秀的作品呈现出来。左下方是一个圆孤形状的图片，里面是网站首页的二级导航。右下方是一个友情提示，让学习者注意休息，保护视力！课程展示设计方法同上，设计效果如
14、 42所示。图 42 课程展示效果图（二）二级导航页面设计设计思想：页面上半部分减少图片展示区域其余与一级导航页面相同，下方左边是内容放置区域，右边是一个用 flash 制作的热点内容，这样使得页面更加简单整洁，让人有一种赏心悦目的视觉效果。效果图如 43、44 所示，其它页面整体设计与之相同。图 43 专题简介效果图图 44 基础课程效果图（三）三级导航页面设计设计思想：页面上方与二级导航页面一致，下方则为课程内容展示，如下图 45所示，其余与之相同。图 45 新功能简介效果图5、总结通过本次专题网站的制作自己对 Dreamweaver 有了进一步的深入了解，觉得自己学到了许多知识，在制作网
15、站技术上也有了一定的提高。之所以会选择该课题，是由于之前做过类似的网站，所以很有信心的选择了此课题。但当老师告知，这是要做一个学习网站，工作量是非常大的，而且还增加了以前从来没有接触过的录频工具和在线测试功能。这些显然使我的信心减少了许多，不过相信通过自己的不断努力，虚心请教一定会成功完成此次项目的。满怀信心的开始了本次的项目设计，在设计的过程中真的是问题不断，大大小小的问题全有，不过我并没有放弃，通过了自己的努力学习以及向老师同学请教，几乎都一一解决了这些问题。有句话说得好，问题并不可怕，可怕的是你在遇到这些问题时选择了放弃。通过不断地学习，不断地努力，在制作网页时为让我的网页更加丰富多彩，在网页中插入图像、动画、动态特效等，让浏览者更加直接，方便地了解我们的网站，同
