李明哲老師多媒體互動寫作教學: 2014

首頁

初學者技能教案專區

google Meet遠距上課技能

javascript互動文本寫作

融媒體Wix教學

網路新聞寫作：HTML&CSS

新聞影音剪輯：premiere

匯流寫作基模知識：gravit

基礎影音編輯：shotcut

基礎向量圖像編輯：inkscape

基礎圖像編輯：GIMP

排版設計scribus

匯流新聞專題寫作

影音新聞製作與剪輯（上課用）

新聞直播編導／OBS（上課用）

基礎新聞攝影（上課用）

數位排版/敘事（上課用）

西洋哲學史導讀

老子探義導讀

《論語》小談

《法華經》的思

品嚐《華嚴經》

Unsplash圖像集

Pexels 圖像集

我的給大學生書單

傳播理論／研究

2014年12月31日星期三

掀起你的蓋頭來：resizable div：easy jQuery UI

可以隨意調整大小，拉出大小的文本區塊！

123

Resizable

這一行以下是DIV

這是內容文字。
這是內容

↖從這裡拉！

456

請將下列CSS及jQuery程式碼放到<body>之後：

<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>

<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; overflow: hidden; }
#resizable h3 { text-align: center; margin: 0; }
</style>

說明：
一、紅色字是一開始要出現的div的大小。

請將下列html放到欲編輯處：

<div style="border: 1px solid transparent; width: 170px; height: 170px;">
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
這一行以下是DIV<br>
<div style="width: 352px; height: 282px;">
這是內容文字<br>
這是內容<br>
<img style="width: 320px; height: 213px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGIm_nG48lEN7LiosOSGVlmqN_UWQeeROnQM-UD_ZRV22rHRNLFypa99MwojHquM0OgiXlzz9Jv-gXuOyDLb4bfPtR_JbcLkh8_kjnQN4v8DwzmpKD82bp0-i52opE4-1HToqGxKBoBC8/w759-h506-no/IMG_2083.JPG">
</div>
<br>
</div>
</div>

說明：
一、綠色者字，為固定版型用的，其大小是比一開始出現的多加上20px。
二、橘色字體者是裡面內容的div。可以自由的做內容。裡面的藍色字體是div的大小，請自行設定。

影音教學：

2014年12月26日星期五

規律互動的背影色　有秩序的文字列

kds dlf lds fldj djalfdjsl fds
dksf dsj fdjs alfjd safdsh fds fdsalf dsf

dls afdls lfdjsl kfjlkds lfdj sfj dsl fdlsa
fkdsf ljsdlaf lds aflds lfj dslaf lds fld sf ds;lf

ldsf dlsaj fd sfj ldsjf ldjs dsf dsfd
sfkds fds fdhsa kfhdsk fkdsj flds lf dsf ds
dlsf dsj fds fjd slf dslfj ds

ld slf dslj flds fdjs lfj dlsajf ldsj flds lf dslf ds
dsl dsf ds fds
dlsf ldsjf lds fdjsfj dslf dsf

請把下列CSS置放於<body>之後：

影音教學：

有關如何使用網頁顏色的教學：here
顏色代碼網站，及代碼轉換：here

2014年12月21日星期日

小資料量快速互動list：使用ol / li：easy jQuery

第一中標
第一中標的內文。第一中標的內文。第一中標的內文。
第二中標
第二中標的內文。第二中標的內文。第二中標的內文。第二中標的內文。
第三中標
第三中標的內文。第三中標的內文。第三中標的內文。第三中標的內文。第三中標的內文。
第四中標

lds dsjfl djs fds f
ldjs fdls fdsfjd sj fdlsj fd slf
dls fdls fds fld sf dsl fdjslfd sf ds
dlsfldsj f dsfj klds fds fj dsfj dkls fds fd s
dskf dsj fdsj fljd slf dsl fdls fds f dslf dsf dsf
ldjs fld sjfjd sljf dsj fljd slf dlsj fdjs flj dslfj dlsj fljd slfj dsljf lds fjdslkfj dlsjf lds fldjs lf dsjf ds f dsf
dlsjfds fds fd fds fds fds

