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

2014年2月26日 星期三

讓表格很聽話:把表格當格線用




表格當格線
格線創造規律
規律形就美感
美感吸引閱讀


教學範例影音> table-layout: fixed;

影音教學說明:
1. 請於 table 內的 style 加入 table-layout: fixed; ,如此例 <table style="text-align: left; width: 560px; table-layout: fixed;"
2. 第一列的格子,一定要去固定寬度,這樣整個表格的版型才會固定,才能當格線使用。
3. 如要跨越欄,請使用 div 來跨,之後再把內容寫入 div 中,這樣就可以跨欄寫作、編輯了。

2014年2月20日 星期四

按一下就跳出「全文閱讀」










本書專心回答一個再基本的不過的問題:到底要教給同學什麼樣的數 位技 能?為什麼是選這個而不是選那個?而選上 了這個有什麼可被解釋的理由嗎?這理由與「新聞敘事」有什麼關系?這些數位技能要如何使用?怎麼用得好!


click to 全文閱讀




 
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/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>之後。
2. 請將下列驅動程式碼複製並置於<body>之後:
<script>
$(function () {
$("#lmca02").click( function () {
$.fancybox({
autoSize: false,
width: 540,
autoHeight: true,
href: '#02140923w',
title: '閱讀全文',
type: 'inline',
padding: 5,
openEffect: 'elastic',
preload: true
});
});
});
</script>
說明:
藍色字和綠色字的部分,是要配合第 3 、第 4 部分所設的 id 之內容。
3. 在所欲的編輯區域,置入下列可以click文字的語法:
<span style="text-decoration: underline; cursor: pointer;" id="lmca02">click to 全文閱讀</span>
說明:
span內要設id="xxx",此例 lmca02 (藍色字)。這一代碼是要寫入到第 2 部分的 $("#xxx"),此例為 $("#lmca02")。要記得加上 # 。
4. 在編輯區域之末,置入要全文跳出的內文:
<div id="02140923w" style="padding: 10px; font-family: 微軟正黑體; font-size: 1.24em; line-height: 180%; letter-spacing: 0.1em; display: none;">

請置入內文;也可以圖文形式的文本;可放入任何HTML文本。<br>

</div>
說明:
div內要記得設上id="xxx",此例為 02140923w (綠色字部分),這一代碼是要寫入到第 2 部分的 href="#xxx",此例為 href: '#02140923w'。要記得加上 # 。


注意:
上面的動作只能做出「一個」互動效果,如要做出第二個,請重覆2-4的項,並更換不同的 id ,即上述的藍、緣字部分。