*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2014年6月23日 星期一

一直按圖就一直換圖:簡單直覺的做法



【自製】
一直按圖一直換圖 image gallery


  看著貓的各種姿式,是一種 恬靜的樂趣。圖多 ↑ 。
Click & See More!



一、請在欲編輯區用KompoZer置入 一張圖,並設定長寬:



注意事項:
  1. 編輯區所置入之圖片要記得設id,如本例id="i001"。

二、請置入下列互動程式碼:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var arr = [
"第一張照片網址",
"第二張照片網址",
"第三張照片網址",
"第四張照片網址",
"第五張照片網址"
];
var flag = 1;
$("#i001").click(function() {
if(flag < arr.length){
$(this).attr("src",
arr[flag]);
flag = flag+1;
}
else {
flag= 0;
$(this).attr("src",
arr[flag]);
flag = flag+1;
}
});
});
</script>

注意事項:
  1. 要記得把步驟一所設定的id代碼,寫入此互動程式中,即紅色字體部 分。
  2. 把更多的照片網址寫人到藍色字體部 分,如不夠可以再自行添加,請看教學影音詳細說明。

三、教學影音注意事項:

  1. 如有其他互動程式已用到jquery-1.9.1.js這條,即橘色字體部分,請刪掉。一篇文章只要使用一次,請保留最早出現的那 一次。
  2. 如要再做第二個,請重覆一、二,並重新設定id。


2014年6月18日 星期三

可以互動的跳躍連結中標列表


 


  1. 第一區塊標題
  2. 星叢計畫:影音教學
  3. 區塊三標題
  4. 第四區塊標題
  5. 第五區塊標題







一、請用KompoZer製作文字的清單功能[ol li]:

注意事項:
  1. KompoZer會看不出這一效果。把其他步驟做完,存檔,再用瀏覽器來預覽就會看到。
  2. 記得在 ol 部分設上 id ,此例為 k2014061801

二、請copy下列CSS語法,並置於<body>之後:

<style>
#k2014061801 {
margin: 0px;
padding-left: 0px;
border: 0px solid green;
}
#k2014061801 >li {
display: inline-block;
border-bottom: 2px solid red;
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
text-align: left;
letter-spacing: 0.1em;
padding: 0.3em;
margin-right: 0.5em;
margin-bottom: 0.5em;
}
#k2014061801  >li:hover {
border-bottom: 2px solid green;
}
#k2014061801  >li >a:link {
color: black;
text-decoration: none;
}
#k2014061801  >li >a:visited {
color: gray;
}
</style>

注意事項:
  1. 請把 id (紅色字者,共 5個)改成和步驟一相同的 id。

三、更多學習事項:

  1. 如果更動底線顏色(藍色字列),請更動顏色代碼,此例 green 改成 blue。
  2. 移過去後想變動字的顏色,請加上 color: red; 在藍色字列之後。
  3. 移過去後想變動背景色,請加上 background-color: yellow; 在藍色字列後。
  4. 以上請看教學影音,有詳細介紹。
  5. 顏色代碼網站
  6. CSS語法快速 複習

 



按此 回標題列表

世新新聞布落客星叢計畫:教學影音

如何使用google blog 寫出互動式多媒體數位文本

2014年6月10日 星期二

小額資訊量的快速互動補充:純CSS互動範例





本書專心回答一個再基本的不過的問題:到底要教給同學 more...

什麼樣的數位技能?為什麼是選這個而不是選那個?而選上 了這個有什麼可被解釋的理由嗎?這理由與「新聞敘事」有什麼關系?這些數位技能要如何使用?怎麼用得好!


數位文本常常要對某些訊息做小額量的資訊補充。例如,一 個簡短的圖說之後,可以透過互動 機制,迅速為「圖說」加上額外的補充說明。如果「作者」在寫作的判斷上覺得「讀者」會想要知道的更多。
本文的互動機制,可以「快速」補充少量的訊息。更重要的是,互動機制帶出的訊息,並不會干擾、影響原先的排版樣式。

一、請先做出一個設有長度和寬度的Div 文本區塊,影音教學:

  1. 這是一開始在頁面出現的Div,所以要把寬度和高度決定好。
  2. 請一定要記得為這個 Div文本區塊設定 ID 代碼。
  3. 如用kompoZer編輯,請拉一下長度和高度設定框,就會把Div的長、寬設定好了。
二、請先複置下列可產生互動效東的CSS碼,並貼於< body>之後:

<style>

#k001 >div {
width: 191px;
height: 205px;
overflow: hidden;
position:relative;
z-index: 99;
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: normal;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
border: 1px solid transparent;
padding: 0.5em 1em 0.5em 1em;
}

#k001:hover >div {
height: auto;
overflow: hidden;
border: 1px solid black;
background-color: beige;
-webkit-box-shadow: 2px 2px 2px 2px silver;
}

</style>

  1. 請把步驟一的div文本區塊所設的 id 代碼寫入到CSS中,即二個紅色字體者
  2. 同樣的,把上步驟的Div的長、寬值,都同樣的寫入到此CSS中,即藍色字體者
三、Copy下列語法,把你的內容填進去,並置入於步驟一的Div內。

<div >
﹛可以是一張照片﹜
放入想你要的全部文字。放入想你要的全部文字。<br>
本文的互動機制,可以「快速」補充少量的訊息。更重要的是,互動機制帶出的訊息,並不會干擾、影響原先的排版樣式。<br>
</div>

  1. 把你所有想呈現的資料通通放進去。
  2. 可以把照片放在最前面,就會如同本篇範例一樣的效果。
  3. 可以重新調整開始呈現時的高度和寬度。記住:要同時調整步驟一有id的div寬度和高度,以及和步驟二的CSS寬度和高度即可。請看教學影片。