項目1 網頁制作入門 1
1.1 Web基本概念 1
1.1.1 網頁和網站 1
1.1.2 瀏覽器 3
1.1.3 Web標準 4
1.1.4 URL地址 4
1.2 HTML和HTML5 5
1.2.1 HTML 5
1.2.2 HTML5 5
1.2.3 HTML5優勢 6
1.3 Web前端開發工具 6
1.3.1 開發工具介紹 6
1.3.2 Visual Studio Code工具 7
1.4 案例:制作簡單的HTML5頁面 11
1.4.1 任務描述 11
1.4.2 實施步驟 12
1.5 HTML5頁面基礎 14
1.5.1 HTML5基本文檔結構 14
1.5.2 HTML標記 15
1.5.3 屬性 16
1.5.4 注釋 17
項目小結 17
單元測試與項目實踐 17
項目2 添加網頁內容 19
2.1 標題和段落標記 19
2.1.1 標題標記 19
2.1.2 段落標記 21
2.1.3 換行和水平線標記 21
2.2 文本格式化標記和特殊字符 23
2.2.1 文本格式化標記 23
2.2.2 特殊字符 25
2.3 圖像標記 26
2.3.1 網頁中常用的圖像格式 26
2.3.2 圖像標記和屬性 26
2.3.3 圖像地址 27
2.4 超鏈接標記 29
2.4.1 超鏈接標記和屬性 29
2.4.2 超鏈接分類 30
2.5 列表標記 31
2.5.1 無序列表 32
2.5.2 有序列表 32
2.5.3 定義列表 33
2.5.4 列表嵌套 35
2.6 案例:制作詩詞網頁 36
2.6.1 任務描述 36
2.6.2 實施步驟 37
項目小結 40
單元測試與項目實踐 40
項目3 CSS基礎 42
3.1 CSS簡介 42
3.2 CSS的核心基礎 43
3.2.1 CSS樣式規則 43
3.2.2 CSS引入方式 43
3.3 CSS基礎選擇器 47
3.4 案例:制作“藥王—孫思邈”網頁 52
3.4.1 任務描述 52
3.4.2 實施步驟 52
3.5 CSS的優先級、繼承與層疊 54
3.5.1 CSS的優先級 54
3.5.2 CSS的繼承性 58
3.5.3 CSS的層疊 59
項目小結 59
單元測試與項目實踐 60
項目4 設置文本字體樣式 61
4.1 設置字體樣式屬性 61
4.2 設置文本外觀屬性 66
4.3 CSS3新增文本樣式 74
4.3.1 設置文字陰影和模糊效果 74
4.3.2 使用服務器字體 76
4.4 案例:制作“預防電信詐騙”網頁 78
4.4.1 任務描述 78
4.4.2 實施步驟 79
4.5 設置超鏈接樣式 82
項目小結 84
單元測試與項目實踐 84
項目5 盒子模型 86
5.1 認識盒子模型 86
5.2 盒子模型常用的屬性 88
5.2.1 border屬性 89
5.2.2 margin屬性 91
5.2.3 padding屬性 92
5.2.4 背景屬性 93
5.3 行內元素、塊元素和行內塊元素 96
5.3.1 行內元素 96
5.3.2 塊元素 96
5.3.3 行內塊元素 97
5.3.4 元素的轉換 97
5.4 CSS3新增盒子樣式 98
5.4.1 圓角邊框 98
5.4.2 盒子陰影 100
5.4.3 漸變背景 101
5.5 案例:利用盒子模型制作
“四有青年”網頁 103
5.5.1 任務描述 103
5.5.2 實施步驟 104
5.6 表格元素 106
5.7 HTML5新增文檔結構元素 107
項目小結 109
單元測試與項目實踐 110
項目6 元素的浮動和定位 111
6.1 元素的浮動 111
6.1.1 設置浮動效果 112
6.1.2 清除浮動 114
6.2 元素的定位 118
6.2.1 相對定位(relative) 119
6.2.2 絕對定位(absolute) 120
6.2.3 固定定位(fixed) 122
6.2.4 z-index屬性 124
6.3 案例:制作環保網頁 124
6.3.1 任務描述 124
6.3.2 實施步驟 125
項目小結 132
單元測試與項目實踐 132
項目7 多媒體元素 134
7.1 audio標記 134
7.2 video標記 136
7.3 source標記 137
7.4 案例:制作“西北之旅”網頁 140
7.4.1 任務描述 140
7.4.2 實施步驟 141
項目小結 143
單元測試與項目實踐 143
項目8 表單的應用 145
8.1 form表單元素 145
8.2 input控件 146
8.3 select控件 148
8.4 其他常用控件 149
8.4.1 label控件 149
8.4.2 多行文本控件 151
8.4.3 button控件 151
8.5 HTML5新增的表單控件和屬性 152
8.5.1 HTML5新增控件 152
8.5.2 HTML5新增input類型 154
8.5.3 HTML5新增表單屬性 159
8.6 案例:制作“用戶注冊表”網頁 165
8.6.1 任務描述 165
8.6.2 實施步驟 165
項目小結 170
單元測試與項目實踐 170
項目9 CSS高級選擇器 172
9.1 屬性選擇器 172
9.2 關系選擇器 174
9.2.1 后代選擇器 174
9.2.2 子代選擇器 175
9.2.3 兄弟選擇器 176
9.3 偽類選擇器 177
9.4 偽對象選擇器 179
9.5 案例:制作“電視劇介紹”網頁 180
9.5.1 任務描述 180
9.5.2 實施步驟 181
項目小結 184
單元測試與項目實踐 185
項目10 CSS3過渡、變形和動畫效果 186
10.1 CSS3變形 186
10.1.1 設置變形 186
10.1.2 更改變形原點 189
10.2 CSS3過渡 191
10.3 CSS3動畫 193
10.3.1 @keyframes規則 194
10.3.2 animation屬性 194
10.4 案例:制作“河南文化旅游網”
?首頁介紹欄目 197
10.4.1 任務描述 197
10.4.2 實施步驟 198
項目小結 203
單元測試與項目實踐 204
項目11 綜合實例 206
11.1 案例分析 206
11.2 網頁布局規劃 208
11.3 制作頭部內容網頁 209
11.4 制作內容欄目網頁 212
11.4.1 制作banner圖部分網頁 212
11.4.2 制作主題內容“走進河南”網頁 213
11.4.3 制作主題內容“河南美食”部分網頁 217
11.5 制作底部內容網頁 219
項目小結 222
參考文獻 223