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

2017年6月30日 星期五

表格空間寫作的練習題(一)




跟著練習就會做!
表格空間寫作的練習題
step-by-step搞定技法的寫作困難




演練範例:



觀察思考方向:
  1. 觀察是否規律性構成,決定是否適合使用表格技法。
  2. 使用二個表格來形成上、下式的拼貼組構,可快速完成。
  3. 上表格的圖使用背景圖技法,可隨意編輯內含文字。
  4. 可以再增加什麼樣的互動表現?



練習所做的成果: 按這裡看 表格堆積的效果變化 click here!


一次無法忘懷的印象

北海岸
風、雨與急馳的電軌車

走 過的風景線,是一點一點的靜默




值得注意的所使用技法: 插入背景圖、透明背影色、寫作元素位移
所增加的互動變化技法: 背景圖、文字DIV的互動變化




影音教學:



範例使用CSS:





2017年6月28日 星期三

表格技能(四):合併儲存格的技巧



合併儲存格的技巧

創造規律中的不規律
使用表格的合 併儲存格功能,能使得有創意的「規律性」美感,直觀的呈現!

構思注意事項
一、要記著規律性的重要性,保持規律性下的合併表格。
二、在做表格時,不管是欄或列。都要保持著有一欄或一列是「完整狀況」,亦即是沒有做出合併動作。來讓電腦做為計算之用的基準。請看影音教學。




左、右各二比一的布局:










列的合併表格:









2017年6月19日 星期一

搞定DIV的區塊寫作概念&css選擇器





DIV區塊概念 & css選擇器初步
數位文本的寫作基本觀念
想要寫好數位文本、搞定數位寫作;
一定要建立起來的數位媒材基本運作方式。



對初學者而言,談DIV的特色,並沒有太大意義。
在沒有寫作運用的經驗下,你無法想像那些所謂DIV的媒材特性;當然你更無法去想像為什麼要用DIV?如何使用DIV?

 

你先把以下三個常用的基本概念,暫時先「硬記」起來!
  1. DIV是區塊的,是block的空間概念。請看video。
  2. 通常,我們會把媒材,例如文字、圖像、影音…等等用DIV包 起來,再來處理DIV。
  3. DIV非常適合用來處理版面空間移動和互動效果,所以被大量使用。
DIV是最方便用來寫作數位文本的媒材物件!elements!更重要的是,它是「區塊」媒材物件。
再來是,如何選出你要的DIV呢?這就是選擇器要出馬的時候了。


1.DIV基本語法:


<div>
這是內容,可以是文字、圖像等等…。
</div>


名詞使用/翻譯:

<div class="claname01" width="400" style="border: 1px solid red;">DIV內容媒材</div>

<element attribute="value" attribute="value" attribute ="property: value;">DIV內容媒材</div>

<物件 屬性="屬性值" 屬性="屬性值" 屬性="參數: 參數值;">DIV內容媒材<結束碼〉


說明:

上面是常見的語法術語。英文和中文翻譯,我也都列在裡面。
有幾個地方,可以多談一下。

一、

element,我譯為「物件」。一般常見的是「元素」。為什麼我譯為物件?我並不是「直譯」,而是依「功能」的概念來譯。這樣在上課的解釋說明時,可以 把想法表墶的更清楚。

當我們把某些媒材,上例是幾個文字,用DIV包起來,是為什麼呢?為什要「多做」這些麻煩的寫作動作呢?

那是因為,我們其實是想把「那個幾字」圈封在一起,來對之進行變化操作,如改顏色、移動位置等等。

在這一思維過程中,那幾個字是被轉換為「物件」來思考,因為「人類」這種生物只能以「物件」的概念來思考「對象物」。這即是胡塞爾所談的「意向性」。

羅伯.索科羅斯基談論意向性時說道:「每一個經驗活動,都是具有指向性的:意識總是『對於某事某物的意識』,經驗總是『對某事某物的經驗』」(羅伯.索科 羅斯基/李維羅譯,2004:24)。意向性,「標誌著所有意識的本已特色」(倪梁康,1999:249)。

