一,基本概念 1,切圖,是一種網(wǎng)頁制作技術(shù),他是將美工效果圖轉(zhuǎn)換為頁面效果 圖的重要技術(shù)。 Fireworks 也提供了切圖技術(shù), Flash 則直接提供了網(wǎng) 頁格式輸出技術(shù)(不需要切圖)。 2,切片,是切圖的直接結(jié)果,切圖實際上就將圖切分為一系列的切 片 二,切圖操作過程 1,切圖工具圖標(biāo)的識別
2,切圖基本操作
1)基本操作有兩個:劃分切片和編輯切片 劃分切片,是使用切片工具,在原圖上進(jìn)行切分的操作。 編輯切片,是對切分好的切片進(jìn)行編輯的操作,編輯包括對切片的名 稱、尺寸等的修改等等 下面我們看一下這兩個操作 2)基本操作
如果想移動某個切片,可以使用“切片選擇工具”選擇某個切片,并用 鼠標(biāo)進(jìn)行拖動,也可以使用實現(xiàn),另外如果想精確的細(xì)微移動,則可 以使用實現(xiàn) 如果想將某個切片存為某個圖片輸出, 可以使用“切片選擇工具”選擇 某個切片,然后選擇“文件”菜單,并選擇“存儲為 Web 所用格式 (W)...”,然后在彈出的界面中...
3,切圖技巧 1)一張圖,可以有多種切分方式,如下:
既然存在 n 多種切圖方式,那么是不是哪種方式都可以滿足要求? 答案:不是的。 一般對頁面的要求是,當(dāng)頁面大小發(fā)生變化時,頁面的各部分可以相 對自由地伸縮,而不會使頁面發(fā)生錯亂或變形等問題。 我們切分好的圖是要輸出為 Html 格式的網(wǎng)頁文件的,然后通過網(wǎng)頁 編輯器, 將該頁面進(jìn)行加工, 做成符合要求 (例如可以根據(jù)內(nèi)容多少, 自由伸縮等)的模板頁面。這其中,切圖的方式直接影響著模板頁面 是否能夠滿足實際的要求。 我們來看一個例子:
2)切圖技巧主要有幾下幾點 屬性均勻的區(qū)域適合分為一個切片, 均勻主要是指顏色和形狀都沒有 變化,或者在 X 或在 Y 方向上沒有變化。 屬性漸變的區(qū)域適合分為一個切片,漸變有兩種表現(xiàn)形式 顏色漸變 形狀漸變 根據(jù)原圖的內(nèi)容布局, 確定整體的切分策略, 即切分要有分塊的思想, 要在想象中將整個布局看成是一個兩個 table,然后在具體到每個 table,去考慮里面應(yīng)該如何切。 下面通過幾個圖例來說明
三,切圖的 Html 格式輸出 切圖完成,就可以輸出為 Html 格式的頁面了。 在“文件”菜單中,選擇“存儲為 Web 所用格式(W)...”,在彈出的頁 面中直接選擇“存儲”,然后在彈出的界面中,填入文件名,保存類型 選擇“HTML 和圖像(*.html)”, 設(shè)置為“默認(rèn)設(shè)置”即可, 切片選擇“所 有切片”。然后點擊“保存”按鈕就可以了。 后面的事情,就是編輯輸出的 Html 頁面了。
網(wǎng)頁制作: 網(wǎng)頁制作:從切圖到生成網(wǎng)頁