2010年10月11日 星期一

重新發現HTML表格

根據最近的一些實踐以及在和一些讀者進行關於HTML表格的使用問題溝通之後,決定寫這篇文章。總的來說,注意到由於誤導性信息,他們對於table的使用有種先入為主的厭惡。事實上很多人會說」看到永遠不應該使用表格」的說法,但是這絕對是錯誤的!這個建議只是針對使用HTML表格來定義網頁的佈局,但是表格在方便的排列數據信息行和列方面非常完美,而且如果你一定要在一個頁面上顯示表列數據,你就不得不使用它們!為什麼不呢?然而,在這種情況下,一些人無視了用於table的某些HTML標籤的存在並且不知道該如何正確的使用它們。

HTML有10個表格相關標籤。下面是一個帶有簡介的列表,但是首先,文檔要被正確的定義在HTML 4.01/XHTML 1或HTML 5下面:

定義表格標題(4, 5)
為表格的列定義屬性(4, 5)
定義表格列的分組(4, 5)
定義表格(4, 5) 定義表格主體(4, 5) \ 定義表格的表注(底部)(4, 5) 定義表格的表頭(4, 5) 定義表格的行(4, 5) 一個基本的表格結構如下: 它包含一個標題、頭部、主體和底部。正確的HTML元素順序是:  
程序代碼 程序代碼
定義一個單元格 (4, 5)
定義表格的表頭 (4, 5)
你也可以使用 和 來定義表格的列或為列分組:
程序代碼 程序代碼
下面是一個正確的表格結構實例:
程序代碼 程序代碼
                                                        
Table caption here
Head 1Head 2Head 3
Foot 1Foot 2Foot 3
ABC
DEF


在瀏覽器中的結果如下圖所示:



關於表格的一些技巧

根據w3schools的解釋和用法,在一個table定義中,元素必須出現在之前,這樣,瀏覽器就可以在接受到所有數據之前呈現表注了。另外,如果不是這個順序,將不能通過W3C的HTML4和XHTML驗證,無論你聲明哪種DTD。(瞭解更多)。
在 HTML 4.01 中,表格的align和bgcolor屬性不贊成使用,所以在HTML 5中不再有任何table的屬性被支持(事實上,在XHTML 1.0 Strict DTD中已經不支持」align」和」bgcolor」屬性了);
所有主流瀏覽器都支持 標籤,但是Firefox、Chrome 以及 Safari 僅支持 colgroup 元素的 span 和 width 屬性;
css中的empty-cells:show|hide 可以設定空單元格是否顯示邊框。注意,這個需要設置在table而不是td/th中。IE6中比較容易遇到該問題;
css中的border-collapse:collapse | separate 可以設置表格的邊框是否被合併成一個邊框;
css中的border-spacing屬性等效於table的cellspacing屬性。
為了實現現在所提倡的表現和結構分離的開發模式,前端觀察建議將頁面中所有與表現層有關的東東,都用CSS來控制,不用HTML自帶的屬性來控制頁面的表現,而table是最容易被忽略的一個。
關於table的更多詳細內容可以查看W3C的文檔: w3 Introduction to tables

最後留一個非常簡單的問題給大家,CSS的哪個屬性等效於table的cellpadding屬性?

文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月10日 星期日

CSS3+HTML5 實現未來Web設計



CSS3 + HTML5是未來的Web,它們都還沒有正式到來,雖然不少瀏覽器已經開始對它們提供部分支持。本文介紹了5個CSS3技巧,可以幫你實現未來的Web,不過,這些技術不應該用在正式的客戶項目,它們更適合你的個人博客站點,Web 設計社區,或者不會有客戶向你投訴的場合。

1. 圓角效果


CSS3 新功能中最常用的一項是圓角效果,標準 HTML 方塊對象是90度方角的,CSS3 可以幫你實現圓角。
程序代碼 程序代碼
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

甚至單個角也可以實現圓角,不過 Mozilla 和 Webkit 的語法稍有不同:
程序代碼 程序代碼
-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px;

所支持的瀏覽器:Firefox, Safari , Chrome
用例:Twitter
請參閱:
W3C Working Draft
Border-radius on CSS3.info
The Art of Web

2. 圖形化邊界



