為 Blog 設計一個很 Web 2.0 的選單

2008/12/29 20:39 / 網頁設計
views: 3977 times
qrcode Mobile:
超大字體(180%)放大字體(130%)原始字體(100%)

與其說是「Web 2.0」風格, 我倒覺得比較像 MAC 風… Anyway, 如果你想用 Photoshop 為網站設計一個高質感的 ICON 或是 Button 卻不知從何下手的話, 可以試試這個網站提供的「Layer Styles」, 它能幫你快速的建立高質感的圖示。

使用方式非常簡單, 首先到網站上把檔案下載回來並解壓縮。然後開啟 Photoshop 並找到「Edit」->「Preset Manager...」:

用戶插入圖片

執行後會出現「Preset Manager」的對話框, 拉下下拉選單選擇「Styles」項目, 然後按下旁邊的「Load」鍵:

用戶插入圖片


找到剛剛解開的「.asl」檔, 然後按下「Load」鍵:
用戶插入圖片
之後就可以在 Photoshop 的「Styles」頁籤中使用了:
用戶插入圖片
下圖是我利用這個「Layer Styles」所試做的 Button, 有興趣的不妨也動手玩玩:
用戶插入圖片
創用 CC 授權
Creative Commons License
本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

Bookmarks

 HEMiDEMi  Technorati  Del.icio.us  Digg  funP  Yahoo!  Furl
 相關文章 
2008/12/29 20:39 2008/12/29 20:39
Posted by Ken.
TAGS , ,
No Trackback , No Comment

Leave your greetings here.

[登入][OpenID是？]

Web 2.0 視覺設計/線上產生工具之不完全整理

2008/12/29 20:26 / 網頁設計
views: 2229 times
qrcode Mobile:
超大字體(180%)放大字體(130%)原始字體(100%)

web20_name_gene (by joaoko)

在這個言必談 Web 2.0 的時代，不管是新推出的網站，或是舊有網站的改版，介面一定是漂漂亮亮的、粉粉的、顏色鮮明的，版面設計最好是要有圓角，logo 裡的字一定要帶有倒影，最後再蓋上 “beta” 這個帥氣到不行的 Web 2.0 精典 (或精神？) 標緻。
因應這個朝流，網路上也開始出現了一些「如何設計才能更符合 Web 2.0」的教學文章，諸如配色、樣式、按鈕之類的，或是甚至直接幫你在線上快速產生一個有 Web 2.0 味道的 logo 或是網站名稱。
那麼下面就把我之前有接觸過的網站或是文章整理出一個「不完全」列表:

  1. Web 2.0 Logo Creator by Alex P
    只要輸入文字，就能快速的產生帶有倒影及 beta 字樣的 Web2.0 超級 logo。
    剛才去看的時候發現網站好像有一點問題，不知道是不是太多人用，用到爆了…
  2. Web 2.0 Company Name Generator
    除了要有漂亮的介面之外，網站當然也要取一個有 Web2.0 味道的名稱。按下網頁的 Generate Name! 扭，便會以亂數拼出一個名稱，當然程式裡的規則是有設計過的，所以拼出來的名稱並不會讓人覺得無厘頭，有一些反而還蠻有質感的呢。除此之外還提供了檢查名稱是否已經被人家註冊為網址的功能。
  3. Ajax loading gif generator
    說到 Web 2.0 網站，多多少少一定會運用 ajax，這個線上工具能夠產生網頁 loading 時所顯示的動畫。
  4. Simple Rounded Corner CSS Boxes made easy
    圓角在也是被 Web 2.0 網站拿來大量使用的視覺元素之一，這網站能幫助我們以 CSS 樣式配合背景圖片設計圓角。
  5. Web 2.0 Design Kit
    這是一篇「如何使用 Photoshop 設計 Web2.0 logo」的教學，淺顯易懂的範例帶領使用者設計出一個屬於自己的 Web2.0 logo。別忘了還有 Part2。
  6. Web 2.0 how-to design style guide
    這篇文章列舉了 15 項常被用來設計 Web2.0 網站的元素，例如簡單乾淨的樣式、版面置中、明顯的 logo、強烈的顏色等等，並解說為什麼要這樣用，使用的適合時機，要用在什麼地方，蠻值得一讀的。
    柏強在這裡做了一個這篇文章的摘要簡譯。
  7. Web 2.0 style buttons
    同樣是使用 Photoshop 為教學範例的一篇「設計 Web2.0 樣式按鈕」的教學文章。
  8. Web 2.0 Colour Palette
    這篇文章整理出一些知名 Web2.0 網站的用色，秀過這些顏色可以依照自己的感覺再組合出一套完美的 Web 2.0 配色方案。
  9. Web 2.0 的視覺設計
    由大陸網友翻譯的 The visual design of Web 2.0，內容同樣是講述常被用來設計的 Web 2.0 樣式。
  10. The Logos of Web 2.0
    這篇文章蒐集了許多 Web 2.0 網站的 logo，並且還替他們分類。

