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

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:

<style>

/* 本文大標 */
.bigtitle010403 {
font-family: Verdana, '微軟正黑體';
font-size: 2.4em;
font-weight: bold;
line-height: 1.2;
text-align: left;
letter-spacing: 0.02em;
margin-bottom: 0.1em;
text-shadow: 1px 1px 2px silver;
}

/* 大標後粗體摘要*/
.ironcontentbo010403 {
font-family: Verdana, '微軟正黑體';
font-size: 1.07em;
font-weight: bold;
line-height: 1.2;
text-align: justify;
text-justify: inter-ideograph;
letter-spacing: 0.1em;
}

/* 基本黑體內文*/
.ironcontentno010403 {
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: normal;
line-height: 1.8;
text-align: justify;
text-justify: inter-ideograph;
letter-spacing: 0.1em;
}


/*表格內小標 */
.littletitle010403 {

font-family: Verdana, '微軟正黑體';
font-size: 1.06em;
font-weight: bold;
line-height: 1.4;
text-align: left;
letter-spacing: 0.06em;
margin-bottom: 0.4em;
border-bottom: 1px solid gray;
}

.littletitle010403::before {
content:"^";
color: red;
margin-right: 0.5em;
}

/* 表格內基本細明體 */
.ironcontentmi01040 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 2;
text-align: justify;
text-justify: inter-ideograph;
letter-spacing: 0.1em;
}


/*表格圖片互動,請放在 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 。