*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
javascript互動文本寫作
融媒體Wix教學
數位影音敘事專題寫作
電視新聞製作與剪輯
基礎新聞攝影
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單

2015年12月4日 星期五

數位匯流文本空間敘事基礎四式技能

 回到頁首 

數位匯流文本空間敘事基礎四式技能
  1. 表格
  2. DIV
  3. 背景圖
  4. 位移與溢出

空間敘事寫作,是有方法可以學的。
藉由媒材空間位置之變化,
  創造文本敘事性意義給出。
表格、DIV、背景圖、位移是: 排版寫作的四種基本技法。

課 堂錄影說明
網路文本的 呈現,是一種更重視空間概念的文本展現。有學者指出,數位時代之敘事者必須善用空間之 特性,應是「一位敘事建築師 (narrative architects)」(Jekins, 2004: 129)。

換言之,有空間布局概念的寫作,是數位互動文本作者應具備的思考、寫作能力。

空間布局與資訊意義展列之間的關係,就「寫作的立場而言」,作者將其稱之為「排版寫作」。這是從 傳統後製排版概念而轉換過來的表述。

傳統上,寫 作是寫作, 排版是排版,這原本是前製與後製的兩種專業。但在數位互動文本中,這二者結合了。一位作者在思考意義表達時,同時也要思考「排版」,亦即媒材在空間位置之現象,對意義呈現的可能影響。

Jekins H. (2004). Game design as narrative architecture. In Wardrip-Fruin, N. & Harrigan, P. (Eds.), First Person: New media as story, performance, and game (pp. 118-130). Cambridge, Massachusetts: The MIT Press.


第一式:表格

方 法一:Go to basic:表格(一)
方 法二:Go to basic:表格(二)
方 法三:Go to basic:表格(三)
方 法四:快速排版寫作:表格堆積木法
方 法五:表格使用基本功:影像排排站呈現規律美



第二式:DIV

方 法一:DIV基礎動作:把編輯元素用DIV包起來
方 法二:輕鬆使喚DIV:邊框、背景色、padding、margin!
方 法三:輕鬆控制DIV:靠左、置中、靠右、上移、下移!
方 法四:慢工出細活:搞定DIV的調校
方 法五:簡單、快速:3秒調出DIV漂亮文字布局



第三式:背景圖

方 法一:背景圖的使用
方 法二:運用半透明背景圖
方 法三:影音貼到背景圖上面去
方 法四:置入二張以上的背景圖



第四式:移動與位移

方 法一:掌握DIV的位置:移動、位移及重疊
方 法二:上下移動版面空間的方法
方 法三:超快速任意移動物件:position: relative
方 法四:在div內任意移動編輯物件: position: absolute




2015年11月27日 星期五

掌握DIV的位置:移動、位移及重疊


掌握DIV的位置:移動、位移及重疊:margin & relative position; z-index


充分利用DIV的特色,才有能力思考「DIV排版寫作」!

這次我們使用DIV中的 margin 功能,即兩個DIV之間的距離。
可以是加大也可以減縮。
再來是使用DIV或元素的位移功能。
利用位移,可以有更大的思考創意的開展。


影片中各式相關的DIV寫作技巧,我們已經都教了很多。各位同學可以多方查閱。下面我們列出幾個比較重要的,和這次有密切關係的。
基本DIV位置控制:靠左、置中、靠右、上移、下移。click here!
上下移動DIV的方法。click here!
超快速任意移動物件:position: relative。click here!
DIV + CSS 隨心所欲搞定網路排版寫作。click here!!


影音教學



DIV基本分解圖



細部詳細分解說明圖。

2015年10月23日 星期五

超快速圖文互搭互動:CSS hover



超快速的圖文互搭互動技能:CSS hover


那是一家我常去的
供應德國風味的
餐廳。

油油的香腸,泛著天花板的黃色燈光,
彷若一種暫時的時空置換。

沈思,可以配飯!



影音教學:



<style>
.word2015102301 {
width: 520px;
height: 347px;

font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.6;
text-align: left;
padding: 0.5em;
letter-spacing: 0.1em;

border-bottom: 1px solid darkorange;
}

