1、1導(dǎo)出JPGGIFPNG等格式觀察效果2不要合層，盡量保持每個(gè)文字圖標(biāo)圖片都有獨(dú)立圖層，這樣在DIV CSS切圖時(shí)方便隱藏顯示切圖在新建設(shè)置之后，就要開(kāi)始進(jìn)行網(wǎng)頁(yè)美工設(shè)計(jì)了，在網(wǎng)頁(yè)美工設(shè)計(jì)的過(guò)程中要注意1 注意頁(yè)面的分塊，著手設(shè)計(jì)一個(gè)頁(yè)面的時(shí)候，你必須根據(jù)所掌握的內(nèi)容，以及其風(fēng)格，對(duì)頁(yè)面的；網(wǎng)頁(yè)設(shè)計(jì)好后的切圖是將設(shè)計(jì)稿切成便于制作成頁(yè)面的圖片，并完成html+css布局的靜態(tài)頁(yè)面，有利于交互，形成良好的視覺(jué)感通俗來(lái)講，把一張?jiān)O(shè)計(jì)圖利用到切片工具，把自己所需的切成一張張小圖，然后用DIV+CSS完成靜態(tài)頁(yè)面書(shū)寫(xiě)，完成CSS布局設(shè)計(jì)好的網(wǎng)頁(yè)都需要切圖，主流的是dreamweaverphotoshop軟件；可以，把div 的大小設(shè)成和圖片的大小一樣 就行 也可以不改圖片大小 但是如果圖片比div大 就會(huì)看不到一部分 如果圖片小了，會(huì)自動(dòng)重復(fù)圖片鋪滿整個(gè)div 可以設(shè)置repeat 讓背景圖片重復(fù) div 一定要設(shè) 大小 不然div沒(méi)有內(nèi)容 就不會(huì)顯示背景了。

2、UI設(shè)計(jì)中的“切圖”是指將設(shè)計(jì)師的設(shè)計(jì)轉(zhuǎn)化為實(shí)際網(wǎng)頁(yè)的過(guò)程這一過(guò)程是將設(shè)計(jì)師的“理想”變?yōu)椤艾F(xiàn)實(shí)”的關(guān)鍵步驟具體操作中，設(shè)計(jì)師會(huì)將psd文件進(jìn)行切片重組，以便于利用divcssjs等前端開(kāi)發(fā)代碼來(lái)生成網(wǎng)頁(yè)通過(guò)這樣的技術(shù)，設(shè)計(jì)師能夠?qū)⑵矫嬖O(shè)計(jì)轉(zhuǎn)化為動(dòng)態(tài)交互式的網(wǎng)頁(yè)界面對(duì)于這一技術(shù)有；2圖片什么樣，就切成什么樣，每張小圖都單獨(dú)切出來(lái)注意要做成png格式保存，背景設(shè)置為透明，然后寫(xiě)html的時(shí)候，用css畫(huà)出等大的不規(guī)則圖形，吧圖片當(dāng)做背景加進(jìn)去，然后用css絕對(duì)定位一下，如有鏈接加鏈接，完美實(shí)現(xiàn)備注css畫(huà)不規(guī)則圖形，網(wǎng)上可以搜到教程，看一看就差不多，不難至于；如果不想使用PS來(lái)編輯圖片，可以在網(wǎng)頁(yè)中直接用多個(gè)DIV+CSS實(shí)現(xiàn)，先設(shè)置好各個(gè)DIV的位置和大小，然后用CSS指定該圖片為背景圖片，只要把backgroundposition的值計(jì)算好，就可以使DIV顯示圖片的不同部位，實(shí)現(xiàn)拼圖效果；2圖片什么樣，就切成什么樣，每張小圖都單獨(dú)切出來(lái)注意要做成png格式保存，背景設(shè)置為透明，然后寫(xiě)html的時(shí)候，用css畫(huà)出等大的不規(guī)則圖形，吧圖片當(dāng)做背景加進(jìn)去，然后用css絕對(duì)定位一下，如有鏈接加鏈接，完美實(shí)現(xiàn)！ 備注css畫(huà)不規(guī)則圖形，網(wǎng)上可以搜到教程，看一看就差不多，不難！ 至于其他幾張圖，比較簡(jiǎn)單，簡(jiǎn)單；1首先打開(kāi)Dreamweaver插入圖片2點(diǎn)擊插圖右鍵選擇CSS樣式新建3點(diǎn)擊新建后彈出的對(duì)話框自定義名稱即可4后在彈出的對(duì)話框中設(shè)置需要的效果即可，可以自定義類(lèi)型背景區(qū)塊定位等；切圖就是把用設(shè)計(jì)軟件設(shè)置好的圖片切成相應(yīng)的大小，切圖后再把圖片上傳就可以可以加快顯示速度，不用等整個(gè)圖片都下載以后顯示PS切圖步驟1打開(kāi)PS，然后點(diǎn)擊切片工具2點(diǎn)擊切片工具后，就可以把圖片切成需要的大小3切好圖片后，點(diǎn)擊導(dǎo)出web所用格式4進(jìn)入導(dǎo)出web所用格式頁(yè)面，按住shift。

