策划项目：宠物网站

随着生活水平的提高，人们开始重视自己的生活质量。随着物质生活的富裕,人们越来越注重休闲生活情趣的培养;随着传统家庭结构的变化、工作压力的增大,人际关系逐渐趋于淡化，犹豫宠物具有活泼，可爱，乖巧，善解人意等特性，越来越多的人开始热衷于养动物，在饲养过程中，往往把它当做家庭的一个成员，与其对话，与其交流，作为一种精神寄托，将感情投注于宠物身上,充实了生活。人与宠物间的依赖关系,将随时间的流逝而日益浓厚;而且农村逐步向城市化转移,犬猫宠物拥有量的逐步增长。

无疑全民懂得爱护动物，是一种进步。可爱的小动物给人们带来了无穷的快乐，放松心情，减轻寂寞感。但经验不足的铲屎官对自己的宠物了解不够，不能更好的照顾自己的宠物，此网站是一个专门提供宠物各类资讯和信息的网站，为爱宠人士提供了一个相互交流和学习的平台，里面可以查到很多有关养宠的问题、经验。建议，鼓励、引导和传播宠物的培育知识和正确方法，还收集关于宠物各种搞笑图片和视频，汇集了诸多宠物或可爱、或让主人哭笑不得的精彩瞬间。

网站策划书：

目的：为有效制作宠物网站页面设计，特设计此概要设计，概要设计包括目录设计，页面相关名称，页面跳转，页面说明。

上方导航栏目录设计： 首页 ：主页面 萌宠 ：分享萌宠照片及故事 萌宠医院：推荐宠物生病用药参考 萌宠食品：推荐宠物食品 萌宠资讯：关于宠物的一些小tip 注册 ：注册界面

主要模块：

跳转关系：可以跳转到栏目页面，栏目页面导航条可以互相链接。

css样式设计： （1）header部分通用HTML样式定义，logo样式设计定义 nav部分通用超链接样式定义 （3）banner：HTML样式定义 （4）content部分：容器样式定义 （5）footer部分：通用HTML样式定义 （6）content及、column sidemenu，column contenx，content.con，content.top，btn样式设计

在文件夹中新建HTML文件，将文件保存到文件夹，如果没有此文件夹则创建一个文件夹，为网页文件命名为01.html等。

为了和网站的首页风格保持一致，栏目页面采取了相似的布局风格，栏目页面的上header模块（logo，插图），banner模块(主图)和nav模块（导航）、下部footer模块（版尾）与首页完全一致，区别之处是content模块内容区分为左右分区和上下分区。

HTML文件中定义模块，分别为header, sticky,nav,banner,content,footer

定义class:header, sticky,nav,banner,content,footer

设置盒模型自身边框和外部另一个边框距离为0，自身边框和内部另一个边框距离为0，字体为微软雅黑，16px（小四） header部分：设置宽度100%，左边添加logo,右边添加图片，并用css调整到合适距离。 又下设两个header_in模块，header_in left和herder_in right,分别用css添加图片并调整位置。

sticky部分：右上角添加引言图片，并用css用#position: sticky;添加悬停效果，靠右侧。

nav部分:上方导航栏，项目通过无序列表

banner部分:添加主图。

content部分：每个页面分别下设模块布局 footer部分：底栏

content部分: 再分两个模块column sidemenu和column contenx column sidemenu部分：侧方导航栏，项目通过无序列表 < ul > < li > 来显示，同时为文字添加超链接标记。分别设置注意事项，饲养益处，主要分类，宠物人兽共患病，我们的服务，推荐的商品六个模块。

content部分: 再分两个模块column sidemenu和column contenx column contenx部分：项目通过< h1 >< p >< br / >来显示

在content模块中使用转义字符 控制空格长度，用

显示文字，添加图片

此页面布局同5.2。项目通过无序列表< ul> < li>< p>< span>< em>来显示文字，< strong>添加文字加粗效果， < img src=“images/-----” alt="" align=“left”/>添加图片。

此页面布局同5.2。项目通过无序列表< ul>< li>< p>< span>来显示文字，< strong>添加文字加粗效果， < img src=“images/-----” alt="" align=“left”/>添加图片。

此页面布局同5.2。项目通过在content下设content.a标记宠物小tip标题，使用css设置其字体效果为color: #00AA98;font-size: 40px;padding: 20px; 用无序列表< ul>< li>< p>< span>< em>来显示文字，< strong>添加文字加粗效果， < img src=“images/-----” alt="" align=“left”/>添加图片。

此页面项目通过在content下设content.con，content.top，btn 用< form action="#">定义表单处理程序的位置，method="post"定义表单内容从客户端送到服务器的方法为post，以HTTP正文体形式发送，没有字长，字符码的限制。 （1）content.top作为表格分界，在css中分别设置width，height，padding，Color，用background: url(…/images/pic01.jpg) no-repeat;添加背景。

（2）在content.con中用< table>< tr>< td>构建表格框架，用< table class=“left”>< td>< input type=“text” class=“right” /> < /td>设置输入框在文字右边的效果。设置输入密码最长为maxlength=“8”。

用< select>< option>做下拉菜单，< textarea>做文本框部分，

（3）btn部分在css中用margin-top: width: height: color:font-size:font-family: background: 设置背景及字体。

首页01

萌宠页面设计02

03.html

04.html

05.html

06.html

网站制作好之后还需要检查是否存在错误链接以及网页在不同浏览器之间的兼容性。 通过finalshell上传到自己申请的域名内

打开浏览器窗口，在地址栏中输入“http://*********/html/”，点击转到就可以浏览网站。

在站点运行了过程中需要定期更新其中的内容，这就涉及到站点的维护。 通常一个小型的站点由一个人就可以完成维护了，但是大型的网站可能需要多个人员共同完成维护工作。维护可以分成两个部分，更新页面和维护站点。 更新远程站点空间上的页面，先修改页面代码，然后在finalshell中上传页面。更新完毕后打开浏览器更新成功。