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

2015年3月28日 星期六

滑鼠移入,照片就會滑動




滑鼠移入照片動
另一張照片show出來
一段說明文字展現出來
透過互動過程資料的變化,可以形成具有前後形式敘事意義開展


使用jQuery方法
使用CSS方法


  


photos with czj 35/2.4 Thanks to deadfish1206


教學影音:




CSS語法:請 放置於<body>之後

<style>
.baimg032801 {
background-image: url(https://lh3.googleusercontent.com/--SjwjQEH5iw/VRQegF-l_kI/AAAAAAAAaxY/X4Hl4PW5odI/w1049-h700-no/IMG_4621.JPG);
background-repeat: no-repeat;
background-size: 420px;
}
</style>

jQuery程式:請放 到<body>之後

<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>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">

驅動程式碼:請放到 <body>之後

<script>
$(function() {
$('.baimg032801').hover(function() {
$(this).find('>img').hide('slide', {direction: 'right'}, 400);
},
function() {
$(this).find('>img').show('slide', {direction: 'right'}, 400);
});

});
</script>

說明:
移動的方向有:left, right, up, down 四種方向。
移動的速度是:一秒為1000。所以400是0.4秒。




使用CSS語法方式:







CSS語法:

<style>

/*子孫選擇器;溢出框外即消失語法*/
table.tabpic17010201 td {
overflow: hidden;
}

/*為表格格內設置背景圖*/
#tdbapic17010201 {
background-image: url(https://c4.staticflickr.com/6/5835/30600690323_b183cbb402_b.jpg);
background-repeat: no-repeat;
background-size: 314px;
}

#tdbapic17010202 {
background-image: url();
background-repeat: no-repeat;
background-size: 314px;
}

/*父子選擇器*/
table.tabpic17010201 td >img {
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-o-transition: 0.5s linear;
-ms-transition: 0.5s linear;
transition: 0.5s linear;
}

/*hover:滑動的互動指示器*/
table.tabpic17010201 td:hover >img {
transform: translate(314px, 0px);
}

</style>

注意:表格的「格內側補白」的值要設為0 。

影音教學:





2015年3月27日 星期五

快速搞定:中標及內文的文字設定


快速設定大標、中標及內文
文字的設定,是網路文本和讀者打交道過程,最重要的介面。


設定中標:讓讀者更無障礙快速理解大意

這是一段普通的文字。文字會依頁面的寬度而填滿。也就是只有在段落的最後才有<br>。這 是一段普通的文字。文字會依頁面的寬度而填滿。也就 是只有在段落的最後才有<br>。

這是文字,
但有經過斷行的處理,
也就是有加上<br>。
如果你複製,貼上(不含格式)文字,
kompozer也會依段落格式的形式貼上,換言之,分段的形式會被保留。

這是表格裡的文字。你要把 class的名稱,加到TD裡面去,才有用。


教學影音



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


<style>

.wordtitle01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.38em;
font-weight: bold;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
margin-top: 1.5em;
margin-bottom: 0.8em;
background-image: url(https://goo.gl/pbVht0);
background-repeat: no-repeat;
background-position: left center;
background-size: 42px;
padding-left: 2.4em;
border-bottom: 1px solid darkred;
}

.wordmail01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.12em;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
}

.wordmail02 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 2;
text-align: left;
}

.wordmail03 {
font-family: Verdana, '標楷體';
font-size: 16px;
font-weight: normal;
line-height: 1.6;
text-align: left;
}
</style>


第二組常用文字 CSS! see video


<style>

/* 硬陰影大標字 */
硬陰影式的凸顯大標文字
.bigtitle010708 {
font-family: Verdana, '微軟正黑體';
font-size: 3.1em;
font-weight: bold;
line-height: 1.2;
text-align: left;
letter-spacing: 0.05em;
text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
text-decoration: underline;
}

/* 大標 */
.bigtitle01 {
font-family: Verdana, '微軟正黑體';
font-size: 2.2em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.03em;
margin-bottom: 1.5em;
text-align: center;
border-bottom: 3px solid darkorange;
}

/* 大標:hover */
.bigtitle01:hover {
border-bottom: 3px solid #0080FF;
}

/* 中標 */
.midtitle01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.25em;
font-weight: bold;
line-height: 2.4;
text-align: center;
letter-spacing: 0.03em;
margin-top: 1em;
margin-bottom: 1.2em;
border-bottom: 1px solid red;
border-top: 1px solid red;
text-align: center;
}

/* 中標:石材字 */
.midtitlesto01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.65em;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.1em;
margin-top: 1em;
margin-bottom: 1.2em;
border-bottom: 1px solid red;
text-align: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.5px gray;
background-image: url(https://goo.gl/Tes73W);
}