Web 2.0 的精神除了注重內容、架構及溝通外，還需要好的視覺設計來襯拖出他們的珍貴。
畢竟除了 BBS 以外，如果使用者在第一眼看到設計不良，版面雜亂無章的網站，我想要再回去第二次應該是很難了。

創用 CC 授權
Creative Commons License
本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

Bookmarks

 HEMiDEMi  Technorati  Del.icio.us  Digg  funP  Yahoo!  Furl
 相關文章 
2008/12/29 20:26 2008/12/29 20:26
Posted by Ken.
TAGS
No Trackback , No Comment

Leave your greetings here.

[登入][OpenID是？]

提防header()函數

2008/12/29 19:44 / 網頁設計/PHP
views: 2475 times
qrcode Mobile:
超大字體(180%)放大字體(130%)原始字體(100%)
header函數被用來在輸出內容給瀏覽器之前送出一個http頭，儘管是很簡單的操作但是還是可能帶來安全問題
Example:
$charset=$_GET[$charset];
@header('Content-Type: text/html; charset='.$charset);
.....
.....
?>
上面的這段代碼有問題沒有呢？在正常情況下是沒有的，但是如果我們瞭解http協議就知道這是有問題的。對於HTTP頭
，也是有分割字符的，回車就是分割字符，也相當於HTTP協議裡的元字符，所以如果我們在$charset裡插入回車的話是
會構造出自己的HTTP頭的，甚至是內容哦！


這樣就可以看到效果，我們是可以偽造輸出的任何內容了，並且可以覆蓋以前提交的HEADER頭內容，但是在php5的時候我並沒有測試成功，譬如如下的代碼中：



如果我們按照上面的格式提交想偽造出文檔的內容就會發現失敗，我們一無所獲了是麼？呵呵，不是的，php會報告錯誤，然後順便把路徑也暴露出來了！
創用 CC 授權
Creative Commons License
本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

Bookmarks

 HEMiDEMi  Technorati  Del.icio.us  Digg  funP  Yahoo!  Furl
 相關文章 
2008/12/29 19:44 2008/12/29 19:44
Posted by Ken.
TAGS ,
No Trackback , No Comment

Leave your greetings here.

[登入][OpenID是？]

用 PHP 建立 ZIP 壓縮檔

2008/12/29 19:30 / 網頁設計/PHP
views: 2980 times
qrcode Mobile:
超大字體(180%)放大字體(130%)原始字體(100%)
要用 PHP 建立壓縮檔，除了在 PHP 執行 UNIX command 外，還可以單靠 PHP 完成，最簡單的方法是用 PEAR 函式庫來做，其中 PEAR::Archive_Zip 就可以用作建立 ZIP 壓縮檔。

以下先來看看 PEAR::Archive_Zip 的使用方法。


以上程式會建立 zipfile.zip 壓縮檔，裡面會有包含有 file1.txt 檔案。在使用時請留意儲存壓縮檔的目錄要有寫入的權限。
創用 CC 授權
Creative Commons License
本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

Bookmarks

 HEMiDEMi  Technorati  Del.icio.us  Digg  funP  Yahoo!  Furl
 相關文章 
2008/12/29 19:30 2008/12/29 19:30
Posted by Ken.
TAGS
No Trackback , No Comment

Leave your greetings here.

[登入][OpenID是？]

htaccess文件使用大全

