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

2013年9月16日 星期一

CSS 的文字魔術


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>


2013年9月12日 星期四

漂亮展出互動影音小視窗


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

影音教學


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


1.請在<head>xxx</head>間或<body>之後貼上下列程式碼:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jqueryui/jquery.youtubepopup.min.js"></script>
說明:
  1. 紅色的 jquery-1.9.1.js 這條程式碼,如其他套裝程式已使用,則不用再寫入。


2.請在<body>之後貼上下列驅動互動作用的 jquery 程式碼:
<script>
$(function () {
    $("a.youtubepopup").YouTubePopup({width:640, height: 360, overlayOpacity: 0, draggable: true});
});
</script>
說明:
  1. width: 640 是指 youtube 要播放的影音的寬度,height: 360 是高度。
  2. draggable: true 是指設定為可自由移動。


3.為所要按下文字寫入html控制碼:
<a class="youtubepopup" href="http://www.youtube.com/embed/c80sS-EfSTI?rel=0">按這裡就會展出影音小視窗 </a><br>
說明:
  1. href="http://xxx" http://xxx 是指影音的位置網址,取得方法請看影音教學。



原始語法出處 jQuery YouTube Popup Player Plugin

2013年9月8日 星期日

按一下跑出互動視窗


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



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

按一下,

互動的跳出說明小視窗

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

使用程序

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  1. 紅色部分的 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>

  1. 請先設定識別代碼  id="xxx" 以利互動程式使用,此例為 id="anly001"。
  2. 因為內容是互動後才要呈現,所以要先隱藏起來,style="display: none;" 。
  3. title="xxx" xxx是在互動說明視窗上的標題。
  4. 其餘的是這個 Div 的 CSS 設定。除了寬度之外,其他的設定都會作用。寬度要留給叫出互動視窗的 Html  語法來使用。
  5. 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>
  1. '#anly001' 是要互動 Div 的指定代碼(id="xxx"),亦即代碼是 #anly001 的 Div,將會被載入於互動視窗內。記得要在代碼前面加上 # 。
  2. width: '640',這是設定互動視窗的寬度,很重要,不要忘了。高度則是自動就可以,height: 'auto'。
  3. effect: 'drop' 是 drop 這種展開的方式, 還有更多的展開方式,例如 effect: 'slide' ,effect: 'explode',effect: 'drop'。duration: 2000 是指展開過程的時間,可以自行調整數字,例如改成 1500 ,改變視窗跑出的速度。direction: 'right',是指視窗從右邊跑出來,drop 之外的其他展開方式就可以不要設這個指令。

 

2013年9月1日 星期日

5秒搞定動態圖檔 Gif 檔!

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


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

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


動態Gif檔製作過程

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

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