引述

Div表格原理與實作


主旨： 進階認識DIV標籤語法的相關應用 　(??%) (現在只有原理)

首先的認知：

  • 對HTML語法完全不懂的，要先行自修(本教學附一點點)。
  • 本文所謂的表格不是一般教學網站所使用Table標籤，而是DIV標籤。
  • 本教可能學需使用Office FrontPage才能順利完成。

  • 教學分兩部份：「原理」與「實作」。

  • 原理與實作對照學習會更了解。

一些知識：

  • HTML裡的<P>與<DIV>標籤原本都是拿來做段落用的，只要撰寫在此標籤內的文章，會自動變成一個段落。<P>標籤會設定邊界(margin)，在段落的上下會置入一列空白，<DIV>標籤則不會設置空白，為何用<DIV>來替代<TABLE>的標籤的原因就在於此 ，加上FrontPage對<DIV>標籤有較便利的調整方式與較高的調整自由度(像框線、圖層工具列)，配合豐富的Style Sheet加上<DIV>幾乎承接所有的CSS屬性，足以模擬<TABLE>標籤。

    　
  • DHTML（動態HTML）中，被<DIV>或<SPAN>標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。就如同我們在打包物品一樣，您可以一個包裹只包一件衣服，也可以一個包裹包衣服、鞋子、帽子等。<DIV>和<SPAN>標籤就是這種功能！您可以用<SPAN>標籤包住一段文字，該段文字就成了一個物件（您要想成包裹也無可厚非...），您也可以用<SPAN>標籤包住一段文字，一張圖、一個表格，那麼這三個東西也會被視作一個物件。
    註:<SPAN>不斷行
    　
  • <DIV>的定義：
     
    　　　<DIV> ("division"，"部分"的簡稱)是一個"塊級元素＂。<DIV>可以包含段落、標題、表格甚至其它部分。這使<DIV>便於建立不同集成的類，如章節、摘要或備註。 它絕對是CSS的好幫手。

    　　
    　
  • 那麼<DIV>標籤到底要怎麼使用，才能模擬成<TABLE>標籤呢？首先來看看<DIV>到底有哪些Style Sheet....

HTML該如何敘述？

無屬性：<標籤名稱>內容</標籤名稱>
單屬性：<標籤名稱 屬性名稱="值">內容</標籤名稱>
多屬性：<標籤名稱 屬性名稱1="值"   屬性名稱2="值">內容</標籤名稱>
依此類堆

＊重要的是:內容要被標籤名稱所包夾
＊標籤及屬性名稱和值 英文大小寫無差別
 

例如：

<IMG SRC="sample.gif"></IMG> -------->顯示圖片</IMG>一般可省略
<DIV ALIGN="center">段落內容</DIV> ------->段落內容文字圖片等置中 </DIV>不能省略
<DIV STYLE="各種樣式">段落內容</DIV>  ------->段落內容使用Style定義樣式。</DIV>不能省略

Style Sheet 是什麼?

Style Sheet 是一種屬性名稱，中文稱呼「樣式表」。HTML是用來記述文件的邏輯結構的，不過在以前Netscape和Microsoft這2家公司的市場爭奪戰之中(現在多了Mozilla Firefox)，HTML也逐漸地被使用來記述外觀。後來為了讓HTML還原他最初的作用，有人便提出了「讓邏輯結構與外觀（修飾）分開來使用」。為此，『Style Sheet 』因而誕生。
　

Cascading Style Sheets 是什麼?

Cascading Style Sheets（串接樣式表），簡稱CSS。定義為：它是由許多樣式名稱和樣式指定值所組成的字串，我們可以利用設定好的樣式表，指定給某一種HTML標籤，或某一群組HTML標籤來使用。而被套用的HTML標籤，將會依據所套用的CSS來顯式它的外觀。所以特性類似的標籤就會給予相同的樣式名稱，讓Style Sheet能讓設計著有快速且簡單的方法。
　

Style Sheet 的使用方式?

Style Sheet(樣式表)的使用方式按照用途，狀況的不同，可分成幾種方式。

  1. 讀取外部的CSS檔案 由於檔案位於外部所以可以讓多人共享。如此一來網頁的版面配置作業，也可以更簡單、更美觀了。
  2. 在MSN Spaces等不支援CSS設定的網誌，那就直接在標籤內寫上Style Sheet。
  3. 其他方式請參考[here]。
    　

Style Sheet 該如何敘述?(以DIV為例)
 
單樣式：<DIV Style="樣式名稱:值 ;">內容</DIV>
雙樣式：<DIV Style="樣式名稱1:值 ; 樣式名稱2:值 ;">內容</DIV>
多樣式：<DIV Style="樣式名稱1:值 ; 樣式名稱2:值 ; 樣式名稱3:值 ; 樣式名稱4:值 ; .....">內容</DIV>
 

 一些MSN Spaces 開放的Style Sheets：(先整理CSS 1)