</style>


可以產生互動的CSS:

.word2015102301:hover {
background-image: url(照片網址);
background-repeat: no-repeat;
background-size: 520px;

webkit-transition: 1s all linear;
-moz-transition: 1s all linear;
-o-transition: 1s all linear;
-ms-transition: 1s all linear;
transition: 1s all linear;

}

增強功能的CSS:

/* 字體顏色 */
color: white;

/* 邊框 */
border: 1px solid darkorange;

/* 圓角框 */
border-radius: 25px;

/* 旋轉 */
-webkit-transform: rotate(-2deg);








2015年10月17日 星期六

文字區塊加入半透明的底色:圖文互搭技巧


圖文互搭技巧
文字區塊加入半透明的底色













這是文字,但背景色是透明的。

一種流動的質感,是立基於形式之中。
綠色的花舞,抹起了一絲明亮的思緒!



圖文互搭寫作是網路文本的重要特色之一。半透明的背景色,可以為文字和圖像之間,牽動了一種更為互 依的交互感受。

在這裡,我們所思考的互動模態是:滑鼠移到圖中的文字區塊,文字區塊就變底色。這一互動計設之重點,加強文字區塊背景色,讓文字區塊「斷離」於圖像的連結,讓讀者專心於文字區塊,喚醒讀者對文字的注意力。


教學影音:



<style>

.bacimg1017 {
background-image: url(圖像網址);
background-repeat: no-repeat;
background-size: 578px;
}

.word2015101701 {
font-family: Verdana, '微軟正黑體';
font-size: 1.26em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 1em;
color: white;
}

.transcolor {
background: rgba(255, 255, 240, 0.4);
}

</style>


補充互動style

.transcolor:hover {
background: rgba(255, 255, 240, 0.9);
color: gray;
}



顏色代碼網站:click here!!


我想看更多基本說明:click here!!



2019/04/新補充內容

另一種思考模式是:
如果我們把滑鼠一移到圖片,圖片中的字就馬上會變化,
這樣的互動模態,要如何來使用css語法呢?


請看範例:













這是文字,但背景色是透明的。

一種流動的質感,是立基於形式之中。
綠色的花舞,抹起了一絲明亮的思緒!



這一效果,我們是使用了如下的互動CSS語法:

.bacimg1017:hover >div {
background: rgba(255, 255, 240, 0.9);
color: gray;
}

請直接加入<style>xxx</style>裡面。





2015年9月23日 星期三

DIV快速上手使用:把編輯元素用DIV包起來

DIV
把寫作過程中相關的媒材
包起來
讓相關的媒材連結起來,這是重要的數位寫作技能


網路文本是區塊寫作文本。區塊寫作就是要會使用、控制DIV。使用DIV最重要的功能,就是要把編輯元素,即各種媒材,包括文字、圖像、影音等,置入於DIV中。之後,只要對DIV進行各種編輯和互動的設計就可以了。學會把各種媒材用DIV包起來,是網路寫作中最基本的概念和數位寫作技術能力。

這個學習網頁,再加上下列三個閱讀網頁,就是最基本的四項DIV技能。
排版寫作技巧:快速移動DIV 。click here!
慢工出細活:搞定DIV的調校 。click here!
簡單、快速:3秒調出DIV文字布局。click here!

教學影音:


影音教學參考用CSS

<style type="text/css">

.div2015091301 {
font-family: Verdana, '微軟正黑體';
font-size: 2.4em;
font-weight: bold;
line-height: 1.4;
text-align: left;
letter-spacing: 0.1em;
}

.div2015091303 {
border: 1px solid darkorange;
}


#tdiv2015091302 {
font-family: Verdana, '新細明體';
font-size: 1.04em;
font-weight: normal;
line-height: 1.4;
text-align: left;
letter-spacing: 0.1em;
}

</style>


◆DIV超常用的幾個上手動作★

【上手動作!】div快速使用起手式:

【上手動作!】文字的複製、貼上以及嵌入div:

【上手動作!】快速刪除DIV

【上手動作!】DIV內的DIV,插入文字

【上手動作!】寫作時如何跳出div框框

