文档章节

psd转html

豆豆4997
 豆豆4997
发布于 2014/06/26 13:05
字数 274
阅读 121
收藏 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
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
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
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud Gateway真的有那么差吗?

前言 Spring Cloud从一开始最受大家质疑的就是网关性能,那是由于Spring Cloud最初选择了使用Netflix几年前开源的Zuul作为基础,而高性能版的Zuul 2在经过了多次跳票之后,对于Spring这样的整...

Java小铺
31分钟前
1
0
SpringBoot远程调试,远程debug你的线上项目

开发环境中代码出错了,可以利用IDE的debug功能来进行调试。那线上环境出错呢? 一、假设我们的项目是部署在tomcat中,那我们就需要对tomcat进行一定对配置,配置如下。 1. windows系统中,找...

nonnetta
36分钟前
0
0
JAVA秒杀优化方向

秒杀优化方向 将请求尽量拦截在系统上游:传统秒杀系统之所以挂,请求都压倒了后端数据层,数据读写锁冲突严重,几乎所有请求都超时,流量虽大,下单成功的有效流量甚小,我们可以通过限流、...

小贱是个程序员
43分钟前
0
0
C# 统计字符串中大写字母和小写字母的个数

static void Main() { int count1 = 0; int count2 = 0; Console.WriteLine("请输入字符串"); string str = Convert.ToString(Consol......

熊二的爸爸是谁
45分钟前
0
0
分布式服务框架之远程通讯技术及原理分析

在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如:RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等,这些名词之间到底是...

老道士
51分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部