李明哲老師多媒體互動寫作教學

CSS的文字布局

Regardless of the theme, websites are a medium for providing information to an audience. Although a few websites are purely image-based, most websites rely heavily on text to communicate with the audience.
Vest, J., Crowson, W. & Pochran, S. (2005). Web design. p. 51. New York: Thomson.

Div + CSS + 文字布局
教學影音video

字型

<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字型語法的運用範例。<br>
</div>

font-family: 字型;
font-family: 微軟正黑體;
font-family: 新細明體;
font-family: 標楷體;

這是中文字的文字布局 CSS 字型語法的運用範例。

大小

<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字的大小語法運用範例。<br>
</div>

font-size: 字的大小;
font-size: 1.6em;
font-size: 95%;
font-size: 17px;

這是中文字的文字布局 CSS 字的大小語法運用範例。

粗細

<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字的粗細語法運用範例。<br>
</div>

font-weight: 字的粗細;
font-weight: normal;
font-weight: bold;
font-weight: bolder;

這是中文字的文字布局 CSS 字的粗細語法運用範例。

行距

<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 行距的語法運用範例。<br>
</div>

line-height: 行距的高;
line-height: 0.9em;
line-height: 2em;
line-height: 20px;

這是中文字的文字布局 CSS 行距的語法運用範例。

字間距

<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字間距的語法運用範例。<br>
</div>

letter-spacing: 字與字的距離;
letter-spacing: 0.3em;
letter-spacing: 1em;
letter-spacing: -3px;

這是中文字的文字布局 CSS 字間距的語法運用範例。

非常重要的補充：CSS的三種使用方式。

影音教學內容：
<style>
.word031001 {
font-family: Verdana, '微軟正黑體';
font-size: 1.06em;
font-weight: normal;
line-height: 1.6em;
text-align: left;
padding: 0.5em;
}

.word031002 {
-webkit-box-shadow: 2px 2px 2px 2px silver;
}

#i031001 {
border: 1px solid red;
background-color: lightgreen;
}
</style>

按一下，

一個可讓閱聽眾自由移動的漂亮影音小視窗就會自動呈現出來。

影音教學

按這裡就會展出影音小視窗

１．請在<head>xxx</head>間或<body>之後貼上下列程式碼：

說明：

紅色的 jquery-1.9.1.js 這條程式碼，如其他套裝程式已使用，則不用再寫入。

２．請在<body>之後貼上下列驅動互動作用的 jquery 程式碼：

說明：

width: 640 是指 youtube 要播放的影音的寬度，height: 360 是高度。
draggable: true 是指設定為可自由移動。

３．為所要按下文字寫入html控制碼：

<a class="youtubepopup" href="http://www.youtube.com/embed/c80sS-EfSTI?rel=0">按這裡就會展出影音小視窗 </a><br>

說明：

href="http://xxx" http://xxx 是指影音的位置網址，取得方法請看影音教學。

原始語法出處 jQuery YouTube Popup Player Plugin

建議參看2017年編寫最新教案 click!

按一下，

互動的跳出說明小視窗

當閱聽眾開始對文本產生興趣，想要知道更多。就要設置互動機制，讓讀者按下去後，跑出更多的補充說明資料。

使用程序

(1). 將下列 jQuery 程式寫入<head>xxx</head>間或是<body>之後：

使用 jQuery 套裝語法來進行特定互動形式寫作，就必須要將特定程式碼載入到網頁讀取資料的過程中。這是必要的程序，也是數位寫作要有的數位技能概念。

紅色部分的 jquery 程式是和 jQuery 相關套裝程式都要用到的「主程式」。如已有使用其他互動套裝語法而載入了這條程式碼，請不要再寫入。注意：不要重覆使用這條程式。

(2). 將互動視窗內所要載入的資料，寫入於 Div 內：

Div 要記得設上識別代碼 id="xxx"，如此才能用 html 語法指定這一識別代碼，把已寫好的特定內容正確無誤互動地叫出來。

