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