/* 中標:描邊字 */
.midtitlesto0321 {
font-family: Verdana, '微軟正黑體';
font-size: 2em;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.05em;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: darkred;
-webkit-text-fill-color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

/* 重點強調字:有引號 */
這是前面有引號的重點強調。對文章的重點要特別強調時,可用。
.ironcontent0528 {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 35px;
background-image: url(https://goo.gl/MGdgDj);
background-repeat: no-repeat;
background-position: left top 3px;
background-size: 28px;
}

/* 小標 */
.littletitle01 {
width: 65%;
font-family: Verdana, '微軟正黑體';
font-size: 1.06em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.06em;
margin-bottom: 0.2em;
border-bottom: 1px solid red;
}

/* 小標:hover */
.littletitle01:hover::after {
content:" /";
}

/* 預設字簡明小標 */
預設字簡明小標字型
.lititlemingbo161014 {
margin: 12px 0px 0px;
line-height: 18px;
color: rgb(0, 0, 0);
font-family: Verdana,Arial;
font-size: 15px;
font-weight: bold;
letter-spacing: normal;
orphans: 2;
text-align: left;
background-color: rgb(249, 249, 249);
}

/* 暈染陰影效果小標 */
暈染陰影效果的吸睛小標字型
.ironlittibo010708 {
font-family: Verdana, '微軟正黑體';
font-size: 1.31em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
text-shadow:0px 0px 15px #FF37FD;
}

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

/* 基本內文:走二欄 */
.ironcontent02 {
line-height: 1.8;
letter-spacing: 0.1em;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-webkit-column-rule: 1px outset gray;
}

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

/* 表格內基本細明體,左右對齊 */
.ironcontentmi010528 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.8;
text-align: justify;
text-justify: inter-ideograph;
letter-spacing: 0.1em;
}

/* 基本黑體內文 (粗)*/
.ironcontentbo01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
}
</style>



我想要立刻、馬上地上手進階使用。

1. 簡單、快速:3秒調出漂 亮文字布局
2. 快速的讓文字變得好看
3. CSS 的文字魔術
4. 讓人「讀得進去」的文字安排
5. 網路新聞文字寫作技巧 #10 Tips
6. 快速、好看的中標版型
7. 布落格寫作05:寫出漂亮的中標和內文★很常用★



2015年3月24日 星期二

分層文本互動寫作技法(一)




分層文本的寫作, 互動技法是好方法
按一下摘要,讓補充性資訊互動呈現出來,形成 意義充實作用
這 裡是大綱式的文字,也可以說是摘要。先將重點寫出來,吸引讀者興趣;讀者按下去之後,更多豐富的內容就會展開。這就是分層文本的運作結構。【click】
這裡是要詳細說明的文字。可以 是純文字,也可以 是圖片、影音互動模組 等等。只要是DIV可以包進去的媒材,都可以使用。這裡是要詳細說明的文字。可以是純 文字,也可以是圖片、影音互動模組等等。只要是DIV可以包進去的媒材,都可以使用。這裡是要詳細說明的文字。可以是純文字,也可以是圖片、影音互動模組 等等。只要是DIV可以包進去的媒材,都可以使用。


教學影音:



jQuery: 請放到<body>之後

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>


Javascript: 請放到要按下去的div

onclick=" $('#div032401').slideToggle(800); "


CSS: 請放到<body>之後

<style>
.wordtitle0324 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: normal;
line-height: 1.8;
letter-spacing: 0.1em;
cursor: pointer;
}

.wordcon0324 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 2;
}

.colum0324 {
-webkit-column-count: 3;
-webkit-column-rule: 2px outset gray;
border-bottom: 1px solid gray;
margin-bottom: 1em;
margin-top: 1em;
padding-bottom: 0.5em;
}

.displno {
display: none;
}

</style>




更多分層文本 寫作技巧:

按A就會跑出/隱藏B的互動設置:click here

為中標或摘要加上互動性補充說明:click here

小額資訊量的快速互動補充:click here

按一下就跳出「全文閱讀」:click here

把紛雜的訊息收納起來:click here

Tabs 式的文本互動形式:click here



作業繳交的基本寫作格式。Click here for download !

口訣:
標題、作者、圖文互動整合、跳躍連結、標題一、內文一、標題二、內文二、標題三、內文三。

範例作品參考,請至 教學習作網,並點按學生作品區。


2015年3月20日 星期五

移動滑鼠放大照片;image zoom



移動滑鼠放大照片 ZOOM

←請把滑鼠移到照片。


一、請複製下列 jQuery 語法至<body>後:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/elevatezoom-master/jquery.elevateZoom-3.0.8.min.js"></script>
二、請複製下列驅動語法至<body>後:
<script>
$(function() {
$("#zoom_01").elevateZoom({
zoomWindowWidth:260,
zoomWindowHeight:180 });
});
</script>
三、請把html碼放到欲編輯之處:
<img id="zoom_01"
src="小照片網址"
data-zoom-image="大照片網址">

注意事項:

1.步驟二紅色字體者,是要放大照片的視窗大小。
2. 此範例只能有一個互動功能,如要做第二個,請重覆步驟二,並更改步驟二、三的 id 代碼(綠色字體者)。


影音教學:


語法出處:http://www.elevateweb.co.uk/image-zoom/examples