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

2013年12月22日 星期日

超有氣質的圖文互動整合




那隻大貓
  • 她總喜歡在這個地點和角度,靜靜的在看著人在家中的走動。
貓科的威嚴
  • 獅子和她是同一種性的;但她的那種威嚴只能用來抗議。
守護神
  • 只要我一離開位置,她馬上佔據。「不要再寫paper了」,她表情如是說。


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/SlidingBackgroundImageMenu/js/jquery.bgImageMenu.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/SlidingBackgroundImageMenu/js/jquery.easing.1.3.js"></script>
2.請貼入下列驅動語法於<body>之後
<script>
$(function () {
$('#sbi_container').bgImageMenu({
defaultBg : '開頭照片網址',
menuSpeed : 300,
border : 1,
width : 580,
height : 386 ,

type : {
mode : 'verticalSlideAlt',
speed : 450,
easing : 'easeOutBack'
}
});
});
</script>
3.請於<body>之後貼入CSS
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/SlidingBackgroundImageMenu/css/sbimenu.css"
media="screen">

<style>
.sbi_content ul li{
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: normal;
line-height: 160%;
text-align: left;

background: rgba(105,105,105,0.6);
height: 100px;

}
</style>
4.請於欲出現的編輯區貼入HTML
<div id="sbi_container" class="sbi_container">
<div class="sbi_panel"
data-bg="第一照片網址"><a
href="#" class="sbi_label">第一標題 </a>
<div class="sbi_content">
<ul>
<li>第一內文 <br>
</li>
</ul>
</div>
</div>
<div class="sbi_panel"
data-bg="第二照片網址">
<a href="#" class="sbi_label">第二標題</a>
<div class="sbi_content">
<ul>
<li>第二內文<br>
<br>
</li>
</ul>
</div>
</div>
<div class="sbi_panel"
data-bg="第三照片網址">
<a href="#" class="sbi_label">第三標題</a>
<div class="sbi_content">
<ul>
<li>第三內文<br>
</li>
</ul>
</div>
</div>
</div>


注意:一但設定圖文框的寬度、高度值之後,要放進去的圖片也要剪裁成同樣大小的照片,這樣照片才能完整的呈現出來。


原始語法來源:Sliding Background Image Menu


2013年12月11日 星期三

超快速、好用的補充說明互動法:Hint.css Tooltips








除了可在「編輯物件」的上、下、左、右這四個方向跑出說明文字外,同時也可以再變化顏色。Hint.css 預設了四組顏色,分別是「錯誤」的紅色「警告」的橙色「資訊」的藍色,以及「成功」的綠色
文字、DIV、表格的TD以及圖片,都可以作用。請參考教學影音。



影音教學




1.將下列css程式置放於<head>xxx</head>之間或是<body>之後。使用KompoZer編輯器,最好置於< body>之後:
<link rel="stylesheet" href="http://lmcdwriting.org/userfiles/lmcsilver20121007/hint.css-master/hint.css"></link>
2.使用 Html 語法:
<span class="hint--top" data-hint="從上邊跑出說明文">上</span>
<span class="hint--bottom" data-hint="從下邊跑出說明文">下</span>
<span class="hint--left" data-hint="從左邊跑出說明文">左</span><br>
<span class="hint--right" data-hint="從右邊跑出說明文">右</span>
3.加入背景色,請把下列代碼加入於class="xxx"裡面:
紅色:hint--error
橙色:hint--warning
藍色:hint--info
綠色:hint--success
example: class="hint--top hint--error",就以紅色背景在上方↖跑出來。
4.圖片的補充說明語法:
<span class="hint--top" data-hint="圖片的補充說明"><img src="xx"></span><br>





原始語法出處:Hint.css

2013年11月26日 星期二

讓人癢眼的 jQuery Image Gallery: zAccordion



癢眼又癢手的Gallery !
  • Old School Diner

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.

  • A Day at the Pool

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.

  • Fill it Up!

    Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.

  • Going for a Drive

    Phasellus sed lectus nisl.


