Web編程基礎(chǔ)項目實戰(zhàn)教程（HTML+CSS）

模塊1 網(wǎng)站的設(shè)計與策劃\t1
1．1 任務1：認識網(wǎng)頁與網(wǎng)站\t1
1．1．1 網(wǎng)頁與網(wǎng)站的相關(guān)概念\t2
1．1．2 服務器與客戶端\t3
1．2 任務2：認識網(wǎng)頁開發(fā)技術(shù)\t4
1．2．1 Web前端的概念\t4
1．2．2 Web前端開發(fā)技術(shù)\t5
1．3 任務3：設(shè)計策劃網(wǎng)站\t9
1．3．1 網(wǎng)站設(shè)計原則\t9
1．3．2 網(wǎng)站制作流程\t11
1．4 任務4：選擇網(wǎng)頁開發(fā)工具\t12
1．4．1 編寫工具\t12
1．4．2 瀏覽工具\t16
1．5 知識進階\t16
1．6 小結(jié)\t18
1．7 實訓任務\t19
實訓任務1：創(chuàng)建班級網(wǎng)站頁面 \t19
實訓任務2：制作班級學習交流頁面\t20
實訓任務3：制作班級公告欄\t21
模塊2 制作圖文并茂的新聞頁面\t24
2．1 任務1：創(chuàng)建網(wǎng)頁結(jié)構(gòu)\t25
2．1．1 HTML文檔結(jié)構(gòu)\t25
2．1．2 HTML基本語法\t26
2．1．3 ＜head＞標記\t27
2．1．4 任務實施\t28
2．2 任務2：添加網(wǎng)頁文本內(nèi)容\t29
2．2．1 標題與段落標記\t30
2．2．2 水平線標記\t32
2．2．3 換行標記\t33
2．2．4 特殊字符\t33
2．2．5 ＜div＞與＜span＞標記\t34
2．2．6 任務實施\t35
2．3 任務3：設(shè)置圖文并茂的網(wǎng)頁 \t35
2．3．1 插入圖像\t36
2．3．2 網(wǎng)頁中支持的圖像文件格式\t37
2．3．3 任務實施\t38
2．4 知識進階\t38
2．5 小結(jié)\t42
2．6 實訓任務\t42
實訓任務1：制作圖文并茂的班級學習交流頁面\t42
實訓任務2：制作圖文并茂的班級公告欄頁面\t44
模塊3 美化修飾網(wǎng)站的新聞頁面\t47
3．1 任務1：修飾文字排版\t48
3．1．1 CSS概述\t48
3．1．2 引入CSS的方法\t49
3．1．3 CSS選擇器 \t50
3．1．4 CSS特性\t66
3．1．5 文字修飾 \t68
3．1．6 文本修飾\t69
3．1．7 任務實施\t71
3．2 任務2：控制元素屬性\t74
3．2．1 盒子模型\t74
3．2．2 邊框?qū)傩診t74
3．2．3 邊距屬性\t76
3．2．4 浮動\t81
3．2．5 定位\t92
3．2．6 任務實施\t100
3．3 任務3：設(shè)置頁面背景\t102
3．3．1 背景的設(shè)置\t102
3．3．2 背景的運用技術(shù)\t104
3．3．3 任務實施\t107
3．4 知識進階\t108
3．5 小結(jié)\t113
3．6 實訓任務\t114
實訓任務1：使用CSS渲染班級學習交流頁面\t114
實訓任務2：使用CSS渲染班級公告欄頁面\t116
實訓任務3：制作班級網(wǎng)站中的青春名片\t117
實訓任務4：制作圖文環(huán)繞效果\t119
實訓任務5：制作班級圖片新聞版塊\t121
模塊4 制作網(wǎng)站的最新動態(tài)頁面\t124
4．1 任務1：制作最新動態(tài)列表條目\t125
4．1．1 有序列表\t125
4．1．2 無序列表\t127
4．1．3 嵌套列表\t128
4．1．4 定義列表\t129
4．1．5 CSS列表修飾\t130
4．1．6 任務實施\t131
4．2 任務2：創(chuàng)建最新動態(tài)條目鏈接\t134
4．2．1 創(chuàng)建超鏈接\t135
4．2．2 鏈接對象\t135
4．2．3 CSS超鏈接修飾\t136
4．2．4 任務實施\t139
4．3 知識進階\t141
4．4 小結(jié)\t143
4．5 實訓任務\t144
實訓任務1：制作班級新聞欄目\t144
實訓任務2：制作班級網(wǎng)站的軟件大賽通知\t145
實訓任務3：制作班級學習園地\t147
實訓任務4：制作班級網(wǎng)站的導航條\t150
實訓任務5：制作班級網(wǎng)站的新聞欄目\t152
模塊5 制作網(wǎng)站的多媒體相冊頁面\t159
5．1 任務1：創(chuàng)建多媒體相冊\t160
5．1．1 表格組成\t160
5．1．2 表格屬性\t161
5．1．3 任務實施\t163
5．2 任務2：調(diào)整相冊行列結(jié)構(gòu)\t164
5．2．1 單元格屬性\t164
5．2．2 單元格合并\t165
5．2．3 任務實施\t167
5．3 任務3：設(shè)置相冊布局\t168
5．3．1 表格嵌套\t168
5．3．2 表格布局\t170
5．3．3 任務實施\t173
5．4 任務4：設(shè)置多媒體效果\t175
5．4．1 音頻\t175
5．4．2 視頻\t176
5．4．3 任務實施\t178
5．5 知識進階\t178
5．6 小結(jié)\t181
5．7 實訓任務\t181
實訓任務1：制作班級網(wǎng)站的班級課程表\t181
實訓任務2：制作班級網(wǎng)站的學生信息登記表\t184
實訓任務3：制作班級網(wǎng)站的新聞欄目\t185
實訓任務4：制作班級網(wǎng)站的首頁布局\t187
模塊6 制作網(wǎng)站的會員注冊頁面\t191
6．1 任務1：制作基本信息區(qū)\t192
6．1．1 表單基礎(chǔ)\t192
6．1．2 輔助標記\t194
6．1．3 單行文本輸入框\t194
6．1．4 密碼輸入框\t194
6．1．5 表單按鈕\t197
6．1．6 單選按鈕\t199
6．1．7 復選框\t199
6．1．8 文件上傳域\t201
6．1．9 任務實施\t202
6．2 任務2：制作信息收集區(qū)\t205
6．2．1 多行文本域\t205
6．2．2 下拉列表框\t206
6．2．3 任務實施\t208
6．3 任務3：制作法律條款區(qū)\t209
6．3．1 浮動框架標記\t209
6．3．2 任務實施\t210
6．4 知識進階\t211
6．5 小結(jié)\t219
6．6 實訓任務\t220
實訓任務1：制作班級網(wǎng)站的調(diào)查問卷\t220
實訓任務2：制作班級網(wǎng)站的郵箱注冊頁面\t224
實訓任務3：制作電子郵箱的發(fā)送郵件頁面\t226
實訓任務4：制作班級網(wǎng)站的用戶注冊頁面\t229
模塊7 網(wǎng)站首頁的設(shè)計制作\t233
7．1 任務1：首頁整體布局分析設(shè)計\t234
7．1．1 整體布局分析\t234
7．1．2 樣式重置\t234
7．1．3 全局CSS的定義\t235
7．2 任務2：頭部的實現(xiàn)\t236
7．2．1 頭部的布局分析和實現(xiàn)\t236
7．2．2 Logo的實現(xiàn)\t237
7．2．3 頂部導航的實現(xiàn)\t237
7．2．4 登錄注冊的實現(xiàn)\t238
7．3 任務3：中間主體內(nèi)容的實現(xiàn)\t239
7．3．1 主體內(nèi)容的布局分析和實現(xiàn)\t239
7．3．2 上部內(nèi)容區(qū)的實現(xiàn)\t240
7．3．3 左側(cè)主要內(nèi)容區(qū)的實現(xiàn)\t240
7．3．4 右側(cè)主要內(nèi)容區(qū)的實現(xiàn)\t242
7．4 任務4：底部頁腳版權(quán)的實現(xiàn)\t243
7．5 知識進階\t244
7．6 小結(jié)\t247
7．7 實訓任務\t248
實訓任務1：DIV+CSS布局班級網(wǎng)站首頁 \t248
實訓任務2：使用DIV+CSS布局左中右頁面結(jié)構(gòu)\t252
實訓任務3：使用HTML5中新增語義化標記進行頁面布局\t254
模塊8 企業(yè)級項目綜合應用\t258
8．1 任務1：制作企業(yè)產(chǎn)品展示頁面\t258
8．1．1 任務描述\t258
8．1．2 定義頁面結(jié)構(gòu)\t259
8．1．3 添加頁面樣式\t259
8．2 任務2：制作新聞詳情頁面\t261
8．2．1 任務描述\t261
8．2．2 整體布局分析的實現(xiàn)\t262
8．2．3 頭部的實現(xiàn)\t263
8．2．4 內(nèi)容部分的實現(xiàn)\t265
8．2．5 版權(quán)信息部分的實現(xiàn)\t270
8．3 任務3：制作用戶登錄頁面\t271
8．3．1 任務描述\t271
8．3．2 定義頁面結(jié)構(gòu)\t271
8．3．3 登錄表單部分的實現(xiàn)\t272
8．3．4 其他部分的實現(xiàn)\t274
8．4 知識進階\t275
8．5 小結(jié)\t279
8．6 實訓任務\t279
實訓任務1：CSS精靈技術(shù)制作導航條\t279
實訓任務2：CSS制作圖文版塊中的三角形\t282
參考文獻\t286