WWW上的新应用层出不穷，将已有的桌面应用移植到Web上成为一种趋势，S5就是其中一员，S5提供跨浏览器的Slide应用程序库，可以方便地制作出HTML版本的Slide文件。长话短说，让我们进入S5的世界中吧。
首先从S5的网站（http://meyerweb.com/eric/tools/s5/）下载程序包S5-11.Rar（目前是1.1版本），解压文件，包含以下文档和目录：
__MACOSX目录，MAC OSX 下的文档和脚本。
pix
目录，存放S5-demo.html下的图片。
primer
目录，存放primer.html下的图片
ui
目录，存放S5的支持脚本和样式表。
features.html
文件，介绍S5的特性。
filemap.html
文件，介绍S5的目录/文件结构。
primer.html
文件，S5 入门指南。
s5-blank.html
文件，S5 Silde Show HTML 模版。
s5-blank.zip
文件，S5 Silde Show HTML模版示例（含支持文件和样式表）。
s5-demo.html
文件，S5演示文档。
s5-intro.html
文件，S5简介。
structure-min.html
文件，S5 Slide Show HTML最小文档要求。
structure-ref.html
文件，S5的参考
xoxo-s5-demo.html
文件，支持XOXO的S5演示文档
xoxo-s5-intro.html
文件，支持XOXO的S5简介。
xoxo-structure-min.html
文件，支持XOXO的S5最小化结构。
xoxo-structure-ref.html
文件，支持XOXO的S5参考。
S5 1.1 Reference
下面是本小结使用的约定：
红色的代码 表示必须在S5 1.1中使用。
黑色的代码 表示建议在S5 1.1中使用。
蓝色的代码 表示可以在S5 1.1中选用。
灰色的代码 表示由S5 1.1JavaScript生成的代码。
(1) 文档框架
这是S5 文件的顶级框架。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> </head>
<body>
<div class="layout"> </div>
<div class="presentation"> </div>
</body>
</html>
其中：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
为了和OSF1.0兼容，文档必须设置成XHTML 1.0 Strict。
<html xmlns="http://www.w3.org/1999/xhtml"> </html>
文档的根元素。
<head> </head>
这个元素包含演讲稿的header信息，包括标题，作者的元数据，样式表和脚本的链接等等。
<body> </body>
演讲稿的主体，包括所有的内容和组件。
<div class="layout"> </div>
这个元素包含每个Slide所需的布局元素，包括header、footer和导航控制。
<div class="presentation"> </div>
包含所有Slide的容器。
(2) head — 文档的元数据
<head>
<title>[slide show title]</title>
<meta name="version" content="S5 1.1" />
<meta name="generator" content="[generating program]" />
<meta name="presdate" content="[presentation date]" />
<meta name="author" content="[author's name]" />
<meta name="company" content="[author's employer]" />
<meta http-equiv="Content-Type" content="[content-type]" />
<meta name="defaultView" content="[value]" />
<meta name="controlVis" content="[value]" />
<link rel="stylesheet" href="v11b1/slides.css" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="v11b1/outline.css" type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="v11b1/print.css" type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="v11b1/opera.css" type="text/css" media="projection" id="operaFix" />
<script src="ui/slides.js" type="text/javascript"></script>
</head>
其中：
<title>[slide show title]</title>
演讲稿的标题
<meta name="version" content="S5 1.1" />
提供确切的标记格式。该元素从OSF 1.0拷贝而来。
<meta name="generator" content="[generating program]" />
说明创建文档的工具，如果文档是手工创建，可以写入作者的姓名或者文本编辑器的名称，当然该元素也可以省略。该元素从OSF 1.0拷贝而来。
<meta name="presdate" content="[presentation date]" />
演讲稿提交的时间。该元素从OSF 1.0拷贝而来。
<meta name="author" content="[author's name]" />
演讲稿的首作者，目前上不能接受其他作者。该元素从OSF 1.0拷贝而来。
<meta name="company" content="[author's employer]" />
首作者所在的单位。该元素从OSF 1.0拷贝而来。
<meta http-equiv="Content-Type" content="[content-type]" />
说明演讲稿的content type.通常情况下设置为
application/xhtml+xml;charset=utf-8。
<meta name="defaultView" content="[value]" />
设置演讲稿的初始视图格式，有两个值可供选择：slideshow 和outline缺省值是slideshow。
<meta name="controlVis" content="[value]" />
设置演讲稿导航控制是否显示，有两个值可供选择：visible 和 hidden缺省值是visible。
<link rel="stylesheet" href="v11b1/slides.css" type="text/css" media="projection" id="slideProj" />
这是用于驱动演讲稿可视化效果的CSS链接，在该文件中引用了其它三个样式表，详情参见S5 的 File Map。
<link rel="stylesheet" href="v11b1/outline.css" type="text/css" media="screen" id="outlineStyle" />
演讲稿大纲模式的CSS文件链接。
<link rel="stylesheet" href="v11b1/print.css" type="text/css" media="print" id="slidePrint" />
演讲稿打印格式的CSS链接。
<link rel="stylesheet" href="v11b1/opera.css" type="text/css" media="projection" id="operaFix" />
Opera浏览器支持的样式表。
<script src="ui/slides.js" type="text/javascript"></script>
S5工作所需的JavaScript文件。
(3) 布局信息
<div class="layout">
<div id="controls"></div>
<div id="currentSlide"></div>
<div id="header">[any header content]</div>
<div id="footer">[any footer content]</div>
<div class="topleft">[top left layout bit]</div>
<div class="topright">[top right layout bit]</div>
<div class="bottomleft">[bottom left layout bit]</div>
<div class="bottomright">[bottom right layout bit]</div>
</div>
其中：
<div id="controls"></div>
这是一个由JavaScript填充的、用于存放导航控制的结构hook，其中包括popup导航菜单，前进/后退链接，风格切换链接。如果不使用导航控制，建议保留该元素，通过CSS屏蔽其显示。
<div id="currentSlide"></div>
这是一个由JavaScript填充的、用于存放当前进度指示器的结构hook。如果不使用进度指示器，建议保留该元素，通过CSS屏蔽其显示。
<div id="header">[any header content]</div>
Slide的header，如果header没有内容，请保留该元素，只是不填写任何内容。
<div id="footer">[any footer content]</div>
Slide的footer，如果footer没有内容，请保留该元素，只是不填写任何内容。
<div class="topleft">[top left layout bit]</div>
<div class="topright">[top right layout bit]</div>
<div class="bottomleft">[bottom left layout bit]</div>
<div class="bottomright">[bottom right layout bit]</div>
除了header和footer之外，还可以在布局上加入其它的元素容器，例如上面的四个容器元素从 OSF 1.0拷贝而来，但在默认的CSS中没有定义这几个元素的样式，需要用户自行定义。当然，你可以加入自己定义的样式属性，不必局限这四个。
(4) 幻灯片
<div class="presentation">
<div class="slide">
<h1>[slide title]</h1>
<div class="slidecontent">
[slide content]
</div>
<div class="handout">
[extra content not displayed in slide show]
</div>
</div>
</div>
其中：
<div class="slide">
在presentation段中包含一个或多个Slide，每张幻灯片的内容完全取决于演讲稿的作者。
<h1>[slide title]</h1>
幻灯片的标题，JavaScript收集所有幻灯片的标题创建导航菜单，所以幻灯片没有标题时，建议保留h1元素。
<div class="slidecontent">
幻灯片的内容容器，虽然该元素是可选的，但在实际使用中，强烈建议使用该元素。容器中可以包含任何有效的XHTML标记和内容。在一个幻灯片中加入过多的内容会给观众带来视觉上的混乱，无法突出重点，一个好的建议是一张幻灯片的内容不要超过7行。
<div class="handout">
打印版本的幻灯片内容，容器中可以存放任何有效的XHTML标记和内容，通常对长度没有限制。
S5的特性
s5-intro.html是Slide Show风格的S5简介，s5-demo.html则是Slide Show Demo，因为S5是通过标准的JavaScript和CSS实现Slide Show，无须发布到Web服器上，点击本地文件，即可看到Slide Show效果。下面简单介绍一下S5的特性：
l 自动改变文本尺寸
S5可以根据浏览器窗口大小自动更改文本尺寸大小，不会改变图片尺寸。
l 增量显示
可以为Slide元素增加“incremental”class属性，所有定义该属性的元素都获得了增量显示的功能，若各组合一些重合的图片，还可以获得基本的动画效果。
l 进度指示
通过X/Y文本指示当前Slide的位置，其中X为当前Slide号，Y为总的Slide数目。
l Slide书签
可以在HTML文件中简单地指向任意一个Slide，只要将url指向#slidexxx，其中xxx是Slide编号（从标题页0开始，依次递增）。
l 综合性的键盘控制
存在多种方式前进、后退Slide，包括大家熟悉的前进建，空格。用“C”键显示和隐藏“导航控件”或者用“T”键在Slide模式和大纲模式之间切换。
l 点击前进
用鼠标点击Slide，前进到下一个Slide，不用担心，点击电影，Flash动画或者导航控件不会进入到下一个Slide。
l 作者定制特性
作者可以在HTML页面的head中设置两个基本参数，defaultView和controlVis：
<meta name="defaultView" content="[value]" />
设置初始视图模式，有两个可用值：slideshow和outline。缺省值是slideshow。
<meta name="controlVis" content="[value]" />
设置导航控件是否显示，有两个可用值：visible和hidden。缺省值是visible。
l 基于开放的标准
S5中的一个S意味着标准，XHTML、CSS和JavaScript是它依赖的技术，所以你可以在创建和使用Web页面的地方创建和使用S5，当然，你也可以为S5创建模式如果你乐意这样去做。
l 兼容OSF和XOXO
兼容OSF和XOXO
l Public domain technology
S5已经被发布到公共域中，因此你可以一直使用它不需要担心任何须可限制。
键盘控制
注意下列键盘控制适用于Opera之外的浏览器
前进键包括：回车，右方向键，下方向键，下翻页键，在控制区、Flash或者电影之外的区域点击鼠标左键。
后退键包括：左方向键，上方向键，上翻页键。
按 Home键回退到第一个Slide。
按 End 键前进到最后一个Slide。
敲入Slide的数字编号，按回车直接跳转到该Slide。
敲入数字n，点击任何前进键（不包括回车），从当前Slide向前翻n页，点击任何后退键，从当前Slide向后翻n页。
按 “T”键在Slide和大纲模式之间切换。
按“C”显示或隐藏导航控制。
在导航控制区域移动鼠标。
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
