李明哲老師多媒體互動寫作教學: 4月 2016

2016年4月17日星期日

表格的圖文整合寫作：實例二

表格使用的優點在於，可以創造出某種版面結構上的秩序感。秩序感是平面構成重要的美感原則。

「圖文整合寫作」是數位文本中必然要成為常見的「文本格式」之一。
例如表格的特性，使我們易於感受和學會圖文整合寫作過程中，要常注意的某種寫作原則。本例著重如下原理：（一）分割比例；（二）媒材位移（空間關係）。

分割，請注意同等分割以及黃金比例分割。
位移，本例，請特別注意「1px」的寫作技法，請看影音教學。

顏色
在日常生活中
線條
在不經意的那一眼波流轉

經常，顏色與線條，往往令我騅足再三。
感官終究是有某種秩序的一種結構體，
它會在符合那種結構中的態勢綻放出一種永恆的感受之美。

範例的 CSS 語法：

<style>

/* 表格內大標字 */
.bigtitle010417 {
font-family: Verdana, '微軟正黑體';
font-size: 2.1em;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.06em;
margin-bottom: 0.5em;
text-shadow: 1px 1px 2px silver;
}

/* 表格內大標後粗體摘要字*/
.ironcontentbo010417 {
font-family: Verdana, '微軟正黑體';
font-size: 1.29em;
font-weight: bold;
line-height: 1.8;
letter-spacing: 0.1em;
}

/* 圓角框語法*/
.imgbord {
border-radius: 25px;
}

/* 旋轉語法*/
.trans0417 {
-webkit-transform: rotate(-10deg);
}

</style>

教學影音：

2016年4月3日星期日

表格的圖文整合寫作：實例一

表格使用的優點在於，可以創造出某種版面結構上的秩序感。秩序感是平面構成重要的美感原則。

秩序感即是韻律感。韻律感是一種系統化的過程。「韻律感比起構圖的其他基本原理，還要更具有影響力些。它的存在是如此有活力，因此即使是記錄韻律感的最平凡主體，也能形成一張賦予深刻印象的照片」（Clements & Rosenfeld／塗紹基譯：1983，183；click↗）。


這是陽明山的黃昏大約下午五點左右，落日的顏色就會是完全的讓人相信時間的到來。即使某種程度陰天，也只是造就了更好的炫爛。		春天盛開的風潮春天的到來，是無法讓櫻花躲過的宿命。一種用盡力的生命搏鬥，讓人觸目心驚。沒有人知道，花是否同時都知道，那一種不可錯過的時刻，是多年潛藏的等待。

本頁所使用之CSS：

/*表格圖片互動，請放在 table*/
.tabimgint0403 {
}

/*和上面CSS是共同一組*/
.tabimgint0403 td:hover >img {
position: relative;
top: -6px;
}

</style>

教學影音：

參考書目：

Clements, B., & Rosenfeld, D. ／塗紹基譯（1983）。《攝影構圖》。台北：眾文圖書。

2016年4月1日星期五

網路組的互動式跳躍連結。使用 Javascript

　回到頁首　

互動式跳躍連結。Wiht Javascript

真的快又簡單！

「標題、記者、圖文整合、跳躍連結」，是網路組寫作標準訓練技法。

跳躍連結，最要讓學生開始學習思考一種寫作技能：
如何在數位文本寫作中，來思考讀者與數位文本之間的互動模態。
換言之，
如何在文本中創作一種互動樣態，讀者可以藉著這一互動關係，
來形成對數位文本的互動關係。
作者要如何來思考與創作這一種潛藏在文本中的互動關係。

這是第一標題

可以再就內容加以補充二標

詳細的細節是充實性的三標

最後的結論是重點強言

使用方法：

一、請為所要跳至之地方，設置id，此例 a01：

二、要按下去之物件請設跳躍連結使用之 javascript ！

onclick=" document.location='#a01'; "

三、跳躍連結的CSS：

<style>

/* 跳躍連結的大DIV */

.midtitle010401 {
background-color: rgba(192, 192, 192, 0.3);
text-align: left;
padding-bottom: 0.7em;
padding-left: 0.5em;
background-image: url(https://goo.gl/DEAZHH);
background-repeat: no-repeat;
background-size: 32px;
background-position: right top ;
}

/* 跳躍連結的文字中標 */

.midtitle010401 >div {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.03em;
margin-right: 1em;
margin-top: 1.3em;
padding-left: 0.5em;
padding-right: 0.5em;
border-bottom: 1px solid gray;
border-right: 1px solid transparent;
display: inline-block;

}

/* 跳躍連結的滑鼠移入後中標 */

.midtitle010401 >div:hover {
padding-left: 0.9em;
padding-right: 0.1em;
border-right: 1px solid gray;
-webkit-box-shadow: 2px 2px 2px 1px silver;
cursor: pointer;
background-image: url(https://goo.gl/DEAZHH);
background-repeat: no-repeat;
background-size: 22px;
background-position: left center;
}

</style>

教學影音

stop! 這是標題一的目的地，這裡是一個DIV，設置id為 #a01 。

stop! 這是標題二的目的地，這裡是一個DIV，設置id為 #a02 。

stop! 這是標題三的目的地，這裡是一個DIV，設置id為 #a03 。

stop! 這是標題四的目的地，這裡是一個DIV，設置id為 #a04 。

2016年4月17日 星期日