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

2017年10月28日 星期六

CSS 選擇器的使用:父子關係/ 子孫關係/ 兄弟關係




精準控制媒材物件:CSS 選擇器的使用
父子關係/ 子孫關係/ 兄弟關係三種關係模式的操作


這是很重要的數位文本寫作技法。CSS選擇器的使用,是數位文本寫作過程中,「媒材物件」這一寫作觀念逐步產生寫作構思影響力之後,必要被重視的一種寫 作技法。對「媒材物件」掌握的精準性要求,標誌出數位寫作完全不同於傳統文本寫件的「寫作思維」。

這一種文本寫作觀念和技法,是傳統文本寫作時所沒有的。換言之,一般寫作者對這種觀念是完全陌生的。事實上,讀者必須是有著一些基礎的數位文本寫作經驗 值,才能理解它、使用它;而且都需要花一點時間,才能被充分掌握。

建議先「玩一玩」下方的互動示意圖,讓自己對媒材的「層級關係」有些大致性的模糊理解;再看一下影音教學。這樣,往下所寫的解釋性文字,才有被理解的可能性。




前一個個DIV(id ="divle2017102801a")。
這也是第一層的DIV,001。

002第一層內的 span文字

第二層級屬性的DIV,002。這一DIV的內部文 字003,有加span效果

第二層級屬性的DIV,002。
第三層級屬性的DIV,003。這一DIV層級內的有span 效果文字004


後一個DIV(class ="bacl20171028")。


看 層級變化的示意層次圖示,按我



數位寫作基礎觀念:媒材物件的層級關係

在數位文本寫作過程中,我們一定要清楚了解媒材物件與媒材物件之間的「層級關係」。層級關係共 有三種樣態:(一)父子關係,(二)子孫關係,(三)兄弟關係。

對媒材與媒材之間的層級關係掌握清楚,才能使用操作於「層級關係」的語法,才能清清楚楚,隨心所欲地操作於任一個你意指中的媒材物件。

例如,請滑入上面文字mouseover ↑), 將可以使得「子孫關係」四個字,形成「視覺變化及位移效果」。換言之,使用媒材層級關係的概念和方法,來明確地達到創作者所意欲的特定媒材物件之變化。

什麼是媒材物件的「層級關係」呢?來,請先看語法結構

<div>
DIV裡面的文字,<span style="color: red;">有用span變化的文字</span>。接著的文字。
</div>

語法所形成的呈現

DIV裡面的文字,有用span變化的文字。接著的文字。

我們可以觀察,在 DIV這一媒材物件(即<div>xxx</div>)的裡面,請特別注意,一定是指在某一媒材完整語法「的裡面」,如果再有 其他媒材物件存在,那麼就形成了媒材物件媒材裡面媒材物件之間的世代性「層級關係」,亦即類似於父子 這種派生式的親屬關係樣態的關係。再細區分為父子關係,子孫關係。

父子關係是指,兩媒材物件之間,只隔著「一層」的派生關係, 有如父子般的關係。如上例的div和span,就是父子關係。

寫法:

<style>
div.test001a {
border: 1px solid black;
}

div.test001a > span {
text-decoration: underline;
color: red;
}
</style>

<div class="test001a">
DIV裡面的文字,<span >有用span變化的文字</span>。接著的文字。
</div>

呈現:

DIV裡面的文字,有用span變化的文字。接著的文字。


說明:

「>」這個符號,來表示兩者之間的父子關係。

子孫關係是指,某一媒材物件,與它裡面所派生的「所有」的媒材物件之間的關係,換言之, 不再是局限於「一層」,所是與「所有層」的 媒材物件關係,是子孫關係。

例如下列語法

<style>
div.test002b {
border: 1px solid black;
}

div.test002b >div {
border: 1px solid blue;
}

div.test002b  span {
text-decoration: underline;
color: red;
}
</style>

<div class="test002b">
第一層的<span>有span的文字</span>。<br>
  <div>
         這是第二層DIV內的,<span>有span的文字</span>。後接文字。
  </div>
</br>
</div>

呈現樣態

第一層的有span的文字
這是第二層DIV內的,有span的文字。後接文字。



那麼,第一層DIV(黑色DIV)與,其裡面的所有媒材物件,包括DIV(藍色)以及span,所形成的關係,是子孫關係。理論一點的說,某一媒材物件與 其 面所派生的所有媒材之間的關係,是子孫關係。

說明:

中間是「 」,亦即空白,即是表示子孫關係。第一層DIV內的「所有span」都會被影響。

兄弟關係,則相對簡單。是指,同一層級之間,並例的前後之從屬關係,有如兄與弟的親屬關 係樣態,是兄弟關係。

例如語法

<style>
div.test003c {
border: 1px solid black;
}

div.test003c +div {
background-color: lightgray;
}
</style>

<div class="test003c">
前面的DIV。
</div>
<div >
後面的DIV。
</div>

呈現

前面的DIV。
後面的DIV。

好了,兩個DIV並沒有「裡、外」的關係,而是同一層級的前、後關係,就是兄弟關係。

