數位時代的寫作，是一種新形態的文本表達模式！
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作：HTML&CSS
新聞影音剪輯：premiere
匯流寫作基模知識：gravit
基礎影音編輯：shotcut
基礎向量圖像編輯：inkscape
基礎圖像編輯：GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯（上課用）
新聞直播編導／OBS（上課用）
基礎新聞攝影（上課用）
數位排版/敘事（上課用）
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論／研究

2014年10月29日 星期三

漂亮彈跳地出現文字說明框：easy JQuery




kdsa fda fdjfda fl fdf jdsaf
lkdafldjf ldja lfjdlajfldj afl;d lf dla fda fldsaf
dlksf ldjfldj lfjdlfj dlj fldj lfj dlf jdj fdj f
dslakf dsf ldfldjfljd lf dlj fdj fl dlf d fdl fdaf
lkd fldjfldlfj dfj dls

 左
邊
是
要
實
驗
的
東
東
！



一、教學影音：

二、請在<body>之後插入下列 CSS ：
<style>

.tabdiv1029 {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBRTNI7u4ndv84DLzUc3vNThBk8hP42se-0WTIDcvc8fWMW1RluQ5UF9NAiYkjcpWGcHusHjC47bQgwS5T_IFfBpzDCkwY1SDPnvVDWRrdWp1ANSo0fp9KopLRLb6nY-SGDV3la2Nbh8/w48-h42-no/mouse-2_318-11618.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXuypCTBLgUE8Uzgtmk5CBLe_qmT2J5nNApg1Dv6kVuYc4DApKLm3EnCbRyKArw2UX-kq147j3aYL1LzVI_6lYKxAA5Znd0aaN-SVWpTm8RAUwZPuubjTFLcnjOOm9afMmfynaufD8AI4/w1285-h857-no/IMG_1076.JPG);
background-repeat: no-repeat, no-repeat;
background-size: 48px 42px, 480px 320px;
background-position: right 3px bottom 3px, left top;
}

.tabword1029 {
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
padding: 0em 0.3em 0em 0.3em;
width: 75%;
margin: auto;
color: white;
background-color: rgba(60, 60, 60, 0.7);
}
.disheight01 {
overflow: hidden;
height: 0px;
}

.disheight02 {
height: auto;
}
</style>
三、請在<body>之後插入下列  jQuery 程式碼：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
<script>
$(function() {
$( ".tabdiv1029" ).hover(function() {
$( this ).find(">div").addClass("disheight02", 400, "easeOutBounce");
} ,
function() {
$( this ).find(">div").removeClass("disheight02", 200, "easeOutBounce" );
});
});
</script>

注意事項：
如因其他互動模式而使用了 1.9.1以及1.9.2那幾條程式，即紅色字體者，就 可以不用再使用。一篇文章原則上有一次即可。



0 讓我聽聽您的想法：

2014年10月26日 星期日

超快速的 image hover





黃色的燈光

配上的是一種柔和，和一種
黃色的布感。
用的是老鏡，那種跟我幾乎同樣年紀
的老鏡。
一種氛圍，
只有老鏡才能出來。


滑鼠移入，
圖片就會快速地
跑下又跑上。
讓出來的空隙，
就是要說明的文字文本。
可以調整方向、速度，
字的各種字體表現，
都可以用CSS來調校。

超快速的 image hover！！




一、影音教學：


二、複製並貼入下列 CSS 碼於<body>之後：
<style>

.diva1024 {
position: relative;
}

.titlemid1024 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
padding: 0.5em;
width: 75%;
margin: auto;
letter-spacing: 0.1em;
}

.word1024 {
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
padding: 0.3em;
width: 75%;
margin: auto;
letter-spacing: 0.1em;
border-bottom: 1px solid darkred;
}

.img1024 {
position: absolute; left: 0px; top: 0px;
}

</style>
三、請複製並貼入下列 jQuery 程式碼於 <body>之後：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">

<script>
$(function() {
$( ".diva1024" ).hover(function() {
  $( this ).find(">img").hide("slide", { direction: "down" }, 200);
    } ,
    function() {
    $( this ).find(">img").show("slide", { direction: "up" }, 200 );
});
});
</script>

說明：
  1. 土黃色字體處，請填入一開始 做出來 div  的 calss 。
  2. 紅色字體處，是圖片隱藏和出現的方 向，可以使用down, up, left, right。
  3. 藍色字體處，是圖片進行的速 度。一秒是1000。
  4. 這個互動功能，可以用同一個class，不斷的重覆使用。



0 讓我聽聽您的想法：

2014年10月17日 星期五

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




超快速
移動編輯物件到任 意的編輯地方




  使用 CSS  position: relative


