鉴于很多网页设计新手不太了解网页设计从效果图到编码的过程,今天我们制作了一个教程主要以导航栏为例讲解一下。注意在学习之前,还必须懂得一些最基础的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;
}
演示效果
发表评论
要发表评论,您必须先登录。