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

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位置關係的寫作技能





控制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為勝出。





沒有留言:

張貼留言