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

2014年3月21日 星期五

文字、click、圖像高度互動的模組: jQuery




不要被長長程式碼嚇到。
真的超簡單到不行！

很好用的文、圖、互動組合模組。
全新開發，
更上手的教學／使用程序！


1
 一、互動模組實作範例：

標題
內文中可以針對文字描述設立click然後按一 下就可以換照片這樣文字和圖像之 間的互動就可以有更多的互文性展現





2
 二、教學影音：


1
 一、請將下列 HTML 碼貼入到所欲編輯的地方：

<table id="paw20140320" class="picawo0320"
style="text-align: left; width: 100%; table-layout: fixed;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">標題<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">內文中可以<span
style="color: rgb(51, 204, 255);">針對文字</span>描述設立<span
style="color: rgb(51, 204, 255);">click</span>然後按一
下就可以換照片這樣<span style="color: rgb(51, 204, 255);">文字和圖像</span>之
間的互動就可以有更多的互文性展現<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><img
style="width: 626px; height: 415px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt1L1COCecarGMXskSA71u6y1Z_pq1vvaus1JmAX8shE3G9enZfeyilR6ddLQlubaz5bgL1rQV6PpWq4UEX3JJkW1gfmdpJcJK2kLtQeWcgwz4M4iXkS9OdHvwdSmhILZAG0AOBIz0tfE/w769-h513-no/IMG_1326.JPG"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><img
style="width: 48px; height: 32px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwZELl7gFvORqmVeoFPde3C4TbOnRr77ZVT4kfxpWBVM0I5NaE-v5Q7g8sepqUDDFNjFri5mZdemwuqGayDlmr74Z_pQ1wkvDk7f68sks6XB28QKdW57utTI3oLWbAGQmsjr_CBCng97A/w763-h509-no/IMG_1332.JPG"><br>
<img style="width: 48px; height: 32px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXdCTry_KUWZN79F_t02acALnfgCIAp0WTlTm2L703xUTfuhgCu1AGAIhZL_TE6vlCgmfBuYzmE0bM80RjnpqmYazuhM-Zz3p7LhtaV5DAWFPE33orZ5ukA287L6BxboLepLdSb3FfAvY/w763-h509-no/IMG_1357.JPG"><br>
<img style="width: 48px; height: 32px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijVdvheZ-nQ0rfm0KRlSbLvPZ75YUJllTNMRg6z86STgxGDneApybIiBsdBVaNzzrdr0Oo512NnN46yO-h7ILQYO41RlCLpzWL3OZx0AcBv1TM9BOkZSszVnGHsXFhgYHvUk9wUPbdfPE/w763-h509-no/IMG_1362.JPG"><br>
</td>
</tr>
</tbody>
</table>

說明
  1. 請使用KompoZer進行對HTML內容的快速調整、編輯，請務必看上面的教學影音內容。
2
 二、請將複製下列CSS語法並貼入於<body>之後：

<style>
table.picawo0320 > tbody > tr:nth-child(1) > td {
font-family: Verdana, '微軟正黑體';
font-size: 2.2em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
padding: 8px;
letter-spacing: 0.1em;
}

table.picawo0320 > tbody > tr:nth-child(2) > td {
font-family: Verdana, '微軟正黑體';
font-size: 1.14em;
font-weight: normal;
line-height: 1.6em;
text-align: left;
-webkit-column-count: 2;
letter-spacing: 0.1em;
padding: 8px;
}

table.picawo0320 > tbody > tr:nth-child(2) > td > span {
cursor: pointer;
}

table.picawo0320 > tbody > tr:nth-child(3) > td {
cursor: pointer;
}
</style>

說明：
  1. 【table.picawo0320 > tbody > tr:nth-child(1) > td】這是標題的CSS，可自行修改。
  2. 【table.picawo0320 > tbody > tr:nth-child(2) > td】 這是內文的CSS，看得懂的同學也可以自行修改。
3
 三、請複製下列 jquery 程式碼並放置於<body>之後：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var pawtabid = $("#paw20140320");