說明:
用「+」這個符號,來標示對下個(div)發生作用。如果兩個物件之間有<br>,那麼則寫成,

div +br +div {
xxx
}

有幾個<br>,就寫幾個 +br。



語法寫作範例與使用時機


先看一個文本樣態,如下(滑鼠移入↓),最外層 DIV設有 id 為 id=" exdiv20171028 "


這是有span的文字

這裡是第二層div的內文。

這裡是第二個第二層的DIV內文,這裡是有span的文字



語法寫 入:

<style>

/* 父子關係,請 按我看呈現樣態 */
#exdiv20171028 >div {
border: 1px solid red;
}

/* 子孫關係,請 按此看效果 */
#exdiv20171028 span {
color: red;
}

* 兄弟關係,按 此看效果 */
#exdiv20171028 +div {
bacground-color: gray;
}

</style>


注意:

如果有相同的參數,那麼控制權的大小分別為,
style > id >選擇器 >class


作業練習:

請讓div裡面的照片傾斜。請使用父子、子孫兩種寫法,來完成。





發想參考:

div >div >img
或著
div img



選擇器的使用所產生的互動表現,請看教學網頁,here




進階學習:有選擇性的父子關係

來,先看一個示範。


第1個DIV

第2個DIV

第3個DIV




語法:

CSS語法

<style>
.divtest20171104 {
border: 1px solid black;
}

.divtest20171104  >div {
border: 1px solid red;
margin-left: 15px;
}


</style>

HTML語法

<div class="divtest20171104">
<br>
<div>第1個DIV</div>
<br>
<div>第2個DIV</div>
<br>
<div>第3個DIV</div>
<br>
</div>


寫作要求:

那麼,如果在這一個父子關係中,我們並不是想要所有的子DIV都被影 響,而是子DIV中的特定某一個DIV被影響,那有沒有方法呢?

換言之,這是在父子關係的選擇概念中,再要求可以做出特定的篩選功能。

那麼,符合 這一功能的CSS選擇器語法如下:

.divtest20171104 div:nth-of-type(2) {
background-color: lightgray;
}


說明:

如我們上面所學,父子關係,要在兩者間加入「>」這一符號。

但如果我們有加上 :nth-of-type(n) ,就不用再加上「>」這一符了(但如果你要加「>」,也不影響,因為本來就是被限定為父子關係;你也可以想成電腦自動加上「>」)。

.divtest20171104 div:nth-of-type(2) {
background-color: lightgray;
}

上面這一語法,指的是 .divtest20171104 父子層級關係下 的 第幾個DIV物件被選擇了出來。
:nth-of-type(n) 是指,第n個DIV要被選出來。此例為第二個要被選出來。按 此看效果。(請往上看)


要注意小技巧:

elemnet:nth-of-type(n)  這種寫法,中間都不可 以有空白字元

n,是指第幾個,從1算起。

再來,你也可以指定單數、偶數的選擇要求。
:nth-of-type(odd) 這是奇數的物件被選出來;
:nth-of-type(even) 這是偶數的物件被選擇出來 了。

再來,更複雜一點的。
:nth-of-type(an+b) 。來,例如,:nth-of-type(2n+1) ,那麼就是1, 3,5,7,9…這樣的順序被選擇出來。

n從0起算,再從1起累加。

例如, :nth-of-type(3n+2),則是2, 5, 8, 11…這樣的順序。

好了,好好去算數學吧!


練習題:

請做出下列的互動呈現樣態(滑鼠移入↓)












提示:看解答 click!!

div div:nth-of-type(odd):hover {
background-color: xxx;
}

div div:nth-of-type(even):hover {
background-color: xxx;
}





2017年9月9日 星期六

Hint.css 2.0:快速使用的純文字 tooltips

 


 

Hint.css 2.0
簡單 直接 快速 |讓tooltips 的功能發揮的很上手


一、純CSS語法套件。
二、純文字式的tooltips。
三、只用<span>來框住編輯元素即可。
四、可以設定直接呈現的功 能。








一、快速上手實作



設置CSS:

