本書從網頁設計實際應用的角度理解HTML5和CSS3的新元素和新功能,合理選取教學內容。本書設置了以下10個教學單元: 站點與網頁的創(chuàng)建、網頁中文本與段落的應用設計、網頁中圖像與背景的應用設計、網頁中列表與表格的應用設計、網頁中超鏈接與導航欄的應用設計、網頁中表單與控件的應用設計、網頁中音頻與視頻的應用設計、網頁中圖形繪制與操作的應用設計、網頁中特效與交互的應用設計、網頁中元素與整體布局的應用設計,將HTML5和CSS3的相關知識合理安排到各個教學單元中。
本書編者充分調研HTML5、CSS3新技術的實際應用情況,優(yōu)選了50多個來自真實網站的典型教學案例,采用任務驅動、精講多練、理論實踐一體化的教學方法,改進和優(yōu)化教學內容的組織方法和網頁設計技能的訓練方法,全方位促進基于HTML5 CSS3網頁應用設計能力的提升。每個教學單元面向教學全過程設置知識必備引導訓練同步訓練技術進階問題探究單元習題6個教學環(huán)節(jié),同時還提供了豐富的配套教學資源。
本書可以作為普通高等院校、高職高;蛑械嚷殬I(yè)院校各專業(yè)網頁設計的教材,也可以作為網頁設計的培訓用書及技術用書。
充分調研HTML5、CSS3新技術的實際應用情況,優(yōu)選了53個來自于真實網站的典型教學案例,采用任務驅動、精講多練、理論實踐一體化的教學方法,改進和優(yōu)化教學內容的組織方法和網頁設計技能的訓練方法,全方向促進基于HTML5 CSS3網頁應用設計能力的提升。
目前,HTML5和CSS3已成為Web應用開發(fā)中的熱門技術,HTML5和CSS3不僅是兩項新的Web技術標準,更代表了HTML和CSS技術的發(fā)展趨勢,是Web開發(fā)領域的一次重大改變。HTML5具有便捷的描述性標簽、良好的多媒體支持、強大的Web應用、先進的選擇器、精美的視覺效果、方便的操作、跨文檔的消息通信、客戶端的方便存儲等諸多優(yōu)勢。HTML5的突出優(yōu)點是該技術可以進行跨平臺使用。CSS3是CSS技術的升級版本,CSS3語言開發(fā)是朝著模塊化方向發(fā)展的。CSS3中可以使用新的選擇器和屬性,而且可以很簡單地設計出許多理想的展示效果。
本書具有以下特色和創(chuàng)新。
(1) 編者充分調研了HTML5、CSS3新技術的實際應用情況,精心挑選教學案例。本書開發(fā)前期對HTML5、CSS3新技術在網頁中的實際應用情況做了大量細致的調研工作,經過多次篩選、優(yōu)化和簡化,最終形成了50多個典型教學案例,這些教學案例全部來自于真實網站,代表了網頁應用設計的實際需求和最新水平。
(2) 全書合理選取教學內容,科學設置教學單元。讓讀者從網頁設計實際應用的角度理解HTML5和CSS3的新元素和新功能,而不是過于注重學習HTML5和CSS3理論知識。同時,本書遵循學習者的認知規(guī)律,將基于HTML5 CSS3的網頁應用設計分為10個單元。
(3) 全書充分考慮教學實施的實際需求,每個教學單元面向教學全過程合理設置了6個教學環(huán)節(jié): 知識必備引導訓練同步訓練技術進階問題探究單元習題。書中將網頁設計的相關理論知識分層次進行分析與呈現,將網頁設計技能的訓練分階段實施,充分滿足不同專業(yè)、不同層次學習者學習網頁設計知識和訓練網頁設計技能的需求。全書還提供了500多道習題,讓學習者通過大量的練習進一步加深對HTML5、CSS3、網頁設計相關知識的理解,從而提升網頁設計的操作技能。
(4) 全書圍繞網頁應用的實際需要來設計具有很強操作性的任務。采用任務驅動、精講多練、理論實踐一體化的教學方法,全方位促進基于HTML5 CSS3網頁應用設計能力的提升。注重引導學習者在完成各個設計任務的過程中,逐步理解HTML5和CSS3的新功能和新特點,循序漸進地學會HTML5和CSS3的實際應用,從而熟練掌握網頁設計的方法和具備網頁設計的能力。
(5) 本書創(chuàng)新了教材的結構和呈現形式,采用紙質教材 電子書相結合的方式。由于紙質教材篇幅的限制,同時要保證教學內容的系統性,部分內容在紙質教材中只列出主干內容,完整內容通過掃描二維碼可以在線瀏覽,各單元的習題也是以在線瀏覽方式提供。
(6) 本書配套教學資源豐富。教學單元設計、教學流程設計、網頁任務設計、教學案例及素材、電子教稿等教學資源一應俱全,力求做到想師生之所想,急師生之所急。
本書由湖南鐵道職業(yè)技術學院的陳承歡、顏珍平老師,包頭輕工職業(yè)技術學院的韓耀坤老師共同編寫,顏謙和、謝樹新、吳獻文、肖素華、林?怠⑼鯕g燕、張丹、王姿、裴來芝、潘玫玫、郭外萍、侯偉、張麗芳等多位老師也參與了教材的編寫。
由于編者水平有限,書中難免存在疏漏之處,敬請各位專家和讀者批評、指正。編者的QQ為1574819688,需要相關資源的讀者可通過QQ與編者聯系。
編者2018年2月
單元1站點與網頁的創(chuàng)建1
【知識必備】1
【引導訓練】4
任務11創(chuàng)建單元1站點并瀏覽網頁4
任務111創(chuàng)建本地站點單元14
任務112認識Dreamweaver CC的工作界面6
任務113打開與瀏覽網頁文檔0101.html10
任務12認知HTML5的典型標記和結構標簽13
任務121分析HTML代碼的組成結構13
任務122認知HTML5中典型的標記方法17
任務123認知HTML5主要的結構標簽17
【同步訓練】18
任務13打開并瀏覽網頁0103.html18
【技術進階】19
【問題探究】20
【單元習題】21
單元2網頁中文本與段落的應用設計22
【知識必備】22
【引導訓練】37
任務21制作阿壩概況的文本網頁37
任務211建立站點及其目錄結構38
任務212創(chuàng)建與保存網頁文檔0201.html40
任務213設置網頁的首選項40
任務214設置頁面的整體屬性42
任務215在網頁中輸入文字48
任務216輸入與編輯網頁中的文本49
任務217格式化網頁文本50
任務218設置超鏈接與瀏覽網頁效果51
任務219在【代碼】視圖中查看CSS代碼和HTML代碼51
任務22使用CSS美化文本標題和文本段落55
【同步訓練】61
任務23制作介紹九寨溝概況的文本網頁61
【技術進階】62
【問題探究】65
【單元習題】67
目錄單元3網頁中圖像與背景的應用設計68
【知識必備】68
【引導訓練】74
任務31制作介紹九寨溝景區(qū)景點的圖文混排網頁74
任務311使用【管理站點】對話框創(chuàng)建站點單元375
任務312應用【文件】面板新建網頁0301.html76
任務313設置頁面的背景圖像77
任務314在網頁中輸入所需的文本內容與設置文本格式78
任務315插入圖像與設置圖像屬性79
任務316在代碼視圖中查看CSS代碼和HTML代碼81
任務32使用CSS美化網頁文本與圖片82
任務33創(chuàng)建多張圖片并行排列的網頁0303.html88
【同步訓練】90
任務34在網頁中設置圖片與背景屬性90
任務35創(chuàng)建圖文混排的網頁0305.html91
【技術進階】91
【問題探究】96
【單元習題】98
單元4網頁中列表與表格的應用設計99
【知識必備】99
【引導訓練】105
任務41創(chuàng)建以項目列表形式表現新聞標題的網頁105
任務42創(chuàng)建以項目列表形式表現圖文按鈕的網頁109
任務43創(chuàng)建應用表格存放數據的網頁114
任務44創(chuàng)建包含個性化表格的網頁119
【同步訓練】122
任務45創(chuàng)建項目列表為主的旅游攻略標題網頁122
任務46創(chuàng)建包含5行3列表格的網頁123
【技術進階】123
【問題探究】124
【單元習題】127
單元5網頁中超鏈接與導航欄的應用設計128
【知識必備】128
【引導訓練】131
任務51設置網頁中導航欄的超鏈接屬性131
任務52制作包含橫向主導航欄的網頁134
任務53制作包含縱向欄目導航欄的網頁139
任務54創(chuàng)建包含圖像熱點鏈接的網頁141
【同步訓練】145
任務55創(chuàng)建包含頂部橫向導航欄的網頁145
任務56創(chuàng)建包含多種不同形狀圖像鏈接的網頁146
【技術進階】146
【問題探究】150
【單元習題】151
單元6網頁中表單與控件的應用設計152
【知識必備】152
【引導訓練】158
任務61在網頁中添加表單及表單控件158
任務62創(chuàng)建用戶注冊的表單網頁164
【同步訓練】171
任務63創(chuàng)建用戶登錄的表單網頁171
任務64創(chuàng)建用戶留言反饋網頁172
【技術進階】172
【問題探究】174
【單元習題】174
單元7網頁中音頻與視頻的應用設計175
【知識必備】175
【引導訓練】177
任務71設計基于HTML5的網頁音樂播放器之一177
任務72設計基于HTML5的網頁視頻播放器之一179
【同步訓練】180
任務73設計基于HTML5的網頁音樂播放器之二180
任務74設計基于HTML5的網頁視頻播放器之二181
【技術進階】182
【問題探究】183
【單元習題】184
單元8網頁中圖形繪制與操作的應用設計185
【知識必備】185
【引導訓練】194
任務81網頁中應用純CSS繪制各種規(guī)則圖形194
任務82網頁中應用純CSS繪制各種特色圖形197
任務83網頁中應用canvas元素繪制各種圖形和文字200
任務84網頁中繪制菊花圖形206
【同步訓練】208
任務85網頁中繪制陰陽圖和五角星208
任務86網頁中繪制多種圖形和圖片208
【技術進階】209
【問題探究】210
【單元習題】213
單元9網頁中特效與交互的應用設計214
【知識必備】214
【引導訓練】227
任務91網頁中顯示當前日期227
任務92網頁中不同時間段顯示不同的問候語231
任務93網頁中制作圓角按鈕和圓角圖片234
任務94設計網頁中的圓形導航按鈕239
任務95網頁中實現搜索框聚焦變長的效果242
任務96網頁中應用CSS實現超酷導航菜單243
任務97網頁中實現仿Office風格的多級菜單246
任務98網頁中實現圖片拖動操作251
【同步訓練】254
任務99網頁中不同的節(jié)假日顯示不同的問候語254
任務910網頁中創(chuàng)建下拉導航菜單255
【技術進階】255
【問題探究】255
【單元習題】261
單元10網頁中元素與整體布局的應用設計262
【知識必備】262
【引導訓練】276
任務101體驗網頁的不同布局方式276
任務102創(chuàng)建浮動定位2列式布局的網頁281
任務103創(chuàng)建等距排列的4列式布局網頁289
任務104創(chuàng)建不規(guī)則布局網頁295
【同步訓練】300
任務105創(chuàng)建浮動定位2列規(guī)則分塊的網頁300
任務106創(chuàng)建3列式與4列式等距布局的網頁301
【技術進階】301
【問題探究】302
【單元習題】304
參考文獻305
附錄ACSS的屬性306
附錄BCSS的選擇器307