網(wǎng)頁制作案例

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