/* 請放置<head></head>之間或<body>之後 * /

<link rel="stylesheet"
href="http://lmcdwriting.org/userfiles/lmc201708/hint.css-2.5.0/hint.css">



使用方法:
  1. 在任何編輯物件上,如文字、圖像、div、iframe…等,都可以使用。
  2. 文字(inline物件),img、iframe等inline-block類編輯物件,請外層加上<span>xxx< /span> 。例如 <span>這是範例文字</span>。
  3. 在<span>裡加人會產生作用的 class,以及aria-label="xxx",xxx即是要跑出的文字。
  4. 其他塊狀編輯物件,div、p、H 等,請一定要設定寬度(px), 再於物件外層加上<span>xxx</span>,於<span>中加入作用class以及aria-label = "xxx"。 否則會以內文長度為寬度。★ hint.css會把作用物件 inline-block 化 ★
  5. 表格,請在TD內容前後加<span style="width: 100%;">td內容xxx</span> , 亦即要在span裡面加入 style="width: 100%;",再加入作用的class,這樣「整個格子」才會是作用範圍。
  6. <span>裡面如有設style,例如字體,會作用於出現的樣貌。


快速示範一:

這是有 Hint.css 作用的文字

〔語法〕:

<span
style="font-weight: bold; text-decoration: underline; font-style: italic;"
class="hint--right hint--error" aria-label="Hint.css的效果!">
這是有 Hint.css作用的文字
</span>


快速示範二:

這 是一個DIV。請要設定寬度,才能有效作用。
區塊型編輯物件,請要設定寬度,否則會被inlin-block化,
這樣寬度就會被CSS語法改變。 / 滑鼠here /



〔語法〕:

<span aria-label="區塊型編輯物件" class="hint--left hint--success">
<div style="border: 1px solid gray; width: 349px; line-height: 2; font-family: '微軟正黑體';">
這是一個DIV。請要設定寬度,才能有效作用。<br>
區塊型編輯物件,請要設定寬度,否則會被inlin-block化,<br>
這樣寬度就會被CSS語法改變。 / 滑鼠here /<br>
</div>
</span><br>





二、功能作用



出現位置:

上左

上右



下左

bottom-right


位置語法:

上左: class=" hint--top-left "
上: class=" hint--top "
上右: class=" hint--top-right "
左: class=" hint--left "
右: class="  hint--right  "
下左: class="  hint--bottom-left  "
下: class="  hint--bottom  "
下右: class="  hint--bottom-right  "



內容語法:

aria-label="裡面可以填寫內容"



顏色語法(請加入 class裡面):

紅色: hint--error
藍色: hint--info
橘色: hint--warning
綠色: hint--success



位置、顏色共現範例: class="hint--top hint--warning"



〔語法〕:

<span class="hint--top hint--warning" aria-label="拉拉山的水蜜桃"><img style="width: 180px; height: 120px;" alt="" src="https://farm5.staticflickr.com/4287/34757133373_159d1dcbd6_o.jpg"></span>



再強調一次:
一、文字、圖像( img )、以及影音( iframe )等inline以及inline-block的編輯物件,請外層加入<span>才有作用。
二、其他block的編輯物件,div、p 等,如要固定,請一定要設定寬度,並在其物件外層加入<span>,並加入作用class以及 aria-label,即可。
三、TD的使用注意,在td內文外層加上<span>,span寬度設100%,請看語法:

<td style="width: 180px;"><span style="width: 100%;"
class="hint--top-left hint--error" aria-label="上左的效果!">上左</span><br>
</td>





三、進階使用



請將下列代碼加入到class裡面,可以需要加上多個,中間有空白鍵即可:

hint--always                                //直接呈現

hint--rounded                             //圓角框  


hint--no-animate                        //無動態效果


hint--small                               //小型框

hint--medium                           //中型框


hint--large                               // 大型框






說明:把所有想要的功能 代碼,都加入到class裡面去,請移入。例:
class="hint--top hint--info hint--rounded hint--medium hint--no-animate"
aria-label="共有五種交果共同存在"






四、需求 改造



如果你想要 先直接呈現,然後滑鼠移入後 tooltips反而消失,這樣的功能效果,要如何來處置呢?
     





語法:

<span
onmouseover="$(this).removeClass('hint--bottom-left hint--info hint--always hint--rounded hint--large');"
onmouseout="$(this).addClass('hint--bottom-left hint--info hint--always hint--rounded hint--large');"
class="dispinbl hint--bottom-left hint--info hint--always hint--rounded hint--large"
aria-label="請滑鼠移到到DIV,直接呈現的Hint.css就會消失">
<div style="border: 1px solid gray; width: 576px; line-height: 2;">如果你想要
先直接呈現,然後滑鼠移入後
tooltips反而消失,這樣的功能效果,要如何來處置呢?</div>
</span>


保持 inline-block 狀態的CSS:

<style>
.dispinbl {
display: inline-block;
}
</style>


構思說明:

一、在span裡面加入,onmouseover 以及 onmousout 這二個互動語法。移入時把之前設好的 hint.css 功能代碼class 抽掉,於是之前設好的效果就不見了。滑鼠移出時,再「恢復」之前的class設定,於是hint.css的效果又出來了。
二、*注意*span裡面要記得加入inline-block功能的class。這樣一旦啟動onmouseover時,hint.css 的class被抽掉時,span還能保持inline-block的狀態。版面才不會變動。





教學影音:






語法:

<span class="hint--left hint--error" aria-label="Hint.css的效果!">
<iframe
src="https://www.youtube.com/embed/va9eQWi-A7s?rel=0"
allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
</span>


說明:

同樣的,在video iframe的語法外層加入有hint.css 效果的<span> 。






2017年9月2日 星期六

jQuery UI Dialog Box 互動的對話框





jQuery UI Dialog Box
互動的對話框|自動跳出|按一下跳出
各式各樣的媒材,文字、照片和影音,都可放進對話框


互動的對話框,是最常見的能動文本寫作技巧之一。
數位文本的能動特色,使得在對文本寫作的構思上,產生了許多傳統靜態線性文本所沒有的「文本呈現形式」。只有掌握了這些新的形式的寫作技巧,才能讓數位文 本在意義表現上真正凸顯出與傳統文本的不同特色。
對作者而言,談數位文本,一個先決觀念是:技術先於意義!





自動跳出 dialog box


一、請將下列jquery程式碼及CSS複製到<head> </head>之間或<body>之後:

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



二、要跳出來的內容設置於DIV內,請加上ID,下例:

jQuery UI 的 Dialog Box

基本上是Dialog Box這種互動模態
的「原型」,
如果你有了使用的上手經驗,
如果你對運作流程有一定理解,
就可以「思考」出更不同的表現形式。





〔DIV語法〕:

<div style="display: none;">
<div id="uidia20170901a" style="width: 424px;">
<img style="width: 180px; height: 165px;"
alt=""
src="圖像網址"
align="left" hspace="5"><span
style="text-decoration: underline; font-weight: bold;">jQuery UI 的
Dialog Box</span><br>
<br>
基本上是Dialog Box這種互動模態<br>
的「原型」,<br>
如果你有了使用的上手經驗,<br>
如果你對運作流程有一定理解,<br>
就可以「思考」出更不同的表現形式。<br>
</div>
</div>

〔注意事項〕:
一、請留意所設置DIV的寬度,此例為424px。這樣DIV的版面才能至少和dialog box相同。但最好多加28px。
二、因為是要跳出來的內容,所以請在文件的最後進行編輯寫作,才不會影響正常版面布局。
三、最後再於其外層加上一個<div style="display: none;">xxx</div>,使其消失於版 面(但資料還在)。
四、按此看上例語法之示範。

【進階補充】電腦會把內文DIV,即灰色部分,以inline-block的結構抓到dialog box裡去。所以對內文DIV的變化,一般而言都會被保留下來。


 三、請寫入下列dialog box驅動程式於<head></head>之間或<body>之後:

 <script>
  $( function() {
    $( "#uidia20170901a" ).dialog(
{
  width: 424                                      //設定對話框寬度
});
  });
  </script>


〔說明〕:
一、紅字部分就是上面範例DIV的 ID。請一定要加入 #  字號。
二、要為dialog box 設置寬度,至少要和上範例的寬度相同。或稍微加大一 點也可以,例430px。跟據我的經驗值,多加上28px,會很不錯
這樣網頁一打開,dialog box就會跳出來,而內容正是上範例的DIV。
三、如果值設定的太小,會有捲軸跑出來。如果不想有,就加大寬度設定,建議值:請多加28px。




四、如果想要改變跳出來時的位置,請加人下列參數:

<script>
$( function() {
$( "#uidia20170901a" ).dialog(
{
width: 424,
position: { my: "center-50% center-80%", at: "center center", of: window }    //設定出現位置
});
});
</script>


按我看位置更動的效果   



〔說明〕:
一、預設值是:position: { my: "center center", at: "center center", of: window }
二、可翻譯為my 我的跳出對話框的中間center(左右)、中間center(上下),對準於 at  ,整個視窗(window)的 中間center(左右)中間center(上下)。
三、我們更動為:position: { my: "center-50% center-80%", at: "center center", of: window }
四、xx%是以dialog box的長寬來當作計算標準。可以是正、負,例center+50% center-30%。




按一下就跳出  Dialog Box




一、請copy下列 jquery 程式碼至<head></head>之間或<body>之後,如上例已有使用,就可省略:

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


二、用DIV做出要跳出的內容,如同上例,要設ID以及注意寬度數據:


這是div的內容。
ID 是 #diadiv02B。
寬度是    185px。



〔注意事項〕:
同樣的,
一、因為是要跳出來的內容,所以請在文件的最後進行編輯寫作,才不會影響正常版面布局。
二、最後再於其外層加上一個<div style="display: none;">xxx</div>,使其消失於版 面(但資料還在,讓程式來抓資料)。


三、在要按下去的媒材內設置驅動程式:

onclick="  $('#diadiv02B').dialog({width: 195});  "


互動範例文字,請按我


〔上例語法〕:
<span onclick="$('#diadiv02B').dialog({width: 195});"
style="text-decoration: underline;">互動範例文字,請按我</span>


〔說明〕:
一、寬度設定為195px。我們之前提過,寬度至少要和DIV同寬,或著為了版面美 觀,可以稍微多加一點。建議值:28px。
二、onclick可以放在任可編輯元素中,span, div, img, iframe等等。請看教學video。



四、想要設置對話框的跳出位置:


onclick="  $('#diadiv03A').dialog({width: 195, position: { my: 'center+100% center-100%', at: 'center center', of: window }});  "


Dialog Box互動範例,在DIV按下,請按我。


〔說明〕:
語法結構與「自動跳出」的前範例同。只是裡面的引號從  " (雙引號)改成  '  (單引號)。請看教學影音詳解。
 





進階參數補充


〔class〕:   //設定dialog box布局的class

$( ".selector" ).dialog({
  classes: {
    "ui-dialog": "highlight"
  }
});


Default:
{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}



〔show & hide〕:   //出現、消失的動態方式

$( ".selector" ).dialog({
  show: { effect: "blind", duration: 800 }
});


$( ".selector" ).dialog({
  hide: { effect: "explode", duration: 1000 }
});



〔modal〕:     //產生遮罩

Default: false

$( ".selector" ).dialog({
  modal: true
});



〔多參數整合語法範 例〕:


jQuery UI 的 Dialog Box

基本上是Dialog Box這種互動模態
的「原型」,
如果你有了使用的上手經驗,
如果你對運作流程有一定理解,
就可以「思考」出更不同的表現形式。
這是div的內容。
ID 是 #diadiv02B。
寬度是    185px。


這是第二個div的內容。
ID 是 #diadiv03A。
寬度是    185px。

<script>
function diydiaboxa01() {

  $( function() {
    $( "#diymulti01" ).dialog(
{
  width: 588,
  show: { effect: "blind", duration: 800 },
  classes: {
  "ui-dialog": "ui-corner-all diydacl02"},
   modal: true                         
});
  });
 
};
</script>


click 物件,請按我!看影音:


onclick=" diydiaboxa01(); "



〔使用經驗值):
一、如果想變化「內文區」,即紅色框線內的變化,必須在id下參數。此例要設 #diymulti01 { }。
二、內文區有預設 padding 值,左右大約各有14px,所以共28px。因之,在設定dialog box 寬度時,宜在DIV寬度值再多加上28px 值,上文已提及。此例,560+28=588。
三、classes: { "ui-dialog": "ui-corner-all diydacl02" }, 所控制的,是「整個」dialog box的變化。例如 .diydacl02 {} 有設背景色,所以整個dialog box都呈現背景色(淡黃)。








輕輕走過,靜靜聽過,慢慢想過。安沈中有一種力量。





2017年8月23日 星期三

tooltipster 4.0版。超好用的tooltips模組。






tooltips互動 技法之一
快速補充說明
|tooltipster 互動技法
|馬上對不清楚的地方進行說明

tooltipster這一互動模組,可以產生tooltips的互動模態。更重要的是,它 有各式各樣的呈現變化,同時可 以承載多媒體媒材,也可以是超連結互動內容。在 使用上,簡單,可以行使在各種物件上。在調整上,也易於操作。


呈現樣態共有六種模式:


tooltipster的互動效果,可以作用於各式媒材,或編輯元素(elements),例如img、span、div、table、td、 iframe等等。操作方法便利。



設置方法



一、請在<head>xxx< /head>之間(建議)或<body>之後,置入下列 jquery & CSS程式碼:

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/js/tooltipster.bundle.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/tooltipster.bundle.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min.css">



二、請在<head>xxx< /head>之間或<body>之後,置入一列驅動程式碼(預設款):

<script>
$(document).ready(function() {
$('.tooltipster').tooltipster();
});
</script>


三、為編輯元素設置互動,以span為例:


這是用span包圍起來的文字。


語法:
<span style="text-decoration: underline;" title="這是基本預設款式" class="tooltipster">這是用span包圍起 來的文字。</span>

說明:
1. 只要在span裡面,加入有啟動tooltipster功能的 class,此例為tooltipster。再於 title 裡面加入文字;那文字就是會跑出來的文字。
2. 基本款,其呈現位置會視狀況自行調整。




設置變化款式



一、同前例,如已設,則省略。

二、設置各種款項的驅動程式,< head>xx<head>之間或<body>之後,此例為筆者設定第一款式:

<script>
$(document).ready(function() {
$('.tps20170822a').tooltipster({
side:['left'],                               //出現的位置,有 left, right, top, bottom 這四選項。
animation: 'fall',                        //出現動作模式,有 'fade','grow','swing','slide','fall' 這五種選項。
theme: 'tooltipster-punk',          //設定的款式,有五種,請看下方說明。
functionPosition: function(instance, helper, position){     //可設定出現的位移位置。
position.coord.top += 0;
position.coord.left += 0;

return position;
}
});
});
</script>


三、為元素設定互動,以圖片為例:



語法:
<img style="width: 240px; height: 160px;" title="第一變化款式樣態" class="tps20170822a" alt="" src="https://c1.staticflickr.com/3/2942/34049661985_07e951a0de_b.jpg">

說明:
可設定的款式共有五款,分別為:tooltipster-light,  tooltipster-borderless,  tooltipster-punk,  tooltipster-noir,  tooltipster-shadow  。


四、其他筆者所設定樣態,第二款式noir:

請copy驅動程式碼,放到<head> xxx</head>之間或<body>之後:

<script>
$(document).ready(function() {
$('.tps20170822b').tooltipster({
side:['top'],
animation: 'swing',
theme: 'tooltipster-noir',
functionPosition: function(instance, helper, position){
position.coord.top += 0;
position.coord.left += 0;

return position;
}
});
});
</script>


這是DIV。請移到這樣 來看tooltipster效果。

語法:
<div title="筆者自設第二款式效果" class="divexa20170822a tps20170822b">這是DIV。請移到這樣來看 tooltipster效果。</div>





可超連結款式


請copy驅動程式碼,放到<head> xxx</head>之間或<body>之後:

<script>
$(document).ready(function() {
$('.tps20170822d').tooltipster({
side:['top'],
animation: 'slide',
interactive: true,              //這一行,啟動滑鼠可上移到內容並click的功能。
contentAsHTML: true,      //這二行,啟動title的內文可是超連結文字的功能
theme: 'tooltipster-shadow',
functionPosition: function(instance, helper, position){   //此例設定了位移,向左位移90px
position.coord.top += 0;
position.coord.left += 90;

return position;
}
});
});
</script>




這是表格。
也可設定在格子TD。

夏日。
陽明山。
綠色。



語法:
<table style="text-align: left; width: 100%;"
title="&lt;a href='http://lmcsilver.blogspot.tw/' target='_blank'&gt;可超連結影像blog&lt;/a&gt;,同
時位移的樣態。"
class="tps20170822d" border="0" cellpadding="0" cellspacing="3">
<tbody>
<tr>
<td style="vertical-align: top; width: 33%;"><img
style="width: 187px; height: 125px;" alt=""
src="https://c1.staticflickr.com/3/2916/33771841862_c226ef38b6_b.jpg"><br>
</td>
<td style="vertical-align: top; width: 33%;"><img
style="width: 187px; height: 125px;" alt=""
src="https://c1.staticflickr.com/5/4227/34898664156_5eecb5299a_b.jpg"><br>
</td>
<td style="vertical-align: top; text-align: right;">這是表格。<br>
<br>
夏日。<br>
陽明山。<br>
<br>
綠色。<br>
<br>
</td>
</tr>
</tbody>
</table>

說明:
有超連結的內容設定較為複雜一點點,還請看下面的影音教學。


影音說明範例,將 " 符號都改為 ' 這符號:
<a href=' http://lmcsilver.blogspot.tw/ ' target='_blank'>可超連結影像blog</a>,同
時位移的樣態。






圖文整合款式
 ★注意:使用data-tooltip-content 取代上面的 title

設置思路:
  1. 請設置一個小型DIV,把圖文以及影音,都放在DIV內。最後tooltip出現的就是這個DIV。
  2. 在這DIV的前後加上有id的span,<span id="idname">XXX</span>。因為這個模組是如此要求的。
  3. 置入驅動程式碼。
  4. 在設定的互動的媒材,這次要用data-tooltip-content="#idname",而不是上面所用的 title="xxx"。
  5. 最後,使用display:none; 使得先寫好的DIV,消失於版面上。

一、小型DIV,加上 span,給span設立 id  ,範例。DIV裡面可以加入任何元素以及互動、超連結。

  師大夜市
  總是人潮如海,
  讓人懷念的小吃,很多。

語法:
<span id="tpcontenta01">
<div style="width: 258px;"><img style="width: 92px; height: 61px;" alt="" src="https://c2.staticflickr.com/9/8543/29065885441_ff2503ac7e_b.jpg" align="left">&nbsp; <span style="font-weight: bold;">師大夜市</span><br>&nbsp; 總是人潮如海,<br>&nbsp; 讓人懷念的小吃,很多。<br></div>
</span>

二、設置驅動程式碼, <head>xxx</head>之間或<body>之後:

<script>
$(document).ready(function() {
$('.tps20170822e').tooltipster({
side:['top'],
animation: 'fall',
theme: 'tooltipster-light',
interactive: true,              //這一行,啟動滑鼠可上移到內容並click的功能。
functionPosition: function(instance, helper, position){   //設定向右偏移了90px
position.coord.top += 0;
position.coord.left += 90;

return position;
}
});
});
</script>


三、為媒材設立互動機 制,注意,使用 data-tooltip-content  ,而不是 title :


晚上,散步的師大夜市, 一樣的味道,不一樣的嘈吵。


語法:

<span style="text-decoration: underline; font-weight: bold; font-style: italic;" data-tooltip-content="#tpcontenta01" class="tps20170822e">散步的師大夜市</span>


注意技巧:
data-tooltip-content="#xxx" ,那個「 # 」字符號,即id的符號,一定要加進去。


四、把第一步聚所設置的 小DIV,在版面上藏起來。

在小DIV(包含span)外層再加上一個DIV,然後設立 style="display: non;" 使得加上的外層DIV在版面上消失。例如:

<div style="display: none;">
<span id="tpcontenta01">
<div style="width: 258px;">
內容
</div>
</span>
</div>


如果圖文整合款式,有做了很多個,都可以把所做的小DIV,一起藏在這個要消失的DIV裡面。



使用click方式
 ★你可以使用click來取代hover,例如純影音的內 容時

構思方式:
  1. 設置方式和上例,圖文整合款示,相同。設立一個小DIV,再外加上有id 的span 。
  2. 驅動程式碼的內容設定,有一個增加功能,啟動Click,請看範例。
  3. 使用click,而不是如之前的hover,來啟動tooltips。

一、驅動程式碼:

<script>
$(document).ready(function() {
$('.tps20170822f').tooltipster({
side:['right'],
animation: 'swing',
theme: 'tooltipster-noir',
interactive: true,              //這一行,啟動滑鼠可上移到內容並click的功能。
trigger: 'click',              //這一行,將以click來啟動功能。
functionPosition: function(instance, helper, position){  
position.coord.top += 0;
position.coord.left += 0;

return position;
}
});
});
</script>


二、範例,請按圖片(這次是click,不是hover):


  臉色!
  諸佛也有臉色嗎?
 
  俯看世間的眼,
  是一種深沈的人性。
  ← click image !!


語法:

<img style="width: 180px; height: 120px;" data-tooltip-content="#show02a" class="tps20170822f" alt="" src="https://farm1.staticflickr.com/717/31964606043_17ca856b39_o.jpg" align="left">











海豚的跳躍。
使用light模式,grow,
在右邊呈現。圖加文。



  師大夜市
  總是人潮如海,
  讓人懷念的小吃,很多。





2017年7月22日 星期六

自由移動 DIV:relative, absolute, translate, z-index。完全理解!






自由移動!
block-level elements ;區塊層級物件

DIV
by 編輯老師

數位文本的意義給出方式,更大的依賴於媒材之間的空間位置關係,所釋放出來的理解過程。換言之,寫作過程中,媒材位置的排列佈置,往往是作者傳達寫作思維 意義的方 式。
就此,對於如何自由的去移動媒材,控制媒材所處的位置,就是必要的數位文本寫作技法。



  1. relative:相對法
  2. absolute:絕對法
  3. translate:轉移法
  4. 上下重疊

影音教學:






 

技 法一: position: relative;

一個典型的 position: relative; CSS語法。
 
<style>
/* relative語法 */
.posirela {
position: relative;   /* 啟動功能 */
top: -25px;             /* 向上移動 */
left: 100px;           /* 向左 移動 */
}

