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

[jQuery] Animated Hover Effect (ahover)

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

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

4-5 PHP 接收表單資料

bwingnet — Thu, 29 Apr 2010 07:14:44 +0000

PHP接收網頁資料時會以陣列變數型態接收，那陣列變數是什麼呢？接下來：4-5-1 陣列變數葉建榮 jiannrong@gmail.com

4-2-4按鈕元件

bwingnet — Tue, 06 Apr 2010 08:16:56 +0000

前面提到那麼多的元件，但卻沒有提到按鈕。表單上若沒有按鈕，表單上的資料仍可以送出，只是要另外寫java script語法處理，會比較麻煩。<input type="submit">這一個按鈕元件會將表單內所有資料會送至表單的action指定的位置，而<input type=" reset ">按鈕元件則會取消表單上所有的資料。 submit與reset按鈕都有固定的功能，但如果想要一個按鈕，但想要自訂功能，那該怎麼辦呢？您可以有兩種方式設計，第一種是圖形化的按鈕：<input type="image" src="圖片名稱" onclick="按下後的動作">。另外一種是制式的按鈕：<input type="button" value="網頁上顯示的名稱" onclick="按下後的動作"> 【圖15、按鈕】這一個表單上會有四個按鈕，第一個按鈕按下後，您會得到「Hi」這樣的訊息，第二個按鈕是一個圖形，當您按下後，您會得到「按下圖形按鈕」訊息，而第三個按鈕會將表單內所有的元件送出，所以您會在網址列看到傳送出去的資訊，第四個按鈕則會重新設定表單的內容。接下來：4-3 變數的使用葉建榮 jiannrong@gmail.com

4-2-3 下拉式選單

bwingnet — Tue, 06 Apr 2010 08:11:10 +0000

選擇鈕與核選框雖然方便，倘若資料項目多，使用起來仍不方便，網頁上會佈滿選擇鈕或核選框，那有沒有更方便的方法呢？有的，透過下拉式選單的方式【圖14、下拉式選單】 <select>標籤是設定下拉式選單的標籤，在這個標籤內，我們可看到以下的屬性：屬性說明 name 下拉式選單的名稱。下拉式選單內傳輸的資料，都是以這裡的名稱來傳輸。 size 顯示下拉式選單內選項的高度，預設值為1，也就是只會顯示一個選項的高度。下拉式選單內的選項是以<option>標籤表示的。我們以<option value="9">士林夜市</option>為例，網頁上顯示「士林夜市」，但當您在下拉式選單選取了這個選項後，傳送的值為「9」（當然，option value的內容可以是中文的，這裡為了區別「傳遞的資料內容」與「顯示在網頁的文字」可以不同，所以才會如此設計。）。接下來：4-2-4按鈕元件葉建榮 jiannrong@gmail.com

4-2-2 選擇鈕與核選框

bwingnet — Tue, 06 Apr 2010 07:06:10 +0000

假設您要設計一個血型運勢分析的網頁，要讓網友輸入血型，您要讓他用單行文字框的方式輸入嗎？當然您可以這麼做，可是網頁上您必須寫若干的語法，判斷網友輸入的資料，是不是A、B、O、AB等四種血型，這樣網頁是不是會很複雜呢？而且，若網頁上都是單行文字框或多行文字框，大家在網頁上填寫資料好像在練習打字，很快地網頁瀏覽人數就會大幅下降。所以網頁表單上可提供固定的資料讓網友們挑選，若網頁上提供的是單選，我們得提供選擇鈕，若網頁上的選項是可複選，我們提供核選框。針對不同的資料，提供不同的網頁表單元件。我們來看若要設計一個可選擇性別與血型的表單，那該如何做呢？【圖12、選擇鈕】我們以<input type="radio">語法設計選擇鈕元件，在<input>標籤內，我們可看到以下的屬性：屬性說明 name 選擇鈕的名稱，若要讓多個選擇鈕成為「多選一」狀態，請將這幾個選擇鈕的name設定為相同的名字，例如上例中的性別，第五行與第六行的選擇鈕name都是sex。 value 選擇鈕的值，您也可以說這是選擇鈕的內容。當我按下選擇鈕，代表選擇了這個值。例如在上例中，我按下A型血型的按鈕，按鈕的value為A，代表我選擇了A。 checked 若加上此一選項，代表您已將這個選項設定為預設選項選擇鈕是單選，若要複選，可以選擇多個項目，請您改用核選框，就可進行複選。【圖13、核選框】我們以<input type=" checkbox">語法設計核選框元件，在<input>標籤內，我們可看到以下的屬性：屬性說明 name 核選框的名稱，每一個核選框的名稱均不同，這樣才可判斷選取了哪些核選框。 value 核選框的值，您也可以說這是核選框的內容。當我選取了核選框，代表選擇了這個值。 checked 若加上此一選項，代表您已將這個選項設定為預設選項了，例如4.htm的第六行，代表這個選項已經被挑選了。接下來：4-2-3 下拉式選單葉建榮 jiannrong@gmail.com

