網(wǎng)頁(yè)設(shè)計(jì)及切片基礎(chǔ)教程

1、化學(xué)多媒體軟件設(shè)計(jì)頁(yè)面設(shè)計(jì)及切片基礎(chǔ)_入門篇2013.11.04PPT制作：前端設(shè)計(jì)組尹海施目錄 CONTENTS1. 頁(yè)面設(shè)計(jì)1.1 設(shè)計(jì)流程1.2 需求分析1.3 常見(jiàn)網(wǎng)頁(yè)布局1.4 網(wǎng)頁(yè)配色1.5 繪制設(shè)計(jì)圖2. 切片基礎(chǔ)2.1 切片簡(jiǎn)介2.2 切片思路2.3 切片步驟2.4 切片技巧化學(xué)多媒體軟件設(shè)計(jì)11 頁(yè)面設(shè)計(jì)1.1 設(shè)計(jì)流程1.2 需求分析1.3 常見(jiàn)網(wǎng)頁(yè)布局1.4 網(wǎng)頁(yè)配色1.5 繪制設(shè)計(jì)圖化學(xué)多媒體軟件設(shè)計(jì)2 1.1 設(shè)計(jì)流程1. 明確需求（網(wǎng)站整體結(jié)構(gòu)與功能，設(shè)計(jì)風(fēng)格，重構(gòu)難度）2. 確定布局和配色3. Ps/Fw繪制效果圖（先搭建整體框架，再雕琢細(xì)節(jié)）化學(xué)多媒體軟件設(shè)計(jì)3

2、 1.2 需求分析 磨刀不誤砍柴工，科學(xué)進(jìn)行需求分析，是成功的網(wǎng)頁(yè)設(shè)計(jì)不可缺少的步驟化學(xué)多媒體軟件設(shè)計(jì)4 Step 1: 確定主題、網(wǎng)站整體功能和風(fēng)格 主題：學(xué)院網(wǎng)站 功能：展示學(xué)院風(fēng)采、新聞動(dòng)態(tài) 風(fēng)格：較為嚴(yán)謹(jǐn)、正式化學(xué)多媒體軟件設(shè)計(jì)5 Step 1: 確定主題、網(wǎng)站整體功能和風(fēng)格 主題：課程介紹 功能：介紹課程、分享課程資源 風(fēng)格：與學(xué)院網(wǎng)站相比，更為開(kāi)放、新穎化學(xué)多媒體軟件設(shè)計(jì)6 Step 1: 確定主題、網(wǎng)站整體功能和風(fēng)格 主題：個(gè)人網(wǎng)站 功能：展示個(gè)人風(fēng)采 風(fēng)格：開(kāi)放、自由，無(wú)固定版式化學(xué)多媒體軟件設(shè)計(jì)7 Step 2: 確定網(wǎng)站欄目結(jié)構(gòu) 規(guī)劃好網(wǎng)站的層次結(jié)構(gòu)。清晰網(wǎng)站的導(dǎo)航，方便用

3、戶無(wú)障礙的使用網(wǎng)站，了解網(wǎng)站提供的功能?；瘜W(xué)多媒體軟件設(shè)計(jì)8 Step 3: 確定頁(yè)面的版式布局 根據(jù)網(wǎng)站類型、展示內(nèi)容多少確定布局，畫效果圖之前，不妨先畫一個(gè)頁(yè)面布局示意圖，這會(huì)讓你思路更清晰，助你事半功倍?；瘜W(xué)多媒體軟件設(shè)計(jì)9 Step 4: 確定網(wǎng)頁(yè)配色 網(wǎng)頁(yè)的色彩，是訪問(wèn)者登錄頁(yè)面時(shí)的第一印象，好的頁(yè)面色彩能給用戶留下深刻的印象，并且能產(chǎn)生很好的視覺(jué)效果和營(yíng)造網(wǎng)站整體氛圍的作用。 根據(jù)網(wǎng)站風(fēng)格選擇主色調(diào)、輔助色、特征色，形成一套配色方案?；瘜W(xué)多媒體軟件設(shè)計(jì)10 1.3 常見(jiàn)網(wǎng)頁(yè)布局1 上下結(jié)構(gòu)式（經(jīng)典厚樸版式）2 左右結(jié)構(gòu)式3 上左右結(jié)構(gòu)式4 水平條紋式布局5 不規(guī)則布局化學(xué)多媒體軟件

