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

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