一、研究模闆結構
1、研究本模闆結構，修改網站css内容，進行重新調色。
2、了解html代碼結構
二、制作網站
1、div+css整體布局
html代碼
<div class="zhong">
<div class="top">logo</div>
<div class="banner">banner</div>
<div class="menu">menu</div>
<div class="main">main</div>
<div class="huoban">huoban</div>
<div class="bottom">bottom</div>
</div>
css樣式
2、局部詳細設計--left
.zhong { width:1000px; margin:0 auto;}
.top{ height:73px;background:url(../p_w_picpaths/bg_1.gif) repeat-x;padding:0 24px;}
.menu{background:url(../p_w_picpaths/bg_2.gif) repeat-x; height:52px;padding-left:80px;}
.main{background:url(../p_w_picpaths/bg_7.gif) repeat-x; min-height:573px;_height:573px;
padding:22px 37px 0 25px;}
.left{ width:184px; float:left; overflow:hidden;}
.right{ float:right; width:692px;}
.huoban{ margin:20px 0 15px 0;}
.bottom{ background:url(../p_w_picpaths/bg_8.gif) repeat-x; height:189px; text-align:center;
padding-top:15px;}
html代碼
<div class="left">
<div class="box_1">
<div class="left_title">會員中心</div>
<div class="left_nr">此處顯示 class "left_nr" 的内容</div>
</div>
CSS樣式
left{ width:184px; float:left; overflow:hidden;}
.left_title{
color:#9FF;
background:url(../p_w_picpaths/bg_3.gif) repeat-x;
height:22px;
line-height:22px;
border:solid 1px #206292;
padding-left:9px;
margin-bottom:8px;
}
.box_1{ margin-bottom:28px;}
.left_nr li{background:url(../p_w_picpaths/dian.gif) no-repeat 13px 6px; padding-left:25px; height:20px; line-height:20px;}
3、局部詳細設計--right
html代碼<div class="right">
<div class="right_top_img"><img src="p_w_picpaths/img_3.gif" /></div>
<img src="p_w_picpaths/img_8.gif" style="float:left"/>
<div class="news">
<div class="news_title"><img src="p_w_picpaths/title_1.gif" width="75" height="21" /><a href="#"><img src="p_w_picpaths/more.gif" width="38" height="10" /></a></div>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
....
</table>
</div>
</div>
.right_top_img{ text-align:right; padding-bottom:35px;}
.news{float:right; width:665px;}
.news_title{border-bottom: dashed 1px #84888a; width:666px; height:30px; margin-bottom:12px;}
.news_title span{ float:left;}
.news_title a{float:right; margin-top:10px;}
.news table a{background:url(../p_w_picpaths/dian_2.gif) no-repeat 0 6px; padding-left:10px;}
4、局部詳細設計--huoban