很多人在製作圖片時
一定會看到格式問題
小Be整理出來筆記
相當清楚明瞭!
因此便引用過來~
相信大家都知道圖片檔案格式分別有*.jpg *.jpeg *.bmp *.gif *.png *.tif ,但是你們又知道他們的分別嗎...!?那個檔案格式顯示比較清晰...!?那個檔案格式比較大呢...!?那個檔案格式適合做動畫呢...!?
本文提供每個圖片格式主要用途的概觀、每個格式的優點和缺點,現在就解釋給你們知。
Joint Photographic Experts Group (JPEG) : 壓縮功能十分強大,是現時互聯網極之流行的圖片格式,但不能支援透明及動畫模式。
JPEG 圖片以 24 位元色彩儲存單一點陣影像。JPEG 是平台獨立的格式,支援最高階的壓縮,不過此壓縮為失真。漸進的 JPEG 檔案支援交錯。
JPEG 檔案壓縮層級可以增加或減少。不過,檔案大小會影響影像品質。JPEG 壓縮很適合需要相片真實感的美工圖案。不過,對於較簡單的美工圖案,如色彩較少、對比強烈、實心框線、或大型實心色彩區塊,JPEG 壓縮無法提供最佳效果。有時壓縮比例低至 5:1,將嚴重失去圖片完整性。此失真的原因是 JPEG 壓縮配置也壓縮類似的色調。但 JPEG 壓縮配置不能用在亮度有很大不同或實心色彩區。
優點
● 極佳的相片或具真實感美工圖案壓縮品質。
● 可變的壓縮比例可以讓人控制檔案大小。
● 交錯 (適用於漸進 JPEG 檔案)。
● 廣受支援的網際網路標準。
缺點
● 失真壓縮會降低原始圖片資料。
● 當您編輯和重新儲存 JPEG 檔案時,JPEG 便會進一步降低原始圖片資料,因此會逐漸累積而增加圖片資料降低的情形。
● JPEG 不適合用於較簡單的圖片,如包含較少色彩、大片同色系區域,或鮮明的亮度差異。
Bitmap (BMP) :Ms Windows 中常遇見及使用的點陣圖形。
Windows 點陣圖以任何色彩深度儲存單一點陣影像,從黑白到 24 位元色彩。Windows 點陣圖檔案格式與其他 Microsoft Windows 程式相容。但不支援檔案壓縮也不適合網頁。
整體來說,這種檔案格式的缺點超過優點。對於相片品質的影像,使用 PNG、JPG 和 TIF 檔案通常比較好。BMP 檔案適合做為 Windows 中的底色圖案。
優點
● 1 位元到 24 位元色彩深度。
● 普遍與現有的 Windows 程式相容,尤其是較舊的程式。
缺點
● 沒有壓縮,因此檔案非常大。
● 網頁瀏覽器不支援。
Graphics Interchange Format (GIF) :擁有壓縮的功能,具透明及動畫模式,但只能支援256種色彩。
GIF 圖片以 8 位元 (或 256 色) 儲存單一或多個點陣影像資料。GIF 圖片支援透明度、壓縮、交錯,以及多重影像圖片 (動畫 GIF)。
GIF 透明度不是 Alpha 色板透明度,且無法支援半透明效果。GIF 壓縮是 LZW 壓縮 (約 3:1 比例)。動畫 GIF 由 GIF 檔案規格的 GIF89a 版支援。
優點
● 廣受支援的網際網路標準。
● 支援無失真壓縮與透明度。
● 動畫 GIF 的用途廣泛,且有許多 GIF 動畫程式可以輕鬆地建立它。
缺點
● 256 色調色盤;細膩的圖片以及需要相片真實感的影像會喪失色彩資訊且看起來有色塊的感覺。
● 在多數情況下,無失真壓縮多半較 JPG 或 PNG 格式差。
● 有限的透明度;沒有 Alpha 色板透明度提供的半透明效果或漸層效果。
Portable Network Graphics (PNG) :Fireworks 常用的預設檔案格式。
PNG 圖片以任何色彩深度儲存單一點陣影像。PNG 為平台獨立格式。較舊的瀏覽器和程式可能不支援 PNG 檔案。做為網際網路檔案格式,PNG 較 JPEG 的失真壓縮提供較少壓縮。做為網際網路檔案格式,PNG 並不支援多重影像檔案或動畫檔案。GIF 格式支援多重影像檔案以及動畫檔案。
支援高階的無失真壓縮、Alpha 色板透明度、Gamma 修正和交錯。較新的網頁瀏覽器支援此格式。
優點
● 高階無失真壓縮。
● Alpha 色板透明度。
● Gamma 修正。
● 交錯。
● 受到最新的網頁瀏覽器支援。
缺點
● 較舊的瀏覽器和程式不支援 PNG 檔案。
● PNG 雖為網際網路檔案格式,但提供的壓縮小於 JPG 的失真壓縮。
● PNG 雖為網際網路檔案格式,但並不支援 GIF 格式能夠支援的多重影像檔或動畫檔。

