竞赛和推广式广告:芷苑模版制作全图解（一）

芷苑模版制作全图解（一）
（寄语燃情）
http://style8899.blog.163.com/
音画整理：芷
文：芷


此篇图解主要是针对燃情博客模版的制作，小芷写成图解，也希望对刚刚学习制作博客模版的博友们有所帮助，不足之处，希望大家多提宝贵意见，小芷会学习和改进的，谢谢每一位浏览的朋友。愿大家的博客越办越好！
——   芷
 
燃情姐你好！
不知道这样的风格姐姐是否喜欢，小芷在制做之前，好好看了看姐姐的博客，姐姐应该是属于那种，有着丰富情感，却不失雅致的韵味女人。因此，小芷将模版颜色定位在了紫色与粉红色之间，图片的选择也趋向于姐姐的生活情调。小芷将做好的图片在自己的博客试了试，现将后期的制作数据给你附录如下（此数据可供姐姐参考，也可随姐姐的喜好稍做修改）。当然，如果姐姐觉得有什么地方需要修改也可以告之。


１、打开博客后点击最上方的换衣服按钮

２、点击风格自定义

３、点击新建风格



这样就进入模版编辑状态
一、浏览器的设置

先将浏览器背景设置为水平+平铺的方式，然后点击选图将下图插入：

点击图片得到源图片地址然后保存在自己的电脑上，一定要点击图片后在保存，否则在插入后面的图片的时候，像素会不合适的。
将浏览器的背景根据自己的喜好，可设置为随页面滚动和背景不随页面滚动两种，在这里小芷选择的是后者，也就是在固定背景的小方框里打上钩。
这样浏览器就已经设置好了。


二、顶区设置

将顶区高度设置为450PX，选择不平铺方式，选择居中顶端的对齐方式，然后将下图插入：



点击图片得到源图片地址然后保存在自己的电脑上，一定要点击图片后在保存，否则在插入后面的图片的时候，像素会不合适的。
然后设置顶区文字，姐姐博客的顶区文字小芷已经做在图片中了，这里就不需要设置了，只需要最后将首页顶区上文字消除就可以了。消除的方法很简单，点击编辑在输入文字的地方输入空格后保存就可以了。


三、导航条的设置

导航条背景设置为100PX，选择不平铺方式，然后选择居中、顶端的对齐方式，将下图插入：


点击图片得到源图片地址然后保存在自己的电脑上，一定要点击图片后在保存，否则在插入后面的图片的时候，像素会不合适的。

导航条的文字设置：文字大小为标准字体大小，文字粗细为标准，文字的颜色码为  #999564 （可直接复制到颜色代码栏中），文字的水平位置为 549PX，文字的宽度为  58PX
注：文字的水平位置和文字宽度的数据姐姐就按小芷提供的吧，这里如果改动了，那7个栏目就不能乖乖的在小芷做好的小圈圈里了。

导航条当前项的设置：文字选择标准文字大小，文字粗细同样为标准粗细，文字的颜色码  #cecd92（可直接复制到颜色代码栏中）

导航条鼠标滑过项文字设置：文字选择标准文字大小，文字粗细同样为标准粗细文字的颜色码  #cecd92（可直接复制到颜色代码栏中）


四、中区的设置

进入模板中区后，首先选择一行三列的结构模式，水平方式不用设置也可，对齐方式设置为居中顶端。然后设置4区的高度为 52PX（这里是不能够改动的，因为4区的图片高度只有 52PX，要是姐姐改高了，就变成露脐装了）。
设置好后点选图将下图插入：


点击图片得到源图片地址然后保存在自己的电脑上，一定要点击图片后在保存，否则在插入后面的图片的时候，像素会不合适的。


中区1区和2区的设置很简单，将平铺方式设置为垂直平铺，对齐方式为居中，重要的是一定别忘记设置2区的宽度 47PX（这里也不能改动的）然后将下图分别插入1区和2区：
（2区图片）   （1区图片）
点击图片得到源图片地址然后保存在自己的电脑上，一定要点击图片后在保存，否则在插入后面的图片的时候，像素会不合适的。

中区3区一定设置缩进宽度的数据，否则边框会跑到1区和2区中，影响美观，这里小芷设置左右缩进都为  41PX （这个数据只可大于41PX），设置水平+垂直的平铺方式，然后将下图插入：


点击图片得到源图片地址然后保存在自己的电脑上，一定要点击图片后在保存，否则在插入后面的图片的时候，像素会不合适的。
这样中区部分的设置也就完成了。


五、底区的设置

底区首先设置高度 221PX，平铺方式可设置为不平铺，设置居中顶端的对齐方式，文字颜色码为 #999564（可直接复制到颜色代码栏中），文字距上间距设置为 35PX，然后点击选图将下图插入：


点击图片得到源图片地址然后保存在自己的电脑上，一定要点击图片后在保存，否则在插入后面的图片的时候，像素会不合适的。


六、模块的设置

 
 
 
因为小芷个人不太喜欢很花的页面，所以在这里模块的背景没有做过多的设置，只是将模块的当前区高度设置为 20PX，这里姐姐可根据自己的需要添加模块背景。
模块文字的设置是最重要的，它可以说占领了页面最主要的位置，清新协调的颜色搭配可以让页面更具观赏，建议4项文字的颜色设置选用一个色系相接近的色码，这里将参考数据附下：模块标题的颜色 # b1ae88，重要文字颜色 # 999564，次要文字颜色 # bfbb8e，链接文字颜色 #cecd92（可直接复制到代码栏中），标题的垂直位置设置为 27PX。

上图是模块边框的设置，粗细为标准，类型为实线，颜色码 #796045。


七、其他的设置

按纽的设置：背景颜色码 #7a4e56，按纽边框颜色码 #cecd92，按纽文字颜色码 #999564
分隔线设置：分隔线1颜色码 #7d7355，分隔线2颜色码 #cecd92
当前项设置：当前项颜色码 #774c54。


到这里，姐姐的模版就完成了，这是小芷第一次写图解，希望对姐姐用帮助，祝健康快乐！
相关文章：【原创】芷苑模版制作全图解（二）
【原创】芷苑模版制作全图解（三）

【原创】芷苑模板集锦

',1)">


',2)">
图片素材出自网络