XHTML决定网页的架构而CSS决定网页的视觉设计,可以简.docVIP

XHTML與CSS可說是摒除表格式排版最需要精通的網頁基本語法，XHTML決定網頁的架構而CSS決定網頁的視覺設計，可以簡單說CSS就是網頁的化妝師，它能讓網頁能夠徹底的用您所希望的方式來呈現，這是單靠傳統HTML所無法完成的事情，以往很多設計人員，會在HTML語法內定義字型顏色大小等設計元素，但是一旦必須更改某個統一使用的字型或顏色時，就必須逐字逐行地修改，這樣的方式讓設計師浪費太多時間在修改而非設計。而將設計改以CSS方法來製作，可以在遇到大量修改時，只要修改單一CSS的設定值，就可以完成一整個網站內相同設計元素的修改，大大節省修改上的麻煩事。現今，有很多網站都會讓使用者自己選用喜歡的主題顏色或背景圖，運用的就是CSS設計。這樣的設計方式受到越來越多企業或設計師採用，企業在聘僱網頁設計人員時，XHTML與CSS更是在Dreamweaver之外成為必備專業技能，不會CSS也將越來越沒有競爭力。 本課來教大家如何活用CSS的語法設計，以最簡單易懂的學習方式及更多的CSS排版設計技巧，引精耕XHTML與CSS相關語法，加強專業的網頁設計實力，也將能幫助您建立正確的網頁排版觀念。想要學會正確的DIV/CSS排版是可以有技巧的，本課不但要教您學會如何從PSD檔靜態頁面設計從容轉化DIV/CSS排版，希望學學到的是正確的設計觀念，以及在設計時所應避免的問題使用，兩欄或三欄的固定式版面、液態(Liquid)浮動式版面，有了正確的設計觀念，則日後才不易產生所設計的網頁不好使用的問題。 　 CSS的設定與使用 　 行內樣式 　 嵌入樣式 　 外部連接套用 　 SPAN與DIV標籤 CSS與DIV標籤版面編排應用 　 利用DIV標籤劃分網頁區塊 　 一欄版面配置 　 絕水平、垂直對置中版面設計 　 固定與變動式的兩欄版面設計 　 固定與變動式的三欄版面設計 運用CSS編排版面（浮動雙欄）延續上一篇文章，本文將在原有的「房屋」（content區域）旁邊，再蓋一個小車庫（用來放置「導覽列」），並且讓這兩個建築物都向瀏覽器的左邊對齊，如下圖所示： 運用CSS編排版面（單欄） 本文將說明使用CSS樣式表編排多欄式網頁的方法。著手編排網頁之前，請先把網頁的外觀格式畫下來，並且替每個分隔空間（例如，放置標題圖片和導覽列的區域、以及內文和註解等區域）設定唯一的名稱。 CSS入門（二）：建立導覽列本文將說明如何透過CSS樣式，把清單（list）文字調整成底下的顯示外觀，當成導覽列使用。 CSS入門（一） HTML語言是描述網頁文件內容的標籤語言，網頁的版型編排原本不是它的職責，但是為了呈現美美的網頁，表格（table標籤）經常被當成控制留白、切割版面的元素使用。使用HTML標籤編排網頁的缺點是，網頁內容將被一堆和內文無關的標籤指令糾結在一起，而且一旦定下版型就不易修改和更換。 CSS最偉大的貢獻就是把網頁外觀樣式的「表現層」與「內文」分隔開來，而且CSS樣式表可以單獨地儲存成一個文件讓多個網頁共用，令它們呈現一致的外觀與感覺。 「圖層」工具是CSS的具體應用（亦即，「圖層」工具是一種以「視覺」方式建立 CSS 的方法），能讓設計人員把網頁元素定位在任意座標位置。 .au/articles/css-layouts/ Sample CSS layouts(編排版面) One column fixed width layout(單欄固定) One column liquid layout(單欄浮動 Two column fixed width layout(雙欄固定) Two column fixed width (with spread) layout(雙欄固定分散) Two column liquid layout(雙欄浮動 Three column fixed width layout(參欄固定) Three column liquid layout(參欄浮動 One column fixed width layout HTML markup DEMO div id=container div id=header h1 Site name /h1 /div div id=navigation ul lia href=#Home/a/li lia href=#About/a/li lia href=#Services/a/li lia href=#Contact us/a/li /ul /div div id=content h2 Page heading /h2 p CSS 是 Cascading Style Sheet 的縮寫，一般稱為 階層樣式表。1. CSS