Web > App 

Jeff Chan

• 背景的移動比使用者滾動的速度慢
• 一個介面內同時有幾個背景圖案，每個背景可以有獨自的滾動速度

Jeff Chan

• 有播放／暫停鍵
• 上一頁／下一頁鍵
• 檔案只有4kb，非常便與使用
• 一共有4個主題
• 可用於個人或商業用途

Jeff Chan

• PNG
• JPEG
• GIF

Jeff Chan

• 水平滾動
• 斜角滾動
• 360度旋轉
• 由下而上滾動

Jeff Chan

• 何露斯(古代埃及的太陽神)的眼睛
• 聖甲蟲（古埃及人奉為神聖的甲蟲）
• Ankh符號　(源於埃及,是一個類似T 字型的十字架，有生命的意思。)

Jeff Chan

• 一步一步地教你設定
• 精美的表格設計
• 款式多
• 有效的html/css編碼
• 100%免費
• 良好的SEO

Jeff Chan

• iPhone
• Casey Anthony
• Kim Kardashian
• Katy Perry
• Jennifer Lopez
• Lindsay Lohan
• American Idol
• Jennifer Aniston
• Japan earthquake
• Osama bin Laden

• iPhone 5
• Powerball
• MLB
• Scrabble cheat
• Casey Anthony
• Hurricane Irene 2011
• Kim Kardashian
• Translator
• Amy Winehouse
• May 21, 2011 Rapture

Jeff Chan

• thumbnails方式瀏覽圖片
• 上一頁／下一頁
• 投影片播放
• 你還可以在圖片上附件標題與說明

Jeff Chan

• jQuery v1.2.3或以上
• 建議你用最新版本的jQuery

Jeff Chan

• 左/右: 用translate(x, y) 或者 translate3d(x, y, z)
• 上/下: 用translate(x, y) 或者 translate3d(x, y, z)
• 不透明
• 長/寬

• 有jQuery快捷鍵(如:快/慢)
• 支援$.fn.stop([clearQueue, jumpToEnd, leaveTransforms])
• 可兼容.fadeIn(), .fadeOut(), .slideUp(), .slideDown() and slideToggle()
• 最新版本v0.75解決了不少舊版本中出現的漏洞

Jeff Chan

• 一直顯示警告信息，直至網頁設計師移動滑鼠
• 成功的信息會一直彈出，直至網頁設計師點確定鍵
• 可以設定信息出現後多久便會消失

Jeff Chan

• 查看你的HTML編碼
• 透過它可以更改網頁內容，風格，編碼屬性
• 檢視網頁瀏覽情況
• 查看JavaScript編碼
• 查看數據庫，本地存儲量

Jeff Chan

• 可以設定播放效果
• 上下左右翻頁
• 斜向翻頁
• 設定投影片的背景圖案
• 用AJAX載入內容
• 用jQuery Easing 插件設定個性化翻頁效果

• 自動翻頁系統
• 可設定開始/暫定播放
• 工具提示

Jeff Chan

1. 可插入HTML
2. 設定播放速度與播放效果
3. 向上/下/左/右滾動或翻頁
4. 隨機展示效果
5. 更容易使用
6. 清除了之前發現的漏洞
7. 免費提供給網頁設計師使用

Jeff Chan

1. 十分簡單易用
2. 適合初學者
3. 支援大部分瀏覽器
4. 同時可以設計橫向／直向滾動
5. 支援Callback API
6. 硬體加速滾動
7. 可供網頁設計師免費使用

Jeff Chan

• 更人性化的介面，令網頁設計師更容易使用
• 支援多種介面主題
• 新增，編輯或刪除表格

• 可用來編輯SQL
• 同時編輯多個數據
• 匯出整個數據庫或圖表為sql，xml， html，txt檔

Jeff Chan

• © HTML
• \u00A9 Java/C/Python

• ® HTML
• \u00AE Java/C/Python

 

• ™ HTML
• \u0099 Java/C/Python

