史萊姆論壇

史萊姆論壇 (http://forum.slime.com.tw/)
-   程式 & 網頁設計技術文件 (http://forum.slime.com.tw/f138.html)
-   -   HTML教學--圖片的編排 (http://forum.slime.com.tw/thread205079.html)

猜謎人 2007-05-10 12:01 AM

HTML教學--圖片的編排
 
現在我們要把我們的網頁插入圖片了,在這之前,我們先介紹水平線,這大多用來分隔網頁,語法是hr而且不是成對的!只是裡面可以加進幾個參數,size是他的厚度要幾個像素,這裡我們用2個像素,一樣可以對齊align是對齊,這裡我們是置中對齊,注意!置中他會因應網頁大小而變更,自動調整在中央!顏色是紫色,寬度佔網頁百分之五十,你可自己決定,另外也可以沒有陰影noshade,只是我們這裡不用。
忘了提網頁body部分,這次我們的背景是用圖片拼貼,圖片很小,不過當做背景時他會像貼瓷磚一樣填滿整個網頁!一般不要太花俏,否則網頁內容反而看不清楚!
另外,再補充上次文字編排中,表列中我們還可以用巢狀表列!也就是說,無序表列內加入有序表列,或者相反!這裡不詳述了,你仔細看下面的HTML原始碼即可明瞭!
現在我們要插入圖片了!語法是img src=”…” 注意!引號內指的是圖片的路徑,這當你傳到網路上的網頁空間最容易出現圖片顯示不出來!所以,強烈建議你要用相對路徑,如下面HTML原始碼所示,還有,對齊的方式有五種top、middle、bottom這三個是要和文字對齊的方式,你自己試試看,會發現這種用處不大,最好的方式是文繞圖的方式,這是你就靠左或靠右對齊即可!這裡我們是靠左對齊!border是給圖片加外框,我們給他兩個像素!此外,alt的用途是在於萬一圖片顯示不出來,出現叉燒包時,他會在叉燒包內出現的字。另外,你也可以用width以及height來決定圖片寬度和高度的像素,只是我們不做如此設定!以下是HTML原始碼:

http://i171.photobucket.com/albums/u287/sad_jellyfish/teach/x001.jpg

而瀏覽器顯示如下:

http://i171.photobucket.com/albums/u287/sad_jellyfish/teach/x002.jpg


所有時間均為台北時間。現在的時間是 07:05 PM

Powered by vBulletin® 版本 3.6.8
版權所有 ©2000 - 2022, Jelsoft Enterprises Ltd.

『服務條款』

* 有問題不知道該怎麼解決嗎?請聯絡本站的系統管理員 *


SEO by vBSEO 3.6.1