CSS 語法，請複製到<body>之後：

jQuery 互動語法，請複製於<body>之後：

影音教學：

2014年12月16日星期二

有變化的版型：表格+CSS：圓角、陰影、旋轉、移動

	這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡共有四種版面編輯動作：圓角、陰影、旋轉、滑鼠移入互動。【mouse enter↙】
這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。在表格的TD中，使用1px div的排版概念（上課術語），形成跨限制的Div面積呈現。【請看教學video】

CSS 語法，請置於<body>之後：

教學影音：

2014年12月12日星期五

有規律呈現文字：使用表格+CSS

表格搭配CSS，文字呈現有規律。

對於要處理大量文字，或是大量資料的版型需求而言，這是很好的解決方法。

這是標題

這是內文這是內文。
這是內文這是內文。
這是內文這是內文。

這是標題

這是內文這是內文。
這是內文這是內文。
這是內文這是內文。

CSS 語法，請放在<body>之後：

教學影音：

互動css語法補充：

在<style>xxx</style>裡面加入下面二條css，則會互動地產生「有規律」的背景顏色：

table.tab20141212 >tbody >tr:nth-child(odd) >td:hover {
background-color: #DEDEBE;
}

table.tab20141212 >tbody >tr:nth-child(even) >td:hover {
background-color: #CAFFFF;

2014年11月29日星期六

可以隨意拖拉的div，讓讀者更具主動性：easy jQuery

你可以拖拉下列三個Div，可以拉到任何地方。↓

Drag me around 01

Drag me around 02

Drag me around 03

jQuery & CSS:

<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
$(function() {
$( "#draggable01, #draggable02, #draggable03" ).draggable();

});
</script>

<style>
.div112901 {
font-family: Verdana, '微軟正黑體';
font-size: 1.12em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
padding: 0.5em;
letter-spacing: 0.1em;
margin: 0.5em;
}
</style>

HTML範例：

<div id="draggable01" class="div112901"
style="width: 100px; height: 100px; background-color: red;">
Drag me around<br>
</div>
<div id="draggable02" class="div112901"
style="width: 120px; height: 120px; background-color: green;">
Drag me around 02<br>
</div>
<div id="draggable03" class="div112901"
style="width: 380px; height: 230px; background-color: yellow;">
Drag me around 03<br>
<img style="width: 320px; height: 214px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8tlEjDU5BmPwhEP7vVAv63c2f4aCzEpyl5YnLkRVnGWmGtTTK3V7_6MeXknHSA0FpJ7-HNgVW8HVZCreEbpEFqNfgwaq6zDl1_i8cYwawMreWrvrTN0_FccORJgpHaUI1WyGdyexpdmo/w1121-h748-no/IMG_1927.JPG"><br>
</div>

說明：

div內一定要設 id ，同時 id 也要寫入 jQuery 裡面，如範例中紅色字體。如果一個以上的 id，請用「,」隔開。

圖文的互動搭配：easy jQuery

這是我很愛思考和變化樣的部分↓ 。

圖文互搭的作法，一直是我最愛思考的互動文本表現方式。這中間當然要有某種互動的方式，來串起兩者之間的連帶關係。
理論上，圖與文是兩種異質性的媒介，一般常用的圖說，其實是以圖為之主方式；但互動下的圖文互搭，兩者間形成一種敘事關係，就不是某種主、附的關係，而是構成敘事文本都不可或缺的部分。

CSS：

<style>
.bacimg1128 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnqjfs-w5y23S7Wj46P-MQoVGfCeQfxggCWefJThTGow0mQ6QbNMuzaq_U0H92LcAQHUQIlVk-hseMu3hmbHA5Mj6_TnVldeTEy-tIntJwxGun5RLCScEw1aAL5swXfiMqtvrpBy7YXGs/w1166-h778-no/IMG_0396.JPG);
background-repeat: no-repeat;
background-position: left top;
background-size: 578px 386px;
}
.div2014112801 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
padding: 1.5em;
letter-spacing: 0.1em;
background-color: rgba(60, 60, 60, 0.5);
color: white;
}
.divposi2014112801 {
position: relative;
top: 3em;
}