zAccordion可以自動展開、指定延長時間。圖像滑動美感,也可以透過click來選擇圖像。半露的圖像,指涉者一種具有高度「參與性」誘惑力的互動文本呈現。

1.請於<head>xxx</head>之間或<body>之後置入下列jQuery程式:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.zaccordion/js/jquery.zaccordion.js"></script>
2.請於<body>之後置入下列jQuery驅動語法:
<script>
$(document).ready(function() {
$("#splash").zAccordion({
timeout: 6500,
speed: 600,
slideClass: 'slide',
animationStart: function () {
$('#splash').find('li.slide-previous div').fadeOut();
},
animationComplete: function () {
$('#splash').find('li.slide-open div').fadeIn();
},
buildComplete: function () {
$('#splash').find('li.slide-closed div').css('display', 'none');
$('#splash').find('li.slide-open div').fadeIn();
},
startingSlide: 0,
slideWidth: 600,
width: 720,
height: 400,
auto: true
});
});
</script>
3.請於<body>之後置入下列 CSS:
<style>
#splash div {-moz-border-radius:5px;-webkit-border-radius:5px;background-color:rgba(0,0,0,0.4);border-radius:5px;bottom:0;margin:10px;padding:5px;position:absolute;z-index:10;}
#splash h2 {font-size:1.4em;margin-bottom:5px; font-family: 微軟正黑體;}
#splash strong {color:white;font-size:1.21em;text-shadow:none; font-family: 微軟正黑體;}
#splash p {color:white;font-size:1.03;line-height:1.2em;margin:0!important;text-shadow:none; font-family: 微軟正黑體;}
</style>
4.於想要呈現的編輯區置入下列 HTML:
<ul id="splash">
<li> <img
src="第一張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">圖說內文。</p>
</div>
</li>
<li> <img
src="第二張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">圖說內文。</p>
</div>
</li>
<li> <img
src="第三張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">標說內文。</p>
</div>
</li>
<li> <img
src="第四張圖片網址"
alt="" style="width: 600px; height: 400px;">
<div> <strong>圖說中標</strong>
<p class="splash-text">圖說內文。</p>
</div>
</li>
</ul>


語法出處:zAccordion

2013年11月15日 星期五

把紛雜的訊息收納起來:Accordion


jQuery UI 程式寫作練習
讓讀者快速掌握內容大綱

Accordion
把訊息打包乾淨的好方法。

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.




請把下列jQuery程式碼置入到<head>xxx</head>之間或<body>之後:

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
請把下列驅動碼寫入到<head>xxx</head>之間或<body>之後:
<script>
  $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content"
    });
  });
  </script>

請把下列 HTML 語法寫入到欲出現之編輯區域:
請複製CSS並置於<head>xxx</head>之間或<body>之後:

<style>
.accclass122801 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
letter-spacing: 0.1em;
line-height: 1.6;
}
</style>



請將html置於欲編輯之處:

<div id="accordion">
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 1</h3>
<div>
<div class="accclass122801">內文一<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 2</h3>
<div>
<div class="accclass122801">內文二<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 3</h3>
<div>
<div class="accclass122801">內文三<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 4</h3>
<div>
<div class="accclass122801"> 內文四。<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 5</h3>
<div>
<div class="accclass122801"> 內文五。<br>
</div>
</div>
</div>

原始語法出處:jQuery Accordion

影音教學:





2017年版:進階使用



驅動程式更動範例


<script>
$(function() {
$( ".accordion0828" ).accordion({
heightStyle: "content",
active: 2,
icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" },
classes: {
"ui-accordion": "highlight uiacchange",
"ui-accordion-header": "ui-corner-top",
"ui-accordion-header-collapsed": "ui-corner-all",
"ui-accordion-content": "ui-corner-bottom",
"ui-accordion-content-active": "uacachange"
}

});
});
</script>


<style>

.uiacchange {
width: 70%;
}

.uacachange:hover {
background-color: rgba(255, 237, 151, 0.4);
}

</style>


範例呈現

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.




更動 accordion 中互動變化的 icon

$( ".selector" ).accordion({
  icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
});


