65.9K
CodeProject 正在变化。 阅读更多。
Home

HTML 帮助中的电子相册

<i>Victor Vogelpoel</i>
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.91/5 (7投票s)

2002年1月28日

6分钟阅读

viewsIcon

240293

downloadIcon

4179

HTML 帮助 (.CHM) 文件中的完整电子相册，包含首页、索引、幻灯片放映和说明/关于页面。

  

  

目录

  • 引言
  • 特点
  • 什么是 HTML 帮助？
  • 安装 HTML Help workshop
  • 创建你自己的相册
  • 相册源文件
  • encode.bat 和 srcenc.exevv

引言

终于用 HTML 帮助来找点乐子了！这个小项目表明，HTML 帮助不仅可以用于在线帮助……上面的截图展示了演示相册，它是使用 Microsoft 的 HTML 帮助实现的。只需一个 CHM 文件，你就可以分发一个包含你照片的完整相册。

1999 年我买了第一台数码相机时，我需要一种像相册一样体面地分发照片的方式。有了这个电子相册，你自己可以轻松地用自己的照片构建自己的相册，并将相册送给你的家人和朋友。任何运行 Windows 和 Internet Explorer 4（或更高版本）的人都可以轻松查看它。源代码下载中的相册包含所有逻辑，只需加水，哦，照片即可。

这个演示相册由我在 TechEd 2001（巴塞罗那）、2001 年南非度假之旅期间拍摄的照片以及我一个“我不在正常状态”网站（webknuffels.nl）上的一些图片组成。

特点

  • 固定大小窗口，带相框图片，至少为 800 x 600 屏幕设计，
  • 每个页面上都有一个小的“控制面板”：转到首页、转到索引页、播放幻灯片和转到说明页。
  • 一个首页或标题页（例如，由一些照片组成的构图），
  • 相册中照片的自动索引页，
  • 点击索引页显示特定照片，
  • 幻灯片播放所有照片，
  • 一个说明/关于页面，
  • 上一张/下一张照片箭头，
  • 非常容易构建你自己的相册：准备你的照片（JPG），在 photos.js 中注册每个 JPG，为每张照片制作一个标题，编译，然后就完成了！（嗯，差不多）。

本文主要介绍你如何用自己的照片来使用这个相册，而不是相册在技术上是如何构建的。如果你有兴趣，可以看看 HTML 页面和 .js 文件中相册的内部结构。我可以考虑写一篇关于技术部分的文章……一些技术特点

  • 使用 URL 中的书签（“#”）符号而不是不起作用的搜索（“？”）符号将参数传递到 CHM 内部的另一个页面！现在信息可以从一个页面传递到另一个页面，比如最后查看的照片，这样任何页面更改都可以对此做出适当的反应。
  • 准备对脚本进行编码（参见后面的“encode.bat 和 srcenc.exevv”）以防止对相册进行篡改。
  • 缓冲图像加载以克服 IE4 图像调整 DHTML“错误”。

什么是 HTML 帮助？

Microsoft HTML 帮助是 WinHelp 的继任者，自 Internet Explorer 4 和 Windows 2000 以来一直用于 Windows 帮助系统。HTML 帮助文件通常使用 .CHM 扩展名，由多个 HTML 文件、JPG/GIF 图像和脚本组成。CHM 文件实际上就像一个完整的网站压缩到一个文件中：“CHM”是“Compiled HTML”的缩写。此外，通过目录、索引和全文搜索，可以创建一个完整的帮助系统。

使用 Microsoft HTML Help workshop 中的 HTML Help 编译器（参见后文），相册的文件被编译成一个单独的 .CHM 文件。这个相册特别使用了 4 个 HTML 文件、几个 GIF 文件和照片 JPG 文件来构成 album.chm。我们不会使用 HTML 帮助相册中的 HTML 帮助内容、索引和全文搜索选项卡。

安装 HTML Help workshop

要将文件编译成 .CHM 文件，你需要安装包含编译器的 Microsoft HTML Help Workshop。使用上面的链接下载并安装该工作坊。

创建你自己的相册

只需 6 个步骤，你就可以使用相册源代码（可以通过本文顶部的链接下载）构建你自己的相册
  1. 将相册源文件从 zip 文件中解压到你选择的文件夹中，并删除“photos400x300”文件夹中的所有（演示）JPG 文件。我在下面总结了这些文件。

  2. 选择你想要放入相册的照片，使用 PhotoShop 或 PaintShop Pro 等图像编辑器将它们调整为最多 300 像素高和最多 450 像素宽，然后将文件保存到“photos400x300”文件夹中。

  3. 接下来，我们需要为相册的起始页创建照片；它被称为composition.jpg，必须保存在“photos400x300”文件夹中。我通常会从一些照片中创建一个构图（因此得名），并添加一些文本，例如相册的标题。我发现演示相册的构图相当成功。

  4. 编辑 photos.js 来“注册”你的照片： 
    • 用你自己的照片替换演示照片的注册，位于
      // Define the photos.
aPhotos = new Array(
	//"Filename", "Caption",
 	"yourphoto1.jpg", "Title of photo 1",
 	"yourphoto2.jpg", "Title of photo 2",
	"yourphoto3.jpg", "Title of photo 3"  // NO COMMA at the last entry!
        }
    • 对于每张照片，存储一个文件名-标题对："yourphoto1.jpg", "Title of photo 1",，组成一个这些对的 JavaScript 数组。请注意，你必须在对之间和之后使用逗号，但要省略最后一对后面的逗号，否则会出现语法错误！ 

  5. 编辑 album.hhp（HTML Help 编译器项目文件）以更改编译输出和相册标题
    • 将“编译文件”（生成的 .CHM 文件的名称）从
        Compiled file=victorsdemoalbum.chm
      改为类似
        Compiled file=vacation2001.chm
    • 通过更改“Victor's demo photo album”来更改相册的标题，位于
      [WINDOWS]
main="Victor's demo photo album",,,,,,,,,,,0x0,[16,0,717,560],0x0,0x0,,0,0,0,0
      改为类似
      [WINDOWS]
main="Vacation 2001",,,,,,,,,,,0x0,[16,0,717,560],0x0,0x0,,0,0,0,0
  6. 启动 Microsoft HTML Help Workshop 并打开相册的 HTML Help 项目文件 album.hhp。选择 文件 | 编译 并让 Workshop 编译相册。瞧！就这样！相册已创建！

相册源文件

这些是相册中的文件

photos400x300\ 存放照片和 composition.jpg 的文件夹
images\ 相册图片
start.htm 相册起始页
thumbpic.htm 相册索引/缩略图页
pic.htm 普通图片/幻灯片放映页
about.htm 关于/图例页
album.css 相册样式表
album.js 相册的 JavaScript 代码
lang.js 工具提示文本
langen.js 工具提示文本 英文（复制到 lang.js）
langnl.js 工具提示文本 荷兰文（复制到 lang.js）
photos.js 照片注册
Album.hhp HTML 帮助项目文件
encode.bat 对相册脚本进行编码
SCRENC.EXEVV 微软脚本编码器

encode.bat 和 srcenc.exevv

encode.bat 只是一个方便的调用机制，用于使用 Microsoft Script Encoder SRCENC.EXE 对相册中的脚本（HTML 和 .JS 文件）进行编码。现在只有 Internet Explorer（实际上是 Microsoft 脚本引擎）才能解码和理解脚本。这是一种方便的方法来保护相册免遭篡改：脚本不再可读！

这个想法是在将文件编译成 .CHM（上面第 6 步）之前对脚本进行编码。

那么我为什么要给脚本编码器的文件名加上两个“V”呢？因为编码是不可逆的，你最好在相册文件夹的副本上进行编码过程！复制相册后，从编码器的文件名中删除双“V”，然后执行 encode.bat 对相册文件进行编码。然后执行“创建你自己的相册”的第 6 步。

来自编码的 photos.js 的示例

//**Start Encode**#@~^OwcAAA==@#@&@#@&Jz,Ktb/,Wk^+~mKxOCbx/,CV^PY4n~w4WDWdPCU9P^
laOkKxd~K0@#@&&JPOtbd,wCMYbmE^lM~l^4;:c@#@&@#@&zz,j+DPY4n~w4WDW~Nr.mOWMz@#@&/P4
!:4UCbVjk.nhtGDWkSW1lDrW	PxJatGOK/FZT6F*zrI@#@&kHNrEhjbynn4GYK/JG1lYrG	
P~P,xrw4KYK/cZ!Xf!ZzEi@#@&&&krDTrxmV?b"nn4WDWdSG^mYrW	~P,'E24WYGd8!+cX{+%&ri@#@&
@#@&zJ~?Y~Y4+~ObYV~W6PY4n~l^4!:@#@&d)^4;::rY^+~x,J.r^DW.Bk~9+hKPmV4!:rI@#@&@#@&
zJP9n6kx~Y4+Pa4GYK/c@#@&lK4KYG/,xP	+A~zDDCzv@#@&zJEwksxm:+r~,EZmwOkKxES@#@&JZT
...

许可证

此软件包根据 Artistic 许可证发布。

更改日志

2002 年 1 月 26 日 - 初次发布
2002 年 2 月 20 日 - 添加了精简版源代码下载（仅含两张照片）并添加了使用许可。
2002 年 11 月 7 日 - 删除了已失效的 HtmlHelp workshop exe 链接并澄清了一些内容。

© . All rights reserved.