 |
表格當格線
格線創造規律 規律形就美感 美感吸引閱讀  |
| 教學範例影音> table-layout: fixed; |
| |
| 影音教學說明： |
| 1. 請於 table 內的
style 加入 table-layout: fixed; ，如此例 <table style="text-align:
left; width: 560px; table-layout: fixed;" 2. 第一列的格子，一定要去固定寬度，這樣整個表格的版型才會固定，才能當格線使用。 3. 如要跨越欄，請使用 div 來跨，之後再把內容寫入 div 中，這樣就可以跨欄寫作、編輯了。 |
 |
|
 |
本書專心回答一個再基本的不過的問題：到底要教給同學什麼樣的數 位技 能？為什麼是選這個而不是選那個？而選上 了這個有什麼可被解釋的理由嗎？這理由與「新聞敘事」有什麼關系？這些數位技能要如何使用？怎麼用得好！ |
|
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'。要記得加上 # 。 |