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

　回到頁首　

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

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

掌握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基本分解圖

細部詳細分解說明圖。

超快速圖文互搭互動：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);

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

圖文互搭技巧：

文字區塊加入半透明的底色

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

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

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

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

教學影音：

<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>裡面。

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

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

---

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

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

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

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

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

第一式：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>
上面這條程式碼的式子，要刪除，只保留第一個。

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，暗紅色字體者。

---

影音教學：

快速補充資訊的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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Zkt8ndff6A-3c_paUCltv39pPTPbMKKI8hKfej3XwQvsLvQsQnEriEGO_vlYZPxdM0L2Wo2QzfC-ShZBhgjYKNTYKz733BxOVm1McdH1j-dvocg3enE7od0SuRccsi_MXP430gvFaJg/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。

快速補充資訊的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>

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

快 速簡單又有變化：
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>

教學影音：

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

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

一、排版寫作；二、分層文本；三、圖文互搭。這三個數位文本面向，是撐起數位文本的媒材布局所常見的手 法，即技巧。
插入背影圖後，可以再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 文字安排的大、中、小
五、把影音貼到照片上面去

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

隨心所欲移動編輯物件

圖文的互動：hover：純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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGEJBWAIshXn3c3V83KmTiI_K5ndipgOwEi0_YTZtB5dhF7MPuVQhl-j662FH17FvRFE07wsurvXkewQjcDRDM-JXdZ91Xd1f89_dXv4thhZm_7hXf8jmFQQ6Vtmd961q54rmiVpjDdE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGEJBWAIshXn3c3V83KmTiI_K5ndipgOwEi0_YTZtB5dhF7MPuVQhl-j662FH17FvRFE07wsurvXkewQjcDRDM-JXdZ91Xd1f89_dXv4thhZm_7hXf8jmFQQ6Vtmd961q54rmiVpjDdE/w1079-h720-no/IMG_4869.JPG);
background-size: 520px 347px;
}
</style>

影音教學：             


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

做出網頁的漂亮字型和特效：使用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圖文速成大法：網路寫作功力大增祕技

三、搞定對話框也未免太簡單了吧！

滑鼠移入，照片就會滑動

滑鼠移入照片動

另一張照片show出來

一段說明文字展現出來

透過互動過程資料的變化，可以形成具有前後形式敘事意義開展

使用jQuery方法

使用CSS方法

  

photos with czj 35/2.4 Thanks to deadfish1206


教學影音：




CSS語法：請 放置於<head>xxx</head>之間或<body>之後

<style>
.baimg032801 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlmz6uJQQXH57bHkr1uaWvc_jMLTdC1v6rzqYMzE_oTykiNQVPOMozgsd4KHtBHTZOpNq_te7ScQbFzl1u0ax8bUNxkWUOFbr9kEyk_XBu7mABl38K4tCqPD_LqjwCzwBYzcfIip8jbNk/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 。

影音教學：

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

快速設定大標、中標及內文

文字的設定，是網路文本和讀者打交道過程，最重要的介面。

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

這是一段普通的文字。文字會依頁面的寬度而填滿。也就是只有在段落的最後才有<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：寫出漂亮的中標和內文。★很常用★

這是中標這是中標這是中標