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

2014年5月24日 星期六

使用Css + Div 來進行排版寫作:DIV堆積木法



DIV的堆積木寫作法
按我讓div展現相互堆疊的排版效果
一塊堆一塊
創造出空間性意義呈現






這是要移動的Div版面區塊。
透過Div的上下移動,可以形成不同Div的相互「拼貼」作用,這樣就可以形成某種形式的排版效果。例如此例是:左字右圖的版面呈現形式。
範例說明:
設置上、下兩個 DIV (綠色及紅色框區域)。上面DIV使內容物件靠右;下面DIV使內容靠左。
再利用 style="margin-top: -6em;" 的 CSS 語法,將下面的 Div 區塊向上移動 6em,這樣就可以重疊兩個 Div ,創造版面的變化。網站教學參考資料使用範例


影音教學:




CSS 的盒子模式



margin: xxem 是指 Div (盒子)與外部的距離。正的數字是指「擴張」距離,負的數字是指「收縮」距離。例如 2em 是指二個div之間擴張 2 個中文字元的距離,而 -2em 是兩個div之間減少 2 個中文字元的距離。可以有三種寫法:
  1. style="margin: 2em 3em 2em 3em;",如果寫了 4 個數字,是指 div (依續)上、右、下、左,四邊的外部距離。
  2. style="margin: 2em 3em;",如果只寫 2 個數字,是指上、下 2em,左、右 3em。
  3. 也可以單獨指定任何一邊的外部距離,分別為 style="margin-top: 2em;" 上邊、style="margin-bottom: 2em;" 下邊、style="margin-left: 2em;" 左邊、style="margin-right: 2em;" 右邊。






實用範例,請 按我!




雲的來去

向風一樣的自由,是雲。
讓自由的風得以形成的,是山的綠。
在木與木的堅持中,
雲才能像風一樣,讓自由成為一種理解。


寫作構思:

一、先設置一個圖像。
二,在圖像下面設置一個DIV,內有文字。
三、在DIV設置 margin-top: -10em; ,使得DIV上升,並壓住圖像,形成文壓圖。
四、在DIV內再寫入 padding-left: -10px; 形成文字向右拉出距離,再把文字變成白色, color: white;


注意事項:

一般而言,當文本媒材物件被「移動」後,在版面「後面」的媒材,會壓住版面前面的媒材物件。也就是「後壓前」。



更多參考版型範例(請點按圖片↓)








沒有留言:

張貼留言