1 简介

Picasa是一个很优秀的免费的图片管理软件（现已被google收购）。Picasa管理图片的功能非常强大，这里使用到了它的导出网页的功能。

如果单纯靠手工去制作网页开浏览图片，将会非常费力繁琐，因此需要借助软件的辅助来帮助我们完成这个繁琐的过程。

2 认识网页模板

Picasa导出为网页时需要用到网页模板。首先我们了解一下什么是模板文件以及如何工作的。模板文件保存在Picasa的安装目录下。假设你的Picasa安装路径为D:\Program Files\Google\Picasa3，那么模板存放的路径为D:\Program Files\Google\Picasa3\web\templates。下图为我电脑上安装的模板，每个模板存放在一个单独的文件夹下面。

不同的模板组织图片生成的网页风格各不相同，用户可以根据自己的需要去网上搜索模板下载放到该文件夹下，当然也可以对模板文件进行修改生成自定义文件。除了初始自带的模板外，大部分比较绚丽的模板都是用到了flash+xml技术。xml文件用于保存图片的各种信息（图片的路径，图片对应的缩略图thumbnails存放路径），flash通过读取xml文件来显示对应图片以及加载图片信息。Picasa执行选择的模板文件夹下的index.tpl文件中的脚本命令，将相册文件夹下所有的图片组织，生成最终的网页。

这里我们仅使用了FotoPlayer模板，我们可以根据需要对模板进行修改，来实现我们的要求。以它为例简述模板文件夹下各文件用途。FotoPlayer目录如下图所示。

Index.tpl即生成网页用到的脚本模板文件，如下图所示：

文件的头部#开头的第一行为模板的一些附属信息。文件第一行：

#templatefile -v "1.0" -n "FotoPlayer v4.1" -d "FotoPlayer 4.1 for Picasa template. www.fotoplayer.com "

表示该模板的版本为"1.0"，模板的名称为"FotoPlayer V4.1"，模板的详细描述为"FotoPlayer 4.1 for Picasa template. www.fotoplayer.com "（注：-V:Version， -n:Name, -d :Description）从下图导出时的界面也可以看出。

Preview.jpg为模板的效果预览，见下图右下角部分的效果。

文件头部#开头的其他行为正常注释，为作者写的说明。

正文部分（非#开头部分）为Picasa将要执行的脚本，以及一些图片默认大小等的定义。执行方式请参考具体的开发文档（D:\Program Files\Google\Picasa3\web\documentation\index.html ）。

Header.xml，imagelistelement以及footer.xml用于生成最终的xml文件。

Assets目录，顾名思义，是本模板用到的资源文件，里面其实是网页的主体模板，包含了图片播放用的flash（D:\Program Files\Google\Picasa3\web\templates\FotoPlayer\assets\res\fotopalyerlite.swf）在页面内。该flash可以读取xml文件并解析，显示图片。Congfig.xml文件(D:\Program Files\Google\Picasa3\web\templates\FotoPlayer\assets\res\config.xml)为该flash播放图片时的配置文件。mp3s文件夹下为待播放的mp3背景音乐，播放内容和播放模式可以在config.xml里面进行配置，如下图所示tracks对应的部分即音轨的相关配置。

在对模板文件有了大体的了解之后，我们就可以用Picasa结合模板导出网页了。

3 网页导出步骤

1、将待使用的模板拷贝到Picasa对应存放模板的文件夹下。

2、创建一个新的相册，用于管理即将导出的图片。

3、找到要导入的图片文件夹，按以下步骤进行导入。

1）选中待导入文件夹下所有的图片。

2）导出选中的所有图片到相册

3）拖动图片以调整各图片在相册中的顺序

4）双击图片进入图片剪辑页面

5）给图片添加说明

由于Picasa软件在导出照片为HTML网页时，遇到中文名的图片文件，会用数字进行重命名。而我们想要在网页中看到图片的文字说明，一般的文字说明可以直接采用文件的名字（对应的变量为<%itemName%>，见imagelistelement.xml），但在这里中文的文件名会被改掉，因此不能用文件名作为图片说明进行显示。所以需要对图片制作文字说明，在网页中将这部分说明作为最终的说明（对应的变量为<%itemCaption%>）。下图为使用这个说明作为图片的最终说明的一个修改例子。

下图为添加图片说明的操作。添加的说明中用到的引号不能使用英文引号，用引号的地方一律使用中文引号，因为xml文件的语法中有英文引号，如果在图片说明里使用英文引号会导致xml语法解析出现问题，导致网页图片工作异常。

6）给所有图片添加说明完成后，返回图片库。

7）因为要导出的是整个相册的图片，默认返回图片库时时仅选中一张最近一次选中的那张照片，因此需要重新选择所有的图片。可以用步骤1）的方法：右键相册》选中所有图片，也可以随便点一下其他文件夹下图片，再重新点击本相册，选中该相册。

8）导出为HTML页面。

4、找到导出的网页文件夹，稍微调整后即可直接使用。

导出后显示出生成的photo.xml，里面的内容为各图片的相关属性。

在同一目录下的index.hmtl即我们的网页主文件，通过读取photo.xml，显示图片及相关信息。

4 FotoPlayer界面说明：

导出后页面的效果为：

修改相册日期说明的方式为右键相册，选择“编辑相册说明”，见下图：

调出音乐菜单的位置：

5 其他说明：

如果需要对页面效果或者播放效果进行修改，直接修改模板文件的内容，再重新导出网页，保证该生成网页方法的通用性和简便使用。