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

2014年1月20日 星期一

學生超愛用的影音跳出法:fancyBox 快速使用法





為了教學上便利,重新編寫fancybox語法,更方便設置。
如果你是我的上課學生,請使用最新編寫操作方法。
請至(2016年)fancybox:一次設定多次使用







本文示範範例 & 影音教學



fancyBox多功能使用詳細教學【2013年4月版本】↖
fnacyBox可以跳出來的資料類型有很多種,例如文字、影音、gallery、圖文區塊等等。跳出video是最常用功能,因此特別再獨立出來給同學快速使用。

1. 請將下列程式碼複製並置於<head>xxx</head>之間或<body>之後:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css"
media="screen"></link>
注意事項:
1. 暗橙色 juqery-1.9.1.js 程式碼,如其因使用其他互動模組而已寫入,則不用再置入。原則上,一篇數位文章中只要出現一次即可。請保留在原始碼中最早出現的那一條。
2. 上我課程學生或使用KompoZer編輯器,建議將程式碼置於<body>之後。
2. 請將下列驅動程式碼複製並置於<body>之後:
<script>
$(function () {
$("#lmca01").click( function () {
$.fancybox({
width: 560,
height: 315,
href: 'http://www.youtube.com/embed/TDeGpEx29vY?rel=0',
title: '這是新聞系的資料交換雲',
type: 'iframe',
padding: 5,
openEffect: 'elastic',
preload: true
});
});
});
</script>
注意事項:
1. 指定跳出影音的寬度及高度。width: 560,長度 560px; height: 315,高度 315px。
2. 影音在youtube的位置網址。href: 'http://xxx'。→ 找到影音位置網址的方法,請看教學影音。
3. 所跳出影音下方的文字說明。title: 'xxx'。
3. 在所欲的編輯區域,置入下列圖像的語法:
<img id="lmca01" style="width: 64px; height: 64px;" alt=""
src="https://lh5.googleusercontent.com/-RtozQrxHsWE/UiNcUDr91PI/AAAAAAAAOT4/ZJDYY-8iGJ8/s64-no/1378067043_play-circle.png"><br>
說明事項:
1. 在網頁中按下這圖像,就會跳出步驟 2 所設置的影音。
2. 你可以設置自己的圖像,將 src="xxx" 中的xxx,改成自己想要圖像的位置網址。
3. 一定要設置識別碼 id="xxx",此例為 id="lmca01"。這一識別碼要和步驟 2 的 $("#xxx"),此例為 $("#lmca01"),相同(藍色字的部分)。換言之,一旦按下此圖像後,就會去執行步驟 2 的設定。
4. 如果想要再設置另一個跳出影音,要重復步驟 2 和步驟 3 。同時要設定新的 id="xxx" 以及 $("#xxx"),注意:兩者的 xxx 要相同。例如 id="test01" 以及 $("#test01")。


功能二:按文字或圖像跳出大照片
當我們按下一段文字時,會跳出大的照片。例如,美麗的落日(click)。 這是非常常用的互動模態。請務必要會。

同時也可以是按下小圖,如下圖,就跳出大圖。
  ←click


教學影音:



jQuery  語法,請放於<body>之後:

<script>
$(function () {
$("#lmci01").click( function () {
$.fancybox({
fitToView: false,
beforeShow: function () {
        this.width = 600;                
        this.height = 450;                
    },
href: 'https://farm2.staticflickr.com/1515/25486405835_4e45369b9a_b.jpg',
title: '初春時,陽明山上的落日',
type: 'image',
padding: 5,
openEffect: 'elastic',
preload: true
});
});
});
</script>


補充功能:按一下文字, 聽我講 《論語》,跑出影 片。

手型滑鼠指標CSS:  cursor: pointer; 




功能三:按文字或圖像跳出圖文框

有時要對某一資訊再補充說明,就可以使用按下去跳出補 充說明圖文框(click)的互動功能。

