用記事本硬寫投影片

HTML 形式的 PPT

egg

2018.11.30

前言

about slides

HTML
CSS
JavaScript
Reveal.js

初次體驗
HTML
- HTML 架構
- 標式
- 標題
- 段落
- 照列
- 超連結
- 圖片
- 絕、相對網址
- 顏色 & 註釋
- 字
- 列式
- 表格
- 保留字元
Reveal.js
CSS
JavaScript
Section
- 背景
- 過場效果
- 停頓、順序
- 自動撥放
- 其他：連結、振動
Font Awesome
Plugin
- Note: 講者模式註解
- Math: 數學式排版
- Markdown: 新的寫作模式
- Menu: 製作目錄
- Zoom: 放大

初次體驗

此投影片好處

html 檔
容易發表、檔案小、手機相容
簡單、時尚、科技感、炫
看心情換母片、隨場地選過場模式
修身養性、虛榮、冥想、勉強接受、 ...

播放主軸

主幹道為橫軸，往右 →
支幹道為縱軸，往下 ↓
主幹道往右為主要敘事流程，遇到分支可往下，不論分支下的哪張投影片，皆可往右(→)繼續主幹道通行。
投影片為 2D，按 "Esc" 可看到整張地圖。

快捷鍵

為了演示 slides 方便，有以下快捷鍵供使用：

全螢幕 "F"，退出全螢幕 "Esc"
全視野縮圖 "Esc" or "O"，回復正常 "Esc" or "O"
演講者模式 "S"
上一頁 "P"，下一頁 "N" or "空白鍵"
首頁 "Home"，末頁 "End"
目錄按 or "M"
自動播放下按 "A" 停止播放

試試看請先按 "F"，再按 "S"

母片更換

看心情換母片，點擊直接轉換：

- 懶得換 -
- 就擺爛 - 充滿希望 - 一片清明 - 不太爽 -
- 簡簡單單 - 又是我報 - 黑到底 - 該睡了 -
- 藍藍的 - 死定了 -

轉場模式

隨場地選轉場模式，點擊直接轉換：

- 平淡無奇 - 漸漸淡出 - 整頁滑出 -
- 曲外轉出 - 曲內轉出 - 放大轉出 -

HTML

HTML 架構


		<html>
		<head>
			<title>egg's page</title>
		</head>
		<body>
			<h1>標題 1</h1>
				<p>段落 1</p>
			<h2>標題 2</h2>
		</body>
		</html>

html, head, body

標示


		<p>, </p>

標題


		<h1>大標題</h1>
		<h2>標題</h2>
		<h3>中標題</h3>
		<h4>小標題</h4>
		<h5>更小標題</h5>
		<h6>最小標題</h6>

大標題

中標題

最小標題

段落


		<p>這是一段</p>
		<p>這是另一段</p>
		<hr />
		<p>一段的前一行<br />
			同一段的下一行</p>

這是一段

這是另一段

一段的前一行
同一段的下一行

照列


		<pre>
		照列第一行

			照原 code 空一行且縮排一個 Tab 鍵空白後列在第三行
		</pre>

	照列第一行

		照原 code 空一行且縮排一個 Tab 鍵空白後列在第三行

超連結


		<a href="https://www.cathayholdings.com/holdings/">國泰金控</a>
		<a target="_blank" href="https://www.cathayholdings.com/holdings/">國泰金控</a>

<a href="">

加入 target="_blank" 來另開新視窗來載入

圖片


		<img src="demonstration/logo.png">
		<img src="demonstration/logo.png" width="300" alt="國泰金控 logo">

<img src="">

寬、高：width="", height=""

說明(圖片失效時顯示)：alt=""

*.jpeg, *.jpg, *.png, *.gif

絕、相對網址


		<img src="https://www.cathayholdings.com/holdings/-/media/6f7bea8423d24d62818eaed8cfa62bf4.png?h=38&la=zh-TW&w=187&hash=29C8E88C09C58DB3CA1423BCAA350483301D9EC9">
		<img src="demonstration/logo.png">
		<img src="../logo.png">
		<img src="../../some/logo.png">

絕對網址：如 "https://www.cathay..." 之類。
相對網址：以本檔案為原點，往外一個資料夾則用一個 "../"。