【上手動作!】黑體字跑不出來





2015年9月16日 星期三

數位文本的互動模態:基本七款



數位文本的互動模態:基本七款

互動,是有道理可以談的。

互動不是動來動去就爽了,不是,而是作者和讀者,藉由數位文本媒介而來的一種「對話方式」。你先寫了一些東西,然後想像讀者可能會不懂,可能會想問什麼。 然後,你設定了一個互動的機制。想像,讀者透過這個互動機制,數位文本可以回答讀者在心中想問的。

再來,互動既是一種對話式的文本展現形態,那麼互動式的文本意義呈現就有特色,即是一種「辯證性」的意義給出。文本的辯證方法,往往可以讓讀者理解更多, 更多於文本材料所提供的部分。


第一式:tooltips

方法一:滑鼠移到文字或圖片上,跑出說明文字
方法二:Hint.css 2.0:快速使用的純文字 tooltips
方法三:tooltipster 4.0版。超好用的tooltips模組。



第二式:click to hide / display

方法一:分層文本互動寫作技法(一)
方法二:按【文字】就會更新圖像或影音內容
方 法三:click即可【打開/隱藏】較長的內文
方 法四:排隊.請編輯元素一個接著一個出場



第三式:popup style 跳出式小視窗

方 法一:學生超愛用的影音跳出法:fancyBox
方 法二:移動滑鼠就跳出放大照片
方 法三:漂亮展出互動影音小視窗
方 法四:一進入文章就自動跳出影音



第四式:互動式清單列表 interactive list

方 法一:把紛雜的訊息收納起來, Accordion
方 法二:Tabs 式的文本互動形式
方 法三:清單式互動展開內容文本模組,按一下就有
方 法四:小資料量快速互動list:使用ol / li:easy jQuery



第五式:image hover

方 法一:圖文的互動:會滑動的互動圖說
方 法二:滑鼠移入,照片就會滑動
方 法三:快速好用的image hover;共24種:純CSS
方 法四:壓在圖上的文字,互動式



第六式:content slider

方 法一:有導覽小圖的image gallery: Fotorama
方 法二:正流行的Content slider,bxSlider
方 法三:超有氣質的圖文互動slider
方 法四:讓人癢眼的 jQuery Image Gallery,zAccordion



第七式:各種特色型互動模態

方 法一:互動的照片效果:時間前後的比較
方 法二:可以隨意拖拉的div,讓讀者更具主動性
方 法三:按一下讓圖片爆炸,換圖
方 法四:讓圖片有更豐富的想像力


Q & A:
本來可以正常的互動模式,在加入其他互動模組後,就動不了了?

影音回答:

說明:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
上面這條程式碼的式子,要刪除,只保留第一個。

2015年7月2日 星期四

tooltips (三):按一下,即可快速跳出小型影音





補充文字說明!

按一下,即可快速跳出小型影音。





數位文本,會利用各種可能的媒材,讓讀者獲得最佳的理解之可能。例如要介 紹一個地方特色,本例南 投水里,一段小小影音的補充說明, 可以讓讀者有著更豐富的理解。這個例子,就是使用click互動,跳出小型影音的補充說明。



jQuery程式碼,請置 於<body>之後:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/css/tooltipster.css">
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/js/jquery.tooltipster.min.js"></script>

**特別說明:
jquery-1.9.1.js這一條程式碼,上例暗紅色字體者。如使用其他互動模組時,已被寫入,則可省略。一般而言,這條程式碼一篇文章中有一次出現即可。請保留最早出現的那次。

本例驅動程式語法碼,請置 於<body>之後:

<script>
$(document).ready(function() {
$('#id0702').tooltipster({
content: $('<iframe width="320" height="180" src="https://www.youtube.com/embed/4q58G5Z1KHI?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe><br><strong>水里蛇窑的一日遊。</strong>'),
interactive: true,
position: 'left',
offsetX:-180,
offsetY: 30,
trigger: 'click'
});
});
</script>

