快速入手Web幻灯片制作
在线幻灯片
使用markdown可以快速的写出优美的文档，接下来我介绍一些简单的语法，快速的用浏览器制作幻灯片。
最基本使用格式
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
<body>
<textarea id="source">
class: center, middle
# Title
---
# Agenda
1. Introduction
2. Deep-dive
3. ...
---
# Introduction
</textarea>
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>
播放
用浏览器打开幻灯片，按键盘h参考提示。
格式
分页
例子：
# Slide 1
This is slide 1
---
# Slide 2
This is slide 2
页面对齐控制
| 类名 | 属性 |
|---|---|
| center | 文字左右居中 |
| middle | 文字上下居中 |
| right | 内容靠右 |
| left | 内容靠左 |
| top | 内容靠上 |
| bottom | 内容靠下 |
例子：
class: center, middle
#### 页面正中央
---
class: left, top
#### 左上角(默认也是左上角)
---
class: center, top
#### 页面上方正中央
---
class: right, top
#### 页面右上角
---
class: left, middle
#### 页面左边，纵向中间
---
class: right, middle
#### 页面右边，纵向中间
---
class: left, bottom
#### 页面左下角
---
class: center, bottom
#### 页面中间底部
---
class: right, bottom
#### 页面右下角
---
文字对齐和颜色
只能控制一段文字的对齐方式，对齐方式右三种，左对齐，居中，右对齐
# 文字对齐
.left[左对齐]
.center[居中]
.right[右对齐]
.red.right[右对齐]
图片
一般图片使用
# Images
.right[]
背景图片是幻灯片页面的属性，放在标题上方
background-image: url(image.jpg)
# Slide with background image
页面间跳转（超链接）
首先需要为每个页面定义属性name，当需要跳转到某一页时，使用markdown语法的超链接，目标页面为#+name
例子：
name: abc
# Slide
- bullet 1
- bullet 2
---
# Slide
Some content.
[the abc](#abc)
注释
一行三个问号，如下
# 注释
Some content.
???
下面是一些注释
继承某一页的内容
使用templace属性，属性值为要衔接的页面的name，如果同时衔接某一个页面，则会出现一次替换的效果。
name: 第一张
###Some content.
---
先插一句话
---
name: 第二张
template: 第一张
第二张幻灯片的内容
---
template: 第二张
Content appended to other-slide's content1.
---
template: 第二张
Content appended to other-slide's content2.
---
在一页上依次显示内容
鼠标点击后接着上一页的内容继续显示，用两个横线表示。
例子：
# 在一页上依次显示内容
--
1. 第一条记录
--
2. 第二条记录
--
3. 第三点内容
控制是否显示页面数量角标
页面属性count，ture or false
count: false
* This slide will not be counted.
一般设置
var slideshow = remark.create({
// Default: '4:3'
ratio: '4:3',
// ratio: '4:3'，'16:9',控制幻灯片比例
// 导航选项
navigation: {
// 是否允许滚动
// Default: true
// Alternatives: false
scroll: true,
// 是否允许触控
// Default: true
// Alternatives: false
touch: true,
// 是否允许点击
// Default: false
// Alternatives: true
click: false
},
// 定制页面角标
slideNumberFormat: 'Slide %current% of %total%',
// .. or by using a format function
slideNumberFormat: function (current, total) {
return 'Slide ' + current + ' of ' + total;
},
// Enable or disable counting of incremental slides in the slide counting
countIncrementalSlides: true
});
代码高亮显示
需要配置这些属性
highlightLanguage
Set default language for syntax highlighting
Default: - (no highlighting)
Alternatives: javascript, ruby, python, ... (see available language definitions for Highlight.js)
To disable automatic highlighting, use no-highlight
highlightStyle
Set highlight style for syntax highlighting
Default: default
Alternatives: arta, ascetic, dark, default, far, github, googlecode, idea, ir_black, magula, monokai, rainbow, solarized-dark, solarized-light, sunburst, tomorrow, tomorrow-night-blue, tomorrow-night-bright, tomorrow-night, tomorrow-night-eighties, vs, zenburn.
highlightLines
Highlight background of code lines prefixed with *
Default: false
Alternatives: true, false
highlightSpans
Highlight background of code spans defined by the content between backticks
Default: false
Alternatives: true, false
例子：
var slideshow = remark.create({
highlightLanguage: 'javascript',
highlightStyle: 'monokai',
...
});
导航配置
可能会用到的一些导航配置
// Navigate to the beginning and end of the slideshow
slideshow.gotoFirstSlide();
slideshow.gotoLastSlide();
// Navigate a single slide forward and backward
slideshow.gotoNextSlide();
slideshow.gotoPreviousSlide();
// Navigate to a specific slide, either by slide number or name
slideshow.gotoSlide(5);
slideshow.gotoSlide('agenda');
// Suspend/resume remarks process of keyboard and touch events for custom builds, etc...
slideshow.pause();
slideshow.resume();
幻灯片自动播放
var slideshow = remark.create();
// every 8 seconds (change to your desired interval), fire the helper function
setInterval(function () {carousel(slideshow)}, 8000);
function carousel(varObject) {
var slideCount = varObject.getSlideCount()-1;
var currentSlide = varObject.getCurrentSlideIndex();
// if the slideshow is on the last slide, go back to the first slide; if not, call gotoNextSlide();
if (currentSlide == slideCount) {
varObject.gotoFirstSlide();
}
else { varObject.gotoNextSlide(); }
}
快速入手Web幻灯片制作的更多相关文章
- Web app制作细节:web app互动制作技巧
Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的制作, ...
- Android 工程师如何快速学会web前段
Android 工程师如何快速学会web前段 今天主要聊一下本人最近在学习web前段的感受,最近html5是越来越火了,前段时间公司做了一个项目然后让我们“android”的程序猿过去帮忙把客户 端框 ...
- 力软信息化系统快速开发框架 web端+winform端
力软信息化系统快速开发框架是一套集权限管理+快速开发+动态接口+通用组件+动态UI于一体的全新.net信息化快速开发框架.力软信息化系统快速开发框架的使用,大大地缩短了开发周期,提高了软件质量,同时也 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- 快速搭建Web环境 Angularjs + Express3 + Bootstrap3
快速搭建Web环境 Angularjs + Express3 + Bootstrap3 AngularJS体验式编程系列文章, 将介绍如何用angularjs构建一个强大的web前端系统.angula ...
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 ...
- windows下如何快速搭建web.py开发框架
在windows下如何快速搭建web.py开发框架 用Python进行web开发的话有很多框架供选择,比如最出名的Django,tornado等,除了这些框架之外,有一个轻量级的框架使用起来也是非常方 ...
- Spring Boot入门-快速搭建web项目
Spring Boot 概述: Spring Boot makes it easy to create stand-alone, production-grade Spring based Appli ...
- 在windows下如何快速搭建web.py开发框架
在windows下如何快速搭建web.py开发框架 用Python进行web开发的话有很多框架供选择,比如最出名的Django,tornado等,除了这些框架之外,有一个轻量级的框架使用起来也是非常方 ...
随机推荐
- spring mvc集成velocity使用
目前流行的三大页面视图神器是:老牌大哥jsp.后起之秀freemarker和velocity.这里不详细比较这三者的优劣,总体来说,jsp是标配,但后面两个更严格的执行了视图与业务的分离,页面里是不允 ...
- Java 数组的定义和遍历
1.一维数组 数组是用来存储一组相同数据类型数据的数据结构 数组的元素可以是简单数据类型的数据,也可以是引用数据类型的数据 无论数组内容是简单类型还是引用类型,数组自己本身都是一种引用类型 每个数组元 ...
- 关于android方向传感器的使用
Android2.2以后 orientation sensors 就被deprecated了 官方建议用acceleration and magnetic sensor 来算 关于这个问题,CSDN上 ...
- Google Cloud VM上在线扩硬盘
Google Cloud VM是可以在线扩展Disk的大小的. 一.创建VM和磁盘 比如我有一台VM,附加了一块Disk,大小是120GB.如下图: 在VM中进行格式化: mkfs.ext4 -F / ...
- AngularJS：template
ylbtech-AngularJS: 1.返回顶部 1. 2. 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 7.返回顶部 8.返回顶部 9 ...
- ARM-Linux内核移植之（一）——内核启动流程分析
内核版本:2.6.22 为什么要采用这样一个较低的版本进行移植了,因为韦东山大牛说了,低版本的才能学到东西,越是高版本需要移植时做的工作量越少,学的东西越少. 内核启动分为三个阶段,第一是运行hea ...
- php命令执行
php命令执行通过函来执行外部应用程序,函数有shell_exec(),exec(),system(),passthru() <?php $i = $_GET['cmd']; echo exec ...
- ansibel---tag模块
如果你有一个大的剧本,你可以在不运行整个剧本的情况下运行一个特定的部分. 由于这个原因,两个游戏和任务都支持一个“标记:”属性.您只能根据命令行中的标记(标记或- skip- tags)对任务进行筛 ...
- 通过DG_BROKE搭建Oracle11g_adg
1.环境 db_primary db_stanby db版本 11.2.0.4.0 11.2.0.4.0 os版本 centos 6.4 centos 6.4 db_unique_name newte ...
- 一只小蜜蜂(斐波那契dp)
有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房,不能反向爬行.请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数. 其中,蜂房的结构如下所示. Input输入数据的第一行是一个整数N,表示测试实例的个数,然后是 ...