从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工作的所有,没有依照步骤来介绍,由于代码都已经完毕,须要花时间去又一次整理太费时间,仅仅把遇到的一些问题介绍一下,备忘。
---------------------------
本人技术博客:
相关文章
- 简洁又漂亮的单网页404页源码(html格式404源码)
- Visual Studio Code + live-server编辑和浏览HTML网页
- html网页采集
- CSS如何实现自定义鼠标应用到整个网页
- 在网页中插入百度地图
- 使用Jsoup解析html网页
- htm、html、shtml网页区别
- 写论文,没数据?R语言抓取网页大数据
- centos8平台使用wkhtmltopdf实现html网页转pdf
- javascript如何判断访问网页的设备及是否支持触屏功能
- 44、网页启动Activity,网页传值Activity
- 使用wget工具抓取网页和图片 成功尝试
- 防止网页被嵌入框架的代码
- 网页(HTML)中的特殊字符
- Computer:网页设计语言(HTML+CSS+Javascript)的简介、区别理解之详细攻略
- 〖大前端 - 基础入门三大核心之 html 篇⑤〗- 网页的基础配置
- 网页特效——放屁龟turtle(.html)
- 发布一个网页智能解析算法库
- 【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )
- 网页特殊符号HTML代码大全
- 批量将网页转换成图片或PDF文档技巧分享
- HTML网页之计算器代码
- LabVIEW把VI发布到网页上
- 网页中特殊符号,比如 copyright 符号 显示不出 的解决办法
- 第二章 网页基本代码
- HTML+CSS网页制作:一个简易美观的登录页面实例代码