數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2015年5月9日 星期六

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

隨心所欲移動編輯物件



沒有留言:

張貼留言