網站製作學習誌

前陣子看到一篇分頁樣式的文章，趁最近在寫文件時順便整理一下：

HTML 長成這樣子：

<div class="pagination digg">
<ul>
<li class="disabled">第一頁</li>
<li class="disabled">上一頁</li>
<li class="current">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=2">下一頁</a></li>
<li><a href="?page=5">最後一頁</a></li>
</ul>
</div>

其中 digg 就是可以代換的樣式，可以用的樣式我都整理到一個 CSS 檔了。至於怎麼產生這個 HTML ，就請大家自行發揮所長囉。

以下是每個樣式長的樣子：

Blueprint CSS framework

• 舊的專案網頁
• 新的專案網頁 (放在 Google Code 裡)

看起來是滿有趣的東西，有空可以試試看。

上次用 JavaScript 解決下拉式選單覆蓋圖層的問題 。這次發現一個用純 CSS 來解決的技巧：

HedgerWow`s Blog > 100% pure CSS Fix for IE Z-INDEX Bug > <SELECT> Free Layer

主要也是用 iframe 來解決，但是完全不用 JavaScript (裡面的 JavaScript 是用來拖曳圖層的) 。

HedgerWow`s Blog 真是一個很不錯的參考網站，感謝 chihwen 。

聖誕節到了，換個新版面 ~~

用 Firefox 看會有不同的驚喜喔。

通常 Link 會跑到下方，都是內容太寬的關係，這常會發生在 IE 上。因為 IE 會遇到較寬的內容時，會自動把版面撐開，導致 Link 往下掉。

有時候顯示過長的程式碼時，在 IE 上面會很討厭地把我們的版面撐開，造成 CSS 版型顯示不正確。不過我一直執著於標準化的方式，而忽略掉一些方法。它們雖然都不能夠有效地完整解決這個問題，至少對 IE 而言已經足夠了。

利用以下的 CSS 屬性，能讓已經預先格式化的文字在視窗的邊緣換行：

<style type="text/css">
/*<![CDATA[*/
.precode {
  display: block;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: pre-wrap; /* CSS 2.1 */
}

/*]]>*/
</style>
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/ 
.precode {
  white-space: pre; /* CSS2 */
  word-wrap: break-word; /* IE */
}
/*]]>*/
</style>

說明如下：

• word-wrap: break-word; - 視窗邊界換行，僅 IE 支援。也可以用 word-brak: break-all; 但不會保持英文單字的完整性。

• white-space: pre; - 對某標籤作預先格式化，所有標準瀏覽器皆支援。

• white-space: -moz-pre-wrap; - 預先格式化，但在元素邊界換行，僅 Mozilla (Firefox) 支援。

• white-space: pre-wrap; - 預先格式化，但在元素邊界換行，僅 Opera 支援。

這次用的方法雖然不標準，且瀏覽器的支援性不足，但至少能讓我們的版型能在多數狀況下能夠順利被呈現。

註：也可以參考這篇：Whitespace and generated content (目前 Firefox 觀看會不正常)。

無聊之餘，弄了個蠟筆小新的版型。

這個版型唯一的難度在於 content 的寬度比 banner 來的窄，而缺點是小新的頭太大了。

圖是我自己用 Fireworks 畫的，拉到最底下可以看到小新的腳。

而電影常常搞個幕後花絮，那我也來簡單介紹一下我的小新版型是怎麼做的。

首先準備小新的圖，並切成頭、身體背景及腳。

接下來在腦袋裡想像一下網頁的結構：

1. #container 的實際寬度為 760px ，但內容寬度為 600px ，這是為了置放 #content 裡的文字，使它們能夠縮在小新的身體裡。所以我把 #container 左右兩邊的 padding 設為 80px (760px 減掉 600px 再除以 2) 。

