—— DIV+CSS网页切图 ——

PSD网页切图制作HTML全过程教程

  起初时,正在您的计较机中创修一个文献夹。我把它定名为zmool。再正在文献夹中创修新文献夹images,放网站的全体图像。接下来掀开代码编辑器(Dreamweaver),并正在根目次下创修一个HTML文献名为index.html,这是咱们的主页模板。现正在创修一个新的CSS文献,并将其定名为style.css文献。如下图:

  掀开index.html文献。正在head标签顶部,增加链接到您的样式外(style.css)。你可能应用下面的代码。

  现正在,咱们将配置HTML文献组织。配置3个个人(题目,实质,页脚)像下面相通:

  咱们的PSD文献包罗了许众纹理成果,咱们要把这些全体切出来,然后,用代码增加到网页上面,使div页面成果和安排的成果抵达相似。

  现正在正在photoshop内里掀开原先安排好的, 隐秘于是的图层,除靠山层外.

  现正在采用的切片用具,遴选靠山,保留网页web花式按(ALT +shift+Ctrl + S)。然后保留的图像文献夹文献名为background.jpg。

  掀开style.css文献,配置基础样式,又有靠山样以及主体个人的宽度,如下代码:

  返回photoshop,隐秘于是图层,除头部靠山外,并用同样的措施,把头部靠山图片切割保留为web花式,保留文献名为head.jpg。

  正在这时,切割logo层,隐秘全体图层,包罗靠山层,如上同样措施切割logo层保留为logo.png,注意:保留为png花式图片

  正在PSD文献里,隐秘其他于是图层,只留下按钮图层个人,切下按钮个人,保留png花式,定名为button.png.

  现正在咱们把这些图片增加到页面中去,切换到css文献页面,增加如下代码,这里包罗靠山样式,和按钮的样式.

  起首,正在你的PSD文献中,隐秘除页脚和页脚纹理层外的其他层,然后把页脚文献夹的东西切片并保留为footer.jpg.

  然后再切一遍,把按钮和鸟的图形切下来.判袂取名为follow.png和bird.jpg.

  到现正在就算是竣事了,不大白专家有没有看懂,不懂的就留言,什么地方不懂,我再增加点窜下,哈哈~ .

Copyright © 2002-2019 添彩网网络科技有限公司 版权所有 网站地图