顏色 & 註釋


		<body style="background-color:rgb(255, 99, 71);"><!-- bgcolor 已不支援 -->
			<h1 style="color:Tomato;">Tomato</h1>
			<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
			<h1 style="background-color:#ff6347;">#ff6347</h1>
			<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

			<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
		</body>

style="color:Tomato;"
style="background-color:Tomato;"

RGB, HEX, 色名

Styles


		<h1 style="color:blue;">藍色標題字體</h1>
		<p style="font-family:細明體;">細明體字體</p>
		<p style="font-size:300%;">大 3 倍字體</p>
		<p style="text-align:right;">字體靠右</p>

背景顏色
字體：顏色、型式、大小、靠邊(中)

字設定


		<b>粗體</b>
		<strong>還是加粗</strong>
		<i>義大利斜體</i>
		<em>斜體</em>
		<mark>有背景色字</mark>
		<small>較小字</small>
		<del>中間刪除線</del>
		<ins>底線</ins>
		<sub>下標</sub>
		<sup>上標</sup>

粗體, 還是加粗, 義大利斜體, 斜體, 有背景色字, 較小字, ~~中間刪除線~~, 底線, _下標, ^上標

列式


		<ol type="A"> <!-- start="5", type="1", "A", "a", "I", "i" -->
			<li>第 1 項</li>
			<li>第 2 項</li>
		</ol>
		<ul>
			<li>Coffee</li>
			<li>Tea</li>
		</ul>

條列：條列<ol>，另要跟著<li>

另可加 start 參數選用起始點
可加 type 參數選用數字、英文字母、羅馬數字

列式：項列 <ul>，也要跟著<li>

表格


		<table> <!-- border="1" -->
			<tr>
				<td>項目</td>
				<td>單價</td>
				<td>數量</td>
			</tr>
			<tr>
				<td>蘋果</td>
				<td>$1</td>
				<td>7</td>
			</tr>
			<tr>
				<td>柳丁</td>
				<td>$2</td>
				<td>18</td>
			</tr>
			<tr>
				<td>木瓜</td>
				<td>$2</td>
				<td>2</td>
			</tr>
		</table>

項目	單價	數量
蘋果	$1	7
柳丁	$2	18
木瓜	$3	2

保留字元

<: <
>: >
&: &
": "
空白鍵:

剩下的找 google

reveal.js

開始使用 reveal.js

下載 zip
unzip

css, js, lib, plugin,
index.html

檔案

css
js
lib
plugin
index.html

index.html─3大部分


	<html>
	<head>
		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/black.css">
	</head>
	<body>
		<div class="reveal">
		<div class="slides">
			<section>投影片內文</section>
		</div>
		</div>
	<script src="js/reveal.js"></script>
	<script>Reveal.initialize();</script>
	</body>
	</html>

html, head, body

