數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2012年5月27日 星期日

將圖片放到寫作的網頁:使用KompoZer






click ↗
多 媒體寫作
圖像和文字
幾乎
等同的重要

在 這裡,我們要學會如何把圖像放到網頁 上。有一般的靜態圖像, 同時也教如何把動態圖檔放到網頁上。
最後還有一些老師的寫作、編輯心得,給同學參考。
先學會把圖像放到網頁,才有能力思考圖像和文字要如何來「整合性的寫作」。

一、首先要將你想呈現的照片上傳到網路。
二、要找到上傳到網路的照片的「網址」。
三、然後就可以運用「網址」來下語法,寫入網頁。



影音教學(1/3):嵌入圖片基礎使用操作




影音教學(2/3):圖、文整合寫作/編輯的注意事項



影音教學(3/3):將Gif檔及動態圖檔放到網頁上





上傳照片到網路
◆ 上傳照片到google像薄並設為公開


◆ 如果照片還是無法在網頁秀出來,請看此!

注意:切記!
一、請一定要設定可分享的檔案夾。
二、請一定要從桌面上把照片拖入檔案夾內。這一步驟才能確保作用。



圖像使用常見的小問題/ Tips
◆ 如何設定正確長寬比的圖像尺寸



Kompozer中,圖像的文接圖及文繞圖技法




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>






2012年5月20日 星期日

網頁寫作/編輯軟體Kompozer:第一次使用就上手



Free !
教學使用網頁寫作軟體
kompoZer
所學的技能和寫作觀念,可以快速轉換為使用DreamWeaver!

Q:


A:
老師啊!奇怪了。KompoZer這麼簡單、好用,為什麼還要學Html語法?煩人咧!

對啊。現在都有電子計算機了,為什麼我們還要學加法、減法等等基本數學呢?這道理是一樣的!
知道加法是什麼,什麼場合要用加法,那麼電子計算機才派得上用場。Html和網頁編輯器的關係也是如此。



! 教學內容說明:


這次的教學內容稍微多了一些,老師先做一些說明,
讓同學能有較為清楚的學習架構。這次我們有四個部分的影音教學。

  1. KompoZer的安裝及直覺式的第一次寫作。先跟著影音來跑過一遍,這樣才能有往下理解的經驗值。
  2. KompoZer這軟體的基本設定,以及網頁呈現本身的基本設定。
  3. KompoZer這個網頁寫作、編輯軟體如何和小世界網路組作業規格配合。
  4. KompoZer要如何和google blogger的寫作配合。

這四個部分是習習相關的,請同學務必耐著性子看完。
這樣可以減少以後會經常碰到的小麻煩。



使用軟體 :KompoZer。官網下載頁面



影音教學:下載及安裝(1/4)

2014年版本
2012年版本





影音教學:軟體架構及使用介面(2/4)

2014年版本
2012年版本





影音教學:小世界網路組寫作的基本設置(3/4)


編輯區頁面居中、寬度 640px 的語法:

<body style=" margin: auto; width: 640px; ">

詳細說明的教學網站↗


影音教學:和google blogger布落格寫作配合(4/4)


詳細說明的教學網站↗



同學提問:「複製」與「貼上」出了問題?

這二個常被使用的功能,要特別注意的部分。如果你複製與貼上的
過程,常常得到與你預期之後外的結果…。請看下面影音說明:

【2014年版本】複製文字的技巧↗



2012年5月17日 星期四

滑鼠移到文字或圖片上,跑出說明文字

title="說明性文字"


請把滑鼠移到我

多媒體文本寫作,寫作元素之間互動性,
是寫作者要常放在心上的。
互動性,並不只是好玩而已,那真的不是
挺重要的。而是透過寫作元素的互動,
讓資訊的呈現更為豐富。這才是「心法」。
這是因為螢幕閱讀的時代來了。

這次我們要處理,把滑鼠移到某一文字或圖片,會跑出更多的說明性文字。 這是常用的技法,也是基礎性的互動文本練習,即一般所說的 tooltips 功能。這一語法就是 title="xxx" 。


文字互動說明的語法:

<span title="世新新聞系多媒體新聞授課老師">李明哲</span>


結果
李明哲

說明
我們可以看到,在「李明哲」這三個字的前後有加上語法。
<span title="xx">李明哲</span>。
這樣,滑鼠移到這三個字時,就會跑出說明文字。


圖片說明性文字的語法:

<img title="夏天的花朵等待著陽光" src="http://farm8.staticflickr.com/7065/6868049716_15fc49cb6c_z.jpg" width="320" />


結果


