內容簡介
HTML5、CSS3、JavaScript技術是網頁設計的精髓。本書以項目為導向,以工作過程為框架,選取一個完整的網站案例 ——“綠騎士 ”網站,按照網頁設計製作的流程,分任務逐步講述網頁設計及製作的技術要點。其目的是讓學生通過完成該案例,從而掌握網頁設計與製作的實際過程及專業技能。書中給出了大量的經典案例,並對案例作了細緻的分析,便於學生理解所學知識,加強實操訓練,提高實踐能力。
基本信息
叢書名 :基於崗位職業能力培養的高職網路技術專業系列教材建設
作 譯 者:李紅梅 楊林根
出版時間:2014-09 千 字 數:454
版 次:01-01 頁 數:252
開 本:16(185*260)
裝 幀:
I S B N :9787121243356
目錄
緒論…………………………………………………………………………………… 1
任務1 網站主頁規劃與設計 ……………………………………………………… 7
1.1 任務描述 ………………………………………………………………………………… 7
1.2 核心知識 ………………………………………………………………………………… 8
1.2.1 網頁的結構框架 ………………………………………………………………… 8
1.2.2 頁面的信息布局 ………………………………………………………………… 16
1.2.3 網頁的創意視覺表現 …………………………………………………………… 16
1.2.4 綜合實例 ——酷站主頁欣賞與分析 …………………………………………… 20
1.3 任務實施 …………………………………………………………………………………22
1.4 任務拓展——網頁方案設計技巧 ………………………………………………………24
1.5 練習與實訓 ………………………………………………………………………………25
任務2.網站主頁HTML結構設計……………………………………………… 26
2.1 任務描述 …………………………………………………………………………………26
2.2 核心知識 …………………………………………………………………………………26
2.2.1 使用 HTML5的十大原因 ………………………………………………………… 26
2.2.2 HTML5網頁文檔結構和全局屬性 ……………………………………………… 29
2.2.3 HTML5頁面結構標籤 …………………………………………………………… 33
2.2.4 HTML5初級技巧 ………………………………………………………………… 37
2.2.5 綜合實例 ——檢查瀏覽器是否支持 HTML5標籤 ……………………………… 43
2.3 任務實施 …………………………………………………………………………………44
2.4 任務拓展——常見的 HTML5錯誤用法………………………………………………… 46
2.5 練習與實訓 ………………………………………………………………………………47
任務3.構建網站層疊樣式表 …………………………………………………… 48
3.1 任務描述 …………………………………………………………………………………48
3.2 核心知識 …………………………………………………………………………………48
3.2.1 CSS基本語法規則 ……………………………………………………………… 48
3.2.2 樣式的引用方式 ………………………………………………………………… 49
3.2.3 選擇器分類 ……………………………………………………………………… 49
3.2.4 在 HTML中使用 CSS樣式表的方法 …………………………………………… 57
3.2.5 綜合實例 ——製作簡單的豎型選單 …………………………………………… 60
3.3 任務實施 …………………………………………………………………………………61
3.4 任務拓展 …………………………………………………………………………………62
3.4.1 CSS2與CSS3的主要區別 ……………………………………………………… 62
3.4.2 CSS的單位 ……………………………………………………………………… 62
3.5 練習與實訓 ………………………………………………………………………………64
任務4.網站主頁DIV布局 ……………………………………………………… 66
4.1 任務描述 …………………………………………………………………………………66
4.2 核心知識 …………………………………………………………………………………67
4.2.1 CSS盒子模型 …………………………………………………………………… 67
4.2.2 CSS浮動布局 …………………………………………………………………… 68
4.2.3 CSS相對定位 …………………………………………………………………… 73
4.2.4 CSS絕對定位 …………………………………………………………………… 76
4.2.5 綜合實例 ——製作歌曲專輯列表 ……………………………………………… 82
4.3 任務實施 …………………………………………………………………………………84
4.4 任務拓展—— DIV+CSS常見錯誤……………………………………………………… 85
4.5 練習與實訓 ………………………………………………………………………………86
任務5.設定網站主頁文本與圖片樣式 ………………………………………… 87
5.1 任務描述 …………………………………………………………………………………87
5.2 核心知識 …………………………………………………………………………………87
5.2.1 設定文本樣式 …………………………………………………………………… 87
5.2.2 設定文本布局 …………………………………………………………………… 91
5.2.3 設定顏色及背景 ………………………………………………………………… 94
5.2.4 設定框線顯示效果 ……………………………………………………………… 99
5.2.5 圖文混排 ……………………………………………………………………… 100
5.2.6 綜合實例 ——製作八大行星科普網頁 ……………………………………… 103
5.3 任務實施 ……………………………………………………………………………… 109
5.4 任務拓展——文字或圖像的旋轉、縮放、傾斜、移動 …………………………… 110
5.5 練習與實訓 …………………………………………………………………………… 115
任務6.主頁導航欄的製作 ……………………………………………………… 116
6.1 任務描述 ……………………………………………………………………………… 116
6.2 核心知識 ……………………………………………………………………………… 117
6.2.1 用 CSS控制超連結樣式 ……………………………………………………… 117
6.2.2 用 CSS控制列表樣式 ………………………………………………………… 121
6.2.3 綜合實例 ——製作多級彈出導航條 ………………………………………… 129
6.3 任務實施 ……………………………………………………………………………… 134
6.4 任務拓展——圓角設計 ……………………………………………………………… 136
6.5 練習與實訓 …………………………………………………………………………… 138
任務7.製作網站登錄與註冊表單 ……………………………………………… 139
7.1 任務描述 ……………………………………………………………………………… 139
7.2 核心知識 ……………………………………………………………………………… 140
7.2.1 表單基本元素的使用 ………………………………………………………… 140
7.2.2 表單高級元素的使用 ………………………………………………………… 149
7.2.3 綜合實例 ——註冊表單 ……………………………………………………… 154
7.3 任務實施 ……………………………………………………………………………… 157
7.3.1 製作用戶登錄表單 …………………………………………………………… 157
7.3.2 製作用戶註冊表單 …………………………………………………………… 158
7.4 任務拓展 ……………………………………………………………………………… 160
7.4.1 表單新增屬性各瀏覽器支持情況 …………………………………………… 160
7.4.2 HTML5中表單提交的幾種驗證方法 ………………………………………… 160
7.5 練習與實訓 …………………………………………………………………………… 162
任務8.設計並製作網站Logo及Banner …………………………………… 163
8.1 任務描述 ……………………………………………………………………………… 163
8.2 核心知識 ……………………………………………………………………………… 163
8.2.1 標誌設計基礎 ………………………………………………………………… 163
8.2.2 標誌的創意構思 ……………………………………………………………… 165
8.2.3 標誌設計的基本原則 ………………………………………………………… 170
8.2.4 Banner設計方法與步驟 ……………………………………………………… 174
8.2.5 Banner優秀案例欣賞 ………………………………………………………… 177
8.2.6 綜合案例 ——廣州亞運會文化、環境、志願者標誌創意闡釋 179
8.3 任務實施 ……………………………………………………………………………… 180
8.3.1 網站 Logo設計 ………………………………………………………………… 180
8.3.2 網站 Banner設計 ……………………………………………………………… 181
8.4 任務拓展 ……………………………………………………………………………… 181
8.4.1 標誌與圖案的區別 …………………………………………………………… 181
8.4.2 幾種 Logo設計技巧 …………………………………………………………… 182
8.5 練習與實訓 …………………………………………………………………………… 183
任務9.實現主頁新聞圖片輪顯及翻滾特效 …………………………………… 185
9.1 任務描述 ……………………………………………………………………………… 185
9.2 核心知識 ……………………………………………………………………………… 186
9.2.1 JavaScript語言特點 …………………………………………………………… 186
9.2.2 JavaScript中的變數 …………………………………………………………… 187
9.2.3 JavaScript中的流程控制語句 ………………………………………………… 190
9.2.4 JavaScript中的方法 …………………………………………………………… 192
9.2.5 JavaScript事件與對象 ………………………………………………………… 196
9.2.6 JavaScript對象基礎 …………………………………………………………… 198
9.2.7 常見網頁特效 ………………………………………………………………… 206
9.2.8 綜合實例 ——實現即時驗證效果 …………………………………………… 213
9.3 任務實施 ……………………………………………………………………………… 215
9.3.1 實現圖片輪顯特效 …………………………………………………………… 215
9.3.2 實現圖片向左翻滾特效 ……………………………………………………… 217
9.4 任務拓展 ……………………………………………………………………………… 218
9.4.1 JavaScript中的常見問題 ……………………………………………………… 218
9.4.2 JavaScript幾大主流框架 ……………………………………………………… 219
9.5 練習與實訓 …………………………………………………………………………… 220
任務10.網頁設計與開發綜合範例 …………………………………………… 221
10.1 任務描述 …………………………………………………………………………… 221
10.2 核心知識 …………………………………………………………………………… 222
10.2.1 網頁內容分析 ……………………………………………………………… 222
10.2.2 網頁規劃及方案設計 ……………………………………………………… 222
10.2.3 網頁 HTML結構設計 ………………………………………………………… 224
10.2.4 網頁布局與視覺設計 ……………………………………………………… 227
10.3 任務拓展——網頁設計必須注意的問題 ………………………………………… 237
10.4 練習與實訓 ………………………………………………………………………… 240
參考文獻…………………………………………………………………………… 241