李明哲老師多媒體互動寫作教學: 清單式互動展開內容文本模組：按一下就有

首頁

初學者技能教案專區

google Meet遠距上課技能

javascript互動文本寫作

融媒體Wix教學

網路新聞寫作：HTML&CSS

新聞影音剪輯：premiere

匯流寫作基模知識：gravit

基礎影音編輯：shotcut

基礎向量圖像編輯：inkscape

基礎圖像編輯：GIMP

排版設計scribus

匯流新聞專題寫作

影音新聞製作與剪輯（上課用）

新聞直播編導／OBS（上課用）

基礎新聞攝影（上課用）

數位排版/敘事（上課用）

西洋哲學史導讀

老子探義導讀

《論語》小談

《法華經》的思

品嚐《華嚴經》

Unsplash圖像集

Pexels 圖像集

我的給大學生書單

傳播理論／研究

2014年7月15日星期二

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

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

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

注意事項：

內容區的文本寫作完成後，請用div包圍起來。如用KompoZer來做，極為簡單。一些小小注意事項，請留意相關影音片段。
內容區可填入任可html文本，包括互動文本。
請記得為表格加入 class 標記，此例為 class="tab2014071201"。
編輯／內文區寬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>

注意事項：

這CSS是控制表格的呈現內容，所以步驟一中表格所設定的class代碼，class="tab2014071201"，就是紅色字體處的 .tab2014071201 ，共四處。最前面的「.」，請勿忘了。那是class的代碼。
如果你的表格要用你自己的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>

注意事項：

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

更多清單式互動展開模組教學網頁：

把紛雜的訊息收納起來：Accordion。
Tabs 式的文本互動形式。
讓更多細節跑出來的互動寫作：jQuery。

沒有留言:

張貼留言

訂閱：張貼留言 (Atom)