hiskio

    跨裝置網頁設計(第四版)- HTML5、CSS3、JavaScript、jQuery、Bootstrap

    ★快速打造行動優先的響應式網頁！

    收集中
    US$11.90
    ★快速打造行動優先的響應式網頁！
    隨著無線通訊的蓬勃發展，行動上網的比例大幅超越PC上網，網站推出「行動版」已經成為時勢所趨，而且一個現代化的網站應該導入行動優先 (mobile first) 的概念，也就是以優化行動裝置體驗為主要考量，其它裝置次之。本書所要介紹的就是建置跨平台、跨裝置網站的重要技術。

    ■ 使用HTML5的元素和各種表單輸入類型，讓網頁的結構條理分明。
    ■ 使用CSS3的Box Model、定位方式，以及字型、文字、清單、色彩、背景、漸層、表格、陰影、邊界、留白、框線、多欄位排版、2D/3D變形處理、媒體查詢等屬性，以根據PC或行動裝置的特徵設計網頁。
    ■ 使用JavaScript的核心語法和瀏覽器端的應用，讓靜態網頁具有動態效果，包括DOM、JavaScript內建的物件、事件處理等。
    ■ 使用jQuery的核心語法、事件與特效，讓網頁設計更便利快速。
    ■ 使用Bootstrap 4開發行動優先的響應式網頁，讓網頁完整呈現在PC、平板、手機等裝置，達到One Web One URL (一網站一網址) 的目標。
    ■ 使用jQuery Mobile建立行動網頁的介面，將跨平台、跨裝置所面臨的相容性問題交給jQuery Mobile處理。

    章节目录

    • 1-1
      封面頁
    • 1-2
      書名頁
    • 1-3
      關於本書
    • 1-4
      目錄
    • 1-5
      Part 1 HTML5
    • 1-6
      Ch01 網頁設計簡介
    • 1-7
      1-1 網站建置流程
    • 1-8
      1-1-1 階段一：蒐集資料與規劃網站架構
    • 1-9
      1-1-2 階段二：網頁製作與測試
    • 1-10
      1-1-3 階段三：網站上傳與推廣
    • 1-11
      1-1-4 階段四：網站更新與維護
    • 1-12
      1-2 開發適用於不同裝置的網頁
    • 1-13
      1-2-1 針對不同裝置開發不同網站
    • 1-14
      1-2-2 響應式網頁設計
    • 1-15
      1-3 響應式網頁設計原則
    • 1-16
      1-4 網頁設計相關的程式語言
    • 1-17
      1-5 HTML 的演進
    • 1-18
      1-6 HTML5 的新功能
    • 1-19
      1-7 HTML5 文件的撰寫方式
    • 1-20
      1-7-1 HTML5 文件的編輯工具
    • 1-21
      1-7-2 HTML5 文件的基本語法
    • 1-22
      1-7-3 撰寫第一份HTML5 文件
    • 1-23
      Ch02 文件結構
    • 1-24
      2-1 HTML 文件的根元素－ <html> 元素
    • 1-25
      2-2 HTML 文件的標頭－ <head> 元素
    • 1-26
      2-2-1 <title> 元素 ( 文件標題)
    • 1-27
      2-2-2 <meta> 元素 ( 文件相關資訊)
    • 1-28
      2-2-3 <link> 元素 ( 文件之間的關聯)
    • 1-29
      2-3 HTML 文件的主體－ <body> 元素
    • 1-30
      2-3-1 <h1> ~ <h6> 元素 ( 標題1 ~ 6)
    • 1-31
      2-3-2 <p> 元素 ( 段落)
    • 1-32
      2-4 HTML5 新增的結構元素
    • 1-33
      2-5 區塊結構
    • 1-34
      2-5-1 <article> 與 <section> 元素 ( 文章/ 通用的區塊)
    • 1-35
      2-5-2 <nav> 元素 ( 導覽列)
    • 1-36
      2-5-3 <header> 與 <footer> 元素 ( 頁首/ 頁尾)
    • 1-37
      2-5-4 <aside> 元素 ( 側邊欄)
    • 1-38
      2-6 區塊的附加資訊
    • 1-39
      2-6-1 <address> 元素 ( 聯絡資訊)
    • 1-40
      2-6-2 <time> 元素 ( 日期時間)
    • 1-41
      Ch03 資料編輯與格式化
    • 1-42
      3-1 區塊格式
    • 1-43
      3-1-1 <pre> 元素 ( 預先格式化的區塊)
    • 1-44
      3-1-2 <div> 元素 ( 群組成一個區塊)
    • 1-45
      3-1-3 <blockquote> 元素 ( 左右縮排的區塊)
    • 1-46
      3-1-4 <hr> 元素 ( 水平線)
    • 1-47
      3-1-5 <!-- --> ( 註解)
    • 1-48
      3-2 文字格式
    • 1-49
      3-2-1 <b>、<i>、<u>、<sub>、<sup>、<small>、<em>、<strong>、<dfn>、<code>、<samp>、<kbd>、<var>、<cite>、<abbr>、<s>、<q>、<mark>、<ruby>、<rt> 元素
    • 1-50
      3-2-2 <br> 元素 ( 換行)
    • 1-51
      3-2-3 <span> 元素 ( 群組成一行)
    • 1-52
      3-3 項目符號與編號－ <ul>、<ol>、<li> 元素
    • 1-53
      3-4 定義清單－ <dl>、<dt>、<dd> 元素
    • 1-54
      3-5 超連結
    • 1-55
      3-5-1 絕對URI 與相對URI
    • 1-56
      3-5-2 標示超連結－ <a> 元素
    • 1-57
      3-5-3 頁內超連結
    • 1-58
      3-6 相對URI 的路徑資訊－ <base> 元素
    • 1-59
      Ch04 圖片與表格
    • 1-60
      4-1 嵌入圖片－ <img> 元素
    • 1-61
      4-1-1 圖片的寬度與高度
    • 1-62
      4-1-2 圖片的替代顯示文字
    • 1-63
      4-2 標註－ <fi gure>、<fi gcaption> 元素
    • 1-64
      4-3 建立表格－ <table>、<tr>、<td>、<th> 元素
    • 1-65
      4-3-1 儲存格的對齊方式
    • 1-66
      4-3-2 表格的框線大小、外框線與內框線顯示方式
    • 1-67
      4-3-3 合併儲存格
    • 1-68
      4-4 表格標題－ <caption> 元素
    • 1-69
      4-5 表格的表頭、主體與表尾－ <thead>、<tbody>、<tfoot> 元素
    • 1-70
      Ch05 影音多媒體
    • 1-71
      5-1 嵌入影片與聲音－ <video>、<audio> 元素
    • 1-72
      5-2 嵌入資源檔案－ <embed> 元素
    • 1-73
      5-3 嵌入物件－ <object> 元素
    • 1-74
      5-3-1 嵌入影片
    • 1-75
      5-3-2 嵌入聲音
    • 1-76
      5-4 Scripting － <script>、<noscript> 元素
    • 1-77
      5-5 嵌入浮動框架－ <iframe> 元
    • 1-78
      5-6 嵌入CSS 樣式表－ <style> 元素
    • 1-79
      5-7 網頁自動導向
    • 1-80
      Ch06 表單
    • 1-81
      6-1 建立表單－ <form>、<input> 元素
    • 1-82
      6-2 HTML4.01 提供的輸入類型
    • 1-83
      6-2-1 按鈕
    • 1-84
      6-2-2 單行文字方塊
    • 1-85
      6-2-3 選擇鈕
    • 1-86
      6-2-4 核取方塊
    • 1-87
      6-2-5 多行文字方塊
    • 1-88
      6-2-6 下拉式功能表
    • 1-89
      6-2-7 密碼欄位
    • 1-90
      6-2-8 隱藏欄位
    • 1-91
      6-3 HTML5 新增的輸入類型
    • 1-92
      6-3-1 email 類型
    • 1-93
      6-3-2 url 類型
    • 1-94
      6-3-3 search 類型
    • 1-95
      6-3-4 number 類型
    • 1-96
      6-3-5 range 類型
    • 1-97
      6-3-6 color 類型
    • 1-98
      6-3-7 tel 類型
    • 1-99
      6-3-8 日期時間類型 (date、time、datetime、month、week、datetime-local)
    • 1-100
      6-4 按鈕－ <button> 元素
    • 1-101
      6-5 標籤－ <label> 元素
    • 1-102
      6-6 群組標籤－ <optgroup> 元素
    • 1-103
      6-7 將表單欄位框起來－ <fieldset>、<legend> 元素
    • 1-104
      Part 2 CSS3
    • 1-105
      Ch07 CSS基本語法
    • 1-106
      7-1 CSS 的演進
    • 1-107
      7-2 CSS 樣式規則與選擇器
    • 1-108
      7-3 連結HTML 文件與CSS 樣式表
    • 1-109
      7-3-1 在 <head> 元素裡面嵌入樣式表
    • 1-110
      7-3-2 使用HTML 元素的style 屬性指定樣式表
    • 1-111
      7-3-3 將外部的樣式表匯入HTML 文件
    • 1-112
      7-3-4 將外部的樣式表連結到HTML 文件
    • 1-113
      7-4 選擇器的類型
    • 1-114
      7-4-1 類型選擇器
    • 1-115
      7-4-2 後裔選擇器
    • 1-116
      7-4-3 萬用選擇器
    • 1-117
      7-4-4 類別選擇器
    • 1-118
      7-4-5 ID 選擇器
    • 1-119
      7-4-6 屬性選擇器
    • 1-120
      7-4-7 虛擬類別選擇器 (:link、 :visited、 :hover、 :focus、:active、:enabled、:disabled...)
    • 1-121
      7-5 樣式表的串接順序
    • 1-122
      Ch08 字型、文字與清單屬性
    • 1-123
      8-1 字型屬性
    • 1-124
      8-1-1 font-family ( 文字字型)
    • 1-125
      8-1-2 font-size ( 文字大小)
    • 1-126
      8-1-3 font-style ( 正常/ 斜體/ 粗體)
    • 1-127
      8-1-4 font-weight ( 文字粗細)
    • 1-128
      8-1-5 line-height ( 行高)
    • 1-129
      8-1-6 font-stretch ( 文字延展)
    • 1-130
      8-1-7 font-size-adjust ( 字型長寬比)
    • 1-131
      8-1-8 @font-face ( 使用伺服器端的字型)
    • 1-132
      8-1-9 font ( 字型屬性簡便表示法)
    • 1-133
      8-2 文字屬性
    • 1-134
      8-2-1 text-indent ( 首行縮排)
    • 1-135
      8-2-2 text-align ( 文字對齊方式)
    • 1-136
      8-2-3 letter-spacing ( 字母間距)
    • 1-137
      8-2-4 word-spacing ( 文字間距)
    • 1-138
      8-2-5 text-transform ( 大小寫轉換方式)
    • 1-139
      8-2-6 white-space ( 空白字元)
    • 1-140
      8-2-7 text-shadow ( 文字陰影)
    • 1-141
      8-2-8 text-decoration-line、text-decoration-style、textdecoration-color、text-decoration、text-decoration-skip、text-underline-position ( 文字裝飾)
    • 1-142
      8-2-9 text-emphasis-style、text-emphasis-color、textemphasis、text-emphasis-position ( 強調標記)
    • 1-143
      8-3 清單屬性
    • 1-144
      8-3-1 list-style-type ( 項目符號與編號類型)
    • 1-145
      8-3-2 list-style-image ( 圖片項目符號)
    • 1-146
      8-3-3 list-style-position ( 項目符號與編號位置)
    • 1-147
      8-3-4 list-style ( 清單屬性簡便表示法)
    • 1-148
      Ch09 色彩、背景、 漸層與表格屬性
    • 1-149
      9-1 色彩屬性
    • 1-150
      9-1-1 color ( 前景色彩)
    • 1-151
      9-1-2 opacity ( 透明度)
    • 1-152
      9-2 背景屬性
    • 1-153
      9-2-1 background-color ( 背景色彩)
    • 1-154
      9-2-2 background-image ( 背景圖片)
    • 1-155
      9-2-3 background-repeat ( 背景圖片重複排列方式)
    • 1-156
      9-2-4 background-position ( 背景圖片起始位置)
    • 1-157
      9-2-5 background-attachment ( 背景圖片是否隨內容捲動)
    • 1-158
      9-2-6 background-clip ( 背景顯示區域)
    • 1-159
      9-2-7 background-origin ( 背景顯示位置基準點)
    • 1-160
      9-2-8 background-size ( 背景圖片大小)
    • 1-161
      9-2-9 background ( 背景屬性簡便表示法)
    • 1-162
      9-3 漸層表示法
    • 1-163
      9-3-1 linear-gradient() ( 線性漸層)
    • 1-164
      9-3-2 radial-gradient() ( 放射狀漸層)
    • 1-165
      9-3-3 repeating-linear-gradient()、repeating-radial-gradient()( 重複漸層)
    • 1-166
      9-4 表格屬性
    • 1-167
      9-4-1 caption-side ( 表格標題位置)
    • 1-168
      9-4-2 border-collapse ( 表格框線模式)
    • 1-169
      9-4-3 table-layout ( 表格版面編排方式)
    • 1-170
      9-4-4 empty-cells ( 顯示或隱藏空白儲存格)
    • 1-171
      9-4-5 border-spacing ( 表格框線間距)
    • 1-172
      Ch10 Box Model 與定位方式
    • 1-173
      10-1 Box Model
    • 1-174
      10-2 邊界屬性
    • 1-175
      10-3 留白屬性
    • 1-176
      10-4 框線屬性
    • 1-177
      10-4-1 border-style ( 框線樣式)
    • 1-178
      10-4-2 border-color ( 框線色彩)
    • 1-179
      10-4-3 border-width ( 框線寬度)
    • 1-180
      10-4-4 border ( 框線屬性簡便表示法)
    • 1-181
      10-4-5 border-radius ( 框線圓角)
    • 1-182
      10-5 定位方式
    • 1-183
      10-5-1 display (HTML 元素的顯示層級)
    • 1-184
      10-5-2 width、height、top、bottom、left、right(Block Box 的寬度與高度、上下左右位移量)
    • 1-185
      10-5-3 max-width、min-width、max-height、min-height(Block Box 的寬度與高度的最大值及最小值)
    • 1-186
      10-5-4 position (Box 的定位方式)
    • 1-187
      10-5-5 fl oat、clear ( 指定文繞圖、解除文繞圖)
    • 1-188
      10-5-6 z-index ( 重疊順序)
    • 1-189
      10-5-7 visibility ( 顯示或隱藏Box)
    • 1-190
      10-5-8 overfl ow ( 顯示或隱藏溢出Box 的內容)
    • 1-191
      10-5-9 object-fi t ( 配合Box 調整物件大小)
    • 1-192
      10-5-10 object-position ( 物件在Box 內的顯示位置)
    • 1-193
      10-5-11 box-shadow (Box 陰影)
    • 1-194
      10-5-12 vertical-align ( 垂直對齊)
    • 1-195
      Ch11 特殊效果與媒體查詢
    • 1-196
      11-1 指標形狀－ cursor 屬性
    • 1-197
      11-2 外框線－ outline 屬性
    • 1-198
      11-3 多欄位排版
    • 1-199
      11-3-1 column-count、column-width、columns( 欄位數目與寬度)
    • 1-200
      11-3-2 column-gap ( 欄位間距)
    • 1-201
      11-3-3 column-rule ( 欄位分隔線)
    • 1-202
      11-3-4 break-before、break-after、break-inside( 換欄或換頁)
    • 1-203
      11-3-5 column-span ( 跨欄顯示)
    • 1-204
      11-3-6 column-fi ll ( 欄位內容分配比例)
    • 1-205
      11-4 變形處理
    • 1-206
      11-4-1 transform (2D、3D 變形處理)
    • 1-207
      11-4-2 transform-origin ( 變形處理的原點)
    • 1-208
      11-5 媒體查詢
    • 1-209
      Ch12 JavaScript基本語法
    • 1-210
      12-1 撰寫第一個JavaScript 程式
    • 1-211
      12-2 JavaScript 程式碼撰寫慣例
    • 1-212
      12-3 型別
    • 1-213
      12-3-1 數值 (number)
    • 1-214
      12-3-2 字串 (string)
    • 1-215
      12-3-3 布林 (boolean)
    • 1-216
      12-4 變數
    • 1-217
      12-5 運算子
    • 1-218
      12-5-1 算術運算子
    • 1-219
      12-5-2 遞增/ 遞減運算子
    • 1-220
      12-5-3 比較運算子
    • 1-221
      12-5-4 邏輯運算子
    • 1-222
      12-5-5 位元運算子
    • 1-223
      12-5-6 條件運算子
    • 1-224
      12-5-7 型別運算子
    • 1-225
      12-5-8 指派運算子
    • 1-226
      12-5-9 運算子的優先順序
    • 1-227
      12-6 流程控制
    • 1-228
      12-6-1 if
    • 1-229
      12-6-2 switch
    • 1-230
      12-6-3 for
    • 1-231
      12-6-4 while
    • 1-232
      12-6-5 do
    • 1-233
      12-6-6 for...in
    • 1-234
      12-7 函式
    • 1-235
      12-7-1 使用者自訂函式
    • 1-236
      12-7-2 函式的參數
    • 1-237
      12-7-3 函式的傳回值
    • 1-238
      12-8 陣列
    • 1-239
      12-8-1 一維陣列
    • 1-240
      12-8-2 多維陣列
    • 1-241
      Ch13 物件、DOM與事件處理
    • 1-242
      13-1 認識物件
    • 1-243
      13-2 window 物件
    • 1-244
      13-3 document 物件
    • 1-245
      13-3-1 DOM ( 文件物件模型)
    • 1-246
      13-3-2 document 物件的屬性與方法
    • 1-247
      13-3-3 document 物件的子物件與集合
    • 1-248
      13-4 element 物件
    • 1-249
      13-5 事件的類型
    • 1-250
      13-5-1 傳統的事件
    • 1-251
      13-5-2 HTML5 事件
    • 1-252
      13-5-3 DOM 事件
    • 1-253
      13-5-4 觸控事件
    • 1-254
      13-6 事件處理程式
    • 1-255
      Ch14 jQuery
    • 1-256
      14-1 認識jQuery
    • 1-257
      14-2 使用jQuery 核心
    • 1-258
      14-2-1 選擇元素
    • 1-259
      14-2-2 操作DOM 物件
    • 1-260
      14-2-3 設定 CSS 樣式與維度
    • 1-261
      14-3 事件
    • 1-262
      14-3-1 .on() 方法
    • 1-263
      14-3-2 .off() 方法
    • 1-264
      14-3-3 .ready() 方法
    • 1-265
      14-4 特效
    • 1-266
      14-4-1 基本特效
    • 1-267
      14-4-2 淡入 / 淡出 / 滑動移入 / 滑動移出特效
    • 1-268
      14-4-3 自訂特效
    • 1-269
      Part 4 響應式網頁設計 & Bootstrap
    • 1-270
      Ch15 使用Bootstrap開發響應式網頁
    • 1-271
      15-1 撰寫Bootstrap 網頁
    • 1-272
      15-1-1 取得Bootstrap 套件
    • 1-273
      15-1-2 Bootstrap 網頁的基本結構
    • 1-274
      15-2 Bootstrap 網格系統
    • 1-275
      15-2-1 容器類別
    • 1-276
      15-2-2 欄位寬度
    • 1-277
      15-2-3 響應式切換點
    • 1-278
      15-2-4 水平對齊方式
    • 1-279
      15-2-5 column 位移
    • 1-280
      15-3 CSS 樣式
    • 1-281
      15-3-1 排版
    • 1-282
      15-3-2 圖片
    • 1-283
      15-3-3 表格
    • 1-284
      15-3-4 公用類別
    • 1-285
      Ch16 Bootstrap 元件
    • 1-286
      16-1 按鈕 (button)
    • 1-287
      16-2 表單 (form)
    • 1-288
      16-3 超大螢幕效果 (jumbotron)
    • 1-289
      16-4 警報效果 (alert)
    • 1-290
      16-5 下拉式清單 (dropdown)
    • 1-291
      16-6 按鈕群組 (button group)
    • 1-292
      16-7 導覽 (nav)
    • 1-293
      16-8 導覽列 (navbar)
    • 1-294
      16-9 分頁導覽 (pagination)
    • 1-295
      16-10 麵包屑導覽 (breadcrumb)
    • 1-296
      16-11 工具提示 (tooltip)
    • 1-297
      16-12 彈出提示 (popover)
    • 1-298
      16-13 輪播 (carousel)
    • 1-299
      16-14 卡片 (card)
    • 1-300
      16-15 摺疊 (collapse)
    • 1-301
      Ch17 RWD網頁實例
    • 1-302
      17-1「快樂旅遊」網站
    • 1-303
      17-2 設計網頁樣板
    • 1-304
      17-3 設計導覽列
    • 1-305
      17-4 設計輪播
    • 1-306
      17-5 設計內容區－警報效果
    • 1-307
      17-6 設計內容區－卡片
    • 1-308
      17-7 設計頁尾
    • 1-309
      Part 5 行動網頁設計 & jQuery Mobile
    • 1-310
      Ch18 使用jQuery Mobile 開發行動網頁
    • 1-311
      Ch19 jQuery Mobile UI 元件
    • 1-312
      版權頁
    • 1-313
      封底頁

    常见问答

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

    猜你喜欢

    用户评价

    | 收集中

    销售方案