科普园首页分析(小型企业站)

其实本人在公司使用CSS+DIV做标准站并不受支持，但实在无法忍受table的折磨，所以不管公司里怎么劝说还是一直在用我喜欢的制作方式。因为制作的时间比较匆忙，今天这个短时间完成的作品用到的所有素材都不是自己做的。目的只是给大家讲下制作的大体过程，希望不会受到鄙视^_^

制作的过程和思路

可能很多朋友制作网页最开始是在PS上画草图，这是个很好的习惯(本人目前没养成…)
然后很多朋友就开始切图，这步也少不了
最后是用PS导出网页？？？？用这步的话的确很省力，但哪怕是用了最新版本的PS导出符合xhtml要求的页面里面还是用了table布局。我们这里要使用CSS+DIV所以这步我们就不要了，将切好的图保存到一个文件夹里准备开始写CSS

布局前的准备

当然在写CSS前你得有个可以看效果的平台，用Dreamweaver8(这个版本对css布局支持比较好,当然也可以用Golive)新建一个页面，打开后会有如下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
</body>
</html>

对于刚学做网页的朋友来说可能都不知道这一大串代码是做啥的。按f12预览什么都没有显示。我就来简单解释一下：最上面<!DOC到dtd”>这部分定义了你现在编辑的这个网页所用到的语言是xhtml1.0的过渡版本，凡是打开这个页面的浏览器都会依据这个信息来做相应的处理。里面的<meta>标签将此页面的使用语言设置为了gb2312（简体中文）。

CSS编辑思路

既然使用CSS布局那就先得对大体做个设置：

*{
  margin:0 auto;
  padding:0;
}

这个*就代表了所有标签像<html>、<body>、<h1>、<p>等等，这里将padding(填充)和margin(边距)做了设置目的是要覆盖掉浏览器中对一些标签默认的CSS设置

下面是对页面整体使用字体和大背景以及对齐方式的设置：

body{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  text-align:center;/*居中*/
  background:#CECFCE url(body-bg.jpg) repeat-x top;
}

以上是CSS对大体的设置，现在你可以回到网页文件上进行与CSS文件关联的操作:

1	<link href="image/css.css" rel="stylesheet" type="text/css" />

大体的CSS设置完了下面要做的就是页面的规划了，你想做上中下三行的布局？或是头部一大块，中间有左右两小块的布局？我这里使用的是三行布局，因此我将#header(头)#center(中)#footer(脚)做了CSS的定位，并将他们都放在一个叫#out的容器里。所以网页文件里的代码就有以下的div层次：

<div id="out">
<div id="header"></div><!-- #header end 头部结束-->
<div id="center"></div><!-- #center end 中部结束-->
<div id="footer"></div><!-- #footer end 尾部结束-->
</div>

技巧:不能确保能直接将他们区分开来的话，建议你在div结束时加上一个注释
完成大体布局框架后，省下的就是将内容合理的放置在相应的div里面

兼容性和标签使用的合理性

因为CSS支持不一致导致的种种问题我想大家应该都有所了解，我个人认为在制作过程中大可不必抱有一步到位的心态，可以先用一个浏览器来进行测试（我想首先考虑的还是IE6），在确保能在主流浏览器能正常浏览器的情况下再去做兼容性的修改。

HTML提供的标签其实并不少，不要一味去使用div（这和滥用table没有区别），活用和合理的使用每一个标签，这样即使脱离了CSS同样不缺乏美观。

总结语

可能有朋友要问为什么只讲述了下制作的概略而没有详细的分析，我只能说抱歉了，我不想把大家当傻瓜看，CSS+XHTML制作网页没有固定的制作规则，我想每人都应该会有自己喜欢的制作方法，讲的过于详细可能还会误导大家^_^

上面所提到的是我今天制作这张页面所能想到的，希望能给大家带来点提示，再次感谢您能耐心的看完本篇文章

文章目录

制作的过程和思路

兼容性和标签使用的合理性

总结语