XHTML與CSS 網頁設計創意實踐

XHTML與CSS可說是摒除表格式排版最需要精通的網頁基本語法，XHTML決定網頁的架構而CSS決定網頁的視覺設計，可以簡單說CSS就是網頁的化妝師，它能讓網頁能夠徹底的用您所希望的方式來呈現，這是單靠傳統HTML所無法完成的事情，以往很多設計人員，會在HTML語法內定義字型顏色大小等設計元素，但是一旦必須更改某個統一使用的字型或顏色時，就必須逐字逐行地修改，這樣的方式讓設計師浪費太多時間在修改而非設計。而將設計改以CSS方法來製作，可以在遇到大量修改時，只要修改單一CSS的設定值，就可以完成一整個網站內相同設計元素的修改，大大節省修改上的麻煩事。現今，有很多網站都會讓使用者自己選用喜歡的主題顏色或背景圖，運用的就是CSS設計。這樣的設計方式受到越來越多企業或設計師採用，企業在聘僱網頁設計人員時，XHTML與CSS更是在Dreamweaver之外成為必備專業技能，不會CSS也將越來越沒有競爭力。

本課講師將以網頁設計師所熟悉的Dreamweaver軟體來教大家如何活用CSS的語法設計，以及更多的CSS排版設計技巧，課程中有很多專家才會用的技巧，資深講師將以最簡單易懂的學習方式，引導學員精耕XHTML與CSS相關語法，加強專業的網頁設計實力，也將能幫助您建立正確的網頁排版觀念，以及後續與JavaScript/jQuery之間設計應用。想要學會正確的DIV/CSS排版是可以有技巧的，本課不但要教您學會如何從PSD檔靜態頁面設計從容轉化DIV/CSS排版，講師希望學員學到的是正確的設計觀念，以及在設計時所應避免的問題使用，兩欄或三欄的固定式版面、液態(Liquid)浮動式版面，有了正確的設計觀念，則日後才不易產生所設計的網頁不好使用的問題。

網頁設計師，有Dreamweaver使用經驗，只會用Table排版而希望學習正確DIV/CSS排版設計者

1. HTML與XHML

   　1-1 HTML檔案是什麼？

   　1-2 什麼是XHTML？

   　1-3 Dreamweaver開啟各式版本HTML文件

   　1-4 常用HTML標籤

2. CSS的設定與使用

   　2-1 行內樣式

   　2-2 嵌入樣式

   　2-3 外部連接套用

   　2-4 Dreamweaver詳細CSS設定與使用

   　2-5 SPAN與DIV標籤

3. CSS效果綜合應用

   　3-1 文字屬性設定應用

   　3-2標題文字背景圖應用

   　3-3 自訂圖片式清單項目

   　3-4 多背景影像版面應用

   　3-5 最細膩之1像素細線框表格

   　3-6 圖片加上細外框

   　3-7 相簿相片編排

   　3-8 為連結文字加上顯示效果

   　3-9 CSS按鈕應用

   　3-10 CSS濾鏡效果應用

4. CSS與DIV標籤版面編排應用

   　4-1 利用DIV標籤劃分網頁區塊

   　4-2 一欄版面配置

   　4-3 絕水平、垂直對置中版面設計

   　4-4 固定與變動式的兩欄版面設計

   　4-5 固定與變動式的三欄版面設計

附錄：Dreamweaver CS5即時預覽於不同瀏覽器