第00章 網頁設計 x ChatGPT

0-1 開始使用 ChatGPT

0-2 查詢網頁設計相關的語法

0-3 查詢網頁設計相關的技術建議

0-4 撰寫網頁程式與除錯

0-5 與其它程式語言互相轉換

0-6 提供練習測驗與解答



【Part 1 HTML】

第01章 網頁設計基礎

1-1 網站建置流程

1-2 網頁設計相關的程式語言

1-3 HTML 的發展

1-4 HTML 文件的編輯工具

1-5 HTML 文件的基本結構

1-6 撰寫第一份 HTML 文件

第02章 文件結構

2-1 HTML 文件的根元素 - html 元素

2-2 HTML 文件的標頭 - head 元素

2-3 HTML 文件的主體 - body 元素

2-4 HTML5 新增的結構元素

第03章 資料編輯與格式化

3-1 區塊格式

3-2 文字格式

3-3 插入或刪除資料 - ins、del 元素

3-4 項目符號與編號 - ul、ol、li 元素

3-5 定義清單 - dl、dt、dd 元素

3-6 超連結

3-7 相對 URL 的路徑資訊 base 元素

第04章 嵌入內容

4-1 嵌入圖片 - img 元素

4-2 嵌入影片 - video 元素

4-3 嵌入聲音 - audio 元素

4-4 設定媒體資源 - source 元素

4-5 嵌入不同的圖片 - picture 元素

4-6 嵌入物件 - object 元素

4-7 嵌入浮動框架 - iframe 元素

4-8 嵌入Script - script、noscript 元素

第05章 表格

5-1 建立表格 - table、tr、th、td 元素

5-2 表格標題 - caption 元素

5-3 表格的表頭、主體與表尾 - thead、tbody、tfoot 元素

5-4 直行式表格 - colgroup、col 元素

第06章 表單

6-1 建立表單 - form、input 元素

6-2 HTML4.01 提供的輸入類型

6-3 HTML5 新增的輸入類型

6-4 按鈕 - button 元素

6-5 標籤 - label 元素

6-6 選項群組 - optgroup 元素

6-7 將表單欄位群組起來 - fieldset、legend 元素



【Part 2 CSS】

第07章 CSS 基本語法

7-1 CSS 的發展

7-2 在 HTML 文件中套用 CSS

7-3 CSS 的語法

7-4 選擇器的類型

7-5 樣式表的串接順序

第08章 色彩、字型、文字與清單

8-1 色彩屬性

8-2 字型屬性

8-3 文字屬性

8-4 清單屬性

第09章 Box Model 與定位方式

9-1 Box Model

9-2 邊界屬性

9-3 留白屬性

9-4 框線屬性

9-5 寬度與高度屬性

9-6 定位方式

第10章 背景、漸層、濾鏡與表格

10-1 背景屬性

10-2 漸層函式

10-3 濾鏡屬性

10-4 表格屬性

第11章 CSS 版面設計

11-1 使用 float 屬性進行版面設計

11-2 彈性盒子版面

11-3 格線版面

第12章 變形、轉場、動畫與媒體查詢

12-1 變形屬性

12-2 轉場屬性

12-3 動畫屬性

12-4 媒體查詢

第13章 響應式網頁設計實例─圖庫網站

13-1 開發適用於不同裝置的網頁

13-2 響應式網頁設計原則

13-3 手刻響應式網頁（圖庫網站）

13-4 手刻導覽按鈕（漢堡選單）

13-5 重置 CSS



【Part 3 JavaScript】

第14章 JavaScript 基本語法

14-1 撰寫第一個 JavaScript 程式

14-2 JavaScript 程式碼撰寫慣例

14-3 型別

14-4 變數

14-5 常數

14-6 運算子

14-7 流程控制

14-8 函式

14-9 變數的有效範圍

第15章 JavaScript 內建物件

12-1 認識物件

12-2 使用物件

12-3 內建物件

第16章 文件物件模型 (DOM)

16-1 認識 DOM

16-2 取得元素節點

16-3 走訪節點

16-4 取得 / 設定元素的屬性值與文字內容

16-5 新增 / 取代 / 移除節點

16-6 存取表單元素

16-7 操作 CSS 樣式表

第17章 瀏覽器物件模型 (BOM)

17-1 認識 BOM

17-2 Window 物件

17-3 Location 物件

17-4 Navigator 物件

17-5 History 物件

17-6 Screen 物件

17-7 Document 物件

第18章 事件處理

18-1 事件驅動模式

18-2 事件的類型

18-3 定義事件處理程式 / 事件監聽程式

18-4 移除事件處理程式 / 事件監聽程式

18-5 Event 物件

18-6 事件處理範例



【Part 4 網頁前端框架】

第19章 Bootstrap 網格系統

19-1 撰寫 Bootstrap 網頁

19-2 使用 Bootstrap 網格系統

第20章 Bootstrap 樣式

20-1 內容樣式

20-2 公用類別

20-3 按鈕

20-4 表單

第21章 Bootstrap 元件

21-1 關閉按鈕 (Close button)

21-2 警報效果 (Alert)

21-3 下拉式清單 (Dropdown)

21-4 按鈕群組 (Button group)

21-5 導覽與標籤頁 (Nav and tab)

21-6 導覽列 (Navbar)

21-7 卡片 (Card)

21-8 工具提示 (Tooltip)

21-9 彈出提示 (Popover)

21-10 摺疊 (Collapse)

21-11 手風琴效果 (Accordion)

21-12 輪播 (Carousel)

21-13 分頁導覽 (Pagination)

第22章 響應式網頁設計實例 - 旅遊網站

22-1 「快樂旅遊」網站

22-2 設計網頁樣板

22-3 設計導覽列

22-4 設計輪播

22-5 設計內容區 - 警報效果

22-6 設計內容區 - 卡片

22-7 設計頁尾

第23章 響應式網頁設計實例 - 部落格網站

23-1 「快樂部落格」網站

23-2 設計網頁樣板

23-3 設計頁首、導覽列與介紹區

23-4 設計內容區

23-5 設計頁尾

第24章 jQuery

24-1 認識 jQuery

24-2 取得 jQuery 核心

24-3 使用 jQuery 核心

24-4 事件處理

24-5 特效與動畫

第25章 Vue.js

25-1 認識 Vue.js

25-2 安裝與使用 Vue.js

25-3 樣板語法

25-4 methods 與 computed 屬性

25-5 事件處理

25-6 表單欄位繫結

25-7 類別與樣式繫結

25-8 條件式渲染

25-9 清單渲染



?

序



　　HTML、CSS與JavaScript是網頁設計最核心也最基礎的技術，無論您是想從頭開發一個網頁或改寫既有的網頁，這三種技術都是必學的基本功。此外，我們還會介紹響應式網頁設計 (RWD)、Bootstrap、jQuery、Vue.js等進階的技術，幫助您更有效率地開發網頁。



　　在ChatGPT橫空出世後，有不少人驚覺「寫程式」即將被AI工具取代，但這並不表示您就不用學程式設計，而是程式設計師必須要進化為AI工具的程式審查員或教AI學習的老師。在本書的一開始，我們先告訴您如何使用ChatGPT學習網頁設計並撰寫網頁程式，集中在一個章節，讓您有系統地學習。



　　本書封面圖像與部分範例圖片是以Midjourney所生成，希望透過這樣的方式，讓讀者感受到生成式AI工具的落地應用。如果對Midjourney生圖有興趣，敬請參考 《Midjourney AI圖像魔導書》 一書。



?