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

2017年7月14日 星期五

互動跳躍連結中標列表:使用表格法

 回到頁首 





跳躍連結
讀者可以快速
找到所要讀的內容
by 編輯老師


互動文本,很容易產生「網路迷航」的狀況。
讀者在和文本互動的過程中,最後就找不到閱讀的方向了。
於是,
讀者就會放棄閱讀。
替讀者思考這一問題,是數位文本寫作者要具備的全新的寫作思考概念。而跳躍連結這一功能,是最基礎的寫作技能。






使用表格:簡單型
使用表格:進階型
使用 ol/li:快速型





 
使用表格:簡單型


使用表格,來形成中標列表。
表格可以形成規律感,同時可以讓創作者隨意的校調所要的格數,以及呈現效果。

第 一區塊
第 二區塊
第三區塊
第四區塊


CSS語法:

<style>
/* 表格字型 請放置於table裡*/
table#midintin2017071302 {
font-family: Verdana, '微軟正黑體';
font-size: 1.13em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
}

/* 格子的呈現樣態 */
table#midintin2017071302 td{
border-left: 1px solid black;
border-right: 1px solid black;
transition: 0.4s;
text-align: center;
}

/* 格子的互動效果 */
table#midintin2017071302 td:hover{
background-color: rgba(132, 132, 132, 0.3);
border-radius: 25px;
cursor: pointer;
}

</style>

寫作注意事項:
一、使用「錨點」功能,來設定所要到達的定位點。
二、使用「連結」功能,來設置所要按下去的標題。

教學影音:





 
使用表格:進階型


進階型,除了使用CSS來形成變化外,更加上了jQuery的程式使用。
這樣,就可以產生更具變化感受的互動效果。
事實上,不斷思考「互動」的呈現效果,所可能帶來在對文本理解上,產生「更多意義」的理解感受,是數位文本重要的意義給出特色。

第一區塊標題
第二區塊標題
第三區塊標題


jQuery程式碼:

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


範例 CSS 語法:

<style>

/* 表格字型 請放置於table裡*/
table#midintin20170714 {
font-family: Verdana, '微軟正黑體';
font-size: 1.15em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
}

table#midintin20170714 td{
border-bottom: 1px solid black;
border-right: 1px solid black;
transition: 0.4s;
}

table#midintin20170714 td:hover{
background-color: rgba(132, 132, 132, 0.2);

transform: translateY(-5px);
cursor: pointer;
}

/* 按下去後互動結果的參數*/
.tdbacoin20170714 {
background-color: rgba(132, 132, 132, 0.2);
transform: translateY(-5px);
box-shadow: 1px 1px 1px 1px silver;
}

<style>


本範互動jqyery程 式碼:

<script>
$(function() {
$( "table#midintin20170714" ).find("td").click(function() {
 
$(this).parent().find("td").removeClass("tdbacoin20170714").end().end().addClass("tdbacoin20170714");
});
});
</script>


停止定位錨點語法:

<a name="ap0713b"></a><br>


跳躍連結「按下去處」語 法:
/* 請設定在TD裡面*/

onclick="  document.location='#ap0713b';  "


影音教學:






 
使用 ol/li:快速型





請參考教學網頁一。可以互動的跳躍連結中標列表
請參考教學網頁二。浮動的導覽列: 〈回到頁首〉














以下是跳躍連結的使用範例






1
2
3
4
區塊的中標區













 
 
區塊的中標區









1
2
3
區塊的中標區






























使用範例 end!!




沒有留言:

張貼留言