CSS應用實例(1)-版面配置

學習CSS最重要的就是學會如何使用CSS排版,如果我們無法把一個醜醜的純文字網頁(例如這樣),透過CSS排成美麗的網頁,那麼我們是沒有資格說自己會CSS的。在基礎語法教學的文章中,已經有對各種常用的CSS語法做介紹;而版面配置主要是會用到圖層控制模組方塊設計的語法,在閱讀這一小節之前,請先熟悉這兩類語法的意義。

為了方便說明,請大家先COPY下面的程式碼,另存成一個html檔,我們再來修改。這個HTML網頁共有5個DIV的物件,我先設定了每個物件的寬(width)和高(height),並且著色讓它變成色塊(background-color),這樣會比較好認。

<!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=utf-8" />
<title></title>
<style type="text/css"><!--
#main_background {
	width:720px;
	background-color:#FFFFCC;	/* 淡黃色 */
}
#page_title {
	width:720px;
	height:30px;
	background-color:#993333;	/* 深紅色 */
}
#main_menu {
	width:150px;
	height:510px; /* 540-30=510 */
	background-color:#663399;	/* 紫色 */
}
#main_menu .menu_item {
	width:120px;
	height:25px;
	background-color:#66FF99;	/* 綠色 */
}
#page_content {
	width:570px; /* 720-150=570 */
	height:510px; /* 540-30=510 */
	background-color:#99FFFF;	/* 淺藍色 */
}
--></style>
</head>
<body>
 
<div id="main_background">
<div id="page_title"></div>
 
<div id="main_menu">
<div class="menu_item"></div>
<div class="menu_item"></div>
<div class="menu_item"></div>
</div><!--main_menu END-->
 
<div id="page_content">
 
</div><!--page_content END-->
</div><!--main_background END-->
 
</body></html>

先來看一下<body>之後的5個DIV標籤。main_background裡包含了三個元素,分別是page_title、main_menu和page_content。然後main_menu裡又有三個menu_item。為了避免自己事後忘記</div>是那一個標籤的結尾,建議標籤後面要加註解。

這裡大家會發現,我對DIV標籤的命名都是針對要放的內容做命名。因為如果用樣式來命名,例如"黃色背景",結果隔一陣子要換樣式時,卻換成藍色系,這樣就很容易造成錯亂。顏色、方向等等都是相同的道理,要盡量避免(參考概念與應用)。

HTML標籤順序對排版的影響
我們可以發現,因為所有的元素都被main_background包圍,所以網頁顯示出來的結果都會被黃色色塊包圍。當我們不指定main_background的高度時,它的高度就會由內容的高度來決定。所以如果把page_content指定的height刪掉,那麼在畫面上就會看不見它了(因為它現在的內容是"空"的,所以高度會變成"0",參考「溢出與最小高度」)。

另外,HTML標籤排得越上面,它就會越早出現在畫面中。目前畫面顯示的順序是跟據HTML的順序排列:page_title→main_menu→page_content。另外,當二個物件重疊時,子元素會蓋掉父元素(例如page_title蓋掉main_background),而且下面的標籤會蓋掉上面的(page_content往上移動時,會蓋掉main_menu)。如果要改變覆蓋的順序,可以透過z-index把後面的東西推到畫面前面。

透過position指定元素位置
position是用來宣告物件位置的設定模式,配合上(top)、下(bottom)、左(left)、右(right)屬性來指定位置。這裡要特別注意的是,position的預設值是static(靜態),它和relative(相對位置)的效果相似,但卻是完全不一樣的。以下用範例做說明:

#main_background {
	width:720px;
	background-color:#FFFFCC;	/* 淡黃色 */
	padding:10px;
	border:5px solid black;
}
#main_menu {
	width:150px;
	height:510px; /* 540-30=510 */
	background-color:#663399;	/* 紫色 */
	position:absolute;
	top:0px;
	left:0px;
}

