HTML 5網頁設計與製作實戰從入門到精通

HTML 5網頁設計與製作實戰從入門到精通

《HTML 5網頁設計與製作實戰從入門到精通》是2020年3月人民郵電出版社出版的圖書,作者是龍馬工作室。

基本介紹

  • 書名:HTML 5網頁設計與製作實戰從入門到精通
  • 作者:龍馬工作室
  • ISBN:9787115365750
  • 頁數:270頁
  • 定價:39.8元
  • 出版社:人民郵電出版社
  • 出版時間:2020年3月
  • 裝幀:平裝
  • 開本:16開
內容簡介,圖書目錄,

內容簡介

《HTML 5網頁設計與製作實戰從入門到精通》通過精選案例引導讀者深入學習,系統地介紹了利用HTML 5進行網頁設計與製作的相關知識和操作方法。
全書共16章。第 1~3章主要介紹HTML 5的基礎知識,包括基本概念、語法變化和基本語法等;第4~10章主要介紹常用的網頁設計,包括文本、色彩和圖片、列表與段落、超連結、多媒體、Canvas動畫和表單等;第 11~12章主要介紹HTML 5的高級套用,包括本地存儲和離線Web套用等;第 13~16章通過實戰案例進一步講解了基礎知識的綜合套用方法,包括休閒娛樂、企業門戶、電子商務、團購等多種類型網頁的設計與製作方法。
在《HTML 5網頁設計與製作實戰從入門到精通》附贈的DVD多媒體教學光碟中,包含了17小時與圖書內容同步的教學錄像及所有實例的配套源檔案。此外,還贈送了大量相關學習內容的教學錄像及擴展學習電子書等。為了滿足讀者在手機和平板電腦上學習的需要,光碟中還贈送了本書教學錄像的手機版視頻學習檔案。
《HTML 5網頁設計與製作實戰從入門到精通》不僅適合HTML 5的初、中級讀者學習使用,也可以作為各類院校相關專業學生和網頁製作培訓班的教材或輔導用書。

圖書目錄

