[閒聊] 網頁用DIV來排版，還真累 = =

[Loki]

以往都習慣用表格來排版
但因為學了CSS並且受到一些書籍的影響
打算用直接用DIV來排版

這一次練習的對象是這次軟工作業的GUI設計
要把一個requirement寫好的網頁
把它GUI作出來
結果還真是累人
這是花一個下午努力的成果：
http://loki.ind.ntou.edu.tw/se_hw/
(其實最右上方Sreach小塊還是用了表格，有空再改掉)

最上方的部分直接用DIV是很簡單的
不過麻煩在中間的內容部份
一開始單純以三個div分別
結果發現很難正常編排
接著換用一個DIV包著三個div
看似OK了
但是因為部分語法的關係(如clear)
使得IE和Firefox看起來會不一樣
經過一整個下午的努力
以三層的巢狀DIV解決

以下我是硬寫出來的code
其實不是寫得很漂亮
有興趣可以參考看看(內容頁部份)
CSS：

代碼: 選擇全部

#main { 
	position: relative; 
	margin-left:auto; 
	margin-right:auto;
	margin-top:10px;
	width:970px; 
	text-align: left; 
}
#side { 
	width:200px;
	float:left;
	margin-right:10px;
}
.sideHead {
	background-image:url(../images/sideHead_back.png);
	width:200px;
	height:20px;
	float:left;
	clear:left;
	border:1px solid #CCCCCC;
	border-bottom: 0px solid #F6F6F6;
}
.sideContent {
	width:200px;
	float:left;
	clear:left;
	margin-bottom:10px;
	border:1px solid #CCCCCC;
	background-color:#F6F6F6;
}
#content {
	width:600px;
	margin-left:auto; 
	margin-right:auto;
	float:left;
	border:1px solid #EEEEEE;
	background-color:#FFFFFF;
}
#edge { 
	width:140px;
	float:right;
	margin-left:10px;
}
.edgeHead {
	background-image:url(../images/sideHead_back.png);
	width:140px;
	height:20px;
	float:right;
	clear:right;
	border:1px solid #CCCCCC;
	border-bottom: 0px solid #F6F6F6;
}
.edgeContent {
	width:140px;
	float:right;
	clear:right;
	border:1px solid #CCCCCC;
	background-color:#F6F6F6;
}

HTML：

代碼: 選擇全部

<div id="main">
  <div id="side">
	<div class="sideHead"><div class="item01"><img src="images/item01.gif" alt="item" />Calendar</div></div>
	<div class="sideContent" align="center"><img src="images/calendar.png" alt="calendar" /></div>
	<div class="sideHead"><div class="item01"><img src="images/item01.gif" alt="item" />Login</div></div>
	<div class="sideContent">帳號 <input name="account" type="text" class="FormText" id="account" size="18" maxlength="20"><br />
	密碼 <input name="password" type="text" class="FormText" id="password" size="18" maxlength="20"><br />
	<input name="Submit" type="button" class="btn" value="登入" />
    <input name="Submit" type="button" class="btn" value="忘記密碼" />
    <input name="Submit" type="button" class="btn" value="註冊" /></div>
	</div>
  <div id="content">center</div>
  <div id="edge">
	<div class="edgeHead"></div>
	<div class="edgeContent">right</div>
  </div>
</div>

做起來還蠻累的
一來是對CSS還不算是熟悉
對DIV的使用也還不是很得心應手
畢竟早期很習慣地使表格來排版
換了個方式來做剛開始還真不習慣
但經過一次的磨練相信多少也有些心得了
當然並非是放棄表格
只是表格應該有它的定位在(用來顯示表格資料)
放棄有更高彈性的DIV不用其實很可惜

也許下次是把社團網頁排版DIV化？