文档章节

psd转html

豆豆4997
 豆豆4997
发布于 2014/06/26 13:05
字数 274
阅读 124
收藏 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
青岛
项目经理
私信 提问
[转] 有一种生涯,叫PSD2HTML

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

红薯
2009/03/30
310
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.5K
15
移动H5页面前端制作

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

阿尔卑斯奶糖
2016/08/15
10
7
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
15K
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

没有更多内容

加载失败,请刷新页面

加载更多

月入3万之一个程序员的转行坎坷历程

陈年往事 “我月入3万,怎么会少少了你一个鸡蛋啊?” 这是2017年9月左右的一个新闻,一位煎饼摊大妈因和顾客争执时脱口而出这样一句话而走红。当时还上了各大新闻的头条。 互联网兴起今天,...

苏南-首席填坑官
16分钟前
1
1
OSChina 周一乱弹 —— 眼看着这颗陨石砸了下来

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Nachtblut的单曲《Antik》 《Antik》- Nachtblut 手机党少年们想听歌,请使劲儿戳(这里) @mr_chip :上海的初雪之后有点冷 ...

小小编辑
41分钟前
123
6
Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
今天
2
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部