依此而論,當使用element時,是想對媒材進行某種操作,因之,element譯為「物件」,比傳統元素直譯,來得更為接近「寫作心理狀態」的描述。 從寫作/閱讀角度出發,而不是從「技術語法」出發,是我在思考數位文本理論,所持的立場(李明哲,2017)。這也反映在網路教案中。


二、

一個媒材物件內,可以有很多「屬性」,例如上述中calss、width等等。要注意的是:這些屬性是「同一位階的」。換言之,是和物件「平行的同一位 階」地對「物件」進行變化操作。

這樣的理解很重要,因為以後使用css選擇器時,位階關係是選擇判斷上的重要依據。例如elemetn[attribute]/div[class= "name"],是「屬性選擇器」,只能用屬性來選。

那麼,style這個屬性就比較的不同了。

例如 width="400“  個屬性,只要下「屬性值」就好。但style="width: 300px;"這個屬性,卻有更多的操作變項,可以稱之為「參數:參數值」。

因之,在教案內,一般而言,提到參數、參數值,往往是指style屬性。



注釋:

羅伯.索科羅斯基/李維羅(2004)。《現象學十四講》。台北市:心靈工坊文化。
倪梁康(1999)。《胡賽爾現象學概念通釋》。北京:新知三聯。
李明哲(2017)。《能動敘事文本寫作的現象學分析》。台北市:五南。



2.DIV的block特性


這是DIV和其內容。請看影音教學,了解什麼是block。
這是後面的文字…

說明:

DIV是區塊媒材物件,「區塊」是一種「空間的」概念。也就是說,只要你下了DIV指令(區塊物件),電腦就認為你「佔領了」一個「版面空間區域」, 如上例紅色框線內的版面空間區域,就被圍封起來了。

即使,DIV的版面空間,沒有填滿內容,那也不怎麼樣,反正電腦認為,那一塊版面空間已被圍封起來了, 不能再被DIV以外的媒材來佔領使用。


舉例:

DIV前面的文字
DIV 裡面的文字。
DIV後面的文字


說明:

我們可以看到,即使DIV(區塊物件)設置了某些屬性,例如寬、高,同時又是區塊居中。裡面的文字也只有幾個。

但,那又怎麼樣?電腦反正認為,那一個「版 面空間」已經是被圍封了(mouseover ↑,綠線區),被佔領了。DIV之外的其他媒材再也不能使用了。


那麼,區塊媒材物件到底有那些呢?請看這裡,w3schools.com最權威的整理




3.DIV可將媒材打包起來之運用


這是我的新書。




使用DIV的互動效果,


一、媒材可以一起打包位置移動(click)二、流暢的互動效果(click)


單純照片(醜)
有加上div的照片(流 暢)





影音教學:





精準控制DIV位置關係的寫作技能





區塊位置 VS 內容位置(一定要了解 ) Click!


區 塊靠左    區 塊居中    區 塊靠右

內 容靠左    內 容居中    內 容靠右


HTML語法;

<div style="border: 1px solid red; margin: left; text-align: left;">
這是內容,可以是文字、影像和影音。<br>
</div>


效果呈現:

這是內容,可以是文字、影像和影音。


說明:

區塊靠左、內容靠左,是預設值。可以不再寫出來, 就會有的效果。



控制DIV裡面文字(/媒材)的靠齊位置:靠左、居中、靠右


CSS語法:

style=" text-align: center; "       // left, center, right;  靠左、居中、靠右


HTML範例:

<div style="text-align: center; border: 1px solid gray;">這是內容文字。</div>


呈現:

這是內容文字。



改變DIV的外貌:寬高、邊框、陰影、圓角、傾斜

/*寬、高*/

style="width: 200px; height: 200px;"

說明:通常只寫寬度,高度讓內容決定


/*DIV內容位置*/

style="text-align: left;"

說明:text-align: center;  //left, center, right,內文居左、中、右。


/*DIV本身居中*/

style="margin: auto;"

說明:寬度要小於編輯區域才有用。


