【网页设计】关于一个静态展示类网站的建立

前言

前两天，有一个朋友让我帮忙做一个网站，一个展示类的静态网站。其主题内容是关于猫的一些分类展示和养猫的宝典。网页设计之后总结一下，既是对自己工作的肯定，也整理了一下思路。这篇文章最早在我的网易博客上发表，原文链接为http://renjie19940313.blog.163.com/blog/static/24079602320155283295778/。

展示

下面先展示下我的页面：
首页：

尾页：

言归正传

网页说来分为两种，一种为静态网页，那么另一种自然就是动态网站了，下面简单的说一下这两者的区别：

静态网页：

就是用纯粹的HTML(超文本标记语言)来实现的网页，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等，它的拓展名多为.htm或.html。静态是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。它如果要更新的话，相对会比较麻烦，所以多应用于展示类的更改较少的网站。

 动态网页：

相比于静态网页，动态网页有后台数据库，能够实现交互，网页的更新不需要人为的修改页面，它常见的拓展名有.asp，.jsp，.php等。

网站建设的一般性步骤：

1：申请域名：一个网站如果想发布到互联网的话，要先想好自己的域名申请注册以免等到想要发布的时候却发现自己选中的域名已经被别人注册了，对于大的公司来说花千万买域名也是有的。

2：申请空间：网站空间通俗点来讲就是用来存放网站内容的空间，通常企业做网站都不会自己架服务器，无论是对于中小企业还是个人用户来说，拥有自己的网站已不再是一件难事，投资几百元你就可以很容易地通过向网站托管服务商租用虚拟主机，上传你的网站，用这种方式来建立网站。我曾今在花生壳和3V网站上申请过几个免费的域名，空间用来测试自己的网站。免费的域名，空间用来学习测试还是可以的，如果真的要发布网站的话，还是花钱来买。

3：定位网站：网站的定位很重要，你需要知道你为什么要建立网站，网站要实现哪些功能，是漂亮美观？还是功能强大？主要吸引哪些人来访问？等等这些问题都要考虑。

4：分析网站功能和需求：确定了要做什么样的网站，那就要考虑一些功能细节性的东西了，在动手设计网页之前先分析好。

5：网站风格设计：自己的网站要采用怎么样的排版格式，什么样的主色调，具有怎么样的风格。

6：网页代码实现：知道自己要做什么，怎么做，接下来就要开始着手做，用一些工具如EditPlus，

Dreamweaver等可以更高效的完成自己的工作，没有这些工具，甚至记事本都可以完成你的网页。

7：测试：网站完成后需要进行测试，看看访问时出现了哪些问题，并进行一些优化。

8：上传网站：将自己的网站文件传到服务器或者自己申请的空间上。

9：网站的维护和推广：完成网站也不可能一劳永逸，在网站发布后还需要日常的维护更新，并且很可能会因为骇客的入侵而瘫痪。

色彩的运用

朋友找到我时，她已经对网站进行了初步的设计和素材的收集，我需要做的就是来实现这个网站。她给了一个类似的养猫类网站，告诉我想要做出这样的效果，于是我就采用了相同的配色方案。在网站配色上有一些技巧：

1、用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

2、用两种色彩。先选定一种色彩，然后选择它的对比色(在Photoshop里按ctrl+shift+I)再进行微小的调整。整个页面色彩丰富但不花哨。

3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。也就是在同一色系里面采用不同的颜色使网页增加色彩，而又不花，色调统一。这种配色方法在网站设计种最为常用。

4、灰色在网页设计中又称为“万能色”，其特点是可以和任何颜色搭配，在使用时把握量避免网页变灰。

一个网站要有统一的颜色，好的色彩搭配能够让浏览的人赏心悦目，从而起到吸引人的作用。

 明确了网页的主要配色，开始实现首页，用DIV+CSS来完成网页的设计。考虑到一共要展示六种猫，于是我就将首页设计成了：

每一幅图片链接到相关猫种的网页，下面看一下英短（英国短毛猫），当时还挺纳闷，英短？什么鬼？

完成主页的设计，对于其他的页面来说，工作就容易很多了。完成了一系列相关猫介绍的网页，还有养猫宝典需要做，

为了使文字性的页面不是很枯燥和单调，我在文章中都相应加了几张猫咪的照片。

到这里，我的工作也完成了，话说，我这次也对猫有了一定的了解，也是收获啊！