區塊屬性的Style Sheets：(僅列出DIV可用) 紅色的樣式是本篇的重點

 樣式   

 樣式名稱

 值

 寬度

 width

 點pt、英寸in、公分cm、像素px、百分比%

 高度

 height

 點pt、英寸in、公分cm、像素px、百分比%

  左邊位置   

 LEFT

 點pt、英寸in、公分cm、像素px、百分比%

   顯示方式    

display

 block (換行)、inline (不換行)、
list-item (目錄項標記)、none (沒有顯示)

  浮動元件位置

 float

 left、right



超出部份
 顯示方式  



overflow

   這個性質是設定當區塊內包含的元件大於區塊之寬或高時，顯示的方法。可用值有auto（自動設定，當需要時出現捲軸）、scroll（強迫顯示捲軸，即使內部元件並無超過區塊邊界）、hidden（超出區塊的部份不顯示）、visible（全部顯示，無視區塊大小）。最常用的overflow:auto讓瀏覽器自動判斷 。

 同上(只有水平)

 overflow-x

  同上

 同上(只有垂直)

 overflow-y

  同上

 元件上方位置  

 top

 點pt、英寸in、公分cm、像素px、百分比%

 清除浮動位置

 clear

  left、right、both




  滑鼠游標   



CURSOR

 AUTO(自動)、CROSSHAIR(十字)、DEFAULT(箭頭)、HAND(手形)、MOVE(移動)、E-RESIZE、NE-RESIZE、NW-RESIZE、N-RESIZE、SE-RESIZE、SW-RESIZE、S-RESIZE、W-RESIZE、TEXT(文字)、WAIT(等待)、HELP(求助) ← 滑鼠移到這會變指標喔

  元件垂直調整   

 Vertical-align

  BASELINE、MIDDLE、SUB、SUPER、TEXT-TOP、TEXT-BOTTOM、TOP、BOTTOM

 放大或縮小

 Zoom

 百分比

  其他   

                        不可用...white-space:?

段落屬性的Style Sheets：

 樣式   

 樣式名稱

 值

  文字間隔   

 letter-spacing

 一般使用pt(點)或px(像素)或% : 例 9pt、10px

 列高   

line-height

 點pt、英寸in、公分cm、像素px、百分比%


文字修飾格式


text-decoration

none(無)、underline(加上底線)、
overline(加上一道上線)、line-through(加上刪除線)

自動轉換大小寫 

 text-transform

none、capitalize(首字變大)、uppercase、lowercase

文字對齊方式 

 text-align

left、right、center(置中)、justify(分散對齊)

  文字縮排   

 text-indent

 一般使用pt(點)或px(像素)或% : 例 15pt、12px

  單字間隔   

 word-spacing 

 一般使用pt(點)或px(像素)或% : 例 2pt、3px

  文字方向   

 writing-mode 

 tb-rl (上至下、右至左)、lr-tb(上至下、 左至右、標準)

  文字方向  

 unicode-bidi: bidi-override; DIRECTION: 方向

rtl(右至左)、ltr(左至右)

  其他   

 text-autospace、 text-justify、word-break(換行方式) 可用...

文字屬性的Style Sheets：

 樣式   

 樣式名稱

 值

  文字顏色  

color

 一般方式設定

  文字大小   

 font-size

 一般使用pt(點)或px(像素)或% : 例 9pt 、10px

  字型   

font-family

 Arial、Georgia、新細明體...等各種字型名稱

  文字粗細   

 font-weight

 lighter、normal、bold、bolder  (由細到粗排列)

  斜體   

 font-style

normal、italic、oblique  (一般使用italic)

  英文樣式   

 font-variant

normal、small-caps

 其他   

  不可用

背景屬性的Style Sheets：

 樣式   

 樣式名稱

 值

  背景顏色   

 BACKGROUND-COLOR

 可為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度、
TRANSPARENT(透明背景)

 其他   

  不可用

邊框屬性的Style Sheets：

 樣式   

 樣式名稱

 值

  詳細     

  因可用FrontPage可簡單設定，並不列出，參考[here]

捲軸屬性的Style Sheets：

 樣式   

 樣式名稱

 值

 

 參考[here]教學 第12步驟

濾鏡屬性的Style Sheets：

 樣式   

 樣式名稱

 值

    

   參考[here]教學

　

其他 不可用的屬性： 定位屬性設定 、連結屬性設定

　

＊那麼<DIV>標籤要怎麼使用，才能 實現<TABLE>標籤的功能呢？

先考慮橫向部份:

關鍵解說：

表格最先要表現出來橫向的方塊排列....
而<DIV>有兩種較好的設定方式，可以模擬成<TABLE>(表格)...
之後比較兩種方式，差別在設定兩種以上字型(尤其對應行字型不一致)過後，第一種方式易跑位，而在對齊的部份，而表格接密的部份則都沒差， 又因為第二種方式可以用FrontPage直接設計，所以在此建議採用第二種，也可以混合使用。

第一種方式(使用Display:inline;) ：(向左下對齊)

HTML：

<DIV style="border:1px solid #000000; WIDTH: 97px; HEIGHT: 64px;Display:inline; background-color:#99FF33">
A</DIV>
<DIV style="border:1px solid #000000; WIDTH: 109px;HEIGHT: 73px;Display:inline; background-color:#FF9999">
B</DIV>

顯示結果：

A
B

第二種方式(使用float:left;)：(向左上對齊)

HTML：

<DIV style="float:left;border:1px solid #000000; WIDTH: 99px; HEIGHT: 60px; background-color:#99FF33">
A</DIV>
<DIV style="float:left;border:1px solid #000000; WIDTH: 109px;HEIGHT: 77px; background-color:#FF9999">
B</DIV>

顯示結果：

A
B

　

　

　

　

＊ 一個表格的詳細語法對照for MSN Spaces:

以3乘3表格為例子..（為了簡化語法,因此把上面三張圖合併成一張圖）

看完橫向部份，再考慮縱向部份，縱向很簡單，因為<div>本來就是縱向無空白縫隙接密的，但是在MSN Spaces上因為本身附的Rich-Text Editor會重新編排部分語法，在<img>後面直接加上<div>時會產生多出的空白行的問題，這時就要使用<br>來產生無空白行斷行，或是把圖放進<div>標籤裡解決。
當然<div>接<div>則沒有這種問題。

當你有了周圍8張圖片,上面的部份就如上一段所說，中間然後把圖一張一張放進<div>裡，下面的部份跟上面一樣。

＊所以製作一個DIV表格僅剩的技巧就是把寬高長度都要算的好好....（不會有空隙的關鍵）

對照圖:（常用３x３）

HTML語法:

<img src=頂圖 height="第一行高" width="A+B+C"><br>
<DIV style="OVERFLOW: hidden; WIDTH: A+B+C px; HEIGHT: 第二行高">
<DIV style="FLOAT: left; WIDTH: A px; HEIGHT: 400px"><IMG height=第二行高 src="中左圖" width=A border=0></DIV>
<DIV style="FLOAT: left; OVERFLOW: auto; WIDTH: Bpx;HEIGHT: 第二行高px;>(中間的內容)
</DIV>
<DIV style="FLOAT: left; WIDTH: C px; HEIGHT: 第二行高px"><IMG height=第二行高 src="中右圖" width=C border=0></DIV>
</DIV><IMG height=第三行高 src="底圖" width="A+B+C">
　

PS.可以下載 方塊說明式Word檔[按我]

語法解析:

<img src=頂圖 height="第一行高" width="A+B+C">和<IMG height=第三行高 src="底圖" width="A+B+C">是上下圖(在此是把上圖(下圖)合併來看)
也可拆成<img src=第一張(左)><img src=第二張(中)><img src=第三張(右)>....依此類堆

背景顏色為暗粉色：包住第２行所有東西
背景顏色為淺綠色：被第一層DIV包住的語法
桃色：<DIV>中左邊部份</DIV>
橘色：<DIV>中右邊的部份</DIV>
棕色：<DIV>中間內容的部份</DIV>

<br>必加..:

其他部分請參考最前面的Style Sheet..

＊ 一些<TABLE>表格與<DIV>表格的對照表:

<TABLE>

<DIV>

圖示

<table>
<tr><td>A</td></tr>
</table>
<div>A</div>

A
<table>
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>
<div>
<div style="FLOAT: left;">A</div>
<div style="FLOAT: left;">B</div>
</div>
<div>
<div style="FLOAT: left;">C</div>
<div style="FLOAT: left;">D</div>
</div>



A
B
C
D

<table>
<tr>
<td rowspan="2">A</td>
<td>B</td>
<td>C</td>  
</tr>
<tr><td>D</td><td>E</td></tr>
</table>　

<div>
<div style="FLOAT: left;">A</div>
<div style="FLOAT: left;">
<div>
<div style="FLOAT: left;">B</div>
<div style="FLOAT: left;">C</div>
</div>
<div>
<div style="FLOAT: left;">D</div>
<div style="FLOAT: left;">E</div>
</div>
</div>
</div>






A
B
C
D
E

　

附:MSN Spaces 網誌模組大小對照表(繁體中文):

參考資料:博碩文化HTML語法參考辭典、W3C

To be continue.....

arrow
arrow
    全站熱搜

    felix 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