2009年8月11日 星期二

奇特部落格平台每篇文章皆可「變色龍」,暗示了文字行銷的未來?

周末在偶然的際遇下遇見了一個很漂亮的部落格,它漂亮到,我簡直眼花撩亂。
怎麼說呢?
看!

就在這裡──這篇文章的題目叫做「Pretty Sketchy」,文章是在建議,每個人都應該隨身帶一本「塗鴉筆記本」。你馬上就說:歐不,我不太會畫畫,現在寫字也醜了……。
它就說了一句重話,這句重話可能變成塗鴉界的名言:「塗鴉簿不是要給一個很棒的畫家用的,而是要給一個很棒的思考者(a good thinker)用的!」這篇文章作者為了表達他認為「塗鴉簿」的重要性,乾脆整篇部落格文章都是用他自己親手寫的字跡,注意,這包括上面的LOGO、選項、還有裡面的每一字、每一句,都是手寫字跡!

真是一篇很特別的文章!這樣的「文章」整個就是一個圖檔,因為不是文字,所以搜尋的爬蟲可能看得不太懂,不過它該有的功能是有,譬如作者想徵求大家秀一下自己「塗鴉簿」所塗畫的東西,徵求大家貼到Flickr去,提到「Flickr」,竟然還有超連結「連過去」,滑鼠過去還會將超連結的部份用虛線框起來,做得真精緻呢!

驚奇的還在後面──當你想看「下一篇文章」,哼,卻會發現,驚!下一篇文章的長相,居然又完全不同了。同樣是左上角是「Jason Santa Maria」,右上角是主選單,全部又變回了端端正正的字體。

然後,再按「下一篇文章」,天啊!整個部落格又變了,這一篇文章題為「Royal」,文章的地方出現一台紅色的打字機,打字機上面有一張紙,這篇部落格文章的文字就寫在這張紙上面,字體很小,我花了一陣子才讀完,它還真的仿打字字跡,有的黑、有的淡,這篇文章是在討論作者家裡的舊打字機(Royal牌,故此題),而打字機必須自己量測打多字換行,還要小心打字的力道,它用這台古董打字機打出這篇文章、掃描下來,再放到這個部落格裡……實在是一篇讓人思想的文章。當然整個又是用圖畫去做的。

你說,這個「Jason Santa Maria」部落格到底是怎麼做的?怎麼可能每一篇文章都可以用完全不同的版狀、顏色?

概念並不困難,想必它的後台應該仍是一個標準的部落格平台,只是部落格頁面裡的每一個區塊都取了名字,用CSS檔案來控制。一般部落格只用一套CSS,但這個部落格平台則讓每篇文章都有自己的CSS檔案,作者花時間修改每篇文章的CSS,每篇文章皆可做出完全不同的感覺!
重要的是,從這個奇特的部落格,我想到的不只是「美」而已。

美不是重點,重點是,我一直覺得部落格是一個極簡單又極強的「行銷工具」。企業或個人或團隊或組織還是一群whatever人若有長期準備,可以每天、每兩天推出一些「作品」,持續下去就有效果。但這問題是,每次推出的砲彈,由於版型一樣、功能一樣,因此只能在「文章」上做變化,寫不一樣的文章,不一樣的題目,而,這往往乃行銷人員並不擅長之處!
行銷人員最擅長的,是一個又一個超有創意的新賣法、新促銷、新活動……這些活動本身,皆有自己的文案、自己的「look-and-feel」。如果部落格可以這樣做,那每一頁都可以輕易做成一個獨立的行銷頁面,早上想到什麼點子,下午就可以推出去,一波又一波的出去,行銷人員可以玩的東西……就很多很多了!

這才讓行銷人員真正掌有了部落客最厲害的部落格行銷的精髓,天天都有砲彈!
所以,有沒有創業家可以來做這麼一個平台,甚至用現有開放原始碼平台改一改,做出一個可讓行銷人員天天都試一個新的專案的新部落格平台?企業為了省錢,會輕鬆的訂購這麼一個平台,不必每次另外花費。每一篇都是一個新的Campaign。這,或許是一個不錯的創業機會,尤其對於現今許多行銷顧問公司來說。

