本範例檔案下載請按此
請開啟Microsoft Expression Design 選單列上的「檔案」/「開新檔案」，會開啟一個新的文件環境。
在「名稱」的欄位上輸入檔名，「預設」裡挑選800X600這個像素尺寸，按下「確認」鈕。
在「工具箱」上選擇「矩形」，準備繪製出一個矩形圖案。
在編輯區任一位置按住滑鼠左鍵不放，拖曳出一個矩形後，放開滑鼠左鍵，產生出一個矩形圖案。
在底下的屬性列裡，先點選取消「連結寬度和高度滑桿」，讓它變成「取消連結寬度和高度滑桿」的狀態，設定寬度為120px、高度為30px。
在「屬性」視窗裡，將「編輯矩形」的圓角半徑設定成20px，這樣就可以將矩形變化成四周為圓角的矩形。如果您找不到「屬性」視窗介面，請開啟選單列上的「視窗」/「屬性」即可看到。
接著我們要設定圓角矩形的底色為藍色漸層，請在「屬性」挑選顏色，滑鼠點選往下的圖示箭頭(更多樣本)，選擇「Gradient」裡的漸層色彩圖示，如此底色就變換成藍色漸層了。
請在「工具箱」上選擇「選取」，點選圓角矩形後，同時使用鍵盤上的Alt鍵加上滑鼠左鍵，可拖曳複製出另一個相同的圓角矩形，請在「屬性」視窗裡將這個新的圓角矩形的顏色漸層深淺位置對調，這樣後面兩個物件重疊時，視覺上會比較像按鈕色彩層次的感覺。
再將這個新的圓角矩形維持點選狀態時，在底下的屬性列裡，寬與高分別調整略微縮小成寬112像素、高24像素。
接著在「工具箱」上選擇「選取」，按著鍵盤上的Shift鍵不放，並在編輯區以滑鼠左鍵點選這兩個已完成的圓角矩形，讓這兩個物件都變成同時被選取的狀態，再點選屬性列裡「對齊」的下拉式選單，挑選裡面的「置中」，如此就可以將這兩個物件做上下與左右皆垂直置中的對齊。
請在「工具箱」上選擇「文字」，準備開始輸入與製作文字效果。
第一個選單文字例如我們希望輸入ABOUT，輸入完成可以在「屬性」視窗中，在「文字」區域設定相關屬性，例如本例我們將字型選擇Verdana、字體大小為12pt，並將「字距」裡改為10%以加大字體間距。
用上述步驟裡有使用過的方法，很快的我們將字體物件再複製出另外一份，並點選原本的那份字體物件，在「屬性」視窗裡，點選「無筆觸」的下拉式選單，挑選「基本」，並將「寬度」設定成5像素，這樣即可將這個字體物件周圍多拓展增加5像素的外框範圍，而另外一個新的字體物件則請點選後，在「屬性」/「外觀」區域裡，挑選顏色將字體設定成黃色。
接著一樣用上述步驟裡有使用過的方法，同時選取兩個圓角矩形以及兩個文字物件，再點選屬性列裡「對齊」的下拉式選單，挑選裡面的「置中」，很輕鬆的就可以完成對這四個物件做置中對齊，如果物件的高低順序有誤，您可以開啟選單列上的「視窗」/「圖層」，在「圖層」區域裡進行高低位置調整，「圖層」區域裡跟其他繪圖軟體大都有具備的圖層管理功能近似，物件之間的關係與狀況在此可一覽無遺，也具有暫時關閉某個物件或將某個物件鎖定無法移動等開關功能。
接著請同時選取這四個物件，按下滑鼠右鍵，選擇「群組」，將四個物件結合成一個群組，未來如果要移動搬移時，群組成單一物件會比較易用與方便管理。
請在此群組物件上按下滑鼠右鍵，選擇「匯出」，我們要準備將此物件匯出成一個單獨的圖檔。
在「匯出」的視窗畫面裡，以本例來說，是挑選輸出成PNG這個圖檔格式，如果有勾選「透明度」則可以讓圖檔背景透明(即俗稱的去背)，勾選「消除鋸齒」則可以避免圖檔出現明顯的鉅齒狀態，請記得輸入要匯出的檔案名稱以及存檔位置(例如筆者是將圖檔匯出到電腦D槽的test目錄下的image2sp子目錄裡)，上述設定無誤後，請再按下「全部匯出」鈕進行匯出。
其實在「匯出」的視窗畫面裡，若您挑選的輸出圖檔格式不同，Expression Design系統會自動顯示可對應的設定，常見需要的匯出的格式大都已有內建支援。
若選擇匯出成JPEG格式，系統的設定選項也會跟著不同，就多了可以選擇背景顏色與圖檔壓縮率等選項可以調整。
請您再依上述動作，將原本群組複製出另外五組按鈕，並將這五個群組打散，分別變更文字名稱、文字顏色、圓角矩形漸層顏色等設定，完成後再將相關物件做成群組(若為了日後易於管理辨識，可以在圖層裡將群組名稱做適當變更)，點選滑鼠右鍵選擇「匯出」，將這五個物件按鈕分別點選匯出成PNG圖檔格式即可。
使用Expression Design軟體繪製完圖形後，接著請您開啟Microsoft Expression Web軟體，在選單列上請選擇「網站」/「開啟網站」。
選擇網站所在的根目錄後，按下在「開啟」鈕，即完成網站位置設定，一個新的網站第一次必須先定義根目錄位置以利後續使用與管理。
若是之後您要編輯管理相同的網站，就不需要再重新設定網站根目錄，若有設定多個網站要切換時，可以在選單列上選擇「網站」/「管理網站清單」。
就會出現之前已經設定的網站清單可供開啟選擇。
確認好轉根目錄設定沒有問題後，接著請在選單列上選擇「檔案」/「新增」/「頁面」。
選擇「CSS 版面配置」/「頁首、導覽列、2欄、頁尾」，這是Expression Web裡面內建的一個CSS版面範本。
系統會自動產生一個html網頁以及一個css檔案，有另外獨立出來的css檔好處很多，未來網站內其他相同版面的頁面都可以直接附加引用此樣式表內的設定，對於較多網頁的網站管理維護上會很方便。接著請在選單列上選擇「檔案」/「儲存」進行存檔。
網頁的存檔路徑位置與檔名確認後，請按下「儲存」鈕，一般靜態網頁的附檔名可為.html或是.htm。
css檔案的存檔路徑位置與檔名確認後，請按下「儲存」鈕，附檔名請務必維持為.css。
若有設定正確，在「資料夾清單」介面裡應可看到網站根目錄(若沒有出現此視窗，請在選單列上選擇「面板」/「資料夾清單」)，裡面有之前我們開設與儲存放置的目錄與檔案，請將第一個選單的Icon圖檔，按著滑鼠左鍵不放拖曳到編輯視窗裡的top_nav標籤區域後，再放開滑鼠左鍵。
系統會出現提示視窗，您可以在「替代文字」裡輸入此圖檔文字註解，此功能是有助於無障礙網頁的設計規範。
在選單列上選擇「面板」/「行為」，開啟「行為」視窗後，請點選原本已插入進來的Icon圖檔。
在「行為」視窗，選擇「插入」/「交換圖像」。
選擇另一張相同文字但不同顏色的圖檔，記得勾選「預先載入圖像」，以及勾選「滑鼠移出時還原事件」，如此瀏覽者在瀏覽此網頁時，網頁會先載入另一張變化圖檔以節省時間，也免得來不及載入作用，而滑鼠游標離開此圖檔時，也才會恢復成原本圖檔，請您依上述步驟將各個圖檔置入後分別設定交換圖像的效果。
您可以按下鍵盤上的F12鈕這個快速鍵，讓Expression Web呼叫預設的瀏覽器出來觀看網頁，由於交換圖像的功能有使用到javascript語法，在本機端觀看時IE瀏覽器會出現資訊安全訊息，請記得點選IE裡的允續被封鎖的內容選項(如果之後您將網頁傳到正式網站伺服器上，以http為開頭的網址時，就不會出現此安全訊息需要每次去手動調整)。
您可以在瀏覽器上將滑鼠游標移至圖檔上觀看是否有圖檔切換變化的效果。 
接著我們要對網頁開始做些各區塊的設定，您可以先開啟css檔了解一下Expression Web範本產生出來的各區塊名稱做對照參考，比較特殊要注意的是#container裡面有包含左邊的#left_col與右邊的#page_content的佈局架構。
為了辨識與講解方便，筆者將各區塊名稱輸入到網頁裡以利說明，您可以開啟選單列上的「面板」/「管理樣式」，在此介面裡能夠看到網頁的目前所有CSS使用的情形。例如可以看到此網頁有外連一個page.css檔案，可以點選展開後，點選#masthead這個id標籤，按下滑鼠右鍵，選擇「修改樣式」對此區塊進行修改設定。
在「背景」選項裡，可以挑選色彩或者選擇背景圖。
在「方塊」選項裡，請取消勾選margin的「全部相同」，將margin裡的「right」與「left」選擇auto，這樣做的目的是讓此區塊會置中對齊。
在「位置」選項裡，設定此區塊寬為900、高150像素。
將各區塊分別依上述步驟填入相關設定或顏色，完成後可以在網頁的編輯區域裡按下滑鼠右鍵，選擇「網頁屬性」，在「一般」這個頁面選項的「標題」裡，請輸入本網頁的標題文字，在「設定格式」這個頁面選項的「背景」裡，請挑選適當的網頁背景色彩。
各區塊初步完成的設定如下圖所示，部分參數需請您再自行斟酌調整，#container、#left_col、#page_content這三區由於需考量到實際放置的圖文內容資料可能是變動並非固定高度，因此在「位置」選項裡不需要設定高度。
之後若要在修改一些CSS的相關設定，除了仍然可以用「管理樣式」來進行管理與修改之外，您也可以開啟選單列上的「面板」/「CSS 屬性」，在此介面中做CSS相關參數修改。
其實製作網頁都會需要對細節留意並逐步觀看情形慢慢微調，使用Microsoft Expression Design與Expression Web，可以讓您縮短製作時間，並且避免掉一些容易不小心犯的錯誤，對於管理、修改設定與整合上都還蠻直覺便利的；不過學習任何軟體都難免需要花一些時間才能適應上手，希望您使用這兩個軟體後能夠降低製作上的負擔，把更多時間留給創意發想、繪製圖檔等創作企劃上。下圖為本範例完成的網頁在Internet Explorer8實際瀏覽的情形。
本範例檔案下載請按此
作者：創意眼資訊 蘇東偉，任職於網頁設計公司，並兼職為教育中心講師與圖書作者
Web：http://www.eyeshop.com.tw/、http://www.webspace.com.tw/
Blog：http://webok.tw/
Mail：eyeshop@url.com.tw
0 意見:
張貼留言
若對於本篇文章有任何批評指教或鼓勵建議，歡迎您留言讓我知道...