2008/12/29 19:09 / 網頁設計
views: 2336 times
qrcode Mobile:
超大字體(180%)放大字體(130%)原始字體(100%)
- .htaccess文件(或者」分佈式配置文件」提供了針對目錄改變配置的方法， 即，在一個特定的文檔目錄中放置一個包含一個或多個指令的文件， 以作用於此目錄及其所有子目錄。[1]作為用戶，所能使用的命令受到限制。管理員可以通過Apache的AllowOverride指令來設置。

- 子目錄中的指令會覆蓋更高級目錄或者主服務器配置文件中的指令。

- .htaccess必須以ASCII模式上傳，最好將其權限設置為644。

錯誤文檔的定位

more..



文檔訪問的密碼保護

more..



保護.htaccess文檔

more..



URL轉向

more..



防止盜鏈

more..


之二:

.htaccess可以做大量範圍的事情，包括：文件夾密碼保護、用戶自動重新指向、自定義錯誤頁面、變更你的文件擴展名、屏蔽特定的用戶IP地址、只允許特定的IP地址、停止目錄表以及使用其他文件作為index文件，等等......

1. Introduction 介紹

more..



2. Error Documents 錯誤文檔

more..


3. Password Protection 密碼保護

more..


4. Enabling SSI Via htaccess 通過htaccess允許SSI(Server Side Including)功能

more..


5. Blocking users by IP 根據IP阻止用戶訪問

more..


6. Blocking users/sites by referrer 根據referrer阻止用戶/站點訪問

more..


7. Blocking bad bots and site rippers (aka offline browsers) 阻止壞爬蟲和離線瀏覽器

more..


8. Change your default directory page 改變缺省目錄頁面

more..


9. Redirects 轉向

more..


10. Prevent viewing of .htaccess file 防止.htaccess文件被查看

more..


11. Adding MIME Types 添加 MIME 類型

more..


12. Preventing hot linking of images and other file types 防盜鏈

more..


13. Preventing Directory Listing 防止目錄列表時顯示

more..

創用 CC 授權
Creative Commons License
本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

Bookmarks

 HEMiDEMi  Technorati  Del.icio.us  Digg  funP  Yahoo!  Furl
 相關文章 
  • 沒有相關文章。
2008/12/29 19:09 2008/12/29 19:09
Posted by Ken.
TAGS
No Trackback , No Comment

Leave your greetings here.

[登入][OpenID是？]

[PHP] 取得檔案副檔名與檔名

2008/12/19 16:36 / 網頁設計/PHP
views: 3293 times
qrcode Mobile:
超大字體(180%)放大字體(130%)原始字體(100%)
這是很常用到的函數，大家應該都知道了


創用 CC 授權
Creative Commons License
本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

Bookmarks

 HEMiDEMi  Technorati  Del.icio.us  Digg  funP  Yahoo!  Furl
 相關文章 
2008/12/19 16:36 2008/12/19 16:36
Posted by Ken.
TAGS ,
No Trackback , No Comment

Leave your greetings here.

[登入][OpenID是？]

firefox與IE對javascript和CSS的區別

2008/06/04 21:26 / 網頁設計
views: 3532 times
qrcode Mobile:
超大字體(180%)放大字體(130%)原始字體(100%)
用戶插入圖片
非原創，來源網絡。感謝原作者奉獻如此精彩文章。
原文地址

1. document.formName.item("itemName") 問題
說明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];
Firefox下,只能使用document.formName.elements["elementName"].
解決方法:統一使用document.formName.elements["elementName"].

2.集合類對象問題
說明:IE下,可以使用()或[]獲取集合類對象;Firefox下,只能使用[]獲取集合類對象.
解決方法:統一使用[]獲取集合類對象.

3.自定義屬性問題
說明:IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統一通過getAttribute()獲取自定義屬性.

4.eval("idName")問題
說明:IE下,,可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象;Firefox下只能使用getElementById("idName")來取得id為idName的HTML對象.
解決方法:統一用getElementById("idName")來取得id為idName的HTML對象.

5.變量名與某HTML對象ID相同的問題
說明:IE下,HTML對象的ID可以作為document的下屬對象變量名直接使用;Firefox下則不能.Firefox下,可以使用與HTML對象ID相同的變量名;IE下則不能。
解決方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML對象ID相同的變量名,以減少錯誤;在聲明變量時,一律加上var,以避免歧義.