<div title="分析報導" id="anly001" style="padding: 0.5em; font-family: 新細明體; font-size: 1.17em; line-height: 1.5em; letter-spacing: 0.1em; display: block; text-align: justify; display: none;">
這是先寫入Div的內容；可以是純文字，也可以加入圖像、影音以及互動功能等等。反正一般編頁寫作／編輯在 Div 內可以呈現出來的內容、形式，都可以使用。在此其實就是當做一般網頁寫作使用。<br> </div>

請先設定識別代碼 id="xxx" 以利互動程式使用，此例為 id="anly001"。
因為內容是互動後才要呈現，所以要先隱藏起來，style="display: none;" 。
title="xxx" xxx是在互動說明視窗上的標題。
其餘的是這個 Div 的 CSS 設定。除了寬度之外，其他的設定都會作用。寬度要留給叫出互動視窗的 Html 語法來使用。
padding: 0.5em，字和 Div 邊框的距離。font-family: 新細明體，字體的設定。font-size: 1.17em，字的大小。line-height: 1.5em，行高。letter-spacing: 0.1em，字和字的間距。text-align: justify，文字排列左右對齊。

(3). 設置 Html 互動語法給要按下去的編輯物件：

Html 互動語法可設置給文字、圖片、Div 等編輯物件。此例為文字，按下文字後，說明視窗就互動地跑出來。【按這裡看說明視窗】。

<a href="javascript: $('#anly001').dialog({autoOpen: true, show:{effect:'drop', direction:'right', duration: 1500}, width: '640', height: 'auto', resizable: false});">【按這裡看說明視窗】</a>

'#anly001' 是要互動 Div 的指定代碼（id="xxx"），亦即代碼是 #anly001 的 Div，將會被載入於互動視窗內。記得要在代碼前面加上 # 。
width: '640'，這是設定互動視窗的寬度，很重要，不要忘了。高度則是自動就可以，height: 'auto'。
effect: 'drop' 是 drop 這種展開的方式，還有更多的展開方式，例如 effect: 'slide' ，effect: 'explode'，effect: 'drop'。duration: 2000 是指展開過程的時間，可以自行調整數字，例如改成 1500 ，改變視窗跑出的速度。direction: 'right'，是指視窗從右邊跑出來，drop 之外的其他展開方式就可以不要設這個指令。

５

秒

搞

定

動態影像！Gif檔，馬上點出主題重心！

AnimateGif！超快速將一般圖檔轉成Gif！

螢幕閱讀就是要快速掌握文章的重心。幾張重點圖像組成的Gif檔，可以和標題或是中標配合，快速把文章的主題提示出來。既可以發揮動態圖像的意義豐富性，又不同如video般的佔用讀者的時間。

當貓睡得毫無警戒之時，據說就是對這個家有了信任感。
在半夜睡不著時，看著這種表情，其實是很羡慕的。

領養貓波妞進門才二天…↑

我們在台北市流浪貓保護協會和波妞結下了同住一屋簷的緣分。協會的人再三叮囑她會怕生很多天，但幾小時後，她就彷若是家中的老大。

動態Gif檔製作過程

(1) 挑選照片，同時要把所有的照片的大、小設定為相同。
(2) 下載軟體 AnimateGif 。這是綠色軟體。下載後解壓縮，在 AnimateGif.exe 按二下就可以執行。
(3) 使用軟體，真的超簡單，隨便二、三下就完成了。【影音教學展開／閉合】
(4) 把 Gif 檔當作一般的圖像檔來使用就可以了。使用相同語法來嵌入到網頁。

補充說明：請到google裡用AnimateGif這字來搜尋，就可以找到下載軟體。

李明哲老師多媒體互動寫作教學

2013年9月16日星期一

CSS 的文字魔術

2013年9月12日星期四

漂亮展出互動影音小視窗

2013年9月8日星期日

按一下跑出互動視窗

2013年9月1日星期日

5秒搞定動態圖檔 Gif 檔！

2013年9月16日 星期一