FOTORAMA使用範例：2014淡水．夏
在數位文本構思、設計、組構時，創作者要思考著讀者會如何與我對話，亦即讀者會如何來探測文本，換言之，讀者是形塑數位文本樣貌的一個必要元素，讀者影響了創作者對文本組織的考量，「讀者的存在與綜合才能成就作品（kolko, 2011: 14）」（李明哲，2013：97）。
──李明哲，2013，《多媒體互動新聞寫作》。台北：五南。
──李明哲，2013，《多媒體互動新聞寫作》。台北：五南。
一、請複製下列 jQuery
程式並置入於<head>xxx</head>之間（建議）或<body>之後：
<script
src="http://code.jquery.com/jquery-1.12.4.js"></script>
<link href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fotorama-4.6.4/fotorama.css" rel="stylesheet">
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fotorama-4.6.4/fotorama.js"></script>
※※※【click here】※※※
這次互 動模組的呈現樣 態，除了（一）真的使用上很簡單，（二）再來是圖像下面有小圖導覽。因之，在使用時機上，如果是很多圖要呈現的狀況下，就非常的適用。可以讓者在往下看圖 之前，大致知道可以看到什麼。
<link href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fotorama-4.6.4/fotorama.css" rel="stylesheet">
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fotorama-4.6.4/fotorama.js"></script>
※※※【click here】※※※
這次互 動模組的呈現樣 態，除了（一）真的使用上很簡單，（二）再來是圖像下面有小圖導覽。因之，在使用時機上，如果是很多圖要呈現的狀況下，就非常的適用。可以讓者在往下看圖 之前，大致知道可以看到什麼。
二、請複製下列 HTML
語法並置入於所欲之編輯區：
<div
class="fotorama" data-width="560"
data-height="374"
data-nav="thumbs">
<img data-caption="這是圖說" src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
</div>
※※※【click here】※※※
1. 請設定圖像要呈現的長、寬，即紅色字體處。請注意圖像的長寬比例。請看教學影 音。
2. 如果想要圖說，語法如下：<img src="圖片網址" data -caption="這是圖說">。請在欲加入圖說的照片增加綠色字體語 法，即會出現圖說。
<img data-caption="這是圖說" src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
</div>
※※※【click here】※※※
1. 請設定圖像要呈現的長、寬，即紅色字體處。請注意圖像的長寬比例。請看教學影 音。
2. 如果想要圖說，語法如下：<img src="圖片網址" data -caption="這是圖說">。請在欲加入圖說的照片增加綠色字體語 法，即會出現圖說。
⊵ 更快速控制圖像呈現的大小以及居中 ⊴
HTML & CSS 語法：
<div class="fotorama" style="width: 400px; margin: auto;" data-nav="thumbs">
<img data-caption="這是圖說" src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
<img src="圖片網址">
</div>
效果：
說明：
在DIV內加入 style="widht: 560px; margin: auto;" ，就可以控制DIV的大小以及位置。照片會依DIV所設定的大小，而自動調整配合。
三、影音
教學：