index.html 全文


		<!doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

				<title>reveal.js</title>

				<link rel="stylesheet" href="css/reveal.css">
				<link rel="stylesheet" href="css/theme/black.css">

				<!-- Theme used for syntax highlighting of code -->
				<link rel="stylesheet" href="lib/css/zenburn.css">

				<!-- Printing and PDF exports -->
				<script>
					var link = document.createElement( 'link' );
					link.rel = 'stylesheet';
					link.type = 'text/css';
					link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
					document.getElementsByTagName( 'head' )[0].appendChild( link );
				</script>
			</head>
			<body>
				<div class="reveal">
					<div class="slides">
						<section>Slide 1</section>
						<section>Slide 2</section>
					</div>
				</div>

				<script src="lib/js/head.min.js"></script>
				<script src="js/reveal.js"></script>

				<script>
					// More info about config & dependencies:
					// - https://github.com/hakimel/reveal.js#configuration
					// - https://github.com/hakimel/reveal.js#dependencies
					Reveal.initialize({
						dependencies: [
							{ src: 'plugin/markdown/marked.js' },
							{ src: 'plugin/markdown/markdown.js' },
							{ src: 'plugin/notes/notes.js', async: true },
							{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
						]
					});
				</script>
			</body>
		</html>

CSS

Cascading Style Sheets 層疊樣式表

<style>, </style>

*.css

本例 CSS


	<head>
	   <style>
		/* h2 標題改為綠色 */
		.reveal section h2 { 
			color:#4CAF50; 
		}

		/* 去圖片框 */
		.reveal section img { 
			background:none; 
			border:none; 
			box-shadow:none; 
		}
	   </style>
	</head>

css/reveal.css

看全文

css/theme/black.css

beige	blood	league	moon	night
serif	simple	sky	solarized	white

看心情

JavaScript

改變 html 及 CSS 所外顯之方式

<script>, </script>

*.js

reveal.js 參數


	<script src="lib/js/head.min.js"></script>
	<script src="js/reveal.js"></script>

	<script>
		Reveal.initialize({
			controls: true,
			progress: true,
			defaultTiming: 120,
			history: true,
			center: true,
			slideNumber: true,
			transition: 'concave', // none/fade/slide/convex/concave/zoom
			transitionSpeed: 'slow',
			autoSlide: 0, // 自動播放: 1000為1秒
		});	
	</script>

轉存 PDF


	<script>
		var link = document.createElement( 'link' );
		link.rel = 'stylesheet';
		link.type = 'text/css';
		link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
	</script>

Ctrl + P

SECTION

section


	<body>
	<div class="reveal">
	   <div class="slides">
		<section>第 1 頁投影片內文</section>

		<section>
			<section>第 2.1 頁投影片內文</section>
			<section>第 2.2 頁投影片內文</section>
		</section>

		<section>第 3 頁投影片內文</section>

		<section>
			<section>第 4.1 頁投影片內文</section>
			<section>第 4.2 頁投影片內文</section>
		</section>
	   </div>
	</div>

	<script src="js/reveal.js"></script>
	<script>Reveal.initialize();</script>
	</body>

背景

換背景顏色


	<section data-background="#Tan">

背景換成圖


	<section data-background="demonstration/x5.gif">

背景圖重複


	<section data-background="demonstration/takeoff.gif" data-background-repeat="repeat" data-background-size="300px">


	<section data-background-iframe="demonstration/ifr.html">

背景影片

		
		<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">

過場效果

背景換色、換過場效果


	<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">

none, fade, slide, convex, concave and zoom

過場參數

data-transition="something"
data-transition-speed="something"

停頓、順序

Fragment

停頓、順序


	<p>按往下...</p>
	<p class="fragment">... 停頓 ... 再往下</p>
	<p><span class="fragment">... 下 ...</span> 
	   <span class="fragment">一</span> 
	   <span class="fragment">步</span></p>

按往下...

... 停頓 ... 再往下

... 下 ... 一步

字體變化


	<p>
	   <span style="display: inline-block;" class="fragment fade-in-then-out">熊熊出現又消失、 </span>
	   <span style="display: inline-block;" class="fragment fade-in-then-semi-out"> 出現後灰暗、 </span>
	<p>
	   <span style="display: inline-block;" class="fragment grow">增大、 </span>
	   <span style="display: inline-block;" class="fragment shrink"> 縮小、 </span>
	   <span style="display: inline-block;" class="fragment fade-out"> 淡出、 </span>
	   <span style="display: inline-block;" class="fragment fade-right">左進、 </span>
	   <span style="display: inline-block;" class="fragment fade-up">上進、 </span>
	   <span style="display: inline-block;" class="fragment fade-down">退下、 </span>
	   <span style="display: inline-block;" class="fragment fade-left">右進、 </span>
	</p>

熊熊出現又消失、出現後灰暗、

增大、縮小、淡出、左進、上進、退下、右進、

字體顏色變化


	<p>
	   <span class="fragment highlight-red">紅、 </span> 
	   <span class="fragment highlight-blue">藍、 </span> 
	   <span class="fragment highlight-green">綠、 </span>
	</p>

紅、藍、綠、

fragment 參數

class="fragment something"
class="fragment fade-something"
class="fragment fade-in-then-something"
class="fragment highlight-color"
data-fragment-index="number"

自動撥放

本頁自動撥放


	<section data-autoslide="8000">
	   <p>8 秒鐘後會出現下一行；</p>
	   <p class="fragment" data-autoslide="5000">5 秒鐘後出現下一行；</p>
	   <p class="fragment">在顯示下一張幻燈片前，本段文字會顯示 8 秒鐘。</p>
	</section>

8 秒鐘後會出現下一行；

5 秒鐘後出現下一行；

在顯示下一張幻燈片前，本段文字會顯示 8 秒鐘。

檔案自動撥放


	<script>
	   Reveal.initialize({
		   autoSlide: 5000,   // 每 5 秒自動撥放
	   });
	</script>

其他

連結、振動、

連結


	<p>
	   <a href="#/7">跳到第 8 頁</a><br />
	   <a href="#/4/2">跳到第 5.3 頁</a><br />
	   <a href="#/themes">跳到母片更換</a>
	</p>

跳到第 8 頁
 跳到第 5.3 頁
 跳到「母片更換」

<section id="themes">

振動


	<head>
		<link rel="stylesheet" type="text/css" href="css/csshake.min.css" />
	</head>

	<body>
		<span class="preview-item small shake-little shake-constant shake-constant--hover">小抖、</span>
		<span class="shake shake-constant shake-constant-hover">大顫、</span><br />
		<span class="badge shake-constant shake-chunk"><img width="80px" src="demonstration/notepad.png"></span>
		<span class="shake-crazy"><img width="80px" src="demonstration/textedit.png"></span>
	</body>

小抖、大顫、

Font Awesome

How to Use Font Awesome


	<!DOCTYPE html>
	<html>
	<head>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
	</head>
	<body>
		<p>
			<i class="fa fa-cloud"></i>
			<i class="fa fa-heart"></i>
			<i class="fa fa-car"></i>
			<i class="fa fa-file"></i>
			<i class="fa fa-bars"></i>
		</p>
		<p>
			<i class="fa fa-cloud" style="font-size:24px;"></i>
			<i class="fa fa-cloud" style="font-size:36px;"></i>
			<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
			<i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>
		</p>
	</body>
	</html>

Font Awesome 動態


	<i class="fas fa-spinner fa-spin"></i>
	<i class="fas fa-circle-notch fa-spin"></i>
	<i class="fas fa-sync-alt fa-spin"></i>
	<i class="fas fa-cog fa-spin"></i>
	<i class="fas fa-cog fa-pulse"></i>
	<i class="fas fa-spinner fa-pulse"></i>

Font Awesome 旋轉


	<i class="fas fa-car"></i>
	<i class="fas fa-car fa-rotate-90"></i>
	<i class="fas fa-car fa-rotate-180"></i>
	<i class="fas fa-car fa-rotate-270"></i>
	<i class="fas fa-car fa-flip-horizontal"></i>
	<i class="fas fa-car fa-flip-vertical"></i>

Font Awesome 列示項


	<style>
	.reveal ul.fa-ul { 
		list-style-type: none;  
	}
	.reveal li.fa-li { 
		list-style-type: none; 
	}
	</style>
	
		<ul class="fa-ul">
  		  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>今日來選舉，為解眾生迷，慈悲與智慧，檸檬與蜂蜜。</li>
  		  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>愛江山更愛美人：人生只有短短幾個秋...</li>
		</ul>

今日來選舉，為解眾生迷，慈悲與智慧，檸檬與蜂蜜。
愛江山更愛美人：人生只有短短幾個秋...

Font Awesome 文繞圖


	<i class="fas fa-quote-left fa-3x fa-pull-left"></i>
	我受彌勒佛之託，投入此次台北市市長選舉，不為何因，只為救世。首要任務，推廣「蜂蜜檸檬」養生之法，以讓眾生遠離病苦。謝謝，謝謝天、謝謝地、謝謝所有的人、謝謝所有的台北市民、也謝謝公視，沒有公視，這場辯論我無法在這裡。謝謝大家，謝謝。

我受彌勒佛之託，投入此次台北市市長選舉，不為何因，只為救世。首要任務，推廣「蜂蜜檸檬」養生之法，以讓眾生遠離病苦。謝謝，謝謝天、謝謝地、謝謝所有的人、謝謝所有的台北市民、也謝謝公視，沒有公視，這場辯論我無法在這裡。謝謝大家，謝謝。

Icon 重製、圖片去背

加 powerpoint 工具

檔案選項自訂功能區不在功能區的命令：
加入合併、交集、減去、聯集、螢幕擷取畫面

重製

插入圖案合、交、減、聯
圖案填滿

去背

插入圖片或螢幕擷取畫面
格式移除背景、色彩

Plugin

講者模式


	<aside class="notes">
		1.此地為註釋說明，給失智講者題詞。<br>2.看得到的就是失智者。<br>3.哈哈！
	</aside>

	dependencies: [
		{ src: 'plugin/notes/notes.js', async: true },
	]

備註、計時器

"S"

支援 $\LaTeX{}$ 數式


	\[
		\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
	\]

	dependencies: [
		{ src: 'plugin/math/math.js', async: true },
	]

\[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]

支援 $\LaTeX{}$ 數式 (續)


	<p style="text-align:left;text-decoration:underline;">Fermat's Last Theorem:</p>
	<p style="text-align:left;">當整數 $n>2$ 時，關於 $x, y, z$ 的不定方程式</p>
	\[
		x^n+y^n=z^n.
	\]
	<p style="text-align:left;">沒有正整數解。</p>

	dependencies: [ { src: 'plugin/math/math.js', async: true }, ]

Fermat's Last Theorem:

當整數 $n>2$ 時，關於 $x, y, z$ 的不定方程式

\[ x^n+y^n=z^n. \]

沒有正整數解。

支援 MarkDown

Python 第四課
 Python 第六課


	Reveal.initialize({
		menu: {
			numbers: true,
			useTextContentForMissingTitles: false,
			hideMissingTitles: true,
			themes: true,
			themesPath: 'css/theme/',
			transitions: true,
			titleSelector: 'h1',
			custom: [
			         { title: '案例', icon: '<i class="fa fa-bookmark"<', src: 'demonstration/links.html' },
			        ]
			},
	})

	dependencies: [
		{ src: 'plugin/reveal.js-menu/menu.js', async: true },
	]

<section data-menu-title="蜂蜜檸檬">

放大


	dependencies: [
		{ src: 'plugin/zoom-js/zoom.js', async: true },
	]

Alt + Click

THE END

附錄 #1：

#	姓名	政黨	得票	得票率
4	柯文哲	無	580,820	41.05%
2	丁守中	國民黨	577,566	40.82%
3	姚文智	民進黨	244,641	17.29%
5	李錫錕	無	6,172	0.44%
1	吳萼洋	蜂蜜黨	5,617	0.40%
	合計		1,414,816	100%

附錄 #2：

#	名次	姓名	性別	年齡	政黨	得票	得票率	凍蒜
#	名次	姓名	個人資料			得票		凍蒜
1	5	吳萼洋	男	58	蜂蜜黨	5,617	0.40%
2	2	丁守中	男	62	國民黨	577,566	40.82%
3	3	姚文智	男	50	民進黨	244,641	17.29%
4	1	柯文哲	男	55	無	580,820	41.05%
5	4	李錫錕	男	60	無	6,172	0.44%

用記事本硬寫投影片

HTML 形式的 PPT

egg

前言

目錄

初次體驗

此投影片好處

播放主軸

快捷鍵

母片更換

轉場模式

HTML

HTML 架構

標示

標題

大標題

中標題

最小標題

段落

照列

超連結

圖片

絕、相對網址

顏色 & 註釋

Styles

字設定

列式

表格 more

保留字元

reveal.js

開始使用 reveal.js

檔案

index.html─3大部分

index.html 全文

CSS

CSS

本例 CSS

css/reveal.css

css/theme/black.css

JavaScript

JavaScript

reveal.js 參數

轉存 PDF

SECTION

section

背景

換背景顏色

背景換成圖

背景圖重複

背景影片

過場效果

背景換色、換過場效果

過場參數

停頓、順序

Fragment

停頓、順序

字體變化

字體顏色變化

fragment 參數

自動撥放

本頁自動撥放

檔案自動撥放

其他

連結、振動、

連結

振動

Font Awesome

How to Use Font Awesome

Font Awesome 動態

Font Awesome 旋轉

Font Awesome 列示項

Font Awesome 文繞圖

Icon 重製、圖片去背

Plugin

講者模式

支援 $\LaTeX{}$ 數式

支援 $\LaTeX{}$ 數式 (續)

支援 MarkDown

目錄

放大

表格