注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

湖 边 拾 鱼

相 聚 是 缘

 
 
 

日志

 
 

【引用】博客制作教程-2:制作更换顶栏图片的方法步骤  

2011-11-20 00:31:39|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

宽幅面城市景观系列日志背景边框-2 - 山间溪流 -     山间溪流的休闲屋 

 

博客风格制作教程-2:制作更换顶栏图片的方法步骤

 编制:山间溪流

 

现在以山间溪流自己设计制作的怀旧典雅风格为例,教你使用模板风格自定义工具”制作博客自定义风格的方法步骤。

山间溪流现在使用的风格,准备的四幅背景图片素材如下:

1:顶栏背景图片素材(尺寸:1004x440像素)

博客风格制作教程-2:如何设置更换博客顶栏图片 - 山间溪流 -   山间溪流的休闲屋

 

  2:导航栏背景图片素材(尺寸:1004X46像素)

博客风格制作教程-2:如何设置更换博客顶栏图片 - 山间溪流 -   山间溪流的休闲屋

 

 3:中栏背景图片素材(尺寸:1004X50像素)

博客风格制作教程-2:如何设置更换博客顶栏图片 - 山间溪流 -   山间溪流的休闲屋

 

4:底栏背景图片素材(尺寸:1004X206像素)

博客风格制作教程-2:如何设置更换博客顶栏图片 - 山间溪流 -   山间溪流的休闲屋

 

说明:图片素材的宽度1004为统一的建议推荐尺寸,图片的高度尺寸视需要而定。

 

下面首先讲述设置调整顶栏图片的方法步骤。

 

第一步:进入博客后,点击博客顶端的“换风格”:

博客风格制作教程-2:如何设置更换博客顶栏图片 - 山间溪流 -   山间溪流的休闲屋

 

第二步:选择“风格自定义”:

博客风格制作教程-2:如何设置更换博客顶栏图片 - 山间溪流 -   山间溪流的休闲屋

第三步:选择点击“新建风格”:

博客风格制作教程-2:如何设置更换博客顶栏图片 - 山间溪流 -   山间溪流的休闲屋

    (说明:如果是新设计的风格,点击“新建风格”,如果是在已有的“自定义风格”上进行局     部修改,则点击“修改”。)

第四步:点击“顶区”下的背景,并选择“选图”,准备上传背景图片:

博客风格制作教程-2:设置调整顶栏图片的方法步骤 - 山间溪流 -   山间溪流的休闲屋

第五步:上传顶栏图片。选择保存在电脑文件夹中准备好的顶栏背景图片,并点击“打开”:

博客风格制作教程-2:如何设置更换博客顶栏图片 - 山间溪流 -   山间溪流的休闲屋

 

第六步:调整顶区高度尺寸。图片上传完成后,可以看出:图片的高度没有完全显示出来,博客中文字的位置也不理想(如下图所示),需要调整。

博客风格制作教程-2:设置调整顶栏图片的方法步骤 - 山间溪流 -   山间溪流的休闲屋

  选择平铺方式的“不平铺”由于宽度1004px是推荐的标准尺寸,已经足够宽,不需要再平铺,只移动顶区高度的滑块至440像素满足设计尺寸就行了(注意:设计时,顶区高度不能超过450px),如下图所示:

博客风格制作教程-2:设置调整顶栏图片的方法步骤 - 山间溪流 -   山间溪流的休闲屋

 

顶区高度调整到440px后,顶图就完全显示出来了(如下图):

 

博客风格制作教程-2:设置调整顶栏图片的方法步骤 - 山间溪流 -   山间溪流的休闲屋
 

 第七步:点击“顶图”下面的“文字”,设置文字为“隶书”,大小为“标准”,调整文字的颜色(如图所示),并调整文字左右位置(将滑块移动至370左右的位置)与文字上下的位置(将滑块移动至150左右的位置),在经过以上设置调整后,文字的位置及样式如下图所示:

博客风格制作教程-2:设置调整顶栏图片的方法步骤 - 山间溪流 -   山间溪流的休闲屋
 
 
博客风格制作教程-2:设置调整顶栏图片的方法步骤 - 山间溪流 -   山间溪流的休闲屋
 
  说明:虽然文字的大小和位置已经设置好,但博客的名字“山间溪流的休闲屋”并没有显示出来,如果是在自定义风格上进行局部修改只更换顶图,你可以点击“保存风格”并重新打开首页后博客的名字就显示出来了。如果是新建风格,不要急于点击“保存风格”,要等全部工作完成后再统一保存,再重新打开首页。显示后的效果下图所示:
 

 

  

 

  评论这张
 
阅读(68)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017