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

2017年7月22日 星期六

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






自由移動!
block-level elements ;區塊層級物件

DIV
by 編輯老師

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



  1. relative:相對法
  2. absolute:絕對法
  3. translate:轉移法
  4. 上下重疊

影音教學:






 

技 法一: 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後下例的變化。

A

B

CSS語法:

.divA {

position: relative;
z-index: 3;
}

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

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







觀察說明:

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

A

B

二、如果有幾個編輯元素要來排定重疊順序,我們就可以來使用 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編輯器,操作如圖:



【說明】:
  1. 「位置」的地方,請設定「相對位置」,這即是 position: relative;
  2. 「位 移」的地方,請在「頂端」及「左邊」設定參數值。這即是 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
手工
自製
文創式
自由思考
完全想像

這才是寫作
Content Slider
by 編輯老師



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




範例一
範例二





 
★ 範 例一:

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

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


  1. 波 妞的意識圖像
  2. 說 明:來我們家的歷史
  3. 在 影音中的生活



她是來我們家的驕客。



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

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








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

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





來到我們家的第一天,我們拍起來做紀念!




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的內文區重疊,就會形成如下的效果。



1


2


3


4



  1. 觀 霧
  2. 藍 雲
  3. 綠 影
  4. 驕 陽



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!!