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

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

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

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

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