留言板记得邮件哦 arthuridea[at]gmail.comRSS订阅
<<  [测试]测试一下你对blog的依赖度 | 首页 | [教程]blogbus模板制作（2）——页面布局篇（上）  >>

[教程]blogbus模板制作（1）---效果图篇 - [电脑技术]

    blogbus的模板制作功能是十分强大的。只要你稍微懂一点HTML和CSS，就能制作出非常专业的模板来。

    我这里讲解的完全适用于通过修改已有的模板来个性化模板的用户，但更多是着眼于想“白手起家”，重新制作一套模板的群体。限于本人水平，文章定位并不高，适用于刚刚了解一些网页设计的概念但又缺乏实践的人，如果你制作过网页，欢迎对本文提出批评和建议，本人也欢迎多多指教。本教程包括以下几个大的章节：

    1、效果图篇（难度★☆☆，技巧★★☆）

    2、页面布局篇（难度★☆☆，技巧★☆☆）

    3、样式美化篇（难度★☆☆，技巧★★★）

    4、画龙点睛篇（难度★★★，技巧★★☆）

    整个过程不单单是模板制作的过程，也是一个网用div+css页开发的过程，我尽量会用通俗的语言去阐述制作模板的整个思路。也许其中难免会涉及Web设计的相关概念，请自行参阅相关书籍。[如果仅仅对修改模板感兴趣的，可以粗略的看一下第一部分，我将从第二章开始涉及用blogbus内部标签制作模板的过程]

首先是效果图，这几天抽空画了一张，但是没有完全展现出页面的风貌。图如下所示：

effect

    blog的页面相对结构比较简单，主要给头部的标题区，栏目列表区，文章显示区预留出位置就可以了。 效果图本身设计较多的是设计相关的技巧。配色方面定下一个基调，页面全部颜色不要太杂了就好。一般情况下我的思路是主色调不超过三四种，临近的区域不要用互补色。质感的表现，看自己喜欢什么类型的了。我是不喜欢某些过于“现代”的让人眼花缭乱的页面，页面比较均衡优雅就可以了。

    我的这个效果图，主要表现一种神秘幽远的氛围，所以用色上整体突出了一种静谧，深邃的感觉。而且多用模拟半透明的效果。所谓效果图，主要表现出页面整体风格，某些细节上的设计（比如左侧的分类面板，我的确准备把它做成面板的），鼠标动作后的外观改变（比如鼠标滑过分类菜单时的光晕）——这些重要的部分都要有所体现。我是用PS作图的，图层功能可以方便的运用于表现某些效果上，而且方便日后切图。

    blog的效果图要说的内容并不多，为了对后面的内容作铺垫，来说说切图。

    ·为什么要切图？

     网络是有带宽限制的，网速也有快有慢，为了让访问你的页面的人获得良好的用户体验，我们要把整体的图切割成小的部分，来缓解网络的延迟对于访问者视觉上的影响。

    ·切图是一种艺术

    切图本质就是把图片分解。我们要观察，综合考虑以下几点：

        （1）页面布局：在着手写页面（好的页面的确是写出来的，不是用所见即所得的东西临时拼凑的）之前要做到心中有数，切图首要兼顾页面的逻辑区域，根据你要表现的内容做个总体划分；

        （2）图像的特征：是否在横向或纵向是重复区域？是否可以重复利用某些图片？当然也不是图片越小越精简越好。似乎IE用某些极小的图形铺满较大的区域时渲染时间会比较长[当然是比网络延迟快出N个数量级去了=v=]。但总的原则，切片要精炼，在权衡画质和图片大小的情况下尽可能的小。

        （3）切片图的格式：如果想展现淋漓尽致的美我倾向于使用png格式的。尤其在一些现代浏览器（firefox,opera，还有后赶而来的IE7）支持带alpha通道的png图片的时候（IE6可以通过某些技术上的手段支持透明png，我将在下面的章节叙述）。如果你的图片基本上不要求很高的质量，颜色过渡不要求很平滑，gif格式是很好的选择。gif优势在于体积小，直接的结果就是页面加载速度快。不过gif最高只支持256色，不适宜表现颜色丰富变化复杂的图案，也不适宜表现大面积的过渡色或透明边缘。

    图片切割可以用PS里的切片工具进行，技术上不在本篇讨论之列，我就不赘述了。

    图片具备，只欠一个承载它的容器——html了。

    欲知后文如何，且听下回分解。

   


随机文章：


收藏到：Del.icio.us




Tag：原创空间 设计 blog模板 blogbus模板 Web标准
引用地址：
Arthuridea 发表于21:50:30 | 编辑 | 继续话题 | 转发 | 分享　0

关闭

RSS 什么是RSS？
用IM提醒我内容更新
订阅到QQ邮箱
订阅到鲜果阅读器
订阅到Google阅读器
订阅到抓虾阅读器

关闭

Arthuridea[at]gmail.com

Replace [at] with @