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

　回到頁首　

跳躍連結	讀者可以快速 找到所要讀的內容

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!!

---