說明:
一、紅色字為youtube影音的嵌入碼,請參考影音教學。
二、綠色字為影音下方文字說明。
三、設定tooltips出現的位置以及位移的量(正、負數字)。 藍色字體者。
四、位置有八種:right, left, top, top-right, top-left, bottom, bottom-right, bottom-left 。
五、要按下去的媒材元件,記得要設id,本例為 id0702,暗紅色字體者



影音教學:




2015年6月12日 星期五

快速補充資訊的tooltips(二):圖文格式



Tooltips這種模式的互動機制,在於速迅的為某一文本媒材增加補充「小額量的」訊息。
這次使用的Tooltipster模組,可以快速的形成「圖、文式」的補充資料。作法很簡單。



黑格爾的《小邏輯》開始讀出味道之後,居然是一種苦讀的心情在催促著自己,彷 若重回高三要拼聯考的時光。是什麼力量呢?一種「理性」思維的動 力,燒起那團團的熱情之火。很難想像,那麼嚴格的邏輯的推論之文,倒是一字一字地鼓風起火焰之燃。這是黑格爾的力道。一種用理性撼動人的力道。《小邏 輯》是談「本體論」的「邏輯」。邏輯被他談得是一種具體性的生命過程之邏輯。




jQuery 程式碼:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/css/tooltipster.css">
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/js/jquery.tooltipster.min.js"></script>

<script>
$(document).ready(function() {
$('#id061201').tooltipster({
content: $('<span><img style="width: 192px;" src="https://lh3.googleusercontent.com/zvR-7E4XU2ZMXY_6wFpFp0I_iknhuXSdIeUuZScHn27E=w278-h302-no" /> <br><strong>黑格爾及其 《小邏輯》一書。</strong></span>'),
position: 'left',
offsetX:0 ,
offsetY: 30
});
});
</script>

語法說明:
一、要被滑入的物件,記得要設id。綠色字體者。
二、請寫入圖像網址、大小以及圖說。紅色字體者。
三、設定tooltips出現的位置以及位移的量(正、負數字)。藍色字體者。
四、位置有八種:right, left, top, top-right, top-left, bottom, bottom-right, bottom-left 。





影音教學:






更 多tooltips的教學內容:

一、快速補充資訊的tooltips(一):通用格式 ,clikc here
二、小額資訊量的快速互動補充:純CSS互動範例,click here
三、超快速、好用的補充說明互動法:Hint.css Tooltips,click here




2015年6月6日 星期六

快速補充資訊的tooltips(一):通用格式



互動的功能之一,在於快速補充資訊。tooltips這種功能,是常用的技法。學會使用這一互動模組, 可以有多種的變化形式來處理資訊補充的方式。這次是使用Tooltipster這 一互動模組。




這是DIV裡面的內容,可以是文 字、 圖像、 影音和所有html的格式資訊。

這是圖像的tooltips說明。
這是表格TD裡面的資訊。表格的格子內容也可 以使用 tooltips。
表格文字居中。



通用式範例一的快速 語法表:
DIV
<div  class="tooltipsa1" title="這是通用式的tooltip說明。"  ...> xxx</div>
圖像
<img  class="tooltipsa1" title="可以重覆使用在很多地方。"  .../>
表格格子
<td  class="tooltipsa1" title="而且呈現的格式都相同。"  ...> xxx</td>
表格本身
<tabel class="tooltipsa1" title="這個表格本身的說明。"  ...> xxx</table>
youtube影音
<iframe class="tooltipsa1" title="youtube影音,即iframe,也可以用。"  ...> </table>



教學影音:




共用的必要程 式碼,請置於<body>之後:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/css/tooltipster.css">
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/js/jquery.tooltipster.min.js"></script>




通用範例一的CSS以及 jQuery,請放置於<body>之後:
<style>
/* 創製自己的class,取名為 "my-theme01" */
.my-theme01 {
border-radius: 5px;
border: 2px solid #000;
background: #4c4c4c;
color: white;
}
/* 使用這個設定進一步更改文字細節 */
.my-theme01 .tooltipster-content {
font-family: Arial, '新細明體';
font-size: 15px;
line-height: 16px;
padding: 8px 10px;
letter-spacing: 0.1em;
}
</style>

