網(wǎng)頁制作案例

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