2. 因為 #container 的寬度被限制在 600px ，但是 #banner 及 #footer 的實際寬度必須維持在 760px ，所以我把 #banner 和 #footer 設為 position: relative 後，把它們往左拉回 80px ，這樣小新的頭和腳才能與身體對齊。

3. 接下來的 #content 及 #links 部份，其實和兩欄式版型的製作方式雷同。

4. 把架構固定後，接著就把小新的頭、腳及身體當做背景放上去。因為頭和腳的大小剛好固定，所以我就不特意再下什麼語法去調整。但是身體因為是 #container 的背景，所以只能用縱軸重覆，不然會版型的左右兩邊會跑出奇怪的白色區塊。

   不過有個地方很麻煩，那就是樂多在 #footer 後面沒事加了一個 div ，而且沒 id 值。這樣一來我就沒辦法把它藏起來，只好把 body 的底部邊界往上拉。可是 IE 和 Firefox 對這個方式解釋又不同，所以用 IE 看的話，就會發現小新的腳底有個奇怪的白色區塊。當然我是有辦法解決，但就是懶字訣作祟...

5. 最後的裝飾就是苦工了，我是直接拿舊的 site.css 來改的。沒辦法，我這個人對沒什麼意義的事就很懶得去做。

CSS 碼就不貼了，有興趣的朋友用 Firefox 自行找吧。

只要觀念對了， CSS 不會很難的。

常常有人問樂多如何製作三欄樣版？以目前的樂多 DOM 不太可能單純以 CSS 完成，不過這幾天看了許多網友的 Blog ，發現一個滿有趣的方法。透過搭配 JavaScript (不是 Java 喔，別搞混了) ，我們來試試這個超級任務。

補充：樂多目前有三欄版型可供選擇，大家可以直接使用它們或修改它們。這篇文章的目的在於記錄我自己在 CSS 三欄式版面的製作心得，大家參考看看就好囉。

首先，我們準備一個 JavaScript 檔，內容為：

document.write('</div><div id="links2">');

儲存時，命名為 links2.js ，然後將它上傳到樂多的檔案空間，並記下上傳後的 URL。

接著我們到樂多 Blog 的管理介面，新增一個 JavaScript 型態的插入欄位 (Links2)，URL 就把剛剛記下來的 URL 貼上去。

然後我們把新增的這個 JavaScript 的插入欄位順序調整到我們想分離的位置之前，如下圖：

如此一來，從「版權聲明」以下的插入欄位，都會被歸到 #links2 去了。

接下來就是我們的重頭戲 - CSS ：

html, body {
	margin: 0;
	padding: 0;
	font-size: 10pt;
}

#container {
	position: relative;
	left: 50%;
	padding-top: 100px;
	margin-left: -380px;
	width: 760px;
}

#banner {
	position: absolute;
	top: 0;
	left: 0;
	height: 100px;
}

#links {
	position: relative;
	top: 0;
	float: left;
	width: 150px;
	margin-right: -150px;
	background-color: Aqua;
}

#links2 {
	position: absolute;
	width: 150px;
	top: 100px;
	left: 0px;
	background-color: Fuchsia;
}

#content {
	position: relative;
	top: 0;
	padding-left: 150px;
	width: 510px;
	float: left;
	background-color: #FFEBCD;
}

這裡僅大概介紹其設定方式：

1. 將 #container 置中，並在上面留下 100px 的高度。
2. 將 #banner 設為 position: absolute ，並將它的高度設為 100px 且移到 #container 的左上角。
3. 將 #content 和 #links 設為向左浮動，可參考先前的「樂多 Blog 排版入門」。
4. #links2 設為 position: absolute ，然後將它貼在 #container 的左方，從上數下來 100px 的位置。
5. #content 在左方留下 150px 的空間，以容納 #links2 。

剩下就交給有興趣的朋友自行變化囉。

表單一直是網頁設計裡，一門重大的學問。這裡介紹大家一些簡單的表單設計技巧，希望對大家有所幫助。

