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

首頁

初學者技能教案專區

google Meet遠距上課技能

javascript互動文本寫作

融媒體Wix教學

網路新聞寫作：HTML&CSS

新聞影音剪輯：premiere

匯流寫作基模知識：gravit

基礎影音編輯：shotcut

基礎向量圖像編輯：inkscape

基礎圖像編輯：GIMP

排版設計scribus

匯流新聞專題寫作

影音新聞製作與剪輯（上課用）

新聞直播編導／OBS（上課用）

基礎新聞攝影（上課用）

數位排版/敘事（上課用）

西洋哲學史導讀

老子探義導讀

《論語》小談

《法華經》的思

品嚐《華嚴經》

Unsplash圖像集

Pexels 圖像集

我的給大學生書單

傳播理論／研究

2017年7月22日星期六

自由移動 DIV：relative, absolute, translate, z-index。完全理解！

自由移動！

block-level elements ；區塊層級物件

DIV

by 編輯老師

數位文本的意義給出方式，更大的依賴於媒材之間的空間位置關係，所釋放出來的理解過程。換言之，寫作過程中，媒材位置的排列佈置，往往是作者傳達寫作思維意義的方式。
就此，對於如何自由的去移動媒材，控制媒材所處的位置，就是必要的數位文本寫作技法。

relative：相對法
absolute：絕對法
translate：轉移法
上下重疊

影音教學：

技法一： position: relative;

一個典型的 position: relative; CSS語法。

<style>
/* relative語法 */
.posirela {
position: relative;   /* 啟動功能 */
top: -25px;             /* 向上移動 */
left: 100px;           /* 向左移動 */
}

/* div寬高設定 */
.divposi {
width: 150px;
height: 150px;
border: 1px solid black;
}

</style>

下列是一個DIV 的html語法：

<div class="divposi">
這是示範的DIV

</div>

DIV 的呈現樣態如下。
按這裡會把 .posirela 加入，產生變化。

這是示範的DIV

DIV後面的編輯寫作文字。DIV後面的文章…

幾個觀察的重點：

一、DIV移動後，「電腦」仍然認為DIV真正的所在的位置是不變的。所以整個版面沒有變動。移動只是視覺上的移動，真正的位置仍是沒有變動的。

二、DIV是以本身所在位置為計算原點，來進行移動位置的計算，所以被稱之為相對的移動，relative。以DIV本身的top, right, bottom, left來計算。

技法二：position: absolute;

請先看範例，觀察變化。
按這裡來移動DIV。

這是父級DIV。
這是內文的文字。
這是內文的文字。

這是要進行 absolute 移動的DIV

這是子DIV後的文字。
這是子DIV後的文字。

現在來看CSS語法：

<style>

/* 父級的DIV。一定要設定為relative */
.fatherdiv {
position: relative;
}

/* 要以absolute移動的DIV */
.absoludiv {
position: absolute;
top: -20px;
left: 150px;
}

</style>

觀察注意事項：

一、absolute移動DIV後，不但是在視覺上移動了，電腦同時也把原來在版面上所佔的位置取消了。所以會看到，下面的文字擠上來了。

二、absolute移動功能，是雙重結構的。要先有父級的DIV，然後裡面再設置 absolute要移動的DIV。如果沒有設置父級DIV，就會以「整個網頁」當作父級DIV。所以會跑到最上面 click看效果。

三、移動計算的原點是以「父級DIV」的左上角為計算的原點（箭頭處）。

技法三：transform: translate(x, y);

這是CSS較新的語法，可以x, y軸的移動，也可以單獨是x軸或y軸，來移動。

transform: translate(100px, -50px); 按此看效果
transform: translateX(100px); 按此看效果
transform: translateY(-50px); 按此看效果

CSS語法：

<style>
.transmov {
transform: translate(100px, -50px);
}
</style>

DIV後面的文字。後面的文字。

觀察注意事項：

一、translate 相當於 relative，是以本身的左上角為移動的參考點。

二、同樣的，被移動只是視覺上的效果，物件本身所佔的版面位置並沒有變化。所以，移動時，下方的資料並沒有任可變化。

技法四：上下重疊的變化

當二個（或以上）DIV彼此重疊時，要如何來決定那個在最上面，那個在最下面呢？彼此重疊的順序，要如何來決定呢？

如使用z-index後下例的變化。

CSS語法：

.divA {

position: relative;
z-index: 3;
}

.divB {
position: relative;
z-index: 2;
}