Jeff Chan

• all browsers over 960px
• iPad or other tablet Portrait (728px)
• iPhone or mobile Portrait (300px)
• iPhone or mobile Lanscape (420px)

Jeff Chan

<link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="jquery.ticker.js" type="text/javascript"></script>

<ul id="js-news" class="js-hidden">
<li class="news-item"><a href="#">第一則新聞</a></li>
<li class="news-item"><a href="#">第二則新聞</a></li>
<li class="news-item"><a href="#">第三則新聞</a></li>
<li class="news-item"><a href="#">第四則新聞</a></li>
</ul>

<script type="text/javascript">
$(function () {
$('#js-news').ticker();
});
</script>

jQuery支援

瀏覽器支援

Jeff Chan

其他的新功能包括︰

1. 前進按鈕(Forward Button)只會在按退後按鈕(Back Button)後才出現
2. 大部份的Add On會跟新版Firefox顯示為相容
3. WebGL的除鋸齒功能
4. HTML5的<bdi>支援
5. 開發人員檢測工具包含新的CSS檢示器

Jeff Chan

Traits(特徵)

內建網頁伺服器

廢除magic quote

Jeff Chan

HTML:

Javascript:

Jeff Chan

Native App: 他朝君體也相同？

Jeff Chan

<script src="jquery.js"></script>
<script src="js/jquery_notification_v.1.js"> </script>
<link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/>

Jeff Chan

insertAdjacentHTML支援

加強CSS hyphen的支援

Jeff Chan

jQuery(document).bind('keydown', 'esc', function (evt) {
  alert('You cannot escape!'); return false;
});

瀏覽器支援

jQuery支援

Jeff Chan

重大更新

1. 新事件API: .on() 及 .off()
2. Delegate事件效能提升，根據jQuery的數據，1.7版本比1.6.3快了一倍
3. 增強在ie6/7/8的html5支援
4. 修正動畫系列的toggle
5. Asynchronous Module Definition(AMD)
6. jQuery.Deferred
7. jQuery.isNumeric()

Jeff Chan

$('h1').waypoint(function() {
  alert('h1 is here!');
});

瀏覽器支援

jQuery支援

Jeff Chan

B2B B2C 行銷目的取向迴異

SEO 最有效帶來新客源

社交媒體平台選擇

有人氣又是否代表有生意？

2012 年行銷預算

Jeff Chan

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

在css設定正常的闊度1024px，然後再利用css的media query去處理橫放的iPad，css如下︰

/*normal styles here */
#wrap {
  width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
  #wrap {
    width:768px;
  }
}

簡直精彩﹗完全不需要Javascript﹗不過這個作法只在iPad有效，要真正兩者兼容，筆者暫時只懂得javascript的做法，詳情作法下次再談。

Jeff Chan

瀏覽器支援︰

(原作者沒有特別說明，筆者只簡單測試以下瀏覽器)
IE 7+
Firefox 3+
Safari 4+ (non-iOS)
Chrome 4+

版權宣告︰

MIT和GPL

詳細的使用方法及示範可到Color Picker一看

 

Jeff Chan

2012春季女性系列的十大顏色:

2012春季男性系列的十大顏色:

Jeff Chan

藍色

調查指出藍色能提升生產力，而且代表了一種嚴肅和務實的態度。如果你想塑造一種實事求是和專業的感覺，你可以選擇籃色作為網頁設計的主色。深藍色一般都比較嚴肅，淡藍色則比較休閒。

綠色

另一個“生產”顏色，綠色可以提供一個專業的感覺。相比藍色來說，綠色比較輕鬆。這是一個介乎休閒和工作的感覺，不會讓人死氣沉沉。綠色是比較多深淺可使用的顏色，你可以按個人業務去選擇。跟藍色一樣，深綠色比淺綠色來得嚴肅。

黑白色

