項(xiàng)目 1 網(wǎng)頁(yè)制作基礎(chǔ)知識(shí) 1
1.1 項(xiàng)目描述及分析 1
1.2 任務(wù) 1 優(yōu)秀網(wǎng)站賞析 2
1.3 任務(wù) 2 網(wǎng)頁(yè)基礎(chǔ)知識(shí) 4
1.3.1 網(wǎng)頁(yè)和網(wǎng)站的基本
概念 4
1.3.2 網(wǎng)頁(yè)的組成元素 5
1.3.3 網(wǎng)頁(yè)相關(guān)名詞 7
1.3.4 Web 標(biāo)準(zhǔn) 10
1.3.5 響應(yīng)式 Web 設(shè)計(jì) 11
1.4 任務(wù) 3 網(wǎng)站建設(shè)的一般流程 12
1.4.1 確定網(wǎng)站主題 12
1.4.2 規(guī)劃網(wǎng)站結(jié)構(gòu) 12
1.4.3 收集資料與素材 14
1.4.4 確定版面布局方式 14
1.4.5 制作網(wǎng)頁(yè) 17
1.4.6 測(cè)試與發(fā)布網(wǎng)站 18
1.4.7 推廣網(wǎng)站 18
1.4.8 網(wǎng)站的后期維護(hù) 18
1.5 網(wǎng)頁(yè)制作入門(mén) 18
1.5.1 HTML5 簡(jiǎn)介 18
1.5.2 CSS3 簡(jiǎn)介 19
1.5.3 JavaScript 簡(jiǎn)介 19
1.5.4 常見(jiàn)瀏覽器 19
1.6 網(wǎng)頁(yè)制作常用開(kāi)發(fā)工具簡(jiǎn)介 21
1.6.1 網(wǎng)頁(yè)制作與編輯工具 21
1.6.2 頁(yè)面設(shè)計(jì)與美化工具 22
1.7 知識(shí)鏈接 22
1.7.1 網(wǎng)頁(yè)制作的基本原則 22
1.7.2 認(rèn)識(shí)圖像 23
1.7.3 常見(jiàn)的建站方式 25
實(shí)訓(xùn) 26
項(xiàng)目 2 制作簡(jiǎn)單網(wǎng)頁(yè) 27
2.1 項(xiàng)目描述及分析 27
2.2 任務(wù) 1 進(jìn)行網(wǎng)站功能設(shè)計(jì) 29
2.3 任務(wù) 2 設(shè)計(jì)網(wǎng)站首頁(yè)原型 29
2.3.1 認(rèn)識(shí) Photoshop 29
2.3.2 制作首頁(yè)原型 32
2.3.3 首頁(yè)原型的切片與
導(dǎo)出 33
2.4 任務(wù) 3 網(wǎng)頁(yè)的制作與上傳 35
2.4.1 認(rèn)識(shí) HBuilder 35
2.4.2 HBuilder 入門(mén) 37
2.4.3 域名和空間的申請(qǐng) 39
2.4.4 網(wǎng)站文件的上傳 41
2.5 知識(shí)鏈接 42
2.5.1 網(wǎng)頁(yè)中的色彩 42
2.5.2 網(wǎng)頁(yè)基本元素的標(biāo)準(zhǔn)和
使用技巧 44
實(shí)訓(xùn) 45
項(xiàng)目 3 太陽(yáng)島旅游網(wǎng)站制作 47
3.1 項(xiàng)目描述及分析 47
3.2 任務(wù) 1 添加文本 49
3.3 任務(wù) 2 認(rèn)識(shí) HTML 51
3.3.1 HTML 文檔基本格式 51
3.3.2 認(rèn)識(shí) HTML 標(biāo)簽 52
3.3.3 HTML 常用標(biāo)簽 54
3.4 任務(wù) 3 編輯文本 57
3.4.1 全國(guó)免費(fèi)電話文本
設(shè)置 57
3.4.2 動(dòng)態(tài)行文本編輯 58
3.5 任務(wù) 4 認(rèn)識(shí) CSS . 59
3.5.1 認(rèn)識(shí) CSS 樣式表 60
3.5.2 創(chuàng)建并使用 CSS 樣式
優(yōu)化網(wǎng)頁(yè)源碼 63
3.6 任務(wù) 5 設(shè)計(jì)網(wǎng)站子頁(yè) 66
3.7 知識(shí)鏈接CSS 控制文本
樣式 68
3.8 拓展學(xué)習(xí)旅游類(lèi)網(wǎng)站的
設(shè)計(jì)要點(diǎn) 70
3.8.1 旅游類(lèi)網(wǎng)站的類(lèi)型 70
3.8.2 旅游類(lèi)網(wǎng)站的設(shè)計(jì)
要點(diǎn) 74
實(shí)訓(xùn) 75
項(xiàng)目 4 盟院合作專(zhuān)題網(wǎng)站制作 76
4.1 項(xiàng)目描述及分析 76
4.2 任務(wù) 1 認(rèn)識(shí)盒子模型 77
4.3 盒子模型相關(guān)屬性 78
4.3.1 盒子邊框?qū)傩?78
4.3.2 內(nèi)邊距屬性 81
4.3.3 外邊距屬性 82
4.3.4 背景屬性 84
4.3.5 盒子的寬與高 86
4.4 浮動(dòng)與定位 87
4.4.1 元素的浮動(dòng) 87
4.4.2 元素的定位 95
4.5 項(xiàng) 目 制 作 99
4.5.1 頁(yè)面布局及定義基礎(chǔ)
樣式 99
4.5.2 頁(yè)眉制作 101
4.5.3 主體模塊制作 104
4.5.4 頁(yè)腳制作 109
4.6 知識(shí)鏈接補(bǔ)充 CSS
選擇器 111
4.7 拓展學(xué)習(xí)專(zhuān)題網(wǎng)站制
作的設(shè)計(jì)要點(diǎn) 113
實(shí)訓(xùn) 114
項(xiàng)目 5 艾上樂(lè)品服裝網(wǎng)站
制作 116
5.1 項(xiàng)目描述及分析 116
5.2 任務(wù) 1 列表標(biāo)記及嵌套 117
5.2.1 列表標(biāo)記 117
5.2.2 列表的嵌套 121
5.3 任務(wù) 2 CSS 控制列表樣式 122
5.4 任務(wù) 3 認(rèn)識(shí)表格標(biāo)記 124
5.4.1 表格標(biāo)記 124
5.4.2 CSS 控制表格樣式 126
5.5 項(xiàng)目制作 129
5.5.1 頁(yè)面布局及定義基礎(chǔ)
樣式 129
5.5.2 制作頭部導(dǎo)航
模塊 130
5.5.3 制作 banner 模塊和
精品展示模塊 131
5.5.4 制作版權(quán)信息
模塊 135
5.6 知識(shí)鏈接瀏覽器
兼容性 135
5.7 拓展學(xué)習(xí)流行時(shí)尚類(lèi)
網(wǎng)站的設(shè)計(jì)要點(diǎn) 137
實(shí)訓(xùn) 139
項(xiàng)目 6 影音網(wǎng)站制作 141
6.1 任務(wù) 1 了解 HTML5 多
媒體的特性 141
6.2 任務(wù) 2 了解 HTML5 常
用的多媒體格式 142
6.2.1 音頻格式 142
6.2.2 視頻格式 142
6.3 任務(wù) 3 HTML5 多媒體的
實(shí)現(xiàn) 143
6.3.1 audio 標(biāo)簽 143
6.3.2 video 標(biāo)簽 144
6.3.3 source 標(biāo)簽 144
6.4 任務(wù) 4 HTML5 表單的
應(yīng)用 146
6.4.1 認(rèn)識(shí)表單 146
6.4.2 HTML5 新增的表單
屬性 147
6.4.3 HTML5標(biāo)簽 147
6.5 任務(wù) 5 影音網(wǎng)站項(xiàng)目
描述及分析 148
6.6 任務(wù) 6 添加多媒體文件 150
6.6.1 添加音頻文件 150
6.6.2 添加視頻文件 153
6.6.3 添加留言模塊 154
6.7 知識(shí)鏈接音頻/視頻
DOM 參考手冊(cè) 156
實(shí)訓(xùn) 158
項(xiàng)目 7 我要回家網(wǎng)頁(yè)面制作 159
7.1 項(xiàng)目描述及分析 159
7.2 任務(wù) 1 JavaScript 概述 161
7.2.1 JavaScript 簡(jiǎn)介 161
7.2.2 JavaScript 引入方式 163
7.2.3 JavaScript 基本語(yǔ)法 165
7.2.4 一個(gè)簡(jiǎn)單的
JavaScript 程序 165
7.3 任務(wù) 2 JavaScript 語(yǔ)言
基礎(chǔ) 166
7.3.1 關(guān)鍵字和標(biāo)識(shí)符 166
7.3.2 變量和數(shù)據(jù)類(lèi)型 167
7.3.3 運(yùn)算符和表達(dá)式 171
7.4 任務(wù) 3 程序流程控制 178
7.4.1 條件語(yǔ)句 178
7.4.2 循環(huán)語(yǔ)句 185
7.4.3 跳轉(zhuǎn)語(yǔ)句 189
7.5 任務(wù) 4 函數(shù) 191
7.5.1 初識(shí)函數(shù) 191
7.5.2 函數(shù)的調(diào)用 191
7.5.3 函數(shù)中變量的
作用域 193
7.6 任務(wù) 5 結(jié)構(gòu)布局及樣式
定義 194
7.6.1 準(zhǔn)備工作 194
7.6.2 制作思路分析 195
7.6.3 頁(yè)面結(jié)構(gòu)設(shè)計(jì) 196
7.6.4 基礎(chǔ)樣式定義 196
7.6.5 CSS/JS 文件引入 197
7.7 任務(wù) 6 制作頭部
版塊 197
7.7.1 頭部版塊效果
分析 197
7.7.2 頭部版塊制作 198
7.8 任務(wù) 7 制作導(dǎo)航版塊 202
7.8.1 導(dǎo)航版塊效果
分析 202
7.8.2 導(dǎo)航版塊制作 202
7.9 任務(wù) 8 制作 banner 版塊
和時(shí)間版塊 204
7.9.1 banner 版塊和時(shí)
間版塊效果分析 204
7.9.2 banner 版塊和時(shí)
間版塊制作 205
7.10 任務(wù) 9 制作客運(yùn)信息
版塊 207
7.10.1 客運(yùn)信息版塊
效果分析 207
7.10.2 客運(yùn)信息版塊
制作 207
7.11 任務(wù) 10 制作底部
版塊 210
7.11.1 底部版塊效果
分析 210
7.11.2 底部版塊制作 211
7.12 拓展學(xué)習(xí)業(yè)務(wù)類(lèi)網(wǎng)站
的設(shè)計(jì)要點(diǎn) 212
7.12.1 業(yè)務(wù)類(lèi)網(wǎng)站的類(lèi)型 212
7.12.2 業(yè)務(wù)類(lèi)網(wǎng)站的設(shè)計(jì)
要點(diǎn) 213
實(shí)訓(xùn) 214
項(xiàng)目 8 延慶外國(guó)語(yǔ)學(xué)校頁(yè)面
制作 215
8.1 項(xiàng)目描述及分析 215
8.2 任務(wù) 1 認(rèn)識(shí)對(duì)象 217
8.2.1 什么是對(duì)象 217
8.2.2 對(duì)象的屬性和方法 218
8.2.3 創(chuàng)建和刪除對(duì)象 218
8.2.4 內(nèi)置對(duì)象 220
8.3 任務(wù) 2 數(shù)組對(duì)象 225
8.3.1 初識(shí)數(shù)組 225
8.3.2 數(shù)組的常見(jiàn)操作 226
8.3.3 數(shù)組的常用屬性和
方法 231
8.3.4 二維數(shù)組 234
8.4 任務(wù) 3 BOM 和 DOM
對(duì)象 235
8.4.1 BOM 對(duì)象 235
8.4.2 DOM 對(duì)象 242
8.5 任務(wù) 4 事件處理 248
8.5.1 什么是事件 248
8.5.2 事件處理程序的
調(diào)用 249
8.5.3 鼠標(biāo)事件 251
8.5.4 鍵盤(pán)事件 252
8.5.5 表單事件 254
8.5.6 頁(yè)面事件 256
8.6 任務(wù) 5 布局及定義基礎(chǔ)
樣式 257
8.6.1 準(zhǔn)備工作 258
8.6.2 制作思路分析 259
8.6.3 頁(yè)面結(jié)構(gòu)設(shè)計(jì) 260
8.6.4 基礎(chǔ)樣式定義 261
8.6.5 CSS/JS 文件引入 261
8.7 任務(wù) 6 制作頭部及
導(dǎo)航版塊 261
8.7.1 頭部版塊效果
分析 261
8.7.2 頭部版塊制作 262
8.8 任務(wù) 7 制作 banner 版塊 264
8.8.1 banner 版塊效果
分析 264
8.8.2 banner 版塊制作 264
8.9 任務(wù) 8 制作學(xué)校簡(jiǎn)介
版塊 268
8.9.1 學(xué)校簡(jiǎn)介版塊
效果分析 268
8.9.2 學(xué)校簡(jiǎn)介版塊
制作 269
8.10 任務(wù) 9 制作課程特色
版塊 272
8.10.1 課程特色版塊
效果分析 272
8.10.2 課程特色版塊
制作 273
8.11 任務(wù) 10 制作頁(yè)腳
版塊 279
8.11.1 頁(yè)腳版塊效果
分析 279
8.11.2 頁(yè)腳版塊制作 279
8.12 拓展學(xué)習(xí)教育類(lèi)網(wǎng)
站的設(shè)計(jì)要點(diǎn) 280
8.12.1 教育類(lèi)網(wǎng)站的類(lèi)型 280
8.12.2 教育類(lèi)網(wǎng)站的設(shè)計(jì)
要點(diǎn) 282
實(shí)訓(xùn) 283
項(xiàng)目 9 網(wǎng)站動(dòng)態(tài)化 284
9.1 項(xiàng)目描述及分析 284
9.2 任務(wù) 1 認(rèn)識(shí) CMS 286
9.2.1 靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)
網(wǎng)頁(yè) 286
9.2.2 CMS 287
9.3 任務(wù) 2 靜態(tài)頁(yè)面模板
導(dǎo)入 288
9.3.1 DedeCMS 的安裝和
環(huán)境配置 288
9.3.2 靜態(tài)頁(yè)面模板導(dǎo)入 295
9.3.3 模板的相關(guān)概念 297
9.4 任務(wù) 3 DedeCMS 常用
標(biāo)簽 298
9.4.1 了解 DedeCMS 中的
標(biāo)簽 298
9.4.2 DedeCMS 中的常用
標(biāo)簽 298
9.5 任務(wù) 4 首頁(yè)動(dòng)態(tài)化 302
9.5.1 網(wǎng)站欄目管理 302
9.5.2 首頁(yè)動(dòng)態(tài)化 305
9.6 任務(wù) 5 其他頁(yè)面動(dòng)態(tài)化 313
9.6.1 列表頁(yè)（欄目頁(yè)）
動(dòng)態(tài)化 313
9.6.2 內(nèi)容頁(yè)動(dòng)態(tài)化 315
9.7 任務(wù) 6 生成靜態(tài)頁(yè)面 319
9.8 知識(shí)鏈接數(shù)據(jù)備份與
還原 320
實(shí)訓(xùn) 322
項(xiàng)目 10 響應(yīng)式 Web 設(shè)計(jì) 323
10.1 項(xiàng)目描述及分析 323
10.2 任務(wù) 1 認(rèn)識(shí)響應(yīng)式布局 325
10.2.1 設(shè)計(jì)理念 325
10.2.2 響應(yīng)式的實(shí)現(xiàn) 326
10.3 任務(wù) 2 響應(yīng)式布局基礎(chǔ)
知識(shí) 327
10.3.1 響應(yīng)式設(shè)計(jì)相關(guān)
概念 327
10.3.2 響應(yīng)式布局的實(shí)現(xiàn) 330
10.4 任務(wù) 3 響應(yīng)式布局框架 332
10.4.1 常見(jiàn)的響應(yīng)式布局
框架 332
10.4.2 Bootstrap 簡(jiǎn)介 333
10.5 任務(wù) 4 認(rèn)識(shí) Bootstrap 337
10.5.1 相關(guān)概念 337
10.5.2 CSS 布局 339
10.5.3 組件 341
10.6 任務(wù) 5 頁(yè)面響應(yīng)式布局 346
10.6.1 項(xiàng)目需求 346
10.6.2 頭部響應(yīng)式布局 348
10.6.3 主體部分響應(yīng)式
布局 350
10.6.4 頁(yè)腳部分響應(yīng)式
布局 353
10.6.5 測(cè)試頁(yè)面 353
10.7 知識(shí)鏈接Bootstrap
中的其他組件 354
10.7.1 表單 354
10.7.2 復(fù)選框和單選按鈕 355
10.7.3 卡片 356
實(shí)訓(xùn) 357
參考文獻(xiàn) 358