第一篇　基礎概念篇

CHAPTER 01 HTML與CSS介紹

1-1 有個概念

1-2 HTML語法

1-3 CSS語法介紹

CHAPTER 02 利用CSS美化HTML

2-1 事前準備工具

2-2 文字效果

2-3 圖片效果

2-4 背景效果

2-5 表格樣式設定

2-6 超連結設定

2-7 項目清單與編號清單

2-8 字型設定

2-9 變形效果

2-10 過渡效果

2-11 動畫設定

2-12 影音嵌入

CHAPTER 03 內容結構化與HTML公式應用

3-1 內容結構化

3-2 虛文產生器

3-3 快打公式

CHAPTER 04 版型分割與解析

4-1 版型介紹

4-2 版型分割與架構解析

4-3 建站步驟與流程

?

第二篇　佈局實現篇

CHAPTER 05 單欄式版型：travelPlus旅遊網

5-1 前置作業

5-2 設定版型架構的標籤

5-3 輸入網頁內容並且結構化

5-4 設定外部連結CSS

5-5 設定CSS美化網頁

5-6 標題區設定

5-7 選單區設定

5-8 內容區設定

5-9 優惠套餐區設定

5-10 版權宣告區設定

CHAPTER 06 雙欄式版型：NightCafe咖啡館

6-1 前置作業

6-2 設定版型架構的標籤

6-3 輸入網頁內容並且結構化

6-4 設定外部連結CSS

6-5 設定CSS美化網頁

6-6 標題區設定

6-7 雙欄式版型的設定

6-8 選單區設定

6-9 內容區設定

6-10 版權宣告區設定

6-11 右下廣告區設定

CHAPTER 07 靈活的盒模型：FlexBox

CHAPTER 08 雙欄式版型：GreenBody有機蔬?網

8-1 前置作業

8-2 設定版型架構的標籤

8-3 輸入網頁內容並且結構化

8-4 設定外部連結CSS

8-5 利用flex實現網頁置中及雙欄式版型

8-6 標題區設定（含選單）

8-7 內容區設定

8-8 訊息區設定

8-9 版權宣告區設定

CHAPTER 09 三欄式版型：PenguinTree美式餐廳

9-1 前置作業

9-2 設定版型架構的標籤

9-3 輸入網頁內容並且結構化

9-4 設定外部連結CSS

9-5 設定CSS美化網頁

9-6 標題區設定

9-7 利用flex實現三欄式版型

9-8 左右兩側欄區設定

9-9 內容區設定

9-10 版權宣告區設定

CHAPTER 10 格線系統：Grid Layout

CHAPTER 11 特殊版型：路人甲部落格

11-1 前置作業

11-2 設定版型架構的標籤

11-3 輸入網頁內容並且結構化

11-4 設定外部連結CSS

11-5 設定CSS美化網頁

11-6 利用gird實現跨欄合併

?

第三篇　網站建置篇

CHAPTER 12 範本套用：小約翰歡樂莊園

12-1 前置作業

12-2 設定版型架構的標籤

12-3 輸入網頁內容並且結構化

12-4 設定外部連結CSS

12-5 設定CSS美化網頁

12-6 標題區設定

12-7 雙欄式版型的設定

12-8 選單區設定

12-9 版權宣告區設定

12-10 製作成範本

12-11 建立網站所需網頁及檔案管理

12-12 套用範本

12-13 替範本設定可編輯區域及超連結

12-14 輸入網頁內容及結構化

12-15 共同設定與個別設定

12-16 莊園介紹頁的版型結構與編排

12-17 嵌入Google地圖

12-18 區別child與type

?

第四篇　實用技巧篇

CHAPTER 13 網路資源

13-1 假文產生器�虛文產生器

13-2 圖片產生器

13-3 漸層產生器

13-4 背景圖產生器

13-5 版型產生器

13-6 線上配色網

CHAPTER 14 搜尋引擎最佳化（SEO）

14-1 繁體中文碼（big5）�萬國碼（utf-8）

14-2 標題（Title）設定

14-3 描述設定

14-4 檔案命名

14-5 圖片alt、title屬性

14-6 HTML5 新標籤

14-7 標籤結構化

附錄：HTML標籤預設值

序



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



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



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



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

?