網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作立體化項(xiàng)目教程（第4版）

第一篇 基本技能篇
任務(wù)1 網(wǎng)頁(yè)體驗(yàn)―城市電子名片頁(yè)面制作\t1
1．1 任務(wù)概述\t2
1．2 任務(wù)思考\t3
1．3 任務(wù)實(shí)施\t3
1．3．1 新建網(wǎng)頁(yè)文件，添加內(nèi)容\t3
1．3．2 鏈接CSS樣式表\t3
1．3．3 添加JavaScript特效\t4
1．4 相關(guān)知識(shí)\t4
1．4．1 網(wǎng)頁(yè)相關(guān)概念\t4
1．4．2 網(wǎng)頁(yè)制作技術(shù)\t6
1．4．3 常用開發(fā)工具\(yùn)t6
1．4．4 網(wǎng)站建設(shè)流程\t8
任務(wù)2 頁(yè)面制作―人物介紹頁(yè)面內(nèi)容呈現(xiàn)\t16
2．1 任務(wù)概述\t17
2．2 任務(wù)思考\t17
2．3 任務(wù)實(shí)施\t17
2．3．1 新建網(wǎng)頁(yè)文件\t17
2．3．2 人物介紹文本格式化\t18
2．3．3 添加人物圖片\t19
2．4 相關(guān)知識(shí)\t20
2．4．1 HTML基礎(chǔ)\t20
2．4．2 HTML標(biāo)題元素\t22
2．4．3 HTML注釋元素\t23
2．4．4 HTML段落元素\t23
2．4．5 HTML格式化元素\t25
2．4．6 HTML圖片元素\t29
任務(wù)3 樣式設(shè)計(jì)―人物介紹頁(yè)面美化\t32
3．1 任務(wù)概述\t33
3．2 任務(wù)思考\t33
3．3 任務(wù)實(shí)施\t33
3．3．1 鏈接外部樣式表\t33
3．3．2 設(shè)計(jì)樣式\t34
3．4 相關(guān)知識(shí)\t35
3．4．1 CSS簡(jiǎn)介\t35
3．4．2 CSS語(yǔ)法\t36
3．4．3 CSS選擇器\t37
3．4．4 CSS字體屬性\t39
3．4．5 CSS文本屬性\t42
3．4．6 CSS背景屬性\t44
任務(wù)4 圖文混排―人物介紹頁(yè)面布局\t50
4．1 任務(wù)概述\t51
4．2 任務(wù)思考\t51
4．3 任務(wù)實(shí)施\t51
4．3．1 添加HTML元素\t51
4．3．2 圖文混排布局\t52
4．4 相關(guān)知識(shí)\t53
4．4．1 元素分類\t53
4．4．2 CSS盒模型\t54
4．4．3 CSS布局模型\t62
4．4．4 清除浮動(dòng)\t71
本篇小結(jié)\t72
第二篇 項(xiàng)目實(shí)戰(zhàn)篇
任務(wù)1 “英博特智能科技”企業(yè)網(wǎng)站前期策劃\t73
1．1 項(xiàng)目立項(xiàng)\t74
1．1．1 分析“英博特智能科技”企業(yè)網(wǎng)站需求說(shuō)明書\t75
1．1．2 組建項(xiàng)目團(tuán)隊(duì)\t76
1．2 撰寫網(wǎng)站策劃書\t76
1．2．1 分析確定網(wǎng)站邏輯結(jié)構(gòu)圖\t78
1．2．2 設(shè)計(jì)網(wǎng)站界面原型\t78
1．2．3 撰寫企業(yè)網(wǎng)站策劃書\t82
任務(wù)2 “英博特智能科技”企業(yè)網(wǎng)站開發(fā)準(zhǔn)備\t85
2．1 設(shè)計(jì)網(wǎng)站logo\t85
2．2 加工圖像素材\t90
2．3 設(shè)計(jì)網(wǎng)站首頁(yè)效果圖\t93
2．3．1 設(shè)置頁(yè)面大小\t95
2．3．2 規(guī)劃首頁(yè)內(nèi)容，設(shè)計(jì)版式\t96
2．3．3 確定配色方案\t98
2．3．4 制作網(wǎng)站首頁(yè)效果圖\t99
2．4 裁切網(wǎng)站首頁(yè)效果圖\t100
2．4．1 創(chuàng)建首頁(yè)切片\t102
2．4．2 編輯首頁(yè)切片\t104
2．4．3 命名首頁(yè)切片\t105
2．4．4 導(dǎo)出首頁(yè)切片\t105
任務(wù)3 “英博特智能科技”企業(yè)網(wǎng)站首頁(yè)頁(yè)面制作\t108
3．1 首頁(yè)整體布局\t108
3．1．1 新建項(xiàng)目\t110
3．1．2 搭建頁(yè)面主體結(jié)構(gòu)\t110
3．1．3 編寫主體結(jié)構(gòu)樣式\t111
3．2 頁(yè)頭制作\t113
3．2．1 頁(yè)頭二列布局\t114
3．2．2 logo制作\t115
3．2．3 橫向?qū)Ш街谱鱘t116
3．2．4 下拉菜單制作\t116
3．3 橫幅廣告制作\t128
3．3．1 插入圖像\t130
3．3．2 樣式設(shè)計(jì)\t130
3．3．3 圖片放大特效\t131
3．4 公司優(yōu)勢(shì)制作\t134
3．4．1 搭建公司優(yōu)勢(shì)模塊結(jié)構(gòu)\t135
3．4．2 實(shí)現(xiàn)三列布局\t135
3．4．3 設(shè)置圖像和文本樣式\t136
3．5 關(guān)于我們制作\t137
3．5．1 搭建關(guān)于我們模塊結(jié)構(gòu)\t138
3．5．2 實(shí)現(xiàn)二列布局\t139
3．5．3 設(shè)置文本內(nèi)容樣式\t139
3．5．4 輪播圖制作\t140
3．6 服務(wù)范圍制作\t144
3．6．1 搭建服務(wù)范圍模塊結(jié)構(gòu)\t145
3．6．2 實(shí)現(xiàn)列表項(xiàng)內(nèi)部的兩列布局\t146
3．6．3 實(shí)現(xiàn)服務(wù)范圍彈性布局\t147
3．6．4 設(shè)置文本內(nèi)容樣式\t147
3．7 產(chǎn)品展示制作\t148
3．7．1 搭建產(chǎn)品展示模塊結(jié)構(gòu)\t150
3．7．2 實(shí)現(xiàn)三列布局\t151
3．7．3 設(shè)置文本內(nèi)容樣式\t151
3．7．4 設(shè)置CSS3過(guò)渡效果\t151
3．8 案例展示制作\t155
3．8．1 搭建案例展示模塊結(jié)構(gòu)\t156
3．8．2 實(shí)現(xiàn)三列布局\t157
3．8．3 設(shè)置文本內(nèi)容樣式\t157
3．8．4 設(shè)置CSS3轉(zhuǎn)換效果\t158
3．9 新聞中心制作\t162
3．9．1 搭建新聞中心模塊結(jié)構(gòu)\t164
3．9．2 圖片特效制作\t165
3．9．3 新聞列表制作\t166
3．10 合作伙伴制作\t168
3．10．1 搭建合作伙伴模塊結(jié)構(gòu)\t169
3．10．2 設(shè)置圖片內(nèi)容樣式\t170
3．11 頁(yè)尾制作\t172
3．11．1 搭建頁(yè)尾模塊結(jié)構(gòu)\t173
3．11．2 分享內(nèi)容制作\t174
3．11．3 聯(lián)系我們制作\t175
3．11．4 版權(quán)內(nèi)容制作\t176
3．12 客戶服務(wù)制作\t177
3．12．1 搭建客戶服務(wù)模塊結(jié)構(gòu)\t178
3．12．2 圖片內(nèi)容制作\t179
3．12．3 彈出菜單制作\t179
任務(wù)4 “英博特智能科技”企業(yè)網(wǎng)站二三級(jí)頁(yè)面制作\t183
4．1 產(chǎn)品案例頁(yè)面制作\t183
4．1．1 搭建頁(yè)面結(jié)構(gòu)\t185
4．1．2 豎向?qū)Ш街谱鱘t188
4．1．3 產(chǎn)品案例圖文混排制作\t190
4．2 產(chǎn)品詳細(xì)信息頁(yè)面制作\t202
4．2．1 搭建頁(yè)面結(jié)構(gòu)\t205
4．2．2 圖文內(nèi)容設(shè)計(jì)\t205
4．2．3 數(shù)據(jù)表格設(shè)計(jì)\t206
4．2．4 編寫相關(guān)樣式\t208
4．3 應(yīng)用場(chǎng)景詳細(xì)信息頁(yè)面制作\t216
4．3．1 搭建頁(yè)面結(jié)構(gòu)\t217
4．3．2 插入音視頻\t218
4．4 留言頁(yè)面制作\t221
4．4．1 搭建頁(yè)面結(jié)構(gòu)\t223
4．4．2 插入表單元素\t223
4．4．3 編寫表單樣式\t224
任務(wù)5 “英博特智能科技”企業(yè)網(wǎng)站測(cè)試與發(fā)布\t233
5．1 網(wǎng)站測(cè)試\t233
5．1．1 整體界面測(cè)試\t234
5．1．2 超鏈接測(cè)試\t234
5．1．3 圖形測(cè)試\t234
5．1．4 內(nèi)容測(cè)試\t234
5．1．5 瀏覽器兼容性測(cè)試\t235
5．1．6 打印機(jī)測(cè)試\t236
5．1．7 顯示代碼合法性檢查\t236
5．2 網(wǎng)站發(fā)布\t252
5．2．1 安裝本地服務(wù)器\t253
5．2．2 在IIS中發(fā)布和訪問(wèn)網(wǎng)站\t255
5．2．3 申請(qǐng)域名\t257
5．2．4 申請(qǐng)?zhí)摂M主機(jī)\t261
5．2．5 使用FTP管理文件\t262
任務(wù)6 “英博特智能科技”企業(yè)網(wǎng)站宣傳推廣與維護(hù)\t267
6．1 網(wǎng)站宣傳推廣\t267
6．1．1 搜索引擎推廣\t269
6．1．2 電子郵件推廣\t270
6．1．3 網(wǎng)絡(luò)廣告推廣\t271
6．1．4 分類信息推廣\t271
6．1．5 微信推廣\t272
6．1．6 搜索引擎優(yōu)化工具\(yùn)t272
6．2 網(wǎng)站維護(hù)\t278
6．2．1 網(wǎng)站日常維護(hù)\t279
6．2．2 網(wǎng)站內(nèi)容維護(hù)\t280
6．2．3 網(wǎng)站安全維護(hù)\t280
6．2．4 網(wǎng)站基礎(chǔ)維護(hù)\t280
6．2．5 網(wǎng)站服務(wù)與回饋\t280
任務(wù)7 “英博特智能科技”企業(yè)網(wǎng)站項(xiàng)目總結(jié)\t283
7．1 文檔的書寫與整理\t283
7．1．1 撰寫網(wǎng)站說(shuō)明書\t284
7．1．2 整理文檔\t285
7．2 網(wǎng)站展示、交流與評(píng)價(jià)\t285
7．2．1 討論交流\t286
7．2．2 小組自評(píng)、互評(píng)\t286
本篇小結(jié)\t287
第三篇 崗位能力強(qiáng)化篇
任務(wù)1 HTML制作靜態(tài)網(wǎng)頁(yè)\t288
3．1．1 任務(wù)概述\t289
3．1．2 任務(wù)分析\t290
3．1．3 任務(wù)實(shí)施\t291
任務(wù)2 HTML實(shí)現(xiàn)靜態(tài)頁(yè)面內(nèi)容的呈現(xiàn)\t292
3．2．1 任務(wù)概述\t293
3．2．2 任務(wù)分析\t294
3．2．3 任務(wù)實(shí)施\t294
任務(wù)3 CSS實(shí)現(xiàn)網(wǎng)頁(yè)整體布局\t295
3．3．1 任務(wù)概述\t296
3．3．2 任務(wù)分析\t296
3．3．3 任務(wù)實(shí)施\t296
任務(wù)4 CSS設(shè)計(jì)頁(yè)面樣式\t297
3．4．1 任務(wù)概述\t298
3．4．2 任務(wù)分析\t298
3．4．3 任務(wù)實(shí)施\t299
任務(wù)5 CSS3實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)交互效果\t300
3．5．1 任務(wù)概述\t301
3．5．2 任務(wù)分析\t301
3．5．3 任務(wù)實(shí)施\t301
任務(wù)6 HTML5制作移動(dòng)端靜態(tài)網(wǎng)頁(yè)\t302
3．6．1 任務(wù)概述\t302
3．6．2 任務(wù)分析\t303
3．6．3 任務(wù)實(shí)施\t304
任務(wù)7 HTML5優(yōu)化移動(dòng)端靜態(tài)網(wǎng)頁(yè)結(jié)構(gòu)\t305
3．7．1 任務(wù)概述\t306
3．7．2 任務(wù)分析\t306
3．7．3 任務(wù)實(shí)施\t307
任務(wù)8 CSS3新特性制作移動(dòng)端網(wǎng)頁(yè)加載動(dòng)畫\t308
3．8．1 任務(wù)概述\t309
3．8．2 任務(wù)分析\t309
3．8．3 任務(wù)實(shí)施\t310
任務(wù)9 CSS3新特性美化移動(dòng)端頁(yè)面樣式\t311
3．9．1 任務(wù)概述\t311
3．9．2 任務(wù)分析\t312
3．9．3 任務(wù)實(shí)施\t313
任務(wù)10 CSS3自定義資源美化移動(dòng)端頁(yè)面元素\t314
3．10．1 任務(wù)概述\t315
3．10．2 任務(wù)分析\t315
3．10．3 任務(wù)實(shí)施\t316
本篇小結(jié)\t316