DIV：區塊編輯基本概念＆css選擇器

DIV區塊概念 & css選擇器初步

數位文本的寫作基本觀念

想要寫好數位文本、搞定數位寫作；

一定要建立起來的數位媒材基本運作方式。

相關參考內容：把編輯元素用DIV包起來。 click to go!

對初學者而言，談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：邊框、背景色、padding（留白）、margin（外距）！
方法二：輕鬆控制DIV：靠左、置中、靠右、上移、下移！
方法三：自由移動 DIV：relative, absolute, translate, z-index。
方法四：DIV排版寫作的堆積木法。

區塊位置 VS 內容位置（一定要了解 ）▽ Click! ▽

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

---

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

HTMＬ語法;

<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: auto; margin-right: 0px;"

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


/*留白（內邊距）*/

style="padding: 1em;"

說明：也可以單獨控制四個邊，padding-left: xxx;   //left, top, bottom, right。'em'是「一個字寬度」。


/*外邊距*/

style="margin: 1em;"

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


/*邊框*/

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」的字串，而形成某種「規律性」，在此是單、偶數列的規律性，就可以形成某種規律選擇性的聰明效果。



舉例說明 // 精彩範例：

對比：
警察常用電擊槍：平面新聞 VS 互動新聞

如何幫助我們可以有什麼樣的更好理解可能：Lucky 13
讓人可以更多去理解的作品：When the sun erupts

讓人可以更多去理解的作品：Revealed: air pollution may be damaging ‘every organ in the body’

經典作品：snow fall

more… more…

species-in-pieces

Draw a stickman

Lärmkarte Berlin

Kick my habits

polishchristmasguide

The race to save the river Ganges

How dry is California?

The new Republican center of gravity