HTML5+CSS3網(wǎng)頁設(shè)計與制作實戰(zhàn)（項目式 第5版 微課版）

模塊1
創(chuàng)建站點與制作商品簡介
網(wǎng)頁 1
教學(xué)導(dǎo)航 1
漸進(jìn)訓(xùn)練 2
【任務(wù)1-1】 制作電腦版商品簡介
網(wǎng)頁0101.html 2
【任務(wù)1-1-1】啟動Dreamweaver與
初識其工作界面 2
【任務(wù)1-1-2】認(rèn)識瀏覽器窗口的基本
組成和網(wǎng)頁的基本組成
元素 6
【任務(wù)1-1-3】創(chuàng)建站點
“易購網(wǎng)” 9
【任務(wù)1-1-4】管理本地站點 10
【任務(wù)1-1-5】管理網(wǎng)站中的文件夾和
文件 13
【任務(wù)1-1-6】設(shè)置網(wǎng)頁的首選項 14
【任務(wù)1-1-7】新建網(wǎng)頁文檔0101.html
與設(shè)置頁面屬性 16
【任務(wù)1-1-8】在網(wǎng)頁中輸入與編輯
文本 22
【任務(wù)1-1-9】網(wǎng)頁文檔的基本操作 24
【任務(wù)1-1-10】在網(wǎng)頁中插入與編輯
圖像 26
【任務(wù)1-1-11】使用“資源”面板管理
網(wǎng)站中的資源 28
【任務(wù)1-1-12】設(shè)置網(wǎng)頁0101.html的
頭部內(nèi)容 30
【任務(wù)1-1-13】添加CSS代碼美化網(wǎng)頁
的文本與圖片 32
探索訓(xùn)練 35
【任務(wù)1-2】 制作觸屏版商品簡介
網(wǎng)頁0102.html 35
析疑解惑 37
模塊小結(jié) 46
模塊習(xí)題 46

模塊2
超鏈接應(yīng)用與制作幫助信息
網(wǎng)頁 49
教學(xué)導(dǎo)航 49
漸進(jìn)訓(xùn)練 49
【任務(wù)2-1】 設(shè)計與制作電腦版幫助
信息網(wǎng)頁0201.html 49
【任務(wù)2-1-1】規(guī)劃與設(shè)計“易購網(wǎng)”
的通用布局結(jié)構(gòu) 50
【任務(wù)2-1-2】規(guī)劃與設(shè)計“易購網(wǎng)”
幫助信息網(wǎng)頁的布局
結(jié)構(gòu) 53
【任務(wù)2-1-3】在網(wǎng)頁中添加與編輯
列表 55
【任務(wù)2-1-4】創(chuàng)建頂部導(dǎo)航欄和
插入Logo 57
【任務(wù)2-1-5】創(chuàng)建底部橫向友情鏈接
導(dǎo)航欄 62
【任務(wù)2-1-6】創(chuàng)建左側(cè)幫助導(dǎo)航欄與
添加相應(yīng)幫助內(nèi)容 64
【任務(wù)2-1-7】創(chuàng)建底部幫助導(dǎo)航欄 70
【任務(wù)2-1-8】創(chuàng)建多種形式的
超鏈接 73
探索訓(xùn)練 76
【任務(wù)2-2】 制作觸屏版幫助信息
網(wǎng)頁0202.html 76
析疑解惑 79
模塊小結(jié) 80
模塊習(xí)題 80

模塊3
表格應(yīng)用與制作購物車
網(wǎng)頁 82
教學(xué)導(dǎo)航 82
漸進(jìn)訓(xùn)練 82
【任務(wù)3-1】 制作電腦版購物車
網(wǎng)頁0301.html 82
【任務(wù)3-1-1】在網(wǎng)頁中插入與設(shè)置
表格 83
【任務(wù)3-1-2】使用表格制作購物車
網(wǎng)頁 88
探索訓(xùn)練 92
【任務(wù)3-2】 制作觸屏版購物車
網(wǎng)頁0302.html 92
析疑解惑 97
模塊小結(jié) 101
模塊習(xí)題 101

模塊4
表單應(yīng)用與制作注冊和登錄
網(wǎng)頁 103
教學(xué)導(dǎo)航 103
漸進(jìn)訓(xùn)練 103
【任務(wù)4-1】 制作與美化電腦版用戶
注冊網(wǎng)頁0401.html 103
【任務(wù)4-1-1】創(chuàng)建電腦版用戶注冊
網(wǎng)頁 104
【任務(wù)4-1-2】美化電腦版用戶注冊
網(wǎng)頁 112
【任務(wù)4-2】 制作與美化電腦版用戶
登錄網(wǎng)頁0402.html 118
【任務(wù)4-2-1】創(chuàng)建電腦版用戶登錄
網(wǎng)頁 118
【任務(wù)4-2-2】美化電腦版用戶登錄
網(wǎng)頁 119
探索訓(xùn)練 123
【任務(wù)4-3】 制作觸屏版用戶注冊
網(wǎng)頁0403.html 123
【任務(wù)4-4】 制作觸屏版用戶登錄
網(wǎng)頁0404.html 127
析疑解惑 130
模塊小結(jié) 130
模塊習(xí)題 130

