分層文本的寫作，
互動技法是好方法
按一下摘要，讓補充性資訊互動呈現出來，形成
意義充實作用
這
裡是大綱式的文字，也可以說是摘要。先將重點寫出來，吸引讀者興趣；讀者按下去之後，更多豐富的內容就會展開。這就是分層文本的運作結構。【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>
<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 !
下載BlueGriffon使用的作業模本
口訣：
標題、作者、圖文互動整合、跳躍連結、標題一、內文一、標題二、內文二、標題三、內文三。
標題、作者、圖文互動整合、跳躍連結、標題一、內文一、標題二、內文二、標題三、內文三。
範例作品參考，請至 教學習作網，並點按學生作品區。
BlueGriffon 預寫的 CSS
<style>
div {
border: 1px dotted red;
}
p {
border: 1px dotted blue;
}
span {
border: 1px dotted green;
}
/*寫作完成後請刪除此部分*/
</style>
<style>
body {
width: 800px;
margin: auto;
border: 1px dotted darkred;
}
img {
width: 100%;
}
</style>
下載免安裝版3.1
沒有留言:
張貼留言