基礎概念講解：click for video!!


教學影音：


注意事項：
各項參數所在位置



補充資訊：

★ 2013年6月的教學版本，較詳細但複雜一點。按此◥

★ 要旋轉圖的語法：請把class   rotate1017   加入即可。-3deg是角度。

<style>
.rotate1017 {
-webkit-transform: rotate(-3deg);
}
</style>

★ 滑鼠移到就變淡的語法：請把那張圖的id設好，此例為 id="a01"
<style>
#a01:hover {
opacity: 0.2;
}
</style>
補充資訊：教學影音：CSS hover


0 讓我聽聽您的想法：

2014年10月15日 星期三

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


基礎概念講解：click for video!!

平面作品參考範例：


數位作品實作示範：





石碇之水

那年的冬季，水清的是一種無法想像。看著天空的顏色在轉化。


藍的與白的，是一種交相印。



教學video:




範例使用 CSS：

<style>
/*主DIV*/
.maindiv01 {
position: relative;
border: 0px solid orange;
}

/*標題大字*/
.divwordbig {
font-family: Verdana, '微軟正黑體';
font-size: 3.4em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
color: green;
text-shadow: 2px 2px 2px black;
}

/*中間內文*/
.divwordsmall {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
background-color: whitesmoke;
width: 70%;
}

/*下面內文*/
.divwordsmall02 {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
background-color: lightgreen;
position: absolute;
top: 290px;
left: 185px;
}

/*第一張照片*/
.popic01 {
position: absolute;
left: 240px;
top: -10px;
}

/*第二張照片*/
.popic02 {
position: absolute;
left: 260px;
top: 155px;
padding: 3px;
background-color: whitesmoke;
-webkit-transform: rotate(-5deg);
-webkit-box-shadow: 2px 2px 2px 2px silver;
}

/*主div背景圖*/
.bacimg {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXuypCTBLgUE8Uzgtmk5CBLe_qmT2J5nNApg1Dv6kVuYc4DApKLm3EnCbRyKArw2UX-kq147j3aYL1LzVI_6lYKxAA5Znd0aaN-SVWpTm8RAUwZPuubjTFLcnjOOm9afMmfynaufD8AI4/w684-h456-no/IMG_1076.JPG);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 455px;
}
</style>



範例補充用 互動CSS：

.popic01:hover {
border: 1px solid transparent;
padding: 3px;
background-color: whitesmoke;
-webkit-box-shadow: 1px 1px 1px 2px silver;
}



0 讓我聽聽您的想法：

2014年10月10日 星期五

互動的照片效果：時間前後的比較



數位新聞寫作利器
比較前、比較後
這個互動模組，是數位新聞的呈現得以有效的超越傳統新聞寫作，很好的一個示範範例 作用。








一、影音教學：


寫作發想：
  1. 要比較時間前後的情況變化時使用。
  2. 請使用範例的互動模組 。
  3. 兩張照片的大小及比例要一致才好看。
  4. 最後一定要記得設定語法中照片的長度和寬度。
二、請把下列 程式碼 複製到<head>xxx</head>之間（建議）或<body>之後：

<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/src/jquery.imageReveal.css">

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

<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/src/jquery.imageReveal.js"></script>

<script>
$(window).load(function() {
$('#Cademo').imageReveal({
barWidth: 15,
touchBarWidth: 40,
paddingLeft: 0,
paddingRight: 0,
startPosition: 0.25,
showCaption: true,
captionChange: 0.5,
width: 576,
height: 384
});
});
</script>

注意事項：
  1. jquery-1.12.4.js 那條程式（橘色字體者）， 如已使用了，可以不要再寫入。一篇互動文本，寫入一條即可。最早出現的那條保留即可。
  2. 請記得要設定圖像的長度和寬度，即width & height，暗紅色字體者。
三、請把下列 HTML 語法複製到欲呈現之編輯處：

<div id="Cademo" class="imageReveal">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ufjKovvaSi-gEMwwjRVuuul8AAcgBd62NDvO3M83IzZC6_N8qmC-ozlu4zstV90sSaODZwX-mDMsEsYR0KaooNaTpE3ylFjTYVwbsDcChczTvRriGk05YZRY3nuwBd0eqD6NdL49_3M/w1061-h708-no/IMG_096001.jpg" title="Before">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQIlWxosF6FdiVhN4XzPe0SVXhzWmpY8ilawY3CA8161l1qwfh3zFCG3y5YTLVLGwb9k3MoiPQfIBl7OiNl8JeYx9mKff1Dx_eFiARnsrTuDcWv-2zdhx8ewUPfNIlWmmdCLkUsakuhKc/w1220-h814-no/IMG_0960.JPG" title="After">
</div>