4-2-1 文字輸入元件

bwingnet — Tue, 06 Apr 2010 06:13:01 +0000

網頁表單上可讓使用者輸入資料，等輸入完資料，按下按鈕就可將資料送出。文字輸入元件共有三種：單行文字框text、密碼password與多行文字框textarea。首先我們看看text與password這兩種文字輸入元件：您可按下NetBeans的「Run」功能表內的「Run File」或是按鍵盤的「Shift」加上「F6」就可以進行網頁預覽，預覽完後請關閉網頁或該分頁，您就不需要開啟網頁後再輸入網址來做網頁測試。【圖10、文字框與密碼文字框】網頁裡的<br>標籤，指的是「換行」。text與password這兩個元件其實有幾個共通的屬性，在此介紹如下： name 要傳送資料的元件名稱，當表單把資料送出後，單行文字框或密碼文字框的資料，就以該元件的name作為名稱送出，後端網頁接收時就會以name作為接收的名稱。 size 顯示在網頁上的寬度，例如8個英文字母。 maxlength 可以輸入的最大文字數量，例如上例，代表只能輸入6個英文字母。 value 如果您希望單行文字框提供預設的文字，那請加上這個屬性就可以。所以請您試試看，上例中單行文字框與密碼文字框最多能輸入幾個字呢？如果單行文字框無法滿足您輸入資料的需求，那多行文字框textarea必可滿足您的需求，我們來看以下的範例【圖11、多行文字框】既然是多行文字框，代表輸入的畫面大小不侷限於單行，因此我們可在<textarea>標籤內設定rows（列，或「高」）與cols（行，或「寬」）的長度。而<textarea>標籤內的name代表傳送資料的元件名稱，當表單把資料送出後，多行文字框的資料就以該元件的name作為名稱送出，後端網頁接收時就會以name作為接收的名稱。多行文字框的<textarea>標籤必須成雙成對，必須要有</textarea>作為結尾。接下來：4-2-2 選擇鈕與核選框葉建榮 jiannrong@gmail.com

4-2 表單設計

bwingnet — Tue, 06 Apr 2010 03:52:33 +0000

當我們想把表單上所有元件的內容送至我指定的檔案，我們需要在表單<form>這一個標籤內做以下的設定：屬性說明 action 指定此表單資料要送到哪裡，您可以指定一個php檔案，或送到一段java script語法內處理。 method 指定此表單所送出的資料要以什麼樣的方式送達，傳送方式有get與post兩種方式。 charset 傳送資料時的編碼，因PHP與MySQL均支援utf8，所以建議傳輸資料時能建議設定編碼為utf-8。 name 表單的名稱表單上的元件可分為文字輸入、選擇鈕與核選方塊、下拉式表單、按鈕等四部份。這些元件都必須放在標籤<form>至</form>之中，元件大都以<input type=元件名稱>的方式來命名。接下來：4-2-1 文字輸入元件葉建榮 jiannrong@gmail.com

