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

2015年9月23日 星期三

DIV快速上手使用:把編輯元素用DIV包起來

DIV
把寫作過程中相關的媒材
包起來
讓相關的媒材連結起來,這是重要的數位寫作技能


網路文本是區塊寫作文本。區塊寫作就是要會使用、控制DIV。使用DIV最重要的功能,就是要把編輯元素,即各種媒材,包括文字、圖像、影音等,置入於DIV中。之後,只要對DIV進行各種編輯和互動的設計就可以了。學會把各種媒材用DIV包起來,是網路寫作中最基本的概念和數位寫作技術能力。

這個學習網頁,再加上下列三個閱讀網頁,就是最基本的四項DIV技能。
排版寫作技巧:快速移動DIV 。click here!
慢工出細活:搞定DIV的調校 。click here!
簡單、快速:3秒調出DIV文字布局。click here!

教學影音:


影音教學參考用CSS

<style type="text/css">

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

.div2015091303 {
border: 1px solid darkorange;
}


#tdiv2015091302 {
font-family: Verdana, '新細明體';
font-size: 1.04em;
font-weight: normal;
line-height: 1.4;
text-align: left;
letter-spacing: 0.1em;
}

</style>


◆DIV超常用的幾個上手動作★

【上手動作!】div快速使用起手式:

【上手動作!】文字的複製、貼上以及嵌入div:

【上手動作!】快速刪除DIV

【上手動作!】DIV內的DIV,插入文字

【上手動作!】寫作時如何跳出div框框

【上手動作!】黑體字跑不出來





2015年9月16日 星期三

數位文本的互動模態:基本七款



數位文本的互動模態:基本七款

互動,是有道理可以談的。

互動不是動來動去就爽了,不是,而是作者和讀者,藉由數位文本媒介而來的一種「對話方式」。你先寫了一些東西,然後想像讀者可能會不懂,可能會想問什麼。 然後,你設定了一個互動的機制。想像,讀者透過這個互動機制,數位文本可以回答讀者在心中想問的。

再來,互動既是一種對話式的文本展現形態,那麼互動式的文本意義呈現就有特色,即是一種「辯證性」的意義給出。文本的辯證方法,往往可以讓讀者理解更多, 更多於文本材料所提供的部分。


第一式:tooltips

方法一:滑鼠移到文字或圖片上,跑出說明文字
方法二:Hint.css 2.0:快速使用的純文字 tooltips
方法三:tooltipster 4.0版。超好用的tooltips模組。



第二式:click to hide / display

方法一:分層文本互動寫作技法(一)
方法二:按【文字】就會更新圖像或影音內容
方 法三:click即可【打開/隱藏】較長的內文
方 法四:排隊.請編輯元素一個接著一個出場



第三式:popup style 跳出式小視窗

方 法一:學生超愛用的影音跳出法:fancyBox
方 法二:移動滑鼠就跳出放大照片
方 法三:漂亮展出互動影音小視窗
方 法四:一進入文章就自動跳出影音



第四式:互動式清單列表 interactive list

方 法一:把紛雜的訊息收納起來, Accordion
方 法二:Tabs 式的文本互動形式
方 法三:清單式互動展開內容文本模組,按一下就有
方 法四:小資料量快速互動list:使用ol / li:easy jQuery



第五式:image hover

方 法一:圖文的互動:會滑動的互動圖說
方 法二:滑鼠移入,照片就會滑動
方 法三:快速好用的image hover;共24種:純CSS
方 法四:壓在圖上的文字,互動式



第六式:content slider

方 法一:有導覽小圖的image gallery: Fotorama
方 法二:正流行的Content slider,bxSlider
方 法三:超有氣質的圖文互動slider
方 法四:讓人癢眼的 jQuery Image Gallery,zAccordion



第七式:各種特色型互動模態

方 法一:互動的照片效果:時間前後的比較
方 法二:可以隨意拖拉的div,讓讀者更具主動性
方 法三:按一下讓圖片爆炸,換圖
方 法四:讓圖片有更豐富的想像力


Q & A:
本來可以正常的互動模式,在加入其他互動模組後,就動不了了?

影音回答:

說明:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
上面這條程式碼的式子,要刪除,只保留第一個。