網頁設計完全攻略HTML、CSS、JavaScript、Bootstrap、jQuery、Vue.js、RWD|搭配ChatGPT效率加倍

    這是一本內容非常齊全的網頁設計書籍,網羅最新技術、最新語法、最多範例,包含下列的【7大主題】和【超過700個範例程式】,全彩印刷,圖解詳盡,觀念正確,讓讀者快速學會網頁設計的關鍵技術!

    Collecting
    US$30.85

    內容簡介


    這是一本內容非常齊全的網頁設計書籍,網羅最新技術、最新語法、最多範例,包含下列的【7大主題】和【超過700個範例程式】,全彩印刷,圖解詳盡,觀念正確,讓讀者快速學會網頁設計的關鍵技術!
    .HTML
    .CSS
    .JavaScript
    .Bootstrap
    .jQuery
    .Vue.js
    .響應式網頁設計 (RWD)

    除了分篇分章進行語法教學,目前最熱門的【ChatGPT】也是重要主題,我們會介紹如何使用ChatGPT學習網頁設計,包括撰寫網頁程式、解讀網頁程式、加註解、除錯、查詢語法、尋求技術支援、出題練習、解題、與其它程式語言做轉換等。
    為了讓讀者體驗如何將各種語法活用到實際的網頁設計,不再陷入只會語法,卻不知如何活用的窘境,我們設計了【三大響應式網頁範例】-【圖庫網站】、【旅遊網站】和【部落格網站】,其中第一個範例是使用HTML和CSS手刻響應式網頁,而第二、三個範例是使用HTML、CSS和Bootstrap開發響應式網頁,這些範例均相當精美,對於設計人員開發網頁、老師設計教學範例、學生製作專題或參加競賽都極具參考價值。

    學習重點------------------------------------------------------------
    【第0章-ChatGPT】
    在本章中,我們會介紹如何使用ChatGPT學習網頁設計,例如撰寫網頁程式、解讀網頁程式、加註解、除錯、查詢語法、尋求技術支援、出題練習、解題、與其它程式語言做轉換等。

    【第1篇-HTML】
    HTML可以用來定義網頁的內容,開發各種網頁應用程式。在本篇中,我們會介紹HTML常用的元素,例如文件結構、資料編輯與格式化、嵌入內容、表格、表單等。

    【第2篇-CSS】
    CSS可以用來定義網頁的外觀,包括編排、顯示、格式化及特殊效果。在本篇中,我們會介紹CSS常用的屬性,例如色彩、字型、文字、清單、Box Model、定位方式、背景、漸層、濾鏡、表格、Flexbox Layout、Grid Layout、變形、轉場、動畫、媒體查詢等。

    【第3篇-JavaScript】
    JavaScript可以用來定義網頁的行為,在本篇中,我們會介紹JavaScript的基本語法,包括型別、變數、常數、運算子、流程控制、函式、物件等,還會介紹JavaScript在瀏覽器端的應用,也就是如何利用JavaScript讓靜態網頁具有動態效果,包括文件物件模型 (DOM)、瀏覽器物件模型 (BOM)、事件處理等。

    【第4篇-網頁前端框架】
    除了最核心的HTML、CSS和JavaScript,還有許多應用於JavaScript程式開發的函式庫與框架,在本篇中,我們會介紹下列幾種技術:
    .Bootstrap:是很受歡迎的HTML、CSS與JavaScript框架,用來開發響應式 (responsive)、行動優先 (mobile first) 的網頁,使用者無須撰寫CSS或JavaScript程式碼,就可以輕鬆設計出響應式網頁。
    .jQuery:是一個快速、輕巧、功能強大的JavaScript函式庫,透過它所提供的API,可以讓諸如操作HTML文件、選擇HTML元素、處理事件、建立特效、使用Ajax技術等動作變得更簡單。
    .Vue.js:這個JavaScript函式庫,提供API讓Web開發人員進行資料繫結及操作網頁上的元素,解決畫面顯示與資料狀態同步的問題。
    此外,我們還會介紹【響應式網頁設計】(RWD,Responsive Web Design),這是一種網頁設計方式,目的是根據使用者的瀏覽器環境 (例如寬度或方向等),自動調整網頁的版面配置,以提供最佳的顯示結果,同時設計了【3大響應式網頁範例】-圖庫網站、旅遊網站、部落格網站,讓您不只懂語法,更懂如何運用到實際的網頁設計。

    目錄


    第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 清單渲染

    Content

    • 1-1
      封面
    • 1-2
      書名頁
    • 1-3
      關於本書
    • 1-4
      本書範例網站01 手刻響應式網頁-圖庫網站
    • 1-5
      本書範例網站02 Bootstrap響應式網頁-旅遊網站
    • 1-6
      本書範例網站03 Bootstrap響應式網頁-部落格網站
    • 1-7
      目錄
    • 1-8
      Chapter 00 網頁設計×ChatGPT
    • 1-9
      0-1 開始使用ChatGPT
    • 1-10
      0-1-1 請ChatGPT扮演網頁設計專家的角色
    • 1-11
      0-1-2 請ChatGPT提供網頁設計的學習建議
    • 1-12
      0-2 查詢網頁設計相關的語法
    • 1-13
      0-3 查詢網頁設計相關的技術建議
    • 1-14
      0-4 撰寫網頁程式與除錯
    • 1-15
      0-4-1 撰寫指定用途的網頁程式
    • 1-16
      0-4-2 解讀網頁程式的意義
    • 1-17
      0-4-3 幫網頁程式加上註解
    • 1-18
      0-4-4 解決網頁程式的錯誤 (除錯)
    • 1-19
      0-5 與其它程式語言互相轉換
    • 1-20
      0-5-1 將JavaScript程式轉換成其它程式語言
    • 1-21
      0-5-2 將其它語言撰寫的程式轉換成JavaScript
    • 1-22
      0-5-3 將使用jQuery的程式轉換成原生的JavaScript
    • 1-23
      0-6 提供練習測驗與解答
    • 1-24
      CHAPTER 01 網頁設計基礎
    • 1-25
      1-1 網站建置流程
    • 1-26
      1-1-1 階段一:蒐集資料與規劃網站架構
    • 1-27
      1-1-2 階段二:網頁製作與測試
    • 1-28
      1-1-3 階段三:網站上傳與推廣
    • 1-29
      1-1-4 階段四:網站更新與維護
    • 1-30
      1-2 網頁設計相關的程式語言
    • 1-31
      1-3 HTML的發展
    • 1-32
      1-4 HTML文件的編輯工具
    • 1-33
      1-5 HTML文件的基本結構
    • 1-34
      1-6 撰寫第一份HTML文件
    • 1-35
      CHAPTER 02 文件結構
    • 1-36
      2-1 HTML文件的根元素-<html> 元素
    • 1-37
      2-2 HTML文件的標頭-<head> 元素
    • 1-38
      2-2-1 <title> 元素 (文件標題)
    • 1-39
      2-2-2 <meta> 元素 (文件相關資訊)
    • 1-40
      2-2-3 <link> 元素 (文件之間的關聯)
    • 1-41
      2-2-4 <style> 元素 (嵌入CSS)
    • 1-42
      2-3 HTML文件的主體-<body> 元素
    • 1-43
      2-3-1 <h1> ~ <h6> 元素 (標題1 ~ 6)
    • 1-44
      2-3-2 <p> 元素 (段落)
    • 1-45
      2-3-3 <div> 元素 (群組成一個區塊)
    • 1-46
      2-3-4 <!-- --> 元素 (註解)
    • 1-47
      2-4 HTML5新增的結構元素
    • 1-48
      2-4-1 <article> 元素 (文章)
    • 1-49
      2-4-2 <section> 元素 (通用的區塊或區段)
    • 1-50
      2-4-3 <nav> 元素 (導覽列)
    • 1-51
      2-4-4 <header> 與 <footer> 元素 (頁首/頁尾)
    • 1-52
      2-4-5 <aside> 元素 (側邊欄)
    • 1-53
      2-4-6 <main> 元素 (主要內容)
    • 1-54
      2-4-7 <figure>、<figcaption> 元素 (獨立內容)
    • 1-55
      CHAPTER 03 資料編輯與格式化
    • 1-56
      3-1 區塊格式
    • 1-57
      3-1-1 <pre> 元素 (預先格式化區塊)
    • 1-58
      3-1-2 <blockquote> 元素 (引用區塊)
    • 1-59
      3-1-3 <address> 元素 (聯絡資訊)
    • 1-60
      3-1-4 <hr> 元素 (水平線)
    • 1-61
      3-2 文字格式
    • 1-62
      3-2-1 <b>、<i>、<u>、<sub>、<sup>、<small>、<em>、<strong>、<dfn>、<code>、<samp>、<kbd>、<var>、<cite>、<abbr>、<s>、<q>、<mark>、<ruby>、<rt> 元素
    • 1-63
      3-2-2 <br> 元素 (換行)
    • 1-64
      3-2-3 <span> 元素 (群組成一行)
    • 1-65
      3-2-4 <time> 元素 (日期時間)
    • 1-66
      3-3 插入或刪除資料-<ins>、<del>元素
    • 1-67
      3-4 項目符號與編號-<ul>、<ol>、<li> 元素
    • 1-68
      3-5 定義清單-<dl>、<dt>、<dd> 元素
    • 1-69
      3-6 超連結
    • 1-70
      3-6-1 絕對URL與相對URL
    • 1-71
      3-6-2 標示超連結- <a> 元素
    • 1-72
      3-6-3 在新索引標籤開啟超連結
    • 1-73
      3-6-4 頁內超連結
    • 1-74
      3-7 相對URL的路徑資訊-<base> 元素
    • 1-75
      CHAPTER 04 嵌入內容
    • 1-76
      4-1 嵌入圖片-<img> 元素
    • 1-77
      4-1-1 圖片的網址、寬度、高度與替代顯示文字
    • 1-78
      4-1-2 響應式圖片
    • 1-79
      4-2 嵌入影片-<video> 元素
    • 1-80
      4-3 嵌入聲音-<audio> 元素
    • 1-81
      4-4 設定媒體資源-<source> 元素
    • 1-82
      4-5 嵌入不同的圖片-<picture> 元素
    • 1-83
      4-6 嵌入物件-<object> 元素
    • 1-84
      4-7 嵌入浮動框架-<iframe>元素
    • 1-85
      4-7-1 嵌入YouTube影片
    • 1-86
      4-7-2 嵌入Google地圖
    • 1-87
      4-7-3 嵌入Facebook粉絲專頁
    • 1-88
      4-8 嵌入Script-<script>、<noscript> 元素
    • 1-89
      CHAPTER 05 表格
    • 1-90
      5-1 建立表格-<table>、<tr>、<th>、<td> 元素
    • 1-91
      5-1-1 跨列合併儲存格
    • 1-92
      5-1-2 跨行合併儲存格
    • 1-93
      5-2 表格標題-<caption> 元素
    • 1-94
      5-3 表格的表頭、主體與表尾-<thead>、<tbody>、<tfoot>元素
    • 1-95
      5-4 直行式表格-<colgroup>、<col>元素
    • 1-96
      CHAPTER 06 表單
    • 1-97
      6-1 建立表單-<form>、<input> 元素
    • 1-98
      6-2 HTML4.01提供的輸入類型
    • 1-99
      6-2-1 submit、reset (提交與重設按鈕)
    • 1-100
      6-2-2 text (單行文字方塊)
    • 1-101
      6-2-3 radio (選擇鈕)
    • 1-102
      6-2-4 checkbox (核取方塊)
    • 1-103
      6-2-5 <textarea> (多行文字方塊)
    • 1-104
      6-2-6 <select>、<option> (下拉式清單)
    • 1-105
      6-2-7 password (密碼欄位)
    • 1-106
      6-2-8 hidden (隱藏欄位)
    • 1-107
      6-3 HTML5新增的輸入類型
    • 1-108
      6-3-1 email (電子郵件地址)
    • 1-109
      6-3-2 url (網址)
    • 1-110
      6-3-3 search (搜尋欄位)
    • 1-111
      6-3-4 number (數字)
    • 1-112
      6-3-5 range (指定範圍的數字)
    • 1-113
      6-3-6 color (色彩)
    • 1-114
      6-3-7 tel (電話號碼)
    • 1-115
      6-3-8 date、time、month、week、datetime-local (日期時間)
    • 1-116
      6-4 按鈕-<button> 元素
    • 1-117
      6-5 標籤-<label> 元素
    • 1-118
      6-6 選項群組-<optgroup> 元素
    • 1-119
      6-7 將表單欄位群組起來-<fieldset>、<legend>元素
    • 1-120
      CHAPTER 07 CSS基本語法
    • 1-121
      7-1 CSS的發展
    • 1-122
      7-2 在HTML文件中套用CSS
    • 1-123
      7-2-1 行內樣式
    • 1-124
      7-2-2 內部樣式表
    • 1-125
      7-2-3 外部樣式表
    • 1-126
      7-3 CSS的語法
    • 1-127
      7-4 選擇器的類型
    • 1-128
      7-4-1 萬用選擇器
    • 1-129
      7-4-2 類型選擇器
    • 1-130
      7-4-3 子選擇器
    • 1-131
      7-4-4 子孫選擇器
    • 1-132
      7-4-5 相鄰兄弟選擇器
    • 1-133
      7-4-6 全體兄弟選擇器
    • 1-134
      7-4-7 類別選擇器
    • 1-135
      7-4-8 ID選擇器
    • 1-136
      7-4-9 屬性選擇器
    • 1-137
      7-4-10 擬元素
    • 1-138
      7-4-11 虛擬類別
    • 1-139
      7-5 樣式表的串接順序
    • 1-140
      CHAPTER 08 色彩、字型、文字 與清單
    • 1-141
      8-1 色彩屬性
    • 1-142
      8-1-1 color (前景色彩)
    • 1-143
      8-1-2 background-color (背景色彩)
    • 1-144
      8-1-3 opacity (透明度)
    • 1-145
      8-2 字型屬性
    • 1-146
      8-2-1 font-family ( 文字字型)
    • 1-147
      8-2-2 font-size ( 文字大小)
    • 1-148
      8-2-3 font-style (文字樣式)
    • 1-149
      8-2-4 font-weight (文字粗細)
    • 1-150
      8-2-5 font-variant (文字變化)
    • 1-151
      8-2-6 line-height (行高)
    • 1-152
      8-2-7 font (字型速記)
    • 1-153
      8-2-8 使用網路字型與圖示字型
    • 1-154
      8-3 文字屬性
    • 1-155
      8-3-1 text-indent (首行縮排)
    • 1-156
      8-3-2 text-align ( 文字對齊方式)
    • 1-157
      8-3-3 letter-spacing (字母間距)
    • 1-158
      8-3-4 word-spacing ( 文字間距)
    • 1-159
      8-3-5 text-transform (大小寫轉換方式)
    • 1-160
      8-3-6 white-space (空白)
    • 1-161
      8-3-7 text-shadow ( 文字陰影)
    • 1-162
      8-3-8 text-decoration-line、text-decoration-style、textdecoration-color ( 文字裝飾線條、樣式與色彩)
    • 1-163
      8-3-9 text-decoration (文字裝飾速記)
    • 1-164
      8-4 清單屬性
    • 1-165
      8-4-1 list-style-type (項目符號與編號類型)
    • 1-166
      8-4-2 list-style-image (圖片項目符號)
    • 1-167
      8-4-3 list-style-position (項目符號與編號位置)
    • 1-168
      8-4-4 list-style (清單速記)
    • 1-169
      CHAPTER 09 Box Model 與定位方式
    • 1-170
      9-1 Box Model
    • 1-171
      9-2 邊界屬性
    • 1-172
      9-3 留白屬性
    • 1-173
      9-4 框線屬性
    • 1-174
      9-4-1 border-style (框線樣式)
    • 1-175
      9-4-2 border-color (框線色彩)
    • 1-176
      9-4-3 border-width (框線寬度)
    • 1-177
      9-4-4 border ( 框線屬性速記)
    • 1-178
      9-4-5 border-radius (框線圓角)
    • 1-179
      9-5 寬度與高度屬性
    • 1-180
      9-5-1 box-sizing (Box 大小)
    • 1-181
      9-5-2 width、height ( 寬度與高度)
    • 1-182
      9-5-3 min-width、max-width ( 最小與最大寬度)
    • 1-183
      9-5-4 min-height、max-height ( 最小與最大高度)
    • 1-184
      9-5-5 overflow ( 顯示或隱藏溢出的內容)
    • 1-185
      9-6 定位方式
    • 1-186
      9-6-1 display (HTML元素的顯示類型)
    • 1-187
      9-6-2 top、right、bottom、left (上右下左位移量)
    • 1-188
      9-6-3 position (Box的定位方式)
    • 1-189
      9-6-4 float、clear (文繞圖、解除文繞圖)
    • 1-190
      9-6-5 z-index (重疊順序)
    • 1-191
      9-6-6 visibility (顯示或隱藏Box)
    • 1-192
      9-6-7 box-shadow (Box陰影)
    • 1-193
      9-6-8 vertical-align (垂直對齊方式)
    • 1-194
      CHAPTER 10 背景、漸層、濾鏡與表格
    • 1-195
      10-1 背景屬性
    • 1-196
      10-1-1 background-image (背景圖片)
    • 1-197
      10-1-2 background-repeat (背景圖片重複排列方式)
    • 1-198
      10-1-3 background-position (背景圖片起始位置)
    • 1-199
      10-1-4 background-attachment (背景圖片是否隨著內容捲動)
    • 1-200
      10-1-5 background-clip (背景顯示區域)
    • 1-201
      10-1-6 background-origin (背景顯示位置基準點)
    • 1-202
      10-1-7 background-size (背景圖片大小)
    • 1-203
      10-1-8 background (背景屬性速記)
    • 1-204
      10-2 漸層函式
    • 1-205
      10-2-1 linear-gradient() (線性漸層)
    • 1-206
      10-2-2 radial-gradient() (放射漸層)
    • 1-207
      10-2-3 repeating-linear-gradient()、repeating-radial-gradient()(重複漸層)
    • 1-208
      10-3 濾鏡屬性
    • 1-209
      10-4 表格屬性
    • 1-210
      10-4-1 caption-side (表格標題位置)
    • 1-211
      10-4-2 border-collapse (表格框線模式)
    • 1-212
      10-4-3 table-layout (表格版面編排方式)
    • 1-213
      10-4-4 empty-cells (顯示或隱藏空白儲存格)
    • 1-214
      10-4-5 border-spacing (表格框線間距)
    • 1-215
      CHAPTER 11 CSS版面設計
    • 1-216
      11-1 使用float屬性進行版面設計
    • 1-217
      11-1-1 兩欄式版面
    • 1-218
      11-1-2 三欄式版面
    • 1-219
      11-2 彈性盒子版面
    • 1-220
      11-2-1 flex-direction (Flex Item的排列方向)
    • 1-221
      11-2-2 justify-content (Flex Item的水平對齊方式)
    • 1-222
      11-2-3 align-items (Flex Item的垂直對齊方式)
    • 1-223
      11-2-4 flex-wrap (Flex Item的換行方式)
    • 1-224
      11-2-5 align-content (Flex Item的多行對齊方式)
    • 1-225
      11-2-6 order (個別Flex Item的顯示順序)
    • 1-226
      11-2-7 align-self (個別Flex Item的垂直對齊方式)
    • 1-227
      11-2-8 flex-basis (個別Flex Item的大小)
    • 1-228
      11-3 格線版面
    • 1-229
      11-3-1 grid-template-columns (Grid Item的寬度)
    • 1-230
      11-3-2 gap (Grid Item的間距)
    • 1-231
      11-3-3 grid-template-rows (Grid Item的高度)
    • 1-232
      CHAPTER 12 變形、轉場、動畫 與媒體查詢
    • 1-233
      12-1 變形屬性
    • 1-234
      12-1-1 transform (2D、3D變形)
    • 1-235
      12-1-2 transform-origin (變形原點)
    • 1-236
      12-2 轉場屬性
    • 1-237
      12-2-1 transition-property (要進行轉場的屬性)
    • 1-238
      12-2-2 transition-timing-function (轉場的變化速度)
    • 1-239
      12-2-3 transition-duration (轉場的持續時間)
    • 1-240
      12-2-4 transition-delay (轉場的延遲時間)
    • 1-241
      12-2-5 transition (轉場屬性速記)
    • 1-242
      12-3 動畫屬性
    • 1-243
      12-3-1 animation-name (動畫的名稱)
    • 1-244
      12-3-2 animation-duration (動畫的持續時間)
    • 1-245
      12-3-3 animation-delay (動畫的延遲時間)
    • 1-246
      12-3-4 animation-timing-function (動畫的變化速度)
    • 1-247
      12-3-5 animation-iteration-count (動畫的播放次數)
    • 1-248
      12-3-6 animation-play-state (動畫的播放狀態)
    • 1-249
      12-3-7 animation-fill-mode (動畫的播放前後狀態)
    • 1-250
      12-3-8 animation-direction (動畫的播放方向)
    • 1-251
      12-3-9 animation (動畫屬性速記)
    • 1-252
      12-4 媒體查詢
    • 1-253
      CHAPTER 13 響應式網頁設計實例―圖庫網站
    • 1-254
      13-1 開發適用於不同裝置的網頁
    • 1-255
      13-1-1 自適應網頁設計 (AWD)
    • 1-256
      13-1-2 響應式網頁設計 (RWD)
    • 1-257
      13-2 響應式網頁設計原則
    • 1-258
      13-3 手刻響應式網頁 (圖庫網站)
    • 1-259
      13-3-1 撰寫HTML文件
    • 1-260
      13-3-2 撰寫CSS樣式
    • 1-261
      13-4 手刻導覽按鈕 (漢堡選單)
    • 1-262
      13-5 重置CSS
    • 1-263
      CHAPTER 14 JavaScript 基本語法
    • 1-264
      14-1 撰寫第一個JavaScript程式
    • 1-265
      14-1-1 將JavaScript程式寫進HTML文件
    • 1-266
      14-1-2 將JavaScript程式放在外部檔案
    • 1-267
      14-2 JavaScript程式碼撰寫慣例
    • 1-268
      14-3 型別
    • 1-269
      14-3-1 數值型別 (number)
    • 1-270
      14-3-2 字串型別 (string)
    • 1-271
      14-3-3 布林型別 (boolean)
    • 1-272
      14-3-4 undefined
    • 1-273
      14-3-5 null
    • 1-274
      14-3-6 函式 (function)
    • 1-275
      14-3-7 陣列 (array)
    • 1-276
      14-3-8 物件 (object)
    • 1-277
      14-4 變數
    • 1-278
      14-4-1 使用var關鍵字宣告變數
    • 1-279
      14-4-2 使用let關鍵字宣告變數
    • 1-280
      14-5 常數
    • 1-281
      14-6 運算子
    • 1-282
      14-6-1 算術運算子
    • 1-283
      14-6-2 字串運算子
    • 1-284
      14-6-3 遞增/遞減運算子
    • 1-285
      14-6-4 比較運算子
    • 1-286
      14-6-5 邏輯運算子
    • 1-287
      14-6-6 位元運算子
    • 1-288
      14-6-7 指派運算子
    • 1-289
      14-6-8 條件運算子
    • 1-290
      14-6-9 型別運算子
    • 1-291
      14-6-10 運算子的優先順序
    • 1-292
      14-7 流程控制
    • 1-293
      14-7-1 if
    • 1-294
      14-7-2 swtich
    • 1-295
      14-7-3 for
    • 1-296
      14-7-4 while
    • 1-297
      14-7-5 do…while
    • 1-298
      14-7-6 for…in
    • 1-299
      14-7-7 for…of
    • 1-300
      14-7-8 break與continue指令
    • 1-301
      14-8 函式
    • 1-302
      14-8-1 使用者自訂函式
    • 1-303
      14-8-2 匿名函式
    • 1-304
      14-8-3 箭頭函式
    • 1-305
      14-8-4 函式的參數
    • 1-306
      14-8-5 函式的傳回值
    • 1-307
      14-9 變數的有效範圍
    • 1-308
      CHAPTER 15 JavaScript內建物件
    • 1-309
      15-1 認識物件
    • 1-310
      15-2 使用物件
    • 1-311
      15-2-1 使用實字方式建立物件
    • 1-312
      15-2-2 使用建構子方式建立物件
    • 1-313
      15-3 內建物件
    • 1-314
      15-3-1 Number物件
    • 1-315
      15-3-2 String物件
    • 1-316
      15-3-3 Math物件
    • 1-317
      15-3-4 Date物件
    • 1-318
      15-3-5 Array物件
    • 1-319
      15-3-6 Error物件
    • 1-320
      CHAPTER 16 文件物件模型 (DOM)
    • 1-321
      16-1 認識DOM
    • 1-322
      16-2 取得元素節點
    • 1-323
      16-2-1 getElementById() 方法 (根據id屬性值取得元素)
    • 1-324
      16-2-2 getElementsByName() 方法 (根據name屬性值取得元素)
    • 1-325
      16-2-3 getElementsByTagName() 方法(根據標籤名稱取得元素)
    • 1-326
      16-2-4 getElementsByClassName() 方法(根據類別名稱取得元素)
    • 1-327
      16-2-5 querySelector() / querySelectorAll() 方法(根據CSS選擇器取得元素 / 所有元素)
    • 1-328
      16-3 走訪節點
    • 1-329
      16-4 取得 / 設定元素的屬性值與文字內容
    • 1-330
      16-4-1 取得 / 設定元素的屬性值
    • 1-331
      16-4-2 取得 / 設定元素的文字內容
    • 1-332
      16-5 新增 / 取代 / 移除節點
    • 1-333
      16-5-1 新增節點
    • 1-334
      16-5-2 取代節點
    • 1-335
      16-5-3 移除節點
    • 1-336
      16-6 存取表單元素
    • 1-337
      16-6-1 取得單行文字方塊與密碼欄位的值
    • 1-338
      16-6-2 取得選擇鈕的值
    • 1-339
      16-6-3 取得核取方塊的值
    • 1-340
      16-6-4 取得下拉式清單的值
    • 1-341
      16-7 操作CSS樣式表
    • 1-342
      16-7-1 使用style屬性設定元素的行內樣式
    • 1-343
      16-7-2 使用className屬性套用外部樣式表
    • 1-344
      CHAPTER 17 瀏覽器物件模型 (BOM)
    • 1-345
      17-1 認識BOM
    • 1-346
      17-2 Window物件
    • 1-347
      17-2-1 使用確認對話方塊
    • 1-348
      17-2-2 開啟視窗 / 關閉視窗
    • 1-349
      17-2-3 使用計時器
    • 1-350
      17-3 Location物件
    • 1-351
      17-4 Navigator物件
    • 1-352
      17-5 History物件
    • 1-353
      17-6 Screen物件
    • 1-354
      17-7 Document物件
    • 1-355
      CHAPTER 18 事件處理
    • 1-356
      18-1 事件驅動模式
    • 1-357
      18-2 事件的類型
    • 1-358
      18-3 定義事件處理程式 / 事件監聽程式
    • 1-359
      18-3-1 利用HTML元素的事件屬性設定事件處理程式
    • 1-360
      18-3-2 傳統的DOM事件處理程式
    • 1-361
      18-3-3 DOM Level 2事件監聽程式
    • 1-362
      18-4 移除事件處理程式 / 事件監聽程式
    • 1-363
      18-5 Event物件
    • 1-364
      18-6 事件處理範例
    • 1-365
      18-6-1 使用者介面 (UI) 事件
    • 1-366
      18-6-2 鍵盤事件
    • 1-367
      18-6-3 滑鼠事件
    • 1-368
      18-6-4 表單事件
    • 1-369
      18-6-5 焦點事件
    • 1-370
      CHAPTER 19 Bootstrap網格系統
    • 1-371
      19-1 撰寫Bootstrap網頁
    • 1-372
      19-1-1 取得Bootstrap套件
    • 1-373
      19-1-2 Bootstrap網頁的基本結構
    • 1-374
      19-2 使用Bootstrap網格系統
    • 1-375
      19-2-1 斷點
    • 1-376
      19-2-2 容器
    • 1-377
      19-2-3 欄位寬度
    • 1-378
      19-2-4 欄的水平對齊方式
    • 1-379
      19-2-5 列的垂直對齊方式
    • 1-380
      19-2-6 column位移
    • 1-381
      CHAPTER 20 Bootstrap樣式
    • 1-382
      20-1 內容樣式
    • 1-383
      20-1-1 排版
    • 1-384
      20-1-2 圖片
    • 1-385
      20-1-3 表格
    • 1-386
      20-2 公用類別
    • 1-387
      20-2-1 框線
    • 1-388
      20-2-2 色彩
    • 1-389
      20-2-3 背景
    • 1-390
      20-2-4 文繞圖
    • 1-391
      20-2-5 區塊內容置中
    • 1-392
      20-2-6 文字
    • 1-393
      20-2-7 超連結
    • 1-394
      20-2-8 間距
    • 1-395
      20-2-9 陰影
    • 1-396
      20-2-10 顯示類型
    • 1-397
      20-2-11 大小
    • 1-398
      20-2-12 垂直對齊方式
    • 1-399
      20-3 按鈕
    • 1-400
      20-4 表單
    • 1-401
      20-4-1 建立基本表單
    • 1-402
      20-4-2 表單控制項
    • 1-403
      20-4-3 表單布局
    • 1-404
      CHAPTER 21 Bootstrap元件
    • 1-405
      21-1 關閉按鈕 (Close button)
    • 1-406
      21-2 警報效果 (Alert)
    • 1-407
      21-3 下拉式清單 (Dropdown)
    • 1-408
      21-4 按鈕群組 (Button group)
    • 1-409
      21-5 導覽與標籤頁 (Nav and tab)
    • 1-410
      21-6 導覽列 (Navbar)
    • 1-411
      21-7 卡片 (Card)
    • 1-412
      21-8 工具提示 (Tooltip)
    • 1-413
      21-9 彈出提示 (Popover)
    • 1-414
      21-10 摺疊 (Collapse)
    • 1-415
      21-11 手風琴效果 (Accordion)
    • 1-416
      21-12 輪播 (Carousel)
    • 1-417
      21-13 分頁導覽 (Pagination)
    • 1-418
      CHAPTER 22 響應式網頁設計實例-旅遊網站
    • 1-419
      22-1 「快樂旅遊」網站
    • 1-420
      22-2 設計網頁樣板
    • 1-421
      22-3 設計導覽列
    • 1-422
      22-4 設計輪播
    • 1-423
      22-5 設計內容區-警報效果
    • 1-424
      22-6 設計內容區-卡片
    • 1-425
      22-7 設計頁尾
    • 1-426
      CHAPTER 23 響應式網頁設計實例―部落格網站
    • 1-427
      23-1 「快樂部落格」網站
    • 1-428
      23-2 設計網頁樣板
    • 1-429
      23-3 設計頁首、導覽列與介紹區
    • 1-430
      23-4 設計內容區
    • 1-431
      23-5 設計頁尾
    • 1-432
      CHAPTER 24 jQuery
    • 1-433
      24-1 認識jQuery
    • 1-434
      24-2 取得jQuery核心
    • 1-435
      24-3 使用jQuery核心
    • 1-436
      24-3-1 選擇元素
    • 1-437
      24-3-2 存取元素的內容
    • 1-438
      24-3-3 存取元素的屬性值
    • 1-439
      24-3-4 插入元素
    • 1-440
      24-3-5 操作集合中的每個物件
    • 1-441
      24-3-6 存取CSS設定
    • 1-442
      24-3-7 取得 / 設定元素的寬度與高度
    • 1-443
      24-3-8 移除元素
    • 1-444
      24-3-9 走訪DOM
    • 1-445
      24-3-10 篩選元素
    • 1-446
      24-4 事件處理
    • 1-447
      24-4-1 .on() 方法
    • 1-448
      24-4-2 .off() 方法
    • 1-449
      24-4-3 .ready() 方法
    • 1-450
      24-4-4 Event物件
    • 1-451
      24-5 特效與動畫
    • 1-452
      24-5-1 基本特效
    • 1-453
      24-5-2 淡入 / 淡出 / 移入 / 移出特效
    • 1-454
      24-5-3 自訂動畫
    • 1-455
      CHAPTER 25 Vue.js
    • 1-456
      25-1 認識Vue.js
    • 1-457
      25-2 安裝與使用Vue.js
    • 1-458
      25-3 樣板語法
    • 1-459
      25-3-1 資料繫結
    • 1-460
      25-3-2 屬性繫結
    • 1-461
      25-3-3 使用JavaScript運算式
    • 1-462
      25-4 methods與computed屬性
    • 1-463
      25-4-1 methods屬性
    • 1-464
      25-4-2 computed屬性
    • 1-465
      25-4-3 可寫入的computed屬性
    • 1-466
      25-5 事件處理
    • 1-467
      25-6 表單欄位繫結
    • 1-468
      25-6-1 單行文字方塊
    • 1-469
      25-6-2 選擇鈕
    • 1-470
      25-6-3 核取方塊
    • 1-471
      25-6-4 多行文字方塊
    • 1-472
      25-6-5 下拉式清單
    • 1-473
      25-6-6 v-model指令與修飾字
    • 1-474
      25-7 類別與樣式繫結
    • 1-475
      25-8 條件式渲染
    • 1-476
      25-9 清單渲染
    • 1-477
      版權頁
    • 1-478
      封底

    FAQ

    您可以透過手機、平板或是電腦登入 HiSKIO 平台,在【我的學習】>【我的書籍】頁面,選擇想看的電子書。

    Recommendations

    Reviews

    | Collecting

    Sales Plans