注意事項：
  1. 把照片網址填入src="xxx" 中。即暗紅色字體處。依前、後的時間序填入。


原始語法出處：Image Reveal


0 讓我聽聽您的想法：

2014年10月6日 星期一

移動滑鼠，編輯元素產生變化：jquery addclass / removeclass



請把滑鼠移到這裡來，下面 區塊會加框線。



這裡是文本寫作的區塊，可以透過互動強調作者想表達的想法。

當滑鼠移到這個區塊時，（一）這個區塊的文字會變 顏色，（二）同時背景圖也會換掉。




一、影音教學：




寫作發想：
  1. 請先寫入編輯元素。
  2. 為每個編輯元素設定 class 以及 id 。
  3. class 是媒材呈現的樣貌；id 是互動控制所需的辨識碼。
  4. 最後再寫入 jQuery 程式碼，請注意程式中所設的 id 。
二、請把下列 CSS 複製到<body>之後：
<style type="text/css">
.titlemid01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
border-bottom: 1px solid darkorange;
}

.contword01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
letter-spacing: 0.1em;
padding-right: 55%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHzgn_PiBEu7SAArHLhi8P5ZlS7bZoffVz4W9K4KNkgfzOeo2fwg32wOCFAn_ka2_VQ-hCbxhpcbZmEr8W4LgLqmN4zYlUDYga1binhb2xlLUMd-L29Vg37HBP9NYS2DkuaP7mXtdXffE/w829-h814-no/34561+(102).png);
background-repeat:no-repeat;
background-position: right center;
background-size: 300px;
}

.contword02 {
border: 1px solid darkred;
}

.contword03 {
color: orange;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimf9Wcj5j19JU9IiQOjmGhDOokadn7jEuUj16rMD5CpIcc6WTKkp9RuvzZQoYPhygMgr-jiuKiXlsJrbxQ9bC7PsF9doznys4uG1tWIWkfvaOATJJnV03FoQGGtMYMs07aLbRbp_OUQWQ/s256-no/256px-Information_green.svg.png);
}
</style>
三、請把下列 jQuery 語法複製到<body>之後：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
$(document).ready(function () {
$("#a01").hover(function () {
$("#a02").addClass("contword02");
}, function () {
$("#a02").removeClass("contword02");
});
});
</script>

<script>
$(document).ready(function () {
$("#a02").hover(function () {
$("#a02").addClass("contword03");
}, function () {
$("#a02").removeClass("contword03");
});
});
</script>


注意事項：
  1. 1.9.1.js 那條程式（橘色字體者）， 如已因使用其他互動功能而被使用了，可以不要再寫入。一篇互動數位文章中，寫入一條即可。請保留最早出現的那條。



3 讓我聽聽您的想法：

2014年10月1日 星期三

用背景圖拼貼圖像 plus 文字安排的大、中、小






可以同時使用很多張
背景圖拼貼圖像
利用多張圖像的位置關係，來呈現文本，不只是「美感」而已。
事實 上，從空間性的文本結構而言，圖像在文本空間位置的變化，即是意義的變化。
未來的文本敘述者， 必須要能使用圖像拼貼的敘事結構，來講故事。






一、影音教學：

二、教學使用的 CSS：請放置於<body>之後
<style>

.backi093001 {
background-image: url(第一張圖像網址), url(第二張圖像網址);
background-repeat: no-repeat, no-repeat;
background-position: right  bottom, right 210px top 7px;
background-size: 360px, 160px;
}

.backi093002 {
background-position: right bottom, right 170px top 47px;
}

.titlebig {
font-family: Verdana, '微軟正黑體';
font-size: 2.4em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
letter-spacing: 0.1em;
text-shadow: 1px 1px 1px black;
color: darkorange;
}

.titlemid {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
letter-spacing: 0.1em;
border-bottom: 1px solid darkred;
}

.word01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
}

</style>
三、注意事項：
  1. 要移動背景圖的位置，請注意（上面紅色字體者） background-position: right bottom, right 210px top 7px; 。right【left/ center/ right，三選一】，是指靠 div 的右邊。 bottom【top/ center/ bottom，三選一】，是指靠 div 的底部。而 right 210px top 7px，是指距離右邊210px，同時距離頂部 7px。
  2. .titlebig 是指大標，.titlemid 是指中標，.word01 是指內文的 class。
四、補充的互動語法：請放置於<body>之後
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$('.backi093001').hover(function () {
$(this).addClass('backi093002');
}, function () {
$(this).removeClass('backi093002');
});
});
</script>


0 讓我聽聽您的想法：
訂閱： 文章 (Atom)