无锡做网站公司:设计图怎么做成html网页
时间：2018-07-09 11:16来源：无锡做网站公司
我们知道，切图的目的是把PSD设计稿转换为HTML页面，网上切图教程不少的，但是大都是讲PS怎么使用切片工具把一张图片分割成多张图片，然后存储为Web使用格式，并且都比较简单和零碎，并不能满足的要求。
如果仅是通过PS切图保存为web格式，那么做一个网站仅需几秒？设计师已经拿好菜刀准备反驳……
别逗了，咱还是静下心来看看怎么把PSD图做成网页吧，后期我们会出一套简单教学课程，希望大家持续关注。
一、案例介绍PSD切图如何做出html网页
第一步:先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也可以先用*重置为0然后在根据BODY中所使用的标记进行重置。如:我们BODY标记中使用了,div,p那我们的选择符就写 body,div,p就可以了.不需要写*了。
第二步:把我们网页整体的背景实现,我们想要的结果内容居中,背景渐变始终铺满屏幕。
这样的话,我们可以为body 添加背景图片.要让基在沿水平方向平铺即可。
第三步：通过观察我们可以先把我们网页划分成为五大部分,然后先为其编写相应的html代码
HTML代码:
<div id="header"></div>
<div id="nav"></div>
<div id="banner"></div>
<div id="main"></div>
<div id="footer"></div>
通过PS测量得知,这五部分占据950宽,而且居中.我们可以使用群组选择符,先让这五个DIV居中。
第四步：先完成header头部部分
LOGO：一般这个部分有两个要求.1点击LOGO可以返回网站首页.2要注意SEO方面的？所以我们采用了如下HTML代码：
<h1><a href="#">文字部分</a></h1>
那么CSS编码该如何实现呢？
大家可以可以先想一下。然后在看我下边写CSS代码的，其实这个地方采用的是CSS以图换字技巧。
二、分步骤解读PSD图如何变成网页
1、我们需要从PSD文件得到什么？
如下图，我们只需要从这个psd文件得到4个非常基本的东西。推荐内容(featured)的背景、底部背景、欢迎文字（Welcome）、推荐图片的框（少女面部图的白色透明边框）。其余的部分我们只需要通过CSS生成或者在html里嵌入相应图片。
下图红线圈起来的地方，就是我们需要从psd获取的内容。本部分内容需要读者具备一定的Photoshop的基础知识和操作能力。
你可以借助Photoshop的切片工具或者自己手动切片，并将其保存成相应的图片格式。
2、为一个网站设置良好的开发环境是非常重要的，我已经创建了一个非常基本的文件夹结构来建立这个网站，下面是文件夹结构设置，也可称之为模板。
文件夹结构下面这个文件夹结构是由html文件、CSS文件、js等文件组成，你可以根据自己的需要调整文件夹结构。
具体文件的放置
将index.html文件放置在根目录，这个文件也是我们编写html代码的文件。
将jquery插件Nivo-Slider里面的三个文件jQuery-1.4.2.min.js和HTML5-Shiv.js以及Nivo-Slider.min.js放到Javascript文件夹。
将两个css文件，reset.css和global.css放到样式文件夹。
这样我们的文件夹结构设置就差不多完成了。
3、编写HTML代码
将psd转换成html/css的工作流程是先编写出html文件，随后再编写css，并加入js动态效果。
主要今天咱们只是抛砖引玉，不是去非常细分得介绍PSD图转化为网页的具体操作方法，那我们就点到为止。
三、网页设计常见问题
1.1 html中如何处理乱码问题？
当输入页面的文字成为乱码的时候，可以在<head></head>之间加<meta charset=”UTF-8”>
其中charset是定义网页字符集属性的。出现的乱码是因为字符集搞错了。属性值是“UTF-8”。“UTF-8”一个字符代表3个字节。
其中属性值有很多种。点击开发工具——格式——编码字符集就有很多。
1.2 如何清楚浮动 ？
clear:both;
只要是定义的与原来的不一样就用清除浮动。比如自己做的第一个项目
1.3 如何使得元素内部文本居中？
对于块状元素可以设置 text-align:center;
对于行内元素可以设置 margin：0 auto;
1.4如何实现单行文本居中？
height 与 line-height 设置的值大小一样，例如
height：20px;
line-height:20px;
字体的高度line-height: 21px;/*字体的高度*/
1.5 如何更改超链接 默认显示样式？
a { text-decoration= none；}
超链接的颜色需要单独定义一下，而且下划线去掉。
.top a { /*超链接的颜色没有变化，需要单独定义一下*/
color:#d8d8d8;
text-decoration:none;/* 超链接下划线去掉 */ }
注意！！！ 目前有一个问题，当超链接定义鼠标移上去就显示的颜色，再定义去掉下划线就不管用了。？？？
1.6 如何让鼠标移上去变颜色？
.top a:hover { /*鼠标移动上去颜色变化用“hover”*/
color:yellow; }
1.7 背景图片重复 铺开，如何去除？
background:url(images/s_z.gif) no-repeat ;
/* no-repeat 为图片不重复*/ 如果后面的repeat-x就是图片向X轴重复。
background：url(图片的路径) 是否重复 （沿着水平方向重复） （沿着y轴方向重复） ;后面括号中的可以不写，
1.8 将图片转化为可以按的按钮
在图片上面加button。.s_y button {
width:66px;
height:36px;
background:none;
border:0px;
cursor:pointer; /*这个属性是鼠标移上去有小手的非常重要的属性*/
1.9 如何实现光标的指针变小手 ？
cursor:pointer;/*这个属性是鼠标移上去有小手的非常重要的属性*/
声明：除非注明，本站内容由无锡网站建设马氪软件原创发布©，转载请联系我们授权合作。
您阅读这条内容，共花了： 给这篇内容写个评语吧！
© 第二秀网络科技有限公司
