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