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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilpJ7zT_8GDGziMFBCviYtFCqDQhcky6otM_cgsIUhlefiAQrK87xaX6NwvgaHrD4bg-dE_z0J9FtWsWjT54MtFZiKqnSvXRRzcSVvaqj7iRwSgcMBlsarVOEOoIQ7QnIEowC4fRwKuFI/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. 更詳細各種運用，請看移動滑鼠就跳出圖．文．說明框。


沒有留言: