多媒體寫作的文字處理基本功：KompoZer

文字的安排術

文字的運用真的很重要 多媒體文本並不是把文章影像化，很多人搞錯了。而是文字、影像、影音的相互配合和補充，所形成的一種文本。 多媒體文本中的文字，雖然不像傳統文本一樣，具有意義的獨占性，但卻有意義理解上指向作用。 這是多媒體文本中的文字，和傳統電視、電影等影像媒介的不同之處。

教學影音將介紹如何運用KompoZer這個網頁寫作／編輯軟體，來對文字進行處理和運用。對文字的處理以後會「常常」用到，熟練它，了解它。會大大的有幫助於對數位文本的寫作思考。

閱讀的書摘：《克爾凱郭爾：審美對象的建構》：p172

在幻想中短暫出現的調和部分，足以把絕望化解為空洞之物，然而存在卻不可阻擋地衝向絕 望。用幻想無法想像絕望，這是幻想對希望的保證。
〔德〕T.W.阿多諾／李理譯，2008，《克爾凱郭爾：審美對象的建構》。北京：人民出版社。

DIV文字操作的重要技巧匯集

要改成黑體字卻不成功

【上手動作！】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>

---