如何将图片转换成网页代码

     蓝空科技-大连网站建站公司为初学者讲述如何PS图片转为HTML代码 ,下面为一张图PS设计好的图片,那么我们是如何帮把这张图片通过drewamweaver软件,变成我们的标准的浏览器浏览我网页。蓝空科技根据公司在网站建设的过程中真实案例,讲述如何通过美工设计提供的PSD图片一步步转为为我们的网页中的HTML的,美工设计好的效果图如图所示:

 

一  首先根据图片尺寸大小设置整体的大框架width,height。利用ps技术把在网页中用到的图片图标抠图保存在文件夹中,以便代码中的使用。

二  根据大的框架布局:分三小块,每一个小块在细分需要的块数,整个网页界面排版大都是块状组成。

三 代码实现

<!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>无标题文档</title>

</head>

<style type="text/css">

定义一个id为 pmenu的DIV元素样式表,设置好该样式表的宽带和高度

#pmenu{ width:990px; height:250px; margin:0 auto;}

#pleft{ width:320px; height:235px; border:1px solid #09F; float:left;  }

#pcenter{ width:320px; height:235px; border:1px solid #09F;float:left; margin-left:10px;}

#pright{ width:320px; height:235px; border:1px solid #09F;float:right;}

.ptitle{ width:320px; height:20px; border-bottom:1px solid #09F; font-weight:bold; font-size:14px; background-image:url(img/b.png); padding-top:2px; }

.pleft1{ width:165px; height:200px;  float:left; }

.pleft2{ width: 150px; height:200px; float:left; }

.pleft2 ul{ padding:0; margin:0;}

.pleft2 ul li{ list-style:none; font-size:12px; height:20px;  width:150px; margin-top:10px; padding-bottom:3px; border-bottom:1px dotted #CCCCCC; margin-left:6px; }

.pleft2 ul li img{ float:left; margin-left:2px;}  

.pleft2 ul li a{ color: #06F; float:left; margin-top:5px; margin-left:5px;}

.pcenter1{ width:200px; font-size:12px; line-height:25px; height:180px; margin-top:2px; color:#06F;  float:left; margin-left:5px;}

.pcenter2{ width:200px; height:40px; font-size:12px;color:#06F; float:left; margin-left:5px;}

.pcenter3{ width:115px; height:220px; float:right; margin-top:-182px;}

.center1{ width:114px; height:100px; }

.center2{ width:100px; height:40px;  margin-top:15px; margin-left:5px;}

.center3{ width:100px; height:40px; margin-top:5px;margin-left:5px;}

.news123  { margin:0; padding:0; width:318px; height:225px;  }

.news123  li{ margin:0; padding-top:4px; padding-bottom:5px;  list-style:none; width:310px; height:20px; border-bottom:1px dotted #CCCCCC; }

.news123  li a{ float:left; font-size:12px; text-decoration:none; color:#06F;}

.news123 li span{ float:right; font-size:12px; color:#06F;}

 

</style>

<body>

 

<div id="pmenu">

 

<div id="pleft"> <div class="ptitle"> &nbsp;&nbsp;产品展示</div>

<div class="pleft1"> <img src="img/a.png" style="margin-top:10px ; margin-left:2px;"></div>

<div class="pleft2"> <ul><li><img src="img/c.png"><a>LankoyCMS频道自定义</a></li>

                         <li><img src="img/h.png"><a>模块字段自定义操作</a></li>

                         <li><img src="img/g.png"><a>PC与手机端模拟</a></li>

                         <li><img src="img/f.png"><a>自由切换模板</a></li>

                         <li><img src="img/e.png"><a>在线编辑模板</a></li>

                         <li><img src="img/d.png"><a>衍生功能</a></li></ul>  </div>

 

 

</div>

<div id="pcenter"><div class="ptitle">&nbsp;&nbsp;平台简介</div>

<div class="pcenter1"> &nbsp;&nbsp;&nbsp;&nbsp;lankoyCMS是蓝空科技自主研发一款网站内容管理系统,采用基于thinkphp框架结合php+mysql开发而成,独创了自定义频道、模块字段自定义方法,内置了新闻模块、产品模块,此外系统还带有PC 平台与手机平台两个版本。系统公开测试。</div>

<div class="pcenter2">测试账号联系客服QQ:2190885491 </div>

<div class="pcenter3">

<div class="center1"><img src="img/l.png" style="margin-top:10px;"></div>

<div class="center2"><a href="https://www.baidu.com"><img src="img/j.png"></a></div>

<div class="center3"><img src="img/k.png"></div>

</div>

 

</div>

 

<div id="pright"><div class="ptitle">&nbsp;&nbsp;建站知识</div>

<ul class="news123">

<li><span>2015-10-26</span><a href="#">选择正确的存储引擎</a></li>

<li><span>2015-10-26</span><a href="#">选择正确的存储引擎</a></li>

<li><span>2015-10-26</span><a href="#">选择正确的存储引擎</a></li>

<li><span>2015-10-26</span><a href="#">选择正确的存储引擎</a></li>

<li><span>2015-10-26</span><a href="#">选择正确的存储引擎</a></li>

<li><span>2015-10-26</span><a href="#">选择正确的存储引擎</a></li>

<li><span>2015-10-26</span><a href="#">选择正确的存储引擎</a></li>

</ul>

 

</div>

</div>

</body>

</html>