黑色和白色是流行的商業色彩。它們既簡單又容易變化，基本上能夠配合其他任何顏色。你可以在保持主題一致的情況下，很容易地改變網站外觀。黑色和白色會很單調，選擇一種充滿活力的顏色去配合就可以使網站更加活潑有趣。

紅色

紅色是相對新的公司網頁設計顏色，使用的難度較大。這種顏色喚起力量和衝刺的感覺，一個發展中公司需要的東西。然而，紅色可能會表現得太強，應小心使用。由於使用難度高，設計師可以不用它為主色，而只在圖標(Icon)和商標(Logo)中使用。

Jeff Chan

1. Apache
2. ASP.NET
3. ColdFusion
4. C#
5. IIS
6. JSP
7. JavaScript
8. jQuery
9. nginx
10. node.js
11. PHP
12. Perl
13. Python
14. Rails

Jeff Chan

1. default wall
2. wireframe wall
3. default tab
4. wireframe tab

無論商業或個人使用都是免費的，有關詳情可看readme.txt。

有興趣可以到Facebook Fan Page GUI PSD下載。

Jeff Chan

追趕潮流

這是一個簡單的公式，青少年網站的就是要追趕潮流，現在時興什麼，就用什麼。若果你的網頁設計風格還是2008年的話，你註定會被年輕人遺棄﹗所以好好研究一下最新的潮流是怎樣，再應用在你的網頁上。
 

有價值的內容

這基本上適用於所有網站，但對十多歲的年輕人市場尤其重要。青少年的頭腦特別快速，古舊沉悶的東西會很快把他們趕走。儘量使用簡單流暢的詞語，不要使用艱深的用詞，除非你的網站是一些技術性網站。

利用鮮艷的顏色

雖然他們都不會承認這一點，但大多數青少年仍然喜好鮮艷的顏色。嘗試用紅色﹑粉紅色﹑藍色或黃色去配合黑色或灰色的背景。使用好像iPod海報那些剪影圖形，這類風格是年輕人喜歡的。

定期更新

調查指出青少年至少每三天便會檢查他們最喜愛的網站。如果沒有看到任何新的東西，他們很大可能不會再來。事實上，青少年網站的更新速度都特別快，你必須不斷更新，讓他們不停回來查看新的內容。即使只是顏色改變或短的博客文章，總之你必需不斷令他們覺得有新鮮感。

Jeff Chan

確保網頁載入速度快

首先，當你嘗試令你網站成功，你需要確保該網頁載入速度快。你只有一個很短的時間去留住訪問者。如果你需要很長的時間來載入一個網頁，很大機會你將會失去一個觀眾。儘量使用少數圖像以保持它能在短時間載入，保持網頁小於30KB。此外，確保你的HTML沒有錯誤。
 

不要單純地顯示一些圖片

有人認為建立一個網頁只需把一些圖片放上頭版。事實並非如此。只有圖形或flash短片的網頁最終不會在搜索引擎中得到好的排名。確保你的網頁有更多東西給你的訪客和搜索引擎。

你要有充足的內容

對一個網頁來說，內容將是最重要的。你需要提供一些良好內容的頁面，你可以添加關於你產品的其他訊息，或者簡單地展示產品圖片和資料。最後確保你的內容包括了搜索引擎喜歡的關鍵字，以我們來說，最多人搜索的就是"網頁設計"這四個字。

添加標題和副標題

你需要在網頁中添加標題和副標題，一大堆內容不是一個好的選擇，因為它們看起來非常嚇人。使用簡短的段落，並使用標題和副標題把他們分隔開。這會使你的文字更具可讀性。

不要使用彈出窗口(Popup)

千萬不要在頭版彈出窗口，因為這是在訪問你的網頁時特別令人討厭。事實上，無論你的網頁設計有多厲害，大多數人會因此立刻離開你的主頁，頭也不回跑到另一個網站。如果可以的話，你應該完全避免使用彈出窗口，因為大多數瀏覽器都會阻止窗口彈出，你的彈出窗口根本不能被看到。

