HTML5+CSS3網頁設計任務教程
陳玲、程實、黃達、彭英
相關主題
商品描述
"《HTML5+CSS3網頁設計任務教程》是一本詳盡探討HTML5和CSS3網頁設計技術的指導用書，以主流網站內容為藍本，緊密結合當前Web開發領域的新技術、新理念和新方法，採用工單任務驅動的方式組織內容。全書內容涵蓋HTML5基本概念、語法、常用標簽使用方法、CSS3技術、網頁佈局、實際應用技巧等。此外，本書還配備了豐富的實操案例，以幫助讀者鞏固所學知識，提升實際操作能力。 本書結構清晰，案例典型，實用性強，無論是初學者還是具有一定網頁設計經驗的讀者，都可以從中獲得寶貴的知識和技能。本書不僅適合作為高等院校電腦及相關專業的教材，也適合作為自學者的參考用書。"
目錄大綱
目 錄
任務一 設計博客文章內容頁 1
任務需求說明 1
課程工單 2
工單任務分解 3
思政元素 4
1.1 HTML5簡介 4
1.1.1 HTML的基本概念 5
1.1.2 HTML的發展歷史 7
1.1.3 W3C和W3C標準 7
1.1.4 HTML的開發工具 8
1.2 HTML5文檔結構 9
1.2.1 HTML5文檔基本結構 9
1.2.2 HTML5基本語法 10
1.2.3 使用瀏覽器查看HTML5網頁文件 11
1.3 HTML5文本類標簽 11
1.3.1 標題標簽 11
1.3.2 段落標簽 12
1.3.3 換行標簽 13
1.3.4 水平線標簽 14
1.3.5 註釋標簽 15
1.3.6 其他文本類標簽 15
1.3.7 HTML5轉義字符串 16
1.4 HTML5圖片和超鏈接標簽 16
1.4.1 圖片標簽 17
1.4.2 相對路徑和絕對路徑 17
1.4.3 圖片標簽的應用——簡單的圖文混排 18
1.4.4 超鏈接標簽 19
工作訓練 21
拓展訓練 31
功能插頁 33
任務二 設計博客內容列表頁 37
任務需求說明 37
課程工單 38
工單任務分解 39
思政元素 41
2.1 列表標簽 41
2.1.1 無序列表 41
2.1.2 有序列表 42
2.1.3 定義列表 43
2.2 容器標簽 43
2.2.1 div標簽 43
2.2.2 span標簽 45
2.3 HTML5標簽分類 46
2.3.1 塊級標簽 46
2.3.2 行級標簽 46
2.3.3 行內塊標簽 46
2.3.4 塊級元素與行內元素的嵌套關系 47
2.3.5 塊級標簽和行內元素的轉換 48
2.4 表格標簽 48
2.4.1 表格 48
2.4.2 表格的嵌套應用 56
工作訓練 57
拓展訓練 62
功能插頁 63
任務三 設計博客登錄和註冊頁面 67
任務需求說明 67
課程工單 68
工單任務分解 69
思政元素 70
3.1 表單及表單元素 70
3.1.1 表單標簽 71
3.1.2 表單元素之input標簽 72
3.1.3 表單元素之select標簽 77
3.1.4 表單元素之textarea標簽 79
3.1.5 表單元素的其他屬性說明 80
3.2 表單驗證 81
3.2.1 類型驗證 81
3.2.2 必填驗證 83
3.2.3 長度或範圍驗證 83
3.2.4 正則表達式驗證 85
3.2.5 自定義驗證 86
工作訓練 86
拓展訓練 89
功能插頁 90
任務四 設計博客內容列表頁 95
任務需求說明 95
課程工單 96
工單任務分解 97
思政元素 98
4.1 CSS簡介 98
4.1.1 CSS基本語法 100
4.1.2 CSS樣式種類 101
4.2 CSS選擇器 103
4.2.1 CSS通配符選擇器 103
4.2.2 CSS基本選擇器 103
4.2.3 CSS關系選擇器 108
4.2.4 CSS偽類選擇器 112
4.3 CSS特性 114
4.3.1 層疊性 114
4.3.2 繼承性 116
4.3.3 優先級 117
工作訓練 117
拓展訓練 121
功能插頁 122
任務五 美化博客博主個人主頁 125
任務需求說明 125
課程工單 126
工單任務分解 127
思政元素 128
5.1 CSS字體屬性 128
5.1.1 font-family屬性 128
5.1.2 font-weight屬性 129
5.1.3 font-size屬性 129
5.1.4 font-style屬性 130
5.1.5 font復合屬性 130
5.1.6 字體屬性案例 130
5.2 CSS文本屬性 132
5.2.1 color屬性 132
5.2.2 text-align屬性 133
5.2.3 line-height屬性 133
5.2.4 text-decoration屬性 134
5.2.5 text-shadow屬性 135
5.2.6 text-overflow屬性 136
5.3 CSS邊框屬性 137
5.3.1 border-style屬性 138
5.3.2 border-width屬性 139
5.3.3 border-color屬性 140
5.3.4 border屬性 141
5.3.5 border-radius屬性 142
5.4 CSS列表屬性 145
5.4.1 list-style-type屬性 145
5.4.2 list-style-image屬性 146
5.4.3 list-style-position屬性 147
5.4.4 list-style屬性 147
5.5 CSS背景屬性 148
5.5.1 background-color屬性 148
5.5.2 background-image屬性 149
5.5.3 background-repeat屬性 150
5.5.4 background-position屬性 151
5.5.5 background-size屬性 156
5.6 CSS表格屬性 159
5.6.1 border-collapse屬性 159
5.6.2 border-spacing屬性 160
5.6.3 caption-side屬性 161
5.6.4 empty-cells屬性 162
工作訓練 162
拓展訓練 165
功能插頁 166
任務六 設計博客網站的首頁 169
任務需求說明 169
課程工單 170
工單任務分解 171
思政元素 172
6.1 盒子模型 172
6.1.1 標準文檔流 173
6.1.2 盒子模型原理 175
6.2 盒子浮動 180
6.2.1 float屬性 180
6.2.2 浮動塌陷及清除 181
6.2.3 浮動應用 183
6.3 盒子定位 185
6.3.1 定位屬性position 185
6.3.2 位置偏移屬性 186
6.3.3 盒子定位的五種方式 186
6.3.4 元素的層疊順序 196
工作訓練 197
拓展訓練 200
功能插頁 201
任務七 網頁佈局設計 205
任務需求說明 205
課程工單 206
工單任務分解 207
思政元素 208
7.1 DIV+CSS佈局 208
7.1.1 常見網頁佈局 208
7.1.2 列表佈局 216
7.1.3 表格佈局 222
7.2 浮動佈局 223
7.2.1 圖文環繞 224
7.2.2 等分宮格 225
7.2.3 兩行定寬排列 226
7.2.4 聖杯佈局 227
7.3 流動佈局 229
7.3.1 max-width 229
7.3.2 min-width 230
7.3.3 流動佈局示例 230
工作訓練 231
拓展訓練 235
功能插頁 237
任務八 網頁高級佈局設計 241
任務需求說明 241
課程工單 242
工單任務分解 243
思政元素 244
8.1 彈性佈局 244
8.1.1 基本概念 245
8.1.2 CSS屬性 245
8.1.3 flex容器相關屬性 246
8.1.4 flex項目相關屬性 253
8.1.5 彈性佈局的應用 256
8.2 響應式佈局 258
8.2.1 視口 259
8.2.2 媒體查詢 263
8.2.3 常用單位 267
8.2.4 響應式佈局應用 269
8.3 多列佈局 270
8.3.1 多列佈局相關屬性 271
8.3.2 多列佈局應用 277
工作訓練 278
拓展訓練 282
功能插頁 284
附錄 引用網站相關信息 287
