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

化學(xué)多媒體軟件設(shè)計頁面設(shè)計及切片基礎(chǔ)_入門篇2013.11.04PPT制作：前端設(shè)計組尹海施目錄

CONTENTS1.頁面設(shè)計1.1設(shè)計流程1.2需求分析1.3常見網(wǎng)頁布局1.4網(wǎng)頁配色1.5繪制設(shè)計圖2.切片基礎(chǔ)2.1切片簡介2.2切片思路2.3切片步驟2.4切片技巧11

頁面設(shè)計1.1設(shè)計流程1.2需求分析1.3常見網(wǎng)頁布局1.4網(wǎng)頁配色1.5繪制設(shè)計圖21.1設(shè)計流程1.明確需求（網(wǎng)站整體結(jié)構(gòu)與功能，設(shè)計風(fēng)格，重構(gòu)難度）2.確定布局和配色3.Ps/Fw繪制效果圖（先搭建整體框架，再雕琢細(xì)節(jié)）31.2需求分析磨刀不誤砍柴工，科學(xué)進(jìn)行需求分析，是成功的網(wǎng)頁設(shè)計不可缺少的步驟如何分析？4

Step1:確定主題、網(wǎng)站整體功能和風(fēng)格主題：學(xué)院網(wǎng)站功能：展示學(xué)院風(fēng)采、新聞動態(tài)風(fēng)格：較為嚴(yán)謹(jǐn)、正式5

Step1:確定主題、網(wǎng)站整體功能和風(fēng)格主題：課程介紹功能：介紹課程、分享課程資源風(fēng)格：與學(xué)院網(wǎng)站相比，更為開放、新穎6

Step1:確定主題、網(wǎng)站整體功能和風(fēng)格主題：個人網(wǎng)站功能：展示個人風(fēng)采風(fēng)格：開放、自由，無固定版式7Step2:確定網(wǎng)站欄目結(jié)構(gòu)規(guī)劃好網(wǎng)站的層次結(jié)構(gòu)。清晰網(wǎng)站的導(dǎo)航，方便用戶無障礙的使用網(wǎng)站，了解網(wǎng)站提供的功能。8Step3:確定頁面的版式布局根據(jù)網(wǎng)站類型、展示內(nèi)容多少確定布局，畫效果圖之前，不妨先畫一個頁面布局示意圖，這會讓你思路更清晰，助你事半功倍。9Step4:確定網(wǎng)頁配色網(wǎng)頁的色彩，是訪問者登錄頁面時的第一印象，好的頁面色彩能給用戶留下深刻的印象，并且能產(chǎn)生很好的視覺效果和營造網(wǎng)站整體氛圍的作用。根據(jù)網(wǎng)站風(fēng)格選擇主色調(diào)、輔助色、特征色，形成一套配色方案。10

1.3常見網(wǎng)頁布局1上下結(jié)構(gòu)式（經(jīng)典厚樸版式）2左右結(jié)構(gòu)式3上左右結(jié)構(gòu)式4水平條紋式布局5不規(guī)則布局11①上下結(jié)構(gòu)式（經(jīng)典厚樸版式）上方為banner、導(dǎo)航條中間為slide，（動態(tài)的公司企業(yè)形象、廣告區(qū)域）下方為正文、內(nèi)容部分底部為版權(quán)部分②左右結(jié)構(gòu)式12左側(cè)是導(dǎo)航條右側(cè)是正文、內(nèi)容或公司企業(yè)形象展示③上左右結(jié)構(gòu)式13左側(cè)為點擊出現(xiàn)的細(xì)分欄目導(dǎo)航條右側(cè)為內(nèi)容區(qū)域上方為主要的菜單導(dǎo)航條④水平條紋式布局

14使用橫向條紋式的網(wǎng)頁布局，每條紋理區(qū)分不同內(nèi)容。水平方式布滿屏幕，并使用不同的背景顏色或紋理，就像全屏的背景的網(wǎng)頁設(shè)計一樣，視覺效果很好。排版多樣化，網(wǎng)站內(nèi)容表達(dá)也非常清晰。

⑤不規(guī)則布局

15此類頁面的信息量少，通常一張形象、廣告照片下來，重在渲染網(wǎng)站的氣氛。類似封面類型，有點擊進(jìn)入下頁的入口，適合于產(chǎn)品宣傳或個人網(wǎng)站。16

1.4網(wǎng)頁配色色彩搭配的原則:

特色鮮明搭配合理（避免采用純度很高的單一色彩，這樣容易造成視覺疲勞）講究藝術(shù)性網(wǎng)頁配色不宜超過三種。(三種是從色相上來說的)17

1.4網(wǎng)頁配色216網(wǎng)頁安全色是當(dāng)紅色（Red）、綠色（Green）、藍(lán)色（Blue）顏色數(shù)字信號值（DACCount）為0、51、102、153、204、255時構(gòu)成的顏色組合，它一共有6*6*6=216種顏色（其中彩色為210種，非彩色為6種）。網(wǎng)頁安全色18

1.4網(wǎng)頁配色網(wǎng)頁安全色

216網(wǎng)頁安全色在不同硬件環(huán)境、操作系統(tǒng)、瀏覽器中都能正常顯示，可避免原有的顏色失真問題。