Jeff Chan

常見錯誤

除了圖片，兩種最常見的形式包括動畫和PDF文件。Flash動畫是一個可以令人印象深刻的網頁設計，但同時會傷害一個網站的搜索引擎優化友好度，即使你重復整個動畫，搜索引擎也沒有辦法可以找到適當的關鍵字。若果你真的需要動畫，可以考慮HTML5動畫(HTML5 iPhone Animation Website)，這亦可令動畫在蘋果裝置上運行無阻。

PDF文件不是完全不能搜索，但它們不太可能像HTML那麼容易。主要原因在於它們不是在網站HTML的結構中，它們只是用戶能夠訪問的單獨文件。因為與PDF的代碼不同，搜索引擎讀取HTML比其他語言容易。同樣的情況發生在Word和PowerPoint的文件。
 

簡單解決辦法

一個簡單解決辦法就是利用元標(Meta Tag)，元標出現在代碼頂部，能夠告訴搜索引擎你的網站是關於那些關鍵字，從而便利搜索引擎蜘蛛(Search Engine Spider)。當然，最好還是簡單轉用HTML。

Jeff Chan

定期更新

經常更新的網站可以在搜索引擎中排名更高。大部份搜尋引擎，特別是GOOGLE，都會更加頻繁地索引經常更新的網站。這有助於用戶得到更緊貼現況的最新信息，所以如果你在提升網站排名，務必經常更新。
 

Meta標籤

Meta標籤是HTML代碼中用來跟搜索引擎溝通的元素。它們會告訴搜索引擎蜘蛛你的網站有什麼關鍵字，然後直接影響到網站流量。你可以查看排名第一的網站的源代碼，檢查其Meta標籤，看看他們使用的關鍵字。
 

中段導航

當你有很長的文章，一定要加一個“返回頁首”的連結，這樣用戶便不用慢慢的滾動回頁首了。這個錯誤是所謂的“死胡同”，把用戶留在一個沒有內容及瀏覽提示的環境。儘量確保每一刻都可以令用戶繼續瀏覽，不要把他們趕走。
 

連結的顏色

CSS可以讓你改變連結的顏色，包括已訪問和正觀看的連結。但研究指出這樣做只會困擾你的訪客。大多數用戶只習慣一般的紅色和藍色，所以即使與你的其他顏色發生衝突，盡可能保持接近這兩個顏色。
 

自動裝入多媒體檔案

有沒有試過去到一個網站突然發出響亮的音頻或視頻？這些網站都屬於最不受歡迎的網站。如果你必須把多媒體放在頁面上，做一個播放按鈕，讓有興趣的人點擊它，不要強制播放，那是非常擾人的﹗

Jeff Chan

方便搜尋

相信沒有什麼比這個理由更必要。我們大部份的客戶都是要求我們替其設計公司網頁或產品網頁，說到底最重要還是作宣傳之用。試問一個設計精美但沒有人瀏覽的網站有什麼用途呢？在這個搜尋器(Search Engine)被海量使用的年代，一個能夠站在Google或Yahoo首頁的網站比一個電視廣告相信還有價值。假如正確使用CSS的話，內容跟構圖本質上分開，網頁較容易被搜尋器索引，這樣能有效幫助提升在搜尋器的排名。有什麼比這個更吸引？

方便修改

你可能會覺得自己又不是網頁設計人員，方便修改跟你有什麼關係。當然有關係﹗雖然CSS十分難學習，應用時更加麻煩多多，但只要能夠充份明白理解的話，維護修改一個網站比表格網站來得方便容易，用表格來構圖的話，假如客人有少許的位置修改，大抵跟重新製作沒多大分別，而這亦是大部份網頁公司非常抗拒修改的原因。在CSS還沒有成熟的時候，客戶的修改對網頁設計人員簡直是惡夢。故此你選擇一間善用CSS的網頁公司，你的要求也可以更容易和更快速地完成。

較快的顯示

