文字的安排術
 |
文字的運用真的很重要
多媒體文本並不是把文章影像化，很多人搞錯了。而是文字、影像、影音的相互配合和補充，所形成的一種文本。
多媒體文本中的文字，雖然不像傳統文本一樣，具有意義的獨占性，但卻有意義理解上指向作用。
這是多媒體文本中的文字，和傳統電視、電影等影像媒介的不同之處。 |
教學影音將介紹如何運用KompoZer這個網頁寫作／編輯軟體，來對文字進行處理和運用。對文字的處理以後會「常常」用到，熟練它，了解它。會大大的有幫助於對數位文本的寫作思考。
閱讀的書摘：《克爾凱郭爾：審美對象的建構》：p172
在幻想中短暫出現的調和部分，足以把絕望化解為空洞之物，然而存在卻不可阻擋地衝向絕
望。用幻想無法想像絕望，這是幻想對希望的保證。
〔德〕T.W.阿多諾／李理譯，2008，《克爾凱郭爾：審美對象的建構》。北京：人民出版社。
要改成黑體字卻不成功
【上手動作！】div快速使用起手式：
文字複製、貼上、嵌入Div
DIV內無法執行「貼上（不含格式）」這動作
把文字用DIV包起來；class及id的使用
影音教學所使用之 CSS
<style>
/* 硬陰影大標字 */
.bigtitle010708 {
font-family: Verdana, '微軟正黑體';
font-size: 3.1em;
font-weight: bold;
line-height: 1.2;
text-align: left;
letter-spacing: 0.05em;
text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
text-decoration: underline;
}
/* 中標 */
.midtitle01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.25em;
font-weight: bold;
line-height: 2.4;
text-align: center;
letter-spacing: 0.03em;
margin-top: 1em;
margin-bottom: 1.2em;
border-bottom: 1px solid red;
border-top: 1px solid red;
text-align: center;
}
/* 暈染陰影效果小標 */
.ironlittibo010708 {
font-family: Verdana, '微軟正黑體';
font-size: 1.31em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
text-shadow:0px 0px 15px #FF37FD;
}
/* 重點強調字:有引號 id */
#ironcontent0528 {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 35px;
background-image: url(https://goo.gl/MGdgDj);
background-repeat: no-repeat;
background-position: left top 3px;
background-size: 28px;
}
/*重點說明黑體字*/
.divwordbl20171110 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: 900;
line-height: 1.6;
letter-spacing: 0.03em;
}
/*一般內文新細明字*/
.divwornsl20171110 {
font-family: Verdana, '新細明體';
font-size: 15px;
line-height: 2;
letter-spacing: 0.05em;
}
/* 邊框 */
.border20170617 {
border: 1px solid darkred;
}
</style>
更多的文字屬性class範例，請按此。
【上手動作！】快速刪除DIV
【上手動作！】DIV內的DIV，插入文字
【上手動作！】寫作時如何跳出div框框
作業練習
請用Kompozer，運用DIV以及class的方式，來做出數位文本文字寫作布局的常用方式：
文字的大、中、小。
更多文字的變化
範例一呈現：
更多文字的變化可能性。
CSS：
<style>
.wordchange01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.5em;
font-weight: 900;
line-height: 2;
letter-spacing: 0.1em;
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
HTML：
<div class="wordchange01">
更多文字的變化可能性。<br>
</div>
範例二呈現：
更多文字的變化可能性。
CSS：
<style>
.wordchange02 {
font-family: Verdana, '微軟正黑體';
font-size: 1.7em;
font-weight: 900;
line-height: 2;
letter-spacing: 0.1em;
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
HTML：
<div class="wordchange02">
更多文字的變化可能性。<br>
</div>
範例三呈現：
更多文字的
變化可能性。
CSS：
<style>
.wordchange03 {
color: black;
text-shadow: 1px 1px 3px IndianRed;
}
</style>
HTML：
更多文字的<span class="wordchange03">變化可能性</span>。<br>
範例四呈現：
更多文字的變化可能性。
CSS：
<style>
.wordchange04 {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: 900;
line-height: 2;
letter-spacing: 0.1em;
color: #f00;
text-shadow: 1px 1px 0px #212121;
}
</style>
HTML：
<div class="wordchange04">
更多文字的變化可能性。<br>
</div>