說明：
要重疊的DIV排序，都要有二道手序。
（一）是都要有 position 這個指令，才能相互比較。
（二）再使用z-index: 數字；來形成重疊順序。數字愈大，會在上面。
（三）position 的參數值可以是不同的，諸如 static、absolute、relative、fixed。例如一個是relative，而另一個是absolute，也是可以進行比較。

觀察說明：

一、一般而言，在預設的狀況下，應是會面的編輯元件會壓住前面的。

二、如果有幾個編輯元素要來排定重疊順序，我們就可以來使用 position & z-index 的共同使用功能。

三、一般的預設中，其實每個文件中的元件都是被預計為 z-index: 0; 。因此，如果只是單純的要把某一單獨元件拉到最下面，那麼只要同時為某一元件設定： position: relative; z-index: -1; ，就可以快速的拉到最下面。

例如，將照片上移（margin-top: -4em;），後壓前的原理，照片會蓋住文字。於是使用 z-index: -1; 這個技法，照片就會被拉到最後面，文字跑出來了：

.divzindex {
position: relative;
z-index: -1;
}

請按此看 z-index: -1 效果

這是一段文字。這是一段文字。
這是一段文字。這是一段文字。這是一段文字。
這是一段文字。

這是DIV文字。

有關疊層次序的原則：

移動物件寫作技法比較：margin-top: -15px; 和 postition: relative; top: 5px; left: 5px; 的不同

我們以前學過，要讓在版面下方的編輯物件上移，可以使用 margin-top: -15px 這個技法。也就是使用負數的上邊界功能，讓下方版面整個上移，達到編輯目的。按此看效果。

現在，也可以使用 postition: relative; top: 5px; left: 5px; 這一組CSS語法，來自由移動編輯物件。

兩者看起來效果差不多，但電腦對這者的「認知」是完全不同的。

margin-top: -15px; 是讓「版面往上移」，而 postition: relative; top: 5px; left: 5px; 這一組，只是「編輯物件移動」，就電腦而言，版面是沒有變動的。

所以，如果你只是想「移動編輯物件」，但又不想破壞原本就設計好的版面，就應要使用 postition: relative; top: 5px; left: 5px; 這一組CSS語法，才是正解。

請按此看效果。

CSS語法：

<style>
/*移動位置的一組語法*/
.posichange20171213 {
position: relative;
top: -3em; /*這是指以物件的左上角為原點來計算，正負值均可*/
left: 10em; /*em 是指以字母的距離來計算*/
}
</style>

使用Kompozer的 CSS編輯器，操作如圖：

【說明】：

「位置」的地方，請設定「相對位置」，這即是 position: relative;
「位移」的地方，請在「頂端」及「左邊」設定參數值。這即是 top: -10px; left: -20px;

2017年7月20日星期四

完全DIY 快速自製 image gallery

網頁程式寫作

完全DIY

快速隨意的自製出 image gallery

Schneider 老鏡，是我最喜的老鏡頭！
柔和、與世無爭、甜淡、純顏色的一種姿態呈現。
Canon 5D + schneider 50mm f2.8 M42 。click more…▼

123 456 789 101112 範例後的文字

寫作語法範例：

<div style="width: 576px; height: 384px;"
onclick="$(this).myPlugin20170720();" class="idoitimgga20170719">
<img
style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4309/35183964774_76cfb39f64_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4304/35981836736_be0d486a4a_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4323/35183956484_58fc3cd977_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4208/35836631096_60e8ee7fea_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4279/35067718253_93b04e03d6_o.jpg"><br>
</div>

發想概念：

一、請設定出想要大小的DIV。並設定寬、高。
二、DIV的大小，一定要和展現的照片之大小，一致。
三、請在DIV內不斷的加入照片，請隨意的加入數量。
四、請在DIV內套入下列的CSS。
五、請copy寫入下列程式碼。
六、請在DIV內，設定 onclick 功能，如下例。

jquery 程式碼：

/* 如果已有使用下列二條設定jquery環境的程式碼，就可不必使用。 */
/* 請copy 到<head> </head>或<body>之後 */

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

這一範例的jquery 碼：

/* 請copy 到<head> </head>或<body>之後 */

<script>

(function( $ ){

var numberca20170720 = 1;

$.fn.myPlugin20170720 = function() {

// 你的Plugin內容寫在這裡面。

var numgapic = $(this).find('>img').size();
var realnum = numgapic - numberca20170720;

if (realnum != 0) {
$(this).find('>img').eq(realnum).hide('slide', {direction: 'left'}, 600);
numberca20170720 = numberca20170720 + 1;
}
else {
$(this).find('>img').show('slide', {direction: 'right'}, 600);
numberca20170720 = 1;
}

};

})(jQuery);

</script>

設定「按下去的地方」的onclick互動碼：

