第1章  網頁設計基礎    1 
1.1  網頁的基本概念    1 
1.2  網頁素    2 
1.3  常用前端開發工具    3 
1.4  基於Dreamweaver平臺的網站創建與管理    4 
1.4.1  Dreamweaver CC開發平臺工作區介紹    4 
1.4.2  基於Dreamweaver CC的網站創建與管理    6 
1.5  HBuilder X平臺網站項目的創建    9 
1.5.1  HBuilder X開發平臺工作區介紹    9 
1.5.2  HBuilder X項目的創建    10 
1.6  網頁基本結構素    11 
1.6.1  網頁的基本結構    11 
1.6.2  HTML中素    14 
1.6.3  HT素素    16 
1.7  創建基於文本的網頁    17 
1.7.1  在網頁中添加文字    17 
1.7.2  文字和段落的CSS樣式    18 
1.7.3  CSS樣式在文本頁面的應用案例    22 
上機實訓    22 
課後練習    23 
第2章  HTML5 CSS簡單頁面制作    25 
2.1  CSS樣式基礎    25 
2.1.1  CSS盒子模型    25 
2.1.2  CSS頁面布局基礎    29 
2.1.3  CSS樣式分類    31 
2.1.4  樣式規則的優先級    32 
2.1.5  樣式規則的優先級應用案例    32 
2.1.6  樣式命名規範    34 
2.2  一列布局頁面制作    36 
2.2.1  制作一列固定寬度布局網頁    36 
2.2.2  制作一列自適應寬度布局網頁    39 
2.3  網頁中素    40 
2.4  制作圖文混排的網頁    41 
2.4.1  文字環繞圖片網頁制作    41 
2.4.2  一列布局圖文混排網頁制作    42 
上機實訓    43 
課後練習    44 
第3章  多列布局頁面制作    46 
3.1  二列布局頁面制作    46 
3.1.1  網頁常見二列布局方案    46 
3.1.2  二列布局頁面制作案例    47 
3.2  三列布局頁面制作    49 
3.2.1  網頁常見三列布局方案    49 
3.2.2  三列布局頁面制作案例    50 
3.3  多列布局頁面制作    52 
3.3.1  網頁常見多列布局方案    52 
3.3.2  多列布局頁面制作案例    52 
上機實訓    57 
課後練習    59 
第4章  鏈接與導航制作    61 
4.1  文字鏈接    61 
4.1.1  文本鏈接    62 
4.1.2  郵件鏈接    63 
4.1.3  下載鏈接    63 
4.1.4  空鏈接    63 
4.1.5  鏈接文字樣式設置    63 
4.2  圖片鏈接    64 
4.3  導航設計與制作    64 
4.3.1  橫向文字鏈接導航制作及應用    64 
4.3.2  圖片背景導航制作    65 
4.3.3  列表導航制作    67 
上機實訓    72 
課後練習    73 
第5章  HTML5表單基礎    75 
5.1  認識表單    75 
5.2  表單對像    77 
5.2.1  in素    77 
5.2.2  textarea（多行文素    80 
5.2.3  sel素和opt素    80 
5.2.4  無障礙訪素label、fieldset和legend    80 
5.2.5  datalist預設列素    81 
5.2.6  日歷控件    82 
5.2.7  顏色池控件    82 
5.3  表單應用案例    83 
上機實訓    84 
課後練習    84 
第6章  CSS3樣式基礎    86 
6.1  CSS3文本效果應用    86 
6.1.1  文本陰影效果    86 
6.1.2  文本描邊效果    87 
6.1.3  文本浮雕效果    87 
6.1.4  CSS3文本效果應用案例    87 
6.2  CSS3背景與漸變效果    89 
6.2.1  線性漸變    89 
6.2.2  徑向漸變    89 
6.2.3  重復漸變    90 
6.2.4  CSS3背景與漸變效果應用案例    90 
6.3  CSS3制作邊框效果    91 
6.3.1  圓角邊框    91 
6.3.2  CSS3圓角邊框應用案例    92 
6.3.3  邊框陰影    94 
6.3.4  邊框陰影制作案例    95 
6.4  CSS3制作動畫效果    96 
6.4.1  CSS3 transitions過渡動畫制作    96 
6.4.2  過渡動畫制作案例    97 
6.4.3  CSS3 animation動畫    98 
6.4.4  animation動畫制作案例    100 
6.5  CSS3應用綜合案例    101 
上機實訓    106 
課後練習    108 
第7章  HTML5新特性與媒體應用    109 
7.1  HTML5新特性    109 
7.1.1  解決瀏覽器兼容問題    109 
7.1.2  新增多個功能豐素和API    109 
7.1.3  用戶優先的原則    110 
7.1.4 &nb素語法化繁為簡    110 
7.2  HTML5常素    110 
7.2.1  fig素和figcapt素    110 
7.2.2  details和summ素    111 
7.2.3  time和m素    112 
7.3  HT素全局屬性    113 
7.3.1  contenteditable    113 
7.3.2  data­*    114 
7.3.3  draggable    114 
7.3.4  hidden    114 
7.3.5  spellcheck    114 
7.4  HTML5網頁中多媒體應用    115 
7.4.1  HTML5視頻播放案例    115 
7.4.2  HTML5音頻播放案例    117 
上機實訓    119 
課後練習    119 
第8章  Bootstrap響應式布局    120 
8.1  響應式Web設計和視口    120 
8.2  彈性盒布局    121 
8.2.1  彈性盒布局結構    121 
8.2.2  彈性盒容器屬性    122 
8.2.3  彈性盒素屬性    124 
8.3  Bootstrap響應式布局    127 
8.3.1  Bootstrap下載與快速部署    127 
8.3.2  柵格繫統    129 
8.3.3  組件及公用樣式    132 
8.3.4  Bootstrap響應式布局案例    136 
上機實訓    138 
課後練習    139 
第9章  Photoshop網頁界面設計    140 
9.1  網頁界面設計基礎    140 
9.1.1  網頁界面設計配色    140 
9.1.2  網頁文素    141 
9.1.3  網頁中常用的圖片格式    142 
9.2  Photoshop簡介    143 
9.2.1  Photoshop 操作界面簡介    143 
9.2.2  工具欄    144 
9.2.3  圖層    144 
9.3  網素的制作案例    147 
9.3.1  線條繪制    147 
9.3.2  按鈕制作    148 
9.3.3  文字陰影    152 
9.3.4  導航條制作    153 
9.3.5  網頁圖像合成與修飾    154 
9.4  網頁版面制作案例    156 
上機實訓    158 
課後練習    159 
第10章  網站設計制作實例    160 
10.1  網站制作流程    160 
10.2  使用CSS Div設計制作靜態網站    161 
10.2.1  網站的用途及定位    162 
10.2.2  網站內容的選取    162 
10.2.3  使用Photoshop切圖    162 
10.2.4  主頁框架制作    165 
10.2.5  導航制作    171 
10.2.6  主頁內容區內容制作    171 
10.2.7  制作前端內容頁“唐詩”頁面    172 
10.2.8  制作前端內容頁“宋詞”頁面    176 
10.2.9  制作前端內容頁&ldq曲”頁面    176 
10.2.10  制作前端內容頁“漢賦”頁面    180 
10.3  測試網站    182 
10.4  上傳發布網站    184 
10.4.1  使用Dreamweaver CC 2019自帶工具上傳站點    184 
10.4.2  使用FlashFXP上傳文件    185 
上機實訓    186 
參考文獻    187 
附錄  拓展教學資源    188 