說明
同樣的,在<img src="xx"/>的裡面,加上相同的語法 title="xxx",
當滑鼠移到圖片時,就會有說明性文字跑出來。<img src="xx"/>這還記得嗎?
這是嵌入圖片的語法。


好了,有同學會想問:
Q:如果說明文字很長,我想段行,那要如何來處理呢?
A:這也很簡單,請看下面說明:


也就是,在title 裡面寫文字時,你也直接按下 enter 來分行,這樣就可以形成斷行的文字呈現樣態。


補充說明:
title="xxx" 這一語法可以和許多 html 或是 css 語法相互配合。除了文字和圖片語法外,例如<div title="xxx"...>,<a href="xxx" title="xxx" ... >,<embed title="xxx" ... > 亦可。


超快速上手:使用kompozer




更多有趣、好看的tooltips式的互動補充說明做法:

一、請參考Hint.css(滑鼠請移入)。

二、請參考Tooltipster(滑鼠請移入)。



2012年5月15日 星期二

影片不轉,我來轉:影片格式的轉檔


生氣沒有用!腦袋轉一轉就OK!
是的影音開不了,就用格式工廠來轉轉轉。

數位時代,有太多工具可以取得影像或影音。單眼數位相機、消費型數位相機、手機等等。但每部機器往往都會有自己的影音格式,要進入後製影音編輯時,有時需要轉檔,將影音轉成特定格式,以配合影音後製軟體的要求。

ü 如果同學也是使用我在教學中所用的windows xp 中的movie maker,那 就要將影片轉成WMV檔。
ü 如果是用window 7的同學,因為是使用新版的movie maker,一般而言 ,AVI檔也是可以用的。同學可以試看看。


u 轉檔操作一次就搞定!

(1) 轉檔軟體:格式工廠。官網下載頁面

影片轉檔影音教學:


注意事項:
(1)還是提醒同學,最好把安裝軟體後的亂碼改成看得懂的字眼, 這樣在工作時心情會好一點。


u 有關技巧概念的一些補充說明:

技巧是理性的,但卻是非概念性的,
因而允許在非判斷事物的領域中有判斷存在。

一般人通常都重視內容,對技巧都不甚措意。

我一直對這種「習慣」有點無法直接認同。在阿多諾(Theodory W. Adorno)《美學理論》中有這麼一句話:
技巧不是信手可得的各種手段的過剩現象。技巧是一種積累起來的適應審美對象之要求的能力。……
無論怎樣,技巧作為藝術的凝結定形的中介,如此一來便超過平凡事物的水平。技巧確保藝術作品比事實性內容的堆砌意味著更多的東西。這一「更多的東西」便是藝術的主旨。(阿多諾著,王柯平譯,1998:370-371)
換言之,技巧的積累是創作者對某一種文本(新聞亦然)表達其概念的必要中介手段。如果任何媒介在表達想法上都有其限制,那麼透過「技巧」就有可能超越這種媒介上的限制,從而傳達出媒介凝結定形後的「更多的東西」。

阿多諾對技巧的看法,很具有啟發性。他說道:「技巧是理性的,但卻是非概念性的,因而允許在非判斷事物的領域中有判斷存在」(阿多諾著,王柯平譯,1998:366)。這是很典型的阿多諾辨證式的語言。技巧是「理性的」但又是「非概念性的」。之所以是「理性的」,那是因為技巧是可用理性來論述的;之所以是「非概念性的」,那是因為技巧的使用往往「存乎一心」,透過理性的技巧來表現啟蒙理性視角之外的「真理性內容」。因之,他才會說道技巧是「允許在非判斷事物的領域中有判斷存在」。

「非判斷事物的領域」即是所謂啟蒙理性所無法統制的領域,在此指的是藝術領域。但阿多諾非常強調我們又不能因此便說藝術是沒有判斷標準的,只是個人直覺的反應;因之在非判斷事物的領域中(如藝術)仍然要有「判斷」存在。「技巧」在此,被賦予了相當重要的理論地位。

當然這種理論定位又是阿多諾的「辨證式理論」,他在對技巧的理論思考上說道:技巧「除了提供衡量藝術作品之『邏輯』的標準之外,技巧還決定何時何處就得把邏輯懸置起來」(阿多諾著,王柯平譯,1998:366)。換言之,如果我們也仿用阿多諾式的辨證語法可以這麼說:我們運用邏輯來使用技巧,但應用技巧的最後目的在於將「邏輯」懸置起來。也正因如此,「技巧本身引導具有反省能力的人進入藝術作品的內核」(阿多諾著,王柯平譯,1998:366)。

參考書目:
阿多諾著,王柯平譯,1998。《美學理論》,成都:四川人民出版社。


