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

2015年5月15日 星期五

圖文互搭基礎技巧:插入背景圖



圖文互搭的寫作基礎技巧:插入背景圖

一、排版寫作;二、分層文本;三、圖文互搭。這三個數位文本面向,是撐起數位文本的媒材布局所常見的手 法,即技巧。
插入背影圖後,可以再DIV或Table裡面,在圖的上面,繼續 編輯/寫作。

技巧,不是單純的工具性的技巧,而是對文本結構,對意義呈現模式的一種寫作的安排。
因此,技巧是「方法」,也是讓意義「客觀化」展現自己的一種「中介」手段;這是套用我對黑格爾的解理。



DIV插入一張背影圖(←click) // 復原
可以繼續在 DIV裡面編輯/寫作(←click) // 復原


我們可以在背景圖的上面,
繼續我們的編輯/寫作的動作。
這使得文字可以互搭於圖片,
形成強烈的圖文互文性的意義呈現。
背景圖的 CSS 語法,請放在<body>之後:
<style>
.backimag0515 {
background-image: url(照片網址);
background-repeat: no-repeat;
background-size: 520px 390px;
}
</style>
***
選項語法:
background-position: left 5px top 3px;

注意:left/center/right; top/center/bottom; 三選一。紅字為距離,可省略。
***




DIV插入二張背景圖(←click) // 第一張 // 第二張 //
復原


多張背景圖的 CSS 語法,請放在<body>之後:
<style>
.backimag051502 {
background-image: url(第一張照片網址), url(第二張照片網址);
background-repeat: no-repeat, no-repeat;
background-size: 250px 188px, 250px 188px;
background-position: left top, right bottom;
}
</style>



教學影音:




插入背景圖的 更多寫作技能:

一、背景圖的妙用
二、DIV + CSS 隨心所欲搞定網路排版寫作(二): 放入背景圖
三、5秒搞定動態圖檔 Gif 檔! 【←Gif檔直接拿來做動態背景圖】
四、用背景圖拼貼圖像 plus 文字安排的大、中、小
五、把影音貼到照片上面去



2015年5月9日 星期六

DIV空間位置布局:靠左、置中、靠右、上移、下移、重疊順序



margin
DIV(block區塊)與四邊的距離關係
輕鬆控制DIV:靠左置中靠右上移下移

媒材與媒材之間的空間位置關係,是數位文本寫作的新的文本布局思考方向;就寫作技巧這面向而言,作者再區分出(一)排版寫作與(二)分層文本,這二種寫作的基本技能項目。這二項技能,都是用來處理「空間位置」關係的數位寫作手法。這可以使得數位文本作者有效的「掌握」對數位文本的寫作思考。

排版寫作除了之前教的,用表格的功能來完成外,
使用DIV來完成,是另一種方法。而且,可能是更重要的方法。因 為如果要使用互動寫作,對DIV的互動控制,是更容易的
強烈建議一定要能掌握這種使用DIV的各種寫作手法。
在這裡,我們要來學會對DIV本身移動的寫作手法,亦即對DIV空間位置關係的操作掌握!









    Div  !! 



DIV #2



Div 靠左、靠中、靠右的 CSS:

靠左: margin-left: 0px; 【這是預設值,可不寫;也可以設定靠左的距離,紅字部分】
靠中: margin-left: auto; margin-right: auto; 【要寫這二個才有用】
靠右: margin-left: atuo; margin-right: 0px; 【要寫二個,可以設定靠右的距離,紅字部分】
往上移: margin-top: -120px; 【設定往上移的距離,(負數)紅字部分】
往下移: margin-top: 5px; 【可以設定往下的距離,紅字部分】


另一種class用的 CSS:

<style>
.marleft {
margin-left: 5px;
}

.marcenter {
margin-left: auto;
margin-right: auto;
}

.marright {
margin-left:auto;
margin-right:0px;
}

</style>


教學影音:


補充說明:
事實上,只要是區塊型的元件(block-level elements)都適用上述的CSS操作手法。
常見的區塊型元件有:audio, div, form, h1~h6, ol, p, table, ul, video 等。
另,常見的 inline-block元件有:iframe, img, object。



版面上移後的重疊順序調整

使用 margin-top: -xxpx; 來位移版面後,會出現一個常見的、要去調整的問題。那就是重疊的版面,要如何去調整其重疊的順序?


請看範例:







說明:

我們把下面的DIV內的圖像,使用 margin-top: -200px; 功能上移。一般而言,媒材會有「後壓前」的規則。所以,花壓在海景的上面。

但,如果你想更動重疊的順序呢?請按此看變化


兩個DIV(媒材)可以同時加上下列語法的class

<style>

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

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

</style>

這樣,重疊的順序就會產生變化。

注意,positon: relative; z-index: x; 這一組(兩個)都要使用,才能有效果。再來,z- index 後面的數字,數字大的,就會在壓在上面。一般 狀況下的預設值為 0 。


更動後的範例HTML語 法:

<div  class="positionbefore"><img style="width: 420px; height: 280px;"
src="圖像網址"><br>
</div>
<br>
<div style="text-align: right; margin-top: -200px;class="positionafter"><img
style="width: 320px; height: 213px;"
src="圖像網址"><br>
</div>



★特別注意事項:視覺的 V.S. 空間的(作用的)

一、如果DIV寬度的設定值,超過了可編輯空間的寬度。那麼,最後就只會是「靠左」這個預設值可起作用。

例如,本編輯區的寬度為578px。

語法:

<div style="width: 620px; border: 1px solid red;">
這是範例DIV。
</div>

呈現:

這是範例DIV。



二、如果DIV內又設定DIV。內部DIV的寬、高又大於外部的DIV。那麼,(預設值中)內部DIV就會「破繭而出」,在視覺中超出於外部DIV。但是 對電腦而言,真正的「實際使用空間」,仍是外部的。請參考詳細教案

語法:

<div style="width: 200px; height: 200px; border: 1px solid red;">
<div style="width: 300px; height: 300px; border: 1px solid blue;">

</div>
</div>
這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。<br>

呈現:


這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。






使用DIV相 關技巧:

DIV + CSS 隨心所欲搞定網路排版寫作

超快速任意移動物件:position: relative

在div內任意移動編輯物件: position: absolute

隨心所欲移動編輯物件



2015年5月2日 星期六

圖文的互動:hover:純CSS



圖配文的敘事性互動。

當滑鼠移到圖時,說明性的文字就跑出來。
這是常見的互動手法之一,這個範例是用純CSS的語法來達成。
可以注意的是:文、圖中間的透明度是可以 再被「作者」考量的特色之一。
不同的透明度,會影響 受眾對圖文之間的「交互性理解」。這樣的注意事項,是數位文本寫作時所特有的。
作者將這種互動寫作的思維面向,稱之為「互動文本寫作技法」。






這是秋天

風的影子,也會一絲絲的感受到。
陽光成為一種渴望的想像,配上可能的啤酒。



CSS語法, 請置於<body>之後:            

<style>

.word0502 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: normal;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
}

.backimg {
background: url(https://lh4.googleusercontent.com/-GQrnWebGPFM/VSJTjv6ykdI/AAAAAAAAbHM/6BcmFsFmYJg/w1079-h720-no/IMG_4869.JPG);
background-size: 520px 347px;
}

.colortr {
color: transparent;
}

.colortr:hover {
color: white;
background: linear-gradient(0deg, rgba(60,60,60,0.75), rgba(60,60,60,0.75)), url(https://lh4.googleusercontent.com/-GQrnWebGPFM/VSJTjv6ykdI/AAAAAAAAbHM/6BcmFsFmYJg/w1079-h720-no/IMG_4869.JPG);
background-size: 520px 347px;
}
</style>



影音教學:             


說明:
一、紅色字體處,是透明層的顏色。【我要看色碼表click
二、綠色字體處,是透明度。1 是完全不透明。