.divdisno {
display: none;
}
</style>

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() {
$('div.bacimg1128').hover(function() {
$('div.div2014112801').show('slide', {direction: 'left'}, 400);},

function() {
$('div.div2014112801').hide('slide', {direction: 'left'}, 400);
});
});
</script>

使用事項：

文字移動的方向，可以有"left", "right", "up", "down"四種方向，寫入藍色字的地方。
速度的快慢可自調，一秒是1000。400即是0.4秒。紅色字部分。

教學影音：

2014年11月26日星期三

向左、向右移動：easy jQuery

2017年版，純CSS的做法

後現代風格	遮住文字→	形成想讀張力
後現代風格	移動圖像→	進行閱讀過程

現代性與後現性之間的矛盾只是一個更大的歷史過程中的一個階段，而不是一個固定的有中心的靜止的結構；尋找矛盾，發現矛盾，或甚「建構」矛盾，正是布萊希特的「方法」的核心。

詹姆遜，《布萊希特與方法》陳永國譯。

jQuery:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var flag1126 = 'a';

$('#d112601').click(function() {

if(flag1126 == 'a') {
$(this).animate({'left': '-=600px'}, {duration: 1400});
flag1126 = 'b';
}

else {
$(this).animate({'left': '+=600px'}, {duration: 1400});
flag1126 = 'a';
}
});
});
</script>

基礎概念講解	實戰操作過程

使用CSS的方法

如果想要：click一下咖啡杯，物件可以移動。這樣的互動模態之文本形式，可以使用jQuery程式外，另一種更方使的作法是和CSS配合使用。
我們可以看到簡單的運用jQuery的toggleClass()，再配合使用css trnsition以及transform之語法，就可以創造補間形式的動態效果。
這一作用更直覺，更適合一般人的直覺寫作思考。

CSS:

<style>
.clicsstt170101 {
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
cursor: pointer;
}

.clicsstt170101add01 {
transform: translate(-350px, -140px);
}
</style>

jQuery: click

$(this).toggleClass('clicsstt170101add01');

影音教學：

2014年11月20日星期四

讓照片跑開，不要妨礙閱讀：easy jQuery

我在想著，數位文本是否也有著布萊希特所愛用的「間離法」的效果。這一用在戲劇的技法，我總覺得會跟數位文本中的「互動法」有著理論上接軌的可能。

貝托爾特·布萊希特
Bertolt Brecht

來源：《維基百科》 Click ↑

布萊希特
間離效果（即陌生化）其要義概括起來有如下幾點：
　　（1）布萊希特認為，… …。
　　（2）陌生化效果就是借助種種戲劇藝術。……總之，使它們失去為人們所熟知的假像，揭示它們的社會本質。
　　（3）在藝術欣賞中，……，破除催眠般的舞臺幻覺，觸發觀眾藝術鑒賞中的理性激動，引起深廣的聯想和冷靜的思考。
　　（4）陌生化效果的目的是引導人們對舞臺表現的人物、事件及其社會過程，採取一種批判、探討的態度，促使他們從社會的角度出發，作出有益的批判，感奮人們改造世界的行動。”（《試論布萊希特的陌生化效果》孫君華）

CSS：

jQuery:

教學影音：

2014年11月19日星期三

排隊．請編輯元素一個接著一個出場：easy jQuery

一、本範例的進階應用：多層次圖說，一個接著一個出場。
二、本單元著重在對語法邏輯系統的思考理解。不要怕，真的超簡單，又有video教學。

請你按這一個div，
然後其他的編輯元素，就會
一個接著一個的出場！

一個一個出場，是一種互動表現形式！

互動是一種以形式來呈現意義給出的文本樣態，重點在於思考「互動樣態」與讀者的互動之間，可以帶出來的意義感受。這是數位文本可以在文本表現上所帶來的全新方法。

我們以DIV來當作互動元件。
因之，DIV可以呈現的樣子，如表格、圖文整合，都可以用這種方法來表現。

最後，當然，什麼的文本表現意義才是適合這一種互動樣態的使用，就考驗創作者的思考。

