在学习完《From PSD to HTML: Building a Set of Website Designs Step by Step》之后，使我对网页的设计和实现有了更深入的认识，我逐渐少了那些恐惧感，为此，我尝试着实现了自己的第一个从PSD到HTML的实践。

我使用的站点PSD文件是已经设计好的一个SAAS站点首页，站点的实际效果图例如以下：

实际完毕的站点例如以下：http://lab.shalilang.com/saas/index.html

实际过程例如以下：

1、准备工作

我选择了使用Dreamweaver CS6 作为开发工具，先创建了工作网站，并创建了images目录、index.html和style.css，分别用于存放图片，网页的HTML代码和CSS代码。

2、分析网页布局

通过站点效果图，我们大概能够为分为：页头、导航、横幅、内容、页脚五部分，我将前四部分都集中在一个div中管理，页脚独立管理。同一时候我们也能够发现，整个页面背景是跟窗体一样大小的，但全部内容部分居中长度为1010px。基本代码例如以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>SAAS</title>

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

</head>

<body>

<div class="container">

  <div id="header"> header

  </div>

  <div id="navmenu"> navmenu

  </div>

  <div id="banner">  banner

  </div>

  <div id="content">  content

  </div>

</div>

<div id="footer">  footer

</div>

</body>

</html>

对应的CSS代码，兴许介绍。

3、从页头開始实现，直到完毕页脚。

实现页头时，主要遇到问题有：

问题1：因为原始设计中logo的字体是本机没有的，也没有提示详细的字体名字，我直接将其裁成图片的形式展示。同理右側的“服务热线”也裁剪成图片。

问题2：logo等图片须要垂直居中显示，依据图片的大小计算出须要padding-top，来控制图片出如今header的中间。

  <div id="header">

  <img class="logo" src="images/logo.png" alt="logo" />

  <img class="phone" src="images/phoneNumber.png" alt="phone number" />

  <img class="logo phonenumer" src="images/phone.png" alt="phone logo" />

</div>

CSS代码

.logo {

	padding-top: 35px;

}

4、导航栏部分

导航栏部分没有特别的问题，主要是使用ul和li标签，使用到了float:left;，使全部的导航菜单项向左浮动，同一时候要实现菜单项中的文字垂直居中，使用了

#navmenu ul li a{

   height: 38px;

   line-height: 38px;

   overflow: hidden;

}

5、banner部分

这部分图片的处理花了点时间，由于原PSD中在保存图片的时候总是会出现白色斑点，做了一些处理才完毕，由此可见一个好的PSD文件还是非常重要的。主要分离出背景地板颜色的图片和上层SAAS介绍+蝴蝶图片。

这部分须要设置banner div的最小宽度是min-width:1010px，防止在用户电脑屏幕太小时，导致部分内容不能展示。

创建登录栏时，首先是须要灰色透明的背景，为了方便使用了透明图片作为背景。

至于当中的文字和文本框则主要通过position和float定位进行设置位置，相对而言比較简单。

6、内容部分

主要分为两部分，左側是新闻，右側是SAAS介绍，右側应该做成选项卡的方式。同一时候它们又能够都分为上下两部分，上面是标题，以下是内容。左側float:left;width:330px;，同理右側和左側保持20px距离。

实现标题要加入�一条底线，能够使用hr也能够通过border-bottom的方式来表达。

内容部分通过列表来实现，控制好列表项之间的距离，我是通过设置line-height来填充。还有对于溢出的文字，须要通过text-overflow:ellipsis;来处理。

右側的内容部分，是使用table实现的，理论上也能够通过ul列表来实现，后面能够尝试一下。

7、页尾部分

没有什么特别的地方，无非是控制文字的位置。

8、之后通过w3c validator进行了验证，<img>缺少了alt属性，其它没有什么问题。

这基本上就是我的第一次从PSD到HTML工作的所有，没有依照步骤来介绍，由于代码都已经完毕，须要花时间去又一次整理太费时间，仅仅把遇到的一些问题介绍一下，备忘。

---------------------------

本人技术博客：

www.shalilang.com

