李明哲老師多媒體互動寫作教學: 9月 2014

首頁

初學者技能教案專區

google Meet遠距上課技能

javascript互動文本寫作

融媒體Wix教學

網路新聞寫作：HTML&CSS

新聞影音剪輯：premiere

匯流寫作基模知識：gravit

基礎影音編輯：shotcut

基礎向量圖像編輯：inkscape

基礎圖像編輯：GIMP

排版設計scribus

匯流新聞專題寫作

影音新聞製作與剪輯（上課用）

新聞直播編導／OBS（上課用）

基礎新聞攝影（上課用）

數位排版/敘事（上課用）

西洋哲學史導讀

老子探義導讀

《論語》小談

《法華經》的思

品嚐《華嚴經》

Unsplash圖像集

Pexels 圖像集

我的給大學生書單

傳播理論／研究

2014年9月24日星期三

圖像剪裁固定大小、去背、拼貼、透明：StylePix

完全免費的圖像處理軟體

剪裁固定大小、去背、拼貼、透明

這幾個技能是圖像編輯中最常用的，
基本上你會了，就足以應付我上課作業的需求了。
記得放入usb中，就可以隨時帶來帶去，馬上可以用。

一、下載、剪裁固定大小圖像：

教學影音說明：

軟體下載頁面，http://hornil.com/tw/downloads/stylepix/ 。
view / option /Display Language: Chinese Traditional，可變成中文介面。

二、拼貼、去背、透明處理：

教學影音說明：

去背圖及半透明圖，請存成 png 檔。
去背流程：複制 / 套索 / 選取閉合 / 編輯 / 選取 / 反相 / delete / 底層圖層取消作用 / 取消選取 / 另存新檔 *.png 。

2014年9月21日星期日

按A就會跑出／隱藏B的互動設置：jQuery

按A就會跑出／隱藏B的互動設置

jQuery 基礎互動寫作

比較細節的內容或資料，一般我們不會馬上就放在頁面上，而是藏起來。
等讀者有感覺了，想看了，再「按一下」之後的跑出來。以免太多資料內容，把讀者嚇壞了。

教學示範範例：

海軍官員說，立法院通過近8億元翻修【←click】老舊的海獅級潛艦預算後，將開國內標，由台船擔任主合約商，再由台船、聯設中心與海軍潛修中心組成維修團隊。因為台船沒有合適船塢，更換後段船殼工作，將在海軍乾塢進行，若預算審查順利，預計明年第二季展開維修工程。

官員說，未來潛艦國造將選擇較簡單的構型，暫時擱置絕氣系統（AIP）。「飛鏢計畫」為荷蘭造海龍級加裝潛射魚叉飛彈工程，首艘已近完成，可望在台灣海域進行試射。

林郁方說，整修海獅級未尋求美方協助，台船與海軍都認為有能力更換船殼，但因應艦殼拆開後，原來貼壁管線可能遭遇無法預期的問題，整修預算已從 4億5000萬元提升到8億元。可提供技術協助的國家，不是只有美國，也有歐洲國家。

一、影音教學

二、置放 jQuery 主程式

請將主程式置放於<body>之後。

三、為要「開啟／隱藏」的編輯元素設 ID

操作程序：選定元素【本例 DIV】 > HTML > 屬性（按二下）> HTML屬性 > 選擇【ID】 > 內含值
如一開始要設定隱藏，語法： stye="display: none;" 。

四、設置要互動的寫作元素及互動程式

javascript: $('#a004').slideToggle(800);

說明：

上列互動語法是要放在「要按下去」的「編輯元素」裡面的，此例是文字。
slideToggle是指：如果開啟的，按下去就會「隱藏」；如果是隱藏的，按下去會「開啟」。程式會自動判斷。
紅色字體處，是步驟三所設定的ID代碼。800，即藍色字體處，是「速度」。一秒是1000。
設置的操作：span【本例文字】 > HTML > 屬性【按二下】> JavaScript事件 > 屬性 >選擇【onclick】> 內含值【程式置入處】
移過去想跑出滑鼠 icon 的 CSS：style="cursor: pointer;" 。

2014年9月19日星期五

慢工出細活：搞定DIV的調校

大開眼界搞定DIV

各式各樣的文字調校　隨心所欲的文本樣貌
簡單的功能操作法直覺式的調整變化立即看見

我想要更進一步了解css div基本語法 click here↗

調整文字與邊界的距離：

CSS > 屬性 > 排版定位 > 補白

練習作業：

安靜的船中，看著沈靜的橋

構思：

一、上方做一個DIV，裡面有圖像和文字。
二、下方放置大圖。
三、DIV做出padding-left: 25px;（補白／左邊），左邊留白。文字加背景色。
四、大圖用margin-top: -125px;（邊界／頂端），向上移動。

五.、調整DIV的position: relative; （位置／相對）以及z-index: 2；（z軸深度），使DIV向上拉高一層，才不會被蓋住。