這是後面的文字，主要是讓你知道，這個一互動模態，版面會隨著內容出現而變動。如果你想要讓內容依次跑出來的同時，版面是固定不變的。請參考進階技能，【1px固定版面技法】。

程式碼

<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() {
var flag = 'a0528';
$('#a010528').click(function() {

if(flag == 'a0528') {
$('#b010528').delay(0).show('slide', {direction: 'left'}, 800);
$('#b020528').delay(800).show('slide', {direction: 'up'}, 800);
$('#b030528').delay(1600).show('slide', {direction: 'down'}, 800);
$('#b040528').delay(2400).show('slide', {direction: 'right'}, 800);
flag = 'b0528';
}

else {
$('#b010528, #b020528, #b030528, #b040528').hide();
flag = 'a0528';
}

});
});
</script>

紅色字體是要跑出來DIV的 ID 。本例有四個。可自行增加。
你可以自己調整方向："left", "right", "up", "down"，藍色字體者。
數字可以調整速度。一秒是1000。綠色字體者

CSS語法：

<style>

/* 中標 */
.midtitle0528 {
font-family: Verdana, '微軟正黑體';
font-size: 2.13em;
font-weight: bold;
line-height: 1.4;
text-align: left;
letter-spacing: 0.07em;
margin-bottom: 1em;
border-bottom: 1px solid red;
}

/* 基本黑體內文 */
.ironcontent052802 {
font-family: Verdana, '微軟正黑體';
font-size: 1.27em;
font-weight: normal;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
margin-bottom: 1em;
}

/* 基本黑體內文+粗+背景圖 */
.ironcontent0528 {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 35px;
background-image: url(https://goo.gl/MGdgDj);
background-repeat: no-repeat;
background-position: left top 3px;
background-size: 28px;
margin-top: 1em;
}

/* 基本細明體內文 */
.ironcontentmi0528 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.6;
text-align: left;
letter-spacing: 0.1em;
padding-left: 0px 5px 5px 0px;
}

/* 隱藏DIV */
.displno {
display: none;
}

</style>

教學影片：

2014年11月16日星期日

快速補充要增強資料：CSS：選擇器：父子

CSS：選擇器：父子

快速補充要增強資料：純 css 方法

網路閱讀中，最怕的是一堆字擠在一起。因為螢幕是不好的閱讀媒介，這也是為什麼影音在網路上盛行的原因：在螢幕上看影音並不吃力。所以我們就要想法子，看看有沒有辦法讓文字是更快速可以被理解。這是我的方法之一，用互動，讓重點的字快速現形出來，讓讀者來判斷：要不要再讀下去？

◣哇！都是一堆字。

CSS語法：

影音教學：

css 方法：選擇器：父子（01）	css 方法：選擇器：父子（02）

2014年11月11日星期二

按一下讓圖片爆炸，換圖：jQuery: queue();

爆炸吧！圖片。

使用方法：

請先將圖片貼入。
要設定圖片id，此例為 id="img1111" 。即藍色字體者。
將下列jQuery貼入於<body>之後。
綠色字體者為click後的圖片網址；紅色字體者為再click後的圖片網址。
一般而言，紅色字體的圖片應是一開始放置的那張。

jQuery語法：

2014年11月8日星期六

easy jQuery 程式寫作練習：平順的滑顯和滑隱

Hover to see !

jQuery練習題slideToggle

圖片或媒材要放在DIV裡面，才能平順滑動

這是我要按下去的地方。
就是表格裡面的ＴＤ，
然後在ＴＤ裡面要設好id。

click▲照片也要設上id，才能進行互動設置。

構思重點：（一）將媒材放到
DIV裡，對DIV進行互動設定。
可以看到，不管是從圖像、videos
或是文字都可以平順地控制變化。
（二）互動文本中，讀者是無法被
精準預期閱讀行為。
所以，為一種閱讀內容設定
多種可行的到達途徑，例如
設定二個以上的click點來到達，
是一位互動作者的
基本寫作思考態度。

