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

2014年5月30日 星期五

為資訊加入互動性補充說明:CSS兄弟選擇及hover的綜合應用



這是中標/摘要,或是較為簡短的段落大意。
也可以是圖文整合型的文本, 只要是在Div內就可以。
CSS兄弟選擇(+)以及hover的綜合應用。
mouseover...[absolutely simple]
這是內文。換言之,要對上面div區域再加以補充說明的資料/訊息。
一般而言,在螢幕閱讀之下,一開始的掃瞄過程,文字太多會妨礙掃瞄性的快速閱讀理解。所以用較少的文字摘要來讓讀者快速掌握大意。
一旦讀者有與趣了,我們再來就可以利用互動機制,來對摘要文字加以補充說明。這時,就可以滿足讀者在互動文本中對內容的進一步要求。


一、請用KompoZer做出兩個 div,以形成互動,請看教學影音:

  1. 先做出兩個緊鄰的div,上面的是摘要,下方的是補充性內文。
  2. 第一個div要記得給上id的代碼。
  3. div內可以是任何html可以呈現的資料。
二、請於<body>之後加入下列的CSS,就可以形成互 動功能:

<style>
#div2014053001 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
padding: 1em;
}
#div2014053001+div { // + 符號是css兄弟選擇器
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: normal;
line-height: 1.8em;
text-align: left;
letter-spacing: 0.1em;
margin-top: 1em;
padding: 1em;
border-bottom: 2px solid darkorange;
display: none;
}

#div2014053001:hover {
background-color: darkorange;
}
#div2014053001:hover+div { // hover互動後,作用於其後的兄弟DIV
display: block;
}
</style>
三、注意事項:
  1. 要做第二組互動文本時,記得要更換新的id(紅色 字)。
  2. +div綠色字)的那組 css,即是控制第二個div的CSS。
  3. :hover藍色字)的那組 css,是控制滑鼠移入時的動作。



2014年5月24日 星期六

使用Css + Div 來進行排版寫作:DIV堆積木法



DIV的堆積木寫作法
按我讓div展現相互堆疊的排版效果
一塊堆一塊
創造出空間性意義呈現






這是要移動的Div版面區塊。
透過Div的上下移動,可以形成不同Div的相互「拼貼」作用,這樣就可以形成某種形式的排版效果。例如此例是:左字右圖的版面呈現形式。
範例說明:
設置上、下兩個 DIV (綠色及紅色框區域)。上面DIV使內容物件靠右;下面DIV使內容靠左。
再利用 style="margin-top: -6em;" 的 CSS 語法,將下面的 Div 區塊向上移動 6em,這樣就可以重疊兩個 Div ,創造版面的變化。網站教學參考資料使用範例


影音教學:




CSS 的盒子模式



margin: xxem 是指 Div (盒子)與外部的距離。正的數字是指「擴張」距離,負的數字是指「收縮」距離。例如 2em 是指二個div之間擴張 2 個中文字元的距離,而 -2em 是兩個div之間減少 2 個中文字元的距離。可以有三種寫法:
  1. style="margin: 2em 3em 2em 3em;",如果寫了 4 個數字,是指 div (依續)上、右、下、左,四邊的外部距離。
  2. style="margin: 2em 3em;",如果只寫 2 個數字,是指上、下 2em,左、右 3em。
  3. 也可以單獨指定任何一邊的外部距離,分別為 style="margin-top: 2em;" 上邊、style="margin-bottom: 2em;" 下邊、style="margin-left: 2em;" 左邊、style="margin-right: 2em;" 右邊。






實用範例,請 按我!




雲的來去

向風一樣的自由,是雲。
讓自由的風得以形成的,是山的綠。
在木與木的堅持中,
雲才能像風一樣,讓自由成為一種理解。


寫作構思:

一、先設置一個圖像。
二,在圖像下面設置一個DIV,內有文字。
三、在DIV設置 margin-top: -10em; ,使得DIV上升,並壓住圖像,形成文壓圖。
四、在DIV內再寫入 padding-left: -10px; 形成文字向右拉出距離,再把文字變成白色, color: white;


注意事項:

一般而言,當文本媒材物件被「移動」後,在版面「後面」的媒材,會壓住版面前面的媒材物件。也就是「後壓前」。



更多參考版型範例(請點按圖片↓)








2014年5月23日 星期五

一進入文章就自動跳出影音



您好,潛水一陣子了,撈了不少知識,真是感 謝!!但有個問題一直找不到方式解決,能否給 個建議或方法,如何把youtube的影片嵌入在首頁,如:http://www.pyct-basketball.com.tw/ ,因公司老闆一直希望能在官網首頁放一個大大的影片,但首頁已經滿滿了,不可能再挖一個位置放影片,且老闆是希望要大大大,能否給予建議呢???謝謝

一、請在<head> xxx</head>之間或<body>之後加入jQuery程式碼:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css"
media="screen"></link>
二、請在<body>之後加入下列語法,讓影音跳出來:

<script>
$(function () {

$.fancybox({
width: 560,
height: 315,
href: 'http://www.youtube.com/embed/TDeGpEx29vY?rel=0',
title: '這是新聞系的資料交換雲',
type: 'iframe',
padding: 5,
openEffect: 'elastic',
preload: true
});

});
</script>
三、注意事項:
  1. 程式碼 1.9.1.js 那條(紅色字體), 如果其他互動模組已有用過,就不用再重覆出現。這條在文章中只要出現一次就好。請保留最早出現的那一條。
  2. 要跳出的影音,寬度和高度一定要設好(綠色字), 才會好看。因為這是一進入頁面就要主動跳出來的,建設能設成多大就多大,氣勢才會出來。
  3. 藍色字部分是影音在 youtube的位置,請看教學影音,即一開始就跳出來那個影音。請按瀏覽器的reload鍵。