/* div寬高設定 */
.divposi {
width: 150px;
height: 150px;
border: 1px solid black;
}

</style>

下列是一個DIV 的html語法:

<div class="divposi">
這是示範的DIV

</div>

DIV 的呈現樣態如下。 
按這裡會把 .posirela 加入,產生變化。



這是示範的DIV
DIV後面的編輯寫作文字。DIV後面的文章…

幾個觀察的重點:

一、DIV移動後,「電腦」仍然認為DIV真正的所在的位置是不變的。所以整個版面沒有變動。移動只是視覺上的移動,真正的位置仍是沒有變動的。

二、DIV是以本身所在位置為計算原點,來進行移動位置的計 算,所以被稱之為相對的移動,relative。以DIV本身的top, right, bottom, left來計算。






 

技 法二:position: absolute;

請先看範例,觀察變化。
按 這裡來移動DIV。


這是父 級DIV。
這是內文的文字。
這是內文的文字。
這是要進行 absolute 移動的DIV



這是子DIV後的文字。
這是子DIV後的文字。



現在來看CSS語法:

<style>

/* 父級的DIV。一定要設定為relative */
.fatherdiv {
position: relative;
}

/* 要以absolute移動的DIV */
.absoludiv {
position: absolute;
top: -20px;
left: 150px;
}

