Posted in: 技术栈 | Tech

ELFBLOG Skin制作手册

Skin制作准备

Photoshop and Dreamwaver[或其他同类软件]
操作者需要具备基本图片处理和网页制作的知识

Skin制作步骤

1. 定位Blog的类型,并根据内容构思规划skin布局
2. 将构思具体化,如需图片背景,则用Photoshop制作好背景图片并切片输出
3. 用EB标签写好skin.html,标签见http://uno.huming.com/eb07/
4. 设计CSS风格文件style.css
5. 完善其他可选内容,如Mp3播放器JS等
[注:skin.html是skin的整体,控制显示内容,style.css用于统一整体的风格,比如字号,字体等]

一. 结构构思
首先需要定位Blog的类型,比如是以文字或图片展示为主,或互动交流为主。这决定了首页上需要显示的内容以及采用几栏版式为佳。

  • 文字或图片为主 文章的文字和图片都是自己想要展示的作品,自然希望读者将目光放在文章主体上,因此设计时,日志部分应该突出显眼,其他内容可选。可采用一栏或两栏版式。
  • 互动交流为主 这种类型需要考虑的是访问者的回复,最新引用以及留言本的作用。首页中要在突出位置展示出上述内容,由于元素较多,因此最好使用两栏或三栏的版式。
    页面构思示例:采用居中单栏的版式。上部内容为日志名称与描述,中部为日志文章内容,下部显示作者介绍与最新评论。 

    二. 模板构造
    确定了主要内容和版式之后,就要在Dreamwaver中开始制作skin.html文件。
    如果使用的是简洁的表格模板,则可以跳过下面的Photoshop设计这一步。

    (一)Photoshop设计背景图片:
    1. 打开Photoshop,制作出模板外观,这里就不详述了。示例如下:

    2. 做好背景图后,按照各个部分切片,这里也略述,保存在XXX/skinfiles/images/目录下[注:XXX是你给模板起的名称]

    (二)在Dreamwaver中制作skin.html
    首先来了解一下一个skin中必不可少的部分,主要是Header、Content、Sidebar、Footer

  • header 包括标题,和blog描述,有时也可以把菜单栏放在里面。
  • content 即页面主体,一般由日志列表,评论,公告等组成
  • sidebar 侧栏,最近更新,最新留言,日历,标签,按月归档等等都可以放在侧栏。sidebar和content的具体划分看个人爱好。
  • footer 基本上就是版权信息的部分
    了解了各个组成部分后,用Dw根据构思做出一个基本的页面框架。
    由于采用的是先构造页面再代入EB标签的方法,因此开始的时候完全可以忽略EB标签的问题。
    如果是使用背景图的网页,页面框架一般是根据切片情况来制作表格。I. 如何引入背景图片。
    下面根据示例中的图片来制作一个基本网页结构。
  • 在Dw中新建一个空白html文件,保存到XXX/skin.html。
  • 在页面设置里面设定网页的上下左右边距都为0,这样才能使网页边缘没有空隙。
  • 新建一个表格,设置为4行3列,宽度为1010px,边框为0,单元格间距为0,单元格填充为0,其它默认。
  • 将第1行和第4行的3列合并,使表格布局与切片布局对应。
  • 将做好的背景图片引入表格。点选单元格,然后设置图片背景URL,这里一定要使用相对路径,不然模板上传后会找不到图片路径。然后根据图片大小设置单元格大小。
  • 将每一部分背景图片引入后得到下图。 II.引入EB标签添加主要内容。
    从设计模式切换到代码模式。
    1. 首先可以看到如下所示部分。 

    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
    http://www.w3.org/1999/xhtml”>

    这里的的部分就是header区域。将“无标题文档”用[#blog_title#]替换,这样浏览器标题栏就会显示Blog的标题。

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Back to Top