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

2012年10月17日 星期三

讓文字活起來:重點引文強調的表現


把文字引號起來了



網路書寫,在於文字的表現力上要適合「掃瞄性」。所以,重點強調式的文字框呈現,就是讓讀者快速掌握重點的方式之一。

這種形式的表達,很容易以「表格」的功能來處理。我們可以看一下以下範例如何運用表格。

以下這是一個範例:
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是審美的!……


表格文字框的語法:
<div style="width: 590px;">
<table border="0" cellpadding="5" cellspacing="2" style="border-bottom: 1px solid gray; border-top: 1px solid gray; font-family: '微軟正黑體'; font-size: 130%; line-height: 28px; width: 100%;">
<tbody>
<tr>
<td align="center" style="color: red; font-size: 180%; font-weight: bold;" valign="top" width="10%">「
</td>
<td valign="top">……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……</td>
<td  align="center" style="color: red; font-size: 180%; font-weight: bold;" valign="bottom" width="10%">

</td>
</tr>
</tbody>
</table>
</div>


思考過程:


.先做出一個一列三欄的表格:
  • 左右格各設為整體表格的10%。
  • 整體表格,字體設為「微軟正黑體」,字的大小為130%,行高為28px。
  • 左、右格的字再設為紅色,置中,大小180%,粗體。

10%
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……
10%

.去掉表格格線,再用css的style為表格的上、下加上灰色線。

10%
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……
10%

.再於左、右格去掉「10%」,各加上引號。左格設為置頂,右格設為置底。
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……





▒ CSS 的引號強調作用

這是一段文字。引文的作用在於對文章的重點作出提示。這是網路文字效果運用中常見的技巧手法。這一範例是使用CSS語 法寫成。


CSS語法:使用 class="quo" 即可

.quo {
font-size: 110%;
font-family: '微軟正黑體';
font-weight: bold;
line-height:1.5;
padding: 20px 80px 20px 80px;
background-color: #f0f0f0;
position: relative;
}

.quo::before {
content: open-quote;
font-size: 400%;
font-weight:bold;
position: absolute;
left: 15px;
top: -8px;
}

.quo::after {
content: close-quote;
font-size: 400%;
font-weight:bold;
position: absolute;
right: 15px;
top:-8px;
}



沒有留言:

張貼留言