作者:chszs,转载需注明。
作者博客主页:http://blog.csdn.net/chszsS5是一个幻灯片演示工具,它基于XHTML、CSS和JavaScript,对打印友好。用S5制作的幻灯片可以在主流的浏览器上运行,相当于拥有跨平台特性,即使你使用的是MacOS,也无需操心格式问题。
S5工具默认的主题比较单调,你可以自行制作主题,也可以下载一些现成的主题。
主题下载地址见:
http://meyerweb.com/eric/tools/s5/themes/S5当前的稳定版本为1.1,下载地址见:
http://meyerweb.com/eric/tools/s5/v/1.1/s5-11.zip下载后解压,你可以看到目录下包含s5-blank.zip文件,它只有26KB,用于创建一个新幻灯片。也即,它是一个空白幻灯片的基本骨架文件。
现在我们开始制作幻灯片。
把s5-blank.zip解压到某个目录,可以看到目录下有s5-blank.html文件,双击打开它,如图1所示:
解压的目录下还有一个名为ui的目录,里面放着CSS文件和JavaScript文件,这些是幻灯片正常运行的基础。
作者:chszs,转载需注明。作者博客主页:http://blog.csdn.net/chszs
点击图1的右下角,可以看到,初始的幻灯片骨架文件实际上包含了幻灯片2页。如图2所示:
用编辑器打开s5-blank.html文件,修改幻灯片的内容:
1. 修改幻灯片网页标题
如图3所示,修改<title>标签的内容。
2. S5工具是老外开发的,默认显示英文。直接输入中文内容,显示为乱码。要正常支持中文,需要在s5-blank.html文件中的<head>标签后面,加上一行代码,如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
这样S5就可以完美支持中文了。
注意:s5-blank.html文件的<head>部分是S5本身定义的,除了上面提到的两点,其它的内容你不应修改它。
3. 幻灯片的页眉和页脚
幻灯片的页眉和页脚的定义,在s5-blank.html文件中查找div标签,找到class为layout的div,它里面嵌套了:
<div id="header"></div>
这个div定义了页眉。
还嵌套了:
<div id="footer">
<h1>[location/date of presentation]</h1>
<h2>[slide show title here]</h2>
</div>
这个div定义了页脚。
4. 幻灯片标题
幻灯片标题的定义,在s5-blank.html文件中查找div标签,先找到class为presentation的div标签,再找到它内嵌的class为slide的div,它里面包含了标题的定义。
我修改了一点内容,如下:
<div class="slide" style="text-align:center;">
<h1>××产业集团2013年业务计划</h1>
<h3>作者:chszs</h3>
<h4>2012-10-28日</h4>
</div>
内容保证了居中显示。
5. 目录页及正文页
幻灯片目录的定义,在s5-blank.html文件中查找div标签,先找到class为presentation的div标签,再找到它内嵌的class为slide的div,它里面包含了目录的定义。
要注意,其实目录页、正文页或者标题页在本质上是相同的,都是幻灯片的其中一页。所以每一页幻灯片,就是一个<div class="slide"></div>标签进行定义的。
目录页就紧跟在标题页的后面,下面我们来修改它的内容:
<div class="slide">
<h1>年度计划目录</h1>
<ul>
<li>产业集团2012年营收简述</li>
<li>产业集团2012年业务分析</li>
<li>产业集团2013年业务计划</li>
<li>产业集团2013年战略部署</li>
<li>产业集团2013年执行调整</li>
</ul>
一个简单的PPT就这样炼成了。如图4、图5所示。你可以继续扩展。
使用S5最大的好处有两点:
1. Web开发者可以很好的发挥自己的技能,做出超炫的幻灯片。
2. 用浏览器来显示幻灯片,计算机上再也不用安装Office这样的大型软件了。
分享到:
相关推荐
Amazing Flash Gallery Maker是一款最好的照片和视频的Flash幻灯片制作工具。您的照片和视频记录由摄像机可以讲一个故事,你可以使用这个Flash幻灯片制作你亲自设计和创建共享。该软件专门创建的幻灯片具有不同格式...
Movavi Slideshow Maker 是一款功能强大的幻灯片制作工具,使用能够帮助用户轻松进行Windows的DVD幻灯片制作,完全的傻瓜式操作,几个步骤就可以创建出酷炫有特色的幻灯片 ,你也可以将您的媒体文件导入到应用程序中...
它是一个非常容易使用的电子相册软件,您通过她能够很容易的创建图片幻灯片、3D电子相册、屏幕保护程序等。通过她您可以很容易的共享您的电子相册给您的家人、朋友,而他们的计算机中不用安装任何的附加软件。
现成JS幻灯片制作工具,特别好用~ 想什么样做就能做什么的!
数码相机使得照片创作变成异常容易但照片分享却仍然很麻烦....阿香婆高清幻灯片制作软件 然而,真正革命性的特性是其输出格式:您不仅仅能将幻灯片刻录成可在家用 DVD 播放机可播放的 DVD.您还可以生成
html5幻灯片插件制作图片3D切换幻灯片特效 html5幻灯片插件制作图片3D切换幻灯片特效
如果你想要一个工具,让你的工作像传统的幻灯片制作一样简单,那么Strut是一个不错的选择。Strut是一个基于网络的应用,提供了幻灯片的分类和编辑工具。图形化的界面让你轻轻松松的添加文字、图片、视屏和网页。你也...
3D立体旋转幻灯片3D立体旋转幻灯片3D立体旋转幻灯片3D立体旋转幻灯片3D立体旋转幻灯片3D立体旋转幻灯片3D立体旋转幻灯片3D立体旋转幻灯片3D立体旋转幻灯片3D立体旋转幻灯片3D立体旋转幻灯片3D立体旋转幻灯片3D立体...
幻灯片定时器幻灯片定时器幻灯片定时器幻灯片定时器幻灯片定时器幻灯片定时器
网页幻灯片,最实用的网页幻灯片,常用网页网页幻灯片。
原生js制作鼠标滚动幻灯片图片放大缩小_酷炫的3D幻灯片特效
Java 实现幻灯片效果程序,实现的效果有:手动前进,后退,幻灯片播放,还原等,对于Java编程感兴趣的朋友是很好学习的例子!~
幻灯片合集,包含了多款flash幻灯片样式,并且有swf源文件
js图片幻灯片 jquery幻灯片图片 html幻灯片案例,官方以及本人的案例各有一个
android 幻灯片效果,android 幻灯片效果
Icecream Slideshow Maker是一个免费简单易用的照片幻灯片视频制作软件,可以把你喜爱的照片导入,制作成漂亮的幻灯片视频。将生活的点滴相片放进去,加入花哨的过渡效果和背景音乐。使用Icecream Slideshow Maker,...
jquery图像幻灯片制作大小图片切换滚动展示 jquery图像幻灯片制作大小图片切换滚动展示
jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换 jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换 jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换
[提升说服力:PPT幻灯片设计从入门到精通
JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片JS幻灯片