如果我們設定子物件main_menu的絕對位置,但是父物件main_background的position卻是預設的static,那麼main_menu的絕對位置座標(0,0)就是從父親的父親內容左上角開始。如果這個物件是好幾層的子元素,它就會由內而外的檢查父元素position狀態,直到它找到一個父元素position不等於static為止。最外層的父元素當然就是瀏覽器了。所以如果我們一直都沒有設定position,突然把內容裡的某個子元素設定成absolute,它就會跑到瀏覽器最左上角,造成預期外的效果。

#main_background {
	width:720px;
	background-color:#FFFFCC;	/* 淡黃色 */
	position:relative;		/* 相對位置 */
	padding:10px;
	border:5px solid black;
}
#main_menu {
	width:150px;
	height:510px; /* 540-30=510 */
	background-color:#663399;	/* 紫色 */
	position:absolute;
	top:0px;
	left:0px;
}

這裡特別在main_background中加入padding:10px,並且把框線加粗,這樣就可以看得出來absolute的(0,0)座標在那裡了。另外我們從這裡也可以注意到,原本的物件是按照標籤順序,同時也是相對位置排列,但是當我們把中間的一個物件宣告absolute時,它就會從相對位置的判斷中抽離出來。下面的物件會當它不存在似的往上移動。因此,決定那些物件要用absolute,那些要用relative,是非常重要的。

將主要版面置中
我們在做網頁的時候,第一件事情通常是決定畫面的寬度。有些網站的畫面寬度,會隨著網友電腦的螢幕解析度不同,而呈現不同的大小,但是這個樣子常常會造成物件跑掉的情形(網友看到的畫面不是設計者預期的結果)。所以大部份的網站都是把網頁設定成固定寬度,以確保網友看到的畫面不會和設計者預期相差太多。

但是因為每位網友的螢幕解析度不同,如果我們把畫面設成1024px寬,卻有人的電腦解析度是2048px,那麼這些網友就會看到一半的空白畫面。如果網頁有留白是還好,但若是整個主畫面都偏向左邊就很討厭了。所以大部份的網站都會把主要畫面置中,這樣就算網友的螢幕解析度很高,至少畫面是置中的。

以前的網頁是利用<center>或是align=center來置中,但是CSS的網頁最好不要用這種標籤,否則很容易會有預期外的結果。CSS版面置中方式如下,只要加入position:relative,以及margin:0px auto;即可:

#main_background {
	width:720px;
	background-color:#FFFFCC;	/* 淡黃色 */
	position:relative;		/* 相對位置 */
	margin:0px auto;		/* 上距離0,左右距離自動調整 */
}

設定物件的絕對與相對位置
前面有提到,決定物件要用absolute或是relative是非常重要的。大部份的網頁都會有像版權宣告的foot,而且這個foot會隨著網頁內容的長短上升或下降。由此可知,網頁內容以及foot通常都是relative,其它的物件才是absolute。因此,我們在這裡把main_menu設定成absolute,並且調整page_content的相對距離:

#main_menu {
	width:150px;
	height:510px; /* 540-30=510 */
	background-color:#663399;	/* 紫色 */
	position:absolute;
	top:30px;
	left:0px;
}
#page_content {
	width:570px; /* 720-150=570 */
	height:510px; /* 540-30=510 */
	background-color:#99FFFF;	/* 淺藍色 */
	position:relative;
	margin-left:150px;
}

最後,我們再調整menu_item的間距,使用上述相同的方式讓它水平置中。

#main_menu .menu_item {
	width:120px;
	height:25px;
	background-color:#66FF99;	/* 綠色 */
	margin:10px auto;
}

版面配置的基本教學就到這裡了。我們做網頁的時候必需要像這個樣子,先用DIV設定好框架,再用CSS調整位置,最後再把內容填入就可以了。當我們設定page_content為relative之後,如果子元素有absolute,它的(0,0)就會從page_content最左上角開始。上面的範例希望可以幫助大家掌握relative與absolute的特性。

Category: 網路基礎程式  Tags:
Share on Google+
You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>