這個課程範例，互動程式的使用是老套的，早教過。但，要寫出來，因為一些操作技巧可以幫助同學更多。這些寫作上／使用kompozer的操作技巧很重要，但同學似乎掌握的不是很好。如果你已跟著我學了一陣子，這個課程案例，會對你有真正提升功力的助益。

一、影音教學：

二、範例中的 jQuery:：

三、jQuery程式寫法影音說明：

2014年11月2日星期日

按小圖跑出大圖，加上圖說：easy jQuery

按小圖	跑出大圖，還可寫上圖說

陽明山的美軍宿舍

在美好的陽光下，
看起來是一種享受。
如果，
你再按一下照片，
會跑出大圖來，這圖有更多的細節來補充你的想像。

一、影音教學：

注意事項：

一開始的小照片，請要設定 id 。此例 id="a011102"。
圍繞小照片 div，請設定步驟二的class 。此例 class="div1102" 。
此範例只能互動一個。要做第二個，請更換新id，再重頭做一次。

二、將下列 CSS 貼入到<body>之後：

三、將下列 jQuery 貼入於<body>之後：

藍色字體者，即一開始出現的小照片，所設定的 id 。
紅色字體者，即是click後所出現的大照片，照片的網址以及寬度和高度，三項。
土黃色字體者，是大照片下面的圖說，要設定寬度及內容，二項。
綠色字體者，是再click之後所回復的小照片，照片的寬度和高度以及照片的網址，三項。

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 ：

三、請在<body>之後插入下列 jQuery 程式碼：

2014年10月26日星期日

超快速的 image hover

黃色的燈光

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

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

超快速的 image hover！！

一、影音教學：

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

三、請複製並貼入下列 jQuery 程式碼於 <body>之後：

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

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

2014年10月15日星期三

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

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

平面作品參考範例：

數位作品實作示範：

石碇之水

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

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

教學video:

範例使用 CSS：

範例補充用互動CSS：

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

2014年10月10日星期五

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

數位新聞寫作利器

比較前、比較後

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

一、影音教學：

寫作發想：

要比較時間前後的情況變化時使用。
請使用範例的互動模組。
兩張照片的大小及比例要一致才好看。
最後一定要記得設定語法中照片的長度和寬度。

二、請把下列程式碼複製到<head>xxx</head>之間（建議）或<body>之後：

jquery-1.12.4.js 那條程式（橘色字體者），如已使用了，可以不要再寫入。一篇互動文本，寫入一條即可。最早出現的那條保留即可。
請記得要設定圖像的長度和寬度，即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>

注意事項：

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

原始語法出處：Image Reveal

2014年10月6日星期一

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

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

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

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

一、影音教學：

寫作發想：

請先寫入編輯元素。
為每個編輯元素設定 class 以及 id 。
class 是媒材呈現的樣貌；id 是互動控制所需的辨識碼。
最後再寫入 jQuery 程式碼，請注意程式中所設的 id 。

二、請把下列 CSS 複製到<body>之後：

三、請把下列 jQuery 語法複製到<body>之後：

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

訂閱：文章 (Atom)

2014年12月31日 星期三

Resizable

2014年12月26日 星期五

2014年12月21日 星期日

2014年12月16日 星期二

2014年12月12日 星期五

2014年11月29日 星期六

2014年11月26日 星期三

2014年11月20日 星期四

2014年11月19日 星期三

2014年11月16日 星期日

2014年11月11日 星期二

2014年11月8日 星期六

2014年11月2日 星期日

2014年10月29日 星期三

2014年10月26日 星期日

2014年10月17日 星期五

2014年10月15日 星期三

2014年10月10日 星期五

2014年10月6日 星期一

2014年12月31日星期三

2014年12月26日星期五

2014年12月21日星期日

2014年12月16日星期二

2014年12月12日星期五

2014年11月29日星期六

2014年11月26日星期三

2014年11月20日星期四

2014年11月19日星期三

2014年11月16日星期日

2014年11月11日星期二

2014年11月8日星期六

2014年11月2日星期日

2014年10月29日星期三

2014年10月26日星期日

2014年10月17日星期五

2014年10月15日星期三

2014年10月10日星期五

2014年10月6日星期一