項目1 認識網(wǎng)站和網(wǎng)頁 1
【情境導入】 1
任務(wù)1-1 網(wǎng)站設(shè)計與開發(fā)起步 1
【任務(wù)提出】 1
【學習目標】 1
【相關(guān)知識】 1
一、基本概念 2
二、網(wǎng)頁的標準化 3
三、瀏覽器的開發(fā)者工具 5
【項目實踐】 5
任務(wù)1-2 制作第 一個網(wǎng)頁 6
【任務(wù)提出】 6
【學習目標】 6
【相關(guān)知識】 6
一、常用HTML編輯器 6
二、創(chuàng)建古詩詞網(wǎng)頁 8
【項目實踐】 14
【小結(jié)】 16
【習題】 16
項目2 網(wǎng)頁的藍圖簡單布局 18
【情境導入】 18
任務(wù)2-1 使用CSS裝飾網(wǎng)頁 18
【任務(wù)提出】 18
【學習目標】 18
【相關(guān)知識】 19
一、DIV CSS網(wǎng)頁布局 19
二、CSS 19
【項目實踐】 25
任務(wù)2-2 巧用選擇器調(diào)兵遣將 25
【任務(wù)提出】 25
【學習目標】 25
【相關(guān)知識】 25
一、CSS選擇器 25
二、基本選擇器的用法 26
三、擴展選擇器的用法 29
【項目實踐】 32
任務(wù)2-3 使用盒模型劃分頁面 34
【任務(wù)提出】 34
【學習目標】 34
【相關(guān)知識】 34
一、HTML元素的分類和轉(zhuǎn)換 34
二、塊級元素的盒模型 36
三、盒子的占位 44
【項目實踐】 46
任務(wù)2-4 使用BFC隔離空間 47
【任務(wù)提出】 47
【學習目標】 48
【相關(guān)知識】 48
一、垂直外邊距的合并 48
二、BFC布局 49
【項目實踐】 51
【小結(jié)】 52
【習題】 52
項目3 網(wǎng)頁的藍圖復雜布局 56
【情境導入】 56
任務(wù)3-1 浮動布局兩欄式頁面 56
【任務(wù)提出】 56
【學習目標】 56
【相關(guān)知識】 57
一、認識浮動 57
二、元素的浮動屬性float 58
三、清除浮動 60
四、盒子的高度塌陷及解決方法 61
【項目實踐】 64
任務(wù)3-2 DIV CSS布局網(wǎng)上商城
首頁 66
【任務(wù)提出】 66
【學習目標】 66
【相關(guān)知識】 67
一、布局的準備工作 67
二、通欄多列式布局效果及實現(xiàn) 67
【項目實踐】 70
任務(wù)3-3 網(wǎng)格布局網(wǎng)上商城首頁 71
【任務(wù)提出】 71
【學習目標】 71
【相關(guān)知識】 72
一、認識CSS Grid網(wǎng)格布局 72
二、網(wǎng)格布局中對父元素的操作 73
三、網(wǎng)格布局中對子元素的操作 77
【項目實踐】 79
【小結(jié)】 80
【習題】 80
項目4 向網(wǎng)頁中插入圖像和文本 83
【情境導入】 83
任務(wù)4-1 網(wǎng)站首頁中圖像的應用 83
【任務(wù)提出】 83
【學習目標】 83
【相關(guān)知識】 83
一、插入圖像 84
二、CSS圖像樣式 85
【項目實踐】 91
任務(wù)4-2 網(wǎng)站首頁中文本的應用 92
【任務(wù)提出】 92
【學習目標】 92
【相關(guān)知識】 93
一、插入文本 93
二、CSS字體和文本樣式的應用 96
【項目實踐】 101
【小結(jié)】 104
【習題】 104
項目5 向網(wǎng)站首頁添加導航 106
【情境導入】 106
任務(wù)5-1 頁面中超鏈接的使用 106
【任務(wù)提出】 106
【學習目標】 106
【相關(guān)知識】 106
一、認識超鏈接 106
二、創(chuàng)建超鏈接 107
三、超鏈接的具體應用 108
【項目實踐】 111
任務(wù)5-2 一級導航菜單的設(shè)計
開發(fā) 112
【任務(wù)提出】 112
【學習目標】 112
【相關(guān)知識】 112
一、網(wǎng)站導航的樣式及設(shè)計方法 113
二、偽類控制超鏈接外觀 114
三、按鈕式導航菜單的制作 116
【項目實踐】 118
任務(wù)5-3 二級彈出式菜單的定位 121
【任務(wù)提出】 121
【學習目標】 122
【相關(guān)知識】 122
一、元素的定位 122
二、定位屬性 123
三、定位具體用法 123
【項目實踐】 129
【小結(jié)】 132
【習題】 132
項目6 網(wǎng)頁中列表的應用 135
【情境導入】 135
任務(wù)6-1 認識列表 135
【任務(wù)提出】 135
【學習目標】 135
【相關(guān)知識】 136
一、列表的分類 136
二、CSS控制列表樣式 139
三、列表的應用 142
【項目實踐】 145
任務(wù)6-2 使用列表制作多級導航 147
【任務(wù)提出】 147
【學習目標】 147
【相關(guān)知識】 148
一、列表的嵌套 148
二、多級導航菜單的制作 149
【項目實踐】 153
【小結(jié)】 155
【習題】 155
項目7 使用彈性盒布局二級導航菜單 157
【情境導入】 157
【任務(wù)提出】 157
【學習目標】 157
【相關(guān)知識】 158
一、認識彈性盒布局 158
二、彈性盒的內(nèi)容 158
三、彈性盒的CSS樣式屬性 159
四、彈性子元素的屬性 165
五、彈性盒的應用 167
【項目實踐】 170
【小結(jié)】 172
【習題】 172
項目8 網(wǎng)頁中表格元素的應用 173
【情境導入】 173
【任務(wù)提出】 173
【學習目標】 173
【相關(guān)知識】 174
一、創(chuàng)建表格 174
二、CSS控制表格樣式 178
三、表格的應用 181
【項目實踐】 184
【小結(jié)】 186
【習題】 186
項目9 網(wǎng)頁中表單元素的應用 187
【情境導入】 187
【任務(wù)提出】 187
【學習目標】 187
【相關(guān)知識】 188
一、表單的組成 188
二、創(chuàng)建表單 188
三、表單控件 190
四、HTML5自帶表單驗證 197
五、表單樣式的應用 198
【項目實踐】 202
【小結(jié)】 203
【習題】 203
項目10 向網(wǎng)頁中插入視頻和音頻 205
【情境導入】 205
【任務(wù)提出】 205
【學習目標】 205
【相關(guān)知識】 206
一、Web上的視頻 206
二、Web上的音頻 210
【項目實踐】 212
【小結(jié)】 213
【習題】 213
項目11 網(wǎng)站首頁中的動態(tài)效果 214
【情境導入】 214
任務(wù)11-1 實現(xiàn)網(wǎng)站首頁的
輪播圖 214
【任務(wù)提出】 214
【學習目標】 214
【相關(guān)知識】 215
一、輪播圖原理分析 215
二、搭建基本界面 215
三、實現(xiàn)輪播效果 216
四、添加定時器自動輪播 220
【項目實踐】 223
任務(wù)11-2 實現(xiàn)圖片的滑動
輪播 224
【任務(wù)提出】 224
【學習目標】 224
【相關(guān)知識】 225
一、滑動輪播圖原理分析 225
二、搭建基本界面 225
三、輪播圖中JS腳本的應用 228
【項目實踐】 231
【小結(jié)】 234
【習題】 234