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