HTML5技術的發展，標志著新的Web時代來臨。能夠掌握通過HTML5結合CSS3樣式制作出內容豐富、動態美觀的網頁等頁面前端技術顯得日趨重要。 
  本書結構合理、內容翔實，結合1 X前端考證內容，通過應用HTML5技術結合CSS3樣式制作精美網頁，使讀者輕松快速掌握Web前端設計及網頁圖片素材設計的基本知識。本書以“高技能應用型人纔”為培養目標，以案例講解為主線，每一個案例知識點都融合在精美的網頁制作中，案例選取的網頁具有較強的應用性和示範性。每章後面都附有上機實訓和模擬1 X前端考證的客觀題，供讀者課外練習鞏固所學內容。讀者可以訪問與本書配套的“網頁設計基礎”精品課程網站（http://jx.gdgm.cn/skills/wv/30764673）或科學出版社網站（http://www. abook.cn）獲取所有教學資源，也可進入“愛課程中國大學MOOC”的“網頁設計基礎”課程（https://www.icourse163.org/course/GDGM­1002536020）進行在線學習。 
本書共10章，各章主要內容如下。 
  第1章介紹網頁的基本概念素、在Dreamweaver CC開發平臺上創建網站和網頁的基本操作、在HBuilder X開發平臺上網站、網頁和樣式表文件的創建，並初步了解網頁的文檔結構、掌握文字網頁制作和文字樣式的設計，初步了解HTML5語法。 