/*DIV本身靠右*/

style="margin-left: atuo; margin-right: 0px;"

說明:兩者要一起寫。Xpx是與右邊界距離。


/*邊框*/

style="border: 1px solid gray;"

說明:也可以單獨控制四個邊,border-left: xxx;   //left, top, bottom, right


/*陰影*/

style="box-shadow: 2px 2px 5px silver;"  

說明:x, y, blur, color


/*圓角*/

style="border-radius: 25px;"

說明:25px是圓化的比例


/*傾斜*/

style="transform: rotate(-3deg);"

說明:-3deg是指斜度,可以是正、負值


/*背景色*/

style="background-color: #FFED97;"

說明:可以使用顏色代碼表或顏色名字,click here!


CSS的合併使用

<style>
.divchange {
box-shadow: 2px 2px 5px silver;
border-radius: 25px;
transform: rotate(-3deg);
background-color: #FFED97;
}
</style>


呈現:

對DIV 外貌加以變化







CSS選擇器的初步基礎觀念及操作

什麼是CSS選擇器?講了你也不會懂。只有在你有某種數位文本寫作操作的經驗之後,你才有可能「用那些經驗」,來「理解」我所要表達的。

「操作經驗」,真的很重要,不然你聽不下去,看不下去,這網頁教案了。

選擇器的使用,就是要你能具備一種能力,這種能力就是你可以隨心所欲的去「掌握」數位文本中,任何一個媒材物件。掌握了你想要控制的媒材物件,就可以對之進行變化操作或互動設置。

其實,「讀書」也是如此的人性經驗結構;要先有某些「背景知識」,你上某些「深一點的課」時,才有可能聽懂。來,如果你是讀傳播的,我介紹你讀一些非常重要的背景知識的書,請看


好,來,如果你上課上到這裡,應有能力看懂 下面語法範例解說

<style>

.classname01 {
border: 1px solid red;
}

/*
這是指所有的、有著class="classname01"的媒材物件,不管是DIV、IMG、Table等等,都會受到這個class的設定內而被作 用。
*/

#idname01 {
border: 1px solid red;
}

/*
同樣的,這是指所有的、帶著id="idname01"屬性的媒材物件,不管是DIV、IMG、Table等等,全部都會受到這個id的設定內而被作用。 class、id這兩個是之前教過的,常用的。
*/

div {
border: 1px solid red;
}

img {
border: 1px solid red;
}

span {
border: 1px solid red;
}

/*
第一個,這是指所有的DIV編輯物,全部都會受到參數設定內容而被作用。不只是DIV,任何編輯物都可以如此設定。例如 span、table、img等,如上例。
*/

【過瀘作用】
div.classname02 {
border: 1px solid red;
}

/*
有時,為了快速,媒材物件和class可以合併書寫使用,如上例。這是指,所有有著class="classname02"的DIV,都會被參數所作用。 其他的媒材物件也可以,例如,table.classname03 {xxx} 。這其實有著過濾作用。
*/

【合併作用】
div, img, span {
border: 1px solid red;
}

/*
這是指合併數個媒材物件,都同樣作用於相同某種參數。此例,div、img、sapn都被作用了,你也可以再加其他媒材物件。中間用「,」(半型字元)隔 開。
*/

</style>


再來,一個媒材物件可以使用多個class,如下例語法

<div class="claname01 claname02 claname03">content</div>

如果,不同的class有相同的參數,例如claname01和claname03都有顏色參數,那麼以「後面的」為準,即claname03為勝出。



可以有聰明選擇作用的「過瀘效果」:

在作互動寫作過程,一定是需要大量的「選擇過程」,選擇那個物件要被互動。因此,好的選擇方式來正確「命中」物件元素,就是要去練習的寫作技能。

在這裡,我們介紹一個常用的,很好用的方式:屬性選擇器之「*」效果。那是有符合「某字串」,就可以被選擇出來的過濾作用。

物件[屬性*="文字"]

div[class*="01"]:hover {
xxx
}



CSS範例:

