Skin制作准备

**Skin制作步骤
**

一. 结构构思 首先需要定位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的标题。