網(wǎng)站設計與網(wǎng)頁制作立體化項目教程（第4版）

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