Web开发--动保网站

Web开发

一、建站依据
由于这次疫情，有关野生动物保护的问题又一次进入人们的视线，并且我本身也比较喜欢野生动物，所以选择创建与动保为主题的网站。让我能对野生动物有更多了解，也能向人们展示野生动物更美的风采和时下需要的动保知识。
二、需求分析
野生动物是人类的好朋友，保护好野生动物对于保护生物多样性，维护生态平衡，建设社会主义生态文明具有重要意义。我国是世界上野生动物资源最丰富的国家之一，随着社会发展，由于各种人为和自然原因，越来越多的野生动物已经灭绝或濒临灭绝，野生动物保护宣传工作显得尤为重要。为此，我想通过建一个有关的网站来宣传野生动物的保护，让越来越多的人意识、关注到此类问题。
三、风格设计规划
网站结构分成左中右，以中间为主，左右以底色相衬托；网站颜色以绿色、灰色为主，绿色是一种非常具有亲和力的颜色，它代表的是自然、生命、活力与健康，与动保主题相匹配，灰色与大象banner相配，让banner加入的更自然，也与绿色对比显示自然界动物的生机勃勃和猎杀野生动物的灰暗色调；Logo设计为野生动物鹿配以网站名，鹿让人感到自然的生机，网站名动保之家也让人感到和谐温馨。
四、内容设计规划
网站分为五个模块，用导航栏进行相互链接，每模块分成三栏，开头皆为Logo+导航栏，结尾是友情链接和网站所属声明。
（1）网站首页。轮播图，展示部分野生动物的风采；新闻动态和公告分两栏，显示近期动保新闻和公告；大象banner，特色的广告吸引人们的关注；项目展示，展示部分动保组织的近期项目。
（2）动物风采。由动物图片构成的不规则照片墙，既展示动物风采，又吸引人们点击相应标题查看具体内容。
（3）动物保护。由两张梦幻动物图围绕下一个野生动物保护宣传片，呼吁观看者保护动物与自然和谐相处；瀑布流式的动保知识，吸引人们去了解更多具体的动保知识。
（4）新闻中心。更多具体的新闻实例，让人们了解更广泛更及时的动保新闻。
（5）加入我们。分两栏的网站宣传理念和志愿者的注册，让人们更加了解网站，加入动保之家，为动保贡献一份力量。
五、主要使用技术
（1）HTML。HTML语言，中文通常称为超文本标记语言，是一种文本类、解释执行的标记语言，是互联网上用于编写网页的主要语言，用HTML编写的超文本文件称为HTML文件。
（2）CSS。CSS又称层叠样式表，可以使用HTML标签或者命名的方式定义，如控制字体、颜色、字号、图片效果等等。
（3）JavaScript。JavaScript是一种Script脚本语言，简单说就是和HTML混合在一起使用的语言，可以用来在浏览器的客户端进行程序编制，从而控制浏览器等对象操作。
六、难点特点总结
（1）首页，轮播图可以自动滚动，左右箭头控制移动，也能用图片下小点进行直接选择具体某页，鼠标浮上停止滚动，当然可以进行速度控制。项目展示，文字浮于图片上用到了绝对、相对定位。
（2）动物风采，进行了照片墙的尺寸设计尽可能美观，应用了鼠标悬浮时显示超链接，鼠标悬浮时改变所在块的像素透明度。
（3）动物保护，嵌入一个具备控制条和按键的视频，通过分栏实现了瀑布流结构让页面更美观。
（4）加入我们，志愿者注册表的设计，通过正则表达式验证用户名、密码、手机号等部分，通过js验证两次密码输入是否相同。
七、运行界面截图
（1）网站首页

（2）动物风采

（3）动物保护

（4）新闻中心

（5）加入我们

八、学习体会
从构思要做什么类型的网站，找相关的图片材料和文字材料，构思将网页的布局将其怎样分割，大致确定好后开始找适合整个网页的背景色调，设定每个盒子的大小，切割找的图片的大小使其适合整个网页的布局，接着开始编写代码。或许因为自己不是很熟练感觉做的时候自己做做改改这样重复了好几遍，感觉好麻烦。可是当网页最终的效果出来的时候我感觉好有成就感，这是第一个真正意义上的自己设计的、自己找资料的、自己编写的网页。
做这次作业，感觉自己还不是很熟练，频频出错浪费了很多时间，但值得欣慰的是我还是顺利的完成了，感觉还不错。但网站设计还存在很多不足，页面特效较少，时间原因也没有做后端，这是我需要提高的地方。需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。

完整代码链接：https://download.csdn.net/download/DQA1505045218/20032786