0人評分過此書
網頁設計必學技術：HTML5+CSS3+JavaScript+jQuery+jQuery Mobile+Bootstrap5
本書收錄於此書展...
網頁設計全攻略，精通六大必學技術！
網頁設計 x AI 工具，讓你的創意無限延伸！
從零開始，掌握超實用響應式網頁設計技巧！
跨平台網頁設計熱門技術大集合！
本書精選了網頁設計必學的技術，分為六大主題，從 HTML5 與 CSS3 的基本概念開始，逐步進入 JavaScript 的動態效果，並探討 jQuery 與 jQuery Mobile 的互動設計，最後介紹流行的 Bootstrap 5 框架，立即學會響應式網頁的製作。搭配 AI 工具的應用，讓你在學習網頁設計技術的同時，也能夠掌握智慧化設計的最新趨勢。
網頁設計 x AI 工具，讓你的創意無限延伸！
從零開始，掌握超實用響應式網頁設計技巧！
跨平台網頁設計熱門技術大集合！
本書精選了網頁設計必學的技術，分為六大主題，從 HTML5 與 CSS3 的基本概念開始，逐步進入 JavaScript 的動態效果，並探討 jQuery 與 jQuery Mobile 的互動設計，最後介紹流行的 Bootstrap 5 框架，立即學會響應式網頁的製作。搭配 AI 工具的應用，讓你在學習網頁設計技術的同時，也能夠掌握智慧化設計的最新趨勢。
-
CHAPTER 01 網頁設計基本概念
-
1-1 網站基本概念
-
1-1-1 認識全球資訊網
-
1-1-2 網站的規劃
-
1-1-3 網站設計流程
-
1-1-4 網頁運作原則
-
1-1-5 響應式網頁設計
-
1-1-6 一頁式網站
-
-
1-2 網頁設計程式語言
-
1-2-1 瀏覽器端的網頁標籤語言
-
1-2-2 瀏覽器端的網頁程式語言
-
1-2-3 伺服器端的網頁程式語言
-
1-2-4 MVC架構
-
1-2-5 Web API
-
-
1-3 搜尋引擎最佳化
-
1-3-1 SEO行銷
-
1-3-2 搜尋引擎最佳化方法
-
-
1-4 網路資源
-
1-4-1 W3Schools網站
-
1-4-2 網頁配色工具
-
1-4-3 假文產生器
-
1-4-4 圖片產生器
-
1-4-5 漸層產生器
-
1-4-6 背景圖產生器
-
1-4-7 版型產生器
-
-
1-5 AI工具
-
1-5-1 ChatGPT
-
1-5-2 Gemini / Copilot / Claude / Perplexity
-
1-5-3 Leonardo.Ai
-
1-5-4 Framer
-
1-5-5 Relume
-
1-5-6 Colormind / AI Colors
-
-
1-6 網頁編輯工具
-
1-6-1 記事本及文字編輯
-
1-6-2 Notepad++
-
1-6-3 Brackets
-
1-6-4 Visual Studio Code
-
1-6-5 GitHub Copilot
-
1-6-6 Dreamweaver
-
-
-
CHAPTER 02 HTML基本概念
-
2-1 認識HTML
-
2-1-1 HTML的發展
-
2-1-2 HTML5
-
-
2-2 HTML檔案命名的原則
-
2-2-1 檔案的命名
-
2-2-2 網站資料夾的管理
-
2-2-3 檔案路徑
-
-
2-3 HTML的基本結構
-
2-3-1 HTML的元素、標籤與屬性
-
2-3-2 網頁結構標籤
-
-
2-4 文件資料元素
-
2-4-1 <meta>
-
2-4-2 <base>
-
2-4-3 <link>
-
2-4-4 <style>
-
2-4-5 <script>
-
2-4-6 <noscript>
-
2-4-7 HTML註解
-
-
-
CHAPTER 03 常用的HTML元素
-
3-1 段落元素
-
3-1-1 標題元素－h1, h2, h3, h4, h5, h6
-
3-1-2 段落<p>與分行<br>
-
3-1-3 符號<ul>與編號<ol>
-
3-1-4 定義清單<dl>、<dt>、<dd>
-
3-1-5 引述區塊<blockquote>
-
3-1-6 預先格式化區塊<pre>
-
3-1-7 水平分隔線<hr>
-
-
3-2 文字樣式元素
-
3-2-1 粗體、斜體、刪除線、底線、標示、縮小字型
-
3-2-2 上標、下標、旁註標記
-
3-2-3 顯示電腦程式碼<code>
-
-
3-3 語意結構區塊元素
-
3-3-1 div
-
3-3-2 使用語意結構元素建構頁面
-
-
3-4 超連結元素
-
3-4-1 <a>
-
3-4-2 <a>的屬性
-
3-4-3 文件內的超連結設定
-
-
3-5 圖片元素
-
3-5-1 <img>
-
3-5-2 <picture>
-
3-5-3 <figure>與<figcaption>
-
-
-
CHAPTER 04 影音多媒體、表格及表單元素
-
4-1 影音多媒體元素
-
4-1-1 音訊元素<audio>
-
4-1-2 視訊元素<video>
-
4-1-3 內嵌框架元素<iframe>
-
4-1-4 繪圖畫布<canvas>
-
-
4-2 表格元素
-
4-2-1 <table>的基本結構
-
4-2-2 直行式表格元素－<colgroup>與<col>
-
4-2-3 表格結構元素
-
-
4-3 表單元素
-
4-3-1 表單元素<form>
-
4-3-2 標籤元素<label>
-
4-3-3 輸入欄位元素<input>
-
4-3-4 輸入類型元件
-
4-3-5 多行文字元素<textarea>
-
4-3-6 下拉式選單元素<select>
-
4-3-7 表單群組元素－<fieldset>與<legend>
-
4-3-8 顯示表單計算結果<output>
-
-
-
CHAPTER 05 CSS基本概念
-
5-1 認識CSS
-
5-1-1 關於CSS
-
5-1-2 CSS的基本架構
-
-
5-2 CSS的使用方式
-
5-2-1 行內樣式
-
5-2-2 內部樣式表
-
5-2-3 外部樣式表
-
5-2-4 樣式表的串接順序
-
-
5-3 CSS基本選擇器
-
5-3-1 標籤選擇器
-
5-3-2 class選擇器
-
5-3-3 id選擇器
-
5-3-4 通用選擇器
-
5-3-5 屬性選擇器
-
-
5-4 組合選擇器
-
5-4-1 後代選擇器
-
5-4-2 子選擇器
-
5-4-3 同層相鄰選擇器
-
5-4-4 同層全體選擇器
-
-
5-5 虛擬類別選擇器
-
5-5-1 常見的虛擬類別
-
5-5-2 -child虛擬類別選擇器
-
5-5-3 -of-type虛擬類別選擇器
-
-
5-6 虛擬元素選擇器
-
5-6-1 ::before與::after
-
5-6-2 ::first-line與::first-letter
-
5-6-3 ::marker
-
5-6-4 ::selection
-
-
-
CHAPTER 06 CSS樣式
-
6-1 色彩屬性
-
6-1-1 認識色彩值
-
6-1-2 color(色彩)
-
-
6-2 字型屬性
-
6-2-1 font-family(文字字型)
-
6-2-2 font-size(文字大小)
-
6-2-3 font-style(文字樣式)
-
6-2-4 font-variant(小型大寫字體)
-
6-2-5 font-variant-caps(大寫字母外觀)
-
6-2-6 font-weight(文字粗細)
-
-
6-3 文字段落屬性
-
6-3-1 text-align(文字對齊方式)
-
6-3-2 text-align-last(文字對齊方式)
-
6-3-3 text-decoration(文字裝飾線)
-
6-3-4 text-shadow(文字陰影)
-
6-3-5 其他與文字段落相關的屬性
-
-
6-4 清單屬性
-
6-4-1 list-style-type(清單符號類型)
-
6-4-2 list-style-position(清單符號位置)
-
6-4-3 list-style-image(圖片清單符號)
-
6-4-4 list-style(清單速記)
-
-
6-5 邊框屬性
-
6-5-1 border(邊框)
-
6-5-2 border-width(邊框寬度)
-
6-5-3 border-style(邊框樣式)
-
6-5-4 border-color(邊框顏色)
-
6-5-5 border-radius(邊框圓角)
-
6-5-6 border-image(邊框影像)
-
-
6-6 背景屬性
-
6-6-1 background-color(背景色彩)
-
6-6-2 background-image(背景圖片)
-
6-6-3 background-repeat(背景重複排列方式)
-
6-6-4 background-position(背景圖片位置)
-
6-6-5 background-attachment(背景固定模式)
-
6-6-6 background-size(背景圖片大小)
-
6-6-7 background(背景速記)
-
6-6-8 background-blend-mode(背景混合模式)
-
6-6-9 mix-blend-mode(圖層混合模式)
-
6-6-10 background-clip(背景裁剪)
-
-
6-7 漸層函式
-
6-7-1 linear-gradient() (線性漸層)
-
6-7-2 radial-gradient() (放射漸層)
-
6-7-3 conic-gradient() (圓錐漸層)
-
6-7-4 repeating-gradient() (重複漸層)
-
6-7-5 opacity(透明度)
-
-
6-8 表格屬性
-
6-8-1 caption-side(表格標題位置)
-
6-8-2 border-collapse(表格框線模式)
-
6-8-3 border-spacing(表格框線間距)
-
6-8-4 table-layout(表格版面編排)
-
6-8-5 empty-cells(顯示或隱藏空白儲存格)
-
6-8-6 vertical-align(垂直對齊)
-
-
6-9 變形、轉場與動畫屬性
-
6-9-1 變形屬性
-
6-9-2 轉場屬性
-
6-9-3 動畫屬性
-
-
-
CHAPTER 07 CSS版面設計
-
7-1 盒子模型
-
7-1-1 盒子模型的結構
-
7-1-2 width與height(寬度與高度)
-
7-1-3 padding(內邊距)
-
7-1-4 margin(外邊距)
-
7-1-5 box-sizing
-
7-1-6 box-shadow(區塊陰影)
-
-
7-2 定位方式
-
7-2-1 display(元素的顯示層級)
-
7-2-2 float(浮動元素)與clear(清除浮動)
-
7-2-3 position(定位元素)
-
7-2-4 z-index(重疊順序)
-
7-2-5 visibility(顯示或隱藏)
-
-
7-3 彈性版面
-
7-3-1 flexbox(彈性版面)
-
7-3-2 flex-direction(堆疊方向)
-
7-3-3 flex-wrap(換行)
-
7-3-4 flex-flow(彈性版面速記)
-
7-3-5 justify-content(水平對齊)
-
7-3-6 align-items(垂直對齊)
-
7-3-7 align-content(垂直方向對齊)
-
7-3-8 子元素的屬性
-
-
7-4 Grid網格系統
-
7-4-1 Grid基本知識
-
7-4-2 Grid Container
-
7-4-3 Grid Item
-
7-4-4 Grid的排序與各種對齊方式
-
-
7-5 媒體查詢
-
7-5-1 加入媒體查詢
-
7-5-2 媒體特徵
-
7-5-3 用媒體查詢設計RWD版面
-
-
-
CHAPTER 08 HTML+CSS網頁設計範例
-
8-1 單欄式網頁設計範例
-
8-1-1 範例說明
-
8-1-2 導覽列選單說明
-
8-1-3 頁首說明
-
8-1-4 內容區塊說明
-
8-1-5 表單及嵌入Google地圖說明
-
8-1-6 頁尾說明
-
8-1-7 媒體查詢設定
-
-
8-2 多欄式網頁設計範例
-
8-2-1 範例說明
-
8-2-2 Grid網格說明
-
8-2-3 導覽列三層選單製作說明
-
8-2-4 object-fit(區塊填滿)屬性
-
8-2-5 幫網頁標題加上圖示
-
-
8-3 動畫效果設計範例
-
8-3-1 範例說明
-
8-3-2 頁首animation動畫效果說明
-
8-3-3 圖片互動效果說明
-
8-3-4 幫圖片加上濾鏡效果
-
8-3-5 媒體查詢設定
-
8-3-6 測試響應式網頁
-
-
-
CHAPTER 09 JavaScript基本概念
-
9-1 認識JavaScript
-
9-1-1 JavaScript簡介
-
9-1-2 在網頁中使用JavaScript
-
9-1-3 JavaScript語法規則
-
9-1-4 JavaScript保留字
-
-
9-2 常數與變數
-
9-2-1 認識常數與變數
-
9-2-2 宣告變數
-
9-2-3 資料型態
-
9-2-4 跳脫字元
-
-
9-3 運算子
-
9-3-1 算術運算子
-
9-3-2 字串運算子
-
9-3-3 指派運算子
-
9-3-4 比較運算子
-
9-3-5 邏輯運算子
-
9-3-6 位元運算子
-
9-3-7 typeof運算子
-
9-3-8 ?:條件運算子
-
9-3-9 運算子優先順序
-
-
9-4 流程控制
-
9-4-1 使用if與if.else進行流程控制
-
9-4-2 使用switch進行流程控制
-
9-4-3 使用while進行流程控制
-
9-4-4 使用do.while進行流程控制
-
9-4-5 使用for進行流程控制
-
-
9-5 函式
-
9-5-1 函式的定義方式
-
9-5-2 函式的參數
-
9-5-3 函式的return(傳回值)
-
9-5-4 箭頭函式
-
-
9-6 陣列
-
9-6-1 一維陣列
-
9-6-2 多維陣列
-
-
-
CHAPTER 10 JavaScript物件、DOM與事件處理
-
10-1 物件
-
10-1-1 物件基本概念
-
10-1-2 JavaScript的物件導向
-
10-1-3 物件宣告
-
10-1-4 取得物件屬性
-
10-1-5 物件的方法
-
10-1-6 物件的繼承
-
10-1-7 物件的多型
-
-
10-2 BOM與DOM
-
10-2-1 認識BOM
-
10-2-2 window物件
-
10-2-3 認識DOM
-
10-2-4 document物件
-
-
10-3 事件
-
10-3-1 事件的類型
-
10-3-2 事件綁定方式
-
10-3-3 事件流程的事件捕獲與事件冒泡
-
-
10-4 JavaScript範例實作
-
10-4-1 響應式導覽列
-
10-4-2 圖片輪播
-
10-4-3 回到網頁頂端
-
10-4-4 粒子動畫效果
-
-
-
CHAPTER 11 jQuery
-
11-1 jQuery基本概念
-
11-1-1 jQuery的使用
-
11-1-2 jQuery的語法
-
-
11-2 jQuery選擇器
-
11-2-1 基本選擇器
-
11-2-2 篩選選擇器
-
-
11-3 CSS與DOM的處理
-
11-3-1 變更及取得元素的方法
-
11-3-2 存取元素的屬性值
-
-
11-4 事件
-
11-4-1 事件的類型
-
11-4-2 事件處理
-
-
11-5 特效與動畫
-
11-5-1 特效的使用
-
11-5-2 自訂動畫
-
-
11-6 jQuery UI組件
-
11-6-1 jQuery UI的使用
-
11-6-2 Accordion組件
-
11-6-3 Tabs組件
-
-
11-7 jQuery範例實作
-
11-7-1 圖片輪播
-
11-7-2 疊加效果
-
11-7-3 回到網頁頂端
-
-
-
CHAPTER 12 jQuery Mobile
-
12-1 jQuery Mobile基本概念
-
12-1-1 jQuery Mobile的使用
-
12-1-2 jQuery Mobile的頁面結構
-
12-1-3 data-role
-
12-1-4 data-position
-
12-1-5 頁面佈景主題
-
12-1-6 頁面連結與切換效果
-
-
12-2 jQuery Mobile UI元件
-
12-2-1 按鈕元件
-
12-2-2 群組按鈕元件
-
12-2-3 導覽列元件
-
12-2-4 檢視清單元件
-
12-2-5 對話方塊元件
-
12-2-6 摺疊式內容區塊元件
-
12-2-7 網格元件
-
-
12-3 jQuery Mobile表單
-
12-3-1 表單基本概念
-
12-3-2 文字輸入
-
12-3-3 日期時間
-
12-3-4 滑桿
-
12-3-5 切換開關
-
12-3-6 單選與複選按鈕
-
12-3-7 下拉式選單
-
12-3-8 取得表單欄位值
-
-
12-4 jQuery Mobile事件
-
12-4-1 觸控事件
-
12-4-2 捲動事件
-
12-4-3 方向事件
-
12-4-4 初始化事件
-
-
12-5 行動網頁實作範例
-
12-5-1 載入相關檔案
-
12-5-2 初始化事件撰寫
-
12-5-3 HOME頁面製作說明
-
12-5-4 商品頁面製作說明
-
12-5-5 連絡我們頁面製作說明
-
-
-
CHAPTER 13 Bootstrap基本概念
-
13-1 認識Bootstrap
-
13-1-1 載入Bootstrap
-
13-1-2 Bootstrap文件的使用
-
13-1-3 Bootstrap Icon
-
-
13-2 Bootstrap網格系統
-
13-2-1 網頁結構與設計
-
13-2-2 容器
-
13-2-3 列與欄
-
13-2-4 斷點
-
13-2-5 間距
-
13-2-6 垂直與水平對齊/換行/排序
-
13-2-7 col位移與獨立col
-
-
13-3 類別的使用
-
13-3-1 間距類別
-
13-3-2 顏色與透明度類別
-
13-3-3 文字類別
-
13-3-4 圖片類別
-
13-3-5 表格類別
-
13-3-6 框線類別
-
13-3-7 浮動、位置、display類別
-
13-3-8 大小類別
-
13-3-9 表單類別
-
-
-
CHAPTER 14 Bootstrap元件
-
14-1 Button元件
-
14-1-1 Button
-
14-1-2 Button Group
-
14-1-3 Close Button
-
14-1-4 Dropdowns
-
-
14-2 Collapse與Accordion元件
-
14-2-1 Collapse
-
14-2-2 Accordion
-
-
14-3 Card元件
-
14-3-1 基本的Card
-
14-3-2 在Card中加入圖片
-
14-3-3 在Card中加入List Group
-
14-3-4 Card的布局
-
-
14-4 Carousel元件
-
14-4-1 單純圖片輪播
-
14-4-2 在輪播元件中加入控制按鈕
-
14-4-3 加入字幕
-
14-4-4 轉場效果
-
-
14-5 Navs&Tabs/Navbar/Pagination元件
-
14-5-1 Navs&Tabs
-
14-5-2 Navbar
-
14-5-3 Pagination
-
-
14-6 Tooltip/Popover/Modal/Offcanvas元件
-
14-6-1 Tooltip
-
14-6-2 Popover
-
14-6-3 Modal
-
14-6-4 Offcanvas
-
-
-
CHAPTER 15 Bootstrap響應式網頁設計範例
-
15-1 兩欄式網頁設計範例
-
15-1-1 範例說明
-
15-1-2 導覽列製作說明
-
15-1-3 側欄固定版面製作說明
-
15-1-4 右欄版面製作說明
-
15-1-5 回到頂端按鈕製作說明
-
-
15-2 商品網頁設計範例
-
15-2-1 範例說明
-
15-2-2 頁首製作說明
-
15-2-3 商品列表製作說明
-
15-2-4 Alert(警報效果)元件製作說明
-
15-2-5 Toasts(吐司方塊)製作說明
-
15-2-6 超連結設定說明
-
-
- 出版地 ： 臺灣
- 語言 ： 繁體中文
評分與評論
請登入後再留言與評分
PDF
PDF
PDF
PDF
PDF
