用photoshop制作web标准页面
作者:admin 日期:2006-08-08
先前看过一个类似的教程,可就是老记不起来,今天在做电子期刊的时候,一下子想起了这个东东,在做好PSD,切好片之后,我就琢磨着乍么让这photoshop可以自动生成一个DIV+CSS的页面,这样比较符合现在的趋势。一阵乱搞乱整之后,我把他整出来了,大家认真看步骤喔:
step1:
将要进行页面输出的PSD源文件(其实其它的也可),用工具箱中的切割工具,将PSD切割好,如图
![](attachments/month_0608/08125842fc5i_1.jpg)
step2:
选择菜单栏中的 文件--->存储为Web所用格式
![](attachments/month_0608/081259282yq5_2.jpg)
step3:
点击预设旁边的小三角,对输出的图像进行设置
![](attachments/month_0608/0813003607yc_3.jpg)
step4:按照如下图进行设置
![](attachments/month_0608/08130113a91e_4.jpg)
step5:确定后,返回第三步的页面,点击存储就完成咯.
![](attachments/month_0608/08130224liao_5.jpg)
我们来看一下它生成的代码:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
index
![""]("images/index_01.gif")
![""]("images/index_02.gif")
![""]("images/index_03.gif")
![""]("images/index_04.jpg")
![""]("images/index_05.gif")
![""]("images/index_06.gif")
![""]("images/index_07.gif")
![""]("images/index_08.gif")
![""]("images/index_09.gif")
![""]("images/index_10.gif")
![""]("images/index_11.gif")
![""]("images/index_12.gif")
![""]("images/index_13.gif")
![""]("images/index_14.gif")
![""]("images/index_15.gif")
![""]("images/index_16.gif")
![""]("images/index_17.gif")
![""]("images/index_18.gif")
![""]("images/index_19.gif")
![""]("images/index_20.gif")
![""]("images/index_21.gif")
可以看到,CSS我们就不用写得这么劳神了,不过毕意是机器自己生成的,不能算得上是完全符合标准,我个人认为,在做一些网站的导航页应该比较有用,主要是在页面元素少的时候可以用吧。整个网页的构架基本上符合了DIV+CSS的架构,CSS的生成也很不错喔!
很简单的,建议大家看了之后可以马上试试!可能有些错误,欢迎大家多多指教:)
step1:
将要进行页面输出的PSD源文件(其实其它的也可),用工具箱中的切割工具,将PSD切割好,如图
![](attachments/month_0608/08125842fc5i_1.jpg)
step2:
选择菜单栏中的 文件--->存储为Web所用格式
![](attachments/month_0608/081259282yq5_2.jpg)
step3:
点击预设旁边的小三角,对输出的图像进行设置
![](attachments/month_0608/0813003607yc_3.jpg)
step4:按照如下图进行设置
![](attachments/month_0608/08130113a91e_4.jpg)
step5:确定后,返回第三步的页面,点击存储就完成咯.
![](attachments/month_0608/08130224liao_5.jpg)
我们来看一下它生成的代码:
复制内容到剪贴板
程序代码
![程序代码](images/code.gif)
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
![""]("images/index_01.gif")
![""]("images/index_02.gif")
![""]("images/index_03.gif")
![""]("images/index_04.jpg")
![""]("images/index_05.gif")
![""]("images/index_06.gif")
![""]("images/index_07.gif")
![""]("images/index_08.gif")
![""]("images/index_09.gif")
![""]("images/index_10.gif")
![""]("images/index_11.gif")
![""]("images/index_12.gif")
![""]("images/index_13.gif")
![""]("images/index_14.gif")
![""]("images/index_15.gif")
![""]("images/index_16.gif")
![""]("images/index_17.gif")
![""]("images/index_18.gif")
![""]("images/index_19.gif")
![""]("images/index_20.gif")
![""]("images/index_21.gif")
可以看到,CSS我们就不用写得这么劳神了,不过毕意是机器自己生成的,不能算得上是完全符合标准,我个人认为,在做一些网站的导航页应该比较有用,主要是在页面元素少的时候可以用吧。整个网页的构架基本上符合了DIV+CSS的架构,CSS的生成也很不错喔!
很简单的,建议大家看了之后可以马上试试!可能有些错误,欢迎大家多多指教:)
![](images/Cprevious.gif)
![](images/Cnext.gif)
![](images/From.gif)
![](images/icon_trackback.gif)
![](images/tag.gif)
![](images/notify.gif)
评论: 5 | 引用: 391 | 查看次数: 25427
发表评论
方便的话,你可以加我QQ(20441812)吗?