[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的工具。我們先來看一個例子，原始碼如下：那麼，它輸出的結果將會是：一行簡短看似css selector的code竟然能產生這麼完整的html code，是不是很不可思議、很神奇呢！底下有一個官網簡介的影片，可以快速帶我們進入Zen Coding的世界，就讓我們來觀看此影片吧。 Zen Conding Demo 看完影片後，我們可以先暖身一下，線上demo一下，體驗Zen Coding的威力。 Demo（使用Ctrl + ,才展開html code） Zen Coding Downloads (Full Support) Aptana (跨平台的html編輯器) Coda, via TEA for Coda (Mac) Espresso, via TEA for Espresso (Mac) 以上列舉的IDE皆可以完整支援Zen Coding的所有功能。 [...]

3-5 網頁註解

eggggg — Tue, 08 Dec 2009 08:39:54 +0000

當我們撰寫網頁時，總是會碰到問題，我該如何將問題記錄下來呢？或者，我們無法將網頁寫完，必須做一個結束的動作，那我該如何提醒自己，網頁進行到哪裡呢？我們將utf8.php略做修改，並且，在<? ?>這個區塊內，我們可以如此寫下註解（檔案名稱：「3」資料夾內「utf8_part2.php」） 01 <html><head> 02 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8″> 03 <title>utf8編碼，且用utf8的meta標示</title> 04 </head><body> 05 <? //這是單行的註解，只有一行 06 echo "功"; 07 /* 08 許蓋功這幾個字因為編碼衝突的關係，所以無法在PHP內使 09 用。其實使用UTF-8就很方便了啊～ 10 */ 11 ?></body></html> 所以妥善的加入註解，可以幫自己整理重點，而且當程式有問題時，也可以藉此將問題寫下。如果可以把問題寫下，代表您知道問題在哪？就可以用比較快的方式找到解答，在寫註解的過程中，說不一定就找到答案！而PHP的註解，瀏覽器上看不看的到呢？請各位試試看嚕！接下來：3-6 網頁美化葉建榮 jiannrong@gmail.com

3-2 網頁編碼很重要嗎？

eggggg — Tue, 08 Dec 2009 07:38:11 +0000

各位經常瀏覽網頁，不覺得網頁編碼是很重要的事情，但是在PHP與MySQL的世界裡，網頁編碼是很重要的事情！ PHP5時代支持UTF-8編碼，而PHP6則將UTF-8設定為預設編碼，對於東亞地區雙位元的文字，可提供更好的支援。MySQl 4.1版之後不僅支持UTF-8編碼，而且更進一步地可在資料庫、資料表、欄位上設定語系，也可在查詢時指定語系。因為MySQL4.0（含）之前是不管編碼（預設是latin1）的，網頁要如何顯示，是交由html的<meta>標籤與編碼格式來決定的。所以MySQL的這一個改變，讓很多網站在升級之後，就會變成亂碼顯示。但MySQL為何要這樣做呢？MySQL這樣做的目的，是讓您可在一個資料庫內存放不同編碼的資料。所以網頁必須設定好編碼，PHP才可依照您指定的編碼作資料存取，但如果沒有設定好，那網頁或者資料庫裡將變成火星文而難以閱讀。很多人不願讓PHP與 MySQL升級，就是因為編碼。其實，隨者網路的發達，除非您的網站有特別限制，否則可預期會有來自全球各地的朋友觀看您的網頁或留言。很多公司現在將公司的部門分散在全球各地，或者要滿足全球各地的客戶，網頁上必須能顯示正體中文、簡體中文、日文、泰文，那該怎麼辦？一個網頁只能顯示一種編碼的文字，所以若一個網頁內需包容多個語系的文字，您可能會將其他編碼文字用圖片方式顯示，但這樣的處理方式，其實是很麻煩的。假如使用UTF-8，就可以解決這個問題，將所有文字全部都包含進去。因此不論您使用哪一個地區的文字均可用相同的編碼顯示。 PHP與Big5編碼裡裡的若干文字有語法上的衝突，更是讓我們不得思考是否要將編碼改為UTF-8。 Big5編碼設計時用兩個Bytes來代表一個中文字，例如「淚」這一個字的編碼是"B25C〞。每個中文字的第一個Byte使用ASCII裡的高字元(129-255)，第二個Byte用到了部分低字元(1-128)，但沒有排除ASCII的控制碼，所以這樣的設計也成為日後各種資訊應用上不便的原因。 5C這個編碼就是「\」，在PHP裡面是被拿來當跳脫字元使用，也就是說當變數裡有單引號或雙引號時，為了可以正確顯示這些特殊字元，通常需要多加一個「\」，例如以下的範例，而這裡的「echo」指將後面的文字回應在網頁上。（檔案名稱：「3」資料夾內「abctest.php」） 01 <html><head><title>第一個PHP網頁</title> 02 </head><body> 03 <? 04 echo "\"nabc test"; 05 ?></body></html> 網頁上原本應該顯示 \"nabc test，但實際上，您在瀏覽器上會看到：【圖3 網頁內顯示：”nabc test】我們回頭檢視剛剛設計的big5.php，問題出在哪裡呢？因為功的第二個Byte是 5C ，加上後面接的是雙引號，因此經過解譯之後，最後面的雙引號被認定為文字，進而造成語法少了最後那個雙引號，所以才會出現問題。也許各位想用函數的方式做文字的過濾，讓中文字能順利顯示，但這樣處理的方式，其實會增加網頁維護的困難度，Unicode的環境既然是不能避免（Linux環境早就是Unicode編碼），PHP與Big5在編碼上既然有衝突，且MySQL又預設為UTF-8編碼，那麼我們應該趁早準備，早點將網頁與資料庫改為UTF-8編碼。接下來：3-3 將網頁轉換成UTF-8 葉建榮 jiannrong@gmail.com