相關主題
商品描述
本書從初學者的角度出發,以"項目導向、任務驅動”的方式,由淺入深,從網頁標簽語法開始介紹,巧妙融合完整的網頁設計流程,將理論與實戰緊密相連,助力讀者逐步掌握網頁實際制作的核心技能。全書共6個項目,項目1和項目2介紹開發工具,以及HTML5和CSS3的基礎知識;項目3~項目5分別介紹盒子模型、網頁布局、表格、表單、多媒體元素和動畫等網頁制作的核心內容;項目6綜合運用所學知識,帶領讀者完成浙江金融職業學院圖書館綜合服務平臺的制作,體驗從理論到實戰的完整過程。本書結構合理、內容緊湊,每個核心知識點都精心設計了案例。本書既適合作為網頁設計初學者、高等院校相關專業學生的學習用書和培訓學校的教材,也可以作為網頁制作、網站開發等行業人員的自學參考書。
目錄大綱
項目1 運用HTML5搭建頁面 1
任務1.1 創建HTML5歡迎頁面 2
1.1.1 認識網頁 2
1.1.2 瀏覽器 3
1.1.3 開發工具 3
1.1.4 認識HTML 5
1.1.5 HTML5文檔結構 5
1.1.6 標簽分類 6
1.1.7 標簽屬性 7
任務1.2 制作“金院雕塑”頁面 8
1.2.1 HTML文檔頭部相關標簽 9
1.2.2 頁面格式化標簽 11
1.2.3 文本格式化標簽 14
1.2.4 文本樣式標簽 15
1.2.5 常用的圖像格式 16
1.2.6 圖像標簽 16
1.2.7 絕對路徑和相對路徑 18
1.2.8 特殊字符 19
任務1.3 制作“樓宇資訊”頁面 21
1.3.1 無序列表 22
1.3.2 有序列表 24
1.3.3 定義列表 26
1.3.4 列表的嵌套應用 27
任務1.4 制作“校園景觀”頁面 30
1.4.1 創建超鏈接 31
1.4.2 錨點超鏈接 33
1.4.3 鏈接偽類控制超鏈接 35
項目小結 38
課後練習 38
項目2 運用CSS3修飾頁面 40
任務2.1 制作“杭州七色地鐵”頁面 40
2.1.1 什麼是CSS及其優勢 41
2.1.2 CSS樣式規則及特點 42
2.1.3 引入CSS樣式 43
2.1.4 CSS基礎選擇器 48
任務2.2 制作“詩詞裏的杭州”頁面 53
2.2.1 字體樣式屬性 54
2.2.2 文本外觀屬性 57
任務2.3 制作“愛國名人介紹”頁面 69
2.3.1 CSS復合選擇器 70
2.3.2 CSS的層疊性和繼承性 73
2.3.3 CSS的優先級 75
2.3.4 結構化偽類選擇器 78
2.3.5 偽元素選擇器 87
項目小結 92
課後練習 92
項目3 實現網頁的布局 93
任務3.1 制作“校園簡介”頁面 94
3.1.1 認識盒子模型 95
3.1.2 <div>標簽 96
3.1.3 邊框屬性 97
3.1.4 內邊距和外邊距 106
3.1.5 盒子模型的寬度和高度 109
任務3.2 制作“校園新聞”頁面 112
3.2.1 設置背景 113
3.2.2 新增背景屬性 117
3.2.3 設置多重背景圖像 122
3.2.4 顏色不透明度 123
3.2.5 陰影 123
3.2.6 漸變 125
3.2.7 精靈圖 129
3.2.8 iconfont 130
任務3.3 制作校園導航 134
3.3.1 元素類型 135
3.3.2 <span>標簽 137
3.3.3 元素類型的轉換 139
任務3.4 制作校園風景相冊 144
3.4.1 布局概述 145
3.4.2 浮動屬性 146
3.4.3 清除浮動 148
3.4.4 overflow屬性 154
3.4.5 元素定位 156
3.4.6 常用定位模式 157
3.4.7 層疊等級屬性 162
任務3.5 制作“打卡校園景觀”浮動布局頁面 166
3.5.1 單列布局 167
3.5.2 兩列布局 168
3.5.3 三列布局 170
3.5.4 通欄布局 172
任務3.6 制作校園樓宇景觀彈性導航 178
3.6.1 彈性布局概念 179
3.6.2 Flex容器屬性 180
3.6.3 Flex元素屬性 183
項目小結 189
課後練習 190
項目4 為網頁添加表格和表單 192
任務4.1 制作圖書館樓層分布示意圖 193
4.1.1 表格的定義 194
4.1.2 表格的常用屬性 195
4.1.3 單元格跨行、跨列 197
4.1.4 表格相關標簽學習時的註意點 197
4.1.5 表格語義化 199
任務4.2 制作某高校食堂問卷調查表 202
4.2.1 認識表單 203
4.2.2 熟悉<input>標簽 204
4.2.3 熟悉<label>標簽 205
4.2.4 熟悉<textarea>標簽 206
4.2.5 熟悉<select>和<option>標簽 206
任務4.3 制作某學院學生信息登記表 210
4.3.1 認識<form>標簽的新增屬性autocomplete和novalidate 211
4.3.2 掌握新增的表單標簽<datalist>和<output> 213
4.3.3 熟悉<input>標簽的若幹新增屬性 214
4.3.4 掌握<input>標簽的新增類型 215
項目小結 220
課後練習 221
項目5 為網頁添加多媒體元素和動畫 222
任務5.1 制作“校園視頻播放”頁面 222
5.1.1 音頻、視頻嵌入技術概述 224
5.1.2 嵌入視頻 224
5.1.3 嵌入音頻 226
5.1.4 瀏覽器對音頻、視頻文件的兼容性 227
5.1.5 控制視頻的寬度和高度 228
任務5.2 制作翻轉換景動畫 233
5.2.1 CSS3過渡屬性 234
5.2.2 CSS3 2D變形 237
5.2.3 CSS3 3D變形 244
任務5.3 制作校園風景輪播動畫 252
5.3.1 @keyframes規則 253
5.3.2 animation-name屬性 254
5.3.3 animation-duration屬性 254
5.3.4 animation-timing-function屬性 255
5.3.5 animation-delay屬性 255
5.3.6 animation-iteration-count屬性 256
5.3.7 animation-direction屬性 256
5.3.8 animation屬性 257
項目小結 263
課後練習 263
項目6 綜合項目 264
任務6.1 網站設計規劃 265
6.1.1 確定網站主題 265
6.1.2 確定網站架構 265
6.1.3 搜集素材 266
6.1.4 制作網頁效果圖 266
任務6.2 創建站點 267
6.2.1 站點分析 267
6.2.2 站點創建和管理 268
任務6.3 制作首頁 268
6.3.1 首頁分析 268
6.3.2 首頁頁面布局 269
6.3.3 引入外部公共樣式 270
6.3.4 制作首頁的頭部 270
6.3.5 制作首頁的導航和banner 272
6.3.6 制作主體內容 274
任務6.4 制作登錄頁 275
6.4.1 登錄頁分析 275
6.4.2 登錄頁實現 276
任務6.5 制作列表頁 279
6.5.1 列表頁分析 279
6.5.2 列表頁實現 280
任務6.6 制作詳情頁 284
6.6.1 詳情頁分析 284
6.6.2 詳情頁實現 285
任務6.7 制作購物車頁 290
6.7.1 購物車頁分析 290
6.7.2 購物車頁實現 291
項目小結 293
課後練習 293