6.const問題
說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常量;IE下,只能使用var關鍵字來定義常量.
解決方法:統一使用var關鍵字來定義常量.

7.input.type屬性問題
說明:IE下input.type屬性為只讀;但是Firefox下input.type屬性為讀寫.

8.window.event問題
說明:window.event只能在IE下運行,而不能在Firefox下運行,這是因為Firefox的event只能在事件發生的現場使用. Firefox必須從源處加入event作參數傳遞。Ie忽略該參數，用window.event來讀取該event。
解決方法:
IE&Firefox:

Submitted(event)"/> …
<script language="javascript">
function Submitted(evt) {
evt=evt?evt:(window.event?window.event:null);
}
</script>

9.event.x與event.y問題
說明:IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,even對象有pageX,pageY屬性,但是沒有x,y屬性.
解決方法:使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX.

10.event.srcElement問題
說明:IE下,event對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性.
解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target. 請同時注意event的兼容性問題。

11.window.location.href問題
說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解決方法:使用window.location來代替window.location.href.

12.模態和非模態窗口問題
說明:IE下,可以通過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能.
解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口。
如果需要將子窗口中的參數傳遞迴父窗口,可以在子窗口中使用window.opener來訪問父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

13.frame問題
以下面的frame為例：
<frame src="xxx.html" id="frameId" name="frameName" />
(1)訪問frame對象:
IE:使用window.frameId或者window.frameName來訪問這個frame對象. frameId和frameName可以同名。
Firefox:只能使用window.frameName來訪問這個frame對象.
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")來訪問這個frame對象.
(2)切換frame內容:
在IE 和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容.
如果需要將frame中的參數傳回父窗口(注意不是opener,而是parent frame)，可以在frme中使用parent來訪問父窗口。例如：parent.document.form1.filename.value="Aqing";

14.body問題
Firefox的body在body標籤沒有被瀏覽器完全讀入之前就存在；而IE的body則必須在body標籤被瀏覽器完全讀入之後才存在.

15. 事件委託方法
IE：document.body.onload = inject; //Function inject()在這之前已被實現
Firefox：document.body.onload = inject();

16. firefox與IE的父元素(parentElement)的區別
IE：obj.parentElement
firefox：obj.parentNode
解決方法: 因為firefox與IE都支持DOM,因此使用obj.parentNode是不錯選擇.

17.cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer
解決方法: 統一使用pointer

18.innerText在IE中能正常工作，但是innerText在FireFox中卻不行. 需用textContent。
解決方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

19. FireFox中設置HTML標籤的style時，所有位置性和字體尺寸的值必須後跟px。這個ie也是支持的。

20. ie,firefox以及其它瀏覽器對於 table 標籤的操作都各不相同，在ie中不允許對table和tr的innerHTML賦值，使用js增加一個tr時，使用appendChild方法也不管用。
解決方法：
//向table追加一個空行：

var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

21. padding 問題
padding 5px 4px 3px 1px FireFox無法解釋簡寫,
必須改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22. 消除ul、ol等列表的縮進時
樣式應寫成:list-style:none;margin:0px;padding:0px;
其中margin屬性對IE有效，padding屬性對FireFox有效

23. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。

24. CSS圓角
IE：不支持圓角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。

25. CSS雙線凹凸邊框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

26. 對select的options集合操作
枚舉元素除了[]外， SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在兩種瀏覽器上使用。注意在add後賦值元素，否則會失敗（本人試驗如此）。

27. XMLHTTP的區別

//mf
if (window.XMLHttpRequest) //mf
{
xmlhttp=new XMLHttpRequest()
xmlhttp.
xmlhttp.open("GET",url,true)
xmlhttp.send(null)
}
//ie
else if (window.ActiveXObject) // code for IE
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
xmlhttp.
xmlhttp.open("GET",url,true)
xmlhttp.send()
}
}
}

28. innerHTML的區別
Firefox不支持innerHTML, 解決辦法可以如下
rng = document.createRange();
el = document.getElementById(elementid);
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(content);
while (el.hasChildNodes()) //清除原有內容，加入新內容
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);