紅字部分是所選擇icon的名稱。
更多icon選擇的選項,如下圖,請到此參看。Click!!




格區域的高度選項

$( ".selector" ).accordion({
  heightStyle: "content"
});

說明:

"auto": All panels will be set to the height of the tallest panel.
"fill": Expand to the available height based on the accordion's parent height.
"content": Each panel will be only as tall as its content.



使某一個格區域預先設定 開啟

$( ".selector" ).accordion({
  active: 2
});

說明:

0是第一個。


使 Accordion 布局變化的 class 使用,以下 default 值:

$( ".selector" ).accordion({
  classes: {
    "ui-accordion": "highlight",
    "ui-accordion-header": "ui-corner-top",
    "ui-accordion-header-collapsed": "ui-corner-all",
    "ui-accordion-content": "ui-corner-bottom"
  }
});


說明:

ui-accordion: The outer container of the accordion.
ui-accordion-header: The headers of the accordion. The active header will additionally have a ui-accordion-header-active class, the inactive headers will have a ui-accordion-header-collapsed class.
ui-accordion-content: The content panels of the accordion. The active content panel will additionally have a ui-accordion-content-active class.










2013年11月13日 星期三

浮動的導覽列: 〈回到頁首〉

 回到頁首 
隨時
隨地
按一下
就回到頁首
請看右下方浮動區塊








1.請在<head>xxx</head>之間或<body>之後置入下列 jQuery 程式碼(課堂建議<head>xxx</head>之間):
 <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
說明:
1.如有其他互動機制使用到這條程式,就可以不要再用了。也就是說,這條程式出現一次即可。
2.如果是用KompoZer來編輯,請放到<body>之後,以減少出錯機會。



2.請於<head>xxx</head>之間或<body>之後置入下列二區塊程式碼(課堂建議<head>xxx</head>之間):
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
 
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>


<style>
.back-to-top {
    position: fixed;
    bottom: 5em;
    right: 15px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 1.39em;
    font-family: 微軟正黑體;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 0.5em;
    display: none;
}

.back-to-top:hover {   
    background-color: rgba(135, 135, 135, 0.50);
}
</style>

說明:
你也可以決定,往上滑之後,是不是一定要到頂。如果你把(紅字)0,改成400,那就會在從最頂部算下來400px處,停住。不會到頂。



3.請於<body>之後置入下列html文字碼:
<a href="#" class="back-to-top"> 回到頁首 </a>

說明:
一、「回到首頁」,你可以改成任何你想要的文字。
二、「回到首頁」,如果寫成<img src="xxx" style="width: 160px;">,則可以變成圖像。圖像寬度要記得設。







2013年11月8日 星期五

讓更多細節跑出來的互動寫作:jQuery


使用 這種互動的寫作時機…video
互動 寫作|按一下文字跑出更多內容來



更多豐富細節秀出來 more…〔←按我〕




1.請將 jQuery 的嵌入語法套用置放於<head>xxx</head>之間(課堂建議)或<body>之後。
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>



2.在需要詳細內容出現的地方置入 Div ,內容可以是文字、影像等等各種數位媒材。再設上 style="display: none;" 讓 Div 先隱藏起來。並給上一個識別代碼 id="xxx" 。
<div id="20131108" style="display: none;">
這是各種圖文的內容,只要是數位媒材都可以。<br>
</div>



3.為那個要按下去的「地方」,設置可以互動的程式碼,上面的範例為文字 more 。
<a href="javascript: $('#20131108').slideToggle(400);">more…</a>
說明:
紅色字 #20131108 正是步驟 2 的 Div 所設的 id="20131108" 。slideToggle(400),這400是拉下的速度,可以自行更改。






更多變化的形態 jQuery UI

隱藏之物件「跑出來」的形式,或著說形態,可以有再多的可能性。就方向而言,可以是從上、下、左、右等不同方向擇其一「跑出來」,在此,創作者是有其創作 上的空間之餘地。

呈現範例:


請 按右側選項:從 左秀出從 右秀出從 上秀出從 下秀出


圖文框(id="interpo20171203")




