无锡做网站公司:设计图怎么做出html网页

【导读】经常有人会问无锡做网站公司,如果有了设计图,怎么把设计图做成网站,html网页形式呢?马氪软件今天就带大家一起大致了解一下。我们知道,切图的目的是把PSD设计稿转换为HTML

  经常有人会问无锡做网站公司,如果有了设计图,怎么把设计图做成网站,html网页形式呢?马氪软件今天就带大家一起大致了解一下。

  我们知道,切图的目的是把PSD设计稿转换为HTML页面,网上切图教程不少的,但是大都是讲PS怎么使用切片工具把一张图片分割成多张图片,然后存储为Web使用格式,并且都比较简单和零碎,并不能满足的要求。

  如果仅是通过PS切图保存为web格式,那么做一个网站仅需几秒?设计师已经拿好菜刀准备反驳……

  别逗了,咱还是静下心来看看怎么把PSD图做成网页吧,后期我们会出一套简单教学课程,希望大家持续关注。

无锡做网站公司设计图怎么做出html网页

  一、案例介绍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;/*这个属性是鼠标移上去有小手的非常重要的属性*/


本文链接:http://mkapps.cn/news/design/258.html

无锡第二秀网络科技有限公司

  • 旗下 : 马氪软件
  • 主营业务 : 网站设计开发;微信公众号、小程序开发;APP开发;网络营销推广;广告设计 等
  • 联系人 : 徐经理
  • 手机 : 18706171959
  • 电话 : 0510-85873959
  • 邮箱 : b1990g228@qq.com
  • 网址 : http://mkapps.cn

如无特别说明©本站内容均为原创,转载请标注来源:无锡做网站公司http://mkapps.cn


    匿名评论
  • 评论
人参与,条评论
 您阅读这篇文章共花了: 

分享这篇文章吧!

相关文章