李明哲老師多媒體互動寫作教學: 4月 2014

2014年4月29日星期二

快速移動圖片的排版+互動功能

如果數位文本的寫作，
是一種需要想像力的創作過程；
那麼，
在空間的強烈位移和變動，
是激發想像力的一種形式。
想像力，不是和一般知性式知識對立的認知形式，
相反的是一種綜合，
根據美學理論而言。

透過CSS語法的安排
我們可以隨心所欲的把圖像置放到版面任何地方
尤其是置放去背圖像
可以強烈的將訴求主題凸顯出來創造文本意圖
當然有時這種圖像移動有時難免會把寫好的文本蓋住
沒關係
可以利用互動語法
click一下可以暫時讓圖像消失讀者便可觀看完整文本
我們可以調整多少時間後圖像可以再度出現

一、請在欲編輯地方寫人文稿並於文稿下置入圖片：

1.很簡單的寫作編輯動作，請看影音教學。
2.裡面還有一些非常有用的小技巧。
3.圖片請一定要記得設 id 。

二、請在<head>xxx</head>之間或<body>之後置入CSS來移動圖片：

<style>
#pic20140428 {
position: relative;
top: -280px;
left: -10px;
margin-bottom: -280px;
}
</style>

三、請在<head>xxx</head>之間或<body>之後置入互動程式碼：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
$(function() {
$("#pic20140428").click(function() {
$(this).animate({opacity: "0.1"}, 200).delay(6000).animate({opacity: "1"}, 200);
});
});
</script>

四、注意事項：

紅色字的部分請一定要和照片，即<img id="xxx" >，的相同。這樣才能控制圖片啊！
圖像消失後要多少以後才再出現，是第 3 部分的藍色字部分，即 delay(6000) ，以千分之一秒為單位，6000即是6秒後再出現。

2014年4月19日星期六

壓在圖上的文字：互動式

click X
阿多諾的《美學》：人和自然的關係在美的形式上應是：模仿。模仿：是主體對客體的全力投入。在學攝影中，我對這話句才有了一點一滴的體會… …

一、影音教學：

二、在欲編輯處寫入下列HTML碼：

<table id="ta2014041901" style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
<tbody>
    <tr>
      <td style="vertical-align: top;"><img style="width: 628px; height: 419px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGPxOwZmFcJ64FXmgs2hdZRbOGpfNL3w2E-XvLt4N2QSbm85MStg-8XZGjhHQQ_TYBz_6Vi0JcI21TApFMKYrYHZhHSxCUxPnALoRaJPqQMMh_n-pWTzZH6H_cFHYdXQL3fn9wsjSSGaE/s763/IMG_1893.JPG"><br>
      <div style="width: 232px; height: 168px;">click X<br>
阿多諾的《美學》：人和自然的關係在美的形式上應是：模仿。
模仿：是主體對客體的全力投入。
在學攝影中，我對這話句才有了一點一滴的體會… …<br>
      </div>
      </td>
    </tr>
</tbody>
</table>

三、請於<head>xxx</head>之間或<body>之後置入CSS：

<style>
#ta2014041901 >tbody >tr >td {
position: relative;
}
#ta2014041901 >tbody >tr >td >div {
padding: 0.5em;
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: normal;
line-height: 1.4em;
text-align: left;
letter-spacing: 0.1em;
background: rgba(253,255, 255, 0.7);
position: absolute;
top: 3.5em; left: 2em;
cursor: pointer;
}
#ta2014041901 >tbody >tr >td >div:first-line {
text-decoration:underline; padding-bottom: 1em;
}
</style>

四、請於<head>xxx</head>之間或<body>之後置入Jquery程式碼：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#ta2014041901 >tbody >tr >td >div").click(function() {
$(this).css({"display": "none"});
});
$("#ta2014041901 >tbody >tr >td >img").click(function() {
$("#ta2014041901 >tbody >tr >td >div:hidden").fadeToggle(600);
});
});
</script>

注意事項：

jquery-1.9.1.js這條程式碼（紅色部分），如因其他互動功能而已被使用，就不用再出現了。一篇文章中，只要出現一次即可，請保留最早出現的那條。
整個模組只能使用一個互動功能，如要再使用第二次，請再從第二項重新做起，並更改全部的id。請看教學影音的說明。

2014年4月11日星期五

讓圖片有更豐富的想像力

創造豐富想像力的 image effect 效果！

1 請於< head>xxx<head>之間或<body>之後寫入下列程式碼：

2 請於於<head>xxx< head> 之間或<body>之後寫入下列CSS語法：

3 請於欲編輯區域寫入下列 HTML ：

<div id="lmccontainer" class="lmccontainer">
<div class="lmcwrap"> <img
src="第一張圖像網址"
alt="Picture 1"> </div>
<div class="lmcwrap"> <img
src="第二張圖像網址"
alt="Picture 2"> </div>
<div class="lmcwrap"> <img
src="第三張圖像網址"
alt="Picture 3"> </div>
<div class="lmcwrap"> <img
src="第四張圖像網址"
alt="Picture 4"> </div>
<div class="lmcwrap"> <img
src="第五張圖像網址"
alt="Picture 5"> </div>
<div class="lmcwrap"> <img
src="第六張圖像網址"
alt="Picture 6"> </div>
</div>

說明：
1.圖像的大小請先剪裁為600x600的正方形。

資料來源：PHOTO ZOOM OUT EFFECT WITH JQUERY

2014年4月9日星期三

table + div + click互動的整合性排版寫作

使用 KompoZer：
table + div + click互動的整合性排版寫作(一＆二)

影音教學內容：

固定表格欄寬 style="table-layout: fixed;"。
若要做出跨越列高的編輯區塊，請先設一個div，再於div裡面插入表格，如此這個表格就可以隨意拉高。

教學影音內容：

將 play icon 往上移動的語法：style="position: relative; top: -250px; left: 10px;"。詳細教學網頁。
要消除play icon所留下的空白：style="margin-bottom: -110px;"。詳細教學網頁。
click跳出影音的教學內容，按此。

2014年4月7日星期一

表格內插入表格的排版寫作

表格中插入表格: 塊狀版型寫作實戰

影音教學說明

在表格內插入表格的操作方法。
要記得固定表格寬度，才不會亂掉。
「加入選中的儲存格」的功能，一個表格最好只使用一次。

2014年4月29日 星期二