◆逐步圖解教學，讓完全不會語法的人逐步跟做
◆認識HTML5的多種排版技巧
◆不再用表格來排版，快速變版語法，節省日後修改時間
◆字型、影音、動畫基本概念，通通一次學會
◆範本的應用，快速建好一個多頁網站

坊間有關HTML+CSS的書籍，多不計數，但通常都是片段式的講解CSS語法，或者如同指令查詢手冊般，而少有涉及網頁版型編排部份，或雖有提及，但總是蜻蜓點水般帶過，鮮少有一本完整的範例製作過程及解析；從網頁的版型規劃與編排、圖片的種類、字型的應用、動畫的設定、影音的嵌入、最後到整個網站的建置與超連結設定，讓您同時學到HTML語法、CSS語法、版面編排觀念以及網路資源的應用。

這是一本利用HTML與CSS語法來設計網頁版型的中文入門書籍。內容撰寫主要是針對沒有任何網頁設計基礎的初學者或對網頁編修有興趣之讀者所設計。或許，你已是箇中老手，或者你對語法已有基本的認識，但你也是可以參考本書所提供的範例實作，了解更多的排版方式及技巧。

※本書使用HTML5版本及CSS3版本進行編寫。

【關於本書】
這是一本利用HTML 與CSS 語法來設計網頁版型的中文入門書籍。內容撰寫主要是針對沒有任何網頁設計基礎的初學者或對網頁編修有興趣之讀者所設計。或許，你已是箇中老手，或者你對語法已有基本的認識，但你也是可以參考本書所提供的範例實作，了解更多的排版方式及技巧。

●本書包含下列幾個重點：
1. 先了解HTML與CSS為何物。
2. 利用小範例來熟悉CSS指令。
3. 認識常見版型。
4. 排版方式介紹。
5. 不同版型範例實作。
6. 網頁資源應用。
7. 基本的SEO概念入門。

●本書聲明：
由於教學範例中，有使用到網路下載的資源（如：字型檔），請依照本書內容之步驟，自行上網取得合法授權。由於本書「書附檔案」中的完成檔，因不附檔於其中，所以無法觀看最終結果，故僅提供讀者瀏覽語法撰寫之完整性。
※請至深石數位網站下載範例檔

作者

郭嘉雯

【經歷】
北基宜花金馬分署電腦講師
台北職能發展學院電腦講師
教育部Bootstrap網頁自適應研習講師
資策會電腦多媒體講師
中華職業訓練中心電腦多媒體講師
大同大學進修推廣部電腦講師
文化大學進修推廣部電腦講師
東南科大數媒系兼任講師
NET服飾專案講師
聖洋科技數位媒體經銷專案講師
台北市立體育學院電腦講師
僑務委員會電腦講師
中國多媒體協會電腦講師
伊甸社會福利基金會電腦講師
連江縣教育局教師研習專案講師
中華電信專案講師
中山女高教師研習專案講師
南山高中教師研習專案講師
中美通電腦顧問公司電腦講師
大亞電腦電腦講師
中國時報紅孩兒電腦奇兵夏令營
富邦銀行專案講師
天下趨勢專案講師
北區扶輪社美術設計
天仁茗茶美術設計

序／導讀

序

從事電腦教學工作二十多年，距離上一本著作（Div+CSS 網頁版面設計）也相隔了十年之久。教學期間，有鑑於學員多非電腦或資訊相關科系畢業，對於網站的製作與設計的流程，皆感到陌生，更遑論語法的撰寫與規則的設定。

遙想二十年前，剛開始教授網頁設計時，還是使用Front Page來編輯網頁，當時利用「表格」來分割版型，並以「視覺化」的方式插入圖文，如此就可以輕鬆完成一張網頁，對於初學者而言並無太大難度；然而，HTML 5的出現，徹底改變了網頁製作的方式，除了因應手機版型與桌機版型的區別，也帶入了方便於日後編修的概念。

以美術設計相關科系畢業學員為例，其在設計及美術的領域當中，有一定的基礎及功底，但要將設計好的網頁版型，實際切圖後，以HTML的語法及CSS的指令來實現版面佈局，並非馬上就可以直接進入「語法的世界」，除了要對英文指令的熟稔外，更要同時了解HTML及CSS之間的關係，並且同步使用兩者完成版型的建置。坊間許多的CSS相關書籍，通常僅對局部指令做介紹，對於老手來說，略嫌簡單了些，然對新手而言，卻又艱深難懂；本人希望藉由本書先了解HTML與CSS的相關語法及指令後，再一步一步的利用「範例教學」實際製作出一張張不同版型的網頁，也期望讀者透過本書能夠真正融會貫通，設計出一個好的作品。

感謝深石編輯部門的大力協助，同時也感謝美編人員的辛苦編排，才能使得本書得以順利出版。如有任何疏漏之處，煩請見諒，也請各位同好不吝指正。