<script>
$(document).ready(function() {
$('.tooltipsa1').tooltipster(
{
position: 'top',
theme: 'my-theme01'
});
});
</script>

使用說明:
一、可以調整tooltips的出現位置,即position:,改藍色字體處,共有right, left, top, top-right, top-left, bottom, bottom-right, bottom-left,共八個位置。
通用範例二的CSS以及 jQuery,請放置於<body>之後:
<style>
/* 創製自己的class,取名為 "my-theme02" */
.my-theme02 {
border-radius: 5px;
border: 2px solid gray;
background: #93FF93;
color: red;
}
/* 使用這個設定進一步更改文字細節 */
.my-theme02 .tooltipster-content {
font-family: Arial, '新細明體';
font-size: 15px;
line-height: 16px;
padding: 8px 10px;
letter-spacing: 0.1em;
}
</style>

<script>
$(document).ready(function() {
$('.tooltipsa2').tooltipster(
{
position: 'left',
theme: 'my-theme02'
});
});
</script>








2015年6月1日 星期一

快 速簡單又有變化: 標題內文式互動開合



快 速簡單又有變化
content slider / 互動式文字列表/摘要內文

這次的模組使用「表 格」來設計,在使用操作上更為簡單。一個更為便利的使用特色在於:可以用來處理互 動文字列表的需求,也可以用來表現互動摘要 /內文式的互動寫作呈現。
使用表格!

可以快速、直覺以
數位文本寫作思維
來對文本進行寫件布局。


這是標題/摘要(一)   [click]
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是標題/摘要(二)   [click]
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
2017出版。本書更深刻地探討數位文本的文本理論。
購買:五南書局



jQuery的互動程式組,請放置於<haed></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">


<script>
$(function() {
$('#ta052901').find('>tbody >tr:even >td').click(function() {
$(this).parent().next().children().toggle('slide', {direction: 'left'}, 800);
});
});

</script>

說明:
一、紅色字體為表格內所設的id。
二、藍色字體為滑動的方向,可設 up / down / left / right ,四選一。
三、褐色字體者,為滑動速度,1000是一秒。



CSS的語法,請放置於<haed></head>之間或<body>之後:

<style>
/* 標題列的TD之CSS,請放置於TD */
.title0529 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
cursor: pointer;
}

/*標題背景色互動*/
.title0529:hover {
background-color: rgba(152, 152, 152, 0.4);
}

/* 內文列的TD之CSS,請放置於TD */
.word0529 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
}

/* 讓內文列消失之CSS,請放置於TABLE */
.tabdispnone >tbody >tr:nth-child(even) >td {
display: none;
}
</style>



教學影音:




2015年5月15日 星期五

圖文互搭基礎技巧:插入背景圖



圖文互搭的寫作基礎技巧:插入背景圖

一、排版寫作;二、分層文本;三、圖文互搭。這三個數位文本面向,是撐起數位文本的媒材布局所常見的手 法,即技巧。
插入背影圖後,可以再DIV或Table裡面,在圖的上面,繼續 編輯/寫作。

技巧,不是單純的工具性的技巧,而是對文本結構,對意義呈現模式的一種寫作的安排。
因此,技巧是「方法」,也是讓意義「客觀化」展現自己的一種「中介」手段;這是套用我對黑格爾的解理。



DIV插入一張背影圖(←click) // 復原
可以繼續在 DIV裡面編輯/寫作(←click) // 復原


我們可以在背景圖的上面,
繼續我們的編輯/寫作的動作。
這使得文字可以互搭於圖片,
形成強烈的圖文互文性的意義呈現。
背景圖的 CSS 語法,請放在<body>之後:
<style>
.backimag0515 {
background-image: url(照片網址);
background-repeat: no-repeat;
background-size: 520px 390px;
}
</style>
***
選項語法:
background-position: left 5px top 3px;

注意:left/center/right; top/center/bottom; 三選一。紅字為距離,可省略。
***




DIV插入二張背景圖(←click) // 第一張 // 第二張 //
復原


多張背景圖的 CSS 語法,請放在<body>之後:
<style>
.backimag051502 {
background-image: url(第一張照片網址), url(第二張照片網址);
background-repeat: no-repeat, no-repeat;
background-size: 250px 188px, 250px 188px;
background-position: left top, right bottom;
}
</style>



