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

2015年3月24日 星期二

分層文本互動寫作技法(一)




分層文本的寫作, 互動技法是好方法
按一下摘要,讓補充性資訊互動呈現出來,形成 意義充實作用
這 裡是大綱式的文字,也可以說是摘要。先將重點寫出來,吸引讀者興趣;讀者按下去之後,更多豐富的內容就會展開。這就是分層文本的運作結構。【click】
這裡是要詳細說明的文字。可以 是純文字,也可以 是圖片、影音互動模組 等等。只要是DIV可以包進去的媒材,都可以使用。這裡是要詳細說明的文字。可以是純 文字,也可以是圖片、影音互動模組等等。只要是DIV可以包進去的媒材,都可以使用。這裡是要詳細說明的文字。可以是純文字,也可以是圖片、影音互動模組 等等。只要是DIV可以包進去的媒材,都可以使用。


教學影音:



jQuery: 請放到<body>之後

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


Javascript: 請放到要按下去的div

onclick=" $('#div032401').slideToggle(800); "


CSS: 請放到<body>之後

<style>
.wordtitle0324 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: normal;
line-height: 1.8;
letter-spacing: 0.1em;
cursor: pointer;
}

.wordcon0324 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 2;
}

.colum0324 {
-webkit-column-count: 3;
-webkit-column-rule: 2px outset gray;
border-bottom: 1px solid gray;
margin-bottom: 1em;
margin-top: 1em;
padding-bottom: 0.5em;
}

.displno {
display: none;
}

</style>




更多分層文本 寫作技巧:

按A就會跑出/隱藏B的互動設置:click here

為中標或摘要加上互動性補充說明:click here

小額資訊量的快速互動補充:click here

按一下就跳出「全文閱讀」:click here

把紛雜的訊息收納起來:click here

Tabs 式的文本互動形式:click here



作業繳交的基本寫作格式。Click here for download !

口訣:
標題、作者、圖文互動整合、跳躍連結、標題一、內文一、標題二、內文二、標題三、內文三。

範例作品參考,請至 教學習作網,並點按學生作品區。


沒有留言:

張貼留言