應用CSS的網頁一般都較表格網頁體積輕巧，而由於技術上的特性，華麗的外表背後，CSS網頁的編碼(Coding)結構(Structure)遠比多層的表格構造(Nested Table Layout)來得簡單，故現在瀏覽器顯示CSS網頁的速度一般都會較快。雖然只是一秒左右的分別，但對使用者已是『顯示出來』和『彈出來』的兩種完全不同感覺了。你的網頁顯示速度愈高，使用者再觀看其他頁的機會就會大幅提高。

總結

站在網頁設計人員的角度來說，CSS絕對是難學習和難掌握的。假如客戶沒有要求使用CSS的話，繼續使用表格是無可厚非的。但作為客人的話，為何不選擇一個新的技術，享受較高的搜尋排名？

Jeff Chan

提升重要位置的注意度

當你的頁面有太多圖片和文字，就很難集中在一個元素。這樣的頁面不便利於用戶使用，研究指出一個頁面有愈多元素，用戶停留的時間就愈短。在重要位置周圍留白，就可以令重要位置更搶眼。
 

引導用戶到某些位置

由於空白位置基本上是沒有內容，用戶的眼球自然會遠離它。你可以利用這本能反應，把用戶導引到某些位置。假如你有一個按鈕在左方，你可以把右方留白，引導用戶到按鈕身上。
 

建立合時興的版面設計

今年的網頁設計都要簡單很主，大量使用空白位置，僅在頁面上保留最基本的功能。這種簡約設計能夠建立一個更清潔和更輕鬆的版面，令用戶使用得更舒服。而且因為頁面上有較少的元素，它會載入得更快，使網站更方便用戶。
 

建立高色彩對比

高色彩對比度主題是另一種良好網頁設計的技巧。因為色彩反差能夠使文字或圖片更易閱讀。白色位置亦大大增加了頁面內容和背景的反差，使其更加突出，更有效地抓住讀者的注意力。

Jeff Chan

垂直菜單

垂直菜單通常會放在網頁設計的左方，連結由上至下排列，這是最靈活的設計，因為理論上可以隨便放很多的鍵結。但研究顯示，這不是最合人性的設計，因為使用者看網頁通常是由左向右瀏覽而不是由上至下。

水平菜單

水平菜單又叫橫放菜單，通常都是一排連結放在網頁的上方，大概在橫額(banner)和公司標誌(logo)下，分隔網頁版頭和主要內容。但由於網頁的寛度大有限，故此對鍵結數量有一定限制。

分頁式(tabbed)菜單

這是近年開始流行的顯示方式。基本上網頁好像有不同的分頁，而點擊有關的菜單就會顯示相應的內容。

下拉式菜單

下拉式的菜單適合有很多版面或分類的網頁，用戶點選某分類才會顯示相關的連結，若果網頁的架構不大，就不建議使用了。

Jeff Chan

貼士1 弄清楚策略

貼士2 檢查結果

貼士3 技術支援和報告

貼士4 成本

胋士5 網頁設計

假如沒有一個優質的網頁設計，排在首名也是沒有實際作用，所以在進行seo前，你可能要先處理網頁設計的問題，這一點不能忽略。

Jeff Chan

<div style="
background: #30555A;
height: 45px;
width: 90px;
-moz-border-radius:90px 90px 0 0;
-webkit-border-radius:90px 90px 0 0;
border-radius:90px 90px 0 0;"></div>

<div style="
width: 0;
height: 0;
border-top: 100px solid #30555A;
border-left: 50px solid transparent;
border-right: 50px solid transparent
"></div>

<div style="
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid #B12025;
border-left: 60px solid #B12025;
border-bottom: 60px solid #B12025;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius: 60px;
"></div>

Jeff Chan

1. XSS矢量攻擊 (XSS Attack Vector)
2. 動畫蟲洞
3. HTML5的data attribute處理

Jeff Chan

