| 注册 | 忘记密码
奇技淫巧 - 阅读主题
<<  <  1  >  >>

[S5] S5幻灯片制作 进阶篇

好(0) 差(0) 阅读(6903) 评论(1)
Wen 给 Wen 发消息 给 Wen 发email
作者头像
等级:◆◆◆◆◇◇◇

上一篇文章中介绍了构建一个S5幻灯片的基本方法,由此方法也可以对一个S5幻灯片的结构有一个基本了解。不过那里创建的幻灯片未免过于单调。本文就介绍几招,有效地丰富你的S5幻灯片。

丰富字体和颜色

要修改字体、颜色,需要使用XHTMLCSS。虽然旧的HTML语法仍可以使用,但有些在XHTML标准中已经被废弃,而推荐使用CSS方法实现。这里难以一下子把HTML、XHTML和CSS的关系说清楚,希望深入了解的读者请学习Web标准,可以参考我的Web标准学习笔记

言归正传,如果需要插入“一段”特定字体的文字,可以用下面的代码:

<div style="font-family:字体名称">待设置字体的文字</div>

<p style="font-family:字体名称">待设置字体的文字</p>

这里强调了“一段”,是因为<div>或<p>标签必须在独立的行,前后文字不得与其在同一行上。这里涉及到在XHTML标准中,<div>和<p>的块级(block)标签特性。如果要在一段文字中对个别字词设置字体,要求这些文字仍然连在一起不断行,就要用以下的代码:

<span style="font-family:字体名称">待设置字体的文字</span>

因为<span>是内联(inline)标签。

对于改变颜色,以上几种情况的相应代码分别为:

<div style="color:颜色代码">待改变颜色的文字</div>
<p style="color:颜色代码">待改变颜色的文字</p>
<span style="color:颜色代码">待改变颜色的文字</span>

颜色代码可以为颜色的名称,例如red、white、black,也可以是十六进制的颜色编码:#rrggbb。其中rr是两位十六进制数,表征红色的含量。gg和bb则分别为绿色和蓝色的含量。

当然,还可以同时改变字体和颜色:

<div style="font-famili:字体名称; color:颜色代码">待改变字体和颜色的文字</div>
<p style="font-famili:字体名称; color:颜色代码">待改变字体和颜色的文字</p>
<span style="font-famili:字体名称; color:颜色代码">待改变字体和颜色的文字</span>

若想对文字加粗,可以用以下代码:

<strong>待加粗的文字</strong>

需要斜体文字,则代码如下:

<em>斜体文字</em>
加入图片

要在文字间插入图片,只需要插入以下代码:

<img src="图片文件的地址" alt="替换文本" />

替换文本为当图片无法显示时显示的文本。一般作为幻灯片制作,可以把图片文件放在跟幻灯片文件同一个文件夹里,那么图片文件地址只需要输入文件名,而替换文本则可以留空。

若要图片悬浮在窗口右端,则需要在幻灯片标题之后加入如下代码:

<div style="float:right"><img src="图片文件的地址" alt="替换文本" /></div>

这里要注意加入的位置,加入后该张幻灯片的结构应该如下:

<div class="slide">
    <h1>该张幻灯片标题</h1>
    <div style="float:right"><img src="图片文件的地址" alt="替换文本" /></div>
    <ul>
        <li>要点一</li>
        <li>要点二</li>
    </ul>
</div>

若要图片悬浮在窗口特定位置,则用如下代码(加入位置与上面的右悬浮情况相同):

<div style="position:relative"><img style="position:absolute; top:与幻灯片顶部距离; left:与幻灯片左端距离;" src="图片地址" alt="替换文本" /></div>

其中与幻灯片顶部距离、左端距离是需要加上长度单位的量,通常以像素(px)为单位,例如可以用50px、100px等。例如:

<div style="position:relative"><img style="position:absolute; top:50px; left:100px;" src="图片地址" alt="替换文本" /></div>

此外,可以使用bottom替换top以控制图片到底端的距离,用right替换left控制图片到右端的距离。

加入flash动画

由于XHTML可以嵌入flash动画,遂使S5幻灯片的功能得到极大扩展。各种动态内容都可以通过flash的形式加入幻灯片中。在XHTML中嵌入幻灯片需要遵循一定的规范,传统的<embed>标签方法已经不再适用,而应该以<object>标签的方法代替。具体的方法请参见《符合Web标准的flash嵌入代码》,这里就不重复罗嗦了。

加入数学公式

方法一:把数学公式做成图片,然后用上述加入图片的方法即可。优点:兼容性强,只要不用古怪的图片格式,浏览器们都能识别和显示。缺点:公式不可重用(除非保留生成图片的原始数据),机器无法处理公式(XHTML标准提出的目的之一即为方便机器读取,对于做成图片的公式,阅读机就无法读出,于是视障人士就无法理解它)。

方法二:使用标准数学公式语言MathML。缺点:虽然是标准化的语言,但目前支持的浏览器还不多,真正支持得好的就Firefox一家。优点:可重用,标准化,可被阅读机读出。

要将此方法用好,需要学习MathML,可以参考我的MathML学习笔记。当然也可使用MathCast等所见即所得编辑软件生成MathML代码。这里不详细讨论MathML语言,只讨论一下其在嵌入S5幻灯片的过程中需要注意的问题。

使用MathML时,文档的头部<!DOCTYPE>声明需要修改为XHTML 1.1 + MathML 2.0的组合式文档,具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
    "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"
    [<!ENTITY mathml "http://www.w3.org/1998/Math/MathML">]>

无论IE还是Firefox都不能处理扩展名为htm或html的文件中的MathML。IE只能处理扩展名为xml的文件中的MathML,而Firefox除xml外还能处理xhtml扩展名的文件。如果把扩展名改成xhtml,在Firefox下会报告“&laquo;”这个东西不存在。此时只需要打开slides.js文件,把其中的“&laquo;”替换成“&#171;”,稳妥起见,把“&raquo;”也替换成“&#187;”,问题解决。不过IE目前版本还不能处理xhtml扩展名的文件。如果把扩展名改为xml,则在Firefox中字体自动缩放的功能会失效。而在IE中则总是报告实体未定义错误(这好像跟W3C的xhtml-math11-f.dtd的定义缺陷有关)。

综上,由于目前浏览器的缺陷,暂时还没有很好的办法使用MathML。从长远的角度考虑,现在推荐采取的办法是使用xhtml扩展名和Firefox浏览器(Firefox安装文件也不过5M)。

层进模式

有时候希望一张幻灯片上的要点不是一次全部列出,而是每点击一次鼠标列出一条,这时候就要使用层进模式。方法是在需要层进(即点击鼠标才显示)的要点标签上加入class="incremental"属性,例如:

<li class="incremental">该要点将点击鼠标后才显示</li>

我看到把该属性加在<ul>标签上实现所有要点的层进效果,即:

<ul class="incremental">
    <li>要点一</li>
    <li>要点二</li>
</ul>

但是我发现有时候此种方法会失效,具体原因还不清楚。所以保险起见是在所有条目上都加上class="incremental"属性。

此外,该效果还可以应用在图片上,例如:

<img class="incremental" src="图片地址" alt="替换文本" />

这样就可以实现动画演示了。

幻灯片的内部链接

S5幻灯片可以制作内部超链接,以允许在幻灯片间自由跳转。内部超链接的代码为:

<a href="#slide编号">链接说明</a>

其中的“编号”填上目标幻灯片的编号。幻灯片的编号是从0开始的,一般封面的编号是0,其后第一张幻灯片的编号就是1,类推。例如跳到编号为5的幻灯片,代码就是:

<a href="#slide5">第5张幻灯片</a>

使用中发现在Firefox里,如果文件扩展名为xhtml,这种内部链接会失效,原因还不清楚。所以对于Firefox,MathML与内部链接只能使用其一。

这次对S5幻灯片制作的高级技巧就介绍到这里,有了这些特效,相信可以制作出绝不逊于PowerPoint的幻灯片。而且随着Web标准的推广,浏览器的进化(例如微软宣称IE 7正式版将会兼容Web标准),S5幻灯片将会有更广泛的用武之地。

其实懂得Web标准的读者应该已经发现,上文介绍的都只是XHTML的一些小技巧而已。只要懂得XHTML和CSS,还可以在S5幻灯片上创造出更多的效果。文字的对齐方式、数据表格这些本文没有提及的内容,其实都可以用XHTML轻松制作。总之,由于S5幻灯片是基于XHTML的,所以一切能用于XHTML创作的技巧都可以用于S5幻灯片的制作。

Share/Save/Bookmark
最后修改:Wen 于 2005-12-27 15:18:16

发表于 2005-12-27 14:22:22

评论:Re: [S5] S5幻灯片制作 进阶篇

好(0) 差(0) #1
bigclean (过客)

还是蛮实用的技巧,thanks!


发表于 2009-10-17 08:10:44
奇技淫巧 - 阅读主题
<<  <  1  >  >>

Valid XHTML 1.0 | Valid CSS2 | WAI-A WCAG 1.0

Copyright 2005-2018 WEN'S Horizon [33/0.108]