網(wǎng)頁(yè)制作案例

模塊一 初識(shí)Photoshop Web基礎(chǔ)知識(shí)
任務(wù)一 認(rèn)識(shí)網(wǎng)站美工........................................................2
1. 什么是網(wǎng)站美工........................................................... 2
2. 網(wǎng)站美工的任務(wù)........................................................... 3
任務(wù)二 網(wǎng)站設(shè)計(jì)基礎(chǔ)知識(shí)..................................................... 4
1. 網(wǎng)頁(yè)配色的相關(guān)知識(shí).............................................. 4
2. 頁(yè)面布局................................................................ 7
任務(wù)三 開發(fā)一個(gè)網(wǎng)站的總體流程........................................ 11
1. 先用Photoshop給出效果....................................... 11
2. 通過(guò)切圖，得到素材............................................ 11
3. 搭建DIV+CSS...................................................... 12
模塊二 網(wǎng)站策劃
任務(wù)一 明確網(wǎng)站主題.......................................................... 16
1. 網(wǎng)站主題決定網(wǎng)頁(yè)的表現(xiàn)形式............................. 16
2. 對(duì)于題材選擇的建議............................................ 17
任務(wù)二 分析相關(guān)背景材料................................................... 18
1. 分析行業(yè)資料....................................................... 18
2. 行業(yè)調(diào)查及知識(shí)的積累........................................ 19
任務(wù)三 分析目標(biāo)用戶.......................................................... 19
1. 目標(biāo)用戶群.......................................................... 19
2. 一般網(wǎng)站中目標(biāo)用戶群的分析............................. 20
任務(wù)四 如何達(dá)到“設(shè)計(jì)”的目的....................................... 23
1. 策劃書................................................................. 23
2. 網(wǎng)頁(yè)內(nèi)容安排技巧............................................... 25
模塊三 設(shè)計(jì)“惠團(tuán)網(wǎng)”網(wǎng)站頁(yè)面
任務(wù)一 認(rèn)識(shí)網(wǎng)頁(yè)的區(qū)域劃分...................................................... 28
1. 認(rèn)識(shí)頂部和底部區(qū)...................................................... 28
2. 認(rèn)識(shí)中間區(qū)................................................................. 29
任務(wù)二 使用Photoshop繪制“惠團(tuán)網(wǎng)”首頁(yè)網(wǎng)頁(yè)模板...............31
1. 認(rèn)識(shí)Logo..................................................................... 31
2. 制作Logo..................................................................... 31
3. 認(rèn)識(shí)橫幅..................................................................... 33
4. 制作橫幅..................................................................... 34
5. 制作導(dǎo)航條................................................................. 35
6. 制作中間區(qū)域............................................................. 36
7. 制作底部區(qū)域............................................................. 37
任務(wù)三 使用網(wǎng)頁(yè)切片工具.......................................................... 38
1. 網(wǎng)頁(yè)切片..................................................................... 39
2.“惠團(tuán)網(wǎng)”頁(yè)面切割...................................................
模塊四 制作“惠團(tuán)網(wǎng)”網(wǎng)站頁(yè)面
任務(wù)一 了解DIV+CSS................................................................ 46
1. 什么是DIV+CSS......................................................... 46
2. DIV+CSS的優(yōu)勢(shì)......................................................... 46
3. DIV+CSS的缺陷......................................................... 47
4. 盒子模型的概念.......................................................... 48
任務(wù)二 惠團(tuán)網(wǎng)網(wǎng)站DIV+CSS布局.............................................. 50
1. 實(shí)例賞析..................................................................... 50
2. 建立站點(diǎn)..................................................................... 50
3. 布局首頁(yè)..................................................................... 51
任務(wù)三 用CSS美化惠團(tuán)網(wǎng)網(wǎng)站................................................... 56
1. 案例賞析..................................................................... 56
2. 美化惠團(tuán)網(wǎng)網(wǎng)頁(yè).......................................................... 56
模塊五 設(shè)計(jì)個(gè)人網(wǎng)站
任務(wù)一 制作個(gè)人音樂(lè)網(wǎng)站...................................................86
1. 網(wǎng)站色彩搭配....................................................... 86
2. 網(wǎng)站布局.............................................................. 87
3. 素材準(zhǔn)備.............................................................. 87
任務(wù)二 制作個(gè)人博客.......................................................... 96
1. 網(wǎng)站色彩搭配....................................................... 96
2. 網(wǎng)站布局.............................................................. 97
3. 素材準(zhǔn)備.............................................................. 98
模塊六 設(shè)計(jì)商業(yè)網(wǎng)站
任務(wù)一 制作房產(chǎn)類網(wǎng)站..................................................... 112
1. 網(wǎng)站色彩搭配.....................................................112
2. 網(wǎng)站布局............................................................ 113
3. 素材準(zhǔn)備............................................................ 113
任務(wù)二 制作產(chǎn)品類網(wǎng)站..................................................... 119
1. 網(wǎng)站色彩搭配.....................................................120
2. 網(wǎng)站布局............................................................ 120
3. 素材準(zhǔn)備............................................................ 120
任務(wù)三 制作門戶類網(wǎng)站..................................................... 131
1. 網(wǎng)站色彩搭配.....................................................132
2. 網(wǎng)站布局............................................................ 133
3. 素材準(zhǔn)備............................................................ 133
任務(wù)四 制作娛樂(lè)類網(wǎng)站..................................................... 140
1. 網(wǎng)站色彩搭配.....................................................141
2. 網(wǎng)站布局............................................................ 141
3. 素材準(zhǔn)備............................................................ 141