隨著AJAX技術的被普遍使用，在不刷頁(refresh-less)下利用javascript更新內容的機會亦大幅增加。通常在等待javascript與伺服器進行溝通的時候，我們都需要暫時顯示一幅Loading的圖像，但假如每次都以『Please Wait...』或者『Loading...』來顯示的話，就未免太單調了。我們可以利用一個重覆轉動的GIF來替代，這樣就可以令網頁更有動感和活潑了。今次介紹的網站就是專門產生這些Preloader的preloader.net，只要簡單的幾個動作就可以產生以下的圖像了，厲害﹗

有關網址︰http://preloaders.net/

Jeff Chan

codeburner是FireFox的一個插件，需要與FireBug一同使用，它可以為有關的HTML或CSS提供有效的輔助說明，大大幫助網頁設計開發。

你可以尋找HTML Element﹑HTML Attribute或CSS Property，之後codeburner會提供有關的瀏覽器兼容性﹑標準和簡短的用法描述。右擊『Show Code Example』更可以查看有關的使用例子。

有關網址︰http://tools.sitepoint.com/codeburner/

Jeff Chan

Kuler

Adobe開發的網上配色工具，除了自己配色外，還可以觀看其他設計師的配色，非常好用﹗

Jeff Chan

若方塊的大小是固定的話，我們當然可以簡單的用一幅圓角弧形圖作背景。但是很多時候區塊大小是由內容決定的，這些時候我們便要把圓角抽出分開處理了。這個技巧今天暫時不談，因為網絡上已經有一個很好用的工具。今天介紹的是由Neurotic開發的CSS圓角弧形區塊製作工具，只要簡單的輸入背景顏色和方塊顏色，就可以得到有關的圓角圖和CSS碼。可惜的是工具並不能設定弧度大小，若果要大一點的弧度，就要自行製作了。

有關網址︰http://www.neuroticweb.com/recursos/css-rounded-box/index.php

Jeff Chan

先利用JavaScript取得解像度︰

var ScreenWidth = screen.width;

把數值用GET的的方法傳給有關的PHP

var url = 'targeturl.php?ScreenWidth=' + ScreenWidth;
window.location = url;

Jeff Chan

IE PNG FIX

Jeff Chan

有關網址︰http://www.k10k.net/pixelpatterns/random/

Jeff Chan

根據Net Applications的Market Share報告，微軟的IE系列仍然保持皇者地位，12月底仍有超過6成的佔有率。但值得留意的是，IE的使用者不停下跌，而Firefox的佔有率亦在11月首次突破20%﹗在專業網頁設計和開發資訊網站w3schools.com的瀏覽器使用分佈統計中，Firefox更與IE接近平手，達到約45%。

相信今年會有更多客人主動要求我們支援Firefox了，放心，我們的設計一向都支援各大瀏覽器﹗

Jeff Chan

隨著微軟即將推出IE8，我們亦要準備為IE8作網頁顯示測試，另一方面相信所有網頁設計師都期待著為IE6作特別處理的日子快點結束。

Jeff Chan

Kotatsu Table CSS Class 工具

Jeff Chan

FireShot的Firefox Extension Page

FireShot的官方網頁

Jeff Chan

怎樣幹？到CSS Text Wrapper一看就知﹗

Jeff Chan

100 Continue
101 Switching Protocols
200 OK
201 Created
202 Accepted
203 Non-Authoritative Information
204 No Content
205 Reset Content
206 Partial Content
300 Multiple Choices
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
305 Use Proxy
306 (Unused)
307 Temporary Redirect
400 Bad Request
401 Unauthorized
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed
413 Request Entity Too Large
414 Request-URI Too Long
415 Unsupported Media Type
416 Requested Range Not Satisfiable
417 Expectation Failed
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported

Jeff Chan

Hyphenator的主頁︰http://code.google.com/p/hyphenator/

Jeff Chan

