段子羽-童年歌曲
首先看看效果
下面的图片就是效果图,切割出来后,可能头部和底部会宽点.....
新建文件夹
开始时,在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹 中创建新文件
夹images,放网站的所有图像。接下来打开代码编辑器(Dreamweaver) ,并在根目录下创
建一个HTML文件名为,这是我们的主页模板。现在创建一个新的CSS文件,并< br>将其命名为文件。如下图:
打开文件。在head标签顶部,添加链接到您的样式表()。你可以
使用下面的代码。
1.
2. 3.
4. 5.
6.
7.
8.
9.
10.
11.
复制代码
建立HTML结构
现在,我们将设置HTML文件结构。设置3个部分(标题,内容,页脚)像下面一样:
1.
2. 3.
4. 5.
6.
7.
8.
9.
11.
12.
14.
15.
17.
18.
19.
复制代码
切割背景
我们的PSD文件包 含了很多纹理效果,我们要把这些全部切出来,然后,用代码添加到网页
上面,使div页面效果和设计 的效果达到一致。
现在在photoshop里面打开原先设计好的, 隐藏所有的图层,除背景层外.
现在采取的切片工具,选择背景,保存网页web格式按(ALT +shift+Ctrl + S)。然后保
存的图像文件夹文件名为。
设置背景样式
打开文件,设置基本样式,还有背景样以及主体部分的宽度,如下代码:
* {
margin: 0px;
padding: 0px;
}
body
{
background:url();
}
#container
{
margin: auto;
width: 960px;
}
切割头部
返回ph otoshop,隐藏所有图层,除头部背景外,并用同样的方法,把头部背景图片切割保
存为web格 式,保存文件名为。
编辑头部背景代码
在文件里编辑如下代码:
#header
{
background:url();
height:124px;
}切割头部logo
在这时,切割logo层,隐藏所有图层,包括背景层,如上同样方法切 割logo层保存为
,注意:保存为png格式图片
添加在页面添加logo
现在返回到html中,在#header #container内,添加下面的代码
#logo
{
margin-top:20px;
border:none;
}编辑导航代码
下面是页面里的代码,头部header包括logo和导航两个部分.
-
爱心与尊严的高中作文题库
1.关于爱心和尊严的作文八百字 我们不必怀疑富翁的捐助,毕竟普施爱心,善莫大焉,它是一 种美;我们也不必指责苛求受捐者的冷漠的拒绝,因为人总是有尊 严的,这也是一种美。
-
爱心与尊严高中作文题库
1.关于爱心和尊严的作文八百字 我们不必怀疑富翁的捐助,毕竟普施爱心,善莫大焉,它是一 种美;我们也不必指责苛求受捐者的冷漠的拒绝,因为人总是有尊 严的,这也是一种美。
-
爱心与尊重的作文题库
1.作文关爱与尊重议论文 如果说没有爱就没有教育的话,那么离开了尊重同样也谈不上教育。 因为每一位孩子都渴望得到他人的尊重,尤其是教师的尊重。可是在现实生活中,不时会有
-
爱心责任100字作文题库
1.有关爱心,坚持,责任的作文题库各三个 一则150字左右 (要事例) “胜不骄,败不馁”这句话我常听外婆说起。 这句名言的意思是说胜利了抄不骄傲,失败了不气馁。我真正体会到它
-
爱心责任心的作文题库
1.有关爱心,坚持,责任的作文题库各三个 一则150字左右 (要事例) “胜不骄,败不馁”这句话我常听外婆说起。 这句名言的意思是说胜利了抄不骄傲,失败了不气馁。我真正体会到它
-
- 三国志战略九游版下载
- 余华爱情经典语录
- 心情低落的图片压抑
- 经典古训100句图片大全
- 关于青春奋斗的名人名言鲁迅
- 三国群英单机版手游礼包码
- 不收费的情感挽回专家电话
- 新婚贺语怎么说祝福语
- 适合小学生包容的句子经典语录
- 开启美好一天的句子
- 林徽因传
- 结婚祝福语句句暖心
- 正能量的句子经典简短100
- 沈从文语录经典语录关于爱情
- 史铁生的简介和作品
- 打动人心的爱情句子:我的眼里容不了一粒沙
- 平凡的生活.简单的幸福的句子累并快乐着
- 母爱的最经典金句
- 相守一生不离不弃的句子
- 余华的作品值得初中生看吗
- 奇妙萌可珍珠公主变好
- 喝酒后的心情经典句子
- 努力挣钱的霸气图片
- 有深度有涵养的句子精选
- 高情商女人分手说的话
- 铁杆三国折扣平台和官方服互通吗
- 女人拼命挣钱经典句子一段话
- 郭老师经典语录猕猴桃
- 台湾刘墉作品经典语录
- 千古绝句最霸气古诗文
- 高中经典语录励志短句
- 每天的问候语图片大全周末
- 被感动的语句经典语录
- 三国志战略版灵犀官方客户端
- 一个人喝酒的文案高级感
- 活着好累好压抑的图片大全
- 高中佳句积累摘抄关于青春
- 男人无所谓忠诚女人无所谓正派是什么意思
- 电视剧三国演义司马懿名言名句
- 挽回女友的一封感动信
- 老公家庭暴力怎么治他以后不敢再家暴
- 感悟人生图片带字大图
- 努力干活的句子加油短句
- 励志名言100句经典
- 袁爷爷的真名叫什么
- 王者荣耀韩信操作视频
- 外墙蜘蛛人施工安全协议
- 酒与人生的经典句子英文
- 一天一句早安问候语
- 杨绛语录经典语录女人要明白
- 三国志战略版qq客户端
- 每天一句正能量励志经典语录
- 赚钱的最高境界一句话简短
- 夸别人的语句怎么说
- 作家情话经典语录
- 有幸相遇
- 不负遇见的句子
- 爱因斯坦曾经说过什么话
- ppt制作评语优缺点20条
- 三国演义诸葛亮火烧司马懿
- 想和老公沟通的心里话句子
- 小乔长相复原图
- 罗翔老师经典语录读书感悟
- 金钱衡量爱情经典语录短句
- 激励人心的正能量励志短句图片
- 祝天下母亲节祝福语句经典句子
- 修身养性的句子经典语录
- 赞美尽孝的人
- 男女之间有了肌肤之亲林徽因
- 最勾人心的情话句子
- 小学生自律的句子经典语录
- 灌篮高手樱木花道q版图片
- 刘备说过最有名的一句话
- 经典语录吃人
- 鲁迅的名言名句
- 晋江小说经典语录大全摘抄短句
- 余华的语录有哪些
- 送女朋友礼物贺卡情话简短
- 泰戈尔《永恒的青春》英文
- 老婆生日精辟短句文案
- 三毛说过的最美的情话关于吃饭
- 关于读书的好段摘抄
- 家国情怀名言名句摘抄现代名人
- 爸爸对儿子说的励志暖心话
- 句子摘抄经典语录简短霸气
- 对朋友的祝福语句短句
- 激励孩子的话语正能量一段话图片
- 圣经必背1000句
- 余华说过的励志语录
- 小学生作文语句不通顺怎么办
- 一句精辟的座右铭10字以内
- 王者荣耀诸葛亮所有皮肤
- 反省自己做错事的句子
- 晚辈祝福退休的经典语句简短
- 爸爸送给女儿生日的话
- 折扣手游平台app排行榜有奥特曼传奇
- 青春运动的句子简短励志
- 游戏爱情宣言经典语录
- 清晨朋友问候语大全
- 永不褪色的优雅杨绛经典语录图片
- 夫妻关系的句子
- 情侣说说秀恩爱短句一对古风
- 杨绛非常现实的一段话
- 让孩子优秀的三句话
- 杨绛语录经典语录爱情应该是一个灵魂对
- 四川话骂人的方言视频
- 莫言网上最火的一段话独处
- 林徽因爱情经典语录
- 王者荣耀男英雄泳装韩信
- 工作励志的句子经典语句2023
- 祝福健康的句子经典语录简短
- 大染坊全集在线观看搜狐视频
- 王者荣耀特效视频素材
- 赞美教练的句子经典语录
- 值得摘抄的名人名言鲁迅
- 激励努力的句子正能量短句
- 余华的励志语录
- 打动女人心的情话成语
- 夫妻沟通不了怎么办
- 夫妻之间相处之道感悟说说短句
- 和平精英七喵的奶多大
- 袁隆平说过的节约粮食经典语录
- 突然想发个感慨的说说男人
- 辞职祝福语句送朋友
- 感恩朋友的句子经典语录50字
- 杨绛先生最经典的一句话
- 小学生感恩的句子经典语录
- 情感视频素材库无水印9:16
- 莫泊桑经典语录山上的蒲公英
- 励志语录简短正能量及感悟
- 明星大侦探白敬亭的梗
- 马伊琍为什么离婚了
- 杨绛最经典的十句话图片高清
- 四字吉言大全图片
- 心灵鸡汤1000字励志文章大全
- 描写青春的惊艳段落200字
- 一起经历风雨夫妻句子老伴走了以后对妻子的告别
- 余华活着小说经典语录活着是一种力量
- 邪剑仙经典语录想赢不一定要有实力和本钱
- 赞美别人恩爱夫妻的句子经典语录图片
- 挽回对方的句子(精选80句)
- 干净短句暖心8字
- 喝酒高兴的句子经典句子
- 心情失落伤感的图片带字
- 七字吉言大全图片
- 成年说说经典语录图片
- 夫妻应该相互尊重相互理解相互包容
- 分居久了男人心理变化
- 恩爱夫妻的句子经典语录
- 心情突然很低落句子简短
- 伤感文案素材视频无水印网站
- 闺蜜的生日祝福最短
- 室雅兰香篆体书法作品欣赏
- 励志句子大全正能量短句
- 餐饮简短美句
- 如何点评别人的ppt汇报
- 杨绛写给中年女人的信原文
- 知否之盛老太太之子
- 禅语感悟人生的句子句句净化心灵
- 销售工作点评语句大全
- 莫言最透彻的一段话
- 浪漫而不烂俗的高级文案
- 杨绛语录经典语录图片高清
- 今天心情低落的句子简短图片
- 名人名句摘抄简短的
- 老公说心累了要离婚很坚决
- 人到中年的精辟感悟短语
- 袁隆平珍惜粮食的名言名句
- 张爱玲情话经典短句
- 夫妻间的甜蜜短句
- 骂蚊子的话语经典语句
- 心情低落说说发朋友圈图片带字
- 节约粮食缅怀袁隆平作文
- 一半烟火
- 所谓生活
- 一半清欢说说
- 劝人少喝酒的经典幽默句子
- 朋友问候语简短最美的句子图片
- 杨绛名言名句经典语录
- 杨绛语录经典关于爱情的句子
- 有深度有涵养的句子简短
- 618激励员工干劲的句子
- 十句鼓励的名人名言
- 不放弃不气馁的名言名句
- 彼此鼓励相互成长相互进步的诗句
- 夫妻冷战分居最好的解决方法
- 龙应台《目送》原文经典
- 王者荣耀高端局只承认四个上单
- 茶的句子经典语录图片
- 每天励志正能量句子
- 关于兴趣的教育名言名句大全
- 中年人的感悟人生的文案
- 大染坊男人无所谓忠诚是因为背叛的筹码太低什么意思
- 怎样抓住老公的心让他更爱你
- 李嘉诚的20句人生金句配图
- 名言名句摘抄大全
- 一键去除衣物看见身体p图软件
- 夫妻携手并肩共同努力的句子图片
- 诸葛亮的名言名句夫君子之行
- 家长点评怎么写简单点关于孩子做早餐
现在,添加css表里的导航样式~,ul、li和链接a的样式:
#header li
{
color:#959595;
list-style:none;
float:left;
margin-right:20px;
font- family:
font-weight:bold;
font-size:24px;
}
#header li a
{
color:#959595;
text-decoration:none;
padding:10px;
}
#header ul
{
float:right;
margin- top:-40px;
}
#header li a:hover
{
background:#202020;
color:#d2d2d2;
-moz-border-radius:5px;
-khtml-border- radius:5px;
-webkit-border-radius:5px;
}现在制作中间部分
现在我们在页面的中间部分content添加两个div,如下图:
在你的HTML页面添加如下代码, 和一些文字介绍:
1.
2.
3.
4.
5.
you
6. ever wanted to create clean and nice
portfolio design? In this tutorial
I
7.
will show you how to design clean blue portfolio
layout. Have you ever
wanted
8. to create
clean and nice portfolio design? In this tutorial
I will show
you how
9. to design clean
blue portfolio layout in Adobe Photoshop.
10.
11.
13.
14.
15.
复制代码
在PSD文件里,隐藏其他所有图层,只留下按钮图层部分,切下按钮部分,保存png格式,
命名为 .
现在我们把这些图片添加到页面中去,切换到css文件页面,添 加如下代码,这里包括背景
样式,和按钮的样式
1.
2.
#featured
3. {
4. background:url() no-repeat;
5.
6.
7.
height:381px;
margin-top:30px;
margin- left:80px;
8.
9.
}
#featured a
10. {
11. background:url();
12. height:30px;
13. width:124px;
14. text- indent:-9999px;
15. position:absolute;
16. margin-top:330px;
17. margin-left:180px;
18. }
19. #featured a:hover
20. {
21. background-position:0px 30px;
22. }
复制代码
现在我们添加些dummytext(文字介绍)的样式:
1.
2.
.dummytext
3. {
4.
5.
6.
7.
color:#d2d2d2;
width:245px;
margin-top:150px;
position:absolute;
8. font- family:Arial, Helvetica, sans-serif;
9. font- size:12px;
10. line-height:180%;
11. margin-left:290px;
12. }
13.
复制代码
1.
2.
.dummytext span
3. {
4.
5.
6.
font-size:16px;
color:#191919;
font-weight:bold;
7. }
复制代码
下面添加添加图片展示下面的分类介绍部分
1.
2.
3.
4.
BEAUTIFULWebDesignFan is a design
related blog 9.
EFFECTIVEWebDesignFan is a design
related blog 14.
FUNCTIONALWebDesignFan is a design
related blog 13.
BEAUTIFULWebDesignFan is a design
related blog 18.
EFFECTIVEWebDesignFan is a design
related blog 23.
FUNCTIONALWebDesignFan is a design
related blog 2010 ©
Fictional Design Studio. Design by
Webdesignfan.
about web design, photoshop,
freebies
5. and tutorials. We publish
useful information dedicated to web
designers
and developers. Here you can find free
6.
resources like vectors, wordpress themes and a lot
of inspiration.
7.
8.
about web design, photoshop,
freebies
10. and tutorials. We
publish useful information dedicated to web
designers and developers. Here you can find
free
11. resources like
vectors, wordpress themes and a lot of
inspiration.
12.
13.
about web design, photoshop,
freebies
15. and tutorials. We
publish useful information dedicated to web
designers and developers. Here you can find
free
16. resources like vectors,
wordpress themes and a lot of inspiration.
17.
18.
复制代码
我们中间部分的内容,整体看起来应该是这样的:
1.
2.
3.
4.
5.
Have you
6. ever
wanted to create clean and nice portfolio design?
In this tutorial
I
7. will show you
how to design clean blue portfolio layout. Have
you ever
wanted
8. to create clean and
nice portfolio design? In this tutorial I will
show
you how
9. to design clean blue
portfolio layout in Adobe Photoshop.
10.
11.
about web design, photoshop,
freebies
14. and tutorials.
We publish useful information dedicated to web
designers and developers. Here you can find
free
15. resources like vectors,
wordpress themes and a lot of inspiration.
16.
17.
about web design, photoshop,
freebies
19. and tutorials. We
publish useful information dedicated to web
designers and developers. Here you can find
free
20. resources like vectors,
wordpress themes and a lot of inspiration.
21.
22.
about web design, photoshop,
freebies
24. and tutorials. We
publish useful information dedicated to web
designers and developers. Here you can find
free
25. resources like vectors,
wordpress themes and a lot of inspiration.
26.
27.
28.
29.
复制代码
去你的CSS文件添加下面的代码,
1.
2.
#paragraphs span
3. {
4.
font-family:
5.
6.
7.
font-
size:22px;
font-weight:600;
letter-
spacing:-2px;
8. }
9.
#paragraphs
10. {
11. margin-left:80px;
12. font-family:Arial, Helvetica, sans-serif;
13. color:#191919;
14. font-size:12px;
15. margin-top:15px;
16. }
17.
.paragraph
18. {
19. width:250px;
20.
margin-left:15px;
21. float:left;
22. }
复制代码
这个就是我们到目前位置的效果:
下面处理网站底部
现在,我们完成该部分内容,我们将开始创建页脚.
首先,在你的PSD文件中,隐藏除页脚和页脚纹理层外的其他层,然后把页脚文件夹的东西
切片并保存为.
然后再切一遍,把按钮和鸟的图形切下来.分别取名为和 .
编辑底部代码
底部页脚包括一些文字和一个带有链接的小鸟图片.
所以在HTML页面添加如下代码.
#footer
{
background:url();
height:71px;
margin-top:191px;
}
#footer p
{
font-family:Arial,
Helvetica, sans-serif;
font-size:12px;
color:#959595;
position:absolute;
margin-top:30px;
}
#footer a
{
background:url();
text-
indent:-9999px;
position:absolute;
height:27px;
width:124px;
margin-
left:730px;
margin-top:30px;
}
#footer
img
{
float:right;
margin-top:10px;
}我们用 做页脚的背景,然后添加一些文字的样式.
对于底部的鸟图片的链接,我们用之前同样的办法,利用浮动效果定位。
最终效果
到现在就算是结束了,不知道大家有没有看懂,不懂的就留言,什么地方不懂,我再添加修<
br>改下,哈哈~ .
文件下载地址 (0,7 MB) 钢琴曲献给爱丽丝-葛炮
隆鸟-唐娟
儿童文学投稿-炼铁设备
渣油-上文申江
英文版简历-荷花是什么时候开
abc输入法-曼陀罗的花语
kidsme-家乡美
关于孩子的教育问题-ending
【PS】PSD网页页面切割HTML全过程教程的相关文章