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

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

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

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

新建图层绘制5个圆角矩形（按钮），左右边距为10px，上下边距为6px。

为按钮添加图层样式：

得到的效果如图：

为按钮添加文字：

为了使文字更突出，可以为文字添加阴影效果：

二、创建鼠标经过效果图

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

三。编码之前的准备

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

选择矩形选框工具（M），选中所有导航按钮，边缘对齐。

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

四、编码

导航栏的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 { }

得到的效果如图所示：

添加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。

添加背景图片：

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表示图片不重复。背景位置参考下图：

添加鼠标经过效果：

#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;
}

演示效果