29. img的src刷新問題
在IE下可以用<img id="pic" onclick= "this.src= &apos;aa.php&apos;" src="aa.php" style="cursor: pointer"/> 可以刷新圖片，但在FireFox下不行。主要是緩存問題，在地址後面加個隨機數就解決了。編輯onclick事件代碼如下： "this.src=this.src+'?'+Math.random()"

創用 CC 授權
Creative Commons License
本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

Bookmarks

 HEMiDEMi  Technorati  Del.icio.us  Digg  funP  Yahoo!  Furl
 相關文章 
  • 沒有相關文章。
2008/06/04 21:26 2008/06/04 21:26
Posted by Ken.
TAGS , , ,
No Trackback , No Comment

Leave your greetings here.

[登入][OpenID是？]

實作PHPMailer郵件函式庫

2008/06/03 21:29 / 網頁設計/PHP
views: 3975 times
qrcode Mobile:
超大字體(180%)放大字體(130%)原始字體(100%)
用戶插入圖片
參考資料來源：實作PHPMailer郵件函式庫

PHPMailer是一個提供電子郵件相關功能的PHP函式庫，功能相當完整，可以讓你很輕鬆的發送郵件。它提供的功能包括：


  • 在發送郵時指定多個收件人，寄送副本，寄送密件副本和回復Email
  • 支援多種郵件編碼包括：8bit，base64，binary和quoted-printable
  • 支持SMTP驗證
  • 支援冗餘SMTP伺服器
  • 支援帶附件的郵件和Html格式的郵件
  • 自定義郵件頭
  • 支援在郵件中嵌入圖片
  • 調試靈活
  • 經測試相容的SMTP伺服器包括：Sendmail,qmail,Postfix,Imail,Exchange等
  • 可運行在任何平臺之上


官方網站
http://phpmailer.sourceforge.net/

下載位址
http://sourceforge.net/project/showfile ··· %3D26031


下載下來後，只要引入就可以使用。
以下是一簡單範例及說明：
創用 CC 授權
Creative Commons License
本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

Bookmarks

 HEMiDEMi  Technorati  Del.icio.us  Digg  funP  Yahoo!  Furl
 相關文章 
2008/06/03 21:29 2008/06/03 21:29
Posted by Ken.
TAGS , , ,
No Trackback , No Comment

Leave your greetings here.

[登入][OpenID是？]

如何避免我的網頁被存到「網頁紀錄」?

2007/12/28 21:05 / 網頁設計
views: 2238 times
qrcode Mobile:
超大字體(180%)放大字體(130%)原始字體(100%)
如何避免我的網頁被存到「網頁紀錄」?
搜尋引擎在網絡上發現相關資料的時候，會把多數網頁儲存；這使我們能夠顯示出搜尋相關頁面的資訊，並且若該網站的的伺服器臨時無法連結，網友仍可藉由「網頁紀錄」讀取相關資訊。

如果你的網站內容不想被存到「網頁紀錄」，你可使用NOARCHIVE 的標籤指令。

在你的 HTML 編輯語法中，在 的部分寫下以下指令︰

這個標籤會告訴搜尋引擎不要將你的網頁抓取並儲存在「網頁紀錄」，但你的網站仍會被搜尋引擎收錄在搜尋結果中，只是不會顯示「網頁紀錄」。

請注意，在你加了 NOARCHIVE 標籤指令之後，需等到搜尋引擎再次抓取你的網頁，偵測到NOARCHIVE標籤指令時才會生效。

NOARCHIVE 標籤只控制「網頁紀錄」的顯示，如果你不希望你的網站被搜尋引擎收錄於搜尋結果，請使用 NOINDEX。

參考資料：
YAHOO：
http://help.yahoo.com/help/hkc/ysearch/ ··· -10.html

Google：
http://www.google.com.tw/support/webmas ··· %3D35306
http://www.google.com/intl/zh-TW/webmasters/bot.html
創用 CC 授權
Creative Commons License
本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

Bookmarks

 HEMiDEMi  Technorati  Del.icio.us  Digg  funP  Yahoo!  Furl
 相關文章 
  • 沒有相關文章。
2007/12/28 21:05 2007/12/28 21:05
Posted by Ken.
TAGS ,
No Trackback , No Comment

Leave your greetings here.

[登入][OpenID是？]