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 ，即上述的藍、緣字部分。





沒有留言: