引述

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-RESIZENE-RESIZENW-RESIZEN-RESIZESE-RESIZESW-RESIZES-RESIZEW-RESIZETEXT(文字)WAIT(等待)HELP(求助) ← 滑鼠移到這會變指標喔

  元件垂直調整   

 Vertical-align

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

 放大或縮小

 Zoom

 百分比

  其他   

                        不可用...white-space:?

段落屬性的Style Sheets:

 樣式   

 樣式名稱

 值

  文字間隔   

 letter-spacing

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

 列高   

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(像素)或% : 例 15pt12px

  單字間隔   

 word-spacing 

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

  文字方向   

 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表格僅剩的技巧就是把寬高長度都要算的好好....(不會有空隙的關鍵)

對照圖:(常用3x3)

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=第三張(右)>....依此類堆

背景顏色為暗粉色:包住第2行所有東西
背景顏色為淺綠色:被第一層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.....

全站熱搜

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