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

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

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

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

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

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

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

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

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

⑤不規(guī)則布局

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

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

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

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

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

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

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

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

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

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

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

藍色代表深遠、永恒、沉靜、理智、誠實、寒冷

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

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

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

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

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

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

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

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

元素缺乏對齊；

元素大小與間距控制不當，

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

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

2.1切片簡介何為切片

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

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

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

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

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

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

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

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

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

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