</style>






觀察注意事項:

一、absolute移動DIV後,不但是在視覺上移動了,電腦同時也把原來在版面上所佔的位置取消了。所以會看到,下面的文字擠上來了。

二、absolute移動功能,是雙重結構的。要先有父級的DIV,然後裡面再設置 absolute要移動的DIV。如果沒有設置父級DIV,就會以「整 個網頁」當作父級DIV。所以會跑到最上面 click看 效果

三、移動計算的原點是以「父級DIV」的左上角為計算的原點(箭頭處)。





 

技 法三:transform: translate(x, y);

這是CSS較新的語法,可以x, y軸的移動,也可以單獨是x軸或y軸,來移動。

transform: translate(100px, -50px);  按此看效果
transform: translateX(100px);  按此看效果
transform: translateY(-50px);  按此看效果







CSS語法:

<style>
.transmov {
transform: translate(100px, -50px);
}
</style>
DIV後面的文字。後面的文字。







觀察注意事項:

一、translate 相當於 relative,是以本身的左上角為移動的參考點。

二、同樣的,被移動只是視覺上的效果,物件本身所佔的版面位置並沒有變化。所以,移動時,下方的資料並沒有任可變化。






 

技法四:上下重疊的變化

當二個(或以上)DIV彼此重疊時,要如何來決定那個在最上面,那個在最下面呢?彼此重疊的順序,要如何來決定呢?