首先你需要申請一個Yahoo的帳戶，然後再到Site Explorer。新增你的網站後再按Feeds，進入後輸入你的Sitemap地址選擇『Web Site Feed』再按『Add Feed』就可以了﹗

Jeff Chan

首先你需要申請一個Google的帳戶，然後再新增網站管理員工具。登入後新增你的網站，例如www.aveego.com。在左面的地方有一個叫Sitemaps的選項，進入後輸入你的Sitemap地址再按『提交Sitemap』就可以了﹗

Jeff Chan

明天再談談如何把Sitemap提交到各大搜尋引擎。

Jeff Chan

FireBug

我相信所有利用CSS的網頁設計人員都會先支援Firefox，到現時為止它仍然是對CSS的支援最足的一個瀏覽器，而且最重要還是它有這個近乎必須的插件 - FireBug。無論是CSS﹑HTML或JavaScript都提供貼心的除錯功能，筆者最愛就是當滑鼠指在網頁的元件時，DOM頁面會顯示出相關的CSS屬性。

FireBug的官方網頁

Internet Explorer Developer Toolbar

另一個要介紹的是微軟出品的Internet Explorer Developer Toolbar，類似FireBug但功能沒有那麼全面，但支援IE。

下戴及相關資料

Jeff Chan

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->  
    

Jeff Chan

有關的HTML結構︰

<html>
	<body>
		<container>
			網頁設計內容
		</container>
	</body>

</html>

有關的CSS︰

#container {
	width: 770px;
	margin: 0 auto;
}

Jeff Chan

剛才說過顯示器的解像度並非瀏覽器的可顯示大小，一般來說我們留30像素給視窗的邊位和Scroll Bar就可以，故此筆者建議以770px和990px來作為設計的寛度。在CSS裡大概就是這樣了︰

#Container {
	width: 770px;
}

Jeff Chan

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

在排版設計中，我們會使用沒有意義的文字來測試不同字型和版面下的效果。亂文的目的是希望只專注於觀察字型和版面。這個在十五世紀就廣泛地使用的技巧，在現在網頁設計中同樣被應用。當中最經典的當然是Lorem Ipsum的一段文字，但中文的亂文就沒有既定的一段了。

以下是筆者經常用到的亂文產生器︰

• 英文的Lorem Ipsum
• 多國語言合用的Lorem Ipsum(包含日文和簡體字)
• 繁體的Lorem Ipsum假文產生器

Jeff Chan

最後當然要感激famfamfam.com的無私貢獻﹗

Jeff Chan

在表格(Table)中的vertical-align

在表格裡使用vertical-align的結果是最容易被理解的，就是把表格欄的內容垂直放在欄中，這就是很久以前HTML裡的valign=”middle”（退休了的標準，不要用了﹗）

利用line-height

先把Container設定固定高度，再把有關的元件line-height設定相同高度。

	#ContainerA {
		height: 80px;
		background-color: #CCCCCC;
		border: solid 1px #000000;
		padding: 0;
		margin: 0;
	}
	#ContainerA p {
		line-height: 80px;
		margin: 0;
		padding: 0;
	}

Container沒有固定高度？乾脆設定padding就可以了﹗

	#ContainerB {
		background-color: #CCCCCC;
		border: solid 1px #000000;
		padding: 30px 10px;
		margin: 0;
	}
	#ContainerB p {
		margin: 0;
		padding: 0;
	}

Jeff Chan

你的網站是不停運作的

漂亮的網頁設計能夠增加客人的信心

網頁能夠增加客人推薦

好的網頁設計是最不討厭的廣告

Jeff Chan

Important update

1. New event API: on() and off()
2. Improved Performance on Delegated Events
3. Better Support for HTML5 in IE6/7/8
4. Toggling Animations Work Intuitively
5. Asynchronous Module Definition (AMD)
6. jQuery.Deferred
7. jQuery.isNumeric()

Jeff Chan

1. XSS attack vector
2. Animation worm-holes
3. HTML5 data attribut name handling

Jeff Chan