Tagged Image File Format (TIFF) :多是從掃瞄器掃瞄得來的圖片。
TIFF 圖片以任何色彩深度儲存單一點陣影像。在印刷界,將 TIFF 視為最廣受支援的圖片檔案格式。TIFF 支援選擇性的壓縮,但不適合在網頁瀏覽器中檢視。
TIFF 格式是一種可延伸格式,表示程式設計師可以修改原始規格以新增功能或符合特殊需求,因此可能會導致不同 TIFF 圖片類型之間不相容。
優點
● 受到廣泛支援,特別是可在 Macintosh 電腦和 Windows 電腦之間使用。
● 選擇性壓縮。
● 可延伸的格式提供了許多選擇性功能。
缺點
● 網頁瀏覽器不支援。
● 擴充性造成許多不同的 TIFF 圖片類型。並非所有 TIFF 檔案與所有支援基線 TIFF 標準的程式皆相容。

原文出處:http://blog.pixnet.net/hebie/post/20934930那。 發表在 痞客邦 留言(2) 人氣(1,718)

相信有許多人
都有曾經寫過下拉式選單的語法
但是寫的過程中
往往覺得既繁複又耗時間
現在
欽小涵就來告訴你
有個簡單又快速的網站
幫你製作下拉式選單
那。 發表在 痞客邦 留言(14) 人氣(1,085)

有人想要隱藏文章人氣
就有人想要只有文章人氣
這一招
就是只保留精簡的數字
可以走另一類的極簡風格
那。 發表在 痞客邦 留言(12) 人氣(611)