教學影音:




插入背景圖的 更多寫作技能:

一、背景圖的妙用
二、DIV + CSS 隨心所欲搞定網路排版寫作(二): 放入背景圖
三、5秒搞定動態圖檔 Gif 檔! 【←Gif檔直接拿來做動態背景圖】
四、用背景圖拼貼圖像 plus 文字安排的大、中、小
五、把影音貼到照片上面去



2015年5月9日 星期六

DIV空間位置布局:靠左、置中、靠右、上移、下移、重疊順序



margin
DIV(block區塊)與四邊的距離關係
輕鬆控制DIV:靠左置中靠右上移下移

媒材與媒材之間的空間位置關係,是數位文本寫作的新的文本布局思考方向;就寫作技巧這面向而言,作者再區分出(一)排版寫作與(二)分層文本,這二種寫作的基本技能項目。這二項技能,都是用來處理「空間位置」關係的數位寫作手法。這可以使得數位文本作者有效的「掌握」對數位文本的寫作思考。

排版寫作除了之前教的,用表格的功能來完成外,
使用DIV來完成,是另一種方法。而且,可能是更重要的方法。因 為如果要使用互動寫作,對DIV的互動控制,是更容易的
強烈建議一定要能掌握這種使用DIV的各種寫作手法。
在這裡,我們要來學會對DIV本身移動的寫作手法,亦即對DIV空間位置關係的操作掌握!









    Div  !! 



DIV #2



Div 靠左、靠中、靠右的 CSS:

靠左: margin-left: 0px; 【這是預設值,可不寫;也可以設定靠左的距離,紅字部分】
靠中: margin-left: auto; margin-right: auto; 【要寫這二個才有用】
靠右: margin-left: atuo; margin-right: 0px; 【要寫二個,可以設定靠右的距離,紅字部分】
往上移: margin-top: -120px; 【設定往上移的距離,(負數)紅字部分】
往下移: margin-top: 5px; 【可以設定往下的距離,紅字部分】


另一種class用的 CSS:

<style>
.marleft {
margin-left: 5px;
}

.marcenter {
margin-left: auto;
margin-right: auto;
}

.marright {
margin-left:auto;
margin-right:0px;
}

</style>


教學影音:


補充說明:
事實上,只要是區塊型的元件(block-level elements)都適用上述的CSS操作手法。
常見的區塊型元件有:audio, div, form, h1~h6, ol, p, table, ul, video 等。
另,常見的 inline-block元件有:iframe, img, object。



版面上移後的重疊順序調整

使用 margin-top: -xxpx; 來位移版面後,會出現一個常見的、要去調整的問題。那就是重疊的版面,要如何去調整其重疊的順序?


請看範例:







說明:

我們把下面的DIV內的圖像,使用 margin-top: -200px; 功能上移。一般而言,媒材會有「後壓前」的規則。所以,花壓在海景的上面。

但,如果你想更動重疊的順序呢?請按此看變化


兩個DIV(媒材)可以同時加上下列語法的class

<style>

.positionbefore {
position: relative;
z-index: 2;
}

.positionafter {
position: relative;
z-index: 1;
}

</style>

這樣,重疊的順序就會產生變化。

注意,positon: relative; z-index: x; 這一組(兩個)都要使用,才能有效果。再來,z- index 後面的數字,數字大的,就會在壓在上面。一般 狀況下的預設值為 0 。


更動後的範例HTML語 法:

<div  class="positionbefore"><img style="width: 420px; height: 280px;"
src="圖像網址"><br>
</div>
<br>
<div style="text-align: right; margin-top: -200px;class="positionafter"><img
style="width: 320px; height: 213px;"
src="圖像網址"><br>
</div>



★特別注意事項:視覺的 V.S. 空間的(作用的)

一、如果DIV寬度的設定值,超過了可編輯空間的寬度。那麼,最後就只會是「靠左」這個預設值可起作用。

例如,本編輯區的寬度為578px。

語法:

<div style="width: 620px; border: 1px solid red;">
這是範例DIV。
</div>

