HTML5+CSS3跨平臺(tái)網(wǎng)頁(yè)設(shè)計(jì)實(shí)例教程

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