本書摒棄了落伍的Dreamweaver和DIV的內容，把重點放在HTML5和CSS3上，采用章節式的傳統寫法，前7章注重講知識點，後3章，針對PC端頁面、移動端頁面和Web App分別講解如何開發。每章配有實踐環節，幫助學生掌握知識點。全書定位在基礎入門、簡單易學、篇幅較薄。

本書圍繞著Web前端設計，先介紹了HTML5、CC3以及Dreamweaver的基礎知識，再圍繞了著基礎應用開發，講解了頁面排版與美化、浮動、定位、列表、表單、主流CSS3技術、HTML5繪圖等技術，再用3個章節，分別講解PC端頁面、移動端頁面和Web App的開發，最後配以綜合實訓指導章節。

吳豐，黃河水利職業技術學院優秀青年教師，曾編寫過多部教材書籍。1）網頁設計與制作（Dreamweaver CS6+HTML5+CSS3版），獨著，ISBN編號: 9787302403845，清華大學出版社，2015年12月出版。 2）Dreamweaver CS5網頁設計與制作(DIV+CSS版)，主編，ISBN: 9787302286172，清華大學出版社，2012年7月出版。

第1章Web前端職業前景與重要
理念1
1．1了解Web前端工程師2
1．1．1HTML5前端開發的前景與必要
認知2
1．1．2認識網頁素4
1．1．3了解專業術語6
1．2重要理念——表現和結構相
分離7
1．2．1體驗“表現和結構相分離”7
1．2．2認識Web標準8
1．3Web前端開發基本流程10
1．3．1開發流程10
1．3．2常用開發軟件介紹12
1．4使用記事本創建HTML5頁面13
1．5課堂動手實踐14

第2章HTML 5頁面的構建與簡單
控制15
2．1Dreamweaver的工作環境
概述16
2．1．1界面介紹16
2．1．2常用工具欄和面板17
2．2創建和管理站點20
2．2．1創建站點20
2．2．2“文件”面板的使用方法21
2．2．3管理站點23
2．3HTML5入門23
2．3．1使用Dreamweaver構建“H5標準
頁面”23
2．3．2DOCTYPE文檔類型與基本結構2．3．3HTML素27
2．3．4HTML5新素35
2．4課堂動手實踐36

第3章CSS3基礎入門38
3．1CSS3的基礎知識39
3．1．1CSS介紹39
3．1．2CSS的語法與注釋40
3．1．3CSS的引入方式41
3．2盒模型45
3．2．1盒模型的基本概念45
3．2．2計算盒模型中的寬與高48
3．3CSS3初級選擇器49
3．3．1通配符選擇器49
3．3．2類型選擇器51
3．3．3類選擇器51
3．3．4ID選擇器53
3．3．5後代選擇器54
3．3．6群組選擇器55
3．4CSS3高級選擇器56
3．4．素選擇器和相鄰兄弟
選擇器56
3．4．2屬性選擇器57
3．4．3關於優先級59
3．5使用CSS3基礎知識完成頁面簡
易美化——404頁面的制作60
3．6課堂動手實踐63

第4章實現Web前端排版的基本
美化64
4．1控制文本65
4．1．1CSS中字體屬性與文本屬性介紹66
4．1．2Web Font與@font-face70
4．1．3文本的首行縮進、行高和陰影73
4．1．4文本溢出處理75
4．2控制超鏈接76
4．2．1文本鏈接、郵件鏈接與錨鏈接76
4．2．2CSS偽類與超鏈接78
4．3控制圖像和顏色80
4．3．1CSS中控制圖像和顏色的基本
屬性80
4．3．2仿“鳳凰網”的圖文混排84
4．4課堂動手實踐89

第5章浮動、定位與列表91
5．1浮動與清除浮動92
5．1．1浮動92
5．1．2清除浮動的3種方法94
5．2CSS定位96
5．2．1靜態定位和固定定位97
5．2．2相對定位和絕對定位99
5．2．3相對於某一容器的絕對定位102
5．3列表103
5．3．1有關列表的CSS樣式103
5．3．2仿“天貓”首頁的縱向導航104
5．3．3仿“鳳凰網”首頁的橫向導航108
5．4仿“天貓電器城（手機館）”
的圖文信息列表110
5．5課堂動手實踐115

第6章HTML 5增強型表單與簡易
表格116
6．1表單的創建與編輯117
6．1．1表單的基本知識117
6．1．2常見的表單對像119
6．2CSS控制表單125
6．2．1搜索欄125
6．2．2用戶登錄頁面127
6．2．3傳統按鈕、CSS3按鈕與開源樣式庫
按鈕131
6．3表格134
6．3．1表格的基本概念及其簡易操作134
6．3．2細線表格137
6．3．3隔行換色表格139
6．4課堂動手實踐141

第7章CSS3與HTML5的高級
應用142
7．1CSS Sprite技術143
7．1．1CSS Sprite技術分解143
7．1．2CSS Sprite技術的應用144
7．2CSS3漸變147
7．3CSS3動畫149
7．3．1變形——transform屬性149
7．3．2過渡——transition屬性151
7．3．3CSS3動畫的應用——
“幽靈按鈕”152
7．4CSS3選項卡156
7．5HTML5 Canvas160
7．5．1創建畫布並繪制簡單圖形160
7．5．2Canvas坐標、線條與圓161
7．6課堂動手實踐163

第8章PC端典型頁面的設計與
實現164
8．1Photoshop在Web前端的
常見操作165
8．1．1基礎操作165
8．1．2切片並輸出167
8．2頁面布局規劃與實現168
8．2．1首頁的實現168
8．2．2列表頁的實現176
8．2．3內容頁的實現180
8．3課堂動手實踐182
第9章多設備響應式頁面的
實現183
9．1響應式頁面開發184
9．1．1了解“響應式Web設計”184
9．1．2viewport網頁可視區域185
9．1．3媒體查詢詳解187
9．2“響應式”頁面的設計與實現191
9．2．1頁面分析191
9．2．2詳細實施過程193
9．3“響應式”框架介紹199
9．4課堂動手實踐199

第10章Web App類頁面的設計
與實現201
10．1Web App開發基礎知識202

10．1．1開發模式概述202
10．1．2手機屏幕基本知識203
10．2Bootstrap框架和Swiper
插件204
10．2．1Bootstrap框架204
10．2．2Swiper插件206
10．3“宇澤鮮風商城”Web App
頁面分析與環境準備208
10．3．1頁面分析208
10．3．2環境準備209
10．4頁面實現的詳細過程210
10．4．1首頁的實現210
10．4．2列表頁的實現217
10．4．3詳細內容頁的實現221
10．5課堂動手實踐224