顧名思義,圖形化邊界就是允許使用圖片作為對象的邊界,語法如下:
程序代碼 程序代碼
border: 5px solid #cccccc; -webkit-border-image: url(/images/border-image.png) 5 repeat; -moz-border-image: url(/images/border-image.png) 5 repeat; border-image: url(/images/border-image.png) 5 repeat;

這裡,border: 5px 設定了邊界的寬度,然後,每個邊界的圖片定義告訴瀏覽器,使用圖片的多大一部分來充當邊界。邊界圖片還可以針對每一條邊單獨設置:
程序代碼 程序代碼
border-bottom-right-image border-bottom-image border-bottom-left-image border-left-image border-top-left-image border-top-image border-top-right-image border-right-image

支持的瀏覽器: Firefox 3.1, Safari , Chrome.
用例:Blog.SpoonGraphics.
請參考:
W3C Working Draft
Border-image on CSS3.info
Border-image in Firefox

3. 塊陰影與文字陰影



陰影效果曾讓 Web 設計師既愛又恨,現在,有了 CSS3,你不再需要 Photoshop,已經有網站在使用這個功能了,如 24 Ways website.
程序代碼 程序代碼
-webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;

前兩個屬性設置陰影的 X / Y 位移,這裡分別是 10px,第3個屬性定義陰影的虛化程度,最後一個設置陰影的顏色。文字陰影也可以這樣設置:
程序代碼 程序代碼
text-shadow: 2px 2px 5px #ccc;

支持的瀏覽器:Firefox 3.1, Safari, Chrome (只支持 Box 陰影) ,Opera (只支持文字陰影).前3個數字表示紅綠藍三色的值,最後一個值代表透明度,另外,我們還可以使用 opacity 實現透明度(目前的燈箱效果多使用該技巧 – 譯者)
用例:24 Ways.
請參考:
W3C Working Draft
Box-shadow on CSS3.info
W3C Working Draft
Text-shadow on CSS3.info

4. 使用 RGBA 實現透明效果



目前,Web 設計中的透明效果主要靠 PNG 圖片實現(但在 IE 瀏覽器支持得並不好 – 譯者),在 CSS3,可以直接實現透明效果。
程序代碼 程序代碼
rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);  color: #000;
opacity: 0.5;

支持的瀏覽器: Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes).
用例:24 Ways (RGBA).
請參考:
W3C Working Draft
RGBA on CSS3.info
Pure CSS Opacity

5. 使用 @Font-Face 實現定制字體



Web 設計中有幾種字體是比較安全的,如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的,一般來說細明體是唯一安全的 – 譯者),現在,使用 CSS3 的 @font-face 可以自己指定字體,不過因為牽扯到版權問題,實際能用的字體也是有限的 (另外,體積龐大的中文字體也是一個不好解決的問題 – 譯者)。

語法如下:
程序代碼 程序代碼
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

支持的瀏覽器: Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折,如果你不怕麻煩,可以在 IE 實現這個功能,請參考: make font-face work in IE )
用例:TapTapTap.
請參閱:
Fonts available for font-face embedding
Font-face in IE, making Web fonts work
Web fonts, the next big thing – A List Apart

雖然 CSS3 尚在開發中,上面提到的這些功能已經可以在部分瀏覽器中使用了,尤其是 Safari。不幸的是,Safari 並非主流瀏覽器。

Firefox 目前擁有大量用戶基礎,另外,即將推出的 Firefox 3.1 支持不少 CSS3 效果,因為 Firefox 用戶的升級積極性很高,因此,會有不少用戶可以提前體驗 CSS3 的新功能。

Google Chrome 今年剛剛發佈,它基於 Webkit 引擎,因此和 Safari 很相似,因為 Safari 主要用於 Mac 市場,Chrome 可以正好彌補 Windows 市場的空缺。

根據統計數據,2008 年11月止,44.2% 的用戶使用 Firefox, 3.1% 使用 Chrome, 2.7% 使用 Safari,意味著 CSS3 的部分功能已經可以支持近半 Internet 用戶,而在 Web 設計圈子,這個比例可能更高,大約有 73.6% (Blog.SpoonGraphics 提供的數據)

6. 負面因素

