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

2013年7月19日 星期五

DIV + CSS 隨心所欲搞定網路排版寫作




一定要搞定它!
DIV解析圖:盒子模式


了解、掌握和運用DIV,是網頁寫作的基礎!
Div + Css 基礎概念講解【課堂錄影】

CSS參考網站
1. 為寫作區域加上邊框

語法【㊉↓】:
<div style="width: 70%; height: 40px; border: 1px solid darkred;">有加框的 DIV <br></div>

範例呈現:
有加邊框的 DIV

說明:
1. width: 寬度、height: 高度。可以用 xx% 或 xxpx 來表示。
2. border: 1px solid darkred; 。1px:邊框的寬度,solid:框線的形式,darkred:框線顏色。框線形式常用:solid(實線)、dotted(點線)、dashed(虛線)。


2. 為寫作區域加入背景色

語法【㊉↓】:
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #FFFAF0;">有加框的 DIV <br>加入背景色<br></div>

範例呈現:
有加邊框的 DIV
加入背景色

說明:
1. background-color: 背景顏色。顏色可以用色碼:#F4A460,或是顏色名稱:sandybrown 。【色碼表↗】。


3. 調整邊框和內容之間的距離

語法【㊉↓】:
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #F4A460; padding: 1em;">有 加框的 DIV 。加入背景色。調整四個邊框與文字(內容)之間的距離,將距離加大。<br></div>

範例呈現:
有加邊框的 DIV。加入背景色。padding: 調整邊框與文字(內容)之間的距離,將距離加大。

說明:
1. padding: xxpx,是調整內容與四個邊框之間的距離。常用用 px  或 em,例如 3px 或 2em。
2. 可以單獨調整某一邊框,padding-top: xxpx、padding-right: xxpx、padding-bottom: xxpx、padding-left: xxpx,可分別單獨調整上、右、下、左邊框與內容間的距離。


4. 調整邊框與外部編輯區之間的距離

語法【㊉↓】:
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #F4A460; margin: 1em;">有 加框的 DIV 。加入背景色。調整四個邊框與外部編輯區之間的距離,將距離加大。<br></div>

範例呈現:
上方的編輯內容區域。上方的編輯內容區域。上方的編輯內容區 域。
有加邊框的 DIV。加入背景色。margin: 調整邊框與外部編輯區之間的距離,將距離加大。
下方的編輯內容區域。下方的編輯內容區域。下方的編輯內容區域。

說明:
1. margin: xxpx,是調整外部編輯區域與四個邊框之間的距離。常用用 px  或 em,例如 3px 或 2em。
2. 可以單獨調整某一邊框與外部編輯區的距離,margin-top: xxpx、margin-right: xxpx、margin-bottom: xxpx、margin-left: xxpx,可分別單獨調整上、右、下、左邊框與外部編輯區之間的距離。
3. margin: xxpx,xx可以是正數,也可以是負數,例如 margin-top: -1em;【click ↑】 。負數是縮短邊框與外部編輯區域之間的距離。



使喚div的三種方法:

一、直接使用 style="xx"

<div style="width: 70%; height: 40px; border: 1px solid darkred;">
內容
</div>

二、使用class (可重覆使用)或id (只能用一次)

<style>
.classname {
width: 70%;
height: 40px;
border: 1px solid darkred;
}

#idname {
width: 70%;
height: 40px;
border: 1px solid darkred;
}
</style>

<div class="classname" id="idname">
內容
</div>

三、使用編輯軟體功能

慢工出細活:搞定DIV的調校;使用kompozer


說明:
(一)一和二相同重覆,以一為凖。
(二)class和id相同重覆,以id為凖。


Advanced:圖像(文字)的位移有三種方法

圖像以及文字,如果想要移動其在版面上的位置,可以有三種方法來處理。


一、使用「空白鍵」來增加「空白字元」。

就是不斷的按「space」「 空白鍵」,用增加「空白字元」(&nbsp;)的 方法,來移動圖像或字元。

                               字元或

這裡是空白鍵↑


二、在上層加上<div>xxx< /div>,再使用居左、居中、居右語法

使用「內容位移」語法 style="text-align: left;" //left, center, right  //左、中、右,來位置圖像或文字。


語法:

<div style="text-align: center;">這是文字或<img src="xxx"></div>


呈現:

這是文字或


三、使用DIV「留白」的語法,從左邊增加留白,也可以移動位置

留白的語法,可在DIV使用,也可以在其他「塊狀/ block」媒材物件,如 td、p等,都可使用。 一般而言,使用左邊留白 style="padding-left: 10px;" ,來決定向右移動距離。


語法:

<div style="padding-left: 8em;">這是文字或<img src="xxx"></div>


呈現:

這是文字或

這是留白8em↑




1 則留言:

  1. 老師好
    課堂教學錄影無法播放,大概故障,請老師幫忙修復一下.

    回覆刪除