模塊5
網(wǎng)頁布局與制作商品篩選
網(wǎng)頁 132
教學(xué)導(dǎo)航 132
漸進(jìn)訓(xùn)練 133
【任務(wù)5-1】 設(shè)計與制作電腦版商品
篩選網(wǎng)頁0501.html 133
【任務(wù)5-1-1】規(guī)劃與設(shè)計商品篩選
網(wǎng)頁的布局結(jié)構(gòu) 134
【任務(wù)5-1-2】布局與美化商品篩選
網(wǎng)頁的左側(cè)列表
內(nèi)容 136
【任務(wù)5-1-3】布局與美化商品篩選
網(wǎng)頁的右側(cè)主體
內(nèi)容 141
探索訓(xùn)練 149
【任務(wù)5-2】 制作觸屏版促銷商品
頁面0502.html 149
析疑解惑 153
模塊小結(jié) 166
模塊習(xí)題 167
模塊6
模板應(yīng)用與制作商品推薦
網(wǎng)頁 168
教學(xué)導(dǎo)航 168
漸進(jìn)訓(xùn)練 168
【任務(wù)6-1】 設(shè)計與制作電腦版商品
推薦網(wǎng)頁0601.html 168
【任務(wù)6-1-1】規(guī)劃與設(shè)計商品推薦
網(wǎng)頁的布局結(jié)構(gòu) 169
【任務(wù)6-1-2】制作用于生成網(wǎng)頁模板的
網(wǎng)頁0601.html 173
【任務(wù)6-2】 制作基于模板的電腦版
商品推薦網(wǎng)頁0602.html 178
【任務(wù)6-2-1】基于網(wǎng)頁0601.html創(chuàng)建
網(wǎng)頁模板0601.dwt 178
【任務(wù)6-2-2】創(chuàng)建基于模板的網(wǎng)頁
0602.html 184
【任務(wù)6-2-3】在網(wǎng)頁0602.html中插入
庫項目和代碼片斷 188
探索訓(xùn)練 192
【任務(wù)6-3】 設(shè)計與制作觸屏版商品
促銷頁面0603.html 192
【任務(wù)6-4】 制作基于模板的觸屏版商品
促銷頁面0604.html 197
析疑解惑 198
模塊小結(jié) 199
模塊習(xí)題 199

模塊7
特效制作與制作商品詳情
網(wǎng)頁 201
教學(xué)導(dǎo)航 201
漸進(jìn)訓(xùn)練 201
【任務(wù)7-1】 設(shè)計與制作電腦版商品
詳情網(wǎng)頁0701.html 201
【任務(wù)7-1-1】規(guī)劃與設(shè)計商品詳情
網(wǎng)頁的布局結(jié)構(gòu) 202
【任務(wù)7-1-2】在網(wǎng)頁頂部顯示當(dāng)前
日期和問候語 207
【任務(wù)7-1-3】網(wǎng)頁中動態(tài)改變局部
區(qū)域文本字體大小 212
【任務(wù)7-1-4】在網(wǎng)頁中自動滾動
圖片 213
【任務(wù)7-1-5】在網(wǎng)頁中實現(xiàn)選項卡
功能 215
【任務(wù)7-1-6】在網(wǎng)頁中實現(xiàn)商品圖片
輪換展示與放大
功能 218
探索訓(xùn)練 224
【任務(wù)7-2】 制作觸屏版商品詳情
網(wǎng)頁0702.html 224
析疑解惑 230
模塊小結(jié) 234
模塊習(xí)題 234

模塊8
網(wǎng)站整合與制作購物網(wǎng)站
首頁 236
教學(xué)導(dǎo)航 236
漸進(jìn)訓(xùn)練 236
【任務(wù)8-1】 熟悉網(wǎng)站開發(fā)流程和
規(guī)范 236
【任務(wù)8-2】 分析與規(guī)劃購物網(wǎng)站 239
【任務(wù)8-3】 設(shè)計與制作電腦版網(wǎng)站
首頁0801.html 243
【任務(wù)8-3-1】規(guī)劃與設(shè)計電腦版網(wǎng)站
首頁的主體布局
結(jié)構(gòu) 244
【任務(wù)8-3-2】設(shè)計與實現(xiàn)電腦版網(wǎng)站
首頁的導(dǎo)航結(jié)構(gòu) 247
【任務(wù)8-3-3】設(shè)計與實現(xiàn)電腦版網(wǎng)站
首頁的各個局部板塊
內(nèi)容 257
【任務(wù)8-3-4】實現(xiàn)電腦版網(wǎng)站首頁的
特效功能 263
【任務(wù)8-3-5】設(shè)置“易購網(wǎng)”的
超鏈接 267
【任務(wù)8-4】 測試網(wǎng)站 267
【任務(wù)8-5】 發(fā)布網(wǎng)站 271
【任務(wù)8-6】 推廣與維護(hù)網(wǎng)站 273
探索訓(xùn)練 277
【任務(wù)8-7】 設(shè)計與制作觸屏版網(wǎng)站
首頁0802.html 277
析疑解惑 285
模塊小結(jié) 288








































模塊習(xí)題 288

附錄A
HTML5常用標(biāo)簽及其
屬性 290

附錄B
CSS屬性 294

附錄C
CSS選擇器 295

參考文獻(xiàn) 296