收藏

下载资源 加入VIP,免费下载

第1页 / 共15页

第2页 / 共15页

第3页 / 共15页

第4页 / 共15页

第5页 / 共15页

第6页 / 共15页

第7页 / 共15页

第8页 / 共15页

第9页 / 共15页

第10页 / 共15页

第11页 / 共15页

第12页 / 共15页

第13页 / 共15页

第14页 / 共15页

第15页 / 共15页

切割背景

我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div页面效果和设计的效果达到一致。

现在在photoshop里面打开原先设计好的,隐藏所以的图层，除背景层外.

现在采取的切片工具，选择背景，保存网页web格式按（ALT+shift+Ctrl+S）。

然后保存的图像文件夹文件名为background.jpg。

设置背景样式

打开style.css文件，设置基本样式，还有背景样以及主体部分的宽度，如下代码：

*{

margin:

0px;

padding:

0px;

}

body

{

background:

url（images/background.jpg）;

}

#container

{

margin:

auto;

width:

960px;

}

切割头部

返回photoshop，隐藏所以图层，除头部背景外，并用同样的方法，把头部背景图片切割保存为web格式，保存文件名为head.jpg。

编辑头部背景代码

在style.css文件里编辑如下代码:

#header

{

background:

url（images/header.jpg）;

height:

124px;

}

切割头部logo

在这时，切割logo层，隐藏所有图层，包括背景层，如上同样方法切割logo层保存为logo.png，注意：

保存为png格式图片

添加在页面添加logo

现在返回到html中，在#header#container内,添加下面的代码.....

现在,下面切换到style.css文件，编写#logo样式.

#logo

{

margin-top:

20px;

border:

none;

}

编辑导航代码

下面是页面里的代码，头部header包括logo和导航两个部分.

• Home
• About
• Work
• Blog
• Contact

导航样式如下：

现在,添加css表里的导航样式~，ul、li和链接a的样式:

#headerli

{

color:

#959595;

list-style:

none;

float:

left;

margin-right:

20px;

font-family:

"MyriadPro",arial;

font-weight:

bold;

font-size:

24px;

}

#headerlia

{

color:

#959595;

text-decoration:

none;

padding:

10px;

}

#headerul

{

float:

right;

margin-top:

-40px;

}

#headerlia:

hover

{

background:

#202020;

color:

#d2d2d2;

-moz-border-radius:

5px;

-khtml-border-radius:

5px;

-webkit-border-radius:

5px;

}

现在制作中间部分

现在我们在页面的中间部分content添加两个div，如下图：

切换到photoshop的psd页面,切下中间部分，取名为featured.jpg.如下图：

在你的HTML页面添加如下代码，和一些文字介绍:

MOREPROJECTS

Portfolioproject,Jan5th,2010Haveyou

everwantedtocreatecleanandniceportfoliodesign?

InthistutorialI

willshowyouhowtodesigncleanblueportfoliolayout.Haveyoueverwanted

tocreatecleanandniceportfoliodesign?

InthistutorialIwillshowyouhow

todesigncleanblueportfoliolayoutinAdobePhotoshop.

在PSD文件里，隐藏其他所以图层，只留下按钮图层部分，切下按钮部分，保存png格式，命名为button.png.

现在我们把这些图片添加到页面中去，切换到css文件页面，添加如下代码，这里包括背景样式，和按钮的样式.

#featured

{

background:

url（images/featured.jpg）no-repeat;

height:

381px;

margin-top:

30px;

margin-left:

80px;

}

#featureda

{

background:

url（images/button.png）;

height:

30px;

width:

124px;

text-indent:

-9999px;

position:

absolute;

margin-top:

330px;

margin-left:

180px;

}

#featureda:

hover

{

background-position:

0px30px;

}

现在我们添加些dummytext（文字介绍）的样式:

.dummytext

{

color:

#d2d2d2;

width:

245px;

margin-top:

150px;

position:

absolute;

font-family:

Arial,Helvetica,sans-serif;

font-size:

12px;

line-height:

180%;

margin-left:

290px;

}

.dummytextspan

{

font-size:

16px;

color:

#191919;

font-weight:

bold;

}

下面添加添加图片展示下面的分类介绍部分

页面的代码部分如下.