上面講述的這些 CSS3 功能會給你的網站帶來出色的效果,但仍有一些負面的因素必須考慮:

Internet Explorer:46% 的 Internet 無法看到這些效果,因此不要將這些東西用於重要的設計。同時保證,在這些效果不起作用的地方,有替代設計可用。

CSS 驗證問題:這些 CSS3 功能並非最終版本,目前不同的瀏覽器使用不同標籤實現這些功能,可能為你的 Style Sheet 帶來驗證上的問題。

臃腫代碼:因為不同瀏覽器要使用不同定義語法,最終將導致你的 CSS 代碼十分臃腫。
不當的使用: 對這些效果的不當使用,可能帶來一些不良後果,陰影效果尤其如此。

英文原文:Push Your Web Design Into The Future With CSS3
文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月7日 星期四

關鍵字組怎麼選???

從業以來,不少客戶對於關鍵字的選擇都有其自己的想法,原因不出是預算的考量,但也有少數是來自於「關鍵字」的迷思。
有些客戶,真的只想用非常的「關鍵字」來做為他購買的關鍵字組,比如品牌、產業、服務等名稱,而數量就是這麼關鍵的三或四個字詞而已。這是個有趣的現象,我就把它稱做為「關鍵字的迷思」吧─非常關鍵、極度精準的字詞。
日前創市際市場研究報導提到:如果對搜尋的結果不滿意時,您通常會怎麼做?57.1%的網友表示他們會「換一個全新的關鍵字,或是修改目前使用的關鍵字」。看了這個數據後,各位親愛的廣告主,您還願意相信只要購買幾個「關鍵」字就能在關鍵字廣告的操作上看到最美麗的成效嗎?您還會覺得只要購買幾個「關鍵」字就能完全抓住您在茫茫網路世界中眾多的顧客需求了嗎?
我們都知道,網友的搜尋習慣百百種,無法預知他們會藉由搜尋什麼字串來引導他們找到自己的所需,於是,我們常常建議客戶,在關鍵字組的購買上,一定是要精準搭配廣義。精準的字串能為廣告主帶來最直接的目標客群,而廣義的字串則為廣告主引導有機會的需求者到來。兩相合宜的組合,就像一加一會大於二的市場效應,當消費者不論怎麼樣的變換字組來做搜尋,您的廣告只會有越多的機會被曝光,而不是永遠被最關鍵的那幾組「關鍵字」給挶限住。
「成交絕對不會來自於一、兩組字」,請相信這句箴言。

文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月6日 星期三

HTML5拿什麼取代Flash?



最近關於HTML5吵得火熱,很多人認為HTML5出現會秒殺Flash,以至於在各大web前端開發論壇吵得不可開交。論壇裡三言兩語說的不夠 盡興,只好在自己一畝三分地裡敞開了說說。也當一次神棍,展望一下web前端開發的未來。首先這裡所說的HTML5也不僅指HTML5本身,而是泛指HTML5、CSS3、 JavaScript以及新的瀏覽器API所包含的整 個web端技術。

誰需要HTML5?

Google最需要!Apple的Jobs也需要。但這兩個肯定各懷鬼胎。微軟無所謂了,反正他還有Silverlight。

Mozilla/Firefox非盈利組織,目標可能會高尚些,是w3c標準就要支持。Opera那點瀏覽器市場佔有率估計還沒敢有太多想 法。

Google的雲計算帝國就差一個支持 RIA(Rich Internet Applications)富互聯網應用的客戶端了,試想 HTML5得到普及,更多的應用轉向BS模式時,微軟帝國的桌面軟件生態環境必定受到很大威脅,垂涎多年的Google一定是最大受益者。當在一台操作系 統免費的電腦上使用和MS Word差不多功能的免費Google Doc時,你還會掏錢買微軟的Word嗎?當你所有的辦公應用都只需要打開瀏覽器窗口 時,你還會花錢買操作系統嗎?Google的Chrome OS操作系統界面已經說明了這個意圖。

Jobs也需要HTML5,他是打著小算盤,想讓瀏覽器原生支持視頻音頻,這樣iPhone、iPad就不用嵌入Flash,Jobs當然 不能讓Flash進iPhone OS,要不然App Store裡的遊戲誰去買?同時,如果大量的應用都能基於瀏覽器實現時,用戶就不會被 Windows的桌面應用套牢了。漂亮的Mac電腦誰不喜歡。