請先寫入jQuery UI程式碼於<head>xxx</head>之間:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


按下去地方的「互動程式 碼」:

onclick="  $('#interpo20171203').toggle('slide', {direction: 'left', easing: 'linear'}, 800);  "

說明:
秀出物件的方向共有四種選項:左、右、上、下  //  "left", "right", "up", "down"


HTML語法:

<div id="slit20171206">請
按右側選項:<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'left', easing: 'linear'}, 800);">從
左秀出</big>。<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'right', easing: 'linear'}, 800);">從
右秀出</big>,<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'up', easing: 'linear'}, 800);">從
上秀出</big>。<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'down', easing: 'linear'}, 800);">從
下秀出</big>。</div>
<br>
<div id="interpo20171203" style="display: none;"><br>
<span
style="text-decoration: underline; font-style: italic; color: rgb(0, 102, 0);">晴
天的顏色</span><br>
<br>
<img style="width: 560px; height: 420px;" alt=""
src="圖像網址"><br>
</div>

說明:
display: none;  這是要讓圖文DIV先行消失的css語法。


影音教學:






2013年11月3日 星期日

用 CSS 搞定圖像的表現慾!


用 CSS 搞定圖像的表現慾!

圖像呈現好不好看,事關重大。用 CSS 來設定圖像的各種版面參數,真的非常簡單!
<img style="xxx" src="xxx" />
置左、置中、置右,還有框線、背景色、圓角.陰影。


互動範例

置左:style="display: block; margin-left: 0px;" 。這是網頁預設值,基本上是可以不寫的。但如果想要圖像的左邊有空白距離,則可以為 0px 填入數字。例如 6px ,則圖像左邊會有 6px 的空白距離。
置中:style="display: block; margin: 0px auto;" 。圖像會居中。如果為 0px 填入數字,例如 6px ,則圖像的上面和下面會有 6px 的空白距離。
置右:style="display: block; margin-left: auto; margin-right: 0px;" 。圖像會居右。如果為 0px 填入數字,例如 6px ,則圖像的右邊會有 6px 的空白距離。
框線:style="border: 1px solid gray;" 。圖像會有框線。1px,寬度;solid,實心線;gray,灰色。
背景色:style="padding: 7px; background-color: silver;" 。圖像與框線之間會有背景色。7px,背影色寬度;silver,灰色。

圓角、陰影框的語法,請看教學說明。這是比較新的語法,KompoZer並不支援,要用編輯器自己下語法。
超快速上手法:使kompozer




那種眼神並不可怕,
難的是你不能對之直視。
生命總有幽暗處,
承認此點,才能活得
開朗,
才會想去超越。



<style>

/* 圖像變化語法 */
.picch0129 {
-webkit-transform: rotate(3deg);
border-radius: 25px;
border: 2px solid white;
padding: 5px;
background-color: smokewhite;
-webkit-box-shadow: 2px 3px 2px 1px silver;
}


/* 基本黑體內文 */
.ironcontent0120 {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.6;
text-align: left;
letter-spacing: 0.1em;
}

/* 基本細明體文 */
.stdcontent0120 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.4;
text-align: left;
letter-spacing: 0.1em;
}

</style>


2013年10月31日 星期四

CSS 文字布局快速套用法



1.請將 css 的嵌入套用置放於<head>xxx</head>之間或<body>之後;我的教學作業建議放在<body>之後。

<style type="text/css">

.word01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: normal;
line-height: 1.6em;
text-align: justify;
text-justify: distribute;
letter-spacing: 0.1em;
}

</style>

 影音教學:5分45秒



2.在需要文字布局變化的編輯元件中加入class="word01",即會產生變化。此例為Div,也可以放在<table class="word01">或是<td class="word01">

<div class="word01">
CSS 樣式可以嵌入於 HTML 文件中,我們把它嵌入於 <body> 之後,然後就可以快速的來變化文章內的文字樣式。<br>
</div>



3.文字布局變化結果。

CSS 樣式可以嵌入於 HTML 文件中,我們把它嵌入於 <body> 之後,然後就可以快速的來變化文章內的文字樣式。



