前不久，ColourLovers.com 公佈了一項調查結果。
他們發現，美國前100大網站的Logo，主要使用12種顏色。其中，採用藍色的網站最多，紅色排在第二種，黃色排在第三種。
我把這12種顏色的RGB代碼列出來，供將來自己做網頁時參考。
1. 淺綠 #8cc540
2. 深綠 #009f5d
3. 暗藍 #019fa0
4. 藍色 #019fde
5. 深藍 #007cdc
6. 深紫 #887ddd
7. 淺紫 #cd7bdd
8. 粉色 #ff5675
9. 紅色 #ff1244
10. 橙色 #ff8345
11. 黃色 #f8bd0b
12. 灰色 #d1d2d4
前一陣子，接到一個app切圖製作載入圓形進度條的任務，看到那個小進度條轉啊轉的，我若有所思…同時，一個做印象派製作間控制項設計的同學最近做了 改版，那個控制項登陸需要一些時間，看到他對loading載入條進行了優化，然後就一起交流了一下。作為一個剛畢業入行不久的新人，請允許我分享一下關於 討論loading載入後的一些心得…
這是一個浮躁的年代，長聽到這樣的抱怨“好慢！”“等到死！”，每次看到那個轉啊轉的圈圈，或者是那個“loading…”後面那三個點不停滴閃動，心裡總是有莫名的焦躁，彼時的心情就好像下面這張圖片一樣，不知您是否有同感…
有人統計，用戶能夠忍受的最長等待時間大約在 6～8秒之間。8秒是一個臨界值，如果網頁載入時間在8秒以上，很有可能大部分訪問者最終都會離開該頁面。除非他一定要打開那個頁面。
以上三種是常見的loading方式，如果是我，我更希望看到第三種的進度條，因為我實在不知道第一個圈圈要轉多久才能算載入成功，也不知道第二個點點點要點到猴年馬月。
但是如果這個時候，介面除了看到“載入”以 外的東西，是否就能轉移用戶的注意力呢？比如我們在銀行排隊的時候，如果我們無時不刻看著自己手中的號碼 牌和叫號板，雖然知道自己大概什麼時候會輪到，但是依舊會無聊和煩躁。這時候銀行裡的一些宣傳單起到了很好的作用：比如各種銀行的理財產品，如果你不小心 還看到了適合自己投資的，肯定會激動不已，覺得這個等待時間給自己帶來的意外的收穫，即使沒有得到自己想要的資訊，也不會覺得那麼無聊了。又比如視頻在緩 沖的過程中，總是會放一段廣告，我一直弱弱滴認為這個好雞肋，捨不得放棄看那個視頻，但又要忍耐這個載入時候的廣告。但是如果廣告做得很棒，就一點都不煩 躁了，甚至還在評論裡看到求載入廣告的地址。網頁的loading就承擔了宣傳單跟載入廣告的作用。
在頁面局部載入時常能看到第一個圈圈的身影，不過每次看到這個圈圈都差不多，如果換一種轉圈的形式，也許會覺得“這個圈圈跟別的好像不太一樣”，通過好奇減少等待的焦躁。
下面我找了一些變過形的圈圈，是不是多了一些新意呢？
減少用戶的焦慮，可以給個允諾，示意他們還要載入多久，告訴現在的進度（有個進程百分比），算給一個定心丸。例如以下的方式：
其中上圖最下面一種進度條又有不同的設計：
上面兩種確定性進度條雖然都提示了現在的進程，但它們的差別是，第一種的進度條內容是純色，第二種進度條內容有動畫效果，如果這個進度條再某點 上突 然停住了，這時候會給用戶造成困擾，到底是卡死了還是這段的載入比較慢呢？如果是下一種進度條就一目了然，如果卡死，那動畫效果就沒了，如果依然有動畫效 果，那就說明只是這一段載入比較緩慢。
如果進度條再進行一些變形，不僅告訴了使用者現在的載入進程，還別有一種欣賞的意味：
PS：上右是搜狗實驗室的logo，但是這個創意做成loading也很棒啊，還加強了品牌印象。
除了進度條變形外，還可以從文案下手，例如，下面的是“下廚房”的APP的載入頁，雖然只有短短的一句話“是誰來自山川湖海 卻囿於晝夜 廚房與愛”雖然只閃過短短一秒鐘，這非但沒給用戶帶來煩躁的感覺，反而覺得這個應用有一種特別的氣質，不僅加深了印象，更帶來了好感。
一般電影上映前都有一段預告片來吸引觀眾去觀影。顯露冰山一角，以此激起用戶的好奇心，也告訴了使用者大概情況。
上圖是QZONE的熱門應用遊戲——捕魚大亨的登陸頁，這個loading的 進度設計就像一個魚雷的行程，不僅告訴玩家現在載入到哪個進度，尾部的 小水花也似乎在說我一直在努力載入。另外，這個載入速度有點慢，上方還有場景圖介紹，以此讓玩家有更多的瞭解。這種快顯視窗展示放大圖片和多個視圖也是許 多頂級線上零售商所採用的方法。雖然載入有點慢，但是給玩家這樣一個暗示：這是非常值得的等待。
此外，如果要載入的東西比較多，那麼載入進度肯定會比較慢，呈現一種載入條一直滯留不動的情況，在這種情況下，我們可以把進度條分成多個進度條多次 載入以安撫用戶焦躁的心。但是每次載入最好都配有文字顯示現在在載入的內容，不然一次又一次的進度條會讓使用者恐慌“這到底要載入多少次才是個頭！”但是如 果像下面一樣，明確告訴使用者在載入的內容，就算使用者是有些煩躁“怎麼有這麼多要載入”但是每次都相對載入得比較快，而且每次載入都有理有據，讓用戶覺得這 個載入還是有必要的。
要減弱用戶的焦躁，“增強用戶的期待值”也不失為一種好方法，除了對本身網站的期待，還有對“進度條本身”的期待。
如果在不同的百分點上都會有不一樣的顏色，那麼用戶也許在等待的時候會想：下一秒會是什麼顏色呢，從而，好像也不是那麼急了。
這個小人的表情好豐富，但是似乎又代表了用戶的心情，看著他挪動並有不同的心理，就像在看一個好玩的gif。
這是印像派的新版製作間登陸，在等待的同時還告訴客戶有哪些產品可以使用到製作間，既傳達了品牌的資訊，也讓使用者在等待時不那麼枯燥。
此外，如果這個是多次登陸的網站，那麼不管捕魚大亨的場景展示，還是yxp的步驟流程展示，似乎這些展示只在第一次會起到比較特別的作用，但是如果每次都附帶給登陸者不同的資訊，那麼，使用者每次都有小驚喜，比如每次都隨機出現一些小提示（以下分別是四次loading）：
雖然載入是個小細節，但是也很有可能不經意間讓用戶流失。以上是我的一些小心得，雖然搜集的這些設計方式可以減緩一些使用者煩躁的等待情緒，但 是真正 可以減緩的辦法還是載入的速度增快；別致的設計可以治標，載入速度提高是治本。在載入頁中顯示進度，給出承諾，增加信息量或者幽默內容都能使使用者潛移默 化 減少“覺察”正在載入的時間。當然，煩躁是一種心情，載入是煩躁的導火索，但是如果每天保持好心情，那對待等待的耐心也會大大增加哦^.^
最後，送上一個可以生成載入圈圈的小工具，希望可以對您有幫助：
http://preloaders.net/en/circular
文章來自uedc
文章提供:: BAYSTARS DESIGN網頁設計公司
我們已經瞭解很多關於HTML5的技術了，很多人也開始在自己的專案中應用各種HTML5技術。這裡，Design Art Wall收 集了15個採用HTML5實現的網站，當然它們還有非常贊的介面設計，這些網站不僅在coding上，更在設計上能給我們更多的參考，當然，國內很多網站 僅僅是使用了HTML5的doctype而沒有真正的採用HTML5的語義化標籤和更多高級特性。嗯，是時候做更多的嘗試了。
當然，如果你做了或者見到了很棒的採用HTML5技術實現的中文網站，歡迎通過評論回饋給我們，多謝～～
文章來自前端
文章提供:: BAYSTARS DESIGN網頁設計公司
jQuery UI.Layout Plug-in對於前端網頁的操作非常有幫助，對於不是很懂CSS的人，很適合用來做後端的操作介面！
jQuery UI.Layout Plug-in 有幾點不錯的功能，比較好的部分整理如下：
collapsable：讓pane可以自由收合，也可以加上喜歡的jQuery特效
resizable：每pane都可以自由的縮放，當然也可以限制縮放的大小
hotkeys：這個選項可以讓pane利用鍵盤的方向鍵來控制，甚至自訂快速鍵
有更多進階範例請直接到demo網頁去看看。
部分內容來自這裡：jQuery的plugin，叫做UI.Layout
文章提供:: BAYSTARS DESIGN網頁設計公司
中文：Zen Coding: 一種快速編寫HTML/CSS代碼的方法
請尊重版權，轉載請注明來源！
在本文中我們將展示一種新的使用仿CSS選擇器的語法來快速開發HTML和CSS的方法。它由Sergey Chikuyonok開發。
你在寫HTML代碼(包括所有標籤、屬性、引用、大括弧等)上花費多少時間？如果你的編輯器有代碼提示功能，你編寫的時候就會容易些，但即便如此你還是要手動敲入很多代碼。
在JavaScript方面，當我們想要在一個頁面上獲取某個特定的元素時，我們就會遇到同樣的問題，我們必須寫很多代碼，這就變得難於維護和重 用。JavaScript框架應運而生，它們同時引入了CSS選擇器引擎。現在，你可以使用簡單的CSS運算式來獲取DOM元素，這相當酷。
但是，如果你不僅僅可以用CSS的選擇器佈局和定位元素，還能生成代碼會怎麼樣？比如，如果你這樣寫：
div#content>h1+p
…然後就可以看到這樣的輸出：
<div id="content">
<h1></h1>
<p></p>
</div>
有些迷惑吧？今天，我將向你介紹Zen Coding，一組用於快速HTML和CSS編碼的工具。最初由Vadim Makeev在2009年4月提出(文章為俄語)，由鄙人(也就是我)開發了數月並最終達到比較成熟的狀態。Zen Coding由兩個核心元件組成：一個縮寫擴展器(縮寫為像CSS一樣的選擇器)和上下文無關的HTML標籤對匹配器。看一下這個演示視頻來看一下它們能為你做些什麼。
注意：該視頻原版位於Vimeo，但是要看的話需要翻[和諧]牆先，位址在這裡：http://vimeo.com/7405114，上面的視頻是我費盡周折從Vimeo上下載下來上傳到優酷的，上傳後品質竟被大打折扣了，囧。youtube上也有一份視頻，是基於Aptana的演示，一樣很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和諧]牆容易些，不過如何翻[和諧]牆不在本站討論範圍。
如果你想跳轉到詳細介紹和使用指南，請看一下演示頁面並立刻下載你適用的外掛程式：
Demo
下載(完全支持)
下載(部分支援，只支援“展開縮寫”)
現在讓我們看一下這些工具是如何工作的吧。
展開縮寫
展開縮寫功能將類似CSS的選擇器轉換為XHTML代碼。術語“縮寫”可能會有點兒難以理解。為什麼不直接稱之為“CSS選擇器”呢？嗯，首要原因是語義化：“選擇器”意為選擇一些東西，但是在這裡我們事實上是生成 一些東西，是寫一個長代碼的較短的替代。其次，它只是使用真實的CSS選擇器語法的一個小的子集，並添加了一些新的操作符。
這裡是一個支援的屬性和操作符的清單：
正如你能看到的，你已經知道如何使用Zen Coding了：只是些一個簡單的仿CSS選擇器(呃，“縮寫”抱歉)，就像這樣…
div#header>img.logo+ul#nav>li*4>a
…然後調用”展開縮寫”行為。
這裡有兩個新增的操作符：元素倍增和條目編號。比如，如果你想生成5個<li>元素，你可以簡單的寫位li*5。它也將同樣重寫全部子 代元素。如果你想寫4個<li>元素，每個裡面都有一個<a>標籤，你就可以簡單的寫為li*4>a，這樣會生成以下 HTML代碼：
| 1
2 3 4 |
<li><a href=""></a></li>
<li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> |
最後一個——條目編號用於當你想用索引標記重複的元素的情況。假設你想生成class為item1、item2和item3的3個<div>元素。你可以寫成這樣的縮寫，div.item$*3:
| 1
2 3 |
<div></div>
<div></div> <div></div> |
只需在你想要索引出現的任何class或id屬性上添加一個美元符號即可，而且想要多少都可以。那麼，這樣…
div#i$-test.class$$$*5
會被轉換成為:
| 1
2 3 4 5 |
<div id="i1-test"></div>
<div id="i2-test"></div> <div id="i3-test"></div> <div id="i4-test"></div> <div id="i5-test"></div> |
你會看到，當你寫a的縮寫的時候，輸出是<a href=”"></a>。或者，如果你寫img，輸出就是<img src=”" alt=”" />。
Zen Coding是如何知道什麼時候應該為生成的標籤添加預設的屬性或者跳過關閉標籤的？有一個專門的檔，名為zen_settings.js描述了輸出元素。這是一個簡單的JSON檔，描述每種語言的縮寫(是的，你可以為不同的句法定義縮寫，比如HTML、XSL、CSS等)。通用的語言縮寫定義看起來就像這樣：
| 1
2 3 4 5 6 7 |
‘html’: { ‘snippets’: { ‘cc:ie6’: ‘<!–[if lte IE 6]>\n\t${child}|\n<![endif]–>’,
… }, ‘abbreviations’: { ‘a’: ‘<a href=""></a>’, ‘img’: ‘<img src="" alt="" />’, … } } |
元素類型
Zen Coding有兩個主要的元素類型：“片段(snippets)” 和 “縮寫(abbreviations)”。片 段就是隨意的代碼碎片，而縮寫是標籤定義。通過片段，你可以寫出你想要的任何代碼，它也會照你寫的格式輸出；但是你必須手動的格式化它(使用\n 和\t實現換行和縮進) 並將${child}變數放到你想要輸出子元素的地方，就像這樣：cc:ie6>style。如果你不使用${child}變數，子元素將會輸出於 代碼片段的後面。
有了縮寫，您必須編寫標記定義，而且語法是非常重要的。通常，你必須寫一個簡單的帶有所有預設的屬性的標籤，比如: <a href=”"></a>。當Zen Coding被載入後，它會解析一個標籤定義到一個描述該標籤的名字、屬性(包括它們的順序)以及該標籤是否為空的特定的物件中。所以，如果你 寫<img src=”" alt=”" />，你會告訴Zen Coding這個標籤必須是空的，然後“擴展縮寫”行為就會在輸出之前為它使用特定的規則。
對於片段和縮寫，你可以添加一個管道符號，它告訴Zen Coding當縮寫被展開的時候游標會被定位到哪裡。預設的，Zen Coding 將游標放在空屬性的引號中間以及開始和關閉標籤的中間。
例子
那麼，這裡解釋一下當你寫了一個縮寫並召喚“展開縮寫”行動時發生的事情。首先，它將一個完整的縮寫分開為獨立的元素：這樣div>a 會被分成div 和a 元素，當然也會維持他們的關係。然後，每個元素，解析器先在代碼片段內而後在縮寫中尋找定義。如果它找不到，將會使用元素的名字作為新的標籤，並為其添加 縮寫中定義的id和class。比如，如果你寫mytag#example，解析器在片段或縮寫中找不到mytag定義，它就會輸出<mytag id=”example”><mytag>。
我們製作了很多默認的CSS和HTML縮寫和片段。你會發現學習使用Zen Coding可以增加你的生產力。
HTML 標籤對匹配器
對於HTML編碼者的另一個非常常見的任務是尋找一個元素的標籤對。例如你想選擇整個<div id=”content”>標籤並將其移動到其它地方或者刪除它。或者有可能你在尋找一個關閉標籤並想知道它屬於那個開始標籤。
不幸的是，很多現代開發工具在該功能方面有所欠缺。那麼我就決定寫一個我自己的標籤對匹配器作為Zen Coding的一部分。不過它依然在beta階段並尚存一些問題，但它可以工作的很不錯並很快。不是流覽整個文檔(像通常的那種HTML標籤對匹配器的做 法)，它從游標的當前位置開始尋找相關的標籤。這使得它非常快並且上下文無關：它甚至可以用於這段JavaScript代碼片段：
| 1
2 3 4 5 6 7 |
var table = ‘<table>’; for (var i = 0; i < 3; i++) {
table += ‘<tr>’; for (var j = 0; j < 5; j++) { table += ‘<td>’ + j + ‘</td>’; } table += ‘</tr>’; } table += ‘</table>’; |
使用縮寫包裹
這真的是一個很酷的特性，它將縮寫和標籤對匹配器的功能合併到一起了。你有多少才發現你需要添加一個包裹元素以修正一個流覽器bug？或者你需要添加一個裝飾，比如一個背景圖片或者邊框到一個塊級內容？你必須寫開始標籤，臨時打斷你的代碼，找到相關的點然後關閉標籤。這就是“使用縮寫包裹”能幫助你的地方。
該功能相當簡單：它要求你輸入縮寫，然後執行適當的“展開縮寫”行動並將你期望的文本放到你縮寫的最後一個元素裡面。如果你沒有選擇任何文本，它就會啟動標籤對匹配器並使用結果。它同樣能搞清楚你的游標的位置：標籤的內容裡面或者是開始和關閉標籤中間。依賴於它的位置，它會包裹標籤的內容或標籤本身。
縮寫包裹為包裹個別行引入了一個特定的縮寫句法。簡單跳轉到倍增操作符後面的數字，比如：ul#nav>li*>a。當Zen Coding 發現一個使用未定義的倍增數的時候，它會將它作為一個重複元素：你的章節中有多少行，它就會輸出多少次，並將每行的內容放到重複元素的最後一個子元素裡面。
如果你在這段文本外面包裹這段縮寫div#header>ul#navigation>li.item$*>a>span：
| 1
2 3 4 5 |
About Us
Products News Blog Contact Up |
你將會得到以下結果：
| 1
2 3 4 5 6 7 8 9 |
<div id="header">
<ul id="navigation"> <li><a href=""><span>About Us</span></a></li> <li><a href=""><span>Products</span></a></li> <li><a href=""><span>News</span></a></li> <li><a href=""><span>Blog</span></a></li> <li><a href=""><span>Contact Up</span></a></li> </ul> </div> |
你可以看到，Zen Coding是一個強大的文本處理工具。
快速鍵
這些快速鍵是可以自訂的。
線上演示
你已經學到很多關於Zen Coding如何工作以及它是如何使你的編碼更容易了。現在為什麼不自己嘗試一下呢？因為Zen Coding是用純JavaScript開發並遷移到Python，它甚至可以用於流覽器內部，這令它成為引入到CMS的首選。
支援的編輯器
Zen Coding並不依賴某個特定的編輯器。它是一個隻處理文本的出色的元件：它獲取文本、做一些處理並放回新的文本(或索引，用於標籤匹配)。Zen Coding由JavaScript和Python編寫，所以它實際上可以運行於任何平臺。在Windows，你可以運行JavaScript版本，而 Mac和Linux 分支可以使用Python版。
如果讓你的編輯器支援Zen Coding，你需要寫一個特定的可以在你的編輯器和Zen Coding之間轉換資料的外掛程式。問題是一個編輯器可能不會完整的支持Zen Coding因為它本身的外掛程式系統。比如，TextMate通過使用腳本輸出替換當前行很容的就支援了“展開縮寫”功能，但是它不能處理標籤對匹配因為沒有標準的方法請求TextMate來選擇內容。
完全支持
部分支援(只支援“展開縮寫”)
Aptana是我主要的開發環境，它使用一個JavaScript版本的Zen Coding。它也包含很多其它的我用於日常工作的工具，所以任何一個新的Zen Coding版本都將會首先對Aptana可用，然後部署到Python並相容其它的編輯器。
Coda和Espresso 外掛程式被傑出的Text Editor Actions (TEA) 平臺支援，由Ian Beck開發。原始的原始程式碼在GitHub上，但我還是製作了我自己的分支以整合Zen Coding的特性。
總結
很多嘗試過Zen Coding的人都說它改變了他們寫頁面的方式。當然還有很多事情要做，還有很多的編輯器需要被支援以及一些文檔要寫。請流覽現在的文檔 以及原始程式碼以尋找你的問題的答案。希望你喜歡Zen Coding!
附：Zen coding的具體用法
遺憾的是， 本文原作者並沒有說明zen coding的具體用法，神飛認為有必要做以下簡要的說明。這裡就以Aptana/Eclipse和Dreamweaver為例，其它編輯器平臺暫不描述，如有疑問可以在評論中與前端觀察的網友交流。
Aptana/Eclipse
由於Aptana本身就是基於Eclipse的，所以，Zen Coding也是支援Eclipse的，只是需要一個EclipseMonkey外掛程式的支援，Aptana已經封裝了這個外掛程式，所以如果你使用Aptana，下面的第一步可以跳過。
注意事項：
DreamWeaver
好消息是，現在已經有了Zen coding for DreamWeaver外掛程式，壞消息是，該外掛程式支援的功能很少，只支援展開縮寫功能。而且默認的快速鍵是無效的。只能在“命令”功能表中點擊操作。另外，沒 有測試該外掛程式是不是只支援CS4版本。不過比較好的是，作者將本外掛程式的源碼也放出了，你可以自訂一個Dreamweaver的外掛程式。
文章來自前端
文章提供:: BAYSTARS DESIGN網頁設計公司
提供一個 HTML 語法小技巧，若您有以前設計的舊網頁在 IE8 顯示上有不正常的情況時，或者是為了考慮各瀏覽器相容性問題時，其實您可以使用 Expression Web 開啟網頁，切換到網頁的 <head> 與 <head> 之間，輸入下述 meta 標籤語法，即可讓使用 IE8 瀏覽器瀏覽網頁時，自動預設以 IE7 解析模式運行，語法為：
程序代碼
如果您網頁上有使用此語法，原本在 IE8 瀏覽器上會有的「相容性檢視」按鈕會隱藏起來，而只以 IE7 解析模式觀看此網頁。不過筆者還是要建議您，若是開發全新網站的網頁時，盡量還是以 IE8 為主要瀏覽測試環境，畢竟這還是未來的趨勢主流。
文章來自WOW
文章提供:: BAYSTARS DESIGN網頁設計公司
目 前用手機上網的人越來越多了！總不能為了手機專門設置一個網站吧！？最好的方式是知道使用者使用何種裝置上網，自動切換到適合網頁去！其實這需要透過 Server端的程式來作一點小判斷，就可以作到自動的切換，這邊整理一下手邊的資料， 分別針對PHP與ASPX作介紹。
PHP版本判斷：
程序代碼if(preg_match(‘/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i’, strtolower($_SERVER[‘HTTP_USER_AGENT’]))) {
$mobile_browser++;
}
if((strpos(strtolower($_SERVER[‘HTTP_ACCEPT’]),’application/vnd.wap.xhtml+xml’)>0) or ((isset($_SERVER[‘HTTP_X_WAP_PROFILE’]) or isset($_SERVER[‘HTTP_PROFILE’])))) {
$mobile_browser++;
}
$mobile_ua = strtolower(substr($_SERVER[‘HTTP_USER_AGENT’],0,4));
$mobile_agents = array(
‘w3c ‘,’acs-‘,’alav’,’alca’,’amoi’,’audi’,’avan’,’benq’,’bird’,’blac’,
‘blaz’,’brew’,’cell’,’cldc’,’cmd-‘,’dang’,’doco’,’eric’,’hipt’,’inno’,
‘ipaq’,’java’,’jigs’,’kddi’,’keji’,’leno’,’lg-c’,’lg-d’,’lg-g’,’lge-‘,
‘maui’,’maxo’,’midp’,’mits’,’mmef’,’mobi’,’mot-‘,’moto’,’mwbp’,’nec-‘,
‘newt’,’noki’,’oper’,’palm’,’pana’,’pant’,’phil’,’play’,’port’,’prox’,
‘qwap’,’sage’,’sams’,’sany’,’sch-‘,’sec-‘,’send’,’seri’,’sgh-‘,’shar’,
‘sie-‘,’siem’,’smal’,’smar’,’sony’,’sph-‘,’symb’,’t-mo’,’teli’,’tim-‘,
‘tosh’,’tsm-‘,’upg1′,’upsi’,’vk-v’,’voda’,’wap-‘,’wapa’,’wapi’,’wapp’,
‘wapr’,’webc’,’winw’,’winw’,’xda’,’xda-‘,’Googlebot-Mobile’);
if(in_array($mobile_ua,$mobile_agents)) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER[‘ALL_HTTP’]),’OperaMini’)>0) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER[‘HTTP_USER_AGENT’]),’windows’)>0) {
$mobile_browser=0;
}
if($mobile_browser>0) {
header(“Location: mobile.php"); //手機版
}else {
header(“Location: pc.php"); //電腦版
}
ASPX版本判斷：
程序代碼範例檔案下載…
解壓縮密碼：www.wowbox.com.tw
文章來自WOW
文章提供:: BAYSTARS DESIGN網頁設計公司
網 頁自動切換合適的網頁後，接下來就是要開始來製作手機版的網頁囉！手機或是電腦的網頁看起來是相同，只要電腦版能正常運作，在手機上應該都可正常預覽，如 果要專門讓手機來瀏覽時，這時就有點不太相同了，除了版面要另外設計外，還有一個相當重要的東西，那就是HTML檔頭的宣告，一般在設計網頁時，上面所宣 告的是給電腦版使用，目前大多使用XHTML的設定，若用此宣告放到手機版時，則會發現到怎網頁的版面都縮小，這是由於手機內建的瀏覽器，當網頁為電腦版 就會把版面撐到980像素，所以當要開始製作手機版網頁時，首先要做就是檔頭的宣告，這樣網頁在手機下，才能正常顯示手機版的尺寸大小。
宣告的部分有二種方式，一種是加在html上，另一種是加在<head>~</head>之間，二者取其一就行了，若要二邊都加的話也可以。
第一種方法、加在<html>上方：
程序代碼第二種方法、加在<head>~</head>之間：
程序代碼完成這些動作後，再用手機瀏覽看看，這時版面就不會縮起來，就會依照手機的顯示尺寸，只要一個小動作卻有１８０度的大不同！要不然忌諱做出怪怪的手機專屬網頁喔！
文章提供:: BAYSTARS DESIGN網頁設計公司
PPT：Taming CSS Selectors
作者：Nicole Sullivan
CSS 文件的大小和所引起的 HTTP 的請求數
是 CSS 性能的最關鍵因素
回流(reflow)和渲染時間
(非常！)沒那麼重要
副本(duplication)比陳舊的規則(stale rules)更糟糕
因為我們有工具處理後者
定義缺省值
不要在每處都重複編碼
不好的：
程序代碼推薦：
程序代碼用單獨的 class 來定義結構
不要在每處都重複編碼
使用 class
而不是元素選擇器
不好的：
程序代碼推薦：
程序代碼避免使用元素選擇器
初始化除外
不好的：
程序代碼推薦：
程序代碼給規則同樣的權重
使用級聯去重寫先前的規則
不好的：
程序代碼推薦：
程序代碼保守的使用 hack
不好的：
程序代碼推薦：
程序代碼註： 此點來自 The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009 第96P，為作者在 Ajax Experience 2009 上所做的補充。
避免指定位置
應用 class 在你想要改變的對象上
不好的：
程序代碼推薦：
程序代碼避免太過特別的 class
它們是都有語義的，而且有限制
不好的：
程序代碼推薦：
程序代碼避免單獨的定義
id 在每個頁面只能使用一次
不好的：
程序代碼混合使用
避免重複編碼
封裝
不要直接訪問對象的子節點
不好的：
程序代碼推薦：
程序代碼譯文原文：點這裡…
文章提供:: BAYSTARS DESIGN網頁設計公司
工作中，網頁設計師經常會遇見這些狀況：時間這麼短又要出彩、又是要大氣要有氣氛、風格不明確很難把握、欄目這麼多頁面又這麼長……
突然覺得束手無策，腦袋裡一片空白，沒想法了，怎麼辦？
下面簡淺的歸納了幾個快速讓頁面出彩的小技巧：
1.旋轉法 – 將頁面的主體或局部進行旋轉
我們一般的頁面版式都是方方正正，四平八穩，有點呆板。如果將局部或整體適當的旋轉，打破穩定的構圖，畫面就會動感有趣一些。
對於上圖，這種基調輕鬆活潑又恰好內容比較少的頁面來說，主體整個旋轉後，畫面馬上輕鬆活潑起來，看過現在這個畫面，真是無法想像未旋轉前的平淡。同時，相比大塊的方形空白，不規則的余白也不會顯得空洞。
上圖，將背景旋轉後，大面積的斜面產生了很強的速度感，賽車急速飛馳著，好像下一秒就要從電腦中衝出來一樣，傾斜的大標題和旋轉後的背景交叉配合，使畫面整個都運動起來。這種方法可以應用到很多運動的主題上。
2.黃金分割法 – 靈活運用黃金比例分割的辦法將頁面「切」開
黃金比率被認為是最理想的矩形比例，在過去的文化遺產中也有很多這樣的遺存。將這個比率應用到版式設計中，也能夠設計出容易為用戶所喜歡的構圖。但不要被這些比例所束縛，很多是靠自己的感覺去應用。
上圖，除去背景無非就是一個排版清晰的頁面，將背景分割後，對比的色塊使畫面產生縱深感，頁面的豐富性和視覺衝擊力迅速增強。人物也好像著陸了一樣，平穩的站在畫面中。
上圖，用反差強烈的色塊進行分割，強調了版塊的劃分，即使有很多地方需要強調，也能讓用戶迅速清楚各版塊的重點，不用像以往一樣1、2、3…… 將內容依次豎排下來，鼠標都已經拖到第三屏了還沒完沒了，又沒什麼新鮮感。
3.曲線法 – 將曲線用於背景或版塊分割，消除矩形分割的生硬感。
與直線相比，曲線具有圓潤的特點，讓人感覺輕鬆、愉悅。增強視覺感的同時也能夠營造活躍的氣氛。
上圖中，大眾的logo和焦點圖中的機器人產品，全部由曲線組成，這種情況下，用曲線來分割背景和焦點就顯得理所當然了，畫面中曲線合理的運用也提高了層次感，機器人和紅色標題都更突出。
仿照球的運動軌跡，貫穿著整個頁面的曲線，將用戶直觀的帶入了正在激烈進行的棒球比賽現場。看似隨意，其實用曲線精當的將標題、焦點圖和新聞等版塊按重點進行了不同比例的分割。
4.借用法 – 借用現實中的東西，將實物抽像化，提煉出大形輪廓用於背景
現實中的東西也可以應用到網頁設計中？當然可以，只要想的到。
如圖，信封是我們生活中常用的東西，如此生活化的東西借用到網頁上，展開在用戶面前，好像郵寄給您的信一樣，立馬讓人眼前一亮，親切感油然而生。作為遊戲活動的通告頁，用白色的信紙來盛放主體內容也再合適不過。
上圖，將賽車在賽道上疾馳的場面置放到頁面上作為背景，虛化的大城市，放大的賽道，飛奔的賽車……就像此刻坐在電腦前玩賽車，左手正緊緊按著W、A、S、D鍵一樣。讓用戶身臨其境，完全抓住了對方眼球。
以此類推，生活中很多東西都可以借用，例如:寫滿粉筆字的黑板、電腦的屏幕、寫日記的本子、老古董的地圖，空曠的足球場……
5.三角拼貼法 – 像做手工一樣，將裁剪好的三角形打亂，重新拼貼
不同的幾何形狀有不同的性格，圓形是活潑可愛的，方形是平穩整齊的，三角形就是尖銳動感的。
三角形的不平衡性及其尖銳性能夠增強視覺上的刺激，快速吸引用戶，可以用於科技和時尚這種風格同樣比較「鋒利」的網頁。
上圖，將同色系小三角形均勻的拼貼起來，馬上就營造出一種鑽石璀璨般的時尚感。但實踐的時候要注意加減法，不能亂堆一通，點到為止即可。
上圖，用艷麗的三角形對頁面進行劃分、拼貼。大小的組合，色塊的對比，能夠帶給用戶強烈的視覺衝擊力。在搭配的時候，注意主次，以一個大的形狀為主，給內容擺放留下足夠空間，與其他輔助的小形狀相區別。
6.色塊分割法 – 將各版塊用不同顏色來區別
經常面對需求方這裡是重點、那也是重點、那那那也挺重要，統統需要突出的要求，對於主題比較明快的頁面 可以考慮將版塊用不同顏色來區別，通過色塊來強化頁面版式和佈局，難度較大的是在色彩搭配上要取得平衡。
上圖，版式在頁面都以塊來體現，沒有什麼效果，為了突出重點，在重要區域選擇了飽和度較高的紅黃綠三個顏色，產生明確的視覺中心，讓用戶能夠按照我們希望的那樣閱讀下去。但對比色調容易造成不和諧，紅黃綠之間加上灰底的中性色來調和一下就顯得不會突兀了。
當使用四到五種純色進行搭配的時候，注意只要色相、純度、明度三個屬性中有一個屬性是基本相同或者接近，搭配起來基本上都不會覺得太牽強。
以上幾個小技巧可以在情況緊急時參考，大家也可以用類似的方法總結出更多的小技巧自用。
原文：看這裡…
文章來自:: ued163
文章提供:: BAYSTARS DESIGN網頁設計公司
Baystars Design網頁設計公司 
近期迴響