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

2012年5月22日 星期二

多媒體寫作的文字處理基本功: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>






沒有留言:

張貼留言