HTML5+CSS3跨平臺網(wǎng)頁設計實例教程

單元1站點與網(wǎng)頁的創(chuàng)建1
【知識必備】1
【引導訓練】4
任務11創(chuàng)建“單元1”站點并瀏覽網(wǎng)頁4
任務111創(chuàng)建本地站點“單元1”4
任務112認識Dreamweaver CC的工作界面6
任務113打開與瀏覽網(wǎng)頁文檔0101.html10
任務12認知HTML5的典型標記和結(jié)構(gòu)標簽13
任務121分析HTML代碼的組成結(jié)構(gòu)13
任務122認知HTML5中典型的標記方法17
任務123認知HTML5主要的結(jié)構(gòu)標簽17
【同步訓練】18
任務13打開并瀏覽網(wǎng)頁0103.html18
【技術(shù)進階】19
【問題探究】20
【單元習題】21
單元2網(wǎng)頁中文本與段落的應用設計22
【知識必備】22
【引導訓練】37
任務21制作阿壩概況的文本網(wǎng)頁37
任務211建立站點及其目錄結(jié)構(gòu)38
任務212創(chuàng)建與保存網(wǎng)頁文檔0201.html40
任務213設置網(wǎng)頁的首選項40
任務214設置頁面的整體屬性42
任務215在網(wǎng)頁中輸入文字48
任務216輸入與編輯網(wǎng)頁中的文本49
任務217格式化網(wǎng)頁文本50
任務218設置超鏈接與瀏覽網(wǎng)頁效果51
任務219在【代碼】視圖中查看CSS代碼和HTML代碼51
任務22使用CSS美化文本標題和文本段落55
【同步訓練】61
任務23制作介紹九寨溝概況的文本網(wǎng)頁61
【技術(shù)進階】62
【問題探究】65
【單元習題】67
目錄單元3網(wǎng)頁中圖像與背景的應用設計68
【知識必備】68
【引導訓練】74
任務31制作介紹九寨溝景區(qū)景點的圖文混排網(wǎng)頁74
任務311使用【管理站點】對話框創(chuàng)建站點“單元3”75
任務312應用【文件】面板新建網(wǎng)頁0301.html76
任務313設置頁面的背景圖像77
任務314在網(wǎng)頁中輸入所需的文本內(nèi)容與設置文本格式78
任務315插入圖像與設置圖像屬性79
任務316在“代碼”視圖中查看CSS代碼和HTML代碼81
任務32使用CSS美化網(wǎng)頁文本與圖片82
任務33創(chuàng)建多張圖片并行排列的網(wǎng)頁0303.html88
【同步訓練】90
任務34在網(wǎng)頁中設置圖片與背景屬性90
任務35創(chuàng)建圖文混排的網(wǎng)頁0305.html91
【技術(shù)進階】91
【問題探究】96
【單元習題】98
單元4網(wǎng)頁中列表與表格的應用設計99
【知識必備】99
【引導訓練】105
任務41創(chuàng)建以項目列表形式表現(xiàn)新聞標題的網(wǎng)頁105
任務42創(chuàng)建以項目列表形式表現(xiàn)圖文按鈕的網(wǎng)頁109
任務43創(chuàng)建應用表格存放數(shù)據(jù)的網(wǎng)頁114
任務44創(chuàng)建包含個性化表格的網(wǎng)頁119
【同步訓練】122
任務45創(chuàng)建項目列表為主的旅游攻略標題網(wǎng)頁122
任務46創(chuàng)建包含5行3列表格的網(wǎng)頁123
【技術(shù)進階】123
【問題探究】124
【單元習題】127
單元5網(wǎng)頁中超鏈接與導航欄的應用設計128
【知識必備】128
【引導訓練】131
任務51設置網(wǎng)頁中導航欄的超鏈接屬性131
任務52制作包含橫向主導航欄的網(wǎng)頁134
任務53制作包含縱向欄目導航欄的網(wǎng)頁139
任務54創(chuàng)建包含圖像熱點鏈接的網(wǎng)頁141
【同步訓練】145
任務55創(chuàng)建包含頂部橫向?qū)Ш綑诘木W(wǎng)頁145
任務56創(chuàng)建包含多種不同形狀圖像鏈接的網(wǎng)頁146
【技術(shù)進階】146
【問題探究】150
【單元習題】151
單元6網(wǎng)頁中表單與控件的應用設計152
【知識必備】152
【引導訓練】158
任務61在網(wǎng)頁中添加表單及表單控件158
任務62創(chuàng)建用戶注冊的表單網(wǎng)頁164
【同步訓練】171
任務63創(chuàng)建用戶登錄的表單網(wǎng)頁171
任務64創(chuàng)建用戶留言反饋網(wǎng)頁172
【技術(shù)進階】172
【問題探究】174
【單元習題】174
單元7網(wǎng)頁中音頻與視頻的應用設計175
【知識必備】175
【引導訓練】177
任務71設計基于HTML5的網(wǎng)頁音樂播放器之一177
任務72設計基于HTML5的網(wǎng)頁視頻播放器之一179
【同步訓練】180
任務73設計基于HTML5的網(wǎng)頁音樂播放器之二180
任務74設計基于HTML5的網(wǎng)頁視頻播放器之二181
【技術(shù)進階】182
【問題探究】183
【單元習題】184
單元8網(wǎng)頁中圖形繪制與操作的應用設計185
【知識必備】185
【引導訓練】194
任務81網(wǎng)頁中應用純CSS繪制各種規(guī)則圖形194
任務82網(wǎng)頁中應用純CSS繪制各種特色圖形197
任務83網(wǎng)頁中應用canvas元素繪制各種圖形和文字200
任務84網(wǎng)頁中繪制菊花圖形206
【同步訓練】208
任務85網(wǎng)頁中繪制陰陽圖和五角星208
任務86網(wǎng)頁中繪制多種圖形和圖片208
【技術(shù)進階】209
【問題探究】210
【單元習題】213
單元9網(wǎng)頁中特效與交互的應用設計214
【知識必備】214
【引導訓練】227
任務91網(wǎng)頁中顯示當前日期227
任務92網(wǎng)頁中不同時間段顯示不同的問候語231
任務93網(wǎng)頁中制作圓角按鈕和圓角圖片234
任務94設計網(wǎng)頁中的圓形導航按鈕239
任務95網(wǎng)頁中實現(xiàn)搜索框聚焦變長的效果242
任務96網(wǎng)頁中應用CSS實現(xiàn)超酷導航菜單243
任務97網(wǎng)頁中實現(xiàn)仿Office風格的多級菜單246
任務98網(wǎng)頁中實現(xiàn)圖片拖動操作251
【同步訓練】254
任務99網(wǎng)頁中不同的節(jié)假日顯示不同的問候語254
任務910網(wǎng)頁中創(chuàng)建下拉導航菜單255
【技術(shù)進階】255
【問題探究】255
【單元習題】261
單元10網(wǎng)頁中元素與整體布局的應用設計262
【知識必備】262
【引導訓練】276
任務101體驗網(wǎng)頁的不同布局方式276
任務102創(chuàng)建浮動定位2列式布局的網(wǎng)頁281
任務103創(chuàng)建等距排列的4列式布局網(wǎng)頁289
任務104創(chuàng)建不規(guī)則布局網(wǎng)頁295
【同步訓練】300
任務105創(chuàng)建浮動定位2列規(guī)則分塊的網(wǎng)頁300
任務106創(chuàng)建3列式與4列式等距布局的網(wǎng)頁301
【技術(shù)進階】301
【問題探究】302
【單元習題】304
參考文獻305
附錄ACSS的屬性306
附錄BCSS的選擇器307