很久沒做教學文
今天小涵就要來告訴你
怎麼樣把相簿人氣隱藏
有人會覺得相簿人氣很低
擺著也很不好看
那。 發表在 痞客邦 留言(11) 人氣(553)
這是
瞳瞳做的真首頁教學ˇ
以下為他的教學內容
各位要引用請至他的部落格告知ㄧ聲喔ˇ
如果不懂真首頁是什麼
請看
NaiNiu的網誌
他的排版就是真首頁的形式
真首頁的基本條件就是 →
#blog-main (這個標籤)
假如說你要修改 首頁 banner 的相關物
#blog-main #banner {}
例如說我要將 banner 定位、改色、改寬、改高、改字體
#blog-main #banner {
position: absolute; /*定位*/
top: ?px; /*定位_離上方多遠*/
left: ?px; /*定位_離左方多遠*/
color: #六位數; /*改字色*/
width: ?px; /*改寬*/
height: ?px; /*改高*/
font-family: ?px; /*改字體*/
}
當然,還可以改很多,改字距、行高、框線 ... 等通通可以
只要將你需要改的項目前面多加上 #blog-main 就可以呈現出假首頁
當然假「首頁」的目的就是不要顯示很多項目
最主要的部份就是主文要隱藏,那要怎麼隱藏呢?
#blog-main #content { display:none; }
大家應該都知道 display:none; 是使項目不要顯示出來,也就是隱藏!
而一般 #content 就是主文章的部份!這樣就能夠將主文章隱藏了!
當然,其他要隱藏的部份也是這樣
不管你是要將訪客隱藏 #blog-main #visitor { display:none; }
還是將分類隱藏 #blog-main #category { display:none; }
通通都一樣前面要加上 #blog-main 即可。
單一要隱藏標題的話就拿訪客的來說,這樣就行了!
#blog-main #visitor .box-title { display:none; }
一般都會需要用到定位的,大家可以把定位學好,方便使用!
如果首頁底圖要換,這個就類似整個底部的感覺,標籤是#blog-main
如果是 1024*768 寬版非長版的,圖片要換可以使用這個標籤!
那。 發表在 痞客邦 留言(6) 人氣(1,045)
課業繁重,
請原諒我沒無法回答問題,
需要者請自取謝謝。
--
痞客邦的css標籤詳細版
這是更為詳細的標籤
可以直接複製到記事本上
拿來做修改
然後貼到編輯CSS區域就可以了w
body/*整個介頁面*/
#body-div/*整個頁面*/
a/*超連結*/
a:hover/*滑鼠移動到超連結上時*/
/*-----------------------------------------------------------*/
#authority/*後台管理列*/
#newpost/*發表新文章*/
#backstage/*進入後台*/
#container/*所有內容區塊*/
#container2/*所有內容區塊2*/
#container3/*所有內容區塊3*/
/*-----------------------------------------------------------*/
#header/*橫幅*/
#login-bar/*招呼語&登入登出*/
#banner/*橫幅主要內容*/
#banner h1/*部落格標題*/
#banner .skiplink/*跳到主文*/
#banner h2/*部落格描述*/
#blog-category/*部落格全站分類*/
/*-----------------------------------------------------------*/
#navigation/*其他服務頁面導覽*/
#navigation a/*其他服務連結區塊內的所有連結*/
#navigation li/*其他服務連結區塊內的所有項目*/
#link-album/*相簿連結*/
#link-blog/*部落格連結*/
#link-guestbook/*留言版連結*/
#profile/*名片連結*/
/*-----------------------------------------------------------*/
#contebt/*主要內容區*/
/*-----------------------------------------------------------*/
#spotlight/*公告版位*/
#spotlight h5/*公告版位標題*/
#spotlight-text/*公告版位內容*/
/*-----------------------------------------------------------*/
#article-area/*文章+列表+回應區塊*/
#article-box/*文章+列表區塊*/
.article-area-title/*文章+列表區塊之標題*/
#display/*瀏覽模式*/
#display span/*瀏覽方式這四個字*/{}
#display a/*標題列表/簡短摘要*/{}
.article-head/*文章標題+發表時間*/
.publish/*發表時間*/
.month/*月*/
.date/*日*/
.dat/*週*/
.year/*年*/
.time/*時*/
.title h2 a/*文章標題*/
.title h2 img/*文章標題前的密碼圖示/隱藏圖示/好友保護圖示*/{}
.article-body/*文章內容區*/
.bookmark/*加入書籤*/
.article-content/*文章內文*/
.more/*繼續閱讀*/
.fans-club/*小圈圈討論*/
.author/*發表作者和時間*/
.farward/*轉寄文章*/
.article-footer/*文章附加資訊*/
/*-----------------------------------------------------------*/
.refer/*文章分類*/
.history/*歷史上的今天*/
h6/*歷史上的今天的標題*/
ul/*文章分類*/
.back-to-top/*回到頁首*/
.main-list/*標題模式的文章列表*/
table/*表格*/
tr/*行*/
.list-num/*標號標題*/
.list-date/*發表時間標題*/
.list-title/*文章標題標題*/
.list-visit/*人氣標題*/
/*-----------------------------------------------------------*/
.list-comment/*回應標題*/
#user-post/*回應+引用區塊*/
#trackback-box.user-post-box/*引用區塊*/
#trackback-title.user-post-title/*引用區塊標題*/
.img/*開合圖示*/
.span/*標題文字*/
#trackback-url/*引用網址*/
#trackback-input/*網址鈕*/
那。 發表在 痞客邦 留言(55) 人氣(7,441)
PIXNET模板雖然要暫停開放樣式上傳
要ㄧ個月後才會開放
不過他的CSS標籤已經先用圖片的方式貼出來了
所以小涵在此先將他整理成文字版XD
body/*整個介頁面*/
div#body-div/*整個頁面*/
div#authority/*後台管理列*/
a#newpost/*發表新文章*/
a#backstage/*進入後台*/
div#container/*所有內容區塊*/
div#container2/*所有內容區塊2*/
div#container3/*所有內容區塊3*/
div#header/*橫幅*/
div#login-bar/*招呼語&登入登出*/
div#banner/*橫幅主要內容*/
h1/*部落格標題*/
p.skiplink/*跳到主文*/
h2/*部落格描述*/
p#blog-category/*部落格全站分類*/
u#navigation/*其他服務頁面導覽*/
li#link-album/*相簿連結*/
li#link-blog/*部落格連結*/
li#link-guestbook/*留言版連結*/
li#profile/*名片連結*/
div#contebt/*主要內容區*/
div#spotlight/*公告版位*/
h5/*公告版位標題*/
div#spotlight-text/*公告版位內容*/
div#article-area/*文章+列表+回應區塊*/
div#article-box/*文章+列表區塊*/
h3.article-area-title/*文章+列表區塊之標題*/
div#view-mode/*瀏覽模式*/
#display/*瀏覽模式*/
ul.article-head/*文章標題+發表時間*/
li.publish/*發表時間*/
span.month/*月*/
span.date/*日*/
span.dat/*週*/
span.year/*年*/
span.time/*時*/
li.title/*文章標題*/
h2/*文章標題*/
div.article-body/*文章內容區*/
div.bookmark/*加入書籤*/
div.article-content/*文章內文*/
div.fans-club/*小圈圈討論*/
p.author/*發表作者和時間*/
div.farward/*轉寄文章*/
div.article-footer/*文章附加資訊*/
ul.refer/*文章分類*/
div.history/*歷史上的今天*/
h6/*歷史上的今天的標題*/
ul/*文章分類*/
div.back-to-top/*回到頁首*/
div.main-list/*標題模式的文章列表*/
table/*表格*/
tr/*行*/
th.list-num/*標號標題*/
th.list-date/*發表時間標題*/
th.list-title/*文章標題標題*/
th.list-visit/*人氣標題*/
th.list-comment/*回應標題*/
div#user-post/*回應+引用區塊*/
div#trackback-box.user-post-box/*引用區塊*/
h3#trackback-title.user-post-title/*引用區塊標題*/
img/*開合圖示*/
span/*標題文字*/
div#trackback-url/*引用網址*/
input#trackback-input/*網址鈕*/
input/*複製鈕*/
div#trackback-text.user-post-text/*所有引用區塊*/
ul.single-post/*單一引用*/
li.post-info/*引用者資訊*/
li.post-text/*單一引用內容*/
div#comment-box.user-posy-box/*回響區塊*/
h3#comment-title.user-post-title/*回響區塊標題*/
img/*開合圖示*/
span/*標題文字*/
div.post-comment/*留下回響*/
a/*留下回響超連結*/
div#comment-text.user-post-text/*所有回響區塊*/
ul.single-post(ul.secret)/*單一回響(悄悄話)*/
li.post-info/*回響者資訊*/
b/*樓層數*/
img.hidden-message/*公開/隱藏回響*/
a.user-name/*回響者名稱*/
img.pixnet-user/*PIXNET會員圖示*/
a.home-page/*回響者網址*/
span.post-time/*留下回響時間*/
a.show-message/a.hide-message/*公開/隱藏*/
a.delete-message/*刪除回響*/
a.reply-message/*回覆回響*/
span.user-ip/*回響者IP*/
li.post-photo/*回響者頭像*/
a img/*回響者頭像*/
li.post-text/*單一回響內容*/
lireply-text/*回覆回響內容*/
div.post-comment/*留下回響*/
a/*留下回響超連結*/
div.page/*頁數*/
div#links/*側欄工具列*/
div#links-row/*3欄是第一欄*/
div#visitor.box/*誰來我家*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
ul
li a img/*訪客頭像*/
div.box-more
a/*所有訪客列表*/
div#murmur.box/*碎碎念*/
ha.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
ul
li.murmur-time/*碎碎念發表時間*/
li.murmur-text/*碎碎念內容*/
div.box-more/*所有歷史碎碎念*/
a/*所有歷史碎碎念*/
div#broadcast.box/*好友的碎碎念聯播*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
ul/*好友的碎碎念*/
li.broadcast-photo/*好友頭像*/
li.broadcast-time/*好友發表時間*/
li.broadcast-text/*好友碎碎念內容*/
div#headshot.box/*麻吉交流*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
ul
li#headshot-img/*個人頭像*/
li#friend-apply/*申請好友*/
li#send-message/*傳送私訊*/
div#counter.box/*參觀人氣*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
div#feed.box/*新聞交換*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
ul
li a img/*新聞交換圖示*/
div#calendar.box/*月曆*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
table/*月曆表格*/
tr.mouth-nav/*切換月份的那一行*/
th.cal-backward/*上個月*/
th.current-mourh/*現在月份*/
th.cal-forward/*下個月*/
tr.weekday/*星期*/
div#recent-article.box/*近期文章*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
ul
li a/*文章標題*/
div#hotarticle.box/*熱門文章*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
ul
li a/*文章標題*/
div#category.box/*文章分類*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
div.box-more/*總開何按鈕*/
img/*按鈕*/
div/*單一分類目錄*/
h6/*分類目錄標題*/
img/*分類目錄開合按鈕*/
ul/*目錄內容*/
li a/*目錄名稱*/
div#archive.box/*文章彙整*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
select/*月份選單*/
div.box-more
a/*所有文章列表超連結*/
div#latest-comment.box/*最新回響*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
ul
li a/*單篇最新回響內容*/
div#latest-trackback.box/*最新引用*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
ul
li a/*引用過去的文章標題*/
div#subscription.box/*最新訂閱*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
ul
li a/*訂閱的人最新文章標題*/
div#favorite/**/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
select/*我的蒐藏選單*/
div#mylink.box/*我的連結*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
div.link-box/*單一連結分類*/
h6/*連結分類標題*/
ul
li a/*單一個我的連結*/
div#powered.box/*服務提供*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
ul
li a/*登入登出連結*/
div#---------.box.folder/*自定欄位*/
h4.box-title/*側欄區塊標題*/
div.box-text/*側欄區塊內容*/
div#links-row-2/*3欄式第2欄*/
div#footer/*頁尾*/
p/*頁尾描述*/
diV#bottom/*頁尾超連結*/
a.bottom-skiplink/*回到頁首\回到主文*/
a.bottom-pixnet/*PIXNET痞客邦\申請帳號\會員服務專區*/
那。 發表在 痞客邦 留言(8) 人氣(1,906)