表單的邊界問題

在多數瀏覽器預設的表單樣式，會讓表單上下會有一小塊空間，如下所示：

原始碼如下：

<form name="form1" id="form1" method="post" action="">
 <table width="400" border="1">
   <tr>
     <td>文 字 欄 位 1</td>
     <td><input type="text" name="text1" /></td>
   </tr>
   <tr>
     <td>文字欄位2</td>
     <td><input type="text" name="text2" /></td>
   </tr>
   <tr>
     <td valign="top">多行文字欄位</td>
     <td><textarea name="text3" cols="25" rows="10"></textarea></td>
   </tr>
 </table>
</form>

所以一般在設計表單時，都會像上面這樣利用表格來編排輸入欄位，再將 <form> 標籤藏在 <table> 裡，如下：

<table width="400" border="1">
  <form name="form1" id="form1" method="post" action="">
   <tr>
     <td>文 字 欄 位 1</td>
     <td><input type="text" name="text1" /></td>
   </tr>
   <tr>
     <td>文字欄位2</td>
     <td><input type="text" name="text2" /></td>
   </tr>
   <tr>
     <td valign="top">多行文字欄位</td>
     <td><textarea name="text3" cols="25" rows="10"></textarea></td>
   </tr>
  </form>
</table>

但是這不符合 W3C 的標準，而且在 Dreamweaver 編輯時，也不容易點選表單。

透過 CSS ，我們能夠很容易地解決這個問題，我們只需設定：

<form name="form1" id="form1" method="post" action="" style="margin: 0;">
 <table width="400" border="1">
   <tr>
     <td>文 字 欄 位 1</td>
     <td><input type="text" name="text1" /></td>
   </tr>
   <tr>
     <td>文字欄位2</td>
     <td><input type="text" name="text2" /></td>
   </tr>
   <tr>
     <td valign="top">多行文字欄位</td>
     <td><textarea name="text3" cols="25" rows="10"></textarea></td>
   </tr>
 </table>
</form>

如果要讓整個網站的表單都能依此規則作用，那麼我們僅需在共用的 CSS 檔案裡加入：

form {
  margin: 0;
}

但是除非必要，否則大多數情況還是不建議大家使用表格來編排輸入欄位。

用 CSS 來編排輸入欄位

不過不使用表格的話，怎麼做表單的排版呢？

我們利用 <p> 標籤和 <label> 標籤來完成這項任務，如下所示：

<form name="form1" id="form1" method="post" action="">
<p>
  <label for="text1">文 字 欄 位 1</label>
  <input type="text" name="text1" id="text1" accesskey="1" />
</p>
<p>
  <label for="text2">文字欄位2</label>
  <input type="text" name="text2" id="text2" accesskey="2" />
</p>
<p>
  <label for="text3">多行文字欄位</label>
  <textarea name="text3" id="text3" cols="40" rows="10" accesskey="3"></textarea>
</p>
</form>

實際上的畫面如下圖：

當然這樣標籤並沒有對齊，所以我們透過 CSS 來搞定它。

首先當然是把 <form> 的邊界去除：

form {
  margin: 0;
}

接著，我們讓 <label> 變成浮動，並固定它的寬度為 100px ，當然你可以視你的標籤文字寬度來決定。

form label {
  float: left;
  width: 100px;
}

最後，為了不讓接下來的輸入欄位被上一層的浮動 <label> 影響，我們再設定 <form> 裡的 <p> 標籤：

form p {
  clear: both;
}

這樣一來，就如下圖所示：

是不是很簡單呢？

當然，除了不用表格之外，這樣的表單我還加上點選文字標籤 <label> ，或是利用鍵盤上的 [ALT] 加上數字鍵，就能夠將輸入焦點自動放到對應的 <input> 欄位上。這些都是無障礙網頁規範裡的一小部份，大家可以多多留意喔。

