DIV CSS 佈局教程網

大家可能不知道，用Photoshop也可以做出簡單的xhtml+css網頁，一起來試試吧！

　　1、在photoshop cs2中打開設計好的網站視覺設計稿。用切片工具切好。

圖1 用切片工具切好

　　2、點 “文件-》存儲為web所用格式”， 快捷鍵為ctrl+alt+shift+s ，點右上倒三角的小圖片，選擇Edit output settings。

圖2 存為Web格式

 

　　3、見圖，在第二個下拉中選擇 Slices，選擇Generate CSS ，然後在後面的下拉中選By ID。

圖3 輸出設置

　　4、點OK保存並關閉設置窗口，在Save for Web窗口中點Save按扭，在保存類型中選擇Html and Images，隨便輸入一個文件名，點保存。

圖4 設置

5、完成任務。看一下代碼，是不是xhtml+css的？

圖5 代碼

　　沒想到吧？這麼簡單就做出了個xhtml+css的頁面。當然實際應用中，這種自動生成的頁面還是不太規范，建議大家還是要用dreamweaver 8或者editplus調整代碼。