然後,若來看看更長遠的趨勢,這類型的平台或許也代表著另一個未來--
我們看到「Jason Santa Maria」的文章,這種文章,或許就是我們下一代的閱讀方式。大家認為,現在的小學生已經不看「字」了,只看圖?並不完全正確,如果不看字,那漫畫裡面人物對話的泡泡框裡面要寫什麼?他們不是不看字,而是只看「被圖像所包裝的文字」;這圖像不一定要插畫家來插手。看,這個「Jason Santa Maria」部落格的文章,其實是清清淡淡,沒有太深奧,沒有太偉大,但它搭配著「情境」,「字」就很好看了。或許當字與資訊放在一些特殊的版型裡面,讀起來就會充滿樂趣,文字還可以再撐一百年。

想搭著這股潮流的創業家,做一個這類的文字平台還真不錯,這不要叫「BSP 2.0」,直接叫到「BSP 100.0」好了。

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

超圓滑圓角框的半完美解決方案

導言:本文探討的是圓角框的終極解決方案,其核心關鍵詞是「圓滑、完美、兼容、重用性、語義」,這些技術都是收集目前網絡上最流行的做法。縱觀種種方法,各有其優勢,請針對不同的環境分別使用。 圓角框,因為其樣式比直角框漂亮,所以成為設計師心中偏愛的設計元素。現在的web標準下大量的網頁、博客都採用圓角框設計,成為一道亮麗的風景線。然而,就是這個圓角,卻成為了網頁前端人員心中永遠抹之不去的陰影,對它,可以說是又痛又愛。愛的是它的漂亮,痛的是要讓它兼容通行於各種不同的瀏覽器卻成為一個永遠的神話。讓我們來回顧一下目前網絡流行的都有哪些解決方案。第一種:無圖片純css圓角框收錄理由:兼容性強,不用圖形特點:1.不用任何圖形,使用很多個div容器模擬出圓角效果。2.兼容性:通殺所有瀏覽器缺點:1.構造這個圓角需要加入太多的無語義的標籤,結構比較冗余。2.重用性不強:如果一個頁面有多個圓角,並且要實現不同的半徑大小,則其靈活性不夠。3.邊框顏色雖然可以調節,但會對頁面中的結構產生致命的影響,適用於色彩單一併且一個頁面中圓角應用不多的頁面。4.不容易實現圓弧內有漸變色的圖形背景。5.圓角框不夠圓滑,有鋸齒現象,適合於背景色和當前色色差不大並且圓弧較小的網頁。實現原理:用很多1像素高的div容器,利用背景色和邊框色來模擬出圓角框的輪廓線。實例演示: 看這裡...第二種:無圖片純css圓角框,用特殊字符(&bull)收錄理由:圓滑,不用圖形特點:1.不用任何圖形,使用特殊字符‧(圓點)模擬出圓角。2.兼容性:通殺所有瀏覽器3.圓角平滑缺點:1.構造這個圓角一樣需要加入無語義的標籤,結構冗余,同第一種一樣。2.重用性不強:如果一個頁面有多個圓角,並且要實現不同的半徑大小,需要調整四個角圖片的定位,並且字符大小對其有影響,靈活性不夠。3.顏色雖可調節,但要求裡面的背景色和字符的顏色相同,不能做成邊框線條。適用於色彩單一併且一個頁面中圓角不是太多的頁面。4.一樣不容易實現圓弧內有漸變色的圖形背景。實現原理:用特殊字符(&bull),利用定位,截取四分之一圓模擬出圓角框的一個角圖片。實例演示:[urlhttp://www.cssplay.co.uk/boxes/curves.html]看這裡...[/url] 第三種:圖片圓角框收錄理由:兼容性強,可以表現很複雜的圓角效果。特點:1.使用四個圓角圖形(或一個圓圖片)。2.兼容性:通殺所有瀏覽器。3.這是最常用的圓角框做法。4.因為採用圖片來表現,所以其圓角是超級平滑,無任何鋸齒現象。5.表現豐富,適用於各種對圖片表現要求較高的圓角框。缺點:1.構造這個圓角也需要加入四個標籤來裝四張角圖片,結構也有冗余。2.重用性不強:如果一個頁面有多個圓角,並且要實現不同的半徑大小,則要重新製作一套圓角圖片。3.如果對結構的冗余沒有特別的需求,這就是超級圓滑圓角框的解決方案了。實現原理:利用九宮格原理,在一個容器的四個角加入絕對定位(或相對定位)的四張圓角圖片。實例演示:看這裡...第四種:利用VML繪製圓角(ie only)收錄理由:無圖片,平滑,可加陰影邊框 特點:1.不用任何圖形。2.兼容性:只能在IE中使用3.圓角半徑隨意調整4.重用性強:多個圓角任意調用。5.圓角顏色隨意設置。 6.結構無冗余。7.圓角平滑無鋸齒。缺點:1.除了兼容性 有問題外,其它方面的表現都不錯。2.不能在圓弧中表現豐富的有漸變的圖片,因為圓弧外框是透明的。 實現原理:使用IE專用的VML來畫出圓角。
程序代碼
注意加入引用空間:
程序代碼
http://www.w3.org/1999/xhtml">這是兼容的用法,xmlns:v一定不能少,否則。。。樣式表中加入這一句話:
程序代碼
v":*{behavior:url(#default#VML);display:inline-block;}Arcsize為半徑Strokeweight為邊框線寬度Strokecolor為邊框線的顏色實例演示:(請在IE系列瀏覽器下查看本實例)
HTML代碼
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


VML畫平滑圓角框




VML畫平滑圓角



使用IE專用的VML來畫平滑圓角框,還可以畫出陰影效果。就其圖形表現來說,是非常完美的。




[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]第五種:利用私有屬性繪製圓角(FF3 only)收錄理由:平滑無鋸齒特點:1.不用任何圖形。2.兼容性:只能在FF3中使用,其它瀏覽器不受支持。3.圓角半徑隨意調整4.重用性強:多個圓角任意調用,只需要樣式表設置就可以。5.圓角顏色隨意設置。6.結構無冗余。7.圓角平滑無鋸齒。缺點:1.除了兼容性 有問題外,其它方面的表現都不錯,這種方式應該是最完美的方式,可惜目前只有FF3能支持這個屬性,以後CSS3後會支持這個屬性,不過這不知道要等到多少年以後。2.同第五種圓角一樣,在處理圓弧內的圖片背景時顯得有些有心無力。實現原理:使用FF3專用的私有屬性來畫出圓角。只用兩種屬性就能體現圓滑的圓角框-moz-border-radius:10px;/*圓角半徑*/Border:5px red solid;/*邊框大小*/實例演示:(請在FF3瀏覽器下觀看,其它瀏覽器不支持)
HTML代碼
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


FF3下的圓角框




FF3私有屬性畫的圓角框



FF3下的圓角框兩個屬性就可以解決:


-moz-border-radius:半徑


border:邊框





[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
第六種:無圖片腳本圓角框(js半完美解決方案) 這種方案目前應該是比較完美的方案了。特點:1.不用任何圖形。2.兼容性:通殺所有瀏覽器3.圓角半徑隨意調整4.重用性強:多個圓角任意調用。5.顏色隨意設置,並且可以使用複雜的圖片做為背景,表現豐富。6.結構無冗余,只需要在容器上定義一個class或ID就可以將這個div變成圓角。7.圓角平滑。缺點:1.客戶端禁用JS時就無圓角,不過在目前情勢下,這種情況應該不會成為太大的問題。實例演示:需要點這裡...(有三個演示例子)結語:目前的css因為不能為一個容器中定義多張背景圖片,造成了為了這種圓角效果而加入冗余標籤。聽說CSS3會引入這一屬性,可能到哪時,就是圓角框統一的時候了。另外也聽說在CSS3中有意向加入像FF3私有屬性(-moz-border-radius)的方法,這也可以完美地解決這個問題。但在目前的情勢下,可能也只有用上面的這些方法來過渡了,強烈期待CSS3的到來。總而言之:要實現絕對的完美圓角框在目前的形勢下基本上是不可能的,所以取名為「半完美解決方案」。 補充一個:第七種:無圖片vml/canvas結合的圓角框特點:1.不用任何圖形。2.兼容性:通殺所有瀏覽器3.圓角半徑隨意調整,並且四個角可以隨意設置要不要圓角。4.重用性強:多個圓角任意調用。5.顏色隨意設置,並且可以使用複雜的圖片做為背景,表現豐富。6.結構無冗余,只需要在容器上定義一個class或ID就可以了。7.圓角平滑。缺點:1.本圓角需要用到jquery庫,和一個JS文件,如果項目已經加載這個庫,倒還可以用得上,不然,為一個圓角加載一大堆的東西有點得不償失。2.圓角在不同的瀏覽器下顯示有點小小的問題。實例演示:點這裡...這個鏈接沒有提供DEMO打包下載,我將它下載下來,打成了一個包。要用的朋友可以直接下載這個包。樣例下載:CurvyCorners 2.04
文章來自BINGYOUNG
文章提供BAYSTARS DESIGN網頁設計公司

2009年8月10日 星期一

兒童題材「打包」一下也可以輕鬆開網站,每月成長20%?

周末看到一篇文章提到一間叫「KidZui」的兩歲的網路公司,這間網路公司專門做一些給3~13歲小孩用的「上網軟體」。這篇文章是宣布,這個月此公司即將推出新產品「ZuiTube」,從名字就知道,這個「ZuiTube」和YouTube應該會有一點點關係,ZuiTube就是一個專門給3~13歲的小孩子看的視頻影片網站。

聽起來,這似乎不是一般可以做的?
而且,這應該不是第一個專給兒童看的YouTube吧?

嗯。這個ZuiTube網站值得創業家參考的是,它走了一條創業捷徑。猜猜它怎麼做?ZuiTube只整理一下YouTube目前的影片,將其中「普通級」的適合小童觀賞的篩選出來,全部集合在他們網站上,然後再將它的表皮換得很像小孩的兒童樂園,裡面嵌全是YouTube的電視小螢幕!它是「Web 1.0」而非Web 2.0,說實在,這裡頭並沒有什麼技術難度,只要將YouTube現有的影片整理一下,「打包」好放在一個網站,讓小朋友來這個網站慢慢觀賞……這,就是ZuiTube了!
目前ZuiTube已經收集了6萬片適合小朋友看的YouTube影片。Web 2.0顯然就沒必要了,因為這6萬則精選影片,小朋友就算再不寫功課整天看每天看,大概也得花上一年才看得完吧!

這,就讓我們學了一課。原來創業可以這樣做的?
但,這樣的做法,真的有人會來嗎?

有的!這就是今天的重點了兩年來,這間母網站「KidZui」,也是用一樣的手法,目前已經確定有點成功了。這篇文章提到一個不錯的成績,雖然KidZui網站還沒開始賺錢,但從去年七月開始,集團網站每個月都成長了20%,照他們這樣講,今天和當時比,保守來算都已經成長10倍了!創辦人說,這中間,幾乎都沒有花到任何行銷費用。這數字因為KidZui是下載產品不容易考證,但就先假設這數字是真的,然後我們來探究一下──這個「KidZui」的旗艦產品是什麼呢?
它又是怎麼一樣的「手法」?

原來,KidZui就是一個「小孩專用的瀏覽器」。這個KidZui,就和他們ZuiTube的方法雷同,一開站就和其他像PBSkids、Webkinz、Nickelodeon、Club Penguin不同,以上全都是自己開發的遊戲、社群,裝上父母監測系統,但KidZui則讓孩子們自由自在的在網路上悠遊、玩耍,不過,它只讓孩子們看某些特定的網站。這是一個擁有類似Hinet的「色情守門員」功能的瀏覽器!
你說,那很難做耶!那可是要能夠篩選網站,甚至在某個網站突然從普通級變成限制級的時候,即時察覺、即時停止!但,KidZui把麻煩的事都自己刪掉了。它,完全不自己開發「內容」,它仰賴所謂Web 1.0而不是Web 2.0,它基本上就只是拿來一堆「普通級的網址」,「打包」成一個60萬個網站的「頻道」。父母只要下載、安裝了KidZui的Firefox火狐瀏覽器外掛插件,它讓孩子們觀賞這60萬個「安全網站」,也會隨時推薦這60萬個網站其中的幾個網站供孩子們看看、玩玩,這60萬個網站應有盡有,有遊戲網站、影片網站。KidZui說,在這些網站裡,小孩們可以自由的練習他們上網的技巧,不會被限在一個迪士尼樂園,永遠不知道外面的世界!他們為了審查這60萬個網站,還請來了高達200位父母與老師充當「評審團」。除了這個以外KidZui還是有些自己的功能,譬如讓使用者製造一個他們稱作「Zui」的自己的虛擬形象,但基本上,KidZui最基本的功能,只是「打包」起來就完成了。

他們賺錢的模式為「Freemium」,一開始免費就可使用,若要更多的功能則必須付以$7.90美元的月費,或$39.95美元的年費。雖然現在目前養25名員工,還沒到打平的狀態,但,還好這間公司就是因為做的非常清楚的對象,因此一些策略資金也非常容易找到。創辦人一開始充當自己的天使,自己出了50萬的天使資金,後來就成功的找到幾家創投,還包括Starbucks執行長Howard Schultz自己的創投公司的資金,還有出版「哈利波特」系列童書的Scholastic出版公司的資金,一共募到了高達1200萬美元(4億台幣)的資金。KidZui說,目前他們以此模式已經進入了50萬戶美國家庭,這50萬戶家庭的使用模式是,平均每周上網4次,每次平均會看40個網站。而這市場應該有1500萬戶,也就是說現在只有挖到3.3%而已,而且和龍頭「企鵝俱樂部」兩年前的上千萬會員還有很大的成長空間,若它再繼續成長下去,應該可以對投資人有些交待。

KidZui以「打包」來開網站,不必有太多人過來,單單坐擁6萬則影片、60萬個網站,就有一些價值了。而「打包」來開網站,開發成本低很多,這是創業家「投機」的好機會。你能想到哪個族群?先從小孩開始,小學生喜歡看、看得懂、可以看的網站是哪些?中學生喜歡看、看得懂、可以看的網站是哪些?高中生喜歡看、看得懂、可以看的網站是哪些?這些學生都是被父母所禁看的族群,但隨著年齡增長,父母也會變得寬鬆;現在我一看到拿著槍啊、大砲的動畫片就連忙遮住孩子的眼睛,但等他上小學我就不會這麼無聊了。將這些適合某一年齡的網站集合在一起,開一個YouTube集合站、開一個超連結集合站,成為某一個族群之王,等於敲進了一塊非常強壯的基石!

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

圖像替換新技術:狀態域方法

熟悉CSS的開發者一定知道圖像替換技術,也深知它的意義,Dave Shea 曾在他的一篇文章對此做了詳細的總結,參看 Dave Shea's excellent summary ,Paul Young 在分析現存的所有方法的優缺點之後,提出了一種新的方法,並將其命名為「狀態域方法」(The State Method),本文將詳細介紹該方法的原理:

現存方法的缺點:

1.容易失效,例如:圖像禁用或者替換圖像含有透明區域;
2.過於複雜不能迅速可靠的執行;
3.通過js遍歷文檔樹,在頁面加載時出現的閃動不盡人意;
4.可能與一些瀏覽器不兼容

新的圖像替換方法:

新的圖像替換技術需要借助於js來實現,但很容易執行,只需要將一小段js引入到頭部即可。一旦js執行,響應的規則前將附加「.image-on」,只要客戶端的圖片未被禁用,規則就會生效,下面是一條應用到h1「狀態域方法」的聲明:


程序代碼
h1 {
width: 100px;
height: 50px;
}

@media screen {
.images-on h1 {
text-indent: -10000px;
background-image: url(image.png);
overflow: hidden;
}
}


第一條規則總是生效,第二條只有在image未被禁用時生效。「text-indent」使文字偏移於屏幕之外,「overflow:hidden」主要用來在FF下放置錨點在被點擊時其焦點偏移於屏幕之外。

第二條規則包繞在@media screen中,主要用來保證圖像替換只發生在屏幕閱讀器中,而不是在打印狀態下執行。如果不這樣處理,頁面打印時,多數用戶將看到一個很大的空隙而不是有意義的文本。

該項技術執行起來很快。因為文本偏移於屏幕之外,圖像可以包含透明元素,透過圖像本身,你看不到任何文本。Js執行很快,幾乎是瞬時的,它充分利用瀏覽器本身的特性。

方法解析

「狀態域方法」是在一種假定的狀態下,快速使css規則生效的方法,其上下文背景為document,這樣避免了瀏覽器遍歷DOM樹。應用「狀態域方法」有兩個理由:

1.針對用戶的反應,頁面部分內容再格式化;
2.基於客戶端瀏覽器、設備、和其它狀況而附加額外的樣式。

「狀態域方法」通過使用下面的script給html附加一個class。


程序代碼
document.enableStateScope = function(scope, on)
{
var de = document.documentElement;
if (on)
de.className += " " + scope;
else
de.className = de.className.replace(
new RegExp("\\b" + scope + "\\b"), "");
};

這段js有一點小問題,在示例頁中切換功能並不生效,我重新修改了一下,代碼如下:


程序代碼
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s^)'+cls+'(\\s$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s^)'+cls+'(\\s$)');
ele.className=ele.className.replace(reg,' ');
}
}
document.enableStateScope = function(scope, on) {
var de = document.documentElement;
On ? addClass(de,scope) : removeClass(de,scope);
};