練習作業二：

練習作業三，可互動形態：

呈現樣態：（mouse hover ↓）

廟宇，那眼神如神。

構思：

一、做DIV，設id（#pichover20171122），內置三張圖。
二、用CSS class來分別為圖片位移以及排定層次順序。
四、套入互動CSS，這是用「父子關係」來寫的。

CSS語法：

<style>
/*層次的位移、排序，放置於img */
.zindex001 {
position: relative;
z-index: 1;
}

.zindex002 {
margin-top: -300px;
margin-left: 240px;
position: relative;
z-index: 2;
}

.zindex003 {
margin-top: -75px;
margin-left: -5px;
position: relative;
z-index: 3;
}

/*互動功能語法，id放置於DIV*/
#pichover20171122 img{
padding: 0px;
transition: 0.3s linear;
}

#pichover20171122 img:hover {
position: relative;
z-index: 9;
transform: translate(3px, -3px);
}

</style>

注意：

CSS的各種用法中，控制權的大小分別為，style > id >選擇器 >class。小心，在這個範例中，互動功能使用到 hover ，而 hover 是以父子關係選擇器來驅動。因此，你不能用style="xxx"的方式來處置圖片，那樣的話，hover的效果就會失效（style> 選擇器）。而是要用 .class 來設置圖片。這樣hover互動才會有效。父子關係選擇器 > class 。

2014年9月17日星期三

簡單、快速：3秒調出漂亮文字布局

文字在螢幕上呈現的耐不耐看，是決定了網路文本要不要被閱讀下去的重要因素。一篇好的數位文本，肯定在文字的呈現上下足了功夫。這不是「字型」的原因而已，因為更重要的是字的大小、行寬、粗細，這三點值得你一再去調整、調校。

一、文字範本的CSS

二、快速套用文字布局影音教學

請把範例之CSS複製到<body>之後。
再依影音教學操作。

【要看啦！】文字的複製、貼上以及嵌入div，的一些超有用的小技巧：

【要看啦！】黑體字怎麼跑不出來？

範例：
<div class="title01">
這是中標的內文
</div>
<div class="word01">
這是一般的內文。這是一般的內文。這樣的可以表現出，文字表現上的大中小之格式。
</div>

呈現：

這是中標的內文

這是一般的內文。這是一般的內文。這樣的可以表現出，文字表現上的大中小之格式。

2014年9月16日星期二

快速排版寫作：表格堆積木法

一個堆一個，由上而下，快速的版型寫作效果

快狀的視覺效果，是網路閱讀必然的要求。人們會在一個又一個塊狀的文本編輯區塊內，速讀式的掌握文意，覺得值得讀下去時，才會有進一步的閱讀動作。塊狀寫作是一位網路寫手必要的寫作概念和技巧。在初學的過程，「表格功能」很適合來讓創作者完成區塊寫作。

按這裡開始表格堆積木 click here!!

※ 左表：設寬度33%。右表：說寬度66%，表格靠右。

快速學會．影音教學

注意事項：

用多個「一列的表格」來堆出所要的寫作版型。
超過一格以上的表格，記得要設定格的寬度，這樣表格才不會亂掉。
最後記得把格線取消，這樣看起來就像排版的樣子。

★ 表格寫作的三個基本動作。一定要會！ click!

★ 常見問題tips：啟動表格，但表格只是小小的不完整。click!

表格及文字的圖文整合寫作

鶯歌陶瓷博物館▼◢

看門的石獅

它的安靜，是來自時間的力量。精神，來自姿色！

線條是主角

那像是來自風的傑作。一種無法被目視的湧動，全部擠壓至一種條狀的吶喊！

範例使用之CSS：

<style>

/*表格內小標 */
.littletitle010413 {

font-family: Verdana, '微軟正黑體';
font-size: 1.31em;
font-weight: bold;
line-height: 1.6;
text-align: left;
letter-spacing: 0.08em;
margin-bottom: 0.6em;
background-color: rgba(192, 192, 192, 0.2);
}

/* 表格內基本細明體 */
.ironcontentmi010413 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
text-justify: inter-ideograph;
letter-spacing: 0.1em;
}
</style>

範例影音教學：

表格基本寫作技能：

表格基本寫作動作（一）。按此前往〉
表格基本寫作動作（二）。按此前往〉
表格基本寫作動作（三）。按此前往〉

更多表格排版寫作範例：

表格基本功：好看的圖和圖說配置。按此前往〉
表格的應用：網頁排版之靈魂。按此前往〉
表格使用基本功：為照片加上透明文字腰帶。按此前往〉
表格使用基本功：把影音貼到照片上面。按此前往〉
從日本雜誌學表格版型。按此前往〉
不同分割比例的表格寫作。按此前往〉
表格內插入表格的塊狀版型寫作實作。按此前往〉
table + div + click互動的整合性排版寫作。按此前往〉

訂閱：文章 (Atom)

2014年9月24日 星期三