编辑“Gallery:外观主题:如何新建一个外观主题”（章节）

= 如何新建外观主题 =

喔，原来你做了一个超酷的相片相册模板，还想把它用到Gallery上。那么在这个教程中，我会介绍如何将HTML相册和相片模板转为Gallery外观主题的。 

这是假定你一定程度上掌握HTML和CSS并基本了解[[Gallery:Themes:Anatomy_of_a_Theme| Gallery外观主题]]的情况下给出的教程。你并不需要精通PHP，但掌握基本的脚本编写知识和编程模式还是有帮助的。

准备好要新建一个外观主题了么？准备好了的话就开始啦。

== HTML模板 ==

我建了两个基本的HTML模板，一个用于显示相册缩略图，另一个用来查看单个相片。我利用stylesheet和一些JavaScript函数来控制HTML模板的外观呈现。因为JavaScript会重设缩略图容器的尺寸来使其符合页面甚至是窗口所需，所以我将此外观主题命名为AutoRC—Auto Rows and Columns（感谢floridadave，这名字不赖 :D）。 

设计相对简单—我选择的是在相册模板各缩略图之下显示相册标题，描述和图片标题的方式。仅标题和字母被显示在相片详细信息的模板上。 

<span class="plainlinks">[{{SERVER}}{{localurl:Image:Autorc-html-album.png}} http://codex.gallery2.org/images/7/78/Autorc-html-album-sm.png]</span>

<span class="plainlinks">[{{SERVER}}{{localurl:Image:Autorc-html-photo.png}} http://codex.gallery2.org/images/5/5b/Autorc-html-photo-sm.png]</span>

这里有我建立的用于mockup的文件：

'''请注意这些文件没有在IE6中做过测试。在此教程完结之后，我会将这些文件更新以适用于IE6。'''

* [[Gallery:Themes:AutoRC_Album_HTML|album.html]]
* [[Gallery:Themes:AutoRC_JavaScript|functions.js]]
* [[Gallery:Themes:AutoRC_Photo_HTML|photo.html]]
* [[Gallery:Themes:AutoRC_CSS|theme.css]]

== 开始作业 ==

首先我们要做的是为新外观主题建一个目录。我们会将源HTML模板，风格页和JavaScript的拷贝放在此文件夹下。

# 首先，在gallery2/themes/下新建一个'autorc'文件夹
# 接着讲theme.css和functions.js复制到autorc文件夹中
# 在gallery2/themes/autorc中，新建一个名为'templates'的文件夹
# 将album.html和photo.html复制到新建的templates文件夹中
# 将album.html和photo.html的文件扩展名修改为.tpl
# 由于我没有为admin，error，module或progressbar 页面创建模板，所以直接从Matrxi外观主题复制过来了（themes/matrix/templates）

接下来，我们[[Gallery:Themes:How_to_Build_a_Theme.inc_File|创建theme.inc]]文件。

此后，我们会将HTML页面转为Smarty模板。