這篇文章，算是我在 CSS 的學習中，一個段落的結束。其實 CSS 是非常有趣且多變的，多看看國內外一些利用 CSS 製作出來的優等網站，你就會了解 CSS 有多麼強大。這裡，我將以「樂多 Blog 」的版型製作，作為這篇文章的主題。在這之前，建議您先看看之前我所寫的 CSS 排版觀念系列文章。

第一步 了解頁面結構

要化粧前，也得先知道自己的臉屬於何種性質；同理我們也得先掌握樂多的 Blog 的頁面結構 (DOM) 。

檢視自己的樂多 Blog 首頁原始碼，你就可以看到以下的結構：

每個色塊都是一個 DIV ，而這裡我直接用 CSS 的表示法來標示 DIV 的 ID 。

再來我們分析 #content 和 #links ，如下圖：

一樣地，我用 CSS 表示法來標示每個區塊的 CLASS 屬性。

#content 就是我們的 Blog 記事區，而 #links 則是功能選單的集合體，這裡我們暫時不對細部的區塊作討論。

第二步 決定版型

沒有適當的動線規劃及版面設計，再豐富的網站內容也是枉然。在決定我們的 Blog 要長什麼樣子之前，應該要思考如何讓瀏覽者能夠方便地操作你所提供的功能。另外，一個好的視覺設計也是必要的，除非你想標新立異，那麼舒服的色系及精緻的版面都是你應該要追求的。

不過這裡我不多談如何設計這些視覺上的效果，畢竟我並非設計系出身；相關的知識可以請教身邊有美術涵養的高手們，他們會給你很好的建議。

這裡我決定實作全版面兩欄式的版型，其中 #container 及 #content 的寬度會隨著瀏覽視窗大小作動態調整，而 #links 則是固定寬度且靠在視窗右邊，如下圖：

至於背景圖的部份，就請大家自行發揮天份製作囉。

第三步 用 CSS 製作初步的畫面

首先，我們要把 body 和 #container 設定好，如下：

html, body {
  margin: 0;
}

#container {
  position: relative;
  width: 100%;
}

首先我們將 html 和 body 的邊界設為 0 ，然後再把 #container 的寬度設為 100% 。

(註：你可以在建構版型時，利用背景色來讓自己知道區塊跑到哪兒去了。)

接下來，我們指定 #banner 的高度：

#banner {
  height: 80px;
}

這裡我假設背景圖的高度是 80px ，當然你可以視需要自行更改。

然後我們利用浮動技巧，將 #content 放到左邊， #links 放到右邊。我們不指定 #content 的寬度，因為它會變動。我們僅需要固定住 #links 的寬度即可 (假設為 200px ) 。

#content {
  float: left;
}

#links {
  float: right;
  width: 200px;
}

咦？為什麼還是沒有效果？ #links 並沒有跑到 #content 的右邊？而是跑到 #content 的右下方去了：

這是因為現在 #content 的內容區寬度是 100% ，所以 #links 被 #content 擠了下來。解決的方式是把 #links 的 margin-left 指定為負值，讓它往左拉回 200px ：

#links {
  float: right;
  width: 200px;
  margin-left: -200px;
}

好啦，現在版面變成這樣：

呃...可是 #content 的內容和 #links 的內容疊在一起了，怎麼辦？很簡單，我們用 padding-right 把 #cotent 的內容往左擠進來：

#content {
  float: left;
  padding-right: 200px;
}

#footer 因為 #content 和 #links 浮動的關係，自動跑到上面來了。我們只要設定：

#footer {
  clear: both;
  height: 40px;
}

雖然 IE 不用設定就會正常 (其實是不正常) ，但是為了其他瀏覽器，一定要設定。

好啦，現在實際上的完整版面會變成這樣了：

#content 的可視寬度其實是和 #container 的內容區寬度一樣為 100%，虛線部份才是 #content 的內容區。

有幾點要注意：

