數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2014年7月21日 星期一

有導覽小圖的image gallery: Fotorama:超簡易使用


FOTORAMA使用範例:2014淡水.夏
Canon 6D + Olympus om 35mm f2 & yashica 50mm f1.4

在數位文本構思、設計、組構時,創作者要思考著讀者會如何與我對話,亦即讀者會如何來探測文本,換言之,讀者是形塑數位文本樣貌的一個必要元素,讀者影響了創作者對文本組織的考量,「讀者的存在與綜合才能成就作品(kolko, 2011: 14)」(李明哲,2013:97)。
──李明哲,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】※※※
這次互 動模組的呈現樣 態,除了(一)真的使用上很簡單,(二)再來是圖像下面有小圖導覽。因之,在使用時機上,如果是很多圖要呈現的狀況下,就非常的適用。可以讓者在往下看圖 之前,大致知道可以看到什麼。

二、請複製下列 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="這是圖說">。請在欲加入圖說的照片增加綠色字體語 法,即會出現圖說。



更快速控制圖像呈現的大小以及居中


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所設定的大小,而自動調整配合。



三、影音 教學:



2014年7月15日 星期二

清單式互動展開內容文本模組:按一下就有


 




本次互動模組的呈現樣 態,就是下面影音教學所使用的互動模式。
對於產品、事件型的報導或敘述,這種清單型列表式互動文本相當好用。
既可以快速讓讀者掌握整體文本概況,又可以依讀者自己的構思來選擇展現內文。




請用 KompoZer 做出表格,並填入文本內容,請看教學影音:

注意事項:
  1. 內容區的文本寫作完成後,請用div包圍起來。如用KompoZer來做,極為簡單。一些小小注意事項,請留意相關影音片段。
  2. 內容區可填入任可html文本,包括互動文本。
  3. 請記得為表格加入 class 標記,此例為 class="tab2014071201"。
  4. 編輯/內文區寬640px且居中的語法 <body style="margin: auto; width: 640px;"> ,就成了。

請複製下列CSS,請置入於<body>之後即可:
<style>
.tab2014071201 {
border-spacing: 2px 10px;
}
.tab2014071201 >tbody >tr:nth-child(odd) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 2em;
text-align: left;
letter-spacing: 0.1em;
border-bottom: solid 2px gray;
-webkit-box-shadow: 1px 1px 1px 2px silver;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-IamizXqjQ0MnnpHlUJ1NGPxUGmDbYzl25E7rIem859eV4GI6CESjlYnbdaUVvlf4s0JicFm-cA2Kr2zOcHX3BzUCm5aYRQ-e-BO1L2Zt-DENidZBQS0xlTYL_lLphpAkn_HTqXxrm4/s28-no/images2014071401.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 2.5em;
}
.tab2014071201 >tbody >tr:nth-child(even) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.1em;
font-weight: normal;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
padding-left: 0.5em;
}
</style>


注意事項:
  1. 這CSS是控制表格的呈現內容,所以步驟一中表格所設定的class代碼,class="tab2014071201",就是紅色字體處的 .tab2014071201 ,共四處。最前面的「.」,請勿忘了。那是class的代碼。
  2. 如果你的表格要用你自己的class代碼,那麼三處的紅色字體處, 就通通要改掉。

請複製下列 jQuery 程式碼,並置入於<body>之後即可:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {

var tab0712$ = $(".tab2014071201");

tab0712$.each(function() {
$(this).find(">tbody >tr >td").filter(":odd").css({display: "none"});
$(this).find(">tbody >tr >td").filter(":odd").eq(0).css({display: "block"});
});

tab0712$.find(">tbody >tr >td").filter(":even").css({cursor: "pointer"}).click(function() {
var tabindex2 = tab0712$.index($(this).parent().parent().parent());
var drindex = tab0712$.eq(tabindex2).find(">tbody >tr >td").filter(":even").index(this);

if ( $(this).parent().next().children().is(":visible")) {
$(this).parent().next().children().slideUp(800);
}
else {
tab0712$.eq(tabindex2).find(">tbody >tr >td").filter(":odd").css({display: "none"});
tab0712$.eq(tabindex2).find(">tbody >tr >td").filter(":odd").eq(drindex).css({display: "block"}).find(">div").hide().slideDown(800);
}

});
});
</script>


注意事項:
  1. 步驟一的 class 代碼,置入於紅色字體處。如果你用 自工的 class 代碼,請改成你自己的。
  2. 這個互動模組可以重覆使用,只要再重覆步驟一,用表格做出內容,並設成相同的 class ,即可。
  3. <script xxx1.9.1.js"></script> 這條,即藍色字體處,如因其他互動模組而已使用,可忽略。一篇文章中這一 條有一次即可。請保留最前面的那一條。



更多清單式互動展開模組教學網頁:
  1. 把 紛雜的訊息收納起來:Accordion。
  2. Tabs 式的文本互動形式。
  3. 讓 更多細節跑出來的互動寫作:jQuery。