′θ‵ 妮妮: MSN SPACES 加油站

文字 + 圖樣式

　　開始編輯..........

................

...........

..................................。

　　從這裡開始編輯............。

第二段.......。

　　..........

表格範例

從這裡開始編輯

<TABLE style="WIDTH: 497px; HEIGHT: 99px" align=center border=1>
<TBODY>
<TR>
<TD>
<P><FONT color=#0000ff>從這裡開始編輯</FONT></P>
<P> </P>
<TR></TR></TBODY></TABLE>
<P></P>
<DIV></DIV>

從這裡開始編輯

<TABLE style="WIDTH: 80%" cellSpacing=20 background="圖片檔名.gif" border=0>
<TBODY>
<TR>
<TD align=middle><BR><BR>
<P style="BORDER-BOTTOM: #002299 2px dashed" align=left><FONT color=#ff0000 size=2>從這裡開始編輯</FONT></P></DIV></TD></TR></TBODY></TABLE>

提供一個範例圖片檔名：http://0rz.net/ba1bn

虛線： dashed 實線：solid 双實線：3px double 點：dotted

凹框： inset 凸框：outset

立體內凸： groove

立體浮凸： ridge

表格框：基本框一

開始

表格框：基本框二

文章放置中央
內容

-----=-----=-----=-----=-----=----- 別一則 -----=-----=-----=-----=-----=-----

◎ 文章左邊對齊

開始

表格框：基本框三

＊文章內容開始：

主文在此輸入。

＊項次表示法一：

（1）輸入。

（2）、、，。

＊項次表示法二：

一、輸入。

二、，，、。

三、，，、。

內容綠色字:

一、，。

二、，100℃加熱3 小時、、
。三、，100℃加熱3 小時、、

三、。

藍色字~~

捲軸表格

內容，。

，，。

「，。」，。

「，？」。

「，」。

。

◣標題列◥

·         放小標題
放說明。

·         放小標題
，。

·         放小標題
，。！

『你今天真的沒辦法趕回來嗎？』
帶著些許期盼與懇求．

Quit

避免

救救，才是根本解決之道。

《熬夜會使體質變酸》

晚上。

所以。

《吃》

時常。

解決之道：

一. 早睡。

二. 咳嗽。

三. 鼻過。

四. 有一。

＊項次表示法一：

（1）文字輸入。

（2）、、，。

＊項次表示法二：

一、內容輸入。

二、，，、。

三、，，、。

.....

......

、、

框的應用：一

＊文章內容開始：

主文在此輸入。

＊項次表示法一：

（1）文字輸入。

（2）、、，。

＊項次表示法二：

一、內容輸入。

二、，，、。

三、，，、。

.....

......

、、

藍色字~~

框的應用：二

大標題！

放標題或圖都可以哦！

◣標題列◥

·         放小標題
放說明。

·         放小標題
，。

·         放小標題
，。！

提醒的警語!!!

框的應用：三

標題列

1. 從這裡開始編輯
…

2. 以下例推
…… 。

框的應用：四

框的應用：五

框的應用：六

2/7/2006 12:04 AM | Add a comment | Permalink | Blog it | MSN SPACES 加油站

---

談論主題Div表格原理與實作

引述

Div表格原理與實作

永久連結關閉 http://spaces.msn.com/members/gene7299/Blog/cns!1pAcW0T8ZlSwoXd4sFC7C_1A!7849.entry

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(樣式表)的使用方式按照用途，狀況的不同，可分成幾種方式。

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

Style Sheet 該如何敘述?(以DIV為例)

單樣式：<DIV Style="樣式名稱:值 ;">內容</DIV>
雙樣式：<DIV Style="樣式名稱1:值 ; 樣式名稱2:值 ;">內容</DIV>
多樣式：<DIV Style="樣式名稱1:值 ; 樣式名稱2:值 ; 樣式名稱3:值 ; 樣式名稱4:值 ; .....">內容</DIV>

一些MSN Spaces 開放的Style Sheets：

區塊屬性的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

百分比

其他

不可用...whi

段落屬性的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：

顯示結果：

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>

圖示

A