3、1，就是DW布局而已2，制作步驟效果圖切片不用輸出自動(dòng)生成的頁(yè)面，那個(gè)東西沒(méi)用直接到DW布局如果還是不懂，你要還是學(xué)生可以問(wèn)老師，這是作為學(xué)生唯一的好處想當(dāng)初我都是自學(xué)DIV+CSS，如果你是自己學(xué)，可以用我的方法，被我教的人基本都是被我的這種方法折服哈哈~~~，那就是去別；使用ps切片，切好了保持為 web存儲(chǔ)格式 彈出的窗口可以設(shè)置保持的類(lèi)型的，可以設(shè)置成div加css的 如下圖切好片以后，文件保存為web存儲(chǔ)文件，就會(huì)彈出下面的圖片點(diǎn)擊紅框的箭頭點(diǎn)擊輸出設(shè)置如下圖選擇切片，下面就會(huì)出來(lái)生成css。

4、第一jpg的格式很多保存是有損保存，當(dāng)你就行第二次切圖后，那么效果可能會(huì)相比之前的更差一些第二還有就是 PSD文件 是方便切圖人員，去掉需要有些圖標(biāo)上面的文字，如果是jpg 你就沒(méi)有辦法去掉別告訴我，又再去用PS去掉上面的文字，那就是多此一舉，還費(fèi)事舉一個(gè)例子那個(gè)圖片就有；優(yōu)酷等視頻網(wǎng)站搜索“PSD轉(zhuǎn)HTML”里面不少的國(guó)外視頻，如果你英語(yǔ)夠好的話，會(huì)學(xué)到經(jīng)典的基礎(chǔ)也有了，仿站也會(huì)了，只要勇于嘗試自己去寫(xiě)就好了PS設(shè)計(jì)基礎(chǔ)里就有 切圖基礎(chǔ)里也有 DIV+CSS同樣也在基礎(chǔ)里 把這些綜合起來(lái)多嘗試自己動(dòng)動(dòng)手就會(huì)有所提高電腦里下載再多的教程，自己不動(dòng)手寫(xiě)，不會(huì)成為；效果圖一般都是一整張的，到網(wǎng)頁(yè)中顯示時(shí)需要是用DIV+CSS布局，把圖片拼接起來(lái)，所以需要把效果圖先切圖切成一小塊一小塊。

5、切片屬于網(wǎng)站頁(yè)面設(shè)計(jì)后，把一張效果圖切成一塊一塊的，再用div+css布局組回效果圖那個(gè)布局 切片的目的一個(gè)是為了減少網(wǎng)站打開(kāi)時(shí)的加載時(shí)間，另一個(gè)是為了網(wǎng)站靜態(tài)頁(yè)制作 你可以看到你提問(wèn)的這個(gè)頁(yè)面是由一個(gè)一個(gè)的小圖片和文字，鏈接組成的原先設(shè)計(jì)的時(shí)候是一張圖片，就是用切片切成這樣的切；css3的話就簡(jiǎn)單很多，一個(gè)大DIV寫(xiě)圓角和投影，CSS2的話就要分3快來(lái)做，中間的背景循環(huán)，2邊的背景左右各一個(gè)這樣就可以了；通俗來(lái)講，把一張?jiān)O(shè)計(jì)圖 利用到切片工具 把自己所需的切成一張張小圖，然后用DIV+CSS完成靜態(tài)頁(yè)面書(shū)寫(xiě)，完成CSS布局切圖大家都有個(gè)誤區(qū)，覺(jué)得切圖就是把圖片切出來(lái)，其實(shí)并不完全是這樣，把圖片切出來(lái)這個(gè)過(guò)程是叫切片切圖的目的第一個(gè)是讓網(wǎng)頁(yè)稿有了交互性，實(shí)現(xiàn)你平時(shí)看到的各種各樣的功能。