變更Div內文字的兩種CSS方式。


2013年10月24日 星期四

用kompoZer寫作的三個基本動作


KompoZer是我用的教學軟體!
用KompoZer寫作數位文本有三招很基本的「起手式」。
  1. 多按 Enter 鍵,增大可編輯區域。
  2. 要選擇字元的編碼,常用 UTF-8 。
  3. 要固定頁面寬度並使居中。

教學影音說明:
  1. 格式/頁面標題與屬性/選擇字元編碼方式,請選 UTF-8 。
  2. 頁面寬通常可設為 640px 或 800px;頁面居中的語法為 margin: auto; 。
  3. 可直接copy 到<body>,如下: style=" width: 640px; margin: auto; " 。



★★基本文字寫作技巧:把字用DIV包起來。





非常重要的補充:CSS的三種使用方式 with Kompozer。

學會在kompozer中快速寫入 class、 id 、以及直接寫入 style="xxx",這三種方式。



影音教學內容:
<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>




補充說明↙

分析網頁結構的好用方法:標題空間、歡迎空間、目錄資訊空間
★內田廣由紀(2008)。《網頁設計基礎講座》。台北:尖端。



2013年10月23日 星期三

更簡單的 image hover 互動文本




東北角的一次看藍色

事實上有很久我沒有到東北角之地了。一種藍色的海天交際之混渾,總會綴上一抹人氣。想要忘掉很多事情時,開闊的海天,就是直接的催化劑;人生總是在空間性上亦是那麼的短暫。

你總要去看看的

透過這互動機制,移入滑鼠後(↑)出現的文字可以為圖像增加敘事性上的時間縱深。
我們可以在 USA Today 網站首頁看到這一互動機制的大量使用。




教學影音


寫作方法
1. 請將下列程式碼 copy 到<head>xxx</head>之間或<body>之後:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/Animated-Content-Hover-Effect-with-jQuery/jquery.contenthover.js"></script>
注意事項:
使用 KompoZer 寫作的同學,最好將程式碼放到<body>之後,才不會出現問題。
2. 請將下列 CSS 語法 copy 到<body>之後:
<style>
.contenthover { padding:20px 20px 10px 20px; }
.contenthover, .contenthover h3, .contenthover a { color:#fff; }
.contenthover h3 { margin:0 0 10px 0; line-height:1.6em; padding:0; font-family: 微軟正黑體; font-size: 1.19em; font-weight: bold;}
.contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; font-family: 微軟正黑體; font-size: 1.13em; font-weight: normal; letter-spacing: 0.1em; text-align: justify;  text-justify: distribute; }
.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
</style>
3. 請在編輯區寫入 jQuery 驅動語法並在下面接著寫入 HTML 語法:
使用注意事項:
當要使用第二個文蓋圖的互動機制時,要把第3部分的語法再使用一次。同時要把紅字的d1,全部改成d2。之後依此類推。


語法出處: jQuery ContentHover Plugin

想問問題:互動跑不出來?


如何做:調整出正確比例的圖片大小?




2013年10月18日 星期五

Tabs 式的文本互動形式





網路新聞的範例

Step By Step 用這一招就對了!

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

 語法來源: jQuery UI


使用程序
1. 請將下列程式碼copy到<head>xxx</head>之間或是<body>之後:
<script src="http://code.jquery.com/jquery-1.9.1.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>
2. 請將下列程式碼copy到<body>之後:
<script type="text/javascript">
  $(function() {
    $( "#tabs" ).tabs();
  });
</script>
3. 請將下列html碼copy到內容置放的編輯區:
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">標題一</a></li>
    <li><a href="#tabs-2">標題二</a></li>
    <li><a href="#tabs-3">標題三</a></li>
  </ul>
  <div id="tabs-1">
    <p>第一分頁內容。</p>
  </div>
  <div id="tabs-2">
    <p>第二分頁內容。</p>
  </div>
  <div id="tabs-3">
    <p>第三分頁內容。</p>
  </div>
</div>



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 之外的其他展開方式就可以不要設這個指令。