/* 請設定在DIV裡 */

onclick = ' $(this).myPlugin20170720(); '

CSS語法：

/* 請套入到 div 裡 */

<style>

.idoitimgga20170719 {
position: relative;
border: 1px solid black;
}

.idoitimgga20170719 >img {
position: absolute;
top: 0px;
left: 0px;
}

</style>

教學影音：

2017年7月19日星期三

手工自製的文創式 content slider

手工
自製

文創式
自由思考
完全想像

這才是寫作

Content Slider

by 編輯老師

數位文本。在互動文本建置的思考上，要能是隨心所欲的，才能是一種「寫作狀態」。寫作者不能被技術上的障礙，扞擾了對內容表現上的構思。我們思考的不是技術上的完整性，而是表現上的自由度！

範例一

範例二

★ 範例一：

互動文本結構：
上方的文字列，是用ol/li 技法來形成。
下方是設定div，裡面再分別設置三個內文div。
使用簡單的程式，來讓兩者形成互動的文本呈現關係。

設置分解動作：
一、用ol/li寫作互動導文。
二、為ol/li設置CSS，以形成ol/li的呈現樣態。
三、設置內文DIV。
四、在內文DIV內，再設置要互動的DIV。內容寫在此DIV。
五、為互動導文設置互動功能，onclick=" "。

波妞的意識圖像
說明：來我們家的歷史
在影音中的生活

她是來我們家的驕客。

它是米克思
被收養的日子，忘了。

太太，女兒的決定。
老樣子，
我是賺錢、司機和逗貓的執行者。

它都去梁動物醫院看病。
平常不太愛用「高級品」。
網上購物的紙箱是最受歡迎的「戰利品」。

人與寵物之間的感情，是一種形上學的議題。溝通的方式是不同的，但感情是觸動同溫。

來到我們家的第一天，我們拍起來做紀念！

CSS語法：

<style>

/* ol的設定 */
.olliconsli20170718 {
font-family: Verdana, '微軟正黑體';
font-size: 1.17em;
font-weight: bold;
line-height: 1.8;
padding: 0px;
}

/* li的設定 */
.olliconsli20170718 >li {
display: inline-block;
margin-right: 0.5em;
padding: 0px 0.5em;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
transition: 0.4s;
}

/* ol互動的設定 */
.olliconsli20170718 >li:hover {
background-color: rgba(152, 152, 152, 0.3);
border-radius: 25px;
border: 1px solid red;
cursor: pointer;
}

/* 按下li之後的互動變化 */
.chandiv {
background-color: rgba(152, 152, 152, 0.3);
border-radius: 25px;
border: 1px solid red;
transform: translateY(-5px);
}

/* 內容div的設定 */
#consli20170718 {
border: 1px solid black;
}

/* 內容div之內的div之設定 */
#consli20170718 >div:not(:first-of-type) {
display: none;

}

</style>

jQuery 語法：

/* 啟動 jQuery*/
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

/* 產生ol/li互動效果的 jQuery*/
onclick = " $(this).siblings().removeClass('chandiv').end().addClass('chandiv'); "

/* 產生div互動效果的 jQuery*/
onclick = " $('#consli20170718').find('div').css('display', 'none').eq(0).show('slide', {direction: 'left'}, 800); "

說明：
一、/* 產生div互動效果的 jQuery*/的程式碼中，大紅字 0 是指第一個div，如果是設定的二個div，要改寫成 eq(1) ，依此類推。請參考教學影音。
二、div移動方向可以有四種，left, right, up, down ，請依需要改定。

影音教學：

★ 範例二

這是上一例的變形。
ol/li的寬度縮小，於是就形成長條狀的文字說明。
再移動它，來和Div的內文區重疊，就會形成如下的效果。

觀霧
藍雲
綠影
驕陽

CSS 語法：

<style>

/* ol的設定 */
.olliconsli2017071802 {
font-family: Verdana, '微軟正黑體';
font-size: 1.17em;
font-weight: bold;
line-height: 1.8;
padding: 0px;
}

/* li的設定 */
.olliconsli2017071802 >li {
display: inline-block;
margin-right: 0.5em;
padding: 0px 0.5em;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
background-color: rgba(255, 255, 255, 0.7);
transition: 0.4s;
color: black;
}

/* ol互動的設定 */
.olliconsli2017071802 >li:hover {
background-color: rgba(152, 152, 152, 0.8);
color: white;
border-radius: 25px;
border: 1px solid red;
cursor: pointer;
}

/* 按下li之後的互動變化 */
.chandiv02 {
border-radius: 25px;
border: 1px solid red;
transform: translateX(-10px);
}