4、設(shè)計(jì)11 上下結(jié)構(gòu)式（經(jīng)典厚樸版式）上方為banner、導(dǎo)航條中間為slide，（動(dòng)態(tài)的公司企業(yè)形象、廣告區(qū)域）下方為正文、內(nèi)容部分底部為版權(quán)部分化學(xué)多媒體軟件設(shè)計(jì) 左右結(jié)構(gòu)式12左側(cè)是導(dǎo)航條右側(cè)是正文、內(nèi)容或公司企業(yè)形象展示化學(xué)多媒體軟件設(shè)計(jì) 上左右結(jié)構(gòu)式13左側(cè)為點(diǎn)擊出現(xiàn)的細(xì)分欄目導(dǎo)航條右側(cè)為內(nèi)容區(qū)域上方為主要的菜單導(dǎo)航條化學(xué)多媒體軟件設(shè)計(jì) 水平條紋式布局14 使用橫向條紋式的網(wǎng)頁(yè)布局，每條紋理區(qū)分不同內(nèi)容。 水平方式布滿屏幕，并使用不同的背景顏色或紋理，就像全屏的背景的網(wǎng)頁(yè)設(shè)計(jì)一樣，視覺(jué)效果很好。 排版多樣化，網(wǎng)站內(nèi)容表達(dá)也非常清晰。化學(xué)多媒體軟件設(shè)計(jì) 不規(guī)則布局15此類頁(yè)面的信息量少，

5、通常一張形象、廣告照片下來(lái)，重在渲染網(wǎng)站的氣氛。類似封面類型，有點(diǎn)擊進(jìn)入下頁(yè)的入口，適合于產(chǎn)品宣傳或個(gè)人網(wǎng)站?；瘜W(xué)多媒體軟件設(shè)計(jì)16 1.4 網(wǎng)頁(yè)配色色彩搭配的原則: 特色鮮明 搭配合理（避免采用純度很高的單一色彩，這樣容易造成視覺(jué)疲勞） 講究藝術(shù)性 網(wǎng)頁(yè)配色不宜超過(guò)三種。(三種是從色相上來(lái)說(shuō)的)化學(xué)多媒體軟件設(shè)計(jì)17 1.4 網(wǎng)頁(yè)配色216網(wǎng)頁(yè)安全色是當(dāng)紅色（Red）、綠色（Green）、藍(lán)色（Blue）顏色數(shù)字信號(hào)值（DAC Count）為0、51、102、153、204、255時(shí)構(gòu)成的顏色組合，它一共有 6 * 6 * 6 = 216 種顏色（其中彩色為210種，非彩色為6種）。網(wǎng)頁(yè)安全

6、色化學(xué)多媒體軟件設(shè)計(jì)18 1.4 網(wǎng)頁(yè)配色網(wǎng)頁(yè)安全色216網(wǎng)頁(yè)安全色在不同硬件環(huán)境、操作系統(tǒng)、瀏覽器中都能正常顯示，可避免原有的顏色失真問(wèn)題。但隨著顯示屏質(zhì)量提升，我們并不需要刻意地追求使用局限在216網(wǎng)頁(yè)安全色范圍內(nèi)的顏色，而是應(yīng)該更好地搭配使用安全色合非安全色?；瘜W(xué)多媒體軟件設(shè)計(jì)紅色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥 橙色代表光明、華麗、興奮、甜蜜、快樂(lè) 黃色代表明朗、愉快、高貴、希望 綠色代表新鮮、平靜、和平、柔和、安逸、青春 藍(lán)色代表深遠(yuǎn)、永恒、沉靜、理智、誠(chéng)實(shí)、寒冷 紫色代表優(yōu)雅、高貴、魅力、自傲 白色代表純潔、純真、樸素、神圣、明快 灰色代表憂郁、消極、謙虛、平凡、沉默、中庸、

