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

2013年1月5日 星期六

文字列表快速使用:Kompozer文字處理


我要看2013年舊版本


字列表的使用
一眼掌握 | 迅速概括 |適合網路

  1. 網路文本是掃瞄式閱讀,閱讀時間短
  2. 要能快速提供文章的「理解背景」,才能往下閱讀
  3. 列表式文本呈現是網路文字寫作技巧,你要常常用
  4. 以下方式,讓你隨意呈現文字列表表現形態,ok啦



利用文字列表的形式來,來呈現文字的書寫,是很適合網路螢幕媒介閱讀環境的一種文字文本呈現的形態。

可以快速的理解所要傳達的大意。如果有要再加以說明,就可以再往下寫下去。


文字列表有二種樣態:ol (數字帶頭)以及 ul (符號帶頭)


一、ol 呈現樣態:

  1. 這是第一列文字。
  2. 這是第二列文字。
  3. 這是第三列文字。


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 加邊線):



  1. 這是示範第一列文字。
  2. 這是示範第二列文字。
  3. 這是示範第三列文字。


上例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>



開頭文字列表範例構思講解


構思方向:
  1. 設定ol,使「文 字」可以完全靠左。
  2. 對ol設定,使標 記的數字消失。
  3. 設定li,讓文字 向右,空出位置給背景圖像當作icon。
  4. 設定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 影音教學內容:



影音內容說明:

  • 列表小icon的網站網址:http://www.websitebullets.com/
  • 使用小圖示icon列表的語法: list-style-image: url(xxx) ;xxx=列表icon的位 置網址。




沒有留言:

張貼留言