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

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!!



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。內部DIV的寬、高又大於外部的DIV。那麼,(預設值中)內部DIV就會「破繭而出」,在視覺中超出於外部DIV。但是 對電腦而言,真正的「實際使用空間」,仍是外部的。請參考詳細教案

語法:

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

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

呈現:


這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。






使用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語法:請 放置於<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:寫出漂亮的中標和內文★很常用★