2012年5月10日 星期四

圖像的拼貼:圖像基本技法



e 讓圖像「精準」表達你的概念  f
拼貼出你的想法
在多媒體文本的世界,
圖、文是居於同等重要的地位。
這和我們傳統平面以文字為主,以影像為輔的習慣,
絕對是完全不同的。
因之,透過對影像的拼貼,
創造更為豐富的圖像精準意義,是重要的基本能力。
掌握了圖像技法,理解了圖像語法,
搞懂了圖像意義表現的形態,
才能在多媒體文本寫作過程,
真正讓圖、文站在平等而互補的立場。
˜
學者 Lester 在《視覺傳播》的〈互聯網〉一章中即強調:說「只有當文字和圖像位居同等重要的位置時,互聯網才能成為真正的社會力量」(Lester著,霍文利等譯,2003:439)。


¢ 範例講解:
同學,有看出上圖是用一張去背圖(左)和一張照片(右),
拼貼出來的嗎?
這就是「影像識讀」的功力。
在多媒體的文本世界,
圖像是和文字一樣平等而重要,
如果對文字你可以挑出錯字,可以看出典故用錯,
在多媒體世界,你也要有能力一眼就看出:
多媒體的寫作者是如何使用圖像的!
圖片引注:林妗鎂(2012年5月7日─2010年5月13日)。〈細細保存金棗酸甜味〉,《國語日報週刊(進階版)》,88期, 14版。


¢ 教學影音:
教學使用軟體:photoshop cs 5.1

圖像拼貼教學影片:


圖像拼貼操作重點要項:
(1) 圖像排列位置:首先要去思考各式圖像所要擺放的位置。
(2) 計算合成圖的長寬:經過計算來決定合成圖所要的長寬。
(3) 開新檔案:檔案〉開新檔案。
(4) 拼湊各圖:視窗左側工具盒〉移動工具。
(5) 平面化:圖層〉影像平面化。
(6) 存檔:檔案〉另存新檔(常用*.JPG檔)。

注釋: Lester, P. M.著,霍文利等譯,2003。《視覺傳播:形象載動信息》。北京:北京廣播學院出版社。





使用ppt的快速拼圖大 法

拼圖其實很常使用。但有時寫作為求速度,可以使用ppt來快速形成圖片的編輯與拼貼表達。more information!!









2012年5月8日 星期二

讓圖像主體站出來:「去背」、「淺景深」技法



讓你想要的圖像主體,從畫面中站了出來。
去背:創造圖像焦點的常勝手法!!!
★ ★ ★


圖像去背是多媒體文本寫作必備的技法之一。 這並不是在改圖像,而是在適當時候,運用去背圖像, 以求得更好的文本理解可能性。 當圖像在充當「證據」或求真的表徵時,去背當然是不好的。 但如果是應用在互動式的多媒體文本表現,適當及有創意的運用, 可以讓互動文本充滿閱讀樂趣。圖像的「淺景深」技法,也是同樣的道理。
  ◆
讓文本充滿閱讀樂趣,是媒體從業人員的專業能力。媒體的作品是要讓人喜歡來看的,而不是要去教訓人家的。如果你覺得的你的作品是很高尚的,要人家耐著性子來看,那你要去當教授,寫教科書才是。

先來看看範例:(請移動滑鼠到畫面,再按滑鼠一下)



去背範例二滑鼠移入↓


國小的椅子
回憶中,國小時候的椅子。
這是張去背圖,把背景去掉,
讓主體「椅子」凸顯出來。
這樣和文字的搭配上,
就更為容易形成圖文整合寫法。



圖像「去背」技能影音教學,photoshop:


去背操作重點要項:
(1)複製圖層:圖層〉複製圖層。
(2)圈選:視窗左側工具盒〉套索工具。
(3)反轉圈選:選取〉反轉。
(4)去背:按〔Del〕。
(5)存檔:檔案〉另存新檔〉*.GIF檔格式。
(6)去背圖一般而言通常可以用二種格式來儲存,一是*.PNG檔,一是*.Gif檔。像常用的*.JPG檔,就不 能儲存去背圖。



使用StylePix(2.0)對圖像「去背」、「淺景深」技法(建議,上課用):




去背操作重點要項:

(1)複製圖層:按右鍵〉複製。
(2)按一下〔背景copy〕層,啟動此層。
(3)圈選:視窗左側工具盒〉套索工具;【軟化度」填入 3。
(4)把主體圈點出來,最後記得「閉合」。
(5)反轉圈選:編輯〉選取〉反相。
(6)去背:按〔Del〕。
(7)將其下面的背景層,取消呈現作用。取消勾選。
(8)存檔:文件〉另存為〉*.png檔格式。(png檔才能存去背圖)
-----------------------------------------------------------以上去背方法---------------
(9)按背景層,啟動此層。勾選呈現。
(10)過瀘器〉模糊〉動態模糊
(11)存檔:文件〉另存為〉*.jpg 檔格式。
-----------------------------------------------------------9-11為再形成淺景深-- -----



 淺景深的技法效果滑鼠移入↓




 理解:

淺景深的效果,可以讓「主體」凸顯出來,但同時「背景」仍可模模糊糊的「存在」。這樣,主體有被凸出,但同時,圖像存在的社會性脈絡仍可以被保留。這可以 擴大理解的背景知識範圍。
這一技法,可以防止使用「去背」技法時,所產生的「去脈絡化」的理解上的缺陷。




2012年5月6日 星期日

大量圖片的互動處理 Autoviewer的使用


} Image Gallery 說故事的新方式,報導新利器! ~
Autoviewer是現在很熱門的 flash gallery 的應用程式。它搭配著photoshop來使用,簡單、快速。
Flash gallery的應用是很重要的多媒體文本經驗值之一,可以在操作使用過程,體會互動性思考大量圖像的版面思考

Autoviewer 的呈現範例
Autoviewer 是 SimpleViewer 系列的 image gallery 中,最基礎的一個。這一列系的 image gallery 好用,易操作,更重要的是非常適合敘事性文章的使用,如新聞文本。其中的 TiltViewerPostCardViewer 等,都易於溶入新聞性報導的呈現。


使用軟體:
  1. Photoshop cs 5.1
  2. 下載 autoviewer ( 直接下載 Airtight Photoshop CS4 scripts installer  )
  3. 下載 Notepad ++ (直接下載  Notepad++ v6.1.2 Installer)
Q:為什麼要使用Notepad++ 來取代常用的「記事本」,以進行語法編輯呢?
A:目前中文有二種常用編碼,Big5及UTF-8,「記事本」軟體太陽春,不會
     自動判斷編碼,常導致出現亂碼。用Notepad++則可解決這一問題。如以下教
     學範例,使用記事本會出現亂碼,使用Notepad++則不會。

î 教學影片 1/3:軟體下載及安裝


下載及安裝操作重點要項:
(1) autoviewer是photoshop的外掛擴充使用軟體,必須在使用photoshop中才能操作使用。
(2) 安裝過程要有Adobe Extension Manager這一軟來協助安裝,通常在CS套裝軟體內會有附,也可以免費下載。


î 教學影片 2/3:Autoviewer基礎使用



Autoviewer使用操作重點要項:
(1) 在使用Autoviewer之前,請先使用photoshop來檢查調整照片。
(2) Autovierwer所產生的檔案夾,請要置入到可對外連結的網路空間或FTP。
(3) 若要使用dropbox免費空間,請看安裝及使用說明
(4) 教學影片使用新聞系Ftp,及檔案網址的轉換


î 教學影片 3/3:使用 iframe 嵌入網頁 

老師強烈建議使用這個方法,簡單、快速! 在使用 embed 語法所碰到的許多「無言」問題, 都可以用這一嵌入語法獲得解決。


語法:
<iframe frameborder="0" height="570" scrolling="no" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/gallery1026/20121122/index.html" width="430"></iframe>

語法說明:
(1) iframe 的寬度和高度要比你所設定的照片寬、高,都要大上一點才好。例如,範例中的照片高度 373,寬度是560,所以我設iframe的寬度(width)是580,高度(height)是393,比照片各大上20px。
(2) 把做好的 gallery 資料夾放到 FTP 或 Dropbox 後,請找出 index.html 這個檔案的位置網址,再 放到 src="xxx"中,即紅色字體部分。 即可將整個語法嵌入網頁。


î 教學影片中的範例呈現 




2012年5月4日 星期五

利用scroll bar創造互動文本特色 全新說明,更好學




最基礎的文字互動形式
互動文本的形態:捲軸使用





各位同學:
從這個範例我們可以看到,
例用scroll bar的功能可以產生的
基本文本互動效果

當有許多文字說明,
遠遠超過圖的長度時,
利用這個功能,我們可以讓圖、文的
展現更具互動性。
同時可以讓讀者去選擇,
是否要往下看更多的訊息。

如果你有看到這裡,
這裡我要感謝一位同學,
她問我這個問題,
我才了解之前所做的scroll bar
功能說明,是很不好用的。

這是改良版的說明,
同學可以再試試。




快速上手使用教學影片


影片教學中的CSS:


<style>

.makeoverflow0224 {
/* 啟動 */
overflow: scroll;
/* 隱藏x軸*/
overflow-x: hidden;
}

/* 基本黑體內文 */
.ironcontent01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
}
</style>



2012年的教學版本。 click here!



2012年5月3日 星期四

裁切圖像以及裁切成固定大小圖像



圖檔不縮小,在網頁上就會很慢很慢的跑出來。

你一定要會把照片的檔案縮小!!

一般數位相機拍下來的圖檔都很大,畫面元素也會太多。 在做數位文本時一定要先經過裁圖的處理,以及轉換大小。 這次我們來處理如何裁圖及轉換圖檔大小。會裁圖及改變圖檔大小是數位編輯及數位寫作 必要的基本功之一。


2017年版本:使用Hornil StylePix
使用 CSS 語法來裁圖


這個軟體和photoshop非常類似,會了這個,就會使用photoshop。
但重要的是,這是免費軟體。同時有綠色版本(portable version)可以直接放在隨身碟,不用安裝 即可使用

使用步骤:
一、請到官網, 找到下載頁面
二、請下載portable version,即免安裝的綠色版本。
三、解壓縮。
四、請按二下StylePix ,即可啟動。

網路寫作使用圖像的二種最重要技能是:
(一) 依原比例的變更大小;(二)固定長寬比例的裁切大小。

請看教學影音:




Ü Follow Me!Þ


※ 教學軟體:photoshop cs 5.1
※ 練習圖檔:請按此下載 (圖像出來後,請在圖像 上按右鍵,再按「另存影像」)

8影音教學內容:
(1)直接改變圖檔大小:

(2)裁圖並改變圖檔大小:
教學影音內容注意事項:
(1) 存檔時,請用「另存新檔」這一功能選項,這樣,原圖檔才能被保存。




使用CSS語法來裁圖     



作法:
  1. 先用DIV來設定想要呈現圖像的大小。
  2. 在DIV內置入圖像。
  3. DIV設定overflow語法,來隱藏超出DIV的圖像。
  4. 圖像設定position: relative; 來移動圖像。

CSS語法:

<style>

/*加到 div 的Class*/
.divoverflow {
width: 300px;
height:200px;
border: 1px solid black;
overflow: hidden;    /* 設定超出隱藏 */
}

/*加到 img 的Class*/
.imgmove {
position: relative;   /*設定可以移動*/
width: 160%;    /*讓圖像變大*/
top: -20px;       /*向上移動*/
left: -160px;     /*向左移動*/
filter: brightness(140%);     /*變亮濾鏡*/
}

</style>


請 按此看原圖與裁圖的變化


2012年5月1日 星期二

用webcam就可以當一位網路大記者

各位,要當主播很容易的。
在網路時代,只要會使用webcam,或是智慧手機,
你就可以成為全方位的網路記者,
或是多媒體文本創作者。
左邊的範例是用webcam,
加上簡單的flv檔案,就成了。

學會運用這招,就可以隨時隨地用手機或webcam拍攝新聞畫面。
再轉檔成flv檔之後,就可以上傳播報新聞了。大記者 + 大主播,
自己一人就可以全包了。


請看以下教學影音:



相關資訊:
語法:

<embed
src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/flvplayer/player.swf?file=http://檔案位置.flv&image=http://檔案位置.jpg"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="160" height="140" >

操作動作:
1. 請把你製作的flv影音檔檔案網址取代並貼上到  http://檔案位置.flv
2. 再把你製作的jpg影片封面圖像網址取代並貼上到  http://檔案位置.jpg
3. 其餘的部分可以不要動。

影音播放器大小為  width="160" 寬度  height="140" 高度。

**特別注意**
不知同學是否有留意到,教學影片中所應用的flv影音檔,其大小是160x120。
但在語法的設定中,播放器高度卻是140。
這是因為整個影片播放器必須加上下方的影音控制列,即可以控制播放
和停止的那條功能列。這一功能列的高度大約是20px。所以在設定播放器
語法時,其高度height="xx",xx必頁是flv影音檔的高度120px,再加上控制列
的高度20px,所以總共是120+20=140。
這很重要,不然影片的封面圖片(160x120)會因播放器語法設定的高度不足
而跑不出來。
切記!!

dropbox免費空間的使用,請參考dropbox影音教學

如使用新聞系ftp,檔案位置的寫法參考ftp影音教學
再提示一次新聞系ftp檔案位置的寫法:

FTP空間的檔案位置網址:
http://newsweek.shu.edu.tw:8080/你開的目錄/次目錄 /檔案名稱 .副檔名