首页 > 代码库 > 从PSD到HTML，网页的实现

从PSD到HTML，网页的实现

2024-07-04 11:34:46   214人阅读

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

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

16sucai_201405041256


实际完成的网站如下：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=http://www.mamicode.com/"index.css" rel="stylesheet" type="text/css" />>
相应的CSS代码，后续介绍。
3、从页头开始实现，直到完成页脚。
实现页头时，主要遇到问题有：
问题1：由于原始设计中logo的字体是本机没有的，也没有提示具体的字体名字，我直接将其裁成图片的形式展示。同理右侧的“服务热线”也裁剪成图片。
问题2：logo等图片需要垂直居中显示，根据图片的大小计算出需要padding-top，来控制图片出现在header的中间。
  <div id="header">
  <img class="logo" src=http://www.mamicode.com/"images/logo.png" alt="logo" />>
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


联系
我们