海底世界生态网站的设计与实现(附件)
本课题是制作一个描述海底世界的海洋科普类大型网站。网站的主要内容是介绍海洋生物（如哺乳动物，海洋植物，微生物等），其次介绍了海洋影视，海洋科技，海洋类文学，各大海洋板块等。课题最终设计出一个具有较强的观赏性，知识严谨性的网站，将庞大的海洋信息整理规划起来融入网站，方便海洋爱好者的学习与查阅。海底世界生态网站致力于不断收集介绍海洋的相关知识，宣传对海洋的环境保护，将广阔正在探索中的海洋知识整理出来，条理清晰。海底世界生态网站的技术实现是Adobe Dreamweaver CS6软件编写代码，运用HTML5、CSS和JS来制作网页。
目 录
一、引言 1
（一）研究背景 1
（二）课题研究内容 1
1. 海洋学 1
2. WEB前端开发 1
二、网站开发环境介绍 1
（一）Adobe Dreamweaver CS6 1
（二）HTML5 1
（三）CSS 1
（四）JS 1
三、网站内容及布局 1
（一）网站内容介绍 2
（二）网页布局介绍 2
1.主页布局 2
2.导航页布局 2
3.海洋生物分类页布局 2
4.海洋生物页布局 3
5.海洋类影视页面布局 3
四、素材的收集与制作 3
（一）视屏素材 3
（二）图片素材 3
五、网站实现及说明 3
（一）Adobe Dreamweaver CS6 3
（二）主页的实现 4
（三）导航页的实现 6
（四）海底生物页的实现 7
（五）海底生物子页的实现 13
（六）海洋影视页的实现 15
六、网站优化、更新与维护 18
（一）网站内容的更新 18
（二）网站后期的维护 18
七、结论 19
致谢 20
参考文献 21
一、引言
（一）研究背景
随着人们科技的发展，社会的不断进步，网络已经成为人们生活 *好棒文|www.hbsrm.com +Q: ^351916072^
中的重要组成部分，网络的便捷，快速，庞大的信息量等优点使人们可以更方便更有效的学习知识。海底世界生态网站的设计旨在将海洋的有关内容收集起来，存放于网站之中，可以供人们更加方便的学习查阅与浏览神秘的海洋世界。
（二）课题研究内容
1. 海洋学
地球是人们赖以生存的家园，而海洋更是占据了地球表面的71%。人们至今依旧在探索海洋。从2000年开始，平均每星期就有3个新的海洋物种被发现。根据这个研究计划的估计，大约还有5000种海洋鱼类以及成千上万种其它各式各样的海洋生物还没被发现。
2. WEB前端开发
海底世界生态网站设计也像是一本书，主页是他的封面，导航页是他的目录，各子网页则是他的内容。并且网站有着许多书本达不到的地方，比如书中没有的视频，动画，音乐等。网站可以使信息量更加庞大且便于查询。从这些点上来看远胜于书。WEB前端开发所涉及的知识有HTML5，CSS和JS以及Adobe Dreamweaver CS6软件的使用。
二、网站开发环境介绍
（一）Adobe Dreamweaver CS6
网页三剑客之一。Adobe?Dreamweaver?CS6 网页设计软件提供了一套直观的可视界面，供使用者创建和编辑网站和移动应用程序。可已使用"多屏幕预览"来审阅设计。代码编写更加便捷。
（二）HTML5
全名Hypertext Markup Language,超文本标记语言。是万维网的核心语言。它功能强大，具有简易性，可扩展性，平台无关性三大特点。用来编辑网页内容，构建网页的框架。简而言之，HTML5可用来编写网页的内容。
（三）CSS
全名层叠样式表（Cascading Style Sheets）。CSS 能够对网页中元素位置的排版进行像素级精确控制，拥有对网页对象和模型样式编辑的能力。简单来说，CSS可用来编写网页内容的样式。
（四）JS
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。增加网站的互动性。
三、网站内容及布局
（一）网站内容介绍
目前好像还没有一个专门用于介绍海洋的网站。海底世界生态网站将庞大的海洋体系整和归纳起来，有序归纳，条理清晰，让人一目了然。是一个专门介绍海洋的百科型网站。致力于不断收集海洋方面信息，供浏览者学习与参考。
其介绍内容大致分为：海洋文学、海洋影视、四大洋、海洋科技、海洋生物、海洋景观、传说等。网站内容结构图，如图31所示。
图31 网站内容结构图
（二）网页布局介绍
1.主页布局
主页布局简洁，采用video标签，将海洋视屏作为页面背景。加入了鼠标特效，滑动鼠标会有彩色泡泡跟随。页面内正中间有一行文字“GO”，鼠标放置文字上变换文字为“开始浏览海底世界”。设置链接连入导航页。
2.导航页布局
导航页采用了导航模版，名为3D倾斜导航栏。开始页面为一张世界地图，点击地图上的部分区域可以进入相应的页面，采用地图会更加直观。左上角有一个菜单按钮，点击按钮，页面倾斜，露出底部，一个海洋视频作为的背景，以及左侧的导航栏，导航栏的内容有海洋影视，海洋生物，海洋科技，海洋文学，海洋传说等。
3.海洋生物分类页布局
海洋生物页面布局的第一行为蓝色半透明导航栏，并且固定在窗口的第一行，随鼠标滚动位置不变。第二行为左右滚动字母“海洋世界”。第三块内容是对海洋生物和生物种类的文字简介。第四块内容分为左右两部分，左边为海洋生物的纲目科等的分类，点击左边的科目纲等，右边盒子变换。
右边盒子里写着各种生物如鲨鱼，虎鲸等，点击他们可进入相应的生物介绍页面。
4.海洋生物页布局
海洋生物页是生物的详细介绍。模仿百度百科网页制作，以虎鲸的页面为例，第一行为导航栏，第二行为滚动字幕，第三行创建了左右居中的盒子，盒子左右两边各有一幅图，固定在窗口，鼠标滚动页面不改变位置。左边的是一个GIF的动态，起装饰作用。右边一个图是百度百科的标志图，点击可进入虎鲸的百度百科。中间盒子里第一部分写了虎鲸简介，右边插图，虎鲸保护级别，形态特征，栖息环境，捕猎方式与食物习惯，分布范围，生活习性，繁殖方式，种群现状，其中部分图片设置了鼠标放置图片旋转，图片背面是一些文字介绍。
目 录
一、引言 1
（一）研究背景 1
（二）课题研究内容 1
1. 海洋学 1
2. WEB前端开发 1
二、网站开发环境介绍 1
（一）Adobe Dreamweaver CS6 1
（二）HTML5 1
（三）CSS 1
（四）JS 1
三、网站内容及布局 1
（一）网站内容介绍 2
（二）网页布局介绍 2
1.主页布局 2
2.导航页布局 2
3.海洋生物分类页布局 2
4.海洋生物页布局 3
5.海洋类影视页面布局 3
四、素材的收集与制作 3
（一）视屏素材 3
（二）图片素材 3
五、网站实现及说明 3
（一）Adobe Dreamweaver CS6 3
（二）主页的实现 4
（三）导航页的实现 6
（四）海底生物页的实现 7
（五）海底生物子页的实现 13
（六）海洋影视页的实现 15
六、网站优化、更新与维护 18
（一）网站内容的更新 18
（二）网站后期的维护 18
七、结论 19
致谢 20
参考文献 21
一、引言
（一）研究背景
随着人们科技的发展，社会的不断进步，网络已经成为人们生活 *好棒文|www.hbsrm.com +Q: ^351916072^
中的重要组成部分，网络的便捷，快速，庞大的信息量等优点使人们可以更方便更有效的学习知识。海底世界生态网站的设计旨在将海洋的有关内容收集起来，存放于网站之中，可以供人们更加方便的学习查阅与浏览神秘的海洋世界。
（二）课题研究内容
1. 海洋学
地球是人们赖以生存的家园，而海洋更是占据了地球表面的71%。人们至今依旧在探索海洋。从2000年开始，平均每星期就有3个新的海洋物种被发现。根据这个研究计划的估计，大约还有5000种海洋鱼类以及成千上万种其它各式各样的海洋生物还没被发现。
2. WEB前端开发
海底世界生态网站设计也像是一本书，主页是他的封面，导航页是他的目录，各子网页则是他的内容。并且网站有着许多书本达不到的地方，比如书中没有的视频，动画，音乐等。网站可以使信息量更加庞大且便于查询。从这些点上来看远胜于书。WEB前端开发所涉及的知识有HTML5，CSS和JS以及Adobe Dreamweaver CS6软件的使用。
二、网站开发环境介绍
（一）Adobe Dreamweaver CS6
网页三剑客之一。Adobe?Dreamweaver?CS6 网页设计软件提供了一套直观的可视界面，供使用者创建和编辑网站和移动应用程序。可已使用"多屏幕预览"来审阅设计。代码编写更加便捷。
（二）HTML5
全名Hypertext Markup Language,超文本标记语言。是万维网的核心语言。它功能强大，具有简易性，可扩展性，平台无关性三大特点。用来编辑网页内容，构建网页的框架。简而言之，HTML5可用来编写网页的内容。
（三）CSS
全名层叠样式表（Cascading Style Sheets）。CSS 能够对网页中元素位置的排版进行像素级精确控制，拥有对网页对象和模型样式编辑的能力。简单来说，CSS可用来编写网页内容的样式。
（四）JS
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。增加网站的互动性。
三、网站内容及布局
（一）网站内容介绍
目前好像还没有一个专门用于介绍海洋的网站。海底世界生态网站将庞大的海洋体系整和归纳起来，有序归纳，条理清晰，让人一目了然。是一个专门介绍海洋的百科型网站。致力于不断收集海洋方面信息，供浏览者学习与参考。
其介绍内容大致分为：海洋文学、海洋影视、四大洋、海洋科技、海洋生物、海洋景观、传说等。网站内容结构图，如图31所示。
图31 网站内容结构图
（二）网页布局介绍
1.主页布局
主页布局简洁，采用video标签，将海洋视屏作为页面背景。加入了鼠标特效，滑动鼠标会有彩色泡泡跟随。页面内正中间有一行文字“GO”，鼠标放置文字上变换文字为“开始浏览海底世界”。设置链接连入导航页。
2.导航页布局
导航页采用了导航模版，名为3D倾斜导航栏。开始页面为一张世界地图，点击地图上的部分区域可以进入相应的页面，采用地图会更加直观。左上角有一个菜单按钮，点击按钮，页面倾斜，露出底部，一个海洋视频作为的背景，以及左侧的导航栏，导航栏的内容有海洋影视，海洋生物，海洋科技，海洋文学，海洋传说等。
3.海洋生物分类页布局
海洋生物页面布局的第一行为蓝色半透明导航栏，并且固定在窗口的第一行，随鼠标滚动位置不变。第二行为左右滚动字母“海洋世界”。第三块内容是对海洋生物和生物种类的文字简介。第四块内容分为左右两部分，左边为海洋生物的纲目科等的分类，点击左边的科目纲等，右边盒子变换。
右边盒子里写着各种生物如鲨鱼，虎鲸等，点击他们可进入相应的生物介绍页面。
4.海洋生物页布局
海洋生物页是生物的详细介绍。模仿百度百科网页制作，以虎鲸的页面为例，第一行为导航栏，第二行为滚动字幕，第三行创建了左右居中的盒子，盒子左右两边各有一幅图，固定在窗口，鼠标滚动页面不改变位置。左边的是一个GIF的动态，起装饰作用。右边一个图是百度百科的标志图，点击可进入虎鲸的百度百科。中间盒子里第一部分写了虎鲸简介，右边插图，虎鲸保护级别，形态特征，栖息环境，捕猎方式与食物习惯，分布范围，生活习性，繁殖方式，种群现状，其中部分图片设置了鼠标放置图片旋转，图片背面是一些文字介绍。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/350.html
