有那些方法可以確實固定網頁的位置─智邦公益電子報─台灣最大公益電子報發行中心

第二階段【網頁製作系列報導】電子報【各種程式選用】

各種程式選用

第十篇
有那些方法可以確實固定網頁的位置

壹、前言：
網頁製作經常會用到，在網頁某處指定一個位置，或固定某個元件？那該怎麼辦？有何辦法呢？
本篇就來探討這個問題吧！

貳、先就HTML語法來探討：
HTML語法中能讓文字或圖片做左右(水平)移動的屬性，就是<標籤 Align="位置">。
這裡的位置就是指左(Left)、中(Center)、右(Right)，屬於比較性的指定，沒有絕對定位效果。
這裡的標籤常見的有：CAPTION、DIV、HR、IMG　SRC、P、TABLE、TBODY、TD、TH、TR、TFOOT、THEAD。
HTML語法能讓文字或圖片做上下(垂直)移動的屬性，就是<標籤 Valign="位置">。
這裡的位置就是指上(Top)、中(Middle)、下(Bottom)，屬於比較性的指定，也沒有絕對定位效果。
這裡的標籤常見的有：CAPTION、TBODY、TD、TH、TR、TFOOT、THEAD。

參、DIV與P標籤的差異處：
另外在HTML語法中能讓文字或圖片做指定位置的屬性，就是DIV與P標籤。
DIV標籤是指(Division)，用來設定區段(域)內資料的排列方式。
P標籤是指(Paragraph)，用來讓文字或物件跳列。
用兩者做個比較，自然就會明白了：

肆、打包網頁的元件DIV與SPAN：
被<DIV>或<SPAN>標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
就如同我們在打包物品一樣，您可以一個包裹只包一件衣服，也可以一個包裹包衣服、鞋子、帽子等。
<DIV>和<SPAN>標籤就是這種功能！
您可以用<SPAN>標籤包住一段文字，該段文字就成了一個物件。
您也可以用<SPAN>標籤包住一段文字，一張圖、一個表格，那麼這三個東西也會被視作一個物件。
這兩個標籤在DHTML(動態HTML)中，是相當重要的，這些東西是可能是一張圖、一段文字....。
要一張圖動來動去還好，因為，一張圖本身就是一個【物件】。
但是，要怎樣讓瀏覽器知道某一個圖或某一個字是一個物件？
或是要讓圖片和表格同時動來動去，此時您就需要用到 <DIV>、<SPAN>標籤。

伍、DIV與SPAN標籤的差異處：
<DIV>、<SPAN>標籤究竟有什麼不同？只有一個地方比較不一樣，請仔細比較看看：

陸、HTML的表格定位法：
我們知道表格可以指定欄與列位數、寬度與高度，有了這些屬性，所以我們可以很容易的指定網頁詳細位置。

柒、圖檔也可以用來定位：
圖檔也有一個寬度與高度屬性，如果我們加入一個隱形點，所以我們也可以很容易的指定網頁詳細位置。

捌、CSS(串接式排版樣本)的網頁定位：
CSS(串接式排版樣本)有top與left(以像素為單位)屬性，除此之外他還有一個很重要的定位(Position)設定屬性。
position 顯示方式的設定值：
static：以一般網頁方式排列，無定位功能
absolute：設定基準點是相對於區塊內的最左上角
relative：設定基準點是在網頁的最左上角

玖、其他辦法：
最簡單(笨)的辦法：重複使用<br><br><br>或<br><p><br>。
有點技巧的辦法：<p><font color="#ffffff"> </font><p>。
聰明一點的技巧：<img src="http://home.pchome.com.tw/net/dp032/imags/space.gif" align="top" border=0 width="1" height="150" alt="空白小圖檔">。

拾、結論與建議：
網頁語言或語言是死的，如何變化運用是活的，只有熟悉HTML語法使用，才能駕馭網頁。
完整HTML、CSS、....教學，全在本報教學會員教材中，歡迎

全部取得！
其他更多學習技巧.....，歡迎

本報教學會員。

第二階段93.07.05.發行第079期前期：歡迎免費申請動感留言版

網頁研習室【網頁製作系列】電子報一二李文能 2000.02.01創刊