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

2013年8月18日 星期日

想要表現的影音/圖像,按一下文字就跑出來



Attention & Click ↓
影音、圖像,隨按隨出
除非是某些特定的影片,例如院線電影、熱門電影等等。網路上的影音往往不宜太長,以我個人上課的要求,60秒是最後的底線。
因之把長影音打散成數支短影音,或是甘脆直接拍成很多支短影音,再讓讀者自行去選擇要看那一支,是重要的網路影音排版原則。
那麼,按一下某文字就在特定編輯區域跑出影音、圖像,就是重要的多媒體互動寫作技能。


範例 1:按字就可以換影音
愈來愈多的場合,透過各式螢幕的展現,多媒材並置的數位文本呈現形式已成主流。隨便逛逛,都可在各種場合看到這種新文本形式:
馬告國家公園內的螢幕閱讀形式【video ↓】
國家音樂廳內的螢幕閱讀形式【video ↓】
桃 園機場內的螢幕閱讀形式【video ↓】



語法

jquery程式,請放在<head>xxx</head>之間或<body>之後:
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

要按下去互動的文字部分:
$('#a001').attr( 'src', '影片網址');

影音部分:
<iframe width="560" height="315" src="https://www.youtube.com/embed/bGo1qGATfn4?rel=0" frameborder="0" allowfullscreen></iframe>

一、請記得為影音設上id。本例為 a001 ,「#」字號不用寫入哦。
二、紅色字部分是影音的網址,請在youtube 分享/嵌入內找到。


範例 2:按字就可以換照片內容

馬告國家公園【gallery ↗】
人們最耳熟的大概是棲蘭【^】及明池【^】。但,馬告的美就不僅是只於此而已,森林中的光影,沈穩的綠意,樹本的線條,花朵的顏色……。這些都讓人的思緒銳利於對大自然的驚奇。
驚奇是重要的!這讓人對活生生的日子才能有活生生的感動。感動是人趨向於藝術的最大動力。



語法

jquery程式,請放在<head>xxx</head>之間或<body>之後:
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

互動文字部分語法:
$('#b002').attr( 'src', '照片網址');

像片語法:
<img src="https://lh6.googleusercontent.com/-saPz8nE5QKs/UgeJUl8KJ0I/AAAAAAAAN08/a8eY5aqbW0o/w1159-h773-no/IMG_9305.JPG" style="width: 540px;" />




jQuery UI 進階:照片表現出互動變化樣態


呈現範例:<img id="b003" xxx>,按我復原




請在< head>xxx</head>間寫入下列程式碼:

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


在「互動文字部分語法」 這地方,增加程式選項,如下紅字:

$('#b003').attr( 'src', '照片網址').effect('fade', {easing: 'linear'}, 600);

互動時,照片就會以 fade 的形式來呈現互動。請按這裡看變化
如果想看文字部分的語法,請 按此看語法
<span onclick="$('#b003').attr( 'src', '照片網址').effect('fade', {easing: 'linear'}, 600);" style="text-decoration: underline; font-style: italic;">請按這裡看變化</span>


也可以再改寫成bounce 這種互動樣態,語法如下:

$('#b003').attr( 'src', '照片網址').effect('bounce', {distance: 10, easing: 'linear'}, 600);

互動時,照片就會以 bounce 的形式來呈現互動。請按這裡看變化



2013年8月5日 星期一

DIV + CSS 隨心所欲搞定網路排版寫作(二): 放入背景圖


有創意的圖文關係
插入背景圖後,
我們就可以在圖上再進行編輯動作,
形成各式各樣的圖文搭配關係。


CSS參考網站(1)】。【CSS參考網站(2)

1. 在Div內插入背景圖

☆ 為什麼特別在Div內插入「背景圖」,而不直接在網頁上插入圖片就好了呢?
#這是因為在「背景圖」上,可以寫作、編輯或放上其他媒材。【詳細影音教學↗】

語法【㊉↓】:
<div style="text-align: center; width: 540px; height: 360px; border: 1px solid darkred; background-image: url(https://lh3.googleusercontent.com/-M_NSsSbbmCg/Uf-K9-0j6vI/AAAAAAAANso/vxrJ95EHKR4/w540-h360-no/photo.jpg);  "><br><br><br><br><br><br><br> <br><br><br><br>DIV 中插入背景圖。<br></div>

範例呈現:












DIV中插入背景圖。

說明:
1. background-image: url(xxx);,是插入背景圖的語法。xxx 是圖像的位置網址,例如上例圖的位置網址是  https://lh3.googleusercontent.com/-M_NSsSbbmCg/Uf-K9-0j6vI/AAAAAAAANso/vxrJ95EHKR4/w540 -h360-no/photo.jpg。  背景圖例二背 景圖例三

2. 插 入背景圖的Div,仍是一個可以在裡面進行數位寫作的空白區域。可以寫 入文字、編輯文字【影音教學↗】插 入圖片以及置 入video【影音教學↗】等等。【click ↑】換言之,可對這一Div進行任何 寫作的動作。













DIV中插入背景圖。

我們可以在Div裡面進行文字寫作、編輯的動作。
































DIV中插入背景圖。


2. 背景圖的大小及重覆

在 最新的瀏覽器中支援了背景圖可以調整的語法(css3)。同時,一旦背景圖小於指定區域(Div)內的大小,預設值是會不斷重覆,我們可以來決定不要重覆

語法【㊉↓】:
<div id="a2013080601" style="border: 1px solid darkorange; text-align: center; width: 540px; height: 360px; background-image: url(https://lh5.googleusercontent.com/-lKJq0KTVQ9Q/Ubpjkh6RjxI/AAAAAAAAK2I/KBYaay54uEU/w1160-h774-no/IMG_7212.JPG); background-size: 540px 360px; color: red;"><br><br><br><br>調整背景圖的大小。<br>決定背景圖是否要重覆。<br></div>

範例呈現:





調整背景圖的大小。
決定背景圖是否要重覆。

說明:
1. background-size: xxxpx yyypx; ,xxxpx是指圖的寬為多少px,yyypx是指圖的高為多小px。例如上例為 background-size: 540px 360px; 。也可以只單獨調整寬度,高度則會被自動調整,例如 background-size: 540px; 。這一語法是css3的最新語法,舊一點的瀏覽器不支援,同時我們常用的網頁編輯器Kompozer也不支援。這種狀況下,我們就要事先把圖的小大做好。【詳細語法說明↗】

2. 一旦圖小於預定的編輯區域,預設值是圖會不斷重覆來填滿編輯區域。這時就可以用 background-repeat: no-repeat; 來設定為不重覆。當然,如果想重覆可以設為 background-repeat: repeat; 。同時也可以設定為沿著x軸重覆,及沿著y軸來重覆。語法為 background-repeat: repeat-x; 以及 background-repeat: repeat-y; 。


3. 插入背景圖快速上手操作





這個DIV裡有插入背景圖,
所以可以在上面再做編輯動作。

影音教學:



<style>
.backimage101701 {
background-image: url(網片網址);
background-repeat: no-repeat;
background-size: 480px;
}
</style>



第一次使用:

  1. 網頁寫作/編輯軟體Kompozer:第一次使用就上手
  2. 小世界網路組:kompozer寫作的四個基本動作

搞定文字:

  1. →教學網頁。
  2. 字體、大小、粗細、顏色、複製、貼上、靠左…等各種文字處理技能。

處理圖像:

  1. 教學網站。
  2. 貼上、剪下、縮放、連結、文繞圖、框線、背景色…等等。

表格排版:


影音 & 動畫flash:


基本互動:


插入背色/景圖:常用 CSS3 語法

  1. background-color: gray; 背景色。
  2. background-color: rgba(255, 255, 255, 0.7); 半透明背景色。
  3. background-image: url(圖像網址); 插入背景圖。//none; 不要顯示。//url(第一張網址), url(第二張網址); 重疊多張背景圖〔第二張在下,亦可多張〕。〔背景可和背景圖一起使用,背景色將在下〕。
  4. background-repeat: no-repeat; 沒有重覆。//repeat-x; 沿x軸重覆。//repeat-y; 沿著y軸重覆。〔若設置二張背景圖,則//no-repeat, repeat-x;〕。
  5. background-position: left top; 〔left/ center/ right | top/ center/ bottom; 三選一〕顯示位置。多張圖〔第一張顯示位置, 第二張顯示位置;〕。//60px 30px; 預計值為left top。//25% 50%; 預設值為left top。//right 60px bottom 30px; 距右邊60px 底部30px。
  6. background-attachment: fixed; 固定背景影像。
  7. background-clip: border-box; 〔border-box/ padding-box/ content-box; 三選一〕顯示區域。
  8. background-origin: padding-box|border-box|content-box;起始區域。
  9. *特*  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 有紋理的字(chrome)。
  10. background-size: 640px 480px; 背影圖寬度高度。//percentage //cover //contain


插入背景圖運用:紋理字

這是有紋理的字



<style>

/* 大標紋理字設定 */
.divbigtex20170710 {
font-family: Verdana, '微軟正黑體';
font-size: 5.13em;
text-align: center;
font-weight: bold;
line-height: 2em;
background-image: url(圖像網址);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

</style>



表格與背景圖運作練習:(mouseover ↓)

   


構思說明:

一、表格的高度要和設成背景圖高度一樣。
二、上面的那一格的高度要設成,60  %的表格(此例)。
三、再對文字進行位置的設定。


寫作材料:照片





DIV與背景圖運用練習: