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

2012年5月4日 星期五

利用scroll bar創造互動文本特色 全新說明,更好學




最基礎的文字互動形式
互動文本的形態:捲軸使用





各位同學:
從這個範例我們可以看到,
例用scroll bar的功能可以產生的
基本文本互動效果

當有許多文字說明,
遠遠超過圖的長度時,
利用這個功能,我們可以讓圖、文的
展現更具互動性。
同時可以讓讀者去選擇,
是否要往下看更多的訊息。

如果你有看到這裡,
這裡我要感謝一位同學,
她問我這個問題,
我才了解之前所做的scroll bar
功能說明,是很不好用的。

這是改良版的說明,
同學可以再試試。




快速上手使用教學影片


影片教學中的CSS:


<style>

.makeoverflow0224 {
/* 啟動 */
overflow: scroll;
/* 隱藏x軸*/
overflow-x: hidden;
}

/* 基本黑體內文 */
.ironcontent01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
}
</style>



2012年的教學版本。 click here!



沒有留言:

張貼留言