基础的网页设计与制作
网页设计报告与心得体会
更多更新更免费论文网,专业毕业设计论文,课程设计源代码,上机实习报告,实验报告请点击www.lwfree.cn
信息工程与自动化学院 计算机科学技术 专业 2005 级
学生姓名： **
毕业设计（论文）题目： 基础的网页设计与制作
毕业设计（论文）内容：
制作一个动物网页，包括动物简介，动物成语，动物论坛，动物探索等有关动物的科普信息的内容。页面还包括图片、链接、多媒体等非文字的元素，此网页采用flash以增加网页的动态效果。
专题（子课题）题目：动物科普小知识
专题（子课题）内容：
根据登录用户的不同要求去查询各种动物的信息内容，用户可通过该网站更加喜欢动物，及增加动物保护意识。本网站建立了各种内容的题材网址，使登录用户方便，快捷地查找他们所需的内容。
毕业设计（论文）指导教师（签字）：
摘要
在当今的世界上,智慧的人类应该有序地调整人与动物的关系,使我们所生存的世
界的动物种类完整而健全也更使我们强化了人类和动物是朋友的理念，因为我们
明晰了：所有的生物界的生命都是有着一种链式的、因果关联的一种缘分。使得
我们更为形象地理解了生物链的意义、生物的多样性、环境和发展的意义。地球
是一个大家园，因为有所有的动物，地球才不会失衡。人类发展很快，在我们建
设美好家园的同时应该给动物们留下生存的空间。这里我们制作的网页展示了不
同内容的信息。这些动物科普知识将增加人们的保护动物的意识。它将比较全面
地介绍一个网页，使用户更方便更快捷地查找所需内容。
关键字：动物简介 宠物之家 珍稀动物 动物成语
前言
本网页是用Dreamweaver及flash制作的一个动物世界的科普知识的网页。
本网页以建立一个多内容，多题材的动物知识网站为目的，此应用系统尽力达到
界面直观，操作方便，符合不同人群的需求，同时具有一定的娱乐性。
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第
一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举
地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。因此我们有效利用
了Dreamweaver的直观性，使用方便，容易上手，更换方便的特点制作了一个使
登录用户能方便，快捷的页面，同时能让人们更加喜欢和爱护小动物们，以增加
人们的保护意识。在次我们实现了与其他网站相连接的互动功能。更关键的是这
个网页体现了Dreamweaver的实际应用及采用 flash技术增加了页面的动态效果
和页面的美观。我们还运用样式表单CSS来对页面元素进行布置。所以这个网站
将全面地说明一个网站的应用系统的结构。更快捷地查找所需内容。
目录
第一章 诸论. 0
1．设计思想. 0
2．开发工具的选用及介绍. 0
3． 网页设计的色彩. 0
第二章 dreamweave的发展. 0
第三章 网站总体分析与设计. 0
1网站系统分析. 0
2主页设计. 0
3背景分析. 0
4网页设计的色彩. 0
第四章 详细设计. 0
第五章 为什么选择dreamweaver 0
第六章 设计方案. 0
1模板创建. 0
2页面制作. 0
3框架技术. 0
4表格设计. 0
6超级链接. 0
7 Flash 的制作过程. 0
第七章 总结与体会. 0
总结. 0
心得体会：. 0
第一章 诸论
在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了更好网站，提高网站知名度，所以我们精心策划了本网站。
Dreamweaver是制作主页的好工具.Dreamweaver是可视化的网页制作工具，很容易上手，可以让你轻松地制作出自己的网页。Dreamweaver在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动画。
1．Dreamweaver的发展
1．1 1997年首次推出
1．2 2000年推出Dreamweaver UltraDev:
运用其核心的 Roundtrip HTML 技術，可确保在切换程式设计检时的程式码品质，Dreamweaver 成专业网站外观设计的先驱。Macromedia 针对多种日益受到网页发展人员用的伺服器技术，而推出了 Dreamweaver UltraDev。本产品除了提供 Dreamweaver 的功能外，还提供以 ASP、JSP 和 ColdFusion 建立网页应用程式的工具。
1．3. 2002年5月推出Dreamweaver MX:
目的是支援现代网页肩负的多重角色。Dreamweaver MX 將 UltraDev 最佳的开发功能以及 HomeSite 的主要程式编辑功能整合為一个核心的 Dreamweaver 环境,为建立单一开发环境的第一步，以期让使用者能在此环境中，依其偏好的方式以手動来建立不同的网站和应用程式。
1．4. 2003年9月推出Dreamweaver MX 2004:
新增了以 CSS 为基础的设计性开发提供支援的革命性功能，将网页设计提升到新的位置。透过將 CSS 結合在所有使用者的工作流程中，促进了网页专业人员对 CSS 的普遍採用。
1．5.推出Dreamweaver 8.0:
以之前版本为基础，扩充了主要范围的功能，例如 XML 和 CSS，并简化了工作流程，以幫助使用者事半功倍。由支援最新的专业设计方式，Dreamweaver 8 為使用者提供以开放标准基礎的强大开发方式，增強了专业性的基本工具。另外，Dreamweaver 也支援所有主要的伺服器技术，包括 ColdFusion、PHP、ASP、ASP.NET 和 JSP，让各种能力程度的开发人员，无论是新手或老手，都能实现其设计。
2．设计思想
通过网站，全面宣传，展示动物风采、优点与特色，发布动物的重大活动安排与生活习性，增强人们的保护意识，使人们更多了解动物,在Internet上实现完成部分介绍及宣传活动，提高人与动物和谐发展。
3．开发工具的选用及介绍
Dreamweaver是制作主页的好工具.Dreamweaver是可视化的网页制作工具，很容易上手，可以让你轻松地制作出自己的网页。Dreamweaver在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形。
工具介绍如下：
采用的工具
css
html
flash
1]． Css简介
层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，请将内容与表现形式分开。页面内容（即 HTML 代码）驻留在 HTML 文件自身中，而用于定义代码表现形式的 CSS 规则驻留在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。
CSS 允许控制 HTML 无法独自控制的许多属性。
除设置文本格式外，还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。
l CSS 的主要优点是: 它提供了便利的更新功能；更新一处的 CSS 规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式。
l 外部 CSS 样式表是一系列存储在一个单独的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 规则。利用文档文件头部分中的链接，该文件被链接到 Web 站点中的一个或多个页面。
l 内部（或嵌入式）CSS 样式表是一系列包含在 HTML 文档文件头部分的 style 标签内的 CSS 规则
l 字体大小的css的代码如下：
字体大小属性 font-size
这段文字大小是10pt。
这段文字大小是16px。
这段文字大小是16pt。
这段文字大小是10pt的80%。
这段文字的大小比10pt大。
这段文字的大小是特大号(xx-large)。
2]．网页和Html语言
我们的网页是用html语言编写的一个关于动物的网站，html中文翻译为“超文本标记语言”，所谓“超文本“就是指页面内可以包含图片，链接，多媒体等非问字的元素，通过html语言将这些元素表示出来，就形成了html代码。浏览器的工作主要是将这些标记语言进行”翻译“，并按照定义的格式显示出来，这就是我们所看到的网页。
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
其主要特点如下： 1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。
2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。 3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上。
下面是一个层的 HTML 代码示例：
Sample Layers Page
3]. flash
Flash由macromedia公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。
FLASH有三重意义:
1) FLASH英文本意为“闪光”;
2) 它是全球流行的电脑动画设计软件;
3）它代表用上述软件制作的流行于网络的动画作品。Flash是一种交互式矢量多媒体技术，他的前身是Futureplash，早期网上流行的矢量动画插件。
Flash的优点：
1．矢量图，个头小：你可以将一幅图像任意地缩放，而不会有任何失真。
2．流媒体，传输快：边下载边播放的技术，不用等整个动画下载完，就可以开始播放。
3． 高智能，容易做：对帧序列中的关键帧的制作，产生不同的动画和交互效果。播放时，也是 以时间线上的帧序列为顺序依次进行的。
4． 交互强，命令多：所谓交互就是通过使用键盘、鼠标等工具，可以在作品各个部分跳转，使受众参与其中。
利用flash的这些优点和特点：交互性强、精美绝伦的意境。，所以我们在图片制作方面上应用flash制作了几幅精美的动物图片，有关于海洋动物和北极熊的，这些flash图片增加了本网站的动态效果，同时也能吸引更多的客户来参观我们们的网站。还增加了网站的视觉效果。
3． 网页设计的色彩
人们常常感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，左右我们的情绪。色彩的心理效应发生在不同层次中。有些属直接的刺激，有些要通过间接的联想，更高层次则涉及到人的观念，信仰，对于艺术家和设计者来说，无论哪一层次的作用都是不可忽视的。对于网页设计者来说，色彩的心理作用尤其重要，因为用网络是在一种特定的历史与社会条件的环境下，即高效率，快节奏的现代生活方式的条件，这需要做网页时把握人们在这种生活方式用网络的一种心理需求。针对不同的主题来布置色彩，如健康类的网页就不能采用较为刺激的大红和黄，橙以及象征死亡和神秘的黑色和紫色，这样会造成一种紧张和某种程度的恐慌，我们的网站就是用清爽单调的颜色为背景。
第二章 为什么选择dreamweaver
Dreamweaver是制作主页的好工具.Dreamweaver是可视化的网页制作工具，很容易上手，可以让你轻松地制作出自己的网页。Dreamweaver在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形。
复杂的说：Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
DREAMWEAVER特点：
1．最佳的制作效率
Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。
2．网站管理
使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
3．无可比拟的控制能力
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。
对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。
第三章 网站总体分析与设计
1网站系统分析
根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：
Ø 动物风采 通过动物图片等内容来展现。
Ø 优点特色 通过动物成语、音乐播放器等栏目来增添网站的娱乐性。
Ø 信息发布 通过动物论坛栏目来实现，内容有网友的意见和建议、
Ø 及提供的一些新信息。
Ø 其他内容 建立一个联系方式,是用户和工作人员更好的沟通和交流.
2主页设计
网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现学校的勃勃生气，静态主页方式介绍学校风采、优点特色、信息发布，对于动物的介绍，就得利用Dreamweaver与数据库结合的技术建立数据库查询管理系统，采用交互式的动态的web画面来实现。
在主页的最下面我们还弄了许多的友情链接图标，这样用户可以有更多的选择性。不会让用户感到本网站的单调。
我们还设计了很有创意的音乐播放器，用来增加网站的娱乐性，可以让网友能轻松愉快地欣赏本网站，这样也能让网友们能更喜欢本网站。
在最下面我们还制作了一些友情连接的图片，可以让网站不单调，使得网站更具实用性。
3背景分析
想要在视觉化环境下制作复杂网页的专业网页制作，MX0050720123已经渐渐在网页编辑工具中展露头角，成为专业人士编写网页的最佳选择。
可分成四个主题。分别是：
l 设计网页页面（Dreamweaver里具有弹性的页面设计功能）、
l 搭配Macromedia其它产品一起使用Dreamweaver（制作动画和图片不求人）、
l 自订使用界面（享受个性化的使用经验）
l 最后的加入Dreamweaver扩充程序（在网页中载入扩充高级功能）。
4网页设计的色彩
人们常常感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，左右我们的情绪。色彩的心理效应发生在不同层次中。有些属直接的刺激，有些要通过间接的联想，更高层次则涉及到人的观念，信仰，对于艺术家和设计者来说，无论哪一层次的作用都是不可忽视的。对于网页设计者来说，色彩的心理作用尤其重要，因为用网络是在一种特定的历史与社会条件的环境下，即高效率，快节奏的现代生活方式的条件，这需要做网页时把握人们在这种生活方式用网络的一种心理需求。针对不同的主题来布置色彩，如健康类的网页就不能采用较为刺激的大红和黄，橙以及象征死亡和神秘的黑色和紫色，这样会造成一种紧张和某种程度的恐慌，所以我们所选的颜色都是一清爽舒服地感觉展示给网名们。
第四章 详细设计
在主页的最上面是一个Flash图片：采用默认安装的Dreamweaver MX 2004只提供了一种让你的主页更加富于变化和个性! Element效果，选择工具栏快捷菜单中的Element即可调出新的Flash Element工具
从上到下的各种属性依次为:图片播放界面背景色、图片标题色彩、图片标题字体、图片标题字体大小、动画框架色彩、是否显示框架、框架厚度、图片标题、图片链接地址、窗口打开方式、图片地址、是否显示控制条、是否自动播放、图片间隔延时、是否循环播放、标题、标题色彩、标题字体、标题字体尺寸以及转变类型。
Flash让我们的主页更加富于变化和个性!
我们还要对各选项进行一下设置。需要注意的是imageCaptions、imageLinks以及imageURLs处的各项之间需用逗号分开，并将你的图片地址以及点击后的链接地址填入相应框内，对于色彩的设置以及其它处理大家可根据自己需要来设置，同时对于最后一项图片间的转换效果，大家可以根据自己的喜好来选择，类似制作Power Point中幻灯片间的切换效果。
整体结构
注册
登录
动物简介
动物世界
动物秀
动物成语
珍惜动物
其他
组成构造
共分成十大部分：
u 动物世界：介绍多种动物
u 动物秀：展示不同动物的形态
u 动物简介：介绍一些常见动物的生活习性等
u 动物之家：介绍一些动物的特点
u 珍惜动物：列举一些珍惜、濒危动物
u 动物成语：找一些关于动物的故事，增加读者的兴趣
u 动物探索：展示一些奇怪的动物故事
u 动物论坛：这是一个互动平台，供网友交流
u 作者简介、联系方式
第六章 设计方案
1模板创建
当需要制作大量布局基本一致的网页时，使用模板是最好的方法。
我们的网页制作就是基于一个网页创建模板而设计的。
简明步骤：
打开一个已经存在的网页→另存为模板→新建可编辑区域→保存。
我们所用的是一个左右结构的模板，通过以上步骤一个模板就弄好了。
2页面制作
u 在开始制作之前，我们先对这个页面进行了分析。看看这个页面用到了那些东西。 □ 网页顶端的标题“动物世界”是一段文字,并以一个flash 为背景.
u □ 在中间我们弄的是一幅图片转换. □ 网页中间是一幅图片. □ 最下端的欢迎词是一段文字“do you like animals. □ 网页背景是白颜色.
u □ 在最下端我们制作了一些友情连接图:百度等网站连接.
u □ 我们还在最左边弄了一个虚拟的十二生肖的连接.
u □ 右边是一个网站人员介绍.
大概的构思出来后我们就开始制作了: 首先启动Dreamweaver MX 2004，确保已经用站点管理器建立好了一个网站（根目录）。 为了制作方便，请事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内，把要使用的flash收集到网站目录flash文件夹内。
【插入标题文字】进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。 【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。
【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可.
【设置网页的标题和背景颜色】点击“修改”菜单选“页面属性”。为了管理方便，我们把图片放在“images”文件夹内。如果图片少，也可以放在站点根目录下。一个图片就插入完了。（插入*.swf动画文件，选择“插入”菜单＞媒体＞Flash）。 【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们在存盘时取名为index.htm。
这样一个简单的动物页面就编辑完毕了。
3框架技术 在浏览网页的时候，我们常常会遇到一种导航结构。就是超级连接做在左边单击以后链接的目标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，必须使用框架。
1、我们建了一个对话文档 如图所视：
2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。
3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。
4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。
6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成
4表格设计表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。
1、 在编辑视图界面中生成了一个表格
2、 用鼠标拖拽表格的边框调整到适当的大小。
3. 单击左边的单元格，只需要鼠标的光标移动到边框上拖拽即可。
4. 在右边上下单元格内分别插入图片和文本。页面的基本样子有了。
5、 光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，一个符合要求的表格做好了。
对表格操作的几种常用方式：
合并：将选中的连续单元格合并成为一个单元格。
分割：将一个单元格分割成若干单元格。
水平对齐方式：分为（左）（中）（右）三种。
垂直对齐方式：分为（顶）（居中）（居底）（基线对齐）
表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。
在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法： 选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以选中 一行。
选中的表格会在周围出现一个黑框表示整张表格选中了。
选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift键不放，选取最后一个单元格。选不连续的单元格。按住Ctrl键，点取所需要的单元格即可。5 设置站点 Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 2004 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。
执行以下操作： 启动 Dreamweaver MX 2004： 选择“站点”>“管理站点”（即，从“站点”菜单选择“管理站点”）。 出现“管理站点”对话框。 在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。 出现“站点定义”对话框。 如果对话框显示的是“高级”选项卡，则单击“基本”。 出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。
在文本框中，输入一个名称以在 Dreamweaver MX 2004中标识该站点。该名称可以是任何所需的名称。 单击“下一步”。出现向导的下一个界面，询问您是否要使用服务器技术。
选择“否”选项，指示目前该站点是一个静态站点，没有动态页。 选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。 在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。 单击该文本框旁边的文件夹图标。 随即会出现“选择站点的本地根文件夹”对话框。
单击“下一步”， 出现向导的下一个界面，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。 您可以稍后设置有关远程站点的信息。目前，本地站点信息对于开始创建网页已经足够了。单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。
单击“完成”完成设置。 随即出现“管理站点”对话框，显示您的新站点。单击“完成”关闭“管理站点”对话框。 现在，站点定义了一个本地根文件夹。下一步，我们就可以编辑自己的网页了。
6超级链接 作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的。为了建立起网页之间的联系我们必须使用超级链接。称“超级链接”，是因为它什么都能链接，如：网页、下载文件、网站地址、邮件地址……等等。 【页面之间的超级连接】 在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。
1、在网页中选中要做超级链接的文字或者图片。 2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。（如下图）
3、按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。 【邮件地址的超级连接】 在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。这也是一种超级链接。制作方法是：在编辑状态下，先选定要链接的图片或文字（比如：联系我们），在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。
还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。 （如下图）
创建完成后，保存页面，按F12预览网页效果。 1、首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。
2、属性面板改换为热点面板如图：链接输入框：填入相应的链接。替代框：填入你的提示文字说明。目标框：不作选择则默认在新浏览器窗口打开。
3、保存页面， 按F12预览，用鼠标在设置的区域就可检验效果。
超级链接属性面板中的目标选项。 “目标”我们称它为目标区。也就是超级链接指向的页面出现在什么目标区域。默认的情况下域中总有四个选项。 ①_blank ：单击链接以后，指向页面出现在新窗口中。 ②_parent：用指向页面替换他外面所在的框架结构。 ③_self： 将连接页面显示在当前框架中。 ④_top： 跳出所有框架，页面直接出现在浏览器中.
这样这个网站就可以和其他的网页链接了.
7 Flash 的制作过程
在旧版的Dreamweaver我们在网页上只能插入Flash动画和按钮，而且动画本身与所在页面并没有什么直接关系，要使动画具有交互性也必须在制作动画时就做好，还需要有一定的编程经验以及XML语言知识。而现在在DW MX 2004中就不同了，你只需设置一些参数就可以实现动态交互的Flash动画效果!
采用默认安装的DW MX 2004只提供了一种Flash Element效果，选择工具栏快捷菜单中的Flash Element(图1)即可调出新的Flash Element工具(图2)。
我们选用了一个下载的flash动画，是一条美丽可爱地鲨鱼在海里自由地游荡。还有幅图片是两只可爱地北极熊在寻找食物等，我们所选用的图片都很具有说明性。
例如首页图片：
这样一个具有个性播放界面、有交互效果的网页动画组成元素就制作完成了。如果对Flash有一定的了解的话，还可以自己开发一个Flash Element插件出来，同时还可以到Macromedia网站上下载更多Flash Element插件，让我们的主页更富于变化和个性!
通过以上几个步骤我们的一个动物网站就建立而成了,这个动物网站将作为保护动物的一个宣传网站,促进人与大自然的动物们和谐发展.并提高人们的保护意识。为了可以平衡大自然的生态,我们不要随意砍伐树木,要爱护大自然.不要残害动物,因为所有动物和人类一样都是有生命的动物..
我们为了增加网站的娱乐性我们还设计了一个音乐播放器，以增加网站的整体效果并可给网友带去轻松愉悦的心情。
第七章 总结与体会
总结
许多人和我一样都是采用参照、临摹实例的方法来开始学习Dreamweaver的，这种方法的优点是感觉能够较快入门，缺点也是显而易见的，就是不利于对MAX整体结构的理解和掌握。这也是许多朋友在合上书本后，连书中的例子都做不出来的原因。现在许多Dreamweaver的书籍都是在讲实例，有的干脆只讲实例，说明这种学习方法还是得到了很多人的认可。其实，像MAX这样的制作软件，其知识量之巨大任何一本书都不可能讲清楚，试想学习Dreamweaver的朋友那一个会只抱着一本书学习呢？关键是参考各种书籍找到一种最适合自己的学习方法，书籍本身只是作为一种资料来参考而已。
实例学习法首先要求自己有足够的耐心，对于任何一个练习都要反复推敲，目的只有一个，就是理解实例所涉及的所有知识点，只有这样你才算有所收获。典型的方法是反复练习，并尝试用不同的方法完成练习，并对所涉及的知识点进一步探索，以求理解更多的功能、参数、选项和方法；其二，要有清醒的头脑和明确的学习方向。当你学习掌握了足够的练习制作后，应该及时对所学的知识进行总结和归纳，发现规律，进一步推敲软件的整体结构和知识体系，这样才会真正有所提高。
在找寻动物的种类和照片的时候,我花了很多时间和精神,但我觉得都是值得的.因为我看了很多动物和昆虫的书和纲页,觉得很有趣味和学识到很多动物. 我又知道了动物学家是利用动物不同的特徵和生活习惯来分类的.陆生动物最大的有已经绝种的暴龙,现在最大的是大象,最小的是要用显微镜才看得到的变形虫.我又知道了两栖动物原来是幼时生长於水里,长大后才生活在陆地上.有些动物原来我以前把它们分为同类,现在才知道原 是第二类的动物. 我还发觉到原来我们吃的东西都是生物,所有动物都是吃生物的.大部份的动物都是对我们人类有用的,但很多动物因为我们捕捉和杀害,濒临绝种,特别是哺乳类动物.
心得体会：
在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。静态网页的网址形式通常为:www.example.com/eg/eg.htm，也就是以.htm、.html、.shtml、.xml等为后后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH
、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。
静态网页的特点简要归纳如下：
(1)静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“?”;
(2)网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件;
(3)静态网页的内容相对稳定，因此容易被搜索引擎检索;
(4)静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难;
(5)静态网页的交互性交叉，在功能方面有较大的限制。
在学习网页制作的这几天里，我利用了学习之余的一切可利用的剩余时间，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！
做好主页，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。
1.标题 在个人主页中标题起着很重要的作用，它在很大程度上决定了你整套个人主页的定位。一个好的标题必须有概括性、简短，有特色、容易记，还要符合自己主页的主题和风格。
2.内容的采集 选好标题后，开始采集内容，内容必须与标题相符，在采集内容的过程中，应注重特色，所谓特色应该是有一些自己的东西。个人主页中的特色，应该突出自己的个性，把自己的兴趣、爱好尽情地发挥出来，因为在网络上不受限制。主页就是在网络上的一个小小家园，在那里，可以放上自己喜欢的任何东西，包括你自己平时喜欢一些文章，一些好听的歌，一些好的动画作品。
3.图片 做个人主页不能只用文字，必须在主页上适当地加一些图片，增加可看性，俗话说"一图胜千言"，我想不无道理，一张处理得好的图片不需要多做任何解释，就能让人一目了然，让人去思考，去了解它。
谢辞
这次论文的圆满完成，首先要感谢指导老师李 在此次论文指导期间给予的支
持和关心，及平时的辛勤指导。感谢此次答辩的老师帮助，同时感谢我的搭档起
剑锋同学的帮助。在此感谢所有的人：忠心谢谢，谢谢你们！
值此将离校之际，我向大学三年传授给我知识的每位老师表示衷心的感谢！感谢
昆明理工大学三年来对我的培养！
参考文献
（1） 李飞工作室编著 Dreameanage MX 2004网页设计 山东电子音像出版社
( 2 ) 卓越科技编著 Photoshop cs2特效制作 电子工业出版社
( 3 ) 刘瑞华 Macromedia Dreamweaver MX 2004 中文版标准教程
北京：科学出版社 2005( 4 ) 前沿电脑图像工作室 巧学巧用Dreamweaver、Fireworks、Flash制作网页
北京:人民邮电出版社 2005
( 5 ) 王辉，罗皇等编著 《中文Dreamweaver 8 网页制作》 -北京：清华大学出版社，2006.7
( 6 ) 梵人工作室 聂小燕等编著 《中文Dreamweaver 8 网页制作 11日通》 -北京：机械工业出版社，2007.1
