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