他們選擇 HTML5都是為了更大野心,期望HTML5帶來整個軟件生態環境的改變,同時避開不受自己控制的Flash。

Macromedia和後來的當家Adobe把握住了互聯網應用的發展需求,不斷的完善的Flash,使之已經超越了瀏覽器本身的功能。各 大瀏覽器廠商也看到這種應用的需求,不甘於一個本該瀏覽器實現的功能,由一個幾兆大小的 Plugin實現了,並玩的風生水起。於是不遺餘力的推進 HTML5,並且矛頭直指Flash。

用戶想要HTML5嗎?用戶要的不是技術,是應用,是體驗。如果你能拿Ajax實現一個開心農場,我想沒誰會在乎它是不是Flash做的。

開發者想要 HTML5嗎?那需要一個成熟的HTML5+CSS3+JS的開發環境,需要各個瀏覽器提供統一的用戶體驗,即標準的完全兼 容。還需要增加新的學習成本。

Flash 的優勢?

Flash比HTML5強在哪?性能,功能?如果說HTML5將擁有和Flash所有內置對像類似的DOM 呢,還有GPU的2D、3D加 速呢?這不是沒可能,畢竟HTML5還只是草案。當然Flash也能不停的更新。

開發群體:

Flash的優勢是在開發人員上,十多年的積累,有眾多優秀的藝術家、程序員和互動設計師集中在Flash平台上做互動媒體開發。也 使無數的類庫有了AS版,如FLARToolKit,Touchlib,OpenCV這些互動、圖像分析的c++庫都移植到了Flash平台。在RIA應 用上有相對成熟且開源的Flex框架,越來越多的企業在嘗試使用Flex替代Ext等 Ajax框架,為客戶提供更好RIA應用體驗。

持續發展:

FlashPlayer 是一個封閉的系統,是由Adoeb獨家控制,相對於開放的HTML5標準這是弱勢,也是技術上的優勢,它可以很靈 活,可以隨時加入新技術,新功能。而 HTML5是一個公開標準,既然是標準就意味著不會經常改動。Flash的改進升級只需要用戶升級 FlashPlayer插件,插件的升級相對用戶來說,是輕量級的。HTML標準的改進意味著升級瀏覽器,這是相對重量級的用戶操作,尤其是還有很多人不 明白什麼是瀏覽器。

HTML5開放標準一旦確定下來,就會有一個很長的使用週期,今天看是足夠先進的功能,十年後呢。就像當年我們用著 HTML4+CSS2+JS沾沾自喜以為足夠表現Web應用時,誰能想到今天Flash不斷改進所開拓的天地呢。或許十年後我們又該討論HTML6秒殺 Flash的話題了。

超越web應用:

如果當時SUN能重視Java Applet,或許就沒有Flash的今天,SUN也不會淪落到被收購的境地。而如今Adobe AIR更 是讓Flash超越Java Applet,讓Flash超越了web,脫離了瀏覽器。Flash到如今功能不斷增強,在多媒體領域也在不斷地壓縮自家老 大哥Director的應用空間。多點觸摸、人臉識別、Socket通訊同步、AR增強現實、實時視頻等等功能在Flash平台上的實現,讓越來越多的互 動多媒體項目採用Flash方案。

希望Adobe繼續能擴展Adobe AIR平台的功能,提高性能。能有越來越多的跨平台桌面應用在AIR上實現。

Flash 的劣勢?

FlashPlayer版權私有。
swf文件的內容相對封閉,搜索引擎不友好。

插件的安全隱患。
相對與Ajax技術的學習曲線及學習成本。

FlashPlayer 94%裝機率!=100%。
iPhoneOS明確不支持Flash,而iPad首日12萬的訂單,預計將會開啟一個大市場。

不支持3D硬件加速。FlashPlayer如果支持3D硬件加速,必將重寫現有的2D矢量引擎,鑒於ShockWave 3D的 表現,FlashPlayer 硬件3D,很難有很好的用戶體驗!

HTML5拿什麼取代Flash

功能:

HTML5目前還只是草案,從已提交的內容來看,增加了許多更具語義的標籤,新的標籤意味著在DOM中增加新的類,如果把瀏覽器比做一個大 的 Flashplayer,HTML5無非就是在增加新的類,新的API。然後由JavaScript來調用這些API。

如果HTML5要完全取代Flash,至少要提供和Flashplayer10相似的功能。

這應該不是問題,添加WebSocket 、WebSQL、WebGL……甚至WebQt、WebMFC都是可以無盡暢想的。或者乾脆把瀏 覽器就做成一個大虛擬機,完成Java的桌面遺願。如果有足夠的需求動力,這些都不是問題。

性能:

在很多 HTML5激進派的文章裡,都痛指目前Flash的效率低下,導致瀏覽崩潰。真的是Flash效率低到如此不堪嗎?肯定不是,只是 Flash的濫用和參差不齊的Web前端開發人員造成的。同樣如果用IE的JS引擎寫一個Ajax版的XX農場,如果所有頁面廣告動畫都用JS來寫,我想 那才叫效率低下。如果真的Flash效率低,為什麼那麼多網頁遊戲都不是Ajax做的呢?為什麼很多優化的很好的Flash3D遊戲場景都很流暢,而一個 2D的XX農場就能拖慢你的酷睿2呢?不明真相的半吊子開發人員總是把瀏覽器不響應和崩潰歸結於Flash效率低下。
所以未來HTML5要取代Flash 必須有一個高效的2D/3D圖形文字渲染引擎,和一個高效的JavaScript引擎。這樣 才能帶來更好的用戶體驗。這些,眾瀏覽器廠商都準備好了嗎?Chrome和Opera似乎正在走這條路。

兼容性:

HTML4標準已經十多年了,今天我們還會寫下fxckIE6的CSS樣式名。瀏覽器的兼容性會是最大的問題,尤其是加入n多特性後的 HTML5和CSS3。IE,Firefox,Chrome,Safari這些瀏覽器背後的大佬們,怎麼去協調呢?這有個矛盾,開發差異化的產品,卻要提 供同質化的功能。JS性能、標籤瀏覽,同步收藏,插件這些提高用戶體驗的功能,都是這些差異化的方向。如果再出現類似ActiveX這類IE only的 東西,那還不如維持HTML4這種方式不變。

開發模式:

Flash IDE將無數優秀的藝術家、UI設計師和互動程序設計師團結在一起,最終成就了Flash,這也與Macromedia和 Adobe在圖形設計和互動設計群體中的號召力不無關係。

HTML5的互動會將JavaScript提高到一個新的高度,這必將需要一個成熟的開發環境。繼續DW+Firebug?或者DW升級為 全新的HTML5互動開發IDE,或者微軟VS來幹這件事,或者是Eclipse?

成熟的開發環境才能聚攏人才,才能激發無窮的創造力,帶來更多的內容。豐富的內容自然帶來更多用戶。

部署:

這是最重要的一個問題,沒有這一步,一切都是零。

Flash新版本怎麼部署?在90%多桌面佔有率的基礎上更新插件就OK。HTML5怎麼部署,更新瀏覽器,這個有點難,看看頑強的 IE6。聽到有人建議微軟在系統 ServerPack裡包含IE更新,只能說這想法很好,但是反壟斷的大錘一定會把微軟砸死。

那怎麼引導用戶去升級瀏覽器呢?對於互聯網「Core User」來說不是問題,目前支持HTML5和CSS3部分特性的Chrome開發 版,很多人都在用了。但是那些「Light User」呢,可能連天天看網頁用的這個窗口跟瀏覽器是什麼關係都不明白。

這需要一個HTML5的殺手級應用去引導,「Light User」幾乎不會以技術為導向去升級瀏覽器的,他們只會以應用需求為導向去升 級。比如YouTube不再支持IE6用戶,這樣喜歡YouTube視頻的用戶會去升級IE6再來訪問。用戶不會是因為IE6的HTML標準兼容差而選擇 更新IE6,這是必然的。