BEAUTIFULWebDesignFanisadesignrelatedblogaboutwebdesign,photoshop,freebies

andtutorials.Wepublishusefulinformationdedicatedtowebdesignersanddevelopers.Hereyoucanfindfree

resourceslikevectors,wordpressthemesandalotofinspiration.

EFFECTIVEWebDesignFanisadesignrelatedblogaboutwebdesign,photoshop,freebies

andtutorials.Wepublishusefulinformationdedicatedtowebdesignersanddevelopers.Hereyoucanfindfree

resourceslikevectors,wordpressthemesandalotofinspiration.

FUNCTIONALWebDesignFanisadesignrelatedblogaboutwebdesign,photoshop,freebies

andtutorials.Wepublishusefulinformationdedicatedtowebdesignersanddevelopers.Hereyoucanfindfree

resourceslikevectors,wordpressthemesandalotofinspiration.

我们中间部分的内容，整体看起来应该是这样的:

MOREPROJECTS

Portfolioproject,Jan5th,2010Haveyou

everwantedtocreatecleanandniceportfoliodesign?

InthistutorialI

willshowyouhowtodesigncleanblueportfoliolayout.Haveyoueverwanted

tocreatecleanandniceportfoliodesign?

InthistutorialIwillshowyouhow

todesigncleanblueportfoliolayoutinAdobePhotoshop.

BEAUTIFULWebDesignFanisadesignrelatedblogaboutwebdesign,photoshop,freebies

andtutorials.Wepublishusefulinformationdedicatedtowebdesignersanddevelopers.Hereyoucanfindfree

resourceslikevectors,wordpressthemesandalotofinspiration.

EFFECTIVEWebDesignFanisadesignrelatedblogaboutwebdesign,photoshop,freebies

andtutorials.Wepublishusefulinformationdedicatedtowebdesignersanddevelopers.Hereyoucanfindfree

resourceslikevectors,wordpressthemesandalotofinspiration.

FUNCTIONALWebDesignFanisadesignrelatedblogaboutwebdesign,photoshop,freebies

andtutorials.Wepublishusefulinformationdedicatedtowebdesignersanddevelopers.Hereyoucanfindfree

resourceslikevectors,wordpressthemesandalotofinspiration.

去你的CSS文件添加下面的代码，

#paragraphsspan

{

font-family:

"Myriadpro",Helvetica,sans-serif;

font-size:

22px;

font-weight:

600;

letter-spacing:

-2px;

}

#paragraphs

{

margin-left:

80px;

font-family:

Arial,Helvetica,sans-serif;

color:

#191919;

font-size:

12px;

margin-top:

15px;

}

.paragraph

{

width:

250px;

margin-left:

15px;

float:

left;

}

这个就是我们到目前位置的效果:

下面处理网站底部

现在，我们完成该部分内容，我们将开始创建页脚.

首先，在你的PSD文件中，隐藏除页脚和页脚纹理层外的其他层，然后把页脚文件夹的东西切片并保存为footer.jpg.

然后再切一遍，把按钮和鸟的图形切下来.分别取名为follow.png和bird.jpg.

编辑底部代码

底部页脚包括一些文字和一个带有链接的小鸟图片.

所以在HTML页面添加如下代码.

2010©FictionalDesignStudio.DesignbyWebdesignfan.

FollowusonTwitter

现在,编辑底部footer样式的代码，如下:

#footer

{

background:

url（images/footer.jpg）;

height:

71px;

margin-top:

191px;

}

#footerp

{

font-family:

Arial,Helvetica,sans-serif;

font-size:

12px;

color:

#959595;

position:

absolute;

margin-top:

30px;

}

#footera

{

background:

url（images/follow.png）;

text-indent:

-9999px;

position:

absolute;

height:

27px;

width:

124px;

margin-left:

730px;

margin-top:

30px;

}

#footerimg

{

float:

right;

margin-top:

10px;

}

我们用footer.jpg做页脚的背景，然后添加一些文字的样式.

对于底部的鸟图片的链接，我们用之前同样的办法，利用浮动效果定位。

最终效果

文件下载地址（0,7MB）

到现在就算是结束了，不知道大家有没有看懂，不懂的就留言，什么地方不懂，我再添加修改下，哈哈~