• Hello!欢迎来到网页设计学!
当前位置: 首页 > HTML&CSS > 网页效果图如何转成HTML代码

网页效果图如何转成HTML代码

.................................................................................................................................................................

鉴于很多网页设计新手不太了解网页设计从效果图到编码的过程,今天我们制作了一个教程主要以导航栏为例讲解一下。注意在学习之前,还必须懂得一些最基础的HTML和CSS代码,首先要在Photoshop中制作导航栏效果图。

preview

一、创建导航栏默认效果图

新建photoshop文件,大小为800*600px,背景色填充为#2c465a,新建图层选择矩形工具绘制一个矩形,宽为226px,高为265px,填充色#1d2e3c。

step01
选择矩形工具,圆角半径为5.

step02
新建图层绘制5个圆角矩形(按钮),左右边距为10px,上下边距为6px。

step03
为按钮添加图层样式:

step04step05step06
得到的效果如图:

step07
为按钮添加文字:

step08
为了使文字更突出,可以为文字添加阴影效果:

step09

二、创建鼠标经过效果图

复制之前所创建的图层,修改复制的按钮的图层样式,把颜色叠加里面的颜色改为白色。

step10step11

三。编码之前的准备

到这里效果图已经完成,接下来要准备编码了,编码之前要先处理一下图片,该导航编码的方式我们称为“图像精灵”。图像精灵就是单个图像的集合。我们可以只保存一张图片,然后在css中通过改变参数多次调用,这样会降低服务器的请求次数,节省你的网站带宽。
先隐藏导航按钮的背景,选择移动工具(V),把右边的导航按钮向左移动,注意不要重叠。

step12

选择矩形选框工具(M),选中所有导航按钮,边缘对齐。

step13

隐藏背景图层,选择文件>保存为web所用格式,格式为png-24。

step14

四、编码

导航栏的HTML文件,新建一个HTML文件,先添加导航文字,<ul>是一个项目列表标记。

<ul id="simple-navigation">
    <li class="homepage"><a href="www.link-goes-here">Homepage</a></li>
    <li class="portfolio"><a href="www.link-goes-here">Portfolio</a></li>
    <li class="meet-our-team"><a href="www.link-goes-here">Meet Our Team</a></li>
    <li class="what-we-do"><a href="www.link-goes-here">What We Do</a></li>
    <li class="get-in-touch"><a href="www.link-goes-here">Get In Touch</a></li>
</ul>

然后创建CSS文件,

body { background-color: #2c465a; } 
ul#simple-navigation { } 
#simple-navigation li { } 
#simple-navigation li a { }

得到的效果如图所示:

step15
添加CSS样式:

ul#simple-navigation {
width: 206px;
float: left;
background-color: #1d2e3c;
padding: 20px;
}

#simple-navigation li {
list-style-type: none;
float: left;
height: 46px;
width: 206px;
margin-bottom: 4px;
}

#simple-navigation li a {
float: left;
height: 46px;
width: 206px;
display: block;
text-indent: -9999px;
}

首先要定义每个按钮的宽度为206px,背景色为#1d2e3c。

step16
添加背景图片:

li.homepage {
background-position: left top;
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}

li.portfolio {
background-position: left -50px;
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}

li.meet-our-team {
background-position: left -100px;
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}

li.what-we-do {
background-position: left -150px;
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}

li.get-in-touch {
background-position: left bottom;
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}

为列表<li>中每一个项目添加图片。代码中background position代表背景图片的位置,No-Repeat表示图片不重复。背景位置参考下图:

step18
添加鼠标经过效果:

#simple-navigation li a:hover {
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}
li.homepage a:hover {
background-position: right top;
}

li.portfolio a:hover {
background-position: right -50px;
}

li.meet-our-team a:hover {
background-position: right -100px;
}

li.what-we-do a:hover {
background-position: right -150px;
}

li.get-in-touch a:hover {
background-position: right bottom;
}

演示效果

本文链接:网页效果图如何转成HTML代码

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!


...........................................................................................................................................................

相关文章

发表评论

友情链接:

  • 网页设计

专业网页设计师交流平台 设计交流QQ群: 网页设计交流