从PSD到HTML,网页的实现

在学习完《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,网页的实现,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。