網頁設計,網路行銷新知» BUSINESSWING – 整合提供網頁設計,網站企劃,網路行銷等新知

[jQuery] Animated Hover Effect (ahover)

bwingnet — Fri, 21 May 2010 08:25:59 +0000

這是一個很可愛的滑鼠滑動的動畫效果。當滑鼠停留在選單項目上方時，項目下面會出現一方塊跟著滑鼠移動，經常出現在一些flash的選單效果上，現在介紹的是使用jQuery的plugin，來模擬這個動畫效果。事前準備針對html、css及js三部份各有基本需要的code，跟著以下步驟設定即可以輕鬆呈現效果囉 HTML <ul> <li>a</li> <li>b</li> <li>c</li> </ul> CSS ul { position: relative; } ul li { position: relative; z-index: 100; } div.ahover { position: absolute; z-index: 99; background: #cef; } div.ahover是由plugin自動產生的html code，它即是滑鼠停留在選單項目上會出現的方塊，在這裡我們只是為它加上style而已，想為它加上border或者background都可以。 Javascript 首先，因為這是jQuery的plugin，所以jQuery這隻js是一定少不了的喔！其次是ahover本身，可以到官網下載。 p.s.上述二隻js別忘了先載入才執行以下的js code！ jQuery(document).ready(function(){ jQuery(‘#letter li’).ahover(); }); 測試以上code都準備就緒後就可以打開瀏覽器觀看選單效果囉，底下也放置demo及所需要用到js連結囉。 Demo jQuery framework jQuery plugin – ahover

3-6-4 使用CSS函數庫

bwingnet — Mon, 22 Mar 2010 09:17:45 +0000

由於各家瀏覽器對CSS支援程度不同，且CSS設計時需兼顧網頁的美觀，所以自己設計CSS不見得會比資料庫網頁輕鬆。「Dynamic Driver CSS Library」網站（網址：http:// www.dynamicdrive.com/style）上提供多種CSS，是一個值得您參考的網站。【圖21 「Dynamic Driver CSS Library」網站提供多種CSS樣式可供設計參考】葉建榮 jiannrong@gmail.com

3-6-3如何定義不同的樣式

bwingnet — Tue, 09 Mar 2010 06:18:10 +0000

當我們在定義樣式時，除了網頁標籤外，我們還可自訂class或id名稱，而這兩者有何不同呢？有些當我們在設定樣式時，有些標籤可能會有不同的樣式設定，例如前面我們提到，可能在一篇文章裡，我們就需要字型15pt與12pt，兩種字型也有不同的顏色，那我們該怎麼設定呢？class與id可以幫助您做到這一件事情。樣式以class方式宣告與使用當我們要使用class方式宣告樣式，我們得在樣式名稱前面加上句點（.），例如以下的網頁： <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>使用class1</title> <style type="text/css"> .normalfont{font-size: 12pt; color: #0000ff} .largefont {font-size: 15pt;color: #d77c1a} </style> </head><body> <font class="normalfont">PHP圖書</font><br> <font class="largefont">歡迎來到php6的世界</font> </body></html> 如此這兩段同用<font>標籤的文字就會套用不同的樣式。【圖17 樣式用class方式宣告，所以<font>的樣式就可以設計為兩種不同樣式】有些屬性是很多標籤擁有的，所以我們也可利用class宣告的方式，讓這個屬性用於多個標籤內。例如padding這一個樣式屬性，這是設定標籤內資料與標籤間的上下左右邊之間距，這個屬性可用於table、div與span內，所以我們若使用class方式宣告，就可讓div與table用相同的標籤，設計相同內文與邊框的距離。 <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>一個class可被多個標籤使用</title> <style type="text/css"> .paddingset {padding:20px;} </style> </head> <body> <hr> <div class="paddingset">php6</div> <table border="1"> <tr><td class="paddingset">a</td> <td class="paddingset">b</td></tr> <tr><td class="paddingset">c</td> <td class="paddingset">d</td></tr></table> </body></html> 【圖18 利用class宣告的方式，可讓一個class可被多個標籤使用】一個class可以被不同的標籤使用外，一個標籤也可以使用多個class，例如以下的例子，一段文字具有「內文與邊框的距離為20px」及「字型大小為12pt，顏色為藍色」兩種樣式： <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>一個標籤使用多個class</title> <style type="text/css"> .paddingset {padding:20px;} .normalfont{font-size: 12pt; color: #0000ff} </style> </head> <body> <hr><div class="paddingset normalfont">歡迎來到php6的世界</div><hr> </body></html> 【圖19 一個標籤可以套用多個class樣式】樣式以id方式宣告與使用當我們要使用id方式宣告樣式，我們得在樣式名稱前面加上#，例如以下的網頁： <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>使用id</title> <style type="text/css"> #normalfont{font-size: 12pt; color: #0000ff} #largefont {font-size: 15pt;color: #d77c1a} </style> </head><body> <font id="normalfont">PHP圖書</font><br> <font id="largefont">歡迎來到php6的世界</font> </body></html> 如此這兩段文字就會套用不同的樣式。【圖20 [...]

3-6-2 CSS宣告與檔案引用

bwingnet — Tue, 09 Mar 2010 05:49:34 +0000

當您設計PHP網頁時，可能需參考其他網頁的風格，這時，您就需要瞭解其他網頁內樣式表。若該網頁的樣式表是寫在網頁內，而非外部檔案，您可參考網頁裡的<style type="text/css">到<style>這一個區塊內容。可是，我要如何新增修改呢？首先，我們來看一下樣式要如何定義：網頁標籤或自訂id、class名稱｛屬性名稱：設定值｝我們前一例中的樣式：font { font-size:9pt }。就是指將font這一個網頁標籤裡的font-size屬性設定為9pt。也就是將使用<font>標籤的文字的字型大小設定為9pt。所以，只要我們知道網頁標籤與他的屬性，就可以設定他的樣式。如果在其他網頁內看不到樣式的宣告，那是否代表這個網頁沒有使用樣式表呢？那可不一定！樣式表除了可寫在網頁內外，也可以將樣式表儲存成獨立的css檔案（副檔名為css）。寫成獨立的檔案有何好處呢？假設您有十個網頁的字型大小要設定為9pt，五個網頁字型大小要設定為6pt，請問您會怎麼做？寫在網頁內？假如有一天，老闆或老師或網友們覺得字太小了，希望您將9pt改為15pt，6pt改為12pt，那您是不是要一頁一頁的改？樣式表寫成獨立的檔案，好處就是維護方便，您只要修改一個css檔案，所有網頁上已定義的樣式就會全部重新定義，不需一個一個改。 css檔案的編碼必須與網頁的編碼相同，換句話說，網頁若是UTF-8編碼，css檔的編碼也必須是UTF-8。那要如何引用獨立的css檔案呢？引用css檔案有兩種方法，一種是利用「超連結」的方式，另外一種是「匯入」的方式。讓我們來瞧瞧這兩種方式的差異。光碟片「3」資料夾內有一個「font.css」檔案，這就是我們要引用的樣式表檔案，我們可以來看看這個檔案的內容，因為想要引用這個css檔的網頁編碼是utf8，所以css檔案內容編碼也必須是utf8。 font { font-size:9pt } css檔案內請不用加入<style type="text/css">與</style>這樣的標籤，您只要把您想執行的樣式寫入即可。若以「超連結」的方式，網頁會是這樣： <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>超連結方式呼叫css</title> <link rel=stylesheet type="text/css" href="font.css"> </head><body> <table width="40%" border="1"><tr> <td><font>PHP圖書</font></td></tr> <tr><td><font>歡迎來到php6的世界</font><br> 沒有font標籤的文字會如何顯示呢？</td></tr> </table></body></html> 若以「匯入」的方式，網頁會是這樣 <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>網頁裡顯示文字css</title> <style type="text/css"> @import url(font.css); </style> </head><body> <table width="40%" border="1"><tr> <td><font>PHP圖書</font></td></tr> <tr><td><font>歡迎來到php6的世界</font><br> 沒有font標籤的文字會如何顯示呢？</td></tr> </table></body></html> 您可以依照您的習慣，使用超連結或匯入的方式引用css檔案。而當您參考其他網頁時，您就可以找到該網頁所引用的樣式。葉建榮 jiannrong@gmail.com

3-6-1 CSS用途

bwingnet — Mon, 08 Mar 2010 07:51:09 +0000

前半章的練習裡，您看到了PHP網頁內有一組標籤為< ? ?>，這是PHP所使用的標籤，代表這樣的的語法會先由Web Server先執行分析後完這一個標籤區塊後，再將資料送到瀏覽器上顯示。除了< ? ?>區塊外，其他的代表什麼意思？代表的是網頁的標籤，網頁就是由這些標籤組合起來的，透過瀏覽器的解釋，就可以透過瀏覽器呈現出來了。一個網頁基本上的結構如下： <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>網頁的主題</title> </head><body> 在瀏覽器上呈現的部分 </body></html> 【圖14 網頁的基本架構】您會看到網頁標籤呈現巢狀的結構，像鳥巢似的一層包一層，每一層都有起始標籤與結束標籤。最外面一層是<html>及</html>，這代表網頁的開始與結束，接者您可看到<head>與</head>，這區域可放入網頁的各種起始設定，而<body>與</body>內這一個區域通常是最大的區域，這區域內放置的標籤，是可以在瀏覽器上顯示。瞭解了網頁基本架構後，我們在網頁上輸入幾個文字，並且加入了<font></font>這個標籤，我們就可藉此訂定網頁上文字的相關屬性。例如： <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>網頁裡顯示文字</title> </head><body> <table width="40%" border="1"> <tr><td><font>PHP圖書</font></td></tr> <tr><td><font>歡迎來到php6的世界</font><br> 沒有font標籤的文字會如何顯示呢？</td></tr> </table></body></html> 【圖15 沒有使用樣式表的網頁】但因網頁內並未做<font></font>這一個標籤格式化的設定，所以網頁上的文字目前是沒有差異。若<font></font>標籤內的文字欲改為9pt大小，那該如何做呢？第一種作法，就是您直接修改<font></font>標籤的設定，如此一來<font></font>這個區塊內的文字全變成9pt。可是如果日後想要改為12pt，您又得再改一次網頁標籤語法。而且，若網頁內夾雜圖片(img)、表格(table)或圖層(div)，網頁內的文字會分成多個區塊，會有很多<font></font>標籤，每一個都改實在費事。第二種作法是透過樣式表的設定，針對<font></font>這一個標籤進行設定。各位可看看以下的網頁，新增了<style type="text/css"></style>到<style></style>這一個區塊，這個網頁會產生什麼變化呢？ <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>網頁裡顯示文字css</title> <style type="text/css"> font { font-size:9pt } </style> </head><body> <table width="40%" border="1"><tr> <td><font>PHP圖書</font></td></tr> <tr><td><font>歡迎來到php6的世界</font><br> 沒有font標籤的文字會如何顯示呢？</td></tr> </table></body></html> 您會發現到文字大小全都改變了，只要設定好標籤的樣式，使用這個標籤的區塊就會產生變化。所以，由此可知，CSS的目的就是「重新定義網頁標籤的各種屬性」【圖16 加上樣式表的網頁：可以看到使用<font></font>的區域內的文字都會改變大小】葉建榮 jiannrong@gmail.com

3-6 網頁美化

bwingnet — Mon, 08 Mar 2010 07:40:02 +0000

我們可以看到利用PHP設計出來的網站，看起來都非常的漂亮。可是當我們實際進行網頁設計時，可能會碰到一些問題，例如：「如何讓表格內的文字與表格有固定間隔？」、「如何讓網頁的超連結不要出現底線？」、「如何彈跳出訊息框？」、「如何讓表單進行驗證？」，只是這些在PHP書籍內，怎都看不到呢？因為這不是PHP所做的事情，所以在PHP書籍內是看不到的。但是這些卻很實用，使用者他不在意Server怎麼執行，但是會在意網頁顯示的品質與互動的效果。上述所說的這些問題，可以分成CSS與Java Script這兩部分。這兩個主題其實範圍很大，所以這裡將以PHP網頁設計者的角度，瞭解這兩者基本的使用以及如何加入已經設計好的CSS與JavaScript檔案或語法。之後的範例內都會依照網頁特性加入CSS或Java Script的運用。現在開始的所有範例，不論是html、php、css檔案，均是UTF-8編碼，請各位編輯時要注意網頁的編碼。此外，因考量到Windows與Linux兩種不同的環境，擷取的畫面將會以Firefox為主，網頁仍可在IE各版本顯示，並將視情況擷取IE各版本的畫面。葉建榮 jiannrong@gmail.com

[CSS]HTML5 Reset Stylesheet

hikaru — Tue, 02 Feb 2010 07:33:23 +0000

HTML5 Reset Stylesheet CSS reset是為了方便我們處理css layout跨瀏覽器平台，所面臨各家瀏覽器css預設值不一的情形，藉由css reset來解決此一問題。然後，在現階段各家瀏覽器紛紛支援HTML5之下，當然，css reset也要有所調整以應該新增加的tag。原始碼 /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, [...]

[HTML]Zen Coding

hikaru — Wed, 27 Jan 2010 10:03:33 +0000

A Speedy Way To Write HTML/CSS Code 在這篇文章，我們提出一種新的採用類似css selector語法來快速編寫html code，一種得心應手快速編寫html、css code的工具。我們先來看一個例子，原始碼如下： html:xt>div#header>div#logo+ul#nav>li.item-$*5>a 那麼，它輸出的結果將會是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> </head> <body> <div id="header"> [...]

[CSS]CSScaffold – Rapid CSS Development Framework

hikaru — Tue, 26 Jan 2010 08:48:28 +0000

CSScaffold是一個css的framework，但有別以往的css framework，它必須依靠php來輔助開發，但卻更為強大。 P.S.其環境必須要有的－PHP 5+、Apache Mod_rewrite。 Simple, but powerful 因為寫作的方式不同，所以開發的速度大幅提升，以下為其特色： Constants Mixins Nested Selectors Expressions Includes Iteration 讓我們看一下官方的簡介影片，就可以了解它有多神奇。 CSScaffold syntax 接下來讓我們研究一下官方的例子： Constants 我們可以定義好一些常數，比如常用的顏色、間距等。 @constants { normal_color:#eee; other_constant:10px; } body { color:!normal_color; } 那麼，它輸出的結果將會是： body { color:#eee; } 日後要修改時，只需要更改常數裡的值，全部都會更新，是不是相當方便呢。 Expressions #id { [...]

環天科技上市公司[網站上架]

eggggg — Mon, 04 Jan 2010 10:37:15 +0000

環天衛星科技 GlobalSat 連結：http://www.globalsat.com.tw/ 環天GSSPORT 連結：http://www.gs-sport.com/ 環天GS-TRAQ 連結：http://www.gstraq.com/