第2章介紹CSS樣式的基礎知識，在網頁中添加文本、圖像素，制作一列布局和圖文混排等頁面。 
  第3章深入介紹如何通過CSS Div 布局標簽制作出復雜的網頁頁面。 
  第4章介紹文字和圖片的超鏈接，利用文字鏈接和列表項文字制作橫向和豎向導航。 
  第5章介紹HTML5的各素，包括in素、各類無障礙訪素、列表項、日期和顏色控件等，通過案例講素的CSS樣式設計，通素結合CSS樣式，制作出精美的表單頁面。 
  第6章介紹CSS3樣式及其在網頁制作中的應用，包括文本特效、漸變、過渡效果和動畫效果制作等。 
  第7章介紹HTML5新特性素和HTML5的媒體應用。 
  第8章介紹HTML5的Bootstrap框架基礎及應用，包括介紹響應式Web設計、使用彈性盒布局創建響應式網頁布局、Bootstrap框架基礎及應用等。 
  第9章介紹利用Photoshop對網頁中的圖片素材進行修改，導航條、按鈕素的制作，以及網頁版面設計制作等內容。 
  第10章結合企業項目介紹一個綜合網站實例的制作過程，包括網站的規劃、整體設計、網頁切圖、主頁和內容頁的設計、網站的測試與發布等過程。 
本書主要特點如下。 
  1．教學配套資源豐富，方便讀者使用 
  與本書配套的“網頁設計基礎”精品課程在2017年立項為廣東省精品在線開放課程，截止到2019年11月該網站總訪問量已超過47萬人次。2017年開始在國家精品課程平臺“愛課程中國大學MOOC”開設“網頁設計基礎”課程，提供在線學習。豐富的課程教學資源為開展混合式教學開展提供了條件，本書主編圍繞該課程開展的混合式教學創新實踐成果在2019年獲得廣東省教育教學成果一等獎。精品課程網站提供的教學資源包括案例視頻、教學PPT、案例源代碼、素材圖片、上機實訓素材、授課計劃、教學大綱、考核方案和混合式教學方案等；給學有餘力的讀者提供了課程拓展學習資源、各類項目資源庫（如導航庫、播放器庫、樣式庫、優秀項目作品）等，並針對這些資源錄制了教學視頻，另外還提供了網頁開發標準與規範、在線測試鏈接等課程資源。 
  2．配套1 X前端考證，並體現新知識、新技術、新應用 
  本書以案例為引導，理論知識貫穿其中，融“教、學、做”為一體，融藝術與技術於一體，強化學生能力培養；引入網頁設計前端的新知識、新技術、新應用和1 X前端考證知識，使知識內容與企業需求無縫銜接；上機實訓項目來源於真實互聯網網頁仿真，培養學生的技能應用能力和創新能力。 
  3. 教材融合思政育人於一體 
  本書中的案例文字和圖片都經過精心制作和挑選，素材內容包括工匠精神、科技發展、現代詩詞散文、古代詩詞曲賦等，使專業知識與思政育人相融合。 
  4．教材具有先進性 
  本書屬於創新型教材，書中提供的二維碼分別鏈接到80個微課教學視頻、25個優秀項目資源庫和50個其他拓展資源庫等課程資源，讀者通過掃描書中二維碼可在線瀏覽各類資源。 
本書由廣東工貿職業技術學院郭建東擔任主編，廣東工程職業技術學院陸曉梅、廣州工商學院劉紅英和廣東工貿職業技術學院黃培泉擔任副主編。其中，第1章由郭建東和黃培泉共同編寫，第2～5章和第9章、第10章由郭建東編寫，第6章由劉紅英編寫，第7章、第8章由陸曉梅編寫。全書由郭建東統稿。 
  由於編者水平所限，書中疏漏和錯誤之處在所難免，歡迎廣大讀者批評指正。