那HTML5的殺手級應用在哪裡呢?或者說都有Youtube這樣的影響力和號召力嗎?而沒有這種號召力的網站,誰會貿然率先支持 HTML5來要求用戶升級瀏覽器嗎?這些網站之間必定會陷入囚徒困境中,在重複的囚徒困境中,博弈被反覆地進行。最終才會全面進入 HTML5時代。這個 過程或者很短,也可能很長。畢竟現存的Web前端還沒到不堪的地步,反倒是由於Flash這些插件和jQuery這些JS框架弄的有聲有色。

總結
  • HTML5不是用戶應用的迫切需求,更多是廠商試圖改變軟件生態格局的戰略需求。
  • HTML5的兼容性鑒於各大瀏覽器的以往表現,有待觀望,不宜立即遷移應用。
  • HTML5需要一個成熟完整的開發環境,記事本+瀏覽器對付不了。
  • HTML5功能的暴增,瀏覽器必須有一個高 效的圖形引擎和腳本引擎。
  • HTML5需要殺手級應用來吸引和引導用戶升級瀏覽器,最終完成HTML5終端的部署。
  • Flash是一個不斷在發展的技術,有很強的靈活性,HTML5不可能完全取代Flash,眾多的開發人員也不會斷然拋棄Flash。
原文: BLUEIDEA
文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月5日 星期二

五個最常被誤用的META值

「走一步路就可到的事情,跟走三步路才能到的事情,你喜歡做哪個?」這是我最常講的一句話,也是我們在優化網頁HTML程式準則之一。在「修身」的理念裡,其中重要的一個環節就是要優化或簡化我們的HTML程式碼。在過去,許多SEO網站上都會列了一堆meta,讓你在裡面列了一長串的Meta值,但事實上列這麼多,Google早就表示"I don't care",所以你列了這麼多的Meta只是徒增加網頁大小進而影響讀取時間。那哪些meta值是我們最常誤加,或是加了沒有效果的呢?
1. keywords
對於Google或是Bing搜尋引擎,最多人使用的無效Meta值莫屬於keywords。Google很早就表明忽略Meta keywords,當然,現在你身處在大多數人用Yahoo的台灣,到明年中前你還是得設定Meta keywords,但如果你的網站是專注於海外市場,你是可以不需要設定meta keywords的!
2.robots
"robots"的Meta值是用來告訴搜索引擎派來的機器人,在這頁上面要執行怎樣的動作。如果沒有設定這個Meta,那它的預設值就是"index,follow"。而且較佳的作法是使用"robots.txt"文件,讓機器人來的時候先看過這份文件,再決定哪些網頁要爬,哪些網頁不用爬,所以如果你的寫法也跟上面一樣,就把這行槓掉吧,沒有意義。
中場引申閱讀:
Google教你如何設定meta中robots的值
robots.txt編輯交戰手冊
3.revisit-after
很多SEO都會告訴你,這個meta一定要設定,因為它是告訴蜘蛛幾天要來爬一次你的網站。事實上這是一個過時的meta值,真的要提醒蜘蛛幾天要來檢索一次,比較好的作法是設定XML格式的Sitemap,並在"Change frequency"中設定合適的更改時間。這一行也是可以槓掉的無效meta。
4.expires
許多介紹Meta屬性的SEO網站都稱它為:到期時間。事實上它應該是指定這個網頁生成的時間,在過去,這個Meta的設定是避免使用者在讀取時,所讀取到的網頁是暫存在電腦裡,尚未被修改過的檔案,而造成資訊的錯誤。但是現在的技術比較少有這個問題了,同時這個Meta屬性值也是能夠在XML格式的Sitemap中可以設定的。你寫了這一行了嘛?槓掉它吧!
5.REFRESH
關於這個行Meta,很常被當做是作弊的象徵。因為許多黑帽SEO最常的作法就是做一個假頁,上面塞滿了黑帽SEO的技巧,讓搜索引擎收錄後,再利用這行Meta跳轉至客戶的網站。事實上這招目前只有在台灣的Yahoo搜索引擎僅有「短暫」的功效,而且就算它不斷的刷新頁面,也不會被Google(cookie-based)判定為多次的頁面瀏覽。所以槓掉它吧!

