psd转html
psd转html
豆豆4997 发表于3年前
psd转html
  • 发表于 3年前
  • 阅读 117
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

以前的项目总是委托人家给psd转html,总感觉自己前端还是不错的,为啥不自己好好弄弄呢?看教程学习 多多练习 孰能生巧。

1、拿到psd图将整张psd存成一个完整的jpg(快捷键提示:alt+ctrl+shift+s)

2、DW创建网站,分为index.htm、images(文件夹)、styles.css主css。

3、查看psd开始大板块分割(感觉这里跟面向对象一样 哈哈),基本思路是header、content、footer(有时候有轮播部分可以自己进行增加)

4、修改index.htm 分为

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>首页</title>

<link href="styles.css" rel="stylesheet" type="text/css">

</head>


<body>

<!--页面开始-->

<div id="top">

   <div id="container">


  </div>

</div>

<!--欢迎区域-->

<div id="welcome">

   <div id="container">


  </div>

</div>

<!--主内容区域-->

<div id="main">

   <div id="container">

<!--菜单区域-->

    <div id="sidebar"></div>

     <!--内容区域-->

    <div id="content"></div>

  </div>

</div>

 <!--页脚区域-->

<div id="footer">

<div id="container">


  </div>

</div>

</body>

</html>

5、将截图与页面通过css进行对应完成初步的页面呈现。

6、进行细节的细化。


共有 人打赏支持
粉丝 3
博文 12
码字总数 1438
×
豆豆4997
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: