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

2014年4月29日 星期二

快速移動圖片的排版+互動功能







如果數位文本的寫作,
是一種需要想像力的創作過程;
那麼,
在空間的強烈位移和變動,
是激發想像力的一種形式。
想像力,不是和一般知性式知識對立的認知形式,
相反的是一種綜合,
根據美學理論而言。



透過CSS語法的安排
我們可以隨心所欲的把圖像置放到版面任何地方
尤其是置放去背圖像
可以強烈的將訴求主題凸顯出來創造文本意圖
當然有時這種圖像移動有時難免會把寫好的文本蓋住
沒關係
可以利用互動語法
click一下可以暫時讓圖像消失讀者便可觀看完整文本
我們可以調整多少時間後圖像可以再度出現


一、請在欲編輯地方寫人文稿並於文稿下置入圖片:


1.很簡單的寫作編輯動作,請看影音教學。
2.裡面還有一些非常有用的小技巧。
3.圖片請一定要記得設 id 。

二、請在<head>xxx</head>之間 或<body>之後置入CSS來移動圖片:

<style>
#pic20140428 {
position: relative;
top: -280px;
left: -10px;
margin-bottom: -280px;
}
</style>

三、請在<head>xxx</head>之間 或<body>之後置入互動程式碼:

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

<script>
$(function() {
$("#pic20140428").click(function() {
$(this).animate({opacity: "0.1"}, 200).delay(6000).animate({opacity: "1"}, 200);
});
});
</script>

四、注意事項:
  1. 紅色字的部分請一定要和照片,即<img id="xxx"  >,的相同。這樣才能控制圖片啊!
  2. 圖像消失後要多少以後才再出現,是第 3 部分的藍色字部分,即 delay(6000) ,以千分之一秒為單位,6000即是6秒後再出現。



2014年4月19日 星期六

壓在圖上的文字:互動式



click X
阿多諾的《美學》:人和自然的關係在美的形式上應是:模仿。 模仿:是主體對客體的全力投入。 在學攝影中,我對這話句才有了一點一滴的體會… …


一、影音教學:



二、在欲編輯處寫入下列HTML碼:

<table id="ta2014041901" style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><img style="width: 628px; height: 419px;" alt="" src="https://lh4.googleusercontent.com/-3rSSSH3JnXg/UPv34gKahAI/AAAAAAAAHhY/NVjzqEijOqM/s763/IMG_1893.JPG"><br>
      <div style="width: 232px; height: 168px;">click X<br>
阿多諾的《美學》:人和自然的關係在美的形式上應是:模仿。
模仿:是主體對客體的全力投入。
在學攝影中,我對這話句才有了一點一滴的體會… …<br>
      </div>
      </td>
    </tr>
  </tbody>
</table>


三、請於<head>xxx</head>之 間或<body>之後置入CSS:

<style>
#ta2014041901 >tbody >tr >td {
position: relative;
}
#ta2014041901 >tbody >tr >td >div {
padding: 0.5em;
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: normal;
line-height: 1.4em;
text-align: left;
letter-spacing: 0.1em;
background: rgba(253,255, 255, 0.7);
position: absolute;
top: 3.5em; left: 2em;
cursor: pointer;
}
#ta2014041901 >tbody >tr >td >div:first-line {
text-decoration:underline; padding-bottom: 1em;
}
</style>


四、請於<head>xxx</head>之 間或<body>之後置入Jquery程式碼:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#ta2014041901 >tbody >tr >td >div").click(function() {
$(this).css({"display": "none"});
});
$("#ta2014041901 >tbody >tr >td >img").click(function() {
$("#ta2014041901 >tbody >tr >td >div:hidden").fadeToggle(600);
});
});
</script>


注意事項:
  1. jquery-1.9.1.js這條程式碼(紅色部分),如因其他互動功能而已被使用,就不用再出現了。一篇文章中,只要出現一次即可,請保留 最早出現的那條。
  2. 整個模組只能使用一個互動功能,如要再使用第二次,請再從第二項重新做起,並更改全部的id。請看教學影音的說明。



2014年4月11日 星期五

讓圖片有更豐富的想像力



創造豐富想像力的 image effect 效果!
Picture 1
Picture 2
Picture 3
Picture 4
Picture 5
Picture 6





1 請於< head>xxx<head>之間或<body>之後寫入下列程式碼:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
$('#lmccontainer img').hover(
function(){
var $this = $(this);
$this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
},
function(){
var $this = $(this);
$this.stop().animate({'opacity':'0.6','height':'500px','top':'-66.5px','left':'-150px'});
}
);
});
</script>
2 請於於<head>xxx< head> 之間或<body>之後寫入下列CSS語法:
<style>
.lmccontainer{
width:600px;
height:400px;
margin:100px auto 0px auto;
border:10px solid #333;
-moz-box-shadow:1px 1px 12px #000;
-webkit-box-shadow:1px 1px 12px #000;
box-shadow:1px 1px 12px #000;
}
.lmcwrap{
width:200px;
height:200px;
margin:0px;
overflow:hidden;
position:relative;
float:left;
}
.lmcwrap a img {
border:none;
position:absolute;
top:-66.5px;
left:-150px;
height:500px;
opacity: 0.6;
-moz-opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
</style>
3 請於欲編輯區域寫入下列 HTML :
<div id="lmccontainer" class="lmccontainer">
<div class="lmcwrap"> <img
src="第一張圖像網址"
alt="Picture 1"> </div>
<div class="lmcwrap"> <img
src="第二張圖像網址"
alt="Picture 2"> </div>
<div class="lmcwrap"> <img
src="第三張圖像網址"
alt="Picture 3"> </div>
<div class="lmcwrap"> <img
src="第四張圖像網址"
alt="Picture 4"> </div>
<div class="lmcwrap"> <img
src="第五張圖像網址"
alt="Picture 5"> </div>
<div class="lmcwrap"> <img
src="第六張圖像網址"
alt="Picture 6"> </div>
</div>

說明:
1.圖像的大小請先剪裁為600x600的正方形。

資料來源:PHOTO ZOOM OUT EFFECT WITH JQUERY


2014年4月9日 星期三

table + div + click互動的整合性排版寫作

使用 KompoZer:
table + div + click互動的整合性排版寫作(一&二)


影音教學內容:
  1. 固定表格欄寬 style="table-layout: fixed;"。
  2. 若要做出跨越列高的編輯區塊,請先設一個div,再於div裡面插入表格,如此這個表格就可以隨意拉高。


教學影音內容:
  1. 將 play icon 往上移動的語法:style="position: relative; top: -250px; left: 10px;"。詳細教學網頁
  2. 要消除play icon所留下的空白:style="margin-bottom: -110px;"。詳細教學網頁
  3. click跳出影音的教學內容,按此



2014年4月7日 星期一

表格內插入表格的排版寫作

表格中插入表格: 塊狀版型寫作實戰





影音教學說明
  1. 在表格內插入表格的操作方法。
  2. 要記得固定表格寬度,才不會亂掉。
  3. 「加入選中的儲存格」的功能,一個表格最好只使用一次。