首頁 »
August 17, 2006

如何編排簡易的部落相簿?

常看到部落文章裡的圖片挺美的,但圖片尺寸過於大張,不是被畫面切割掉了,就是有時候為了要看完所有的圖片,總要拖曳著捲軸奮戰到”底”,挺麻煩的!不過,這只是製作部落相簿的其中一個動力,最主要的是,我懶得寫文字,文筆也不好,所以就用圖片來充實我的部落嘍~ 哈哈..

※在製作相簿必須注意幾個要件, 1.每張照片的尺寸大小。   照片的尺寸越大,檔案大小也就會越大,相對在頁面中顯示的速度就會越慢。   其實一般的網友在上傳圖片時,並不會去理會照片的尺寸大小,新浪部落也不會強制將圖檔壓縮到   一定的尺寸大小,只要圖片不超過300K都是可以過關的,若不在乎圖片顯示過慢的問題,此點即可略過。 2.照片縮圖的尺寸。   一般照片的比例為4:3或3:4(橫或直式)的比例,所以圖片的尺寸也必須等比例縮小,   才不會讓圖片變形的離譜。   本範例中的圖片原尺寸為橫式420x560(像素),直式 560x420(像素);縮圖尺寸為橫式90x120(像素),直式 120x90(像素)。 3.照片是橫式還是直式擺放。   橫式或是直式圖片,主要是讓視覺上的美觀,整齊的分類擺放,讓整體頁面看起來賞心悅目。 放置在CSS樣式表中 /* 直式圖片使用 */ 以下以『/**/』所註釋之文字,請勿貼入CSS樣式表中。 h2.picst{ border:1px solid #eeeeee;/*圖片最外圍的灰色細框線*/ float:left;/*圖片排列靠左對齊*/ margin:8px;/*圖片與圖片排列之間的距離*/ } h2.picst img{ width:90px;/*縮圖的寬度*/ height:120px;/*縮圖的高度*/ border:8px solid #ffffff;/*圖片與外圍的白色粗框線,介於灰色細框與圖片之間的部份*/ } /* 橫式圖片使用 */ h2.picst2{ border:1px solid #eeeeee; float:left; margin:8px; } h2.picst2 img{ width:120px; height:90px; border:8px solid #ffffff; } 文章裡的語法 注意:此段語法必須於文章的『原始碼』的欄位裡貼入 <!-- 直式照片 --> <h2 class="picst"><a href="圖片路徑" target="_blank"></a><img src="圖片路徑" border="0" alt="圖片說明" /></a></h2> <!-- 橫式照片 --> <h2 class="picst2"><a href="圖片路徑" target="_blank"><img src="圖片路徑" border="0" alt="圖片說明" /></a></h2> 範本參考:http://blog.sina.com.tw/crazywork/article.php?pbgid=26903&entryid=74948 說明:   1.主要分為直式與橫式圖片的設定,因為兩者圖片的尺寸不同,所以我採取分開設定的方式編排。   2.依照上列語法重覆貼入文章中,圖片會依序由左至右排列,且在文章既定的寬度下自動換行排列。   3.點選縮圖後,會另開視窗瀏覽原尺寸圖片。(其實是一張圖兩用,不用為了縮圖再另製圖片。)   4.最大缺點就是圖片太多的時候,會貼到眼花潦亂,所以我會在記事本中排列整齊,再貼入文章中。


為啥我的部落在Firefox的瀏覽器中背顏色或圖像景無法延伸?←上一篇 │首頁
本文引用網址: