商品簡介
本書根據HTML5和CSS3標準詳細講解了網頁的佈局和製作方法。全書共分12個單元，內容包括：準備工作、HTML5 常見元素、網頁整體佈局的搭建、網頁主體內容的構建、網頁頁眉的構建、網頁主導航的構建、網頁橫幅廣告的構建、網頁頁腳的構建，以及混合佈局的綜合網頁的構建。每個單元包含若干個任務，各任務之間有連貫性，強化和覆蓋相關知識點。
本書與Web前端開發工作崗位接軌，強調三方面的技能：一是針對只會寫局部不會寫整體的問題，培養基於網頁設計稿(或效果圖)來規劃網頁，從網頁整體入手，先搭建結構，再填充內容的技能；二是歸納和強化常用的方法，使讀者熟練掌握方法，而不僅是知識點；三是學會寫代碼，而不是用Dreamweaver的可視化操作來生成代碼。
本書適合作為高職高專院校HTML5+CSS3 集中實訓課程或理實一體化課程的教材，也可作為網頁設計與製作愛好者的自學讀物。
名人推薦
本書與Web前端開發工作崗位接軌，強調三方面的技能：一是針對只會寫局部不會寫整體的問題，培養基於網頁設計稿(或效果圖)來規劃網頁，從網頁整體入手，先搭建結構，再填充內容的技能；二是歸納和強化常用的方法，使讀者熟練掌握方法，而不僅是知識點；三是學會寫代碼，而不是用Dreamweaver的可視化操作來生成代碼。
目次
第1 單元 準備工作.......................................................................................... 1
任務1.1 認識HTML5 和CSS3 ................................................................................................ 1
任務1.2 搭建軟件環境........................................................................................................... 2
任務1.2.1 安裝HBuilder X ............................................................................................. 3
任務1.2.2 安裝Sublime Text3 ........................................................................................ 5
任務1.3 分析第一個網頁........................................................................................................ 6
任務1.4 瞭解網頁編輯和調試技巧........................................................................................ 9
單元小結............................................................................................................................... .. 10
習題............................................................................................................................... .......... 10
第2 單元 HTML5 常見元素............................................................................ 12
任務2.1 認識標題元素......................................................................................................... 12
任務2.2 認識段落元素......................................................................................................... 14
任務2.3 認識換行元素、水平線元素.................................................................................. 15
任務2.4 認識圖像元素......................................................................................................... 16
任務2.5 認識超鏈接............................................................................................................. 17
任務2.6 認識無序列表......................................................................................................... 18
任務2.7 認識有序列表......................................................................................................... 19
任務2.8 認識自定義列表...................................................................................................... 20
任務2.9 認識表格元素......................................................................................................... 21
任務2.10 認識表單元素....................................................................................................... 23
任務2.11 認識音頻、視頻元素............................................................................................ 24
單元小結............................................................................................................................... .. 26
習題............................................................................................................................... .......... 26
第3 單元 網頁整體佈局的搭建...................................................................... 27
任務3.1 單列佈局的搭建...................................................................................................... 27
任務3.1.1 網頁結構的實現........................................................................................... 28
任務3.1.2 網頁樣式的實現........................................................................................... 29
任務3.2 左寬右窄兩列佈局(F 式佈局)的搭建................................................................ 35
任務3.2.1 網頁結構的實現........................................................................................... 35
任務3.2.2 網頁樣式的實現........................................................................................... 36
任務3.3 三列佈局的搭建...................................................................................................... 44
目 錄
2 HTML5+CSS3 網頁佈局任務教程
任務3.3.1 網頁結構的實現........................................................................................... 44
任務3.3.2 網頁樣式的實現........................................................................................... 45
單元小結............................................................................................................................... .. 51
習題............................................................................................................................... .......... 51
第4 單元 網頁主體內容的構建1――文本的製作........................................... 53
任務4.1 “海南島簡介”頁的製作(標題+段落)................................................................ 53
任務4.1.1 網頁結構的實現........................................................................................... 54
任務4.1.2 網頁基本樣式的實現................................................................................... 56
任務4.1.3 簡介標題樣式和段落樣式的實現................................................................. 58
任務4.2 “學院簡介”頁的製作(頭部+段落) ................................................................... 63
任務4.2.1 網頁結構的實現........................................................................................... 64
任務4.2.2 網頁基本樣式的實現................................................................................... 65
任務4.2.3 簡介頭部的樣式和正文樣式的實現............................................................. 66
任務4.3 “美麗的草原”頁的製作(頭部+章節)................................................................ 69
任務4.3.1 網頁結構和基本樣式的實現........................................................................ 70
任務4.3.2 文章頭部樣式和章節樣式的實現................................................................. 72
任務4.4 “學院首頁”兩行對稱欄目的製作......................................................................... 73
任務4.4.1 網頁結構和基本樣式的實現........................................................................ 74
任務4.4.2 兩列對稱欄目樣式的實現............................................................................ 78
任務4.5 “學院首頁”三列非對稱欄目的製作...................................................................... 81
任務4.5.1 網頁結構和基本樣式的實現........................................................................ 82
任務4.5.2 三列非對稱欄目樣式的實現........................................................................ 85
任務4.6 “專業介紹”頁的製作(左窄右寬的兩列佈局)................................................... 88
任務4.6.1 網頁結構和基本樣式的實現........................................................................ 89
任務4.6.2 左窄右寬的兩列佈局的實現........................................................................ 91
單元小結............................................................................................................................... .. 96
習題............................................................................................................................... .......... 96
第5 單元 網頁主體內容的構建2――圖片的製作........................................... 98
任務5.1 “學院首頁”兩行對稱欄目插圖............................................................................. 98
任務5.2 “學院首頁”三列非對稱欄目插圖....................................................................... 101
任務5.3 F 式佈局、左圖右文............................................................................................. 106
任務5.4 兩列佈局、上圖下文............................................................................................ 109
任務5.5 文字環繞圖片1 .................................................................................................... 113
任務5.6 文字環繞圖片2 .................................................................................................... 116
任務5.7 多張圖片緊湊排列................................................................................................ 117
任務5.8 設置背景圖像1 .................................................................................................... 121
任務5.9 設置背景圖像2 .................................................................................................... 123
目 錄3
單元小結............................................................................................................................... 125
習題............................................................................................................................... ........ 126
第6 單元 網頁主體內容的構建3――表格的製作......................................... 127
任務6.1 典型的表格........................................................................................................... 127
任務6.2 單元格合併........................................................................................................... 131
任務6.3 隔行換色表格....................................................................................................... 132
單元小結............................................................................................................................... 134
習題............................................................................................................................... ........ 134
第7 單元 網頁主體內容的構建4――表單的製作......................................... 135
任務7.1 製作網頁一角的表單............................................................................................ 135
任務7.2 製作網頁任意位置的表單.................................................................................... 140
任務7.3 製作遮罩層上的表單............................................................................................ 147
單元小結............................................................................................................................... 151
習題............................................................................................................................... ........ 151
第8 單元 網頁頁眉的構建........................................................................... 153
任務8.1 製作典型頁眉1 .................................................................................................... 153
任務8.2 製作典型頁眉2 .................................................................................................... 156
單元小結............................................................................................................................... 160
習題............................................................................................................................... ........ 160
第9 單元 網頁主導航的構建....................................................................... 161
任務9.1 製作不帶下拉菜單的導航.................................................................................... 161
任務9.2 製作帶下拉菜單的導航........................................................................................ 163
單元小結............................................................................................................................... 167
習題............................................................................................................................... ........ 167
第10 單元 網頁橫幅廣告的構建.................................................................. 168
任務10.1 製作窄幅橫幅廣告.............................................................................................. 168
任務10.2 製作寬幅橫幅廣告.............................................................................................. 169
單元小結............................................................................................................................... 171
習題............................................................................................................................... ........ 171
第11 單元 網頁頁腳的構建......................................................................... 172
任務11.1 製作典型頁腳1................................................................................................... 172
任務11.2 製作典型頁腳2................................................................................................... 174
單元小結............................................................................................................................... 178
習題............................................................................................................................... ........ 178
4 HTML5+CSS3 網頁佈局任務教程
第12 單元 混合佈局的綜合網頁的構建........................................................ 179
任務12.1 “旅遊美食網”首頁的構建................................................................................. 179
任務12.2 仿“中國知網”首頁的構建............................................................................... 187
單元小結............................................................................................................................... 204
習題............................................................................................................................... ........ 205
知識解讀索引................................................................................................ 206
