網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程(HTML+CSS+JavaScript)(第2版)
定 價(jià):59.8 元
- 作者:黑馬程序員
- 出版時(shí)間:2022/2/1
- ISBN:9787115565983
- 出 版 社:人民郵電出版社
- 中圖法分類:TP312.8
- 頁(yè)碼:294
- 紙張:
- 版次:02
- 開(kāi)本:16開(kāi)
本書(shū)從初學(xué)者的角度出發(fā),以實(shí)用的案例、通俗易懂的語(yǔ)言詳細(xì)介紹了使用HTML、CSS及JavaScript進(jìn)行網(wǎng)頁(yè)制作的一般技巧。
本書(shū)分為8個(gè)項(xiàng)目,結(jié)合HTML、CSS和JavaScript的基礎(chǔ)知識(shí)及應(yīng)用,提供了7種不同類型的網(wǎng)頁(yè)設(shè)計(jì)案例。其中,項(xiàng)目1介紹了HTML、CSS和JavaScript的基礎(chǔ)知識(shí),包括Web基本概念、HTML簡(jiǎn)介、CSS簡(jiǎn)介、JavaScript簡(jiǎn)介、Dreamweaver工具的使用等;項(xiàng)目2~項(xiàng)目8為7個(gè)完整的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目,涉及“博客”“網(wǎng)店”“家居”“教育”“婚戀”“視頻”“美食”多個(gè)方向,有助于讀者掌握不同網(wǎng)站的設(shè)計(jì)風(fēng)格和制作技巧。本書(shū)以項(xiàng)目為導(dǎo)向,通過(guò)項(xiàng)目將相關(guān)知識(shí)點(diǎn)串聯(lián)起來(lái),學(xué)完項(xiàng)目?jī)?nèi)容就能基本掌握如何制作一個(gè)完整的項(xiàng)目頁(yè)面,從而極大地激發(fā)讀者的學(xué)習(xí)興趣。
本書(shū)附有源代碼、習(xí)題、教學(xué)課件等資源,并且為了幫助初學(xué)者更好地學(xué)習(xí),編者還提供了在線答疑,希望可以幫助更多的讀者。
本書(shū)既可作為高等院校本、?葡嚓P(guān)專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)與制作課程的教材,也可作為網(wǎng)頁(yè)平面設(shè)計(jì)的培訓(xùn)教材,還可作為網(wǎng)頁(yè)制作、美工設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)、網(wǎng)頁(yè)編程等行業(yè)從業(yè)人員的參考讀物。
1.國(guó)家“十三五”規(guī)劃教材;
2.黑馬程序員系列教材改版;
3.本書(shū)配套豐富的教學(xué)資源,包括PPT、教學(xué)視頻、教學(xué)設(shè)計(jì)、教學(xué)大綱、源代碼等。
此次改版,在原書(shū)的基礎(chǔ)上更新了部分案例,增加了HTML5和CSS3新屬性的講解和應(yīng)用,增加了網(wǎng)頁(yè)視聽(tīng)技術(shù)的應(yīng)用,主要包括音頻、視頻的嵌入和動(dòng)畫(huà)效果。
黑馬程序員,傳智播客成立于2006年,它是由中國(guó)Java培訓(xùn)先行者張孝祥老師發(fā)起,聯(lián)合全球最大的中文IT社區(qū)CSDN、中關(guān)村軟件園共同創(chuàng)辦的一家專業(yè)教育機(jī)構(gòu)。辦學(xué)至今,我們一直堅(jiān)守著“為千萬(wàn)人少走彎路而著書(shū),為中華軟件之崛起而講課”的辦學(xué)理念,堅(jiān)持培養(yǎng)優(yōu)秀軟件應(yīng)用工程師的宏偉目標(biāo),在累計(jì)培養(yǎng)的十萬(wàn)余名學(xué)員中,其中90%的學(xué)員均已在北、上、廣等一線城市高薪就業(yè),特別是“黑馬程序員”的平均就業(yè)薪資已達(dá)到8K以上。為了迎合軟件市場(chǎng)的需求,我們陸續(xù)開(kāi)設(shè)了Java、網(wǎng)頁(yè)平面、PHP、.Net、iOS、C/C++、Android等9個(gè)專業(yè)方向的課程,并且未來(lái)將逐漸開(kāi)設(shè)其他專業(yè)方向的課程。隨著傳智播客的日益壯大,除了北京總部,我們?cè)谏虾、廣州、武漢、成都、深圳等地也創(chuàng)立了直營(yíng)分支機(jī)構(gòu),傳智播客儼然已成為了國(guó)內(nèi)最具專業(yè)口碑的IT教育機(jī)構(gòu)。
項(xiàng)目1 網(wǎng)頁(yè)制作基礎(chǔ)知識(shí) 1
【任務(wù)1-1】認(rèn)識(shí)網(wǎng)頁(yè) 1
需求分析 1
知識(shí)儲(chǔ)備 1
1. 網(wǎng)頁(yè)的構(gòu)成 1
2. 網(wǎng)頁(yè)的相關(guān)名詞 2
3. Web標(biāo)準(zhǔn) 3
【任務(wù)1-2】網(wǎng)頁(yè)制作入門技術(shù) 5
需求分析 5
知識(shí)儲(chǔ)備 5
1. HTML簡(jiǎn)介 5
2. CSS簡(jiǎn)介 6
3. JavaScript簡(jiǎn)介 6
4. 常見(jiàn)瀏覽器介紹 7
【任務(wù)1-3】Dreamweaver的使用 9
需求分析 9
知識(shí)儲(chǔ)備 9
1. Dreamweaver界面介紹 9
2. Dreamweaver的初始化設(shè)置 13
3. Dreamweaver文檔的基本操作 14
4. 創(chuàng)建網(wǎng)頁(yè) 16
【項(xiàng)目總結(jié)】 17
【課后練習(xí)】 17
項(xiàng)目2 “博客”頁(yè)面制作 19
【項(xiàng)目描述】 19
【任務(wù)2-1】認(rèn)識(shí)HTML 20
需求分析 20
知識(shí)儲(chǔ)備 20
1. HTML文檔基本格式 20
2. HTML標(biāo)簽 21
3. HTML標(biāo)簽的屬性 22
4. HTML標(biāo)簽的關(guān)系 22
5. HTML文檔頭部相關(guān)標(biāo)簽 23
【任務(wù)2-2】HTML文本控制標(biāo)簽 24
需求分析 24
知識(shí)儲(chǔ)備 24
1. 頁(yè)面格式化標(biāo)簽 24
2. 文本樣式標(biāo)簽 26
3. 文本格式化標(biāo)簽 27
4. 特殊字符 28
知識(shí)拓展 29
標(biāo)簽 29
【任務(wù)2-3】HTML圖像應(yīng)用 30
需求分析 30
知識(shí)儲(chǔ)備 30
1. 常用圖像格式 30
2. 圖像標(biāo)簽 31
3. 相對(duì)路徑和絕對(duì)路徑 33
知識(shí)拓展 34
切圖 34
【任務(wù)2-4】頁(yè)面建設(shè)準(zhǔn)備工作 35
網(wǎng)站素材整理 35
1. 建立網(wǎng)站站點(diǎn) 35
2. “博客”頁(yè)面切圖 36
頁(yè)面結(jié)構(gòu)分析 36
頁(yè)面布局 37
【任務(wù)2-5】制作“頭部”模塊 38
效果分析 38
模塊制作 38
【任務(wù)2-6】制作“博主簡(jiǎn)介”模塊 39
效果分析 39
模塊制作 39
【任務(wù)2-7】制作“旅行隨筆”模塊 40
效果分析 40
模塊制作 41
【任務(wù)2-8】制作“驢友評(píng)論”模塊 42
效果分析 42
模塊制作 43
【任務(wù)2-9】制作“頁(yè)腳”模塊 44
效果分析 44
模塊制作 44
【項(xiàng)目總結(jié)】 45
【課后練習(xí)】 45
項(xiàng)目3 “網(wǎng)上花店”專題頁(yè)制作 47
【項(xiàng)目描述】 47
【任務(wù)3-1】CSS核心基礎(chǔ) 48
需求分析 48
知識(shí)儲(chǔ)備 48
1. 結(jié)構(gòu)與表現(xiàn)分離 48
2. CSS樣式規(guī)則 49
3. CSS樣式表的引入 49
4. CSS基礎(chǔ)選擇器 53
【任務(wù)3-2】CSS文本樣式屬性 55
需求分析 55
知識(shí)儲(chǔ)備 55
1. CSS字體樣式屬性 55
2. CSS文本外觀屬性 58
知識(shí)拓展 62
使用CSS定義背景顏色 62
【任務(wù)3-3】CSS高級(jí)特性 63
需求分析 63
知識(shí)儲(chǔ)備 63
1. CSS復(fù)合選擇器 63
2. CSS層疊性與繼承性 65
3. CSS優(yōu)先級(jí) 66
【任務(wù)3-4】頁(yè)面建設(shè)準(zhǔn)備工作 68
網(wǎng)站素材整理 68
1. 建立網(wǎng)站站點(diǎn) 68
2. “網(wǎng)上花店”專題頁(yè)切圖 68
頁(yè)面結(jié)構(gòu)分析 69
1. HTML結(jié)構(gòu)分析 69
2. CSS樣式分析 70
定義基礎(chǔ)樣式 70
1. 頁(yè)面布局 70
2. 公共樣式設(shè)置 70
【任務(wù)3-5】制作“標(biāo)題”模塊 70
效果分析 70
1. 結(jié)構(gòu)分析 70
2. 樣式分析 71
模塊制作 71
1. 搭建結(jié)構(gòu) 71
2. 控制樣式 71
【任務(wù)3-6】制作“分類”模塊 71
效果分析 71
1. 結(jié)構(gòu)分析 71
2. 樣式分析 72
模塊制作 72
1. 搭建結(jié)構(gòu) 72
2. 控制樣式 72
【任務(wù)3-7】制作“熱賣”模塊 73
效果分析 73
1. 結(jié)構(gòu)分析 73
2. 樣式分析 74
模塊制作 74
1. 搭建結(jié)構(gòu) 74
2. 控制樣式 74
【任務(wù)3-8】制作“頁(yè)腳”模塊 75
效果分析 75
1. 結(jié)構(gòu)分析 75
2. 樣式分析 75
模塊制作 75
1. 搭建結(jié)構(gòu) 75
2. 控制樣式 75
【項(xiàng)目總結(jié)】 76
【課后練習(xí)】 76
項(xiàng)目4 “愛(ài)家居”企業(yè)網(wǎng)站首頁(yè)制作 78
【項(xiàng)目描述】 78
【任務(wù)4-1】認(rèn)識(shí)盒子模型 79
需求分析 79
知識(shí)儲(chǔ)備 79
【任務(wù)4-2】盒子模型基礎(chǔ)屬性 80
需求分析 80
知識(shí)儲(chǔ)備 80
1. 邊框?qū)傩浴?0
2. 內(nèi)邊距屬性 85
3. 外邊距屬性 86
4. 背景屬性 88
5. 寬度屬性和高度屬性 91
【任務(wù)4-3】盒子模型新增屬性 92
需求分析 92
知識(shí)儲(chǔ)備 92
1. 顏色透明 92
2. 圓角 93
3. 陰影 95
4. 漸變 96
【任務(wù)4-4】元素的類型與轉(zhuǎn)換 100
需求分析 100
知識(shí)儲(chǔ)備 100
1. 元素的類型 100
2.
標(biāo)簽 101
3. 元素類型的轉(zhuǎn)換 102
知識(shí)拓展 104
塊元素垂直外邊距的合并 104
【任務(wù)4-5】元素的浮動(dòng) 106
需求分析 106
知識(shí)儲(chǔ)備 106
1. 元素的浮動(dòng)屬性 106
2. 清除浮動(dòng) 108
3. overflow屬性 112
【任務(wù)4-6】元素的定位 113
需求分析 113
知識(shí)儲(chǔ)備 113
1. 元素的定位屬性 113
2. 靜態(tài)定位 114
3. 相對(duì)定位 114
4. 絕對(duì)定位 115
5. 固定定位 116
6. z-index屬性 116
【任務(wù)4-7】頁(yè)面建設(shè)準(zhǔn)備工作 117
網(wǎng)站素材的整理 117
1. 建立網(wǎng)站站點(diǎn) 117
2. “愛(ài)家居”企業(yè)網(wǎng)站首頁(yè)切圖 117
頁(yè)面結(jié)構(gòu)分析 117
1. HTML結(jié)構(gòu)分析 117
2. CSS樣式分析 118
定義基礎(chǔ)樣式 118
1. 頁(yè)面布局 118
2. 定義基礎(chǔ)樣式 119
【任務(wù)4-8】制作“導(dǎo)航及banner”
模塊 119
效果分析 119
1. 結(jié)構(gòu)分析 119
2. 樣式分析 119
模塊制作 120
1. 搭建結(jié)構(gòu) 120
2. 控制樣式 120
【任務(wù)4-9】制作“熱門推薦”模塊 121
效果分析 121
1. 結(jié)構(gòu)分析 121
2. 樣式分析 121
模塊制作 122
1. 搭建結(jié)構(gòu) 122
2. 控制樣式 122
【任務(wù)4-10】制作“夏日生活”模塊 123
效果分析 123
1. 結(jié)構(gòu)分析 123
2. 樣式分析 124
模塊制作 124
1. 搭建結(jié)構(gòu) 124
2. 控制樣式 124
【任務(wù)4-11】制作“版權(quán)信息”模塊和
“懸浮框”模塊 125
效果分析 125
1. 結(jié)構(gòu)分析 125
2. 樣式分析 125
模塊制作 125
1. 搭建結(jié)構(gòu) 125
2. 控制樣式 125
【項(xiàng)目總結(jié)】 126
【課后練習(xí)】 126
項(xiàng)目5 “優(yōu)課教育”網(wǎng)站首頁(yè)制作 128
【項(xiàng)目描述】 128
【任務(wù)5-1】列表標(biāo)簽 129
需求分析 129
知識(shí)儲(chǔ)備 129
1. 無(wú)序列表 129
2. 有序列表 130
3. 定義列表 131
4. 列表的嵌套應(yīng)用 132
【任務(wù)5-2】使用CSS控制列表
項(xiàng)目符號(hào) 132
需求分析 132
知識(shí)儲(chǔ)備 132
1. list-style復(fù)合屬性 132
2. 通過(guò)設(shè)置背景圖像的方式定義列表
項(xiàng)目符號(hào) 133
【任務(wù)5-3】超鏈接標(biāo)簽 133
需求分析 133
知識(shí)儲(chǔ)備 133
1. 創(chuàng)建超鏈接 133
2. 創(chuàng)建錨點(diǎn)鏈接 135
3. 通過(guò)鏈接偽類控制超鏈接 135
【任務(wù)5-4】頁(yè)面建設(shè)準(zhǔn)備工作 137
網(wǎng)站素材整理 137
1. 建立站點(diǎn) 137
2. 切圖 137
頁(yè)面結(jié)構(gòu)分析 138
1. HTML結(jié)構(gòu)分析 138
2. CSS樣式分析 138
定義基礎(chǔ)樣式 139
1. 頁(yè)面布局 139
2. 定義基礎(chǔ)樣式 139
【任務(wù)5-5】制作“導(dǎo)航”模塊 139
效果分析 139
1. 結(jié)構(gòu)分析 139
2. 樣式分析 140
模塊制作 140
1. 搭建結(jié)構(gòu) 140
2. 控制樣式 140
【任務(wù)5-6】制作“banner”模塊和
“課程分類”模塊 141
效果分析 141
1. 結(jié)構(gòu)分析 141
2. 樣式分析 141
模塊制作 141
1. 搭建結(jié)構(gòu) 141
2. 控制樣式 142
【任務(wù)5-7】制作“精品展示”模塊 143
效果分析 143
1. 結(jié)構(gòu)分析 143
2. 樣式分析 144
模塊制作 144
1. 搭建結(jié)構(gòu) 144
2. 控制樣式 144
【任務(wù)5-8】制作“版權(quán)信息”模塊 146
效果分析 146
1. 結(jié)構(gòu)分析 146
2. 樣式分析 146
模塊制作 146
1. 搭建結(jié)構(gòu) 146
2. 控制樣式 146
【項(xiàng)目總結(jié)】 147
【課后練習(xí)】 147
項(xiàng)目6 “千年之戀”注冊(cè)頁(yè)面制作 149
【項(xiàng)目描述】 149
【任務(wù)6-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽 150
需求分析 150
知識(shí)儲(chǔ)備 150
1. 創(chuàng)建表格 150
2. 標(biāo)簽的屬性 151
3. 標(biāo)簽的屬性 154
4. 標(biāo)簽的屬性 155
5. | 標(biāo)簽的屬性 157
【任務(wù)6-2】使用CSS控制表格樣式 157
需求分析 157
知識(shí)儲(chǔ)備 158
1. 使用CSS控制表格邊框 158
2. 使用CSS控制單元格邊距 159
3. 使用CSS控制單元格的寬度 和高度 160
【任務(wù)6-3】表單概述 161
需求分析 161
知識(shí)儲(chǔ)備 161
1. 初識(shí)表單 161
2. 創(chuàng)建表單 161
【任務(wù)6-4】基礎(chǔ)表單控件 162
需求分析 162
知識(shí)儲(chǔ)備 162
1. input控件 162
2. textarea控件 165
3. select控件 166
【任務(wù)6-5】新增表單控件類型和屬性 169
需求分析 169
知識(shí)儲(chǔ)備 169
1. 新增input控件類型 169
2. 新增input控件屬性 173
【任務(wù)6-6】使用CSS控制表單樣式 179
需求分析 179
知識(shí)儲(chǔ)備 179
【任務(wù)6-7】頁(yè)面建設(shè)準(zhǔn)備工作 181
網(wǎng)站素材整理 181
1. 建立站點(diǎn) 181
2. 切圖 181
頁(yè)面結(jié)構(gòu)分析 182
1. HTML結(jié)構(gòu)分析 182
2. CSS樣式分析 183
定義基礎(chǔ)樣式 183
1. 頁(yè)面布局 183
2. 定義基礎(chǔ)樣式 183
【任務(wù)6-8】制作“頭部”和“導(dǎo)航” 模塊 183
效果分析 183
1. 結(jié)構(gòu)分析 183
2. 樣式分析 184
模塊制作 184
1. 搭建結(jié)構(gòu) 184
2. 控制樣式 184
【任務(wù)6-9】制作“banner”和“內(nèi)容” 模塊 185
效果分析 185
1. 結(jié)構(gòu)分析 185
2. 樣式分析 186
模塊制作 186
1. 搭建結(jié)構(gòu) 186
2. 控制樣式 187
【任務(wù)6-10】制作“頁(yè)腳”模塊 189
效果分析 189
1. 結(jié)構(gòu)分析 189
2. 樣式分析 189
模塊制作 190
1. 搭建結(jié)構(gòu) 190
2. 控制樣式 190
【項(xiàng)目總結(jié)】 190
【課后練習(xí)】 190
項(xiàng)目7 “視頻8”首頁(yè)制作 192
【項(xiàng)目描述】 192
【任務(wù)7-1】在網(wǎng)頁(yè)中嵌入視頻和音頻 193
需求分析 193
知識(shí)儲(chǔ)備 194
1. 視頻、音頻嵌入技術(shù)概述 194
2. 嵌入視頻 195
3. 嵌入音頻 197
4. 瀏覽器對(duì)視頻和音頻格式的 兼容性 197
5. 控制視頻的寬度和高度 198
【任務(wù)7-2】在網(wǎng)頁(yè)中添加過(guò)渡效果 200
需求分析 200
知識(shí)儲(chǔ)備 200
1. transition-property屬性 200
2. transition-duration屬性 202
3. transition-timing-function屬性 202
4. transition-delay屬性 203
5. transition屬性 204
【任務(wù)7-3】在網(wǎng)頁(yè)中添加變形效果 204
需求分析 204
知識(shí)儲(chǔ)備 204
1. 2D變形 204
2. 3D變形 209
【任務(wù)7-4】在網(wǎng)頁(yè)中添加動(dòng)畫(huà)效果 212
需求分析 212
知識(shí)儲(chǔ)備 213
1. @keyframes規(guī)則 213
2. animation-name屬性 213
3. animation-duration屬性 213
4. animation-timing-function屬性 214
5. animation-delay屬性 215
6. animation-iteration-count屬性 215
7. animation-direction屬性 215
8. animation屬性 216
【任務(wù)7-5】頁(yè)面建設(shè)準(zhǔn)備工作 216
網(wǎng)站素材整理 216
1. 建立站點(diǎn) 216
2. 切圖 217
頁(yè)面結(jié)構(gòu)分析 217
1. HTML結(jié)構(gòu)分析 217
2. CSS樣式分析 218
定義基礎(chǔ)樣式 218
1. 頁(yè)面布局 218
2. 定義基礎(chǔ)樣式 219
【任務(wù)7-6】制作“引導(dǎo)欄”模塊 219
效果分析 219
1. 結(jié)構(gòu)分析 219
2. 樣式分析 220
模塊制作 220
1. 搭建結(jié)構(gòu) 220
2. 控制樣式 220
【任務(wù)7-7】制作“導(dǎo)航”模塊 221
效果分析 221
1. 結(jié)構(gòu)分析 221
2. 樣式分析 221
模塊制作 221
1. 搭建結(jié)構(gòu) 221
2. 控制樣式 222
【任務(wù)7-8】制作“banner”模塊 223
效果分析 223
1. 結(jié)構(gòu)分析 223
2. 樣式分析 223
模塊制作 223
1. 搭建結(jié)構(gòu) 223
2. 控制樣式 223
【任務(wù)7-9】制作“內(nèi)容”模塊 225
效果分析 225
1. 結(jié)構(gòu)分析 225
2. 樣式分析 226
模塊制作 226
1. 搭建結(jié)構(gòu) 226
2. 控制樣式 227
【任務(wù)7-10】制作“頁(yè)腳”模塊 229
效果分析 229
1. 結(jié)構(gòu)分析 229
2. 樣式分析 229
模塊制作 230
1. 搭建結(jié)構(gòu) 230
2. 控制樣式 230
【項(xiàng)目總結(jié)】 231
【課后練習(xí)】 231
項(xiàng)目8 “甜蜜約會(huì)”首頁(yè)制作 233
【項(xiàng)目描述】 233
【任務(wù)8-1】JavaScript基礎(chǔ)知識(shí) 234
需求分析 234
知識(shí)儲(chǔ)備 234
1. JavaScript簡(jiǎn)介 234
2. JavaScript引入方式 236
3. JavaScript基本語(yǔ)法 237
4. 簡(jiǎn)單的JavaScript程序 238
【任務(wù)8-2】變量 239
需求分析 239
知識(shí)儲(chǔ)備 239
1. 變量的聲明 239
2. 變量的賦值 239
【任務(wù)8-3】數(shù)據(jù)類型和運(yùn)算符 240
需求分析 240
知識(shí)儲(chǔ)備 240
1. 數(shù)據(jù)類型 240
2. 運(yùn)算符 241
【任務(wù)8-4】流程控制語(yǔ)句 245
需求分析 245
知識(shí)儲(chǔ)備 245
1. 條件語(yǔ)句 245
2. 循環(huán)語(yǔ)句 250
3. 跳轉(zhuǎn)語(yǔ)句 252
【任務(wù)8-5】函數(shù) 254
需求分析 254
知識(shí)儲(chǔ)備 254
1. 函數(shù)的定義 254
2. 函數(shù)的調(diào)用 255
3. 函數(shù)中變量的作用域 255
【任務(wù)8-6】對(duì)象 256
需求分析 256
知識(shí)儲(chǔ)備 256
1. 認(rèn)識(shí)對(duì)象 256
2. 創(chuàng)建對(duì)象和刪除對(duì)象屬性 257
3. 內(nèi)置對(duì)象 258
【任務(wù)8-7】數(shù)組 262
需求分析 262
知識(shí)儲(chǔ)備 262
1. 初識(shí)數(shù)組 262
2. 創(chuàng)建數(shù)組 262
3. 數(shù)組的常用屬性和方法 263
4. 二維數(shù)組 264
【任務(wù)8-8】BOM對(duì)象與DOM對(duì)象 265
需求分析 265
知識(shí)儲(chǔ)備 265
1. BOM對(duì)象 265
2. DOM對(duì)象 271
【任務(wù)8-9】事件處理 276
需求分析 276
知識(shí)儲(chǔ)備 276
1. 事件和事件調(diào)用 276
2. 常用的JavaScript事件 277
【任務(wù)8-10】頁(yè)面建設(shè)準(zhǔn)備工作 278
網(wǎng)站素材整理 278
1. 建立站點(diǎn) 278
2. 切圖 278
頁(yè)面結(jié)構(gòu)分析 279
1. HTML結(jié)構(gòu)分析 279
2. CSS樣式分析 279
3. JavaScript效果分析 279
定義基礎(chǔ)樣式 279
1. 頁(yè)面布局 279
2. 定義基礎(chǔ)樣式 280
3. 引入JavaScript文件 280
【任務(wù)8-11】制作“頭部及導(dǎo)航”模塊 280
效果分析 280
1. 結(jié)構(gòu)分析 280
2. 樣式分析 281
模塊制作 281
1. 搭建結(jié)構(gòu) 281
2. 控制樣式 281
【任務(wù)8-12】制作“banner”模塊 282
效果分析 282
1. 結(jié)構(gòu)分析 282
2. 樣式分析 282
3. JavaScript特效分析 282
模塊制作 283
1. 搭建結(jié)構(gòu) 283
2. 控制樣式 283
3. 添加JavaScript效果 284
【任務(wù)8-13】制作“簡(jiǎn)介”模塊 285
效果分析 285
1. 結(jié)構(gòu)分析 285
2. 樣式分析 286
3. JavaScript特效分析 286
模塊制作 286
1. 搭建結(jié)構(gòu) 286
2. 控制樣式 286
3. 添加JavaScript效果 288
【任務(wù)8-14】制作“推薦”模塊 288
效果分析 288
1. 結(jié)構(gòu)分析 288
2. 樣式分析 289
3. JavaScript特效分析 289
模塊制作 289
1. 搭建結(jié)構(gòu) 289
2. 控制樣式 290
3. 添加JavaScript效果 291
【任務(wù)8-15】制作“頁(yè)腳”模塊 292
效果分析 292
1. 結(jié)構(gòu)分析 292
2. 樣式分析 292
模塊制作 293
1. 搭建結(jié)構(gòu) 293
2. 控制樣式 293
【項(xiàng)目總結(jié)】 293
【課后練習(xí)】 293
|