本書為高職高專院校網(wǎng)頁設計與制作相關課程的教材，主要內(nèi)容包括網(wǎng)頁設計與制作概述、HTML5頁面元素及屬性、CSS美化HTML網(wǎng)頁、網(wǎng)頁div+CSS布局設計與制作、網(wǎng)頁表格布局設計與制作、網(wǎng)頁框架設計與制作、網(wǎng)頁模板設計與制作、網(wǎng)頁表單設計與制作、網(wǎng)頁簡單特效設計與制作，以及網(wǎng)頁多媒體設計與制作。各項目內(nèi)容通過項目導向、任務驅(qū)動逐步展開，不僅更好地體現(xiàn)了“能力導向，學生主體”的原則，也更好地適應了高職項目化的教學要求。本書配套的電子課件、素材等資源，請登錄華信教育資源網(wǎng)（http://www.hxedu.com.cn）注冊后免費下載。本書既可以作為高職高專院校網(wǎng)頁設計與制作相關課程的教材，也可以作為對網(wǎng)頁設計與制作感興趣的人員的學習參考用書。
秦鳳梅，女，四川大學軟件工程碩士，教授，重慶城市管理職業(yè)學院專任教師、校企合作專員，大數(shù)據(jù)專業(yè)帶頭人，重慶市巴南區(qū)第四屆學術技術帶頭人后備人選，校企合作研究與實踐20年，曾主持5項市級課題，另主研2項市級相關課題，其中1項重大，2項重點，所有課題均按時按質(zhì)結項；課題相關省部級教學成果獎2項，1項主持，1項主研，分別獲三等獎；公開發(fā)表論文近20篇，本課題相關10篇，其中4篇參加市級論文競賽并獲獎；校企"雙元”模式合作開發(fā)教材主編6部，3部獲教育部12.5規(guī)劃教材；曾擔任軟件公司CMM3 SEPG成員并負責SQA工作；以校企合作負責研發(fā)商業(yè)項目3項交付企業(yè)通過驗收。相關領域?qū)W術積累及貢獻：（1）校企合作模式的軟件技術人才培養(yǎng)體系開發(fā)及活頁式校本教材開發(fā)：兼華日軟件公司副總經(jīng)理期間曾組織公司和學校的技術專家團隊共同完成對日軟件外包人才培養(yǎng)體系及10余本活頁式的校本教材的開發(fā)與建設，華日軟件公司作為重慶最早從事對日軟件外包的公司，相關研究成果曾被重慶市多家學校及培訓機構借鑒參考，以此為基礎在重慶市教委立項并完成軟件技術專業(yè)（對日軟件外包方向）課程建設與改革教改項目；（2）校企合作模式的電子商務人才培養(yǎng)體系開發(fā)：擔任互聯(lián)網(wǎng)工程系主任兼重慶正大恒領網(wǎng)絡科技有限公司副經(jīng)理總期間，曾協(xié)助公司組織學校千余名實習學生和公司400多名員工共同完成愉快網(wǎng)項目的研發(fā)，并形成"五結合五支撐”的校企合作創(chuàng)新人才培養(yǎng)模式。以此為基礎在重慶市教委立項并完成應用型本科電子商務專業(yè)產(chǎn)教結合人才培養(yǎng)模式研究實踐重點教改項目；（3）校企合作模式助力公司通過CMM3評估：作為CMM3核心成員之一組織公司和學校的技術專家團隊，助力公司成為重慶第二家通過CMM3評估認證，相關團隊有市級重大教改項目為證；（4）產(chǎn)教融合、校企合作模式的管理體系設計：擔任重慶正大軟件集團人事部長時，組織學校學生分段式進入集團5個子公司實習，組織團隊完成學校和集團相互融合的制度、組織及考評等方面的機制建設，曾和西南地區(qū)30多所高校建立合作關系，實習學生最大規(guī)模達1500余人；（5）產(chǎn)教融合、校企合作評價指標體系設計：將國家及地方三部委關于應用型本科建設指標和國家對學校相關評估指標研究后，結合學校實際設計出含7個一級指標16個二級指標的產(chǎn)教融合評價指標體系，在學校內(nèi)推廣執(zhí)行效果較好，被多所學校參考借鑒。
上篇 基礎部分
項目1 網(wǎng)頁設計與制作概述 1
1.1 任務目標 1
1.2 知識準備 2
1.2.1 網(wǎng)站和網(wǎng)頁概述 2
1.2.2 網(wǎng)頁設計素養(yǎng) 10
1.2.3 Web標準 12
1.2.4 HTML基礎 13
1.2.5 網(wǎng)頁設計常用軟件 20
1.3 任務實施 20
任務1：實現(xiàn)大國工匠年度人物的圖像信息展示 21
任務2：實現(xiàn)大國工匠年度人物的文字信息展示 24
1.4 任務總結 26
1.5 能力與知識拓展 26
1.6 鞏固練習 30
項目2 HTML5頁面元素及屬性 32
2.1 任務目標 32
2.2 知識準備 32
2.2.1 結構元素 32
2.2.2 列表元素 36
2.2.3 分組元素 41
2.2.4 頁面交互元素 42
2.3 任務實施 44
任務1：實現(xiàn)感動中國年度人物信息展示頁面分區(qū) 45
任務2：實現(xiàn)感動中國年度人物的文字信息展示 46
2.4 任務總結 49
2.5 能力與知識拓展 50
2.6 鞏固練習 50
項目3 CSS美化HTML網(wǎng)頁 53
3.1 任務目標 53
3.2 知識準備 54
3.2.1 CSS概述 54
3.2.2 CSS語法與用法 55
3.2.3 CSS樣式屬性 57
3.2.4 基本選擇器 61
3.2.5 復合選擇器 64
3.2.6 CSS高級特性 68
3.3 任務實施 71
任務1：實現(xiàn)熱點新聞網(wǎng)首頁的信息展示 72
任務2：實現(xiàn)熱點新聞網(wǎng)首頁的樣式設置 74
3.4 任務總結 76
3.5 能力與知識拓展 78
3.6 鞏固練習 82
下篇 應用實踐部分
項目4 網(wǎng)頁div+CSS布局設計與制作 83
4.1 任務目標 83
4.2 知識準備 84
4.2.1 CSS盒子模型 84
4.2.2 盒子模型屬性設置 85
4.2.3 div 90
4.2.4 浮動與定位 92
4.2.5 div+CSS實現(xiàn)網(wǎng)頁布局 98
4.3 重慶愉快網(wǎng)學做菜首頁頁面設計與制作任務實施 103
任務1：創(chuàng)建重慶愉快網(wǎng)學做菜首頁header部分 105
任務2：設置導航（nav）部分的CSS樣式 110
任務3：設置文字部分的CSS樣式 111
任務4：設置圖文的CSS樣式 113
4.4 任務總結 115
4.5 能力與知識拓展 115
4.6 鞏固練習 116
項目5 網(wǎng)頁表格布局設計與制作 118
5.1 任務目標 118
5.2 知識準備 119
5.2.1 表格標簽 119
5.2.2 使用表格布局的原因 122
5.2.3 設計軟件 123
5.3 個人網(wǎng)站相冊頁面設計與制作任務實施 123
任務1：創(chuàng)建個人網(wǎng)站相冊頁面站點 125
任務2：插入表格完成基本布局 131
任務3：編輯頁面內(nèi)容 134
5.4 任務總結 139
5.5 能力與知識拓展 139
5.5.1 網(wǎng)頁常見結構布局 139
5.5.2 網(wǎng)頁常見布局方法與原則 143
5.6 鞏固練習 143
項目6 網(wǎng)頁框架設計與制作 145
6.1 任務目標 145
6.2 知識準備 146
6.2.1 框架 146
6.2.2 ＜frameset＞標簽與＜frame＞標簽 146
6.2.3 ＜noframes＞標簽 148
6.2.4 ＜iframe＞標簽 149
6.3 重慶愉快網(wǎng)個人主頁頁面設計與制作任務實施 149
任務1：創(chuàng)建重慶愉快網(wǎng)個人主頁頁面 152
任務2：設計與制作top頁面 156
任務3：設計與制作left頁面 159
任務4：設計制作main頁面 164
6.4 任務總結 168
6.5 能力與知識拓展 170
6.5.1 重慶愉快網(wǎng)找優(yōu)惠頁面中浮動框架的設計與制作 170
6.5.2 重慶愉快網(wǎng)找優(yōu)惠框架鏈接的設計與制作 172
6.6 鞏固練習 175
項目7 網(wǎng)頁模板設計與制作 177
7.1 任務目標 177
7.2 知識準備 178
7.2.1 資源 179
7.2.2 庫 179
7.2.3 庫項目 180
7.2.4 編輯庫項目 182
7.3 重慶愉快網(wǎng)內(nèi)容頁面設計與制作任務實施 183
任務1：分析、設計與制作內(nèi)容頁面的布局 184
任務2：設計與制作網(wǎng)頁可編輯區(qū)域 189
任務3：通過模板頁來設計與制作同類型的內(nèi)容頁面 192
7.4 任務總結 196
7.5 能力與知識拓展 198
7.6 鞏固練習 200
項目8 網(wǎng)頁表單設計與制作 202
8.1 任務目標 202
8.2 知識準備 203
8.2.1 表單標簽 203
8.2.2 表單域 204
8.2.3 表單按鈕 207
8.3 重慶愉快網(wǎng)注冊表單頁面設計與制作任務實施 208
任務1：創(chuàng)建重慶愉快網(wǎng)注冊表單頁面站點 210
任務2：創(chuàng)建重慶愉快網(wǎng)注冊表單頁面 210
任務3：注冊表單頁面的設計與制作 212
任務4：美化注冊表單頁面 219
8.4 任務總結 220
8.5 能力與知識拓展 223
8.5.1 表單頁面制作原則 223
8.5.2 下拉列表的設計與制作 224
8.6 鞏固練習 225
項目9 網(wǎng)頁簡單特效設計與制作 227
9.1 任務目標 227
9.2 知識準備 228
9.2.1 行為 228
9.2.2 JavaScript 230
9.2.3 JavaScript事件 232
9.2.4 JavaScript對象 232
9.3 重慶市少年宮網(wǎng)站首頁頁面設計與制作任務實施 233
任務1：創(chuàng)建重慶市少年宮網(wǎng)站首頁頁面站點 236
任務2：創(chuàng)建重慶市少年宮網(wǎng)站首頁頁面 236
任務3：重慶市少年宮網(wǎng)站首頁頁面的設計與制作 238
9.4 任務總結 243
9.5 能力與知識拓展 245
9.6 鞏固練習 246
項目10 網(wǎng)頁多媒體設計與制作 248
10.1 任務目標 248
10.2 知識準備 249
10.2.1 HTML5多媒體的特性 249
10.2.2 視頻和音頻編解碼器 249
10.2.3 多媒體的格式 250
10.2.4 支持視頻或音頻的瀏覽器 251
10.2.5 在網(wǎng)頁中嵌入音頻 251
10.2.6 在網(wǎng)頁中嵌入視頻 252
10.3 簡單音樂播放器設計與制作任務實施 256
任務1：創(chuàng)建音樂播放器網(wǎng)頁 257
任務2：實現(xiàn)音樂播放功能 260
10.4 任務總結 263
10.5 能力與知識拓展 263
10.6 鞏固練習 266
書單推薦
