師友會電子報第 179 期 - 軟體操作小撇步

【軟體操作小撇步 –Dreamweaver CS4-快速建立CSS版面】

一、

在歡迎畫面，點選「新增」項目中的「更多…」或者在點選功能表的「檔案＞開新檔案」。

二、

即可開啟「新增文件」對話方塊。在「空白頁面」類別，「頁面類型」欄「HTML」內，有許多已經設計好的CSS版型供您選擇。

三、

依您的選擇，對話方塊的右邊會顯示所選取版面的預覽和描述，圖中選取的版面是「3欄彈性，標題和頁尾」。

Dreamweaver CS4內建的CSS版面是以欄的類型區分，分別有以下4種類型：
A.	固定
	欄寬以像素為單位。不會根據瀏覽器大小或網頁瀏覽者的文字設定調整欄的大小。
B.	彈性
	欄寬是以使用和文字相關的度量單位(ems)。如果網頁瀏覽者變更文字設定，設計也會隨之變更，但不會因為瀏覽器視窗大小而改變設計。
C.	流動
	欄寬以網頁瀏覽者的瀏覽器寬度百分比指定。如果網頁瀏覽者將瀏覽器調寬或調窄，設計也會隨之變更，但不會因為網頁瀏覽者的文字設定而改變設計。
D.	混合
	為固定、彈性、流動三項的任意組合。例如，在兩欄混合中，右邊列版面具有流動的主要欄 (會隨著瀏覽器大小而調整)以及位於右邊的彈性欄 (會因網頁瀏覽者的文字設定大小而調整)。

四、

在建立的版面時，我們可以指定版面使用的CSS位置。

●	加入至檔頭
	將版面的CSS加入正在建立之頁面的檔頭。
●	建立新的檔案
	將版面的CSS加入新的外部CSS檔案，並將新樣式表附加到正在建立的頁面。
●	連結到現有的檔案
	可讓您指定現有的CSS檔案，其中已包含版面需要的CSS規則。當您要在多個文件中使用相同的CSS版面時，這個選項特別有用。

五、

使用「3欄彈性，標題和頁尾」所建立的網頁。

編輯畫面

瀏覽器預覽畫面