7、寂寞 黑色代表崇高、堅(jiān)實(shí)、嚴(yán)肅、剛健、粗莽19 1.4 網(wǎng)頁(yè)配色色彩的象征情感化學(xué)多媒體軟件設(shè)計(jì) Color Scheme Designer Adobe Kuler20 1.4 網(wǎng)頁(yè)配色配色工具推薦化學(xué)多媒體軟件設(shè)計(jì)21 1.4 網(wǎng)頁(yè)配色淺析網(wǎng)頁(yè)配色實(shí)例1) 產(chǎn)品類：主要目的需求展示產(chǎn)品的特性，促進(jìn)瀏覽者消費(fèi)欲望，頁(yè)面色彩可根據(jù)具體產(chǎn)品定位做多樣化設(shè)計(jì)。簡(jiǎn)潔灰白色調(diào)給網(wǎng)站帶來(lái)科技感和現(xiàn)代感?；瘜W(xué)多媒體軟件設(shè)計(jì)22 1.4 網(wǎng)頁(yè)配色淺析網(wǎng)頁(yè)配色實(shí)例2) 公司、企業(yè)類：展示企業(yè)形象，加深提高品牌印象，可應(yīng)用logo的主色系設(shè)計(jì)，達(dá)到品牌統(tǒng)一。沿用logo的深藍(lán)色為主色調(diào)，具有統(tǒng)一感；此外，深藍(lán)色帶

8、給人更強(qiáng)的科技感?；瘜W(xué)多媒體軟件設(shè)計(jì)23 1.4 網(wǎng)頁(yè)配色淺析網(wǎng)頁(yè)配色實(shí)例3) 學(xué)院網(wǎng)站：主要以介紹學(xué)院動(dòng)態(tài)、交流信息為主，首頁(yè)內(nèi)容較多，所以配色上需要更為簡(jiǎn)潔、清爽，否則頁(yè)面會(huì)顯得雜亂。采用與?；找恢碌纳?，綠色為主色調(diào)，顯得統(tǒng)一；藍(lán)綠色的配色簡(jiǎn)潔清爽，而且排版規(guī)范，因此雖然內(nèi)容較多，但看起來(lái)仍然非常舒適。化學(xué)多媒體軟件設(shè)計(jì)241.5 繪制設(shè)計(jì)圖1. 新建畫布，拉輔助線，搭建框架2. 具體（示意）內(nèi)容錄入3. 風(fēng)格與細(xì)節(jié)調(diào)整化學(xué)多媒體軟件設(shè)計(jì)251.5 繪制設(shè)計(jì)圖新建畫布，拉輔助線搭建基本框架具體（示意）內(nèi)容錄入添加細(xì)節(jié)化學(xué)多媒體軟件設(shè)計(jì)261.5 繪制設(shè)計(jì)圖注意：先打出整體框架再雕琢細(xì)節(jié)！

9、切忌：沒(méi)有出整體架構(gòu)就琢磨細(xì)節(jié)， 元素缺乏對(duì)齊；元素大小與間距控制不當(dāng)，配色沖突與使用某些不合適的顏色?；瘜W(xué)多媒體軟件設(shè)計(jì) 切片基礎(chǔ)2722.1 切片簡(jiǎn)介2.2 切片思路2.3 切片步驟2.4 切片技巧化學(xué)多媒體軟件設(shè)計(jì)28 2.1 切片簡(jiǎn)介l 何為切片 顧名思義，把圖像切成幾部分，再重新組合在一起。l 常用的切片軟件 Fireworks、Photoshopl切片目的 為了為網(wǎng)頁(yè)下載提速，節(jié)約系統(tǒng)資源。 實(shí)現(xiàn)程序代碼所無(wú)法達(dá)到的美工效果?；瘜W(xué)多媒體軟件設(shè)計(jì)29 2.1 切片簡(jiǎn)介這是在PS下的切片化學(xué)多媒體軟件設(shè)計(jì)30 2.1 切片簡(jiǎn)介這是在Fw下的切片見(jiàn)圖中淺綠色框化學(xué)多媒體軟件設(shè)計(jì)31 2.