1. #content 的內容寬度不可過長，不然會讓 #links 往下掉。
2. #footer 不一定會在 #content 下方出現，這要看 #content 和 #links 哪個元素較高而定。
3. #banner 、 #content 、 #links 、 #footer 屬於結構元素，所以除非必要，否則它們的 margin 、 padding 都應該要設成 0px ( DIV 預設值) 。
4. 如果要讓 #links 和 #content 左右對調，那麼就把 #content 和 #links 的 float 、 padding 和 margin 中之 left 改成 right ， right 改成 left 。
5. 配合這篇「如何正確實作出固定寬度且置中的版型」，只要更動 body 和 #container 的樣式，你就可以讓這個版型置中囉。

完整的 CSS 如下：

html, body {
  margin: 0;
}

#container {
  position: relative;
  width: 100%;
}

#banner {
  height: 100px;
}

#content {
  float: left;
  padding-right: 200px;
}

#links {
  float: right;
  width: 200px;
  margin-left: -200px;
}

#footer {
  clear: both;
  height: 40px;
}

第四步 裝飾其他部份

當然，上面的步驟只是把主要的版面結構定下來，裡面的彩妝還沒完成。礙於我的藝術涵養，就靠大家自行設計喜歡的樣式囉。不過還是有一些東西分享給大家。

前面我在這篇「拆開你的 CSS 吧！」提到 CSS 維護的觀念，在我們把上面主要的結構定義好後，就可以利用外部的 CSS 檔來裝飾其他部份。例如我們可以建立一個 banner.css ，然後把 #banner 裡相關的 CSS 設定在這裡：

banner.css

h1.blogtitle {
  display: block;
  font-size: 12pt;
  padding-top: 10px;
  padding-left: 20px;
  margin: 0;
}

h1 a {
  color: #669;
  text-decoration: none;
}

然後在 site.css 裡把它給 import 進來，這樣一來只要更換不同的 site.css 或 banner.css ，就能夠隨心所欲地更換樣式或版型。

而細部的部份呢？像是 #content 裡的 .date 和 .blogbody ？一樣的方式，我們建立一個 content.css ，然後在裡面設定 .date 和 .blogbody 的樣式就可以了。

第五步 CSS 放在哪裡？

在第四步時我們建立了一堆 CSS 檔，那麼應該放在哪裡才能讓網頁讀到它們呢？

其實 @import 指令可以接受外部的 url ，因此在你找到空間並上傳這些 CSS 檔案以後，可以在你的 site.css 上方寫這樣的指令：

@import url(http://xxx.xxx.xxx.xxx/xxxx.css);

這樣一來就能讓你的 site.css 引入外部 CSS 樣式了。

補述 (IE 的 Bug)

不知道大家有沒有發現，如果 #links 的內容長於 #content 的內容時，在 IE 上面預覽的話，會發現 #footer 竟然是貼在 #content 的下方，如下圖：

這是 IE 的 Bug ，說實在的，也令人非常討厭。這時上面的 CSS 我們就得做點修正，方法是讓 #content 和 #links 都向左浮動。當然，如果要反過來讓 #links 在 #content 的左方，那麼就把這兩者都向右浮動。這樣一來，在大多數的瀏覽器上都能夠正常顯示了。

補述 (固定寬度置中的版型)

在固定寬度置中的版型裡，我們要額外指定 #content 的寬度，例如：

#content {
  float: left;
  padding-right: 200px;
  width: 560px; /* 760 - 200 = 560 */
}

為什麼呢？因為我發現多數瀏覽器沒辦法很正確判斷出 #content 內容區應有的寬度，因此就得指定 #content 內容區的寬度。至於技術細節，就請知道的網友告知一下吧。

結語

雖然這裡提供的 CSS 並不能真正用在實務上，但是它俱備了多數 CSS 排版的基礎觀念。因此大家只要了解這些原理以後，相信往後一定能創造更優秀的版型來