以上是五個最常被誤用的meta屬性,其他像是有 或是lt;meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">
這一類的,平常比較少人會加,再這邊也就不解釋了,因為他們也是屬於無用Meta。其實meta在SEO所佔的權重比例真的不是重點,它的重點是在於透過一些具有Semantic(語意)屬性的Meta,讓搜索引擎好收錄或分門別類,打造Semantic Web(語意網)方便使用者檢索。你會發現許多比較大的網站,他們事實上並沒有設定一堆meta,他們最多只使用了這兩個最基本的Meta值:
有這兩個確認網站的編碼以及讓機器人了解這網頁的簡單內容,這樣的meta設定便足夠了。

文章提供: BAYSTARS DESIGN網頁設計公司

手繪風格在現代網頁設計



當涉及到網頁設計往往完美,豐富多彩,四四方方的設計獲得晉級,但是,實際情況是不同的,因為它是很難找到一個完美的物體的形狀和完美的色彩在我們的日常工作。為了實現一 獨特 和交際設計我們需要考慮更多的創造性的方法。例如,我們可以得出我們自己的網站-或至少它的某些部分。

其主要目的手繪元素在於他們有能力 傳達一種個性和個人說明 在完美的時候,四四方方和圓形元素隨處可見。他們看起來不同,他們可以使一個網站看起來不同。這就是我們通常後擺在首位。

而事實上,這樣做往往:是否一個博客,商店,廣告,私人網頁,或者一些合作項目-不管是否使用Flash或(X)HTML的。這個職位介紹 新鮮的例子手的繪畫風格在現代網頁設計。網站所有截圖可以點擊並連接到網站從網站中看的更仔細。

到這原始出處網站觀看更詳細的介紹(英文版)..
文章提供: BAYSTARS DESIGN網頁設計公司

2010年10月3日 星期日

50款優秀的免費相冊(圖片畫廊)程式收集

譯自:http://net.tutsplus.com
原文:50款優秀的免費相冊(圖片畫廊)程序收集