10、2 切片思路 參考思路：l 分析網(wǎng)頁(yè)布局，分解出基本的結(jié)構(gòu)，獲得網(wǎng)頁(yè)所需的主要圖片。l切出所需要的圖片即可。l 將效果圖化整為零，精確選擇頁(yè)面框架必須的區(qū)域切片。l切片數(shù)量不在多，適可而止，結(jié)構(gòu)較簡(jiǎn)單的網(wǎng)頁(yè)切片數(shù)一般在20片以內(nèi)。l表格、邊框等細(xì)節(jié)交由css實(shí)現(xiàn)。化學(xué)多媒體軟件設(shè)計(jì)32 2.3 切片步驟 參考步驟：l1.放大圖片，觀察細(xì)節(jié)部分，可利用輔助線和網(wǎng)格提高切片準(zhǔn)確度。l2.切片隱藏文字內(nèi)容，DW中重新插入l3.圍繞布局，保持圖片區(qū)域完整l4.規(guī)范命名切片l5.圖片全部歸入images子目錄化學(xué)多媒體軟件設(shè)計(jì)33切片前先分析頁(yè)面結(jié)構(gòu) 2.3 切片步驟切片分析：頁(yè)面主要由5塊組成：ban

11、ner、navigation、中間大圖模塊、文章列表以及copyright放大圖片觀察頁(yè)面的細(xì)節(jié)部分，看看哪些是可以直接用css控制的邊框和單色背景用css定義，不必切出。重復(fù)背景也不必全部切出，切出一像素再用css的background:repeat屬性控制。隱藏文字內(nèi)容切出所需切片Tips:可放大源圖，利用輔助線和網(wǎng)格提高切片準(zhǔn)確度；邊框無(wú)需切出，由css實(shí)現(xiàn)化學(xué)多媒體軟件設(shè)計(jì)34 2.3 切片步驟導(dǎo)出按住Shift鍵可選擇多個(gè)要導(dǎo)出的切片【文件】【圖像預(yù)覽】 ，格式選JPEG，品質(zhì)80, 【導(dǎo)出】勾選1、4項(xiàng)，切片放在images文件夾下， 【導(dǎo)出】?；瘜W(xué)多媒體軟件設(shè)計(jì)35 2.4 切片

12、技巧 切片命名語(yǔ)義化中文名建議命名中文名建議命名導(dǎo)航nav欄目column頁(yè)頭banner/header側(cè)欄sidebar版權(quán)欄copyright/footer搜索欄search/searchbar內(nèi)容content/text背景background/bg滑動(dòng)圖slide新聞news化學(xué)多媒體軟件設(shè)計(jì)36 2.4 切片技巧 切片命名語(yǔ)義化化學(xué)多媒體軟件設(shè)計(jì)37 2.4 切片技巧 重構(gòu)對(duì)切片的要求切我所選以清潔生產(chǎn)首頁(yè)實(shí)例，譬如我只想切好了banner和slider，只要按住shift，然后鼠標(biāo)左鍵選中想要的切片，按剛才的方法導(dǎo)出即可。化學(xué)多媒體軟件設(shè)計(jì)38 2.4 切片技巧 其他需要注意之處： a.輸出切片頁(yè)面用英文名！b. 原則：盡量對(duì)齊切，避免出現(xiàn)跨行跨列的切法。c.頁(yè)面邊框無(wú)需切出，由css實(shí)現(xiàn)即可。d. Fw導(dǎo)出切片前，可隱藏網(wǎng)頁(yè)整體邊框不導(dǎo)出，Dw中用css實(shí)現(xiàn)。e.純色區(qū)域不用切，如前面的文章列表背景，可直接用css實(shí)現(xiàn)；漸變色區(qū)域切一像素即可 ，如前面提到的導(dǎo)航條、copyright。化學(xué)多媒體軟件設(shè)計(jì)