HTML5+CSS3任務(wù)驅(qū)動教程

模塊一 網(wǎng)頁設(shè)計基礎(chǔ)知識 1
任務(wù)1 Dreamweaver CC 2017的安裝 1
任務(wù)描述 1
知識準備 2
1．1 Dreamweaver CC 2017的新增
功能 2
任務(wù)實現(xiàn) 3
任務(wù)小結(jié) 4
任務(wù)2 網(wǎng)站的建立 4
任務(wù)描述 4
知識準備 5
1．2 網(wǎng)頁、網(wǎng)站、首頁 5
1．3 靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁 6
1．4 IP地址、域名和URL 7
1．5 HTTP和FTP 7
任務(wù)實現(xiàn) 7
任務(wù)小結(jié) 9
任務(wù)3 網(wǎng)頁的基本知識 9
任務(wù)描述 9
知識準備 10
1．6 網(wǎng)頁的基本結(jié)構(gòu) 10
1．7 網(wǎng)頁的基本內(nèi)容 10
1．8 網(wǎng)頁的表現(xiàn) 11
1．9 網(wǎng)頁的行為 11
1．10 網(wǎng)頁的Web標準 11
任務(wù)小結(jié) 12
思考與練習 12
模塊二 HTML5開發(fā)基礎(chǔ) 14
任務(wù)1 編寫一個簡單的HTML5
頁面 14
任務(wù)描述 14
知識準備 15
2．1 HTML簡介 15
2．2 HTML的基本結(jié)構(gòu) 16
任務(wù)實現(xiàn) 21
任務(wù)小結(jié) 22
任務(wù)2 設(shè)置“在線學習網(wǎng)”的首頁
文件頭部信息 22
任務(wù)描述 22
知識準備 23
2．3 頁面文件的頭部信息 23
任務(wù)實現(xiàn) 26
任務(wù)小結(jié) 27
思考與練習 27
模塊三 文本與段落 30
任務(wù)1 文字的基本排版 30
任務(wù)描述 30
知識準備 31
3．1 段落 31
3．2 換行 31
3．3 預(yù)格式化 31
3．4 水平線 31
3．5 各級標題 32
任務(wù)實現(xiàn) 32
任務(wù)小結(jié) 33
任務(wù)2 對文字進行加強描述 33
任務(wù)描述 33
知識準備 33
3．6 強調(diào)文本 33
3．7 作品標題 34
3．8 小型文本 34
3．9 標記文本的更改 34
3．10 文本的上下標 35
3．11 時間和日期 35
3．12 其他相關(guān)元素 35
任務(wù)實現(xiàn) 36
任務(wù)小結(jié) 36
任務(wù)3 使用塊級元素和行內(nèi)元素
制作專業(yè)信息頁面 37
任務(wù)描述 37
知識準備 37
3．13 塊級元素 37
3．14 行內(nèi)元素 38
3．15 ＜span＞標記 38
任務(wù)實現(xiàn) 38
任務(wù)小結(jié) 40
任務(wù)4 特殊符號的使用 40
任務(wù)描述 40
知識準備 41
3．16 字符實體 41
任務(wù)實現(xiàn) 41
任務(wù)小結(jié) 42
任務(wù)5 添加注釋 42
任務(wù)描述 42
知識準備 42
3．17 旁注 42
3．18 注釋 43
任務(wù)實現(xiàn) 43
任務(wù)小結(jié) 44
思考與練習 44
模塊四 網(wǎng)頁中的圖像與多媒體技術(shù) 46
任務(wù)1 制作“在線學習網(wǎng)”的平面
作品展示頁面 46
任務(wù)描述 46
知識準備 47
4．1 網(wǎng)頁中的圖像 47
4．2 使用＜img＞標記插入圖像 48
任務(wù)實現(xiàn) 54
任務(wù)小結(jié) 55
任務(wù)2 制作“在線學習網(wǎng)”的廣告
作品展示頁面 56
任務(wù)描述 56
知識準備 56
4．3 使用＜object＞標記在網(wǎng)頁中插入
Flash動畫 56
4．4 使用＜embed＞標記在網(wǎng)頁中插入
多媒體內(nèi)容 57
任務(wù)實現(xiàn) 58
任務(wù)小結(jié) 60
任務(wù)3 制作“在線學習網(wǎng)”的多媒體
作品展示頁面 60
任務(wù)描述 60
知識準備 61
4．5 網(wǎng)頁中的多媒體內(nèi)容 61
4．6 使用＜video＞標記在網(wǎng)頁中插入
視頻 61
4．7 使用＜audio＞標記在網(wǎng)頁中插入
音頻 63
任務(wù)實現(xiàn) 64
任務(wù)小結(jié) 65
思考與練習 65
模塊五 應(yīng)用表格布局頁面 68
任務(wù)1 圖書借閱詳情頁面的制作 68
任務(wù)描述 68
知識準備 69
5．1 表格的基本結(jié)構(gòu) 69
5．2 創(chuàng)建表格 69
5．3 表格的其他元素 71
任務(wù)實現(xiàn) 72
任務(wù)小結(jié) 73
任務(wù)2 課程表的制作 73
任務(wù)描述 73
知識準備 74
5．4 跨行跨列設(shè)置 74
5．5 背景顏色設(shè)置 75
任務(wù)實現(xiàn) 75
任務(wù)小結(jié) 78
任務(wù)3 學院首頁頁面的制作 78
任務(wù)描述 78
知識準備 79
5．6 對齊方式的設(shè)置 79
5．7 寬度、高度的設(shè)置 80
5．8 背景圖片的設(shè)置 80
任務(wù)實現(xiàn) 80
任務(wù)小結(jié) 81
思考與練習 82
模塊六 創(chuàng)建網(wǎng)頁中的超鏈接 83
任務(wù) 創(chuàng)建“在線學習網(wǎng)”頁面的
超鏈接 83
任務(wù)描述 83
知識準備 85
6．1 創(chuàng)建超鏈接 85
6．2 超鏈接的類型 88
任務(wù)實現(xiàn) 92
任務(wù)小結(jié) 96
思考與練習 97
模塊七 網(wǎng)頁表單設(shè)計 99
任務(wù)1 注冊頁面的設(shè)計 99
任務(wù)描述 99
知識準備 99
7．1 了解表單 99
7．2 輸入元素input 101
任務(wù)實現(xiàn) 105
任務(wù)小結(jié) 108
任務(wù)2 讀者留言板的設(shè)計 108
任務(wù)描述 108
知識準備 108
7．3 下拉選擇框元素select 108
7．4 多行文本域textarea 110
任務(wù)實現(xiàn) 111
任務(wù)小結(jié) 113
思考與練習 114
模塊八 網(wǎng)頁的CSS樣式設(shè)計 115
任務(wù)1 網(wǎng)頁大標題的樣式設(shè)計 115
任務(wù)描述 115
知識準備 116
8．1 什么是CSS 116
8．2 CSS的應(yīng)用 118
任務(wù)實現(xiàn) 119
任務(wù)小結(jié) 121
任務(wù)2 網(wǎng)頁中的文字排版 122
任務(wù)描述 122
知識準備 123
8．3 CSS字體樣式 123
任務(wù)實現(xiàn) 125
任務(wù)小結(jié) 129
任務(wù)3 制作新聞列表排行榜 129
任務(wù)描述 129
知識準備 130
8．4 列表的應(yīng)用 130
任務(wù)實現(xiàn) 133
任務(wù)小結(jié) 135
思考與練習 135
模塊九 使用DIV+CSS布局頁面 138
任務(wù)1 網(wǎng)頁中的圖文混排 138
任務(wù)描述 138
知識準備 139
9．1 CSS盒子模型 139
9．2 CSS浮動與定位 146
任務(wù)實現(xiàn) 147
任務(wù)小結(jié) 149
任務(wù)2 網(wǎng)頁中的全圖排版 149
任務(wù)描述 149
知識準備 150
9．3 CSS背景控制 150
任務(wù)實現(xiàn) 152
任務(wù)小結(jié) 154
任務(wù)3 多行多列式布局 154
任務(wù)描述 154
知識準備 155
9．4 CSS代碼優(yōu)化 155
任務(wù)實現(xiàn) 157
任務(wù)小結(jié) 162
思考與練習 162
模塊十 使用CSS3美化網(wǎng)站元素 164
任務(wù)1 使用CSS3設(shè)計網(wǎng)站導(dǎo)航 164
任務(wù)描述 164
知識準備 165
10．1 CSS3背景漸變及陰影 165
10．2 CSS超鏈接樣式 166
任務(wù)實現(xiàn) 166
任務(wù)小結(jié) 168
任務(wù)2 使用CSS3美化表格 168
任務(wù)描述 168
知識準備 169
10．3 HTML表格的特殊應(yīng)用 169
任務(wù)實現(xiàn) 170
任務(wù)小結(jié) 172
任務(wù)3 使用CSS3美化表單 172
任務(wù)描述 172
知識準備 172
10．4 CSS屬性選擇器 172
任務(wù)實現(xiàn) 173
任務(wù)小結(jié) 176
思考與練習 176
模塊十一 綜合案例 178
任務(wù) 學校網(wǎng)站的頁面設(shè)計 178
任務(wù)描述 178
任務(wù)實現(xiàn) 178
任務(wù)小結(jié) 201
參考文獻 202