实例效果图：点击查看原图

整体观察思考：

此设计图结构很明显,为3行4列的结构.
主色调为深灰色,导航为黑色.
线条颜色统一.
文字颜色比较统一,为白色,但是考虑整站,文字不做全局的白色,而做为黑色,在容器中分别定义字体颜色.
每个内容模块标题统一,可以用h1来整体定义.

在看一下html结构图形化示意图

制作流程：

布局 --> 细节

一、布局：

xhtml：

<div class="head">
    <div class="login"></div>
    <div class="line"></div>
    <div class="logo"></div>
    <div class="line"></div>
    <div class="nav"></div>
</div>

<div class="content">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

<div class="footer"></div>

css：

@import url("http://www.07art.com/public/public01.css");
.head{background:#000;text-align:center;}
.line{border-bottom:1px solid #848484;font-size:0px;height:1px;}
.login,.logo,.nav{text-align:center;color:#fff;width:970px;margin:0px auto;text-align:left;}
.login{height:25px;line-height:25px;}
.logo{height:104px;}
.nav{height:24px;line-height:24px;}
/*中间内容*/
.content{width:970px;height:auto!important;height:100px;min-height:100px;margin-top:15px;border:1px solid #848484;}
.left,.middle,.right,.ad{float:left;display:inline;height:1027px;}
.left{width:250px;border-right:1px solid #848484;}
.middle{width:306px;background:#B1B1B1;}
.right{width:278px;border-right:1px solid #848484;border-left:1px solid #848484;}
.ad{width:130px;text-align:center;}
/*页脚*/
.footer{width:970px;padding:15px;}

骨骼出来了,接下来我们该在骨骼上添加"血"与"肉",这样才算完整的.

二、细节制作：

(1) TOP制作

先来看一下TOP容器中的细节部分。

分析一下这里的结构：

1.一眼看上去，3行的结构，每个行容器中又分左右结构，每个容器下面都包含一条分割线。

2.用户名登陆位置(第一行)和导航条(第三行)的结构雷同，右边内容都可以用右浮动来控制。

思考一下还有什么东西要考虑到呢！：

就是那条线。

到底线在这个图中有什么特殊的地方呢！

首先我们考虑，现在互联网用户普遍用屏幕分辨率为1024*768，随着科技的不段发展，大分辨率和宽屏的用户越来越多，这条线如果固定宽度的话，在大分辨率下就会出现很难看的效果，所以我们考虑做成自适应屏幕宽度的效果.

所以在上面写的布局中,为什么会出现<div class="line"></div>这个看上去无用的标签了.

线

xhtml：

相对应的css

.line{border-bottom:1px solid #848484;font-size:0px;height:1px;}

我们先来写第一行

xhtml：

注意:span设置为float:right;我写朋友问我为什么当写float:right时,要把右边标签和里面的内容写在前面,我的解释是,这个是ie的bug。

相对应的css

.head span{float:right;padding-top:3px;}
.width01{width:80px;}
.button{background:url(../images/button.gif) no-repeat;width:76px;height:15px;color:#FECC00;cursor:pointer;}

.head span input{border:none;}

第二行

xhtml：

相对应的css

.logo img{float:left;}
.logo .logoAd{float:right;}

第三行

xhtml：

相对应的css

.nav,.nav a{color:#fff;font-size:14px;}

这样头部的东西已经写完了，我们再来回顾一下完整的头部的代码吧。

xhtml：

<div class="head">
<div class="login">
<span>用户名 <input name=" " type="text" class="width01" />　密码 <input name=" " type="text" class="width01"/> <input name=" " type="button" value="登陆" class="inp"/><input name=" " type="button" value="注册" class="inp"/> <input type="button" value="收藏麦子" class="button"/></span>
您的位置：新闻频道
</div>
<div class="line"></div>
<div class="logo">
<a href="#"><img src="images/logo.gif" alt="artmaz"/></a><a href="#"><img src="images/ad.gif" alt="" class="logoAd"/></a>
</div>
<div class="line"></div>
<div class="nav"><span>关键字 <input name=" " type="text" class="width01" /> <input type="button" value="麦子全站搜索" class="button"/></span><a href="#">首页</a> | <a href="#">新闻</a> | <a href="#">展览</a> | <a href="#">艺术空间</a> | <a href="#">在线作品</a> | <a href="#">艺术人</a> | <a href="#">论坛</a> </div>
</div>

相对应的css

@import url("http://www.07art.com/public/public01.css");
/*头部*/
.head{background:#000;text-align:center;}
.line{border-bottom:1px solid #848484;font-size:0px;height:1px;}
.login,.logo,.nav{text-align:center;color:#fff;width:970px;margin:0px auto;text-align:left;}
.login{height:25px;line-height:25px;}
.logo{height:104px;}
.nav{height:24px;line-height:24px;}
/*中间内容*/
.content{width:970px;height:auto!important;height:100px;min-height:100px;margin-top:15px;border:1px solid #848484;}
.left,.middle,.right,.ad{float:left;display:inline;height:1027px;}
.left{width:250px;border-right:1px solid #848484;}
.middle{width:306px;background:#B1B1B1;}
.right{width:278px;border-right:1px solid #848484;border-left:1px solid #848484;}
.ad{width:130px;text-align:center;}
/*页脚*/
.footer{width:970px;padding:15px;}

/*--------------------------------------------------------------*/
/*头部css*/

.head span{float:right;padding-top:3px;}
.width01{width:80px;}
.button{background:url(../images/button.gif) no-repeat;width:76px;height:15px;color:#FECC00;cursor:pointer;}
.head span input{border:none;}
.logo{height:104px;}
.logo img{float:left;}
.logo .logoAd{float:right;}

.nav,.nav a{color:#fff;font-size:14px;}

(2) 中间内容制作与底部制作有时间在写，有兴趣的朋友可以看源文件自己研究一下。

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="应用WEB标准实例：艺术网站重构" />
<meta name="keywords" content="应用WEB标准实例：艺术网站重构" />
<meta name="author" content="http://www.07art.com" />
<meta name="robots" content="all" />
<title>应用WEB标准实例：艺术网站重构</title>
<style type="text/css">
/*
==================================================================
general xhtml 1.0 - Main style sheet - liquid design 2007-07-11
Author - 关彬（比尔-盖帽） Backa made by artmaz 
==================================================================
*/
@import url("http://www.07art.com/public/public01.css");
.head{background:#000;text-align:center;}
.line{border-bottom:1px solid #848484;font-size:0px;height:1px;}
.login,.logo,.nav{text-align:center;color:#fff;width:970px;margin:0px auto;text-align:left;}
.login{height:25px;line-height:25px;}
.head span{float:right;padding-top:3px;}
.head span input{border:none;}
.width01{width:80px;}
.inp{background:#000;color:#fff;}
.logo{height:104px;}
.logo img{display:inline;float:left;}
.logo img.logoAd{margin:20px 0px 0px 50px;}
.button{background:url(../images/button.gif) no-repeat;width:76px;height:15px;color:#FECC00;cursor:pointer;}
.nav{height:24px;line-height:24px;}
.nav,.nav a{color:#fff;font-size:14px;}
.content{width:970px;height:auto!important;height:100px;min-height:100px;margin-top:15px;border:1px solid #848484;}
.left,.middle,.right,.ad{float:left;display:inline;height:1027px;}
.left{width:250px;border-right:1px solid #848484;}
.middle{width:306px;background:#B1B1B1;}
.right{width:278px;border-right:1px solid #848484;border-left:1px solid #848484;}
.ad{width:130px;text-align:center;}
.ad img{margin:10px 0px;}
h1{height:24px;line-height:24px;background:#3A3438;font-size:14px;font-weight:bold;text-indent:0.5em;color:#fff;border-bottom:1px solid #919090;}
h2{height:39px;line-height:39px;border-top:1px solid #fff;border-bottom:1px solid #fff;color:#fff;text-indent:1em;}
h2 span{color:#FFCB00;}
h2 span,h2{font-weight:bold;font-size:14px;}
.news {padding:5px;}
.news a{color:#fff;}
.news dt{text-align:center;}
.news dt a{font-weight:bold;}
.news dt,.news dt img{margin-bottom:15px;}
.news dd{height:22px;line-height:22px;color:#fff;padding-left:5px;}
.login01{height:100px;}
.login01 div{padding:10px 0px 10px 10px;}
.login01 label{float:left;width:50px;color:#fff;font-size:14px;}
.login01 p{text-align:right;padding:5px 25px 5px 0px;}
.login01 p a{color:#FFCB00;}
.bbsNew{padding:10px;}
.bbsNew li{height:22px;line-height:22px;}
.bbsNew li a{color:#fff;}
.flash{width:306px;height:280px;background:#FECC00;overflow:hidden;}
.artMan{background:#fff;height:auto!important;height:357px;min-height:357px;padding:0px 4px;}
.artMan .name{padding:5px 0px;}
.name img{margin:0px 1px;}
.artMan p{padding:5px 5px 25px 5px;line-height:22px;}
.onlineExhibit{background:#B1B1B1;height:auto!important;height:130px;min-height:130px;padding:8px;}
.onlineExhibit dt{float:left;margin-right:8px;}
.onlineExhibit dt img{padding:2px;border:1px solid #858585;background:#fff;}
.onlineExhibit dd{line-height:22px;}
.gallerySpace{height:280px;background:#fff;padding:10px;}
.gallerySpace table{margin-top:30px;}
/*footer*/
.footer{width:970px;padding:15px;}
.footer td p{color:#FDB600;font-size:14px;}
.footer td{line-height:24px;font-size:14px;color:#fff;}
.footer td a{font-size:14px;color:#fff;}
.footer td div{color:#4C444D;}
.footer td div span{color:#4D4339}
</style>

</head>

<body>
<div class="head">
	<div class="login">
		<span>用户名 <input name=" " type="text" class="width01" />　密码 <input name=" " type="text" class="width01"/> <input name=" " type="button" value="登陆" class="inp"/><input name=" " type="button" value="注册" class="inp"/> <input type="button" value="收藏麦子" class="button"/></span>
	您的位置：新闻频道
	</div>
	<div class="line"></div>
	<div class="logo">
	<a href="#"><img src="images/logo.gif" alt="artmaz"/></a><a href="#"><img src="images/ad.gif" alt="" class="logoAd"/></a></div>
	<div class="line"></div>
	<div class="nav"><span>关键字 <input name=" " type="text" class="width01" /> <input type="button" value="麦子全站搜索" class="button"/></span><a href="#">首页</a> | <a href="#">新闻</a> | <a href="#">展览</a> | <a href="#">艺术空间</a> | <a href="#">在线作品</a> | <a href="#">艺术人</a> | <a href="#">论坛</a> </div>
</div><div class="line"></div>
<div class="content">
	<div class="left">
	<h1>艺术要闻</h1>
	<dl class="news">
		<dt><img src="images/pic.gif" alt="" /><br /><a href="#">关关关关宾</a></dt>
		<dd>[传媒] <a href="#">关彬关彬关彬关彬关彬彬</a></dd>
		<dd>[传媒] <a href="#">关彬关彬关彬关彬关彬关彬</a></dd>
		<dd>[传媒] <a href="#">关彬关彬关彬关彬关彬关彬</a></dd>
		<dd>[传媒] <a href="#">关彬关彬关彬关彬关彬</a></dd>
		<dd>[传媒] <a href="#">关彬关彬关彬关关彬关彬</a></dd>
		<dd>[传媒] <a href="#">关彬关彬关彬关彬</a></dd>
		<dd>[传媒] <a href="#">关彬关彬关彬关关彬</a></dd>
		<dd>[传媒] <a href="#">关彬关彬关彬关彬关彬彬</a></dd>
		<dd>[传媒] <a href="#">关彬关彬关彬关彬关彬关彬</a></dd>
		<dd>[传媒] <a href="#">关彬关彬关彬关彬关彬关彬</a></dd>
		<dd>[传媒] <a href="#">关彬关彬关彬关彬关彬</a></dd>
	</dl>
	<h2>加入<span>artmaz</span>艺术快报</h2>
	<div class="login01">
		<div><label>姓名</label>   <input type="text" /></div>
		<div><label>Email</label>   <input type="text" /></div>
		<p><a href="#">提交</a> <a href="#">推荐给朋友</a></p>
	</div>
	<div class="line"></div>
	<h1>论坛</h1>
	<ul class="bbsNew">
		<li><a href="#">关彬关彬关彬关彬关彬彬</a></li>
		<li><a href="#">关彬关彬关彬关彬关彬彬</a></li>
		<li><a href="#">关彬关彬关彬关彬关彬彬</a></li>
		<li><a href="#">关彬关彬关彬关彬关彬彬</a></li>
		<li><a href="#">关彬关彬关彬关彬关彬彬</a></li>
		<li><a href="#">关彬关彬关彬关彬关彬彬</a></li>
		<li><a href="#">关彬关彬关彬关彬关彬彬</a></li>
		<li><a href="#">关彬关彬关彬关彬关彬彬</a></li>
		<li><a href="#">关彬关彬关彬关彬关彬彬</a></li>
		<li><a href="#">关彬关彬关彬关彬关彬彬</a></li>
	</ul>
	</div>
	<div class="middle">
		<div class="flash"></div>
		<h1>艺术人</h1>
		<div class="artMan">
			<div class="name"><img src="images/pic07.gif" alt=""/><img src="images/pic07.gif" alt=""/><img src="images/pic07.gif" alt=""/></div>
			<p>徐唯辛  崔自默  丁建华   牟建平  夏   锄 余  野东旺  杨明义  宋建文</p>
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
			  <tr>
				<td height="24">[策 展 人]</td>
				<td><a href="#">贾方舟</a></td>
				<td><a href="#">费大为</a></td>
				<td><a href="#">皮  力</a></td>
				<td><a href="#">范迪安</a></td>
			  </tr>
			  <tr>
				<td height="24">[画廊主持]</td>
				<td><a href="#">马芝安</a></td>
				<td><a href="#">林  松</a></td>
				<td><a href="#">黄燎原</a></td>
				<td><a href="#">刘  莹</a></td>
			  </tr>
			  <tr>
				<td height="24">[拍卖行业]</td>
				<td><a href="#">董国强</a></td>
				<td><a href="#">郭倩如</a></td>
				<td><a href="#">胡  凯</a></td>
				<td><a href="#">郑健生</a></td>
			  </tr>
			  <tr>
				<td height="24">[艺术评论]</td>
				<td><a href="#">董国强</a></td>
				<td><a href="#">郭倩如</a></td>
				<td><a href="#">胡  凯</a></td>
				<td><a href="#">郑健生</a></td>
			  </tr>
			  <tr>
				<td height="24">[其他人物]</td>
				<td><a href="#">董国强</a></td>
				<td><a href="#">郭倩如</a></td>
				<td><a href="#">胡  凯</a></td>
				<td><a href="#">郑健生</a></td>
			  </tr>
		  </table>
		</div>
		<h1>在线作品</h1>
		
			<dl class="onlineExhibit">
				<dt><img src="images/pic09.gif" alt=""/></dt>
				<dd>奔跑</dd>
				<dd>庞茂琨</dd>
				<dd>类别:其他</dd>
				<dd>尺寸:60x39 cm</dd>
				<dd>年代:1998</dd>
			</dl>
			<dl class="onlineExhibit">
				<dt><img src="images/pic09.gif" alt=""/></dt>
				<dd>奔跑</dd>
				<dd>庞茂琨</dd>
				<dd>类别:其他</dd>
				<dd>尺寸:60x39 cm</dd>
				<dd>年代:1998</dd>
			</dl>
	
	</div>
	<div class="right">
	<h1>画廊空间</h1>
	<div class="gallerySpace">
	<img src="images/pic05.gif" alt=""/><img src="images/pic06.gif" alt=""/>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
	  <tr>
		<td height="20"><a href="#">红门画廊</a></td>
		<td><a href="#">当代唐人艺术中心</a></td>
	  </tr>
	  <tr>
		<td height="20"><a href="#">帝門藝術中心</a></td>
		<td><a href="#">环碧堂画廊</a></td>
	  </tr>
	  <tr>
		<td height="20"><a href="#">红门画廊</a></td>
		<td><a href="#">红门画廊</a></td>
	  </tr>
	  <tr>
		<td height="20"><a href="#">帝門藝術中心</a></td>
		<td><a href="#">常青画廊</a></td>
	  </tr>
	  <tr>
		<td height="20"><a href="#">帝門藝術中心</a></td>
		<td><a href="#">常青画廊</a></td>
	  </tr>
	  <tr>
		<td height="20"><a href="#">帝門藝術中心</a></td>
		<td><a href="#">常青画廊</a></td>
	  </tr>
	  <tr>
		<td height="20"><a href="#">帝門藝術中心</a></td>
		<td><a href="#">常青画廊</a></td>
	  </tr>
	</table>

</div>
	<h1>展览</h1>
	<dl class="news">
		<dt><img src="images/pic02.gif" alt="" width="260" height="233" /><br />
	  <a href="#">关关关关宾</a></dt>
		<dd>2007-05-09 <a href="#">关彬关彬关彬关彬关彬彬</a></dd>
		<dd>2007-05-09 <a href="#">关彬关彬关彬关彬关彬关彬</a></dd>
		<dd>2007-05-09 <a href="#">关彬关彬关彬关彬关彬关彬</a></dd>
		<dd>2007-05-09 <a href="#">关彬关彬关彬关彬关彬</a></dd>
		<dd>2007-05-09 <a href="#">关彬关彬关彬关关彬关彬</a></dd>
		<dd>2007-05-09 <a href="#">关彬关彬关彬关彬</a></dd>
		<dd>2007-05-09 <a href="#">关彬关彬关彬关关彬</a></dd>
		<dd>2007-05-09 <a href="#">关彬关彬关彬关彬关彬彬</a></dd>
		<dd>2007-05-09 <a href="#">关彬关彬关彬关彬关彬关彬</a></dd>
		<dd>2007-05-09 <a href="#">关彬关彬关彬关彬关彬关彬</a></dd>
		<dd>2007-05-09 <a href="#">关彬关彬关彬关彬关彬</a></dd>
	</dl>
	</div>
	<div class="ad"><img src="images/pic03.gif" alt="" /><img src="images/pic04.gif" alt="" /></div>
	<div class="clear"></div>
</div>
<div class="footer">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="8%" height="28" valign="top"><p>艺术行业：</p></td>
    <td width="92%"><a href="#">99艺术网</a> | 深圳艺术网 | 华夏收藏网 | 当代艺术 | 中艺博国际画廊博览会 | 艺术北京| 美术同盟 | 东方视觉 |   
		艺术中国 | GlobalArt | 今日艺术网 | ARTINFO | 艺术财经 | 798艺术节 | 视觉中国 
其他行业: 	艾瑞网 | 商界在线 | 深圳新闻网 | techweb | 新浪网 | 新华网 </td>
  </tr>
  <tr>
    <td height="28" valign="top"><p>其他行业：</p></td>
    <td><a href="#">99艺术网</a> | 深圳艺术网 | 华夏收藏网 | 当代艺术 | 中艺博国际画廊博览会 | 艺术北京| 美术同盟 | 东方视觉 |   
	  艺术中国 | GlobalArt | 今日艺术网 | ARTINFO | 艺术财经 |</td>
  </tr>
  <tr>
    <td height="45" colspan="2" valign="bottom">关于麦子 | 广告服务 | 付款方式 | 人才招聘 | 联系我们 | 客户投诉 | 免责声明 </td>
    </tr>
  <tr>
    <td height="28" colspan="2" valign="top"><div>Copyright (C) ARTMAZ 2004-2008, All Rights Reserved <br />
      <span>地址：朝阳区酒仙桥路甲4号宏源公寓A座1006室  100015    电话 +86 10 64366710 </span><br />
      info@artmaz.com 经营许可证:粤B2-20030053 </div></td>
  </tr>
</table>
</div>
</body>
</html>

《应用WEB标准实例：艺术网站重构》

实例效果图：点击查看原图

整体观察思考：

在看一下html结构图形化示意图

制作流程：

一、布局：

二、细节制作：

(1) TOP制作

分析一下这里的结构：

思考一下还有什么东西要考虑到呢！：

注意:span设置为float:right;我写朋友问我为什么当写float:right时,要把右边标签和里面的内容写在前面,我的解释是,这个是ie的bug。

(2) 中间内容制作 与 底部制作 有时间在写，有兴趣的朋友可以看源文件自己研究一下。

源代码：

(2) 中间内容制作与底部制作有时间在写，有兴趣的朋友可以看源文件自己研究一下。