上面的hasClass、addClass、removeClass方法借用的是《Pro JavaScript Techniques》提供的方法。如果你使用過jquery,方法將更簡單。

「狀態域」可以通過下面的方法來切換:


程序代碼
if (condition == true) {
document.enableStateScope("myScope", true);
}

如果「狀態域」為「on」,狀態域的名字將附加到規則的選擇器之前,下面這條規則在條件為真時會將錨點的顏色變成blue。


程序代碼
a { color: red; }
.myScope a { color: blue; }

正如你所預想的那樣,狀態域圖像替代技術是通過檢查圖像是否被禁用而工作的。如果未被禁用,將激活「image-on」狀態域,這很直接了當。

檢查圖片是否禁用

該方法檢查圖片是否禁用,並不是請求服務器上的圖片,因為那樣會導致一次額外的http請求。作者創建了一個巧妙的方法。

在大多數瀏覽器中,Image對象可以實例化並追溯到一個無效的URL(http://0),這樣很容易檢測Image的狀態。如果禁用,onerror事件將觸發,在js文件的開頭,j建立一個新的圖像對像:


程序代碼
var img = new Image();

但是,有兩個古怪的瀏覽器對此方法並不兼容。在Gecko瀏覽器中,不論Image是否被禁用。Onerror事件總是被觸發。所幸的是,另外一種可行的方案可以解決此問題--給html元素附加一個無效的背景圖片,然後通過getComputedStyle方法獲得style屬性。如果Image禁用,其屬性為none或url( invalid-url:):


程序代碼
if (img.style.MozBinding != null)
{
img.style.backgroundImage = "url(" + document.location.protocol + "//0)";
var bg = window.getComputedStyle(img, '').backgroundImage;

if (bg != "none" && bg != "url(invalid-url:)" document.URL.substr(0, 2) == "fi")
{
document.enableStateScope("images-on", true);
}
}

另外一個富有挑戰性的瀏覽器是safari,如果請求是一個無效的URL,safari的狀態欄將出現錯誤提示,但頁面佈局不受任何影響。如果用戶的狀態欄處於開啟狀態,報錯將一直持續,這很不專業,同樣,作者研究了另外一種可行的方案。如果Image來自於1*1的gif圖像,且被數據編碼。如果Image禁用,其寬度將為0,以下為在safari中測試的情況:


程序代碼
else
{
img.style.cssText = "-webkit-opacity:0";
if (img.style.webkitOpacity == 0)
{
img.onload = function()
{
document.enableStateScope("images-on", img.width > 0);
}
img.src =
"data:image/gif;base64," +
"R0lGODlhAQABAIAAAP///wAAACH5BAE" +
"AAAAALAAAAAABAAEAAAICRAEAOw==";
}
}

最後,對於其它瀏覽器,在開始初始化Image對像時,僅僅需要測試onerror觸發事件。


程序代碼
else
{
img.onerror = function(e)
{
document.enableStateScope("images-on", true);
}
img.src = "about:blank";
}


狀態域是可以切換的

可以創建一個系統讓用戶在文本和替代圖像之間切換。

查看示例

class屬性添加到html之上而不是body或其它子元素之上,主要原因在於在圖像替換之前,body需要全面加載。如果「image-on」不添加到html之上。當狀態域啟用時,將會出現閃動。

圖像替換技術是css中相當重要的一部分。鑒於現存圖像替換技術的缺點,作者花大量時間另闢蹊徑,方法獨到,值得借鑒。

示例下載:tate-scope-image-replacement.zip
翻譯原文:http://www.denisdeng.com/?p=235
英文原文:http://www.sitepoint.com/article/image-replacement-state-scope/

文章來自BLUEIDEA
文章提供BAYSTARS DESIGN網頁設計公司

50個各種各樣的flash加載條

時間多被重複的勞動浪費掉,希望這些flash素材能夠幫助你節約一些時間!
3款精緻汽車儀表加載條
http://www.flashye.com/uploads/txdown/loading/yibiao/001.rar
http://www.flashye.com/uploads/txdown/loading/yibiao/002.rar
http://www.flashye.com/uploads/txdown/loading/yibiao/003.rar
6款隨鼠標移動的加載條
http://www.flashye.com/uploads/txdown/loading/shubiao/001.rar
http://www.flashye.com/uploads/txdown/loading/shubiao/002.rar
http://www.flashye.com/uploads/txdown/loading/shubiao/003.rar
http://www.flashye.com/uploads/txdown/loading/shubiao/004.rar
http://www.flashye.com/uploads/txdown/loading/shubiao/005.rar
12款創意flash加載條
http://www.flashye.com/uploads/txdown/loading/12/001.rar
http://www.flashye.com/uploads/txdown/loading/12/002.rar
http://www.flashye.com/uploads/txdown/loading/12/003.rar
http://www.flashye.com/uploads/txdown/loading/12/004.rar
http://www.flashye.com/uploads/txdown/loading/12/005.rar
http://www.flashye.com/uploads/txdown/loading/12/006.rar
http://www.flashye.com/uploads/txdown/loading/12/007.rar
http://www.flashye.com/uploads/txdown/loading/12/008.rar
http://www.flashye.com/uploads/txdown/loading/12/010.rar
http://www.flashye.com/uploads/txdown/loading/12/011.rar
http://www.flashye.com/uploads/txdown/loading/12/012.rar
26款常用圓形和長條形加載條
http://www.flashye.com/uploads/txdown/loading/yuan1/001.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/002.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/003.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/004.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/005.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/006.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/007.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/008.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/009.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/010.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/011.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/012.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/013.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/014.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/015.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/016.rar
http://www.flashye.com/uploads/txdown/loading/chang1/001.rar
http://www.flashye.com/uploads/txdown/loading/chang1/002.rar
http://www.flashye.com/uploads/txdown/loading/chang1/003.rar
http://www.flashye.com/uploads/txdown/loading/chang1/004.rar
http://www.flashye.com/uploads/txdown/loading/chang1/005.rar
http://www.flashye.com/uploads/txdown/loading/chang1/006.rar
http://www.flashye.com/uploads/txdown/loading/chang1/007.rar
http://www.flashye.com/uploads/txdown/loading/chang1/008.rar
http://www.flashye.com/uploads/txdown/loading/chang1/009.rar
http://www.flashye.com/uploads/txdown/loading/chang1/010.rar
以上所有flash原文地址...

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

網頁設計師必備--企業網站常用中英文對照表

設計師設計網頁經常會為了美觀,在頁面設計中加入許多英文元素~這個文章就將企業網站中經常會出現的菜單和欄目做了一個中英文對照和羅列~對那些英文不太好的設計師來說,是不錯的參考資料~-----------------------------------------------------------------------------------------------------------

門戶網站 portals website
網站導航 site map
公司簡介 profile / company profile / company
公司設備 equipment
公司榮譽 glories
企業文化 culture
產品展示 product
資質認證 quality certification
企業規模 scale
營銷網絡 sales network
組織機構 organization
合作加盟 join in cooperation
技術力量 technology
經理致辭 manager`s oration
發展歷程 development history
工程案例 engineering projects
業務範圍 business scope
分支機構 branches
供求信息 supply & demand
經營理念 operation principle
產品銷售 sales
聯繫我們 contact us
信息發佈 information
返回首頁 homepage
產品定購 order
分類瀏覽 browse by category
電子商務 e-business
公司實力 strength
版權所有 copy right
友情連結 hot link
應用領域 application fields
人力資源 human resource / hr
領導致辭 leader`s oration
企業資質 enterprise qualification
行業新聞 trade news
行業動態 trends
客戶留言 customer message
客戶服務 customer service
新聞動態 news & trends
公司名稱 company name
銷售熱線 sales hot-line
聯繫人 contact person
您的要求 your requirements
建設中 in construction
證書 certificate
地址 address / add
郵編 postal code zipcode
電話 tel
傳真 fax
產品名稱 product name
產品說明 description
價格 price
品牌 brand
規格 specification
尺寸 size
生產廠家 manufacuturer
型號 model
產品標號 item no.
技術指標 technique data
產品描述 description
產地 production place
銷售信息 sales information
用途 application
論壇 forum
在線訂購 on-line order
招商 enterprise-establishing
招標 bid inviting
綜述 general
業績 achievements
招聘 join us
求賢納士 join us
大事 great event
動態 trends
服務 service
投資 investment
行業 industry
規劃 programming
環境 environment
發送 delivery
提交 submit
重寫 reset
登錄 enter
註冊 login
某公司技術支持 powered by skydesign.cn(改成你自己的)
社區 community
業務介紹 business introduction
在線調查 online inquiry / inquiry
下載中心 download
會員登陸 member entrance
意見反饋 feedback
常見問題 FAQ / Frequently Asked Questions
中心概況 general profile
教育培訓 education & training
遊樂園 amusement park
在線交流 online communication

文章來自WOWBOX
文章提供BAYSTARS DESIGN網頁設計公司

2009年8月7日 星期五

網頁設計的甘苦談 (三)

夜市始祖
那時在美國的生活,真的很無聊
因為美國的商店,都在差不多8點前就打烊了,根本沒地方去
所以我晚上就去上藝術相關的研究所
那時的教授都是赫赫有名的(PLAYBOY的創意總監啊之類的),我在一個機緣跟a1的創意總監結識,我幾乎每天都混他家,因為他是pixel的專家,而他也是玩具總動員的創意製作, 我跟他幾乎無所不談,無論是網路或是設計,我們可以談到不睡覺也可以
那時我遇到了困境,也就是夜市通網站的規劃,他給我很多的建言,我當時就不知道要怎麼把台灣的傳統展現出來,而他就建議要不要用pixel試試,讓內容不死板,我就開始跟他學習有關pixel的設計了....
那時推出新版時我還不抱太大的希望,但是隔天莫名其妙的server掛掉,打電話到台灣的server公司詢問原因,原因是我的站已經爆表,太多人連進去了,我就在那時狠下心跟server廠商租了一整個來使用,當天我晚上衝到我的師父家謝謝他的教導,然後跟他研究怎麼進行下一步....(而他最近入股,他覺得夜市通是一個寶,也開始重起夜市通新版的規劃)
在那時雖然很多夜市網的出現,但夜市通還是在台灣是可稱為"夜市始祖"
(待續)
文章來自baystars design網頁設計公司