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

2013年12月22日星期日

超有氣質的圖文互動整合

她總喜歡在這個地點和角度，靜靜的在看著人在家中的走動。

貓科的威嚴

獅子和她是同一種性的；但她的那種威嚴只能用來抗議。

只要我一離開位置，她馬上佔據。「不要再寫paper了」，她表情如是說。

1.請貼入下列語法於<head>xxx</head>之間或<body>之後

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/SlidingBackgroundImageMenu/js/jquery.bgImageMenu.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/SlidingBackgroundImageMenu/js/jquery.easing.1.3.js"></script>

2.請貼入下列驅動語法於<body>之後

<script>
$(function () {
$('#sbi_container').bgImageMenu({
defaultBg : '開頭照片網址',
menuSpeed : 300,
border : 1,
width : 580,
height : 386 ,

type : {
mode : 'verticalSlideAlt',
speed : 450,
easing : 'easeOutBack'
}
});
});
</script>

3.請於<body>之後貼入CSS

<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/SlidingBackgroundImageMenu/css/sbimenu.css"
media="screen">

<style>
.sbi_content ul li{
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: normal;
line-height: 160%;
text-align: left;

background: rgba(105,105,105,0.6);
height: 100px;

}
</style>

4.請於欲出現的編輯區貼入HTML

<div id="sbi_container" class="sbi_container">
<div class="sbi_panel"
data-bg="第一照片網址"><a
href="#" class="sbi_label">第一標題 </a>
<div class="sbi_content">
<ul>
<li>第一內文 <br>
</li>
</ul>
</div>
</div>
<div class="sbi_panel"
data-bg="第二照片網址">
<a href="#" class="sbi_label">第二標題</a>
<div class="sbi_content">
<ul>
<li>第二內文<br>
<br>
</li>
</ul>
</div>
</div>
<div class="sbi_panel"
data-bg="第三照片網址">
<a href="#" class="sbi_label">第三標題</a>
<div class="sbi_content">
<ul>
<li>第三內文<br>
</li>
</ul>
</div>
</div>
</div>

注意：一但設定圖文框的寬度、高度值之後，要放進去的圖片也要剪裁成同樣大小的照片，這樣照片才能完整的呈現出來。

原始語法來源：Sliding Background Image Menu

2013年12月11日星期三

超快速、好用的補充說明互動法：Hint.css Tooltips

下

右

左

上

除了可在「編輯物件」的上、下、左、右這四個方向跑出說明文字外，同時也可以再變化顏色。Hint.css 預設了四組顏色，分別是「錯誤」的紅色，「警告」的橙色，「資訊」的藍色，以及「成功」的綠色。
文字、DIV、表格的TD以及圖片，都可以作用。請參考教學影音。

影音教學

1.將下列css程式置放於<head>xxx</head>之間或是<body>之後。使用KompoZer編輯器，最好置於< body>之後：

<link rel="stylesheet" href="http://lmcdwriting.org/userfiles/lmcsilver20121007/hint.css-master/hint.css"></link>

2.使用 Html 語法：

<span class="hint--top" data-hint="從上邊跑出說明文">上</span>
<span class="hint--bottom" data-hint="從下邊跑出說明文">下</span>
<span class="hint--left" data-hint="從左邊跑出說明文">左</span><br>
<span class="hint--right" data-hint="從右邊跑出說明文">右</span>

3.加入背景色，請把下列代碼加入於class="xxx"裡面：

紅色：hint--error
橙色：hint--warning
藍色：hint--info
綠色：hint--success
example: class="hint--top hint--error"，就以紅色背景在上方↖跑出來。

4.圖片的補充說明語法：

<span class="hint--top" data-hint="圖片的補充說明"><img src="xx"></span><br>

互動文本不是互爽的，是為了透過「互動」來創造更好的理解之可能…【課堂錄影：1分57秒 ↙】

原始語法出處：Hint.css