从PSD到HTML，网页的实现的更多相关文章

  1. perfectpixel 加载PSD图到网页中和已经写好的网页进行对比

    perfectpixel  这是火狐的插件: 用途:加载设计图,和 已经编写好的网页进行对比,看是否完美还原. 谷歌也有类似的插件,但是无法下载.

  2. 前端开发使用Photoshop切图详细步骤

    切图的主要目的是从设计师提供的psd中获取网页制作所要的资源 一.界面设置 1. 新建文件,调整界面大小,背景设置为透明 2. 自动选择,把组切换为图层 3. 添加窗口内容,一共四项:图层.历史纪录. ...

  3. 25套用于 Web UI 设计的免费 PSD 网页元素模板

    Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...

  4. 韩国网页设计资料《网页设计大师2》JPG+PSD+TXT等 73.89G 百度云下载

    < 网页设计大师2 >超越第一代版本,提供更新更精美的网页素材模板.全部由国际顶级设计师精选打造,完全展示走在潮流 之前的设计风格.是网页设计师/UI交互界面设计师必备工具. < 网 ...

  5. 25套用于Web UI设计的免费PSD网页元素模板

    Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...

  6. 使用PSD设计网页页面

    一.一个独立的页面 1.分析这个页面,在脑海或草稿上要确立页面板块布局(如版块区域的,位置和大小)2.根据设计稿的的情况,分析背景图的分布.ICO图的分布等 3.切割相应的图片,导出.合并图片(一般用 ...

  7. 从网页psd到html的开发

    从网上下载了一张psd的网页设计稿,初学html+css,所以记录一下我的学习过程.原图是这个样子:             原图                                   ...

  8. 40套PSD欧美扁平化网页模板，可二次编辑开发，精品

    40套PSD欧美扁平化网页模板,可二次编辑开发,绝对精品,下载地址:百度网盘, https://pan.baidu.com/s/1uMF4MM_3UC2Q6mbyNomLfQ 模板内容预览:   小

  9. 【项目】小试牛刀-polo360静态网页项目（附psd文件资源）

    笔者尝试下开发简单的静态网页,下面分享过程及源码.这是polo360的下载链接:https://pan.baidu.com/s/1WqGxKMYY_DHfrSJ9lLL-WA 提取码:v2qi  (一 ...

随机推荐

  1. 微信接口问题(The underlying connection was closed: An unexpected error occurred on a send)

    突然在调用微信接口是报:The underlying connection was closed: An unexpected error occurred on a send错误,跟踪了半天,是因为 ...

  2. 2017冬季24集训模拟-2.A问题

    ————————————————————————————————————————题解 唯一没有想出来的题 我们发现以上两种操作 a0,a3,a6,a9……的相对位置不变 a1,a4,a7,a10……的 ...

  3. 【知了堂学习笔记】java web 简单的登录

    最近皮皮潇在学习java web,刚接触了简单的东西,所以今天给大家带来一个简单的登录实现. 页面: 页面代码: <%@ page language="java" conte ...

  4. JAVA基础部分面试

    1:面向对象编程有很多重要的特性: 封装,继承,多态和抽象. 2:什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? (1)Java虚拟机是一个可以执行Java字节码的虚拟机进程.J ...

  5. 1005 Spell It Right (20)（20 point(s)）

    problem Given a non-negative integer N, your task is to compute the sum of all the digits of N, and ...

  6. luoguP3952 [NOIP2017]时间复杂度 模拟

    原本只是想看下多久能码完时间复杂度 然后在30min内就码完了,然后一A了???? 首先,这题完全可以离线做 我们先把所有的操作读完,判断合不合法之后,再去判断和标准答案的关系 具体而言 把所有的操作 ...

  7. CF280C Game on Tree 期望

    期望多少次操作,我们可以看做是染黑了多少节点 那么,我们可以用期望的线性性质,求出每个节点被染黑的概率之和(权值为$1$) 一个节点$u$被染黑仅跟祖先有关 我们把$u$到祖先的链抽出来 只要选取链上 ...

  8. PHP获取目录和文件的方法

    PHP获取当前目录和相对目录的方法<?php //获取当前文件所在目录,如果 A.php include B.php 则无论写在哪个文件里,都是表示 A.php 文件所在的目录 echo rea ...

  9. C++ 刷题常用函数总结

    平时常用C++刷一些算法题,C++内置了许多好用的工具函数,但时间一长总是容易忘记,这里简单做一下总结,方便复习! <stdlib.h> atoi(const char* str) 将一串 ...

  10. 【洛谷】2474：[SCOI2008]天平【差分约束系统】

    P2474 [SCOI2008]天平 题目背景 2008四川NOI省选 题目描述 你有n个砝码,均为1克,2克或者3克.你并不清楚每个砝码的重量,但你知道其中一些砝码重量的大小关系.你把其中两个砝码A ...