但隨著顯示屏質(zhì)量提升，我們并不需要刻意地追求使用局限在216網(wǎng)頁安全色范圍內(nèi)的顏色，而是應(yīng)該更好地搭配使用安全色合非安全色。

紅色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥

橙色代表光明、華麗、興奮、甜蜜、快樂

黃色代表明朗、愉快、高貴、希望

綠色代表新鮮、平靜、和平、柔和、安逸、青春

藍(lán)色代表深遠(yuǎn)、永恒、沉靜、理智、誠實、寒冷

紫色代表優(yōu)雅、高貴、魅力、自傲

白色代表純潔、純真、樸素、神圣、明快

灰色代表憂郁、消極、謙虛、平凡、沉默、中庸、寂寞黑色代表崇高、堅實、嚴(yán)肅、剛健、粗莽19

1.4網(wǎng)頁配色色彩的象征情感ColorSchemeDesignerAdobeKuler20

1.4網(wǎng)頁配色配色工具推薦21

1.4網(wǎng)頁配色淺析網(wǎng)頁配色實例產(chǎn)品類：主要目的需求展示產(chǎn)品的特性，促進(jìn)瀏覽者消費欲望，頁面色彩可根據(jù)具體產(chǎn)品定位做多樣化設(shè)計。簡潔灰白色調(diào)給網(wǎng)站帶來科技感和現(xiàn)代感。22

1.4網(wǎng)頁配色淺析網(wǎng)頁配色實例2)公司、企業(yè)類：展示企業(yè)形象，加深提高品牌印象，可應(yīng)用logo的主色系設(shè)計，達(dá)到品牌統(tǒng)一。沿用logo的深藍(lán)色為主色調(diào)，具有統(tǒng)一感；此外，深藍(lán)色帶給人更強(qiáng)的科技感。23

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

元素缺乏對齊；

元素大小與間距控制不當(dāng)，

配色沖突與使用某些不合適的顏色。

切片基礎(chǔ)2722.1切片簡介2.2切片思路2.3切片步驟2.4切片技巧28

2.1切片簡介何為切片

顧名思義，把圖像切成幾部分，再重新組合在一起。常用的切片軟件Fireworks、Photoshop切片目的為了為網(wǎng)頁下載提速，節(jié)約系統(tǒng)資源。

實現(xiàn)程序代碼所無法達(dá)到的美工效果。29

2.1切片簡介這是在PS下的切片30

2.1切片簡介這是在Fw下的切片見圖中淺綠色框31

2.2切片思路參考思路：分析網(wǎng)頁布局，分解出基本的結(jié)構(gòu)，獲得網(wǎng)頁所需的主要圖片。切出所需要的圖片即可。將效果圖化整為零，精確選擇頁面框架必須的區(qū)域切片。切片數(shù)量不在多，適可而止，結(jié)構(gòu)較簡單的網(wǎng)頁切片數(shù)一般在20片以內(nèi)。表格、邊框等細(xì)節(jié)交由css實現(xiàn)。32

2.3切片步驟參考步驟：1.放大圖片，觀察細(xì)節(jié)部分，可利用輔助線和網(wǎng)格提高切片準(zhǔn)確度。2.切片隱藏文字內(nèi)容，DW中重新插入3.圍繞布局，保持圖片區(qū)域完整4.規(guī)范命名切片5.圖片全部歸入images子目錄33切片前先分析頁面結(jié)構(gòu)2.3切片步驟>>切片分析：頁面主要由5塊組成：banner、navigation、中間大圖模塊、文章列表以及copyright放大圖片觀察頁面的細(xì)節(jié)部分，看看哪些是可以直接用css控制的邊框和單色背景用css定義，不必切出。重復(fù)背景也不必全部切出，切出一像素再用css的background:repeat屬性控制。隱藏文字內(nèi)容切出所需切片Tips:①可放大源圖，利用輔助線和網(wǎng)格提高切片準(zhǔn)確度；②邊框無需切出，由css實現(xiàn)342.3切片步驟>>導(dǎo)出按住Shift鍵可選擇多個要導(dǎo)出的切片【文件】【圖像預(yù)覽】，格式選JPEG，品質(zhì)80,【導(dǎo)出】勾選1、4項，切片放在images文件夾下，【導(dǎo)出】。35

2.4切片技巧①切片命名語義化中文名建議命名中文名建議命名導(dǎo)航nav欄目column頁頭banner/header側(cè)欄sidebar版權(quán)欄copyright/footer搜索欄search/searchbar內(nèi)容content/text背景background/bg滑動圖slide新聞news36

2.4切片技巧②切片命名語義化37

2.4切片技巧③重構(gòu)對切片的要求——切我所選以清潔生產(chǎn)首頁實例，譬如我只想切好了banner和slider，只要按住shift，然后鼠標(biāo)左鍵選中想要的切片，按剛才的方法導(dǎo)出即可。38

2.4切片技巧④其他需要注意之處：輸出切片頁面用英文名！原則：盡量對齊切，避免出現(xiàn)跨行跨列的切法。頁面邊框無需切出，由css實現(xiàn)即可。Fw導(dǎo)出切片前，可隱藏網(wǎng)頁整體邊框不導(dǎo)出，Dw中用css實現(xiàn)。純色區(qū)域不用切，如前面的文章列表背景，可直接用css實現(xiàn)；漸變色區(qū)域切一像素即可，如前面提到的導(dǎo)航條、copyright。39