如使用z-index後下例的變化。

A

B

CSS語法:

.divA {

position: relative;
z-index: 3;
}

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

說明:
要重疊的DIV排序,都要有二道手序。
(一)是都要有 position 這個指令,才能相互比較。
(二)再使用z-index: 數字;來形成重疊順序。數字愈大,會在上面。
(三)position 的參數值可以是不同的,諸如 static、absolute、relative、fixed。例如一個是relative,而另一個是absolute,也是可以進行比較。







觀察說明:

一、一般而言,在預設的狀況下,應是會面的編輯元件會壓住前面的。

A

B

二、如果有幾個編輯元素要來排定重疊順序,我們就可以來使用 position & z-index 的共同使用功能。

三、一般的預設中,其實每個文件中的元件都是被預計為 z-index: 0; 。因此,如果只是單純的要把某一單獨元件拉到最下面,那麼只要同時為某一元件設定: position: relative; z-index: -1; ,就可以快速的拉到最下面。

例如,將照片上移(margin-top: -4em;),後壓前的原理,照片會蓋住文字。於是使用 z-index: -1; 這個技法,照片就會被拉到最後面,文字跑出來了:

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

請按此看 z-index: -1 效果

這是一段文字。這是一段文字。
這是一段文字。這是一段文字。這是一段文字。
這是一段文字。

