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用于统一整体的风格,比如字号,字体等]
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
了解了各个组成部分后,用Dw根据构思做出一个基本的页面框架。
由于采用的是先构造页面再代入EB标签的方法,因此开始的时候完全可以忽略EB标签的问题。
如果是使用背景图的网页,页面框架一般是根据切片情况来制作表格。I. 如何引入背景图片。
下面根据示例中的图片来制作一个基本网页结构。
从设计模式切换到代码模式。
1. 首先可以看到如下所示部分。
这里的的部分就是header区域。将“无标题文档”用[#blog_title#]替换,这样浏览器标题栏就会显示Blog的标题。
0