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

2014年3月14日 星期五

click即可【打開/隱藏】較長的內文



網頁是掃瞄閱讀。
網頁文章的表達,通常只要把大標及中標先呈現出來就可以,以免給讀者「文字壓力」。 通常,「長的」內文可以先藏起來,然後設定互動點;一但讀者有興趣了,想看時,就可以click互動地打開內文。




語法範例
標題
中標。按下這個區域,就可以打開隱藏的內文。
[click  ]
把要閉合的內文內容寫在這裡。
可以是圖文影音甚至是gallery,都沒關係;
只要是可以寫入Div裡面的都行。







一 把下列 jquery 程式碼貼到<head>xxx</head>之間或是<body>之後:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
說明:
1. jquery-1.9.1.js這條程式碼在很多互動模組都有用到,如已用到,就不用再貼。一篇網頁文章中,只要出現一次即可,請保留最前面的那條 jquery-1.9.1.js 程式碼。
2. 世新新聞系網路組的同學:因教學整體配合的需要,請放在<body>之後。
二 請把下列 CSS 語法貼到<body>之後:
<style>
.lmctabsli01 {
font-family: Verdana, '微軟正黑體';
font-size: 2em;
font-weight: bold;
line-height: 180%;
text-align: left;
letter-spacing: 0.1em;
}

.lmctabsli02 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 160%;
text-align: left;
text-justify: distribute;
letter-spacing: 0.1em;
cursor: pointer;
}
div.lmctabsli03 {
font-family: Verdana, '微軟正黑體';
font-size: 1.14em;
font-weight: normal;
line-height: 180%;
text-align: left;
text-justify: distribute;
}
</style>
說明
1. 這是大標(.lmctabsli01)、中標(.lmctabsli02)和內文(div.lmctabsli03)的CSS;看得懂的同學可以自行修改。請看影音教學。
三 請把下列 HTML碼貼到欲出現的編輯區域:
<table class="ta201403112042" style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="12">

  <tbody>
    <tr>
      <td class="lmctabsli01" style="vertical-align: top;">標題<br>
      </td>
    </tr>
    <tr>
      <td class="lmctabsli02" style="vertical-align: top;">中標<br>
[click&nbsp;<img style="width: 23px; height: 23px; vertical-align: -3px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiwOhVFaAX7x2BQcVXCqek1MzHZWSss-jp_lsagiXrKZd_sjJruCJ2yE2qXvaM4_ZQfPHX2MN06K7O53Jn6qJu8mEuC9cBXRUKou7-Ko21IXzUVngp_OddUNeXlxsKBgHlVPXyAj_eXlM/w504-h505-no/01up-down-arrows-i7819.jpg">
]<br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;">
      <div class="lmctabsli03">把要閉合的內容寫在這裡,<br>可以是圖文影音甚至是gallery都沒關係。
<img style="width: 300px; height: 200px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4raKgmHqTr93awiCoD1siumOkRD5mScXYEWf1nm0SPK004BOk_VHctjRga3kLuE0KdXaSRF-tyJthsEF5PYVaQAXPkXp18BDynGLQU8x9lmyosaXl-fD-ZAi7uoSk9HUzUGPLE-5EYw/w758-h505-no/IMG_4874.JPG"><br>
      </div>
    
      <br>
</td>
    </tr>
  </tbody>
</table>
說明
1. 使用KompoZer編輯的同學,請將html碼複制下來,選擇【插入/HTML】,再直接貼入即可。會使用html碼的同學,就直接貼入使用。
2. 再依編輯的需求,自行修改,或使用Kompozer來修改。請務必看教學影音, really easy! No problems!!
3. 老師所設計的這個模組,可以重覆使用。想再使用時,只要重覆copy此項(第三項),再貼到欲編輯區即可。
四 將下列 jquery 驅動碼貼到<body>之後:
<script>
$(function() {
$("table.ta201403112042").find("tbody > tr:last-child > td > div").hide();
$("table.ta201403112042").find("tbody > tr:nth-child(2) > td").click(function() {
$(this).parent().next().children().children().slideToggle(800);
});
});
</script>
1. 貼入後即可呈現效果。


1 則留言: