我要看2013年舊版本
文
字列表的使用
一眼掌握 ｜ 迅速概括 ｜適合網路
- 網路文本是掃瞄式閱讀，閱讀時間短
- 要能快速提供文章的「理解背景」，才能往下閱讀
- 列表式文本呈現是網路文字寫作技巧，你要常常用
- 以下方式，讓你隨意呈現文字列表表現形態，ok啦
利用文字列表的形式來，來呈現文字的書寫，是很適合網路螢幕媒介閱讀環境的一種文字文本呈現的形態。
可以快速的理解所要傳達的大意。如果有要再加以說明，就可以再往下寫下去。
文字列表有二種樣態：ol （數字帶頭）以及 ul （符號帶頭）
一、ol 呈現樣態：
- 這是第一列文字。
- 這是第二列文字。
- 這是第三列文字。
HTML語法：
<ol>
<li>這是第一列文字。</li>
<li>這是第二列文字。</li>
<li>這是第三列文字。</li>
</ol>
二、ul 呈現樣態：
- 這是第一列文字。
- 這是第二列文字。
- 這是 第三列文字。
HTML語法：
<ul>
<li>這是第一列文字。</li>
<li>這是第二列文字。</li>
<li>這是 第三列文字。</li>
</ul>
要使用Kompozer來書寫文字列表，請看下面的影音教學說明。
文字列表的
CSS詳細語法，請看這裡。
值得注意的是，ol/ li 或 ul/ li
，都是「區塊物件」。因之，所有的關係它們的空間位置關係的調整，你可以想像成
是以DIV的概念來僺作。
再來，一般而言，我們都會對ol、ul的呈現形式進行某種調整或改造，來符合我們的文本主現企圖。
對ol、ul 進行調整的步驟
先以ol 為範例來說明，
如下（
滑鼠移入↓，ol
加邊線）：
- 這是示範第一列文字。
- 這是示範第二列文字。
- 這是示範第三列文字。
上例HTML語法：
<ol
class="lolichange20171111">
<li>這是示範第一列文字。</li>
<li>這是示範第二列文字。</li>
<li>這是示範第三列文字。</li>
</ol>
首先，
左邊的空白區域，並不一定符合你的想法
（click
here!!）。
再來，數目字或符號，也不不盡合你的意。你想要更好看的圖案或表現形態。
修改的構思和步驟：
一、在ol處，設置 style=" padding-left: 0px; "，使得 li 向左靠到底。
二、在ol處，設置css語法， style=" list-style-type: none; “，使符號項目消失。
三、在li 處，設置style=" padding-left: 2em; "，使文字向右靠。
四、在li 處，設置背景圖，來代替想要符號。
五、你也可以用hove，來設定背景圖的互動。
下列是修改的css語法：
（
請
按此看效果）
<style>
/*把這個class套入 ol 處*/
.lolichange20171111 {
padding-left: 0px;
list-style-type: none;
}
.lolichange20171111 >li {
padding-left: 2em;
background: url(圖像網址) no-repeat left 3px center/ contain;
}
</style>
開頭文字列表範例構思講解
構思方向：
- 設定ol，使「文
字」可以完全靠左。
- 對ol設定，使標
記的數字消失。
- 設定li，讓文字
向右，空出位置給背景圖像當作icon。
- 設定li背景圖像
的位
置。
上列範例CSS：
<style>
/* ol 的內容設定 */
#olli20170815 {
padding-left:
0px; /*
使列表文字靠左*/
font-family: Verdana, '微軟正黑體';
font-size: 1.19em;
font-weight: bold;
line-height: 1.9;
list-style-type:
none; /*
數字標記消失*/
}
/* li 的內容設定 */
#olli20170815 >li {
padding-left:
2.5em; /*
空出位置呈現背景圖*/
background-image: url(圖像icon網址);
background-repeat: no-repeat;
background-size: 22px;
background-position:
left top 5px; /*
調整背景圖位置*/
transition: 0.4s linear;
}
/* li 的互動設定 */
#olli20170815 >li:hover {
background-image: url(圖像icon網址);
}
</style>
影音教學：
2013年教學版本 ▼
|
數位文本是以螢幕為閱讀媒介，快速掌握重點是「掃瞄閱讀」的要求。
- 大量文字要柝解成小區塊文字。
- 可以列表呈現的，就要列表呈現。
這樣，讀者可以快速決定要不要往下繼續把時間花在這一訊息。
|
8 影音教學內容：
影音內容說明：
