*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↑




2013年7月7日 星期日

使用 "menu" 的互動文本技巧:一次秀出來讓你慢慢選




"menu"
既能「互動」又給讀者充分「選擇權」的文本呈現形式!















1. 先於 <head>xxx</head> 之內或<body>之後寫入 javascript
<script type="text/javascript" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jsmenu/jscookmenu-2.0.4/JSCookMenu.js"></script>
<link rel="stylesheet" href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jsmenu/ThemePanel-1.1/ThemePanel/theme.css" type="text/css">
<script type="text/javascript" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jsmenu/ThemePanel-1.1/ThemePanel/theme.js"></script>

2. 於版面上置放一部影音,並設上 ID="xxx",此例為 id="gotosouth20130706" 。
<iframe allowfullscreen="" frameborder="0" height="315" id="gotosouth20130706" src="http://www.youtube.com/embed/1Qoe0H_Qkp8?rel=0" style="margin-right: -20px;" width="560"></iframe>

3. 套裝程式語法
<script type="text/javascript">
function gotodiv01 ()
{
 document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/EjO1lTZ5pXY?rel=0";
};
function gotodiv02 ()
{
 document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/4q58G5Z1KHI?rel=0";
};
function gotodiv03 ()
{
 document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/fOdRMvtrerc?rel=0";
};
function gotodiv04 ()
{
 document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/c80sS-EfSTI?rel=0";
};
var myMenu02 =
[
    ['▲ ', '暑假南行的四篇影像散記  ', null, null, null,  // a menu item
          ['↗  ', '屏東萬金聖母堂 ', 'javascript: gotodiv04()', null, null],  // a submenu item
          ['↗  ', '屏東隨走的雲和風 ', 'javascript: gotodiv03()', null, null],  // a submenu item
          ['↗  ', '水里蛇窯的光澤 ', 'javascript: gotodiv02()', null, null],  // a submenu item
          ['↗  ', '中部的溪頭散步 ', 'javascript: gotodiv01()', null, null]  // a submenu item
     ]
           
];
</script>

<style>
.ThemePanelMenu,.ThemePanelSubMenuTable
{
 font-family: 微軟正黑體, verdana, arial, sans-serif;
 font-size: 1.2em;

 cursor:  default;
 white-space: nowrap;
}
</style>

<div id="myMenuID02" ><br>
</div>

<script type="text/javascript">
 cmDraw ('myMenuID02', myMenu02, 'hur', cmThemePanel);
</script>

影音教學:




Javascript 程式來源:JSCookMenu