<style>
.claname01 {
border: 1px solid black;
padding: 5px;
margin-bottom: 3px;
}

.claname02 {
border: 1px solid black;
padding: 5px;
margin-bottom: 3px;
}

div[class*="01"]:hover {
background-color: lightgray;
}

div[class*="02"]:hover {
background-color: khaki;
}
</style>


HTML語法:

<div class="claname01">
This is a test with classname including "01".<br>
</div>
<div class="claname02">
This is a test with classname including "02".<br>
</div>
<div class="claname01">
This is a test with classname including "01".<br>
</div>
<div class="claname02">
This is a test with classname including "02".<br>
</div>


效果呈現:

This is a test with the classname including "01".
This is a test with the classname including "02".
This is a test with the classname including "01".
This is a test with the classname including "02".

please hover!! ⇖


說明:

藉由添加「01」、「02」的字串,而形成某種「規律性」,在此是單、偶數列的規律性,就可以形成某種規律選擇性的聰明效果。



2017年6月12日 星期一

DIV資訊溢出框外的表現形態: overflow




DIV資訊溢出框外的表現形態:
overflow: visible | hidden | scroll | auto ;

如果一個DIV的長度和寬都被設定好了,但裡面的內容資料超出了這一個DIV長寬。
那麼,超出的部分資料,會如何呢?基本的預設值是 visible:會超出去DIV的長寬。
……
同樣的概念和技法,同樣也可以應用到表格的TD。


下面Div設置了長寬各100px; css 預設值 overflow:visible

文字超溢 圖像超溢
dsfkl ds fd
dslf dlsf dl fld fl dlf dslf  klds fld sfldjlf jdslf jdls jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df dlk d f fdklf djfi
123 456 789 11  12 13 14 15

123 456 789 11  12 13 14 15

請移到圖像 ↑
 
說明:
當DIV的長度和寬度被設定後,超出的資料會被看到(visible),這是預設值。但,請注意,對電腦而言,這DIV所佔據的版面大小,仍然只是100px x 100px。
所以,DIV下方的紅字,仍然會出現,而且壓著溢出的資料。因為預設計是下方的資料會壓著上方的資料。



 使用css功能  overflow:  hidden;

文字超溢 圖像超溢
dsfkl ds fd
dslf dlsf dl fld fl dlf dslf  klds fld sfldjlf jdslf jdls jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df dlk d f fdklf djfi
123 456 789 11  12 13 14 15

123 456 789 11  12 13 14 15





使用css功能  overflow:  scroll; 的諸效果

文字超溢  overlfow: scroll; overflow-x: hidden; 圖像超溢 overflow: scroll;
dsfkl ds fd
dslf dlsf dl fld fl dlf dslf  klds fld sfldjlf jdslf jdls jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df dlk d f fdklf djfi
123 456 789 11  12 13 14 15

123 456 789 11  12 13 14 15



 再來, overflow: auto; 是指會內容的大小,而自動言調整。如果你填的內容,有超出被設定的長、寬度,那麼 scroll 就會自動啟動。


使用 overflow   來設定互動文本的範例:↙











書桌上的午餐


 思考方向:

「書桌上的午餐」是一個DIV。把它移到最上層的DIV外面;因為使用overflow: hidden; 所以會看不到。然後,利用互動,使它移回到上層DIV內,就又可以看到了。
照片的變化是利用背景圖的作用。

CSS語法:

<style>
 .overflani20170601 {
overflow: hidden;
background-image: url(https://c1.staticflickr.com/5/4274/35008151376_0c7414dce5_k.jpg);
background-repeat: no-repeat;
background-position: left -400px top -160px;
background-size: 1024px;
transition: 1s;
 }
     
 .overflani20170601:hover {
background-repeat: no-repeat;
background-position: left top;
background-size: 420px;
}

.divtran20170607 {
padding-left: 1em;
transform: translateX(240px);
transition: 2s;
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.06em;
background-color: lightgray;
}
   
 .overflani20170601:hover >div {
  transform: translateX(0px);
  }

</style>


影音教學: