网站内容与功能设计( 石婷婷学习网站制作设计：信息工程系学生姓名 )

　　网站内容与功能设计(

石婷婷学习网站制作设计：信息工程系学生姓名

)

　　Dreamweaver 学习网站 制作

　　设计手册

　　系：信息工程系

　　学生姓名：石婷婷

　　专业课：网络08D1

　　*敏*感*词*：083422106

　　指导老师：米海英

　　2010 年 10 月 25 日

　　内容

　　内容摘要（1)

　　一、简介(1)

　　（一） Dreamweaver 的发展前景和现状（1)

　　(二）Dreamweaver学习网站的内容和意义(2)

　　二、开发工具介绍（2)

　　三、网站的具体方案（2)

　　（一）网站 功能结构（2)

　　(二）网站的主题创意(3)

　　(三）网站LOGO设计(3)

　　(四）网站版面设计(3)

　　(五）网站(3)

　　四、页面设计流程（4)

　　(一）一级导航页面设计(4)

　　(二）二级导航页面设计(6)

　　（三）三级导航页面设计（7)

　　五、总结(8)

　　谢谢 (9)

　　参考文献 (10)

　　Dreamweaver 学习网站 设计开发

　　抽象的

　　本课题通过Dreamweaver学习网站的制作，为用户提供一个Dreamweaver平台进行自主学习和测试。网站采用清新自然的绿色为主色调，色彩明快柔和，界面美观简洁。清新的绿色让学习者在视觉上放松。本网站文字简洁，通俗易懂，整体结构清晰统一，易学。网站资源丰富，层次清晰，内容严谨。网页上很多地方都插入了Flash，使网页更加生动、活泼、有感染力。网站 导航清晰，布局简洁而不单调，让学习者一目了然，方便快捷。

　　本次网站采用实例教学的方式，让学习者更直观地学习。另外增加了在线测试功能，打破了以往只能“教”不能“测”的网站，让学习者更直接地了解自己的学习情况，提高学习能力

　　一、简介

　　(一）Dreamweaver的发展前景和现状

　　Dreamweaver 是一款在美国开发的集成了网页制作和管理的所见即所得网页编辑器网站。它是第一套专为专业网站设计师开发的可视化网页开发工具。它可以轻松创建跨平台限制和浏览器限制的动态网页。

　　1997年首次推出，2002年推出Dreamweaver UltraDev，主要使用其核心Roundtrip

　　HTML 技术可以在程序代码和设计审查之间切换时保证程序代码的质量。Dreamweaver 已成为专业网站 *敏*感*词*，并简化了工作流程，帮助用户事半功倍。

　　在这个信息技术飞速发展的时代，Dreamweaver 仍然是目前最流行的网页制作软件之一。其最佳的生产效率、网站的管理能力，以及无与伦比的控制能力，让网页制作变得更简单、更快捷、更方便。

　　（二）Dreamweaver学习网站的内容和意义

　　本网站内容：根据指定主题制作的Dreamweaver学习网站，包括Dreamweaver知识的采集、分类、整理，确保内容正确、逻辑严谨、清晰；提供友好的操作界面，方便学习者自主学习；提供测试功能，让学习者及时测试自己的学习效果，从而更好地提高自己的能力。形成的内容正确实用，布局合理，配色协调，页面美观，学习Dreamweaver知识的题目比较完整网站。

　　这个网站的意义：虽然网上有很多关于这个话题的学习网站，但是这次我想用自己的努力，专门为大学生和一些人打造一个Dreamweaver学习外人。网站。这不仅会为学习者提供一个良好的学习环境，让他们可以免费、独立地学习Dreamweaver软件，而且通过制作这个主题网站，进一步提高他们的网页制作能力，进一步深入了解织梦者。

　　二、开发工具介绍

　　在这个专题网站的制作中，我主要使用了Dreamweaver、Photoshop、Flash等软件。

　　使用Dreamweaver制作整个网站，对网页进行合理的排版和布局，并采用CSS样式，更好的展示网站的元素和内容，具有更好的易用性和可用性可扩展性极大地简化了网站的构建。

　　使用Photoshop设计了网站的界面和网站中部分图片的处理，使网站美化。

　　使用Flash软件制作一些动态LOGO、滚动图片、滚动字幕等效果。让整个网站看起来不那么死板，让网站更加生动，对学习者更具吸引力。

　　三、网站的具体方案

　　(一）网站 功能结构

　　本主题网站主要设计了五个导航：网站首页、课程展示、示例教程、在线测试、学习交流。网站首页提供主题介绍、教学方法、教学目标和教学内容，让学习者对学习有一个初步的了解网站；课程展示提供基础课程、高级课程和网站技术等内容，让学习者可以清晰、循序渐进地学习相关内容；实例教程提供了一些实例教学和视频教学，让学习者通过实例进一步学习；在线测试为学习者提供了一个自我测试的平台；学习交流为学习者提供了一个相互交流的平台。

　　这个网站的意义：虽然网上有很多关于这个话题的学习网站，但是这次我想用自己的努力，专门为大学生和一些人打造一个Dreamweaver学习外人。网站。这不仅会为学习者提供一个良好的学习环境，让他们可以免费、独立地学习Dreamweaver软件，而且通过制作这个主题网站，进一步提高他们的网页制作能力，进一步深入了解织梦者。

　　图3-1 网站功能*敏*感*词*

　　(二）网站的主题

　　本网站是Dreamweaver主题学习网站，目的是为学习者提供一个舒适的学习平台。网站的主题就是让学习者通过这个网站更好、更快、更舒适地学习。所以这个网站分类清晰，内容丰富，由浅入深。该语言易于理解，允许对 Dreamweaver 一无所知的学习者自行学习。

　　(三）网站LOGO设计

　　本主题的网站LOGO是用Flash制作的动态LOGO。“织梦者”从左到右滚动，“学习网站”从右到左滚动。这将使 网站 看起来不那么无聊和单调。

　　(四）网站版面设计

　　这款网站采用清新自然的绿色作为主色调，让学习者拥有明亮的视觉效果。网站的布局简洁而不单调，简洁而不失优雅。图文结合的方式，让学习者学习更直观。用Flash做一些动态效果，让整个页面更加生动活泼。

　　（五）网站的内容

　　对本课题的学习课程内容进行采集、分类、整理，使学习者一目了然。每门课程的标题都清晰地呈现在导航上，方便学习者分类搜索。

　　网站首页的内容包括四个链接导航：话题介绍、教学方法、教学目标、教学内容。只需点击即可查看具体内容。

　　课程展示内容包括：基础课程、高级课程和网站技能。基础课程包括新功能介绍、窗口布局、菜单概览、常用工具栏、定义站点、创建页面和页面。制作、超链接、表格设计、框架技术、导航栏制作共十一章；高级课程包括可视化操作iframe、滚动字幕、弹出菜单、Dreamweaver插件、弹出窗口、添加音乐背景、操作框架、创建模板、应用模板、图层和应用、行为事件和发布网站共十二章；网站技巧包括网页构建的综合策略，以及网站优化技巧Coupe，网页设计应该防止的10个错误，让<

　　进阶进阶大师，谈设计中的文字，网页设计大师进阶进阶技巧，巧妙使用记事本编辑网页，Dreamweaver编写CSS的技巧与技巧掌握，轻松DIY你的网页滚动条，巧妙使用DW网页制作技巧12项，Dreamweaver技巧12项，个性化表单设计技巧5项，巧妙利用背景色和间距制作细边表格。

　　示例教学提供基于示例的教学，让学习者更直观地学习。视频教学课程主要使用视频录制工具制作。

　　在线测试提供了一个自我测试的平台，让学习者在学习的同时了解自己对所学知识的掌握程度，从而更好地提高学习效率。

　　学习交流提供了一个相互交流的平台，让学习者有一个平台，可以相互讨论所学，从而促进学习。

　　四、页面设计流程

　　(一）一级导航页面设计

　　首页设计首先使用Photoshop来设计页面的原型，包括网站的导航。本次网站导航采用了四叶草的图片，后跟网站融合的主色调，让整体页面更加和谐；然后切片，将切片后的图片放入指定文件夹；最后在Dreamweaver界面插入图片，制作Flash，制作模板，更有利于网站页面的修改。生产效果如图4-1所示。