這裡收集了50個非常棒的免費相冊(圖片畫廊)程序,你可以用來直接搭建自己的網絡相冊。這些相冊基於PHP、jQuery、MooTools、Flash以及Ruby on Rails,也有純CSS。
1. Gallery 2
Gallery 2 可能擁有最大的社區,它是網上使用最多的相冊程序之一。
2. Zenphoto
Zenphoto 自我定位為“最簡單、最有用的相冊程序”。基於PHP.
3. Minishowcase
Minishowcase 是一個簡單的小巧的php/javascript 相冊。
4. TripTracker
TripTracker 是一個小的JavaScript相冊,擁有圖片瀏覽和幻燈播放功能。
5. Dynamic Drive CSS Image Gallery
脫離JavaScript, Dynamic Drive CSS相冊完全使用CSS實現。
6. Ajax Photo Gallery
一款免費的基於Ajax的相冊,可以通過一個XML文件展示來自於Picasa的圖片。
7. SimpleViewer
一款免費的基於flash的相冊,同時提供一個可選的高級版本,提供更多可選及個性化功能。
8. Jalbum
Jalbum是一個混合的在線/離線軟件,可用來下載到你的電腦上,並上傳照片到你的位於jalbum.net的相冊空間。
9. Coppermine
類似Gallery 2,Coppermine 是另一款”古老的” PHP 圖片相冊,已經存在很多年了。
10. Plogger
Plogger 是一款PHP 相冊程序,它有一些有用的功能,比如,內置的Ajax圖片編輯,Zip打包上傳圖片,以及允許創建你自己的模板的能力。
11. CSS Play
一個圓滑的多頁相冊,完全由CSS創建。
12. Polaroid Gallery
Polariod Gallery 是一款有趣的Flash程序,可以將你的照片(從XML 文件或Flickr RSS feed) 整理成“寶麗來”。
13. dfGallery
dfGallery 是一款漂亮的免費flash相冊,有可定制模板和一個管理後台部分,基於PHP框架CodeIgniter.
14. (E)2 Photo Gallery
一個使用MooTools創建的優秀的JavaScript相冊。
15. AutoViewer
AutoViewer 將圖片整理到一個Flash相冊中。
16. Smooth Gallery
用MooTools創建的一個小巧的相冊。
17. Satellite
一個相冊程序,允許用戶從他們的Flickr帳號創建可定制的相冊。
18. Hoverbox
Hoverbox 是一個簡單的,輕量級的純CSS相冊。
19. Flash Gallery
就像它的名字表示的那樣,Flash Gallery 是一個簡單的基於XML 和Flash 的相冊,而且比較容易定制。
20. HighSlide JS
HighSlide 允許你使用一些簡單的JS效果很方便的縮放圖片。
21. Pixelpost
Pixelpost在相冊程序上是一個轉折,它可以算是一款很不錯的圖片博客,開源、快速、多語言支持。
22. Script and Style Auto-Generated Photo Gallery
一款漂亮的程序,將一個圖片目錄創建為一個相冊。用PHP 和JavaScript創建。
23. Postcard Viewer
一個Flash程序,獲取圖片,將他們放進明信片中,並重新組合如一個相冊。
24. Andrew Berg’s Flash Photo Browser
一個簡單的Flash動畫圖片瀏覽腳本。簡單但很好玩。
25. Flickr Photo Album for Wordpress
一個wordpress插件,調用Flickr圖片冊和wordpress裡的相冊。
26. Galleria
Galleria 是一個基於jQuery的輕量級相冊。
27. Lightview
一個用來搭建簡單圖片和多媒體畫廊的簡潔的、輕量的方案。
28. Fancy Zoom
Fancy Zoom 是一個JS腳本,允許不用重新加載圖片就能縮放圖片。很酷的效果,有些像LightBox和ThickBox。
29. Imagevue
一個很棒的Flash相冊,提供圖片相冊、幻燈展示和一個後台管理界面。
30. jpGalScroll Photo Gallery
一個使用jQuery創建的簡單的相冊,提供滾動和分頁功能。
31. nextgen gallery
nextgen gallery 是一個強大的wordpress圖片相冊插件,基於jQuery創建,很好很強大,是最著名的wordpress相冊插件之一。
32. Singapore
被稱為“最簡單的大型相冊”,Singapore 是一個輕量、功能強大的相冊。由PHP創建。
33. jQuery Cycle
一個jQuery 插件,讓你可以使用多種不同的效果來循環展示(相冊中的)照片。
34. Imagin
一個flash 圖片相冊,能將照片組織到相冊和子相冊。
35. Phormer
PHP相冊程序,不需要MySQL數據庫,三分鐘安裝。
36. Gullery
Gullery 是一個用Ruby on Rails創建的簡單的相冊。非常適合個人作品集或小型畫廊。
37. 如果使用CakePHP和Flickr創建一個相冊
一個很有意思的教程,講述如果使用PHP框架CakePHP和Flickr創建一個基於網站的相冊。
38. filebrowser
一個小型的PHP 應用,允許你縮略圖片以用於網站上。Lussumo開發。
39. FAlbum
一個基於Wordpress的相冊程序,可以顯示Flickr上的照片和照片集。
40. Slimbox 2
一個小巧的、兼容標準、完全可定制的LightBox照片查看程序,基於jQuery創建。
41. Animated JavaScript Slideshow
一個幻燈相冊腳本,基於JavaScript創建,不大於5kb。
42. iPhotoToGallery
一個iPhoto 插件,可以讓發佈照片到Gallery2變得非常容易。
43. FrogJS Gallery
一個簡單的、不太顯眼的相冊程序,基於LightBox創建,但是通過不同的方式展示照片。
44. 用MooTools創建一個非常棒的相冊
Jared Rhizor在Nettuts發佈的有一個很棒的關於如果使用MooTools創建一個簡單的相冊的教程。
45. Django-based photo gallery tutorial
簡單的介紹如果使用Python框架Django創建一個相冊的教程。
46. Zen Gallery
優美的Flash相冊腳本和工具,可以用來將圖片放到你的網站上去。
47. folderblog
一個免費的,輕量級的PHP程序,在相冊中顯示一個文件夾中的圖片
48. Duh Gallery
另一個簡單的Wordpress 相冊插件。
49. Original Photo Gallery
一組提供客戶端腳本的程序,用來按比例縮放圖片,並將圖片發佈到相冊表單。
50. 使用Flash8搭建動態相冊
指導中級Flash用戶創建一個動態相冊,通過XML加載。



文章提供: BAYSTARS DESIGN網頁設計公司