標籤:CSS

Cyotek Spriter 網站圖片合併軟體,懶人CSS自動合併多張小圖

製作網站通常會有很多小圖案,但是每一張圖案都單獨使用會增加網站的請求連線數,讓網頁載入變慢。因為出現了一種所謂的「CSS Sprite」,幫你把所有的小圖拼貼成一張大圖,只要請求一張圖片,就能把所有小圖一併請求,加快網站的載入速度而不把網站連線數浪費在等這些小圖的請求。不過拼貼圖片的時候該怎麼操作呢?

拼貼這些CSS用的小圖,最簡單的方式就是自己開一個空白透明底圖,把圖片放上去排列好,但是當你要引用圖片的時候,你知道這些小圖的座標嗎?相信你應該會用到很辛苦,光是算座標就算到天荒地老。是否有更快的方式可以處理?其實有線上版的圖片合併服務,不過香腸平常做網頁偏好使用「Cyotek Spriter」這個免費軟體,他會自動幫你合併輸出圖片、輸出CSS、輸出HTML,讓你快速可以使用這些小圖。

[CSS]如何去除圖片超連結的藍色外框?

在製作網頁時,有時候為了方便與快速,我們會直接對圖片做超連結而不使用背景圖片的方式處理,雖然這樣比較簡單與方便,但若忘記針對CSS做設定,在IE瀏覽器下可能會看到圖片有藍色外框,這到底是哪邊設定造成的呢?這種主是IE瀏覽器預設值的問題,在Google瀏覽器火狐瀏覽器上都是正常沒問題的,不過還是針對網頁設定一下比較好。

要解決圖片加上超連結後所產生的藍色外框問題,一個是直接針對圖片做「border:0」的設定,但是為了永絕後患,避免以後其他圖片帶超連結時還是在IE瀏覽器下出現藍色外框,建議大家還是針對CSS直接設定圖片的外框為0,把問題一次解決會比較好,這樣就不用每一張圖片都去設定,解省掉許多不必要的麻煩喔!

[教學]使用jQuery和CSS去除超連結虛線

在瀏覽器預設狀況下,當您點了超連結之後,外框會自動出現虛線,因為這跟瀏覽器的focus焦點有關,可是在網頁的整體版面配置規劃與呈現上,這樣的虛線會影響整體美觀,這時候我們可以透過CSS來去除這個超連結外框,讓網頁版面配置上可以比較美觀,如果使用CSS調整失敗的話,也可以透過jQuery進行超連結去除,以達到美化效果。

這個虛線框是屬於a屬性的擬類別「:focus」,這東西規範於CSS2,讓所有超連結點到之後可以顯示其虛線外框,但這個虛線外框並不影響網頁的位置計算排版,簡單說可以想像他是浮在上面的,就算出現虛線外框也不會讓網頁版面位移,但這個做法只是讓網頁看起來比較不好看,多了一個外框虛線總覺得有點怪怪,所以就讓我們來去除虛線吧!

[下載]Firefox 火狐瀏覽器,讓網頁瀏覽更順暢! (最新版)

還在使用很難用、很不安全、漏洞超多的IE嗎?趕快醒醒吧!換裝Firefox絕對讓你有不一樣的瀏覽體驗!Firefox是一套完全免費的瀏覽器軟體,跨足Windows和Linux以及MAC系統,而且還有很多好用的附加元件,讓你瀏覽網頁更方便、下載檔案快速,當然這瀏覽器的安全隱私也做得很好,不會讓您誤闖有問題的網站,更重要的是有JS加速功能,讓你上噗浪(Plurk)Gmail都可以超順暢!

一直以來IE就常駐在Windows系統,佔據了大半的瀏覽器市場,但是IE的使用效能卻逐年降低,又因為瀏覽器市場獨大而亂搞網頁標準,使得許多網頁設計師非常頭大,再者,Windows XP內建IE6又很多使用者很愛三不五時重灌XP,使得IE9、IE8或是IE7也無法取代IE6,讓整個網路世界充斥著IE6。但安全性漏洞最嚴重的瀏覽器偏偏是IE6,可是很多使用者都不知道自己正在使用最危險的瀏覽器「IE6」!

用CSS+DIV畫表格(table)進行網頁排版

以往傳統網頁設計都喜歡使用table(表格)來建構網頁,這樣的建構方式對於網頁整體排版來講並沒有太大的問題,可以完美相容於各個瀏覽器。但是時代在進步,還在用table排網頁感覺就有點過時了。會這樣說並不是想引起table和div之戰,而是想要說對於網頁的維護,table表格是比較麻煩一點的,再加上程式碼不太乾淨、過多的巢狀,對於搜尋引擎來講,也比較難發現其中重要的部分。

那如果用CSS+DIV進行網頁排版,就會比較好嗎?基本上是可以這樣講,但是大家又會遇到網頁校正的問題,一口氣要調整四、五種版本的瀏覽器,這樣很可能讓網頁設計者又跑回去用table表格排版。但其實在CSS中,已經有語法是支援表格的了,並不是對表格進行樣簡單的樣式定義,而是透過CSS的表格屬性,完美畫出表格,排除瀏覽器相容的問題,讓傳統的table排版的設計師,也可以快速轉換。

檢查網站是否通過CSS3驗證?

一般來講,開發設計網站如果所有標準都能符合當然是最好的,畢竟這樣子未來如果有任何錯誤要揪出會是比較容易的。那該怎麼檢查自己的網站有通過檢測標準呢?目前網頁的標準大多都遵守的W3C在進行,之前我們有介紹過HTML5檢測,這回讓我們來替網站做個CSS3的樣式檢測,看看能不能通過最新的CSS規範,順便也可以檢查看看網站哪邊有寫錯,把網站修正好。

能通過CSS檢測當然是一件好事,但沒通過基本上也不會怎麼樣,沒通過也不會說讓網站無法被搜尋引擎收錄到。只是,有時候後會為了挑戰自己的程式撰寫能力是否符合標準規範的需求,就會想要手癢來檢查一下網站是不是有通過驗證,通過了當然很開心,錯了當然就是盡量修正bug,當再度檢查時,通過了想必那個心情是非常棒的!

加個瀏覽器建議升級提示,跟IE6說掰掰!(If IE 語法)

每次網站改版,總是會猶豫要不要對IE6進行校正,因為這個已經超過10年前的瀏覽器,到現在還有使用者依依不捨,不捨的原因大多是因為他就是系統內建的,因為要求使用者去轉換使用平台或軟體,是一件非常麻煩的事情,他們可能認為本來好好的,為什麼要轉換呢?就算跟他說新版瀏覽器有多好,他還是會問你一句,我現在這樣就夠用了…。(整個說不過Orz)

既然用講的他們不願意換,那我們就在網上加個建議提示,或者是讓網站直接不對IE6校正,如果他們真的需要更好的體驗,就會自行更換瀏覽器。那我們該怎樣加入建議提示呢?如果跟一般正常內容一同加入,這樣不是所有人都會看到,包括那些使用最新版的瀏覽器之使用這,這不是很怪嗎?不用擔心,有一個If IE的語法,可以讓特定版本的IE才可以顯示特定內容,很方便的。