如何用photoshop进行网页制作
发布网友
发布时间：2022-04-20 06:24
共2个回答
懂视网
时间：2022-05-11 15:14
用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调整代码。
热心网友
时间：2022-05-11 12:22
HTML+CSS+JS，这是广义上的网页三元素，HTML负责骨骼，CSS负责血肉，JS负责行为动作。其中浏览器中表现的画面约等于(html+css)，但仅仅拥有他们是表现不出设计师们大脑中天马行空，不拘一格的想象力的，因此才引入了PSD作为设计稿。
这就好比，你完全自己DIY一个高达，你需要先有一副高达图片（PSD），再通过图片中的表现自己搭建支撑的骨架（HTML），再用各式喷漆、马克笔（CSS）去勾画、完善细节。
那么回到问题上来，怎么用PS做网页？假定adobe体系中，PS永远只能设计网页，而Dreamweaver才能制作网页，但是依然要你自己根据设计去解构设计然后划分网页骨架，具体到html上就是根据不同的页面表现来写Div标签，制作Button按钮，用CSS控制他们的大小和位置以及表现。更进一步的话，大部分前端会手写html和css代码，因为DW有各式包括启动速度，冗余代码之类的问题。
至于响应式，这又是基于成型的html以后另一个话题了，但还是html+css，只不过通过UA检测来适应不同终端的不同展现。
