|
非常多伴侣肯定都是事先运用Adobe PhotoShop，Adobe Illustrator 等软件设计一个网页的界面的。这么做能够保持最大的自由度并且有充分的空间发挥，然则设计是设计，实践就又是另一回事情了。一般把一个网站打导致和想象中的同样是一件很难的事情，你必须精通CSS，并且你不很难做到一个快速的预览，从而必须持续刷新页面并且调节关联参数。然则此刻经过Adobe机构推出的最新版Adobe Photoshop CC2017， 你能够直接在PS上面做好网页设计而后快速实现全部HTML文件的生成。
有两种办法能够做到，第1种是依靠Extract，这个办法很简单，上传PSD到Adobe Creative Cloud的云端就能够，然则需求正版。各位手头拮据的个人设计者就很难成功上传文件，因此在这儿不予介绍，敬请谅解。第二种呢便是今天要讲的，经过Adobe Photoshop的黑科技：复制CSS。
（第1次见到这个功能，我是非常惊讶的）此刻我就起始切入正题，经过我日前个人正在研发的一个学校项目为大家讲解怎样实现经过Adobe Photoshop生成网页。
第1步：设计好你的网页
打开Adobe Photoshop CC2017，新建，选取Web，选取你必须的格式，新建。这儿必须强调的是，请务必不要运用这个针对PS新手来讲最爱好的东西：栅格化图层（Rasterize Layer），虽然方便，然则对于CSS代码来讲，栅格化的图层是不能够读取出来参数的。而后请尽可能运用分组（Group）来归类每一个部件。
（请不要喷我的设计谢谢；））
如图所示，大众设计好自己的网页后起始进行分组归类，不要栅格化，除非是背景照片。另一要重视倘若是中文版的PS请务必将所有的图层改名为英文，CSS不支持中文名的变量（除了C++翻译器易语言以外应该没什么语言支持非英文的变量名字吧）。
第二步：复制CSS，接下来在Canvas1或画板1（倘若写着画板1请必定要改成英文）上面右键，而后选取复制CSS，过一会儿你的CSS就复制好啦（除非是像我的同样有非常多部件的，其他的应该都复制得火速的，基本是秒复制）！
第三部：创建CSS列表
打开任意前端编辑器（举荐Sublime编写js，这儿运用DreamWeaver方便进行CSS和Html的调试），新建CSS文档，而后按下Ctrl+V，一长串代码就出来啦！是不是很黑科技呢！
（通常报错了没事的，CSS是一种标签语言，宽容度很高，HTML同理）第四步：应用CSS
新建一个HTML文档，而后新建任意部件。拿我的网页打个比方，我在PS里面设计了一个菜单栏，菜单栏属于一个Div层（Div相当于HTML里面的图层），因此我新建一个Div，而后让class链接到我的菜单栏CSS代码。
<div class = "Rectangle1">
<button class = "MenuButtonRec" OnClick= "A()"><button>
<p class = "HomeButtonText" OnClick = "A()"><button>
</div>
以上的代码的意思是，我新建了一个Div层，而后连接到了PS里面的菜单栏，接着在里面放了一个按钮和按钮上的文字，一样链接给了相应的PS里的部件。通俗地说便是我先画了一个菜单栏，而后把按钮和按钮的字都画上去。重视这儿，最好给一个组的部件都统一新建一个Div放在Div里面，这般子能够方便管理，个人认为一个好的程序员是非常讲究代码美观的。
照片中能够看到运行网页后的效果。经过以上四步就能够快速创立一个和想象中差不多的网页，接下来放上我自己做出来的成品。
（请没视旁边的画风突变的下拉框，那个是我从网上找到套上去测试的嘿嘿嘿）咱们能够看到网页在Chrome里面运行的状态非常良好，接下来是PS里面的设计图。
几乎是一模同样的。
好啦教程到这儿就结束了，期盼大众爱好！
| 
发表于 2024-6-30 10:29:12
