文档章节

psd转html

豆豆4997
 豆豆4997
发布于 2014/06/26 13:05
字数 274
阅读 123
收藏 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
青岛
项目经理
20 个看起来很棒的 Web UI 工具包

程序员们比设计师更需要这些 UI 方面的内容: 1. Mini Reminders Mini Reminders 2. Transluscent UI elements Transluscent UI elements 3. Clear Login Window Template Clear Login Windo......

oschina
2013/09/08
13.4K
15
为设计师准备的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
1K
10
25 个房地产出租和买卖网站最佳模板

Ammon Real Estate Templates DEMO || More Info Features 960 grid system, witch is based on 12 columns of 60px & 6 modules on a row Unlimited positions and colors 12 types of slid......

oschina
2013/08/15
4.1K
14
11 月份 30 个最新的免费 UI 工具包

UI 设计的朋友们有福了,很帅的免费 UI 工具包,11 月最新出品。 Publica UI Kit (Free PSD + AI) by Raul Taciu PSD Freebie UI Kit by Kamal Chaneman Mobile App UI Kit by GraphBerry Fl......

oschina
2014/11/13
14.9K
41
CSS组件库--BootFlat

Boot Flat 基于Bootstrap3.2.0的FLAT UI的CSS组件库,提供了比原生bootstrap更加丰富的页面元素组件和页面布局,适合快速地进行Web app的开发。 兼容浏览器IE8,IE9, IE10, IE11, FIREFOX,C...

raydian_yuan
2013/09/11
9.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

ERC1155实践|区块链游戏的平行宇宙和为此而生的Enjin钱包

1 摘要 恩金(Enjin)花了大半年的时间一直在完善ERC-1155这个通证协议,毫不夸张地说,该标准是现有以太坊上最适用于游戏资产的通证标准,将主流游戏中道具涉及到的一切操作经过高度抽象之后...

HiBlock
21分钟前
0
0
Oracle发布开源的轻量级 Java 微服务框架 Helidon

近日,Oracle推出了一个新的开源框架Helidon,该项目是一个用于创建基于微服务的应用程序的Java库集合。和Payara Micro、Thorntail(之前的WildFly Swarm)、OpenLiberty、TomEE等项目一样,...

关注公众号_搜云库_每天更新
27分钟前
0
0
启动线程以及安全终止线程

启动 使用start()方法可以启动线程。 start()方法的含义是告知线程规划器线程已初始化完毕,可以分给这个线程时间片了(执行run()方法)。 安全终止线程 示例代码 import java.util.concurr...

karma123
33分钟前
1
0
Python+OpenCV 图像风格迁移(模仿名画)

现在很多人都喜欢拍照(自拍)。有限的滤镜和装饰玩多了也会腻,所以就有 APP 提供了模仿名画风格的功能,比如 prisma、versa 等,可以把你的照片变成 梵高、毕加索、蒙克 等大师的风格。 这...

crossin
38分钟前
1
0
karabiner json语法

karabiner json语法 to_if_alone 如果同时制定了to, 那么to对应的key必须是非可见字符,例如control,shift或者command, 为什么呢? If to events are specified, to events are released befo...

黄威
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部