第 1章 HTML 5概述
HTML是製作網頁需要掌握的基礎語言,任何高級網站開發語言都必須以HTML為基礎實現。本章主要介紹HTML的基本概念和編寫方法及瀏覽HTML檔案的方法。
1.1 HTML 5概述 002
1.1.1 HTML的發展史 002
1.1.2 兼容性和存在即合理 002
1.1.3 效率和用戶優先 002
1.1.4 化繁為簡 003
1.2 HTML 5的基本概念 003
1.2.1 HTML 5的革命性變化 004
1.2.2 HTML 5檔案的基本結構 004
1.2.3 HTML 5的標記 005
1.3 HTML 5檔案的編寫方法 005
1.3.1 使用記事本編寫HTML 5 005
1.3.2 使用Dreamweaver編寫HTML檔案 006
1.3.3 編寫第 一個HTML 5網頁檔案 007
高手私房菜 008
第 2章 HTML 5改進詳解
HTML 5作為最新的標記語言,與舊版本的HTML標記語言相比變化很大。在未來的網站開發中,它將作為最常用的標記語言。本章開始認識HTML 5。
2.1 HTML 5的適用範圍 010
2.2 使用瀏覽器查看HTML 5檔案 010
2.2.1 各大瀏覽器與HTML 5的兼容性 010
2.2.2 查看頁面效果 010
2.2.3 查看源檔案 011
2.3 編輯一個簡單的HTML 5頁面 011
2.3.1 搭建支持的瀏覽器環境 011
2.3.2 檢測瀏覽器是否支持HTML標記 012
2.3.3 使用HTML結構編寫“hello,world”頁面 013
2.4 語法變化 014
2.4.1 HTML 5的語法變化 014
2.4.2 HTML 5中的標記方法 014
2.4.3 版本兼容性 015
2.4.4 標記示例 015
2.5 新增和廢除的元素 016
2.5.1 新增的結構元素 016
2.5.2 新增的input元素的類型 018
2.5.3 新增的其他元素 018
2.5.4 廢除的元素 021
2.6 新增和廢除的屬性 022
2.6.1 新增的屬性 022
2.6.2 廢除的屬性 024
2.7 全局屬性 026
2.7.1 Content Editable屬性 026
2.7.2 design Mode屬性 026
2.7.3 hidden屬性 027
2.7.4 spellcheck屬性 027
2.7.5 tabindex屬性 027
高手私房菜 028
第3章 HTML 5的基本語法
當網際網路和Web逐漸成為主流時,Web技術也發生了巨大的變化。W3C和其他的標準化組織共同制定了一些規範,用來創建和解釋基於Web的內容。
3.1 Web標準 030
3.1.1 Web標準概述 030
3.1.2 Web標準規定的內容 031
3.2 HTML基本結構 031
3.2.1 文檔類型說明 032
3.2.2 HTML標記 032
3.2.3 頭標記head 032
3.2.4 標題標記title 032
3.2.5 元信息標記meta 033
3.2.6 網頁的主體標記 034
3.2.7 頁面注釋標記 035
3.3 實例——符合W3C標準的HTML 5網頁結構 036
高手私房菜 036
第4章 網頁文本設計
文字是網頁中**主要也是最常用的元素。本章主要介紹在網頁中使用文字和文字結構標記的方法。
4.1 實例1——添加文本 038
4.1.1 普通文本 038
4.1.2 特殊字元文本 038
4.1.3 文本特殊樣式 039
4.2 實例2——文本排版 040
4.2.1 段落標記
與換行標記
041
4.2.2 標題標記
~
042
4.3 實例3——文本格式的高級設定 043
4.3.1 字型 043
4.3.2 字號 044
4.3.3 字型風格 045
4.3.4 加粗字型 045
4.3.5 小寫字母轉為大寫字母 046
4.3.6 字型複合屬性 047
4.3.7 字型顏色 047
4.3.8 陰影文本 048
4.3.9 溢出文本 049
4.3.10 控制換行 050
4.4 實例4——成才教育網文本設計 051
高手私房菜 052
第5章 網頁色彩和圖片設計
網頁要給訪客帶來舒適愉悅的感覺,漂亮的網頁色彩搭配和圖片設計就顯得尤為重要。而且網頁的目的是更好地向訪客傳達信息,使用醒目直觀的圖片往往比單調的文字更有表現力和說服力。
5.1 網頁色彩與圖片的關係 054
5.2 實例1——網頁圖像的套用 054
5.2.1 網頁圖片格式的選擇 054
5.2.2 使用路徑 055
5.2.3 網頁中插入圖像標記 056
5.2.4 設定圖像源檔案 056
5.2.5 設定圖像在網頁中的寬度和高度 057
5.2.6 設定圖像的提示文字 058
5.3 實例2——製作茂森房地產廣告網頁 058
高手私房菜 059
第6章 網頁列表與段落設計
在網頁中文字列表和段落是**常見的內容之一。文字列表可分為有序和無序兩種,而段落設計有文字格式設計、間隔、縮進、對齊方式、文字修飾等內容。
6.1 實例1——網頁文字列表設計 062
6.1.1 建立無序列表 062
6.1.2 建立有序列表 063
6.2 實例2——設定網頁段落格式 063
6.2.1 單詞間隔 063
6.2.2 字元間隔 064
6.2.3 文字修飾 065
6.2.4 垂直對齊方式 066
6.2.5 文本轉換 067
6.2.6 水平對齊方式 068
6.2.7 文本縮進 069
6.2.8 文本行高 070
6.2.9 處理空白 071
6.2.10 文本反排 072
6.3 實例3——製作圖文混排型旅遊網頁 073
高手私房菜 074
第7章 網頁超連結設計
連結是網頁中比較重要的組成部分,是實現各個網頁相互跳轉的依據。本章主要講述連結的概念和實現方法。
7.1 實例1——創建超文本與圖片連結 076
7.2 實例2——創建下載連結 080
7.3 實例3——使用相對路徑和絕對路徑 081
7.4 實例4——設定連結目標打開視窗 082
7.5 實例5——超文本連結到一個E-mail地址 084
7.6 實例6——使用錨連結製作電子書閱讀網頁 087
7.7 實例7——超文本連結到其他內容 090
7.8 實例8——創建熱點區域 092
7.9 實例9——浮動框架 094
高手私房菜 096
第8章 網頁多媒體設計
網頁上除了文本、圖片等內容外,還可以增加音頻和視頻等多媒體內容。目前在網頁上沒有關於音頻和視頻的標準,多數音頻和視頻都是通過外掛程式來播放的。為此,HTML 5新增了音頻和視頻的標籤。
8.1 HTML 5 Audio和Video概述 098
8.1.1 視頻容器 098
8.1.2 音頻和視頻編解碼器 098
8.1.3 Audio元素和Video元素的瀏覽器支持情況 099
8.2 實例1——使用HTML 5 Audio和Video API 099
8.2.1 理解媒體元素 099
8.2.2 使用audio元素 100
8.2.3 使用video元素 101
8.2.4 瀏覽器支持性檢測 101
8.3 實例2——設定網頁多媒體屬性 103
8.4 實例3——調用網頁多媒體 105
高手私房菜 106
第9章 網頁Canvas動畫
HTML 5呈現了很多在之前的HTML版本中沒有的新特性,其中一個**值得提及的特性就是HTML Canvas,用戶通過它可以在網頁上繪製圖像。
9.1 實例1——認識畫布 108
9.1.1 Canvas元素的基本用法 108
9.1.2 繪製帶框線矩形 108
9.1.3 繪製漸變圖形 109
9.2 實例2——在畫布中使用路徑 111
9.2.1 MoveTo與LineTo的用法 111
9.2.2 使用arc方法繪製圓形 112
9.3 實例3——對畫布中圖形的操作 113
9.3.1 變換圖形原點坐標 114
9.3.2 組合多個圖形 114
9.3.3 添加圖形陰影 116
9.4 實例4——處理畫布中的圖像 117
9.4.1 繪製圖像 118
9.4.2 平鋪圖像 118
9.4.3 切割圖像 120
9.4.4 處理像素 121
9.5 實例5——運用樣式與顏色 123
9.5.1 色彩設定 123
9.5.2 透明度 123
9.5.3 線型 126
9.5.4 漸變 128
9.6 實例6——畫布的其他套用 130
9.6.1 繪製文字 130
9.6.2 保存、恢復及輸出圖形 132
9.6.3 製作簡單的動畫 133
高手私房菜 136
第 10章 網頁表單設計
在HTML 5中,表單擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。本章節主要講述表單的概述、表單基本元素的使用方法和表單高級元素的使用方法。
10.1 實例1——熟悉表單屬性 138
10.1.1 表單的用途 138
10.1.2 表單的屬性設定 138
10.2 實例2——表單基本元素的套用 140
10.2.1 文字欄位 140
10.2.2 密碼域 141
10.2.3 單選按鈕 142
10.2.4 複選框 142
10.2.5 下拉選擇框 143
10.2.6 普通按鈕 144
10.2.7 提交按鈕 144
10.2.8 重置按鈕 145
10.3 實例3——表單高級元素的使用 146
10.3.1 URL類型元素 146
10.3.2 Email類型元素 147
10.3.3 date類型元素 147
10.3.4 time類型元素 148
10.3.5 datetime類型元素 148
10.3.6 datetime-local類型元素 149
10.3.7 month類型元素 149
10.3.8 week類型元素 150
10.3.9 number類型元素 150
10.3.10 range類型元素 151
10.3.11 search類型元素 151
10.3.12 tel類型元素 152
10.3.13 color類型元素 152
10.4 實例4——創建用戶反饋表單 153
高手私房菜 154
第 11章 HTML 5本地存儲
在HTML 5標準之前,Web存儲信息需要cookie來完成。因為它們由每個對伺服器的請求來傳遞,使得cookie速度很慢而且效率不高。在THML 5中,Web存儲API為用戶如何在計算機或設備上存儲用戶信息作了數據標準的定義。
11.1 實例1——Web Storage存儲 156
11.1.1 sessionStorage對象 156
11.1.2 localStorage對象 157
11.2 實例2——操作localStorage 158
11.2.1 清空localStorage數據 158
11.2.2 遍歷localStorage數據 158
11.2.3 使用JSON對象存取數據 159
11.3 實例3——WebSQL資料庫套用 161
11.3.1 打開與創建資料庫 161
11.3.2 執行事務 161
11.3.3 插入數據 161
11.3.4 數據管理 162
高手私房菜 162
第 12章 構建離線的Web套用
為了能在離線的情況下訪問網站,可以採用HTML 5的離線Web功能。本章主要介紹使用HTML 5離線Web套用API和使用HTML 5離線Web套用構建套用。
12.1 HTML 5離線Web套用概述 164
12.2 實例1——使用HTML 5離線Web套用API 164
12.2.1 檢查瀏覽器的支持情況 164
12.2.2 搭建簡單的離線應用程式 164
12.2.3 支持離線行為 165
12.2.4 Manifest檔案 166
12.2.5 ApplicationCache API 167
12.3 實例2——使用HTML 5離線Web套用構建套用 168
12.3.1 創建記錄資源的manifest檔案 168
12.3.2 創建構成界面的HTML和CSS 168
12.3.3 創建離線的JavaScript 169
12.3.4 檢查applicationCache的支持情況 171
12.3.5 為Update按鈕添加處理函式 171
12.3.6 添加Storage功能代碼 171
12.3.7 添加離線事件處理程式 172
高手私房菜 172
第 13章 製作休閒娛樂類網頁
休閒娛樂類的網頁種類很多,如聊天交友、星座運程、遊戲視頻等。本章主要以視頻類網頁為例進行介紹。
13.1 整體布局 174
13.1.1 設計分析 174
13.1.2 排版架構 174
13.2 模組組成 175
13.3 製作步驟 176
13.3.1 製作樣式表 176
13.3.2 Logo與導航選單 184
13.3.3 搜尋條 185
13.3.4 左側視頻模組 185
13.3.5 評論模組 186
13.3.6 右側熱門推薦 187
13.3.7 底部模組 189
高手私房菜 190
第 14章 製作大型企業門戶類網頁
作為大型企業的網站,根據主體內容不同,主頁所容括的信息量差異也很大。大型企業類網站內容欄目會比較多,需要合理布局,每一個欄目的大小位置以及內容顯示形式都要精心設計。
14.1 整體布局 192
14.1.1 設計分析 192
14.1.2 排版架構 192
14.2 模組組成 193
14.3 製作步驟 193
14.3.1 樣式表 193
14.3.2 網頁頭部 195
14.3.3 導航選單欄 196
14.3.4 中間主體第 一欄 196
14.3.5 中間主體第 二欄 200
14.3.6 中間主體第三欄 204
14.3.7 中間主體第四欄 210
14.3.8 中間主體第五欄 214
14.3.9 網頁底部 219
高手私房菜 220
第 15章 製作電子商務類網頁
電子商務網站是當前比較流行的一類網站。隨著網路購物、網際網路交易的普及,如淘寶、阿里巴巴、亞馬遜等類型的電子商務網站在近幾年風靡全球。因此,越來越多的公司企業著手架設電子商務網站平台。本章就來介紹一個簡單的電子商務類網頁。
15.1 整體布局 222
15.1.1 設計分析 222
15.1.2 排版架構 223
15.2 模組組成 223
15.3 製作步驟 224
15.3.1 樣式表 224
15.3.2 網頁頭部 225
15.3.3 主體第 一通欄 229
15.3.4 主體第 二通欄 234
15.3.5 主體第三通欄 242
15.3.6 網頁底部 245
高手私房菜 248
第 16章 製作團購類網頁
團購這一名詞是**近幾年才出現的,而且迅速火爆。有關團購的商業類網站也如雨後春筍般遍地開花,比較有名的有聚划算、窩窩團、拉手網、美團網等。本章就來製作一個典型的商業類團購網站。
16.1 整體布局 250
16.1.1 設計分析 251
16.1.2 排版架構 251
16.2 模組組成 252
16.3 製作步驟 252
16.3.1 樣式表 252
16.3.2 網頁頭部 255
16.3.3 分類及區域選擇 257
16.3.4 新品展示 258
16.3.5 側邊欄 262
16.3.6 熱門城市索引 267
16.3.7 網頁底部 268
16.3.8 JavaScript腳本 269
高手私房菜 270

相關詞條

熱門詞條

聯絡我們