var pawidiwant= pawtabid.find("> tbody > tr:nth-child(2) > td > span");
pawtabid.find("> tbody > tr:last-child").hide();
pawidiwant.click(function() {
var indexw = pawidiwant.index( this );
var passpicsrc = pawtabid.find("> tbody > tr:last-child > td > img").eq(indexw).attr("src");
$(this).parent().parent().next().find("> td > img").attr("src", passpicsrc).fadeOut(5).fadeIn(1000);
});
var picoring = pawtabid.find("> tbody > tr:nth-child(3) > td > img").attr("src");
pawtabid.find("> tbody > tr:nth-child(3) > td ").click(function() {
$(this).find("img").attr("src", picoring);
});
});
</script>

說明：
  1. 置入程式碼後，效果就會顯現。
  2. <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 這條（紅色字部分），如果你有用別的互動模組而使用到，就可以不用再寫入了。一篇文章中有一次就好，請保留最前面的那條。
4
 四、一些同學所碰到的問題？例如按下字但圖片不會變化…

0 讓我聽聽您的想法：

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 讓我聽聽您的想法：

2014年3月8日 星期六

content slide：有圖說及自動播放功能




重新改寫  更簡單  更易用

只是想要放上照片
只是想要自動輪播
只是想要加上圖說

範
例
1
 請於<head>xxx</head>之間或 <body>之 後，置入下列程式：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.min.js">
</script>
<link
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.css"
rel="stylesheet">
2
 請於<body>之後置入驅動程式碼：

<script>
$(function() {
$(".bxslider").bxSlider({
captions: true,
slideMargin: 5,
auto: true
});
});
</script>

說明：
1. 要使用圖說功能> captions: true。不要使用圖說功能> captions: false。
2. 圖片與圖片之間的距離> slideMargin: 5。
3. 圖片自動移動> auto: true。圖片不要自動移動> auto: false。
3
 請置入要出現圖像的HTML碼：

<div style="width: 480px;">
<ul class="bxslider">
<li><img title="這是圖說一"
src="第一張圖片網址"></li>
<li><img title="這是圖說二"
src="第二張圖片網址"></li>
<li><img title="這是圖說三"
src="第三張圖片網址"></li>
<li><img title="這是圖說四"
src="第四張圖片網址"></li>
</ul>
</div>

說明：
1. style="width: 480px;" 這會決定整個content slide的寬度，裡面圖片的大小會自動決定。
2. title="這是圖說一" 圖說內容。這要配合上面 captions: true, 的功能打開。若是captions: false(圖說功能關閉)，即可不用寫title="xxx"。
0 讓我聽聽您的想法：

2014年3月7日 星期五

小世界網路組：kompozer寫作的四個基本動作





kompozer寫作的四個必要基本動作
這很重要，可以減少很多莫名的語法問題；
這很重要，可以減少後續匯流編 輯的工作；
這很重要，可以增加網頁寫作的信心及創意。

影音教學注意事項：
1. 第一基本動作：請按 enter 鍵五次（或以下），以擴張可編輯區域。
2. 第二基本動作：請選　格式／頁面標題與屬性／選擇字元編碼方式／Unicode(UTF-8)。
3. 第三基本動作：請調整頁面寬度為640px，並居中。參照語法：<body style="margin: 0px auto; width: 640px;">。
4. 如有各種互動語法／程式要加到原始碼區，請加到<body>之後，同時最好又在一個<br>之後。如圖：


如果沒有照我的方法來做：
KompoZer很容易出現bug的。如下圖：


到原始碼的地方去看， 可以看到紅色框的部分，那是KompoZer會自動跑出來的，但這會讓整個網頁的很多互動效果失敗。
可是你想刪掉，又刪不掉，會一直跑出來。
如果你的網頁有很多互動效果失效，可能就是如此。

解決方法：
1. 請你存檔後，用記事本等純文書處理器打開，然後把上面的紅色框內的字都刪掉，再存檔就可以了。



KompoZer下載頁面。

0 讓我聽聽您的想法：
訂閱： 文章 (Atom)