網(wǎng)站設(shè)計與網(wǎng)頁制作立體化項目教程(第4版)
定 價:59.8 元
- 作者:何福男
- 出版時間:2022/7/1
- ISBN:9787121438905
- 出 版 社:電子工業(yè)出版社
- 中圖法分類:TP393.092.2
- 頁碼:328
- 紙張:
- 版次:01
- 開本:16開
本書通過蘇州英博特智能科技有限公司官網(wǎng)的設(shè)計與制作,為讀者全面展示了網(wǎng)站設(shè)計與網(wǎng)頁制作的基本知識,讓沒有網(wǎng)頁制作基礎(chǔ)的讀者可以輕松地制作出自己心目中的網(wǎng)站。本書第一篇基本技能篇通過制作城市電子名片網(wǎng)頁和愛國科學(xué)家錢學(xué)森先生的個人介紹頁面,使讀者快速掌握網(wǎng)頁制作的基礎(chǔ)知識,包括網(wǎng)頁制作技術(shù)、常用開發(fā)工具、網(wǎng)站建設(shè)流程、HTML和CSS的基礎(chǔ)知識。第二篇項目實戰(zhàn)篇按照網(wǎng)站開發(fā)的一般流程,制作蘇州英博特智能科技有限公司官網(wǎng),包括網(wǎng)站前期策劃、網(wǎng)站開發(fā)準備、首頁頁面制作、二三級頁面制作、網(wǎng)站測試與發(fā)布、宣傳推廣與維護及項目總結(jié)七個任務(wù),使讀者在鞏固網(wǎng)頁制作技能的同時,進一步掌握HTML5和CSS3的新特性,實現(xiàn)更復(fù)雜的頁面樣式變化及一些交互效果,能夠制作具有更好的交互性和用戶體驗的網(wǎng)頁。第三篇崗位能力強化篇結(jié)合1+X職業(yè)技能證書Web前端開發(fā)(初級)的考核要求,以任務(wù)為驅(qū)動,針對HTML、CSS等重要知識單元,結(jié)合實際案例和應(yīng)用環(huán)境進行分析和設(shè)計,使讀者能夠真正掌握這些知識單元在實際場景中的應(yīng)用。本書配套資源包括書中所有任務(wù)案例素材及效果、電子課件,可登錄華信教育資源網(wǎng)注冊后免費下載。本書同時配有97段微課視頻、電子活頁、能力拓展和在線測試,可在書中二維碼處掃碼學(xué)習。本書是專門為高等職業(yè)教育計算機類、藝術(shù)設(shè)計類和電子商務(wù)類等專業(yè)編寫的網(wǎng)站設(shè)計與網(wǎng)頁制作課程的專業(yè)教材,也可作為考取1+X職業(yè)技能證書Web前端開發(fā)(初級)的培訓(xùn)材料。
何福男,1988.8 蘇州工業(yè)職業(yè)技術(shù)學(xué)院 工作至今,先后擔任過基礎(chǔ)教研室主任、軟件教研室主任、計算機應(yīng)用專業(yè)帶頭人,系教學(xué)副主任、軟件與服務(wù)外包學(xué)院副院長、教務(wù)處處長等工作。作為課程負責人、主講老師,完成了《C#程序設(shè)計》《網(wǎng)站設(shè)計與網(wǎng)頁制作》兩門院級精品課程和“十三五”國規(guī)教材的建設(shè)工作。
第一篇 基本技能篇
任務(wù)1 網(wǎng)頁體驗—城市電子名片頁面制作 1
1.1 任務(wù)概述 2
1.2 任務(wù)思考 3
1.3 任務(wù)實施 3
1.3.1 新建網(wǎng)頁文件,添加內(nèi)容 3
1.3.2 鏈接CSS樣式表 3
1.3.3 添加JavaScript特效 4
1.4 相關(guān)知識 4
1.4.1 網(wǎng)頁相關(guān)概念 4
1.4.2 網(wǎng)頁制作技術(shù) 6
1.4.3 常用開發(fā)工具 6
1.4.4 網(wǎng)站建設(shè)流程 8
任務(wù)2 頁面制作—人物介紹頁面內(nèi)容呈現(xiàn) 16
2.1 任務(wù)概述 17
2.2 任務(wù)思考 17
2.3 任務(wù)實施 17
2.3.1 新建網(wǎng)頁文件 17
2.3.2 人物介紹文本格式化 18
2.3.3 添加人物圖片 19
2.4 相關(guān)知識 20
2.4.1 HTML基礎(chǔ) 20
2.4.2 HTML標題元素 22
2.4.3 HTML注釋元素 23
2.4.4 HTML段落元素 23
2.4.5 HTML格式化元素 25
2.4.6 HTML圖片元素 29
任務(wù)3 樣式設(shè)計—人物介紹頁面美化 32
3.1 任務(wù)概述 33
3.2 任務(wù)思考 33
3.3 任務(wù)實施 33
3.3.1 鏈接外部樣式表 33
3.3.2 設(shè)計樣式 34
3.4 相關(guān)知識 35
3.4.1 CSS簡介 35
3.4.2 CSS語法 36
3.4.3 CSS選擇器 37
3.4.4 CSS字體屬性 39
3.4.5 CSS文本屬性 42
3.4.6 CSS背景屬性 44
任務(wù)4 圖文混排—人物介紹頁面布局 50
4.1 任務(wù)概述 51
4.2 任務(wù)思考 51
4.3 任務(wù)實施 51
4.3.1 添加HTML元素 51
4.3.2 圖文混排布局 52
4.4 相關(guān)知識 53
4.4.1 元素分類 53
4.4.2 CSS盒模型 54
4.4.3 CSS布局模型 62
4.4.4 清除浮動 71
本篇小結(jié) 72
第二篇 項目實戰(zhàn)篇
任務(wù)1 “英博特智能科技”企業(yè)網(wǎng)站前期策劃 73
1.1 項目立項 74
1.1.1 分析“英博特智能科技”企業(yè)網(wǎng)站需求說明書 75
1.1.2 組建項目團隊 76
1.2 撰寫網(wǎng)站策劃書 76
1.2.1 分析確定網(wǎng)站邏輯結(jié)構(gòu)圖 78
1.2.2 設(shè)計網(wǎng)站界面原型 78
1.2.3 撰寫企業(yè)網(wǎng)站策劃書 82
任務(wù)2 “英博特智能科技”企業(yè)網(wǎng)站開發(fā)準備 85
2.1 設(shè)計網(wǎng)站logo 85
2.2 加工圖像素材 90
2.3 設(shè)計網(wǎng)站首頁效果圖 93
2.3.1 設(shè)置頁面大小 95
2.3.2 規(guī)劃首頁內(nèi)容,設(shè)計版式 96
2.3.3 確定配色方案 98
2.3.4 制作網(wǎng)站首頁效果圖 99
2.4 裁切網(wǎng)站首頁效果圖 100
2.4.1 創(chuàng)建首頁切片 102
2.4.2 編輯首頁切片 104
2.4.3 命名首頁切片 105
2.4.4 導(dǎo)出首頁切片 105
任務(wù)3 “英博特智能科技”企業(yè)網(wǎng)站首頁頁面制作 108
3.1 首頁整體布局 108
3.1.1 新建項目 110
3.1.2 搭建頁面主體結(jié)構(gòu) 110
3.1.3 編寫主體結(jié)構(gòu)樣式 111
3.2 頁頭制作 113
3.2.1 頁頭二列布局 114
3.2.2 logo制作 115
3.2.3 橫向?qū)Ш街谱?116
3.2.4 下拉菜單制作 116
3.3 橫幅廣告制作 128
3.3.1 插入圖像 130
3.3.2 樣式設(shè)計 130
3.3.3 圖片放大特效 131
3.4 公司優(yōu)勢制作 134
3.4.1 搭建公司優(yōu)勢模塊結(jié)構(gòu) 135
3.4.2 實現(xiàn)三列布局 135
3.4.3 設(shè)置圖像和文本樣式 136
3.5 關(guān)于我們制作 137
3.5.1 搭建關(guān)于我們模塊結(jié)構(gòu) 138
3.5.2 實現(xiàn)二列布局 139
3.5.3 設(shè)置文本內(nèi)容樣式 139
3.5.4 輪播圖制作 140
3.6 服務(wù)范圍制作 144
3.6.1 搭建服務(wù)范圍模塊結(jié)構(gòu) 145
3.6.2 實現(xiàn)列表項內(nèi)部的兩列布局 146
3.6.3 實現(xiàn)服務(wù)范圍彈性布局 147
3.6.4 設(shè)置文本內(nèi)容樣式 147
3.7 產(chǎn)品展示制作 148
3.7.1 搭建產(chǎn)品展示模塊結(jié)構(gòu) 150
3.7.2 實現(xiàn)三列布局 151
3.7.3 設(shè)置文本內(nèi)容樣式 151
3.7.4 設(shè)置CSS3過渡效果 151
3.8 案例展示制作 155
3.8.1 搭建案例展示模塊結(jié)構(gòu) 156
3.8.2 實現(xiàn)三列布局 157
3.8.3 設(shè)置文本內(nèi)容樣式 157
3.8.4 設(shè)置CSS3轉(zhuǎn)換效果 158
3.9 新聞中心制作 162
3.9.1 搭建新聞中心模塊結(jié)構(gòu) 164
3.9.2 圖片特效制作 165
3.9.3 新聞列表制作 166
3.10 合作伙伴制作 168
3.10.1 搭建合作伙伴模塊結(jié)構(gòu) 169
3.10.2 設(shè)置圖片內(nèi)容樣式 170
3.11 頁尾制作 172
3.11.1 搭建頁尾模塊結(jié)構(gòu) 173
3.11.2 分享內(nèi)容制作 174
3.11.3 聯(lián)系我們制作 175
3.11.4 版權(quán)內(nèi)容制作 176
3.12 客戶服務(wù)制作 177
3.12.1 搭建客戶服務(wù)模塊結(jié)構(gòu) 178
3.12.2 圖片內(nèi)容制作 179
3.12.3 彈出菜單制作 179
任務(wù)4 “英博特智能科技”企業(yè)網(wǎng)站二三級頁面制作 183
4.1 產(chǎn)品案例頁面制作 183
4.1.1 搭建頁面結(jié)構(gòu) 185
4.1.2 豎向?qū)Ш街谱?188
4.1.3 產(chǎn)品案例圖文混排制作 190
4.2 產(chǎn)品詳細信息頁面制作 202
4.2.1 搭建頁面結(jié)構(gòu) 205
4.2.2 圖文內(nèi)容設(shè)計 205
4.2.3 數(shù)據(jù)表格設(shè)計 206
4.2.4 編寫相關(guān)樣式 208
4.3 應(yīng)用場景詳細信息頁面制作 216
4.3.1 搭建頁面結(jié)構(gòu) 217
4.3.2 插入音視頻 218
4.4 留言頁面制作 221
4.4.1 搭建頁面結(jié)構(gòu) 223
4.4.2 插入表單元素 223
4.4.3 編寫表單樣式 224
任務(wù)5 “英博特智能科技”企業(yè)網(wǎng)站測試與發(fā)布 233
5.1 網(wǎng)站測試 233
5.1.1 整體界面測試 234
5.1.2 超鏈接測試 234
5.1.3 圖形測試 234
5.1.4 內(nèi)容測試 234
5.1.5 瀏覽器兼容性測試 235
5.1.6 打印機測試 236
5.1.7 顯示代碼合法性檢查 236
5.2 網(wǎng)站發(fā)布 252
5.2.1 安裝本地服務(wù)器 253
5.2.2 在IIS中發(fā)布和訪問網(wǎng)站 255
5.2.3 申請域名 257
5.2.4 申請?zhí)摂M主機 261
5.2.5 使用FTP管理文件 262
任務(wù)6 “英博特智能科技”企業(yè)網(wǎng)站宣傳推廣與維護 267
6.1 網(wǎng)站宣傳推廣 267
6.1.1 搜索引擎推廣 269
6.1.2 電子郵件推廣 270
6.1.3 網(wǎng)絡(luò)廣告推廣 271
6.1.4 分類信息推廣 271
6.1.5 微信推廣 272
6.1.6 搜索引擎優(yōu)化工具 272
6.2 網(wǎng)站維護 278
6.2.1 網(wǎng)站日常維護 279
6.2.2 網(wǎng)站內(nèi)容維護 280
6.2.3 網(wǎng)站安全維護 280
6.2.4 網(wǎng)站基礎(chǔ)維護 280
6.2.5 網(wǎng)站服務(wù)與回饋 280
任務(wù)7 “英博特智能科技”企業(yè)網(wǎng)站項目總結(jié) 283
7.1 文檔的書寫與整理 283
7.1.1 撰寫網(wǎng)站說明書 284
7.1.2 整理文檔 285
7.2 網(wǎng)站展示、交流與評價 285
7.2.1 討論交流 286
7.2.2 小組自評、互評 286
本篇小結(jié) 287
第三篇 崗位能力強化篇
任務(wù)1 HTML制作靜態(tài)網(wǎng)頁 288
3.1.1 任務(wù)概述 289
3.1.2 任務(wù)分析 290
3.1.3 任務(wù)實施 291
任務(wù)2 HTML實現(xiàn)靜態(tài)頁面內(nèi)容的呈現(xiàn) 292
3.2.1 任務(wù)概述 293
3.2.2 任務(wù)分析 294
3.2.3 任務(wù)實施 294
任務(wù)3 CSS實現(xiàn)網(wǎng)頁整體布局 295
3.3.1 任務(wù)概述 296
3.3.2 任務(wù)分析 296
3.3.3 任務(wù)實施 296
任務(wù)4 CSS設(shè)計頁面樣式 297
3.4.1 任務(wù)概述 298
3.4.2 任務(wù)分析 298
3.4.3 任務(wù)實施 299
任務(wù)5 CSS3實現(xiàn)頁面動態(tài)交互效果 300
3.5.1 任務(wù)概述 301
3.5.2 任務(wù)分析 301
3.5.3 任務(wù)實施 301
任務(wù)6 HTML5制作移動端靜態(tài)網(wǎng)頁 302
3.6.1 任務(wù)概述 302
3.6.2 任務(wù)分析 303
3.6.3 任務(wù)實施 304
任務(wù)7 HTML5優(yōu)化移動端靜態(tài)網(wǎng)頁結(jié)構(gòu) 305
3.7.1 任務(wù)概述 306
3.7.2 任務(wù)分析 306
3.7.3 任務(wù)實施 307
任務(wù)8 CSS3新特性制作移動端網(wǎng)頁加載動畫 308
3.8.1 任務(wù)概述 309
3.8.2 任務(wù)分析 309
3.8.3 任務(wù)實施 310
任務(wù)9 CSS3新特性美化移動端頁面樣式 311
3.9.1 任務(wù)概述 311
3.9.2 任務(wù)分析 312
3.9.3 任務(wù)實施 313
任務(wù)10 CSS3自定義資源美化移動端頁面元素 314
3.10.1 任務(wù)概述 315
3.10.2 任務(wù)分析 315
3.10.3 任務(wù)實施 316
本篇小結(jié) 316