這 是DIV文字。






有關疊層次序的原則:



移動物件寫作技法比較:margin-top: -15px; 和 postition: relative; top: 5px; left: 5px; 的不同

我們以前學過,要讓在版面下方的編輯物件上移,可以使用 margin-top: -15px 這個技法。也就是使用負數的上邊界功能,讓下方版面整個上移,達到編輯目的。按 此看效果。

現在,也可以使用 postition: relative; top: 5px; left: 5px; 這一組CSS語法,來自由移動編輯物件。
兩者看起來效果差不多,但電腦對這者的「認知」是完全不同的。

margin-top: -15px; 是讓「版面往上移」,而 postition: relative; top: 5px; left: 5px; 這一組,只是「編輯物件移動」,就電腦而言,版面是沒有變動的。

所以,如果你只是想「移動編輯物件」,但又不想破壞原本就設計好的版面,就應要使用 postition: relative; top: 5px; left: 5px; 這一組CSS語法,才是正 解

請 按此看效果。


CSS語法:

<style>
/*移動位置的一組語法*/
.posichange20171213 {
position: relative;
top: -3em;         /*這是指以物件的左上角為原點來計算,正負值均可*/
left: 10em;         /*em 是指以字母的距離來計算*/
}
</style>


使用Kompozer的 CSS編輯器,操作如圖:



【說明】:
  1. 「位置」的地方,請設定「相對位置」,這即是 position: relative;
  2. 「位 移」的地方,請在「頂端」及「左邊」設定參數值。這即是 top: -10px; left: -20px;



2017年7月20日 星期四

完全DIY 快速自製 image gallery






網頁程式寫作
完全DIY
快速隨意的自製出 image gallery



Schneider 老鏡,是我最喜的老鏡頭!
柔和、與世無爭、甜淡、純顏色的一種姿態呈現。
Canon 5D + schneider 50mm f2.8 M42 。click more…▼






123 456 789 101112 範例後的文字



寫作語法範例:

<div style="width: 576px; height: 384px;"
onclick="$(this).myPlugin20170720();" class="idoitimgga20170719">
<img
style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4309/35183964774_76cfb39f64_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4304/35981836736_be0d486a4a_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4323/35183956484_58fc3cd977_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4208/35836631096_60e8ee7fea_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4279/35067718253_93b04e03d6_o.jpg"><br>
</div>



發想概念:

一、請設定出想要大小的DIV。並設定寬、高。
二、DIV的大小,一定要和展現的照片之大小,一致。
三、請在DIV內不斷的加入照片,請隨意的加入數量。
四、請在DIV內套入下列的CSS。
五、請copy寫入下列程式碼。
六、請在DIV內,設定 onclick 功能,如下例。


jquery 程式碼:

/* 如果已有使用下列二條設定jquery環境的程式碼,就可不必使用。 */
/* 請copy 到<head> </head>或<body>之後 */

<script src="http://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


這一範例的jquery 碼:

/* 請copy 到<head> </head>或<body>之後 */

<script>

(function( $ ){

var numberca20170720 = 1;

$.fn.myPlugin20170720 = function() {

// 你的Plugin內容寫在這裡面。

var numgapic = $(this).find('>img').size();
var realnum = numgapic - numberca20170720;

if (realnum != 0) {
$(this).find('>img').eq(realnum).hide('slide', {direction: 'left'}, 600);
numberca20170720 = numberca20170720 + 1;
}
else {
$(this).find('>img').show('slide', {direction: 'right'}, 600);
numberca20170720 = 1;
}

};

})(jQuery);

</script>


設定「按下去 的地方」的onclick互動碼:

/* 請設定在DIV裡 */

onclick = ' $(this).myPlugin20170720(); '



CSS語法:

/* 請套入到 div 裡 */

<style>

.idoitimgga20170719 {
position: relative;
border: 1px solid black;
}

.idoitimgga20170719 >img {
position: absolute;
top: 0px;
left: 0px;
}

</style>


教學影音: