資源描述：
《教程網(wǎng)頁設(shè)計(jì)+入門+切圖》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、網(wǎng)頁切圖、網(wǎng)頁美工May31,200715:04一，基本概念1，切圖，是一種網(wǎng)頁制作技術(shù)，他是將美工效果圖轉(zhuǎn)換為頁面效果圖的重要技術(shù)。Fireworks也提供了切圖技術(shù)，F(xiàn)lash則直接提供了網(wǎng)頁格式輸出技術(shù)（不需要切圖）。2，切片，是切圖的直接結(jié)果，切圖實(shí)際上就將圖切分為一系列的切片二，切圖操作過程1，切圖工具圖標(biāo)的識別2，切圖基本操作1）基本操作有兩個：劃分切片和編輯切片劃分切片，是使用切片工具，在原圖上進(jìn)行切分的操作。編輯切片，是對切分好的切片進(jìn)行編輯的操作，編輯包括對切片的名稱、尺寸等的修改等等下面我們看一下這兩個操作2）基本操
2、作如果想移動某個切片，可以使用“切片選擇工具”選擇某個切片，并用鼠標(biāo)進(jìn)行拖動，也可以使用實(shí)現(xiàn)，另外如果想精確的細(xì)微移動，則可以使用實(shí)現(xiàn)如果想將某個切片存為某個圖片輸出，可以使用“切片選擇工具”選擇某個切片，然后選擇“文件”菜單，并選擇“存儲為Web所用格式(W)...”，然后在彈出的界面中...3，切圖技巧1）一張圖，可以有多種切分方式，如下：既然存在n多種切圖方式，那么是不是哪種方式都可以滿足要求？答案：不是的。一般對頁面的要求是，當(dāng)頁面大小發(fā)生變化時(shí)，頁面的各部分可以相對自由地伸縮，而不會使頁面發(fā)生錯亂或變形等問題。我們切分好的圖是
3、要輸出為Html格式的網(wǎng)頁文件的，然后通過網(wǎng)頁編輯器，將該頁面進(jìn)行加工，做成符合要求（例如可以根據(jù)內(nèi)容多少，自由伸縮等）的模板頁面。這其中，切圖的方式直接影響著模板頁面是否能夠滿足實(shí)際的要求。我們來看一個例子：2）切圖技巧主要有幾下幾點(diǎn)屬性均勻的區(qū)域適合分為一個切片，均勻主要是指顏色和形狀都沒有變化，或者在X或在Y方向上沒有變化。屬性漸變的區(qū)域適合分為一個切片，漸變有兩種表現(xiàn)形式顏色漸變形狀漸變根據(jù)原圖的內(nèi)容布局，確定整體的切分策略，即切分要有分塊的思想，要在想象中將整個布局看成是一個兩個table，然后在具體到每個table，去考慮里
4、面應(yīng)該如何切。下面通過幾個圖例來說明三，切圖的Html格式輸出切圖完成，就可以輸出為Html格式的頁面了。在“文件”菜單中，選擇“存儲為Web所用格式(W)...”，在彈出的頁面中直接選擇“存儲”，然后在彈出的界面中，填入文件名，保存類型選擇“HTML和圖像(*.html)”，設(shè)置為“默認(rèn)設(shè)置”即可，切片選擇“所有切片”。然后點(diǎn)擊“保存”按鈕就可以了。后面的事情，就是編輯輸出的Html頁面了。網(wǎng)頁制作：從切圖到生成網(wǎng)頁鑒于很多朋友問到如何切圖這個問題，又鑒于這個問題可大可小，一兩句話是絕對講不清楚的，所以今天有空閑在家里就舉一個簡單的例
5、子來說明這個問題吧!OK，讓我們開始： step1:在PhotoShop中打開設(shè)計(jì)稿，如下圖 選擇工具板上的slice切片工具，先大刀闊斧的切上一番!技巧：大面積的色塊單獨(dú)切成一塊，盡可能的保持在水平線上的整齊(這個問題你們在后面的制作頁面中深有感觸)切好的圖如下所示： step2:在PhotoShop中選擇file-saveforweb...來輸出，這里要注意一些參數(shù)的選擇：我們來看看紅線所標(biāo)識的1，2，3部分，將1所示的切片工具選中，然后點(diǎn)選2所示的圖片，在3所示的地方選擇色值，如果色彩單一可以選擇盡量小的色值位;(為什么要這
6、樣？？)答案：這樣會大大減小文件的大小，同時(shí)又能比較好的保持圖片的色彩；設(shè)置好后點(diǎn)OK輸出文件，這里的文件包括了一個htm和images文件夾，如圖： 這里候你的頁面才算完成了一半，接下來在Dreamweaver里建立站點(diǎn)： step3:定義站點(diǎn)： 在圖示左邊的sitename中為站點(diǎn)起一個名字，如example然后在下面的localrootfolder中選擇我們剛才導(dǎo)出的站點(diǎn)所以的文件夾；站點(diǎn)建好后在sitemap中我們看到： (為什么要建立站點(diǎn)？)建立站點(diǎn)可以使我們養(yǎng)成一種很好的習(xí)慣，就是把一個網(wǎng)站所包含的文件，文件夾有條理
7、的放在一起，同時(shí)我們很容易的將這個站點(diǎn)移動到其它地方而不用對文件路徑進(jìn)行任何改寫!(當(dāng)然如果你實(shí)在不想建立站點(diǎn)也沒人強(qiáng)求你，我在事際工作中就遇到這樣的同事，沒有習(xí)慣為頁面建立站點(diǎn)，當(dāng)然后果的要麻煩少少了) step4:重新制作頁面表格(為什么？)通常在photoshop中直接導(dǎo)出的htm文件是不可以直接使用的，因?yàn)橛行┑胤皆趯?shí)際運(yùn)用時(shí)要作調(diào)整，比如有動態(tài)文字的地方，我們需要在頁面中輸入頁不是使用圖片，那么圖片就要把它拿走，如果你在直接生成的htm中拿走不想要的圖片再加上你想要的東西，你們發(fā)現(xiàn)頁面將變得慘不忍睹，整個頁面可能完全亂了套!
8、好了，先來分析一下導(dǎo)出的htm文件吧：根據(jù)這個頁面表格所示，我們在新的頁面中建立一個三行一列的表格: 注意，把cellpadding,cellspacing,border三項(xiàng)值設(shè)為0，這個很重要；因?yàn)閳D片