呈現:

這是範例DIV。



二、如果DIV內(DIV 1)又設定DIV (DIV 2)。DIV 2的寬、高又大於DIV 1。那麼,(預設值中)DIV 2就會「破繭而出」,在視覺中超出於DIV 1。但是對電腦而言,真正的「實際使用空間」,仍是DIV 1 。請參考詳細教案
下面範例中,可以看到DIV 2 雖然在視覺上比 DIV 1 更大,但只有在DIV 1 的範圍內,才有互動作用。

語法:

<div style="width: 200px; height: 200px; border: 1px solid red;">
<div style="width: 300px; height: 300px; border: 1px solid blue;">

</div>
</div>
這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。<br>

呈現:

DIV 1
DIV 2
這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。






使用DIV相 關技巧:

DIV + CSS 隨心所欲搞定網路排版寫作

超快速任意移動物件:position: relative

在div內任意移動編輯物件: position: absolute

隨心所欲移動編輯物件



2015年5月2日 星期六

圖文的互動:hover:純CSS



圖配文的敘事性互動。

當滑鼠移到圖時,說明性的文字就跑出來。
這是常見的互動手法之一,這個範例是用純CSS的語法來達成。
可以注意的是:文、圖中間的透明度是可以 再被「作者」考量的特色之一。
不同的透明度,會影響 受眾對圖文之間的「交互性理解」。這樣的注意事項,是數位文本寫作時所特有的。
作者將這種互動寫作的思維面向,稱之為「互動文本寫作技法」。






這是秋天

風的影子,也會一絲絲的感受到。
陽光成為一種渴望的想像,配上可能的啤酒。



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

<style>

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

.backimg {
background: url(https://lh4.googleusercontent.com/-GQrnWebGPFM/VSJTjv6ykdI/AAAAAAAAbHM/6BcmFsFmYJg/w1079-h720-no/IMG_4869.JPG);
background-size: 520px 347px;
}

.colortr {
color: transparent;
}

.colortr:hover {
color: white;
background: linear-gradient(0deg, rgba(60,60,60,0.75), rgba(60,60,60,0.75)), url(https://lh4.googleusercontent.com/-GQrnWebGPFM/VSJTjv6ykdI/AAAAAAAAbHM/6BcmFsFmYJg/w1079-h720-no/IMG_4869.JPG);
background-size: 520px 347px;
}
</style>



影音教學:             


說明:
一、紅色字體處,是透明層的顏色。【我要看色碼表click
二、綠色字體處,是透明度。1 是完全不透明。


2015年4月6日 星期一

做出網頁的漂亮字型和特效:使用ppt



使用在中標、大標,可以快速提醒讀者文本的重心


一般繁體中文網頁的預設字只有四種:細明體、新細明體、標楷體、微軟正黑體。這四種字型在任何中字電腦上都可以正確的顯示,用來處理一般的內容是ok的。

但如果想要在中標、大標使用其他文字字型,如華康字型,目前為止最簡單的方法是把文字做成圖檔。有時在內文有一些要特別被強調的重點,也可以選用特別的字 體來呈現。此時,也可以把特別字體做成圖檔。



範例中的CSS:請放置<body>之後


<style type="text/css">
.word010406 {
font-family: Verdana, '微軟正黑體';
font-size: 1.8em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
letter-spacing: 0.1em;
border-top: 2px solid darkred;
}

.word010406:hover {
border-top: 2px solid transparent;
}


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


</style>



影音教學:




馬上增強功力的相關技能:
一、用背景圖拼貼圖像 plus 文字安排的大、中、小
二、PPT圖文速成大法:網路寫作功力大增祕技
三、搞定對話框也未免太簡單了吧!



2015年3月28日 星期六

滑鼠移入,照片就會滑動




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


使用jQuery方法
使用CSS方法


  


photos with czj 35/2.4 Thanks to deadfish1206


教學影音:




CSS語法:請 放置於<head>xxx</head>之間或<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程式:請放 到<head>xxx</head>之間或<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">

驅動程式碼:請放到<head>xxx</head>之間或 <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:寫出漂亮的中標和內文★很常用★