/* 內容div的設定 */
#consli2017071802 {
border: 1px solid black;
}

/* 內容div之內的div之設定 */
#consli2017071802 >div:not(:first-of-type) {
display: none;
}

</style>

jQuery 互動語法：

/* 啟動 jQuery；如果下二條已有被使用，就可以省略。一網頁中，只要出現一次就可以*/
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

/* 產生ol/li互動效果的 jQuery*/
onclick = " $(this).siblings().removeClass('chandiv02').end().addClass('chandiv02'); "

/* 產生div互動效果的 jQuery*/
onclick = " $('#consli2017071802').find('div').css('display', 'none').eq(0).show('slide', {direction: 'left'}, 800); "

影音教學：

2017年7月14日星期五

互動跳躍連結中標列表：使用表格法

　回到頁首　

跳躍連結	讀者可以快速找到所要讀的內容

by 編輯老師

互動文本，很容易產生「網路迷航」的狀況。
讀者在和文本互動的過程中，最後就找不到閱讀的方向了。
於是，
讀者就會放棄閱讀。
替讀者思考這一問題，是數位文本寫作者要具備的全新的寫作思考概念。而跳躍連結這一功能，是最基礎的寫作技能。

使用表格：簡單型

使用表格：進階型

使用 ol/li：快速型

使用表格：簡單型

使用表格，來形成中標列表。
表格可以形成規律感，同時可以讓創作者隨意的校調所要的格數，以及呈現效果。

第一區塊

第二區塊

第三區塊

第四區塊

CSS語法：

<style>
/* 表格字型請放置於table裡*/
table#midintin2017071302 {
font-family: Verdana, '微軟正黑體';
font-size: 1.13em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
}

/* 格子的呈現樣態 */
table#midintin2017071302 td{
border-left: 1px solid black;
border-right: 1px solid black;
transition: 0.4s;
text-align: center;
}

/* 格子的互動效果 */
table#midintin2017071302 td:hover{
background-color: rgba(132, 132, 132, 0.3);
border-radius: 25px;
cursor: pointer;
}

</style>

寫作注意事項：
一、使用「錨點」功能，來設定所要到達的定位點。
二、使用「連結」功能，來設置所要按下去的標題。

教學影音：

使用表格：進階型

進階型，除了使用CSS來形成變化外，更加上了jQuery的程式使用。
這樣，就可以產生更具變化感受的互動效果。
事實上，不斷思考「互動」的呈現效果，所可能帶來在對文本理解上，產生「更多意義」的理解感受，是數位文本重要的意義給出特色。

第一區塊標題

第二區塊標題

第三區塊標題

jQuery程式碼：

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

範例 CSS 語法：

<style>

/* 表格字型請放置於table裡*/
table#midintin20170714 {
font-family: Verdana, '微軟正黑體';
font-size: 1.15em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
}

table#midintin20170714 td{
border-bottom: 1px solid black;
border-right: 1px solid black;
transition: 0.4s;
}

table#midintin20170714 td:hover{
background-color: rgba(132, 132, 132, 0.2);

transform: translateY(-5px);
cursor: pointer;
}

/* 按下去後互動結果的參數*/
.tdbacoin20170714 {
background-color: rgba(132, 132, 132, 0.2);
transform: translateY(-5px);
box-shadow: 1px 1px 1px 1px silver;
}

<style>

本範互動jqyery程式碼：

<script>
$(function() {
$( "table#midintin20170714" ).find("td").click(function() {

$(this).parent().find("td").removeClass("tdbacoin20170714").end().end().addClass("tdbacoin20170714");
});
});
</script>

停止定位錨點語法：

<a name="ap0713b"></a><br>

跳躍連結「按下去處」語法：
/* 請設定在TD裡面*/

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

影音教學：

使用 ol/li：快速型

請參考教學網頁一。可以互動的跳躍連結中標列表

請參考教學網頁二。浮動的導覽列：〈回到頁首〉

以下是跳躍連結的使用範例

1
2
3
4

第一區塊的中標區

第二區塊的中標區

1
2
3

第三區塊的中標區

使用範例 end!!

訂閱：文章 (Atom)

2017年7月22日 星期六

自由移動 DIV：relative, absolute, translate, z-index。完全理解！

2017年7月20日 星期四

完全DIY 快速自製 image gallery

2017年7月19日 星期三

手工自製的文 創式 content slider

2017年7月14日 星期五

互動跳躍連結中標列表：使用表格法

2017年7月22日星期六

2017年7月20日星期四

2017年7月19日星期三

手工自製的文創式 content slider

2017年7月14日星期五