文档章节

psd转html

豆豆4997
 豆豆4997
发布于 2014/06/26 13:05
字数 274
阅读 127
收藏 1

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

以前的项目总是委托人家给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、进行细节的细化。


© 著作权归作者所有

豆豆4997
粉丝 2
博文 12
码字总数 1438
作品 0
青岛
项目经理
私信 提问
加载中

评论(0)

[转] 有一种生涯,叫PSD2HTML

CSS 诞生以前,如果谁拿着自己的 Photoshop 设计稿找人转换成 Web 页面,他只能失望。CSS 让一种不可能的生涯成为现实,PSD to HTML 或 XHTML,如今这是一个成熟的行业,本文搜集了40个从事 ...

红薯
2009/03/30
336
0
移动H5页面前端制作

【业务需求】 1、PSD文件转HTML5+CSS3; 2、页面内触发链接和按钮需有动效,页面与页面之间增加左/右滑入; PSD文件下载地址: 链接:http://pan.baidu.com/s/1eSwldF8 密码:87xc 【人员要求...

阿尔卑斯奶糖
2016/08/15
41
7
为设计师准备的15个免费界面设计元素 PSD

Free PSD UI Kits Impressionist UI Free – User Interface Pack Futurico – Free User Interface Elements Pack Free PSD/HTML Web UI Elements Kit UI Kit Blaubarry Ui Kit Dark web a......

虫虫
2012/04/08
2K
10
一篇真正教会你开发移动端页面的文章(二)

移动端开发的干货篇 之前写了一篇文章《一篇真正教会你开发移动端一面的文章(一)》。那是本篇文章的基础,如果没有阅读过的同学可以去看看,今天就给大家带来干货,真真正正的讲到如何很好的...

神奇的小胖子
2019/09/04
0
0
票据交易类APP原型设计

[背景] 公司企业网站首页需要修改 [需求] 公司企业网站首页需要修改。目前的版面面是2014年做,目前已经请设计员 完成了设计,并提供版面设计员原始的PSD文件。 现在需要把这个PSD文件转换为...

书_heng
2016/06/28
14
2

没有更多内容

加载失败,请刷新页面

加载更多

如何限制利用spring boot 框架自动限制上传文件

spring:   application:     name: appname   servlet:     multipart:       enabled: true       max-file-size: 512MB       max-request-size: 512MB @Ex...

osc_31d5oo2i
29分钟前
24
0
NATAPP1分钟快速新手图文教程(远程办公程序员联调神器)

NATAPP官方地址:https://natapp.cn/ 应用场景:前后端异地联调、系统演示、远程临时访问 首先在本站注册账号 点击注册 登录后,点击左边 购买隧道,免费/付费均可 根据需要选择隧道协议,这里以...

明德先生
31分钟前
16
0
李子柒的视频为什么这么吸引人?对她在B站上发布的视频进行分析

前言 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。 作者:CDA数据分析师 加企鹅群695185429即可免费获取,资料全...

osc_tc2z9lbh
31分钟前
25
0
MySQL如何有效的存储IP地址

前几天,阿淼的一个朋友去面试,他回来告诉我,面试官问他 IP 地址是怎么存在数据库的?他当时也没多想,直接就回答的存字符串啊(心想:这么简单的问题,怕不是看不起我吧) 前面这段权当看...

osc_q5m9dzk0
33分钟前
32
0
一口气说出8种幂等性解决重复提交的方案,面试官懵了!

1.什么是幂等 在我们编程中常见幂等 1)select查询天然幂等 2)delete删除也是幂等,删除同一个多次效果一样 3)update直接更新某个值的,幂等 4)update更新累加操作的,非幂等 5)insert非幂等操作...

osc_kd8rd7b3
34分钟前
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部