影音教學:



2014年5月13日 星期二

超好用的image hover:全新改寫:使用KompoZer





沈思是一種無比的重要!
但沈思更重要的是放空自己。
人其實沒有多少勇氣,
可以來面對腦袋空空的感覺。
貓,
不知在想什麼?
一、在所欲編輯之處以KompoZer編輯所要之內容:

  1. 本範例使用kompoZer進行內容編輯講解;如理解方法後也可以使用其他網頁編輯軟體。
  2. 發想:先做一個表格,表格內插入圖像,圖像後再插入div文字區塊,再用CSS及jquery來產生變化、互動。
  3. KompoZer下載處KompoZer基本操作使用KompoZer的四個基本動作

二、請於<body>之後置入調整文字框的CSS:

<style>
#ta2014050901 >tbody >tr >td {
position: relative;
}
#ta2014050901 >tbody >tr >td >div {
position: absolute;
top: 0px;
left: 0px;
padding: 1em;
color: white;
background-color: rgba(107,107,107,0.7);
font-size:0.94em;
font-family: 微軟正黑體;
line-height: 150%;
}
</style>

三、請於<body>之後置入產生互動的jQuery程式碼:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#ta2014050901 >tbody >tr >td >div").hide();
$("#ta2014050901").hover(function() {
$(this).find(">tbody >tr >td >div").stop().fadeIn(200);
},
function() {
$(this).find(">tbody >tr >td >div").stop().fadeOut(200);
});
});
</script>

四、注意事項:
  1. 此模組只能產生一個互動變化單位,若要使用第二單位,重覆1-3步驟,一定要記得第一步驟須重設表格內的 id ,並同時更改步驟二、三 內的所有的id參數,即上面的紅色字部分。
  2. 可以更動文字框出現及隱藏的速度,此例為200(一秒是1000),即綠色字部分。
  3. 藍色字部分是文字框壓在圖 像上的位置,請參考教學影音來更改。
  4. 暗黃字部分是透明背景色的調 整,也請參考教學影音。
  5. 色碼表轉換網站,按此


2014年5月3日 星期六

在重點處以影音來強調說明:滑鼠移入即跳出




滑鼠
移入

tooltips 的效果
就跑出影音框
使用這方法可以快速的為媒材加上影音補充說明







思考的囈語:
阿多諾的那句話,如果把「藝術」技術改成「新聞」技術,那麼就打開了一大片對新聞未來的想像……。
有沒有一種寫作新聞的全新方式呢?這種方式不是來自形而上的「倒三角型寫作真理」所下達的指令,而是一種源自於寫作科技變遷所推動的物質性的「改變力量」。
如果,從寫作唯物的角度來思考,多媒體和互動這些寫作技術擺明了絕不相容於傳統的新聞寫作模式,那麼一種數位新聞的寫作的全新方式下的形貌又會是如何呢?
如果,
在數位新聞打翻了一切之同時,是否也能照亮了我們以前所看不到的世界?


close X

阿多諾:
藝術技術之重要性,關鍵在於提出全新方式,創造從未見過的形貌。今日,源於物化的藝術技術之稠度,重要性超過作品內容。可以說,在荒誕的時代裡散播新媒材 技術,不僅是費解的衝擊,而且打翻了一切;但它們卻照亮了我們所看不到的世界意義。




一、請於欲編輯處置入下列 HTML 的內容,並依影音教學自行調整、變化內容:



<img id="pic2014050301" style="width: 59px; height: 54px;" alt=""
onmouseout="UnTip()"
onmouseover="TagToTip('tab2014050301', BALLOON, false, ABOVE, true, STICKY, true, CLOSEBTN,true, SHADOW, false, TITLEBGCOLOR, 'transparent', BORDERCOLOR, 'transparent')"
src="https://lh5.googleusercontent.com/-VJ1rAYMP3WQ/Ut52gdCeuNI/AAAAAAAARAQ/zhvl_jKYC_A/w151-h137-no/Black%2526Blue_icons2130.png"><br>
<table id="tab2014050301"
style="text-align: left; width: 432px; height: 323px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">這是滑入後要跑出來的內容區塊。可以是圖文、video、或是gallery。<br>
任何可以在表格內跑出來的內容,都可以用。<br>
</td>
</tr>
</tbody>
</table>

二、請於<body>之後置入控制video圖像移動的 CSS:

<style>
#pic2014050301 {
position: relative;
top: -160px;
left: 170px;
margin-bottom: -54px;
</style>

三、請於< body>之後置入產生互動效果的 javascript 程式碼:

<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/wz_tooltip/wz_tooltip.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tip_balloon/tip_balloon.js"></script>

四、注意事項:
  1. 這一互動模組只能有一次效果,如要再做第二個,請重覆一次所有的動作,並注意要重設id,即上面的紅色字綠色字部分。請看教學 影音說明。
  2. video的icon以及跳出的內容都可以在KompoZer內自由編輯,請看教學影音。
  3. 更詳細各種運用,請看移動滑鼠就跳出圖.文.說明框