李明哲老師多媒體互動寫作教學: 文字列表快速使用：Kompozer文字處理

我要看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年教學版本 ▼