Recent Changes - Search:

Main

AdaWikiRing

Skin

RSS Feeds

SourceForge.net Logo


Edit Sidebar

插入圖片

在頁面中置入圖片

要在頁面中置入圖片,直接輸入圖片的網址(url)即可。圖片的替代文字(當瀏覽器無法開啟圖片時所顯示的文字)前後用雙引號(")框起來,接在圖片網址後面。

http://www.pmichaud.com/img/misc/pc.jpg"Paper clips"
Paper clips are fun to work with.

http://www.pmichaud.com/img/misc/pc.jpg(approve sites) Paper clips are fun to work with.

亦可將上傳?的圖片檔置入頁面中(例如:Attach:image.jpg),或者使用InterMap?連結。任何以 .gif, .jpg, .jpeg, 以及 .png 結尾的位罝(網址)會自動辨認成圖片。(開於其它附檔名的圖片,請參照底下的Notes說明。)

若要製作超連結?至圖檔,而不是將圖片顯示出來(例如http://www.pmichaud.com/img/misc/pc.jpg(approve sites)),則在網址的前後加上雙中括號,就像[[http://www.pmichaud.com/img/misc/pc.jpg]]還有這樣[[Attach:image.jpg]]

製作圖形超連結的方法類似一般超連結,但要把link text換成圖形位置,如[[http://www.pmwiki.org | Attach:image.jpg"PmWiki"]]

Captions and floating images(圖片標題與浮動圖片)

要使用圖片標題,在圖片位置後加上垂直線(|)後,再打上標題字即可。

http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 1'''

http://www.pmichaud.com/img/misc/pc.jpg(approve sites) | Figure 1

一般而言,圖片在段落中會佔據一行字的空間。若要使用文繞圖效果,在圖片前加上%lfloat%(圖片在左)或者是%rfloat%(圖片在右) WikiStyles?

%lfloat% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
The image is left-aligned, and the text wraps on the right side of the
image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. 

http://www.pmichaud.com/img/misc/gem.jpg(approve sites) | Rock on! The image is left-aligned, and the text wraps on the right side of the image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

使用%lframe%或者%rframe%不僅有文繞圖效果,並會在圖片與其標題外加上圖框。

%rframe% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
The image is right-aligned, and the text wraps on the left side of the
image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

http://www.pmichaud.com/img/misc/gem.jpg(approve sites) | Rock on! The image is right-aligned, and the text wraps on the left side of the image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

使用%center%來將圖形置中。使用%right%將圖形靠右,且不具文繞圖效果。

%center%http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | Paper clips
are fun to work with 

%right% http://www.pmichaud.com/img/misc/gem.jpg | Rock on!

http://www.pmichaud.com/img/misc/pc.jpg(approve sites) | Paper clips are fun to work with

http://www.pmichaud.com/img/misc/gem.jpg(approve sites) | Rock on!

Resizing images(調整影片大小)

使用%width=50px%%height=50px%來調整圖片大小。%thumb%是個很有用的縮寫,其效果相當於%width=100px%

%width=50px% http://www.pmichaud.com/img/misc/bubble.jpg \
%height=50px% http://www.pmichaud.com/img/misc/bubble.jpg \
%thumb% http://www.pmichaud.com/img/misc/bubble.jpg

http://www.pmichaud.com/img/misc/bubble.jpg(approve sites) http://www.pmichaud.com/img/misc/bubble.jpg(approve sites) http://www.pmichaud.com/img/misc/bubble.jpg(approve sites)

圖片大小調整只會影響在瀏覽器中的顯示,並不會對原圖片造成任何影響。

%thumb%調整圖片大小時,可以和frame指令一同使用;也可以和超連結共同運作。

%lframe thumb% [[http://www.pmichaud.com/img/misc/bubble.jpg |
http://www.pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] |
[-Bubble-]
%lframe thumb% http://www.pmichaud.com/img/misc/pc.jpg"Clip the ticket" |
[-Paper Clips-]
%lframe thumb% [[DocumentationIndex |
http://www.pmichaud.com/img/misc/gem.jpg"Visit the Documentation Index"]] |
[[DocumentationIndex | [-Rock On-]]]

http://www.pmichaud.com/img/misc/bubble.jpg(approve sites)(approve sites) | Bubble http://www.pmichaud.com/img/misc/pc.jpg(approve sites) | Paper Clips http://www.pmichaud.com/img/misc/gem.jpg(approve sites)? | Rock On?

注意事項

  • 缺乏適當副檔名的圖片可在其URL後頭加上參數來顯示。例如圖片http://www.example.com/script/tux,需要修改為http://www.example.com/script/tux?format=.png,以此類推。

其它文件

誌謝

本頁面所使用的圖片源自於http://www.flickr.com,在創意公用授權(approve sites)下進行散佈。(approve sites)

<< | DocumentationIndex | >>

Edit - History - Print - Recent Changes - Search
Page last modified on October 08, 2005, at 01:01 AM