教學影音:



jQuery  語法,請放於<body>之後:

<script>
$(function () {
$("#lmch01").click( function () {
$.fancybox({
href: '#a010316',
title: '台北暮色中的溫度',
type: 'inline',
padding: 5,
openEffect: 'elastic',
preload: true
});
});
});
</script>

要跳出的圖文框之設定: 就是做出一個你想要的DIV內容。

<div class="fancyboxinline" id="a010316"><br>
很難想像的在冬天,<br>
一種不可思議的<br>
天空顏色。<br>
恰似在對人的一種擁抱。<br>
</div>


<style>
.fancyboxinline {
width: 420px;
height: 270px;
background-image: url(https://farm2.staticflickr.com/1461/25380866326_769cebf322_b.jpg);
background-repeat: no-repeat;
background-size: 360px;
background-position: top left;
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8;
text-align: right;
letter-spacing: 0.1em;
padding-right: 0.5em;
border: 1px solid gray;
}
</style>

注 意! 讓div消失的CSS: display: none;





2014年1月9日 星期四

世新新聞系的「資料交換雲」!有雲了。




世新新聞系的資料交換雲↖
世新新聞系實習課程,
多媒體素材暫存、交換、編輯專用。
數位大編輯台基礎素材資料庫使用訓練。
暫存期程:二個月。


教學影音注意事項:
  • 交換雲的網址: hdj.shu.edu.tw:8080
  • 進入後請首先選擇: File Station
  • 進入 File Station 後,請選擇 studentp 資料夾,進行資料的上傳和下載。
  • 可以「按右鍵」自行開設小組編輯所要的資料夾。
  • 選擇某一檔案,「按右鍵」後可使用「刪除」、「下載」等功能。
  • 請一定要記得「登出」。
  • 手機專用 app: https://play.google.com/store/apps/details?id=com.qnap.qfile&hl=zh_TW



2014年1月7日 星期二

KompoZer:搞定文字的使用

KompoZer:
多媒體文本並不是把文章影像化,很多人搞錯了。而是文字、影像、影音的相互配



Lisa Graham.
The principles of interactive design. p. 114.
Text on the screen adds expressiveness and style to an interactive document along with meaning. Text details information and brings to life abstract concepts difficult or impossible to convey with imagery. Text is always content, whether it is intended to be read or to serve as a decorative uisual element. Using text is also one of the quickest and easiest ways to communicate large amounts of information.



  • 一、基礎文字的使用操作

  • 教學內容說明:
    1.固定網頁編輯區的寬度並置中的語法:style="margin: auto; width: 800px;"
  • 二、複製文字的技巧及更改字型

  • 教學內容說明:
    1.網頁中文字的四種字型:細明體、新細明體、標楷體、微軟正黑體。



2014年1月5日 星期日

滑鼠到那裡,就變色到那裡:CSS hover


跟著滑鼠就變色:hover



  • 1.請於<head>xxx</head>之間或<body>之後置入下列 產生互動性的 CSS 語法
  • <style>
    .h001 {
    height: 4em; width: 80%; border-radius: 15px; border: 1px solid green;
    }

    .h001:hover {
    background-color: #FF9966; -webkit-box-shadow: 2px 4px 2px 3px silver;
    }

    </style>
  • 2.請在編輯區域置入 DIV 內容區塊
  • <div class="h001" >
    div的內容<br>
    </div>
  • 3.互動執行範例
  • div的內容

另一種常用的設置方法:

CSS設置 方法二:

<style>
.h001 {
height: 4em; width: 80%; border-radius: 15px; border: 1px solid green;
}

.divhover1104 {
}

.divhover1104:hover {
background-color: #FF9966; -webkit-box-shadow: 2px 4px 2px 3px silver;
}
</style>

div 的html:

<div class="h001 divhover1104" >
div的內容<br>
</div>

互 動寫作的三招心法:課堂搞笑版 video。 click!!