網頁設計

網頁設計 http://blog.roodo.com/rss20/topic/topic_article_175.xml HTML XML XHTML Blog RSS JavaScript JSP PHP ASP MySQL MSSQL Dreamweaver zh-tw Roodo Blog System All Rights Reserved 安裝Jommla! 論壇元件FireBoard / 簡睿隨筆《科技篇》以下是安裝Joomla! 論壇元件 FireBoard 的備忘重點（示範論壇在此）：由此處下載FireBoard 1.0.5版，並以管理區【新增或移除程式】→【元件】安裝由此處下載中文版檔案，將檔案解壓縮到安裝目錄裡（如c:\xampp\ htdocs\myweb）。這個中文版本是在這裡找到的，感謝 Mike Ho 的分享。 FireBoard安裝並設置好後，必須新增一個選單項目，使該項目能連結到FireBoard前台網頁：增加一個選單項目，並選擇項目類型為「元件」；若要將FireBoard開啟到新分頁或新視窗，則選「連結 - 元件項目」。選擇好後按〔下一頁〕再輸入論壇名稱與要連結的元件（當然就是FireBoard Forum了）。 ## http://blog.roodo.com/emisjerry/archives/6500199.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 13 Jul 2008 19:22:03 +0800 進階點的統計元件：JoomlaStats / 簡睿隨筆《科技篇》雖然Joomla!有預設的統計功能，但過於陽春，以下是安裝進階點的 JoomlaStats 的步驟：由這裡下載JoomlaStats元件V2.2.1版本，由功能表【新增或移除程式】，用【元件】安裝由這裡下載JoomlaStats的啟動模組(2.x)，由功能表【新增或移除程式】，用【模組】安裝由這裡下載JoomlaStats的計數器模組，由功能表【新增或移除程式】，用【模組】安裝元件安裝後，由功能表【元件】→【JoomlaStats】→【設置】做細部設定。模組則記得由功能表【網站模組】裡做〔發佈〕設定，啟動模組不需要顯示標題，計數器模組顯示的英文可以在其編輯網頁裡自動修改成中文。 ## http://blog.roodo.com/emisjerry/archives/6499791.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 13 Jul 2008 16:25:33 +0800 解決Joomla! 突然出現的鎖定圖示 / 簡睿隨筆《科技篇》剛開始使用Joomla!時，對於偶爾出現在清單裡的鎖頭圖示總會覺得疑慮、困惑，不知為何會出現，也不知為何突然又消失。最後才找到解答。當我們在編輯某個項目時，Joomla!會先將之鎖定，鎖定完成後才會進入編輯狀態，當我們不正常的離開編輯狀態時，這個鎖頭圖示就會出現。而所謂的「正常操作」指的是必須要用〔儲存〕或〔取消〕來離開編輯狀態，若不小心關閉視窗或按了回上頁按鈕，那麼這個項目就會保持在鎖定狀態下。要脫離不正常的鎖定狀態有兩個方法：再進入被鎖定項目一次，再正常的〔儲存〕或〔取消〕管理區功能表→【系統】→【全站回存】 ## http://blog.roodo.com/emisjerry/archives/6481055.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 11 Jul 2008 22:16:21 +0800 Joomla! 1.0.12網站建置4－啟用統計模組 / 簡睿隨筆《科技篇》啟動Joomla!內建的統計功能有兩個步驟：管理區功能表→控制台→全站設定→〔統計〕頁籤統計：是依日期記錄內容點擊：是記錄搜尋關鍵字：是按右上方的〔儲存〕管理區功能表→模組→網站模組，點擊「統計」版面位置：依需要指定位置，如left 已發佈：是伺服器資訊：依需要選擇「是」或「否」網站資訊：依需要選擇「是」或「否」點擊計數器：依需要選擇「是」或「否」計數器開始於：起算的點擊數設定好後即能由前端網頁的指定位置看到統計數據了。 ## http://blog.roodo.com/emisjerry/archives/6365643.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 06 Jul 2008 11:03:32 +0800 Joomla! 1.0.12網站建置3－如何預覽版面位置 / 簡睿隨筆《科技篇》當我們安裝了一個新的佈景主題樣板時，可以透過管理區功能表【網站】→【預覽】→【顯示位置並嵌於其中】來檢視樣板的版面位置，有了這些位置提示，才方便在模組設定裡指定其顯示在版面上的位置。我們由【模組】→【網站模組】中把「熱門文章」模組位置移到「user1」，「最新消息」模組的位置由右側移到「user2」區域，只要在其設定網頁裡把版面位置選成user1或user2即可。修改後的成果請檢視 http://jdev.tw/joomla 。 ## http://blog.roodo.com/emisjerry/archives/6363059.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 05 Jul 2008 23:51:24 +0800 Joomla! 1.0.12網站建置2－安裝佈景主題樣板(多圖) / 簡睿隨筆《科技篇》 Joomla! 1.0.12網站建置2－安裝佈景主題樣板版本：2008/07/05 V1.0.1 作者：簡睿版權：歡迎轉載，但請註明作者與來源連結 Joomla! 網頁的外觀是使用樣板（Templates）來管理的，只要更換樣板，就能把網頁的樣式與呈現都改變掉，在本文我用Free的樣板： JSN Epic Free 2.0 來示範如何輕易的變更網站的外觀。下載資訊 JSN Epic Free 2.0 商業使用必須購買PRO版本（美金25元）將檔案下載並解壓縮到暫存目錄後，可以發現有兩個子目錄：for_joomla_10是給Jomla! 1.0.x使用，而for_joomla_15則是給Joomla! 1.5使用，我們使用的是1.0的版本。首先要安裝的是擴充模組exmenu（Extended Menu），用來擴充選單功能的套件。我們可以把Jommla!的模組（Modules）視為Blog系統裡的側邊欄位（或稱插入欄位、自由欄位），不同的模組會以不同的樣式顯示在前端的網頁裡。Joomla!另一個重要的元件是選單，透過選單我們才能建立各個網頁之間的連結。下列步驟複製已經存在的mainmenu而新增一個選單toolbarmenu：管理區功能表→【選單】→【選單管理】點選「mainmenu」，再按右上方的〔複製〕新選單名稱：toolbarmenu 新模組名稱：toolbarmenu 選單名稱是其選單的唯一名稱，模組名稱則是顯示在【模組】→【網站模組】裡的項目名稱 Joomla!預設的選單模組是「mod_mainmenu」，它的功能較為簡單，我們可以上載擴充模組「exmenu」來取代預設的選單模組。這裡要能分辨選單和選單模組的差異，選單模組是把選單呈現在前端網頁的設定，二者不要混淆了。首先將 jsn_epic_free_2.0_unzip.me.first.zip解壓縮，我們需要的檔案是解開的for_joomla_10\ mod_exmenu.zip。請依下列步驟來安裝exmenu模組：安裝exmenu模組登入管理區後，點選功能表【新增或移除程式】→【模組】，表示要新增模組。先用〔瀏覽...〕找到上述下載來的mod_exmenu.zip檔案後，再按〔上傳檔案＆安裝〕稍待一會後就會出現安裝資訊的繼續網頁，按「繼續...」在新增模組網頁往下捲動能看剛安裝的mod_exmenu模組的話，就是安裝成功了。由此例可以了解模組的名稱固定皆以 mod_ 開頭。新增兩個Extended Menu模組在一個Joomla!的網頁裡我們可以同時建立多個選單與選單模組，因此我們可以複製mod_exmenu再針對複製後的新模組來修改。複製 mod_exmenu的步驟如下：在功能表裡找到【模組】→【網站模組】→勾選「Extended Menu」按右上方的〔複製〕圖示在「Extended Menu」下方會出現「Copy of Extended Menu」點擊「Copy of Extended Menu」連結以進入本項目的設定網頁，依下列指示修改欄位：標題：修改成此項目的標題，如「Ext Toolbar選單」版面位置：toolbar 已發佈：變更成「是」 Menu Name：在此處指定要合用的選單代碼，請先選用「toolbarmenu」按右上方的〔儲存〕將上列變更儲存起來再建立另一個名為「Ext 主選單」的Extended Menu模組：在功能表裡找到【模組】→【網站模組】→勾選「Extended Menu」按右上方的〔複製〕圖示在「Extended Menu」下方會出現「Copy of Extended Menu」點擊「Copy of Extended Menu」連結以進入本項目的設定網頁，依下列指示修改欄位：標題：修改成此項目的標題，如「Ext 主選單」版面位置：left 已發佈：變更成「是」 Menu Name：在此處指定要合用的選單代碼，請先選用「mainmenu」按右上方的〔儲存〕將上列變更儲存起來安裝新的佈景主題 Joomla!的模組分成網站與管理區兩大類，分別用來設定前端網站和後端管理區的佈景。管理區的樣板是管理人員在使用的，現有的應該足夠使用，建議不要修改，只要變更一般訪客會看到的前台網頁樣板即可。以下為新增 JSN Epic Free 2.0 佈景樣板到Jommla!前端網頁的步驟：由Joomla!管理區功能表→【安裝或移除程式】→【佈景主題 - 網站】進入佈景主題維護網頁按〔瀏覽〕並找到要上傳的 for_joomla_10\jsn_epic_free_2.0_j10.zip ，選取好後按〔上傳檔案＆安裝〕看到上傳「template - 成功」字樣後按〔繼續 ...〕點選「JSN_Epic_Free」後按右上方的〔預設〕，以啟用此佈景主題重新整理前端網頁，網站已經套用新的佈景樣板了依新佈景來設置網站安裝網站的小圖示網站小圖示指的是顯示在瀏覽器網址左側的圖形，我們可以依下列步驟把自己設計的圖示顯示在自己的網站上：使用圖示製作工具產生16px X 16px的.ico檔案，檔名固定為favicon.ico 把favicon.ico複製到「Joomla!安裝目錄\images」資料夾裡如果重新整理後看到的圖示仍未改變的話，先清除瀏覽器的暫存檔案後再檢視應該就OK了設定上方的標題區變更Logo圖示我們先使用功能表→【網站】→【媒體管理者】新增一個存放圖檔的新目錄（如建立JERRY目錄），再把要做為網站首頁Logo的圖檔上傳到此目錄裡再由【網站】→【佈景主題管理】→【網站佈景主題】點選「JSN_Epic_Free」後按右上方的〔編輯HTML〕網頁顯示jsn_epic_free/index.php的檔案內容，找到$logo_path後，將其路徑修改成新增目錄的 Logo檔名將 $logo_path = "templates/jsn_epic_free/images/logo.png"; 改成 $logo_path = "images/JERRY/logo.png"; 依新的logo圖檔的尺寸大小修改$logo_width與$logo_height。修改後記得按右上方的〔儲存〕當然直接用文書編輯程式修改樣板的index.php是更快的方法，檔案完整路徑是c:\xampp\htdocs\ Joomla目錄\templates\jsn_epic_free\index.php 增加Suckerfish選單接著在Logo圖形下方加入下拉式功能選單。由管理區功能表→【模組】→【網站模組】找到先前建立的「Ext Toolbar選單」，點擊以進入設定網頁顯示標題：否版面位置：toolbar Menu Class Suffix：修改成「-suckerfish」 Expand Menu：是確認「Enable Menu Template」為「是」迄今的成果如下圖所示，中間的黑色長條就是「toolbar」區，顯示的是「Ext Toolbar選單」模組：增加圖片展示區我們準備在標題區加入圖片展示區域，要使用的是JSN ImageShow模組。由 http://www.joomlashine.com/index.php?option=com_docman&task=doc_download&gid=3&Itemid=39 下載JSN ImageShow Free模組由管理區功能表→【新增或移除程式】→【模組】上傳並安裝 mod_jsn_imageshow_free_1.0.6_j10.zip 由【模組】→【網站模組】裡找到JSN ImageShow Free點擊之以進入設定網頁顯示標題：否版面位置：header 已發佈：是 Height(px)：250 Image Folder：預設是/images/stories，我們可以用媒體管理建立新的目錄，再將之改成新的目錄（如images/photo，實體路徑是 c:\xampp\htdocs\Joomla目錄\images\photo），要展示的圖片即存入指定的目錄裡；JSN ImageShow Free版本最多只能顯示10個圖片，若需要更多功能則請購買PRO版本把圖片複製到images/photo裡後重整前端網頁就能看到圖片的展示特效了。在設定網頁裡有更多的設定請自行測試、研究。設定左方側邊欄位變更主選單樣式 JSN Epic樣板有三種選單格式：Suckerfish、BulletTree與DivBar，Suckerfish menu在前文已出現過，現在再來設定BulletTree式的選單樣式：管理區功能表→【模組】→【網站模組】，找到「Extended Menu」後複製成「Ext 主選單」修改「Ext 主選單」模組：顯示標題：否版面位置：left Menu Class Suffix：-bullettree Module Class Suffix：-box box-grey Expand Menu：否按右上方的〔儲存〕變更登入表單樣式在【模組】→【網站模組】裡點選「登入表單」模組變更下列欄位的設定值：模組CSS字尾：-box box-green icon-user 按右上方的〔儲存〕變身前變身後設定右方側邊欄位變更投票樣式在【模組】→【網站模組】裡點選「RSS新聞供稿」模組變更下列欄位的設定值：模組CSS字尾：-box box-blue icon-selection 按右上方的〔儲存〕變身前變身後停止發佈不需要的模組再由【模組】→【網站模組】裡把不需要的mod_mainmenu的所有模組都停止發佈，操作後前端網頁裡就看不到這些預設的選單了；找出所有 mod_mainmenu模組的方法是由右上方的「- 選擇類型 -」裡選取mod_mainmenu。再將「新聞快報」模組的版面位置由top改為right。最後成果最後的網頁成果如下或拜訪 http://jdev.tw/joomla 檢視： ## http://blog.roodo.com/emisjerry/archives/6357769.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 05 Jul 2008 20:22:28 +0800 Joomla! 1.0.12網站建置（多圖） / 簡睿隨筆《科技篇》由於專案需求，必須在短時間裡建置企業網站，為了建站效率與日後的擴充彈性，因而挑選了先前小試過的PHP CMS系統： Joomla! （「逐浪」）來加速建置的速度。 Joomla!最新的版本是1.5.3，但較多人使用與有較佳套件的卻仍是1.0版本，因此幾經考慮後，最終使用了 1.0.12 A+無障礙版本來使用，為了留下建站的記錄與學習歷程因而陸續完成了這些文字，或許對剛踏入Joomla!的同好也能有些幫助。另外要向讀者致歉的是本人對於PHP與MySQL並未有非常深入的了解，因此若文內有謬誤之處，敬請通知我修改，感謝。要建置Joomla!網站可以區分成幾個步驟：安裝運行環境，主要是Apache Web Server、PHP與MySQL，我使用的是 XAMPP 整合系統設定MySQL帳號密碼安裝Joomla! 1.0.12 基本設定安裝擴充元件與模組安裝XAMPP 1.6.6a 下載： XAMPP Windows版本執行下載回來的執行檔後，依步驟指示安裝；按〔下一步〕。指定安裝資料夾，建議使用預設的C:\XAMPP，以免後續還要做額外的調整。資料夾指定好後按〔下一步〕。為方便執行，建議將圖示放到桌面上。若要把Apache、MySQL或FileZilla安裝成服務的話，將最下面的三個選項都打勾即可，若你是初學者的話，建議用應用程式的方式執行，不要勾選成服務。安裝選項勾選好後按〔Install〕。檔案複製完畢後，按〔Finish〕結束安裝程序。安裝結束後會彈出對話窗，詢問是否要進入XAMPP的控制台，請按〔是〕以啟動系統來做測試。先按MySQL右側的〔Start〕按鈕，再按Apache的〔Start〕按鈕，以啟動MySQL與Apache。啟動成功後會出現【Running】字樣，按鈕會變成〔Stop〕。按右上角的〔X〕符號會將視窗縮小到System Tray，要真正的結束系統必須按〔Exit〕按鈕。 Apache與MySQL啟動成功後，在瀏覽器網址列輸入 http://localhost 或 http://127.0.0.1 以顯示XAMPP的主網頁，若能看到XAMPP的內容的話，恭喜你，第一個大步驟已經正確安裝了。如果不幸無法顯示網頁內容，查看看是否有啟動了別的程式，把網頁使用的80通訊埠佔住了（常見的是IIS已先啟動而佔用了80埠），將之排除後再試。點擊XAMPP的中文網頁可以看到XAMPP更多的功能與資訊。設定MySQL帳號密碼為了讓後續Joomla!安裝過程能順利的建立資料庫，我們必須先設定好MySQL的管理帳號 root 的密碼，對MySQL的管理我們可以透過phpMyAdmin網頁來操作，只要在瀏覽器網址輸入 http://localhost/phpmyadmin 即可。進入phpMyAdmin網頁後，點擊網頁下方的「權限」連結。找到修改密碼的地方後，按最右側的修改按鈕，逐一把root的密碼設定進去。輸入兩個相同的密碼後按〔執行〕。看到下面的畫面表示root的密碼已設定成功了。接著就準備開始安裝Joomla!的程式了。再瀏覽一次 http://localhost/phpmyadmin檢查是否密碼有設定成功，若不幸的看到錯誤網頁，則修改 c:\xampp\phpMyAdmin \config.inc.php 第21行，把密碼直接填入等號右側的單引號裡面，再重新試一次。安裝Joomla! 1.0.12無障礙A+版下載： 1.0.12 台灣無障礙A+版 XAMPP的文件根目錄是 C:\XAMP\HTDOCS ，只要在此資料夾裡新增子目錄就能建立一個新的同名網站，例如：新增資料夾瀏覽網站 md  c:\xampp\htdocs\ myweb 用 http://localhost/ myweb 瀏覽新建的網站把下載而來的Joomla_1.0.12-Stable-Full_Package_TaiwanWA_aplus.zip解壓縮到 c:\xampp\htdocs\myweb，在瀏覽器裡輸入 http://localhost/myweb 就能直接進入Joomla! 1.0.12的安裝網頁。在正式安裝Joomla之前，請先修改下列檔案，使建立的資料庫是正常的UTF-8版本，否則中文會變成亂碼而無法閱讀（網頁顯示正常，但用http://localhost/phpmyadmin瀏覽資料庫時是亂碼，匯出資料時也是亂碼）。下列修改是參考 http://www.joomla.org.tw/phpbb3/viewtopic.php?f=63&t=2225 的教學而來的，若仍有問題請直接到該網站查找。修改中文亂碼問題修改的第一個檔案： c:\xampp\htdocs\myweb\includes\database.php 修改行號：第101行-102行修改前： $this->_table_prefix = $table_prefix; //@mysql_query("SET NAMES 'utf8'", $this->_resource); 修改後： $this->_table_prefix = $table_prefix; if ($this->isSupportUtf8()) {   mysql_query("SET NAMES 'utf8'", $this->_resource); } 並增加新的函數isSupportUtf8 /** * @return bool check if mysql support utf8 or not */ function isSupportUtf8() { // from dotproject 2.1rc1 Chinese Mark Wu   // check mysql version. Version lower than 4.1.1 doesn't support utf8   if (mysql_get_server_info($this->_resource) < '4.1.1') return false;   // check if utf8 support was compiled in   $result = mysql_query("SHOW CHARACTER SET like 'utf8'",$this->_resource);   if (mysql_num_rows($result) > 0) {       return true;   }   return false; } 修改的第二個檔案： c:\xampp\htdocs\myweb\installation\install2.php 修改行號：第67行修改前： $sql = "CREATE DATABASE `$DBname`"; 修改後： if ($database->isSupportUtf8()) {   $sql = "CREATE DATABASE `$DBname` CHARACTER SET utf8 COLLATE utf8_general_ci"; } else {   $sql = "CREATE DATABASE `$DBname`"; } 安裝Joomla! 第一次在網址輸入 http://localhost/myweb就會進入安裝網頁，選好【繁體中文】後按〔下一步〕。顯示安裝前檢查網頁，按〔下一步〕。顯示授權規定，按〔下一步〕。輸入MySQL的資料庫設定。依下列範例輸入資料庫相關資料：主機名稱 localhost MySQL 帳號一般是root，請全部用小寫 MySQL 密碼自行輸入密碼 MySQL 資料庫名稱自行輸入，可與網站名稱相同以方便管理 MySQL 資料表前綴字使用預設的jos_即可做最後確認，按下，〔確定〕後就開始安裝資料庫myweb。在步驟2裡輸入你的網站描述。逐一輸入需要的資料。此處的密碼是網站的管理帳號admin登入管理區時使用的密碼。到了步驟4表示網站已經順利的建立成功了，最後要再做一個動作好讓網站能正常使用：將Joomla!的安裝目錄刪除，但為了能再重新安裝，建議不要把安裝目錄刪掉而只要做改名即可，即把 c:\xampp\htdocs\myweb\installation 改名成 c:\xampp\htdocs\myweb\installation-bak（改名的目錄名稱可以是任何名稱）。瀏覽器網址輸入 http://localhost/myweb，若安裝正確即能顯示網站內容：若使用http://localhost/myweb/administrator 則能進入管理區，輸入安裝步驟7裡輸入的密碼後，即能看到管理網頁內容。如何重新安裝Joomla! 只要依照下列步驟就能重新安裝Joomla!：把 c:\xampp\htdocs\myweb\configuration.php 刪掉或改名把改名的c:\xampp\htdocs\myweb\installation-bak改回c:\xampp\htdocs\ myweb\installation 用 http://localhost/phpmyadmin 把資料庫myweb刪掉重新依安裝程序再執行一次驗證資料庫中文編碼是否正確使用http://localhost/phpmyadmin連接MySQL來檢視資料庫的中文編碼是否是正確無誤的UTF- 8。首先點選要檢視myweb資料庫。依序瀏覽jos_content的資料內容，若能正確看到中文表示編碼是正確的。版本：2008/06/22 V1.1 作者：簡睿版權：歡迎轉載，但請註明作者與來源連結 ## http://blog.roodo.com/emisjerry/archives/6214125.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 22 Jun 2008 16:55:37 +0800 JEvents中文化修改 / 簡睿隨筆《科技篇》 Joomla! 1.0.12中文版安裝 JEvents 1.4.3行事曆元件後，發現活動的日期格式都是美語格式，必須針對下列兩個檔案做修改： 1.修改日期格式修改檔案：c:\xampp\ htdocs\XXX\components\com_events\events.class.php 把mosEventDate::getDateFormat函數改掉，以形成中文格式。把函數裡的 return strftime("%A, %B %d %Y",$datestp); 加工成 $date = strftime("%Y/%m/%d, %A",$datestp); return changeWeekday($date); %A傳回英文的星期名，自行寫個轉中文的changeWeekday： function changeWeekday($date) { $cweek = array("一","二","三","四","五","六","日"); $eweek = array("Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"); for ($i=0; $i<=6; $i++) { //echo "i=" . $i . " eweek=" . $eweek[$i]; $pos = strpos($date, $eweek[$i]); if ($pos != false) { $date = str_replace($eweek[$i], "週".$cweek[$i], $date); break; } } return $date; } 2.月曆活動字串有亂碼修改檔案：c:\xampp\ htdocs\XXX\components\com_events\events_calendar_cell.php  月曆格式取出的活動字串預設只取20個字元，但因為UTF-8裡一個中文字取3個字元，造成取子字串函數SUBSTR取成亂碼，必須將SUBSTR改成 MB_SUBSTR才行： $tmpTitle = mb_substr( $title, 0, $cfg->get('com_calCutTitle'),"UTF-8" ) . ' ...'; ## http://blog.roodo.com/emisjerry/archives/6207433.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 20 Jun 2008 22:57:39 +0800 語法備忘 / Danny*2b Roodo!™ 語法備忘 http://blog.roodo.com/daicccc/archives/4737975.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 01 Feb 2005 12:33:31 +0800 [Web Gallery] 鬼打牆的網頁設計? / waking 最近逛網站發現歪果人的網頁設計，不管是美感還是技術都遙遙領先台灣。不過看了這麼多作品，不免出現鬼打牆的錯覺，流行的風格或許也可呈現網頁的"時效性"特點? 只是拜託設計師們，不要再用葉子當設計元素了，那是2005年的老梗了吧...還有，除了咖啡，你們就不能喝點別的嗎? http://www.haus-hoyer.de/ http://photomatt.net/ http://www.horaciotorrent.com/ http://legamestravels.altervista.org/ http://www.gnvpartners.com/web/ http://www.ichik.ru/design/ http://www.kinoz.com/ http://blog.roodo.com/waking_life/archives/4306441.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 15 Oct 2007 01:04:24 +0800 [HTML&CSS] 鎖定左側功能選單，不隨頁面捲動 / 簡睿隨筆《科技篇》為了把簡睿常用的工具網頁變更成更好閱讀的的樣式：用左右兩欄式，左側置放功能選單，右側則為主要內容。為了方便套用，特別先製作一個簡單的樣板，在此留下記錄也提供給有相同需求的讀者參考。 (按圖開新窗放大) 左側與右側各置放一個<div>，其ID分別為left與right，在left上在疊放另一個<div id="menu">，主要的控制就是把left的 position 設定固定( fixed )，這樣就能把此區域鎖定在網頁上，不隨著右側內容的捲動而移動。IE則必須針對overflow做控制才能正確顯示。測試網頁的執行請瀏覽這裡。 (樣板結構參考： http://www.pixelbeat.org/cmdline.html ) 測試網頁源碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>鎖定左側功能選單，不隨頁面捲動</title> <script> // 點擊功能選項時變更SPAN1顯示內容 function menu(i) { document.getElementById('SPAN1').innerHTML = "第"+i+"選項被按"; } </script> <style type="text/css"> body { margin: 0em; padding: 0em; } #right { padding: 1em; height: 100%; margin-left: 11em; font-size: small; width: auto; text-align: justify; } #left { background: #3399ff; position: fixed; top: 0; left: 0; width: 9em; height: 100%; color: black; z-index: 3; } #menu { background: #3399ff; position: absolute; top: 0; left: 0; width: 9em; color: black; z-index: 2; height: 100%; } #menu a { padding: 2px 2px 2px 4px; background: #3366ff; display: block; text-decoration: none; text-align: left; color: #ffffc0; margin-bottom: 1px; } #menu a:hover { background: #3300ff; color: #ff00ff; } </style>  </head> <body>  <div id="right"> <span style='font-size:20px'>鎖定左側功能選單，不隨頁面捲動</span><br> <span id="SPAN1" style="color:red;"></span> <table border="1"> <tbody> <script> for (var i=1; i<=100; i++) { document.write("<tr><td>第" + i + "列</td></tr>"); } </script> </tbody> </table> </div> <div id="left"> <div id="menu"> <script> for (var i=1; i<=10; i++) { document.write("<a href='javascript:menu("+i+")'>第"+i+"選項</a>"); } </script> </div> </div> </body> </html> dp.SyntaxHighlighter.HighlightAll('code'); http://blog.roodo.com/emisjerry/archives/2960353.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Thu, 05 Apr 2007 20:37:21 +0800 看戰文學英文 / waking 全文在此－10 CSS Tips from a Professional CSS Front-End Architect 其實好像很多類似的CSS文章。不過這篇有趣的是，他老兄被嗆了，首先是稱呼自己是"Architect"，再來是內容有錯字、文筆不通，更糟糕的是寫CSS的文章，結果自己的部落格版面亂掉，底下來有人說：A geeky article that doesn't work in Firefox is beyond insane XD。原本標題是10 CSS Tips from a Professional CSS Architect ，應該是犯了眾怒才換成 Front-End Architect (有差嗎?)裡面的幾點還被讀者拿出來質疑正確性，在 digg 上也被嗆了，雖然這篇文章還蠻有參考價值的，不過還是看毒舌比較有趣。 http://blog.roodo.com/waking_life/archives/2662956.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 22 Jan 2007 17:03:24 +0800 Browsershots / waking 以前我做網頁習慣用FF＋IE tab預覽，另外灌IE 7(FF裡的IE Tab顯示效果好像跟實際的IE7還是有差別)，如果再龜毛一點就網路連線用Mac+別台電腦試看。今天逛網看到一個好用的網站， browsershots ，可以幫你把網站在各瀏覽器的效果screenshot下來給你看(可惜沒有Mac IE 5)，不過第一次submit一個網站可能要排隊排很久，之後更新預覽速度就比較快了，你的網站預覽會放在http://browsershots.org/website/http://你的網址#success。如果太閒也可以逛逛它的screenshot專區，看看人家走位嚴重的網站也別有風情。BTW網站會走位並不是用CSS排版的關係，重點是瀏覽器沒有依據網站標準計畫開發，所以才會有一堆針對各種瀏覽器的Hack，很多人剛開始接觸CSS就先被這些Hack倒盡胃口，數落CSS的不是，哭著跑回表格排版的懷抱XD。不過 IE 7 總算有誠意遵循Web Standards，解決為人所詬病的Box Model等等的問題。不然大家都改用Firefox，網頁設計就不會那麼麻煩了。不過過渡時期的爛瀏覽器也造就了很多創意CSS用法&Hack神人，有可能之後CSS3加上新一代統一支援CSS的瀏覽器，會讓這些技術無用武之地，到時應該人人都是網頁設計小高手了吧。 http://blog.roodo.com/waking_life/archives/2658510.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 19 Jan 2007 21:39:27 +0800 網站工具 - 網站瀏覽分析 / ch3128 今天再線上看到一篇文章, 覺得不錯, 轉貼過來供大家跟我自己參考... 來源出處：葉-Joe的生活印記 (Yahoo! 奇摩部落格) http://blog.roodo.com/ch3128/archives/2175985.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Thu, 21 Sep 2006 11:07:10 +0800 Adobe MAX 2006 / ch3128 一年一度的 Adobe MAX 2006 研討會活動訊息請按此連結到官方網站有興趣的可以報名參與喔! http://blog.roodo.com/ch3128/archives/2149673.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 15 Sep 2006 11:20:23 +0800 [Ruby 筆記] Rails 於 lighttpd 上的設定 / syshen's blog 這篇主要是根據昨晚設定時的 try and error 的經驗寫出來的。 Ruby on Rails 基本上可以藉由 Fastcgi 套用到各種 Web server 上，像是 Apache 或者 lighttpd 等，其中 Ruby on Rails 的作者又大力推崇 lighttpd，它有效能好、擴充性佳以及精簡等優點，它還有個號稱的優點 - 容易設定，不過昨晚我在嘗試設定 Ruby on Rails 時倒是常常碰壁，我想主要是幾個問題吧，第一，大部分的文件都不夠詳細，常常只見一個設定檔，也沒見裡頭有什麼詳細的說明，依樣畫葫蘆後，出了問題還是搞不太懂，第二，沒有足夠的 debug information，lighttpd 是可以對 fastcgi 設定 debug level，但是一開始設定時我經常遇到的問題都是我不知道有沒有跑進我的設定中，nothing，只好 try and error 慢慢踹。希望我這篇筆記對同樣要作此設定的人有幫助。 [目的] 我設定檔的目的很簡單，我的機器沒有多個域名，只有一個，假設叫做 www.myruby-test.com，在這個域名上，我想掛上多個 Ruby on Rails apps，例如我想掛上 wiki、blog 等 apps，我想採用的作法是利用多個第一層目錄來區別不同的 app，例如 http://www.myruby-test.com/wiki/ 或者 http://www.myruby-test.com/blog/ 等，但是 Ruby on Rails 是以目錄名稱來代表 Controller 或 Action，所以利用了第一層目錄名稱會造成某種干擾，這解決方法後面會提到。 [安裝] 先安裝好 Ruby、Gems、Ruby on Rails 等，這些安裝方法請參考 Ruby on Rails Official Web site 。請安裝好 lighttpd，安裝方法請參考 lighttpd Official Web site 。安裝 fastcgi 。安裝 Ruby Fastcgi binding ，Debian 或者 Ubuntu 用者可以直接下以下命令安裝： % apt-get install libfcgi-ruby1.8 [建立 Rails App] 舉例來說，我想建立一個 Rails App 於 /var/rails/ 目錄下，假設名叫叫做 wiki 的 app 好了，使用以下命令： % cd /var/rails/; rails wiki 建立幾個基本的 Controller，例如 Hello： % cd wiki; script/generate controller Hello [設定 lighttpd] 假設我的 lighttpd 設定檔在 /etc/lighttpd/lighttpd.conf ，我的設定如下(我挑選幾個重要的 section)： server.modules              = (             "mod_access",             "mod_alias",             "mod_accesslog",             " mod_fastcgi ",             " mod_rewrite ",             " mod_redirect ", ) server.document-root       = "/var/www/" server.errorlog            = "/var/log/lighttpd/error.log" accesslog.filename         = "/var/log/lighttpd/access.log" index-file.names           = ( "index.php", "index.html",                                "index.htm", "default.htm", "dispatch.fcgi" ) server.username            = "www-data" server.groupname           = "www-data" ### FASTCGI fastcgi.server = ( ".php" => ((                      "bin-path" => "/usr/bin/php-cgi",                      "socket" => "/tmp/php-fastcgi.socket",                      "max-procs" => 1,                      "bin-environment" => (                        "PHP_FCGI_CHILDREN" => "16",                        "PHP_FCGI_MAX_REQUESTS" => "10000"                      ),                      "bin-copy-environment" => (                        "PATH", "SHELL", "USER"                      ),                      "broken-scriptfilename" => "enable"                  ))                 ) $HTTP["url"] =~ "^/wiki/" {         server.document-root = "/var/rails/wiki/public"         server.error-handler-404 = "/dispatch.fcgi"         fastcgi.server = ( ".fcgi" =>                 ( "localhost" => (                         "bin-path" => "/var/rails/wiki/public/dispatch.fcgi",                         "socket" => "/tmp/wiki-rails.socket",                         "min-procs" => 1,                         "max-procs" => 10                 )))         fastcgi.debug = 1 } server.modules 是設定要 lighttpd 載入的 modules，我們需要 fastcgi、rewrite跟redirect module，為什麼？照作就對了。在 index-file.names 中加一個 dispatch.fcgi 檔名。最後加上一組 vhost 設定，這應該是 lighttpd 獨特的設定方式吧，妳可以藉由 request 的 URL 或 host 來判斷該載入哪個 module，在這裡我設定了一組 $HTTP["url"] =~ "^/wiki/"  設定，這很酷，看的懂這是什麼意思嗎？這代表著如果進來的 request uri 是以 wiki 目錄開頭就會符合這組設定，後面的 "^/wiki" 是符合 perl 的 regular expression。然後在這 vhost 設定中，我們要另外設定 document root，以及 error handler，document root 必須是 Rails app 下的 public 目錄，因為他最重要的 fastcgi despatch 程式在這個目錄下。而 error-handler-404 則指向 "/dispatch.fcgi" ，當遇到找不到的路徑或檔案時，可以通通交由這隻程式去判斷。最後就是要設定一組 fastcgi 設定，在這個設定中，我們需要指定以 ".fcgi" 最為結尾的檔名都交由這組設定去處理，也就是交由 Rails app 中的 dispatch.fcgi 去處理。在這 fastcgi 中，妳必須設定 bin-path，也就是 dispatch.fcgi，妳可以在妳 Rails app 的 public/ 目錄下找到，此外，lighttpd 與 fastcgi 是透過 Unix domain socket 溝通的，所以妳還要給他個檔案作為 socket，這個檔案最好是在所有人都可以寫入的地方，例如 "/tmp" 就是個好地方。再來要指定 processes 數量，這是指 fastcgi 的 processes 數量，數量越多的話，在流量大時，處理速度越快，但反之是，如果你設太大，流量又沒那麼多時，只是突耗 CPU 跟 memory 而已，自己評估衡量一下吧。為什麼要作這樣的設定？事實上我也不是很瞭解，但是我猜測，因為 Rails 的 URL 都是以路徑構成，在 index-file 中加入個 dispatch.fcgi 會讓純路徑的 URL 去找尋這個檔案，這個檔案的附檔名便會符合 fastcgi 中的設定，並去透過 socket 去 query 真正的 dispatch.fcgi，而這隻程式就是 Rails  fastcgi 的核心，由他來 dispatch commands。 [設定 Rails] 這樣就好了嗎？重跑 lighttpd 後，妳可以嘗試打開 browser 去瀏覽 http://www.myruby-test.com/wiki/ ，妳會得到 Application Error 錯誤訊息，為什麼？記得前面提過的 Rails 目錄名稱是有意義的吧？ "/wiki/" 會被  Rails 當作 Controller 去處理，所以我們還需要對 Rails app 作設定，找到 config 目錄下的routes.rb 檔，找到並更改下設定： map.connect ' wiki /:controller/service.wsdl', :action => 'wsdl' map.connect ' wiki /:controller/:action/:id' See? 妳要跟 Rails 講，我前面還有一層 wiki 路徑啊，不要誤判了，這時候妳去存取 http://www.myruby-test.com/wiki/hello/ 就可以看到你想要的結果了。此外，妳要開放妳 Rails app 下的 tmp 目錄的權限，在我的例子中，lighttpd 是以 www-data 這個 uid 執行，而 Rails 會寫一些暫存檔至 tmp/ 目錄下，在我的範例中就是 /var/rails/wiki/tmp，所以最好將這個目錄以及子目錄的 owner uid 改為 www-data，否則 Rails 會無法寫入一些暫存檔而造成錯誤。 [參考文件] Ruby on Rails - lighttpd Lighttpd reference 事實上，在妳安裝完 Ruby 後，就有一份 lighttpd.conf 可以參考了，妳可以找一下： /usr/lib/ruby/gems/1.8/gems/rails-1.1.6/configs/lighttpd.conf ，它是 Rails 用來跑 server 時的設定檔，也可以拿來參考。 http://blog.roodo.com/syshen/archives/2141166.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 13 Sep 2006 13:06:51 +0800 HTML 中的 META DATA / ch3128 除了製作美美又充實的網頁內容之外, <HEAD> 標籤中很多資訊也是很重要的. 雖然 <HEAD> 標籤中的資訊不是給人看, 而是給電腦(瀏覽器)看的. 但身為一個優秀的網頁設計師, 這部分可是不能夠輕易忽視的喔~ 以下, 簡單介紹一下 Meta data... http://blog.roodo.com/ch3128/archives/2078779.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 29 Aug 2006 10:34:15 +0800 『公益數位村』2006年4、5月份教育訓練－網站建置教學 / ch3128 應邀參與公益數位村2006年4、5月份的教育訓練，擔任講師的工作。 http://blog.roodo.com/ch3128/archives/1489192.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 28 Apr 2006 15:06:31 +0800 網頁製作的版面配置 / ch3128 目前最常使用的瀏覽器解析度設定是 1024 x 768, 特別是對 LCD螢幕. 而較舊的 15'' CRT 螢幕則可能會是 800 x 600 的設定. http://blog.roodo.com/ch3128/archives/1402162.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 12 Apr 2006 09:58:28 +0800 影響網頁搜尋的原因 - 參考 / ch3128 *. 網頁標題 ( <title> 標籤) *. 鏈結標籤( <a>) 中的文字描述 *. 網頁的關鍵字設定 ( <meta>) *. 網頁的說明文字 ( <meta>) *. 網頁是否具可讀性 *. 網頁的內部鏈結與外部鏈結 *. 網站在相關( 全球 )性網站的廣泛連結 *. 搜尋引擎關鍵字的競爭性 http://blog.roodo.com/ch3128/archives/1296400.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 22 Mar 2006 11:40:09 +0800 [ASP.Net]判定Datagrid中checkbox是否選取的方法 / leodo@blog 前端 <asp:TemplateColumn HeaderText="入選"> <ItemTemplate> <INPUT id=chkSTU_ID type=checkbox value=' <%# DataBinder.Eval(Container.DataItem, "STU_ID") %>' runat="server" NAME="chkSTU_ID"> </ItemTemplate> </asp:TemplateColumn> 後端C# for(int i = 0; i<dgStudent.Items.Count; i++) { HtmlInputCheckBox app_no =(HtmlInputCheckBox)dgStudent.Items[i].FindControl("chkSTU_ID"); if(app_no.Checked) { } } http://blog.roodo.com/soboring/archives/701746.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 09 Nov 2005 22:12:30 +0800 Head first jsp/servlet 問題 / GIta熊熊原本一開始一照上面所寫的照做.....不過他就會一直出現 HTTP 405錯誤~~經過了上網查資料後發現!原來在" dopost " 那裡要改成 " service " 這樣才可以執行....找了一天的蟲○○→↘ (在Beer.htm中method="post" 不行再改不過通程式可以 method="get")↙↘ ＝＝＝＝＝＝＝＝＝＝＝＝ Beer.htm ------------------------ Beer 啤酒選擇選出想喝的啤酒顏色: light amber brown dark ============= BeerExpert.java ----------------------- package model; import java.util.*; public class BeerExpert{ public List getBrands(String color){ List brands=new ArrayList(); if(color.equals("amber")){ brands.add("Jack Amber"); brands.add("Red Moose"); } else { brands.add("Jail Pale Ale"); brands.add("Gout Stout"); } return (brands); } } ============== BeerSelect.java ------------------------------ import model.*; import javax.servlet.*; import javax.servlet.http.*; import java.io.*; import java.util.*; public class BeerSelect extends HttpServlet{ public void dopost (HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{ String c=request.getParameter("color"); BeerExpert be=new BeerExpert(); List result=be.getBrands(c); request.setAttribute("styles",result); RequestDispatcher view=request.getRequestDispatcher("result.jsp"); view.forward(request,response); } } 還有一個JSP網頁沒列出~不過問題不在這裡@@" http://blog.roodo.com/jzzxh/archives/422552.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 28 Aug 2005 22:50:16 +0800 [Sites] 圖片網站：Open Clip Art Library / 簡睿隨筆《科技篇》 Open Clip Art Library 是一個匯集可公開使用的圖片網站。 (按圖放大) 它的圖片是以SVG格式存放，最簡單且完整的檢視圖片的方法是使用 GIMP ，另一個檢視的工具是來自Apache基金會的 Batik ： Batik為Java開發的工具，執行前必須先安裝JRE(Java RunTime Environment) 解壓縮後，在其目錄內用 java -jar batik-squiggle.jar 指令執行 Open Clip Art Library也提供了下載所有圖片的壓縮檔，它會分門別類的建立數個子目錄供您用SVG工具檢視。 http://blog.roodo.com/emisjerry/archives/352885.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 08 Aug 2005 22:20:54 +0800 無線迴圈網頁實作之初體驗 / YAM-BLOG【http://TvKid.1.to/】,PIC【http://TvKid.4.to/】,SPECIAL【http://TvKid.5.to/】無誠勿試，試了便知。但是無法克服IE會當的問題，不知誰能解決？ http://blog.roodo.com/tvkid/archives/344451.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 06 Aug 2005 14:10:51 +0800 Metaphor V.S. 使用者經驗 / UXBlog-使用者經驗部落^^--優使性(Usability) 無意間逛到了台北市政府WIFLY計畫的網站，先讓我們來看看這網站的導覽設計： Wifly 這個首頁在介面的設計上很明顯的想用城市的概念作為包裝，這樣的設計概念也許在提案時容易說服客戶賣單，但對使用者來說，這樣的設計真的能帶給使用者良好的使用經驗嗎？在這裡所使用的是Metaphor表現方式（將網站的導覽項目作成城市的樣子），介面設計最常用的Metaphor手法是，將真實世界中的物件以類比（analoque) 的方式呈現在網頁中，借此讓使用者能更容易了解對網站功能。之所謂水能載舟，亦能覆舟，Metaphor如果運用得當，能讓使用者瀏覽網站時感到更順，但如果使用不當也會讓使用者產當負面的使用經驗。 ex.一些已成為慣例（convention)的Metaphor：　上面這兩個圖案一出現，我想沒有人會懷疑它們代表的是那些功能吧！！那怎麼樣才是不當運用Metaphor呢？　讓我舉個老例子來說明吧（WiFLY讓我們晚點再談）。關於Metaphor的不當運用，最有名的例子莫過於美國西南航空１９９５年的首頁了（之所以有名，是因為有太多著作舉他們的首頁作為壞例子了，我最少在Jacob 與JJG的書中都看過這個例子）。這個首頁用了真實世界中的服務櫃台來隱喻網站的功能，這也許很有創意，但卻很難用，比方說，與其用電話來代表訂票功能，還不如在頁面上明顯的標示出〝線上訂票〞來得容易理解一些。也許美國西南航空也發現自已網站很難用，後來進行了改版，這是他們現在的網站：如何才能將Metaphor運用得恰到好處呢？？我們必須先了解一件事：使用者不喜歡在瀏覽網頁時花腦筋使用者在造訪一個網站時通常都是想要達成某些目的，使用者想以最短的時間來找到他們想要的資訊。 Steve Krug [1] 舉了一個很貼切的例子。他說，使用者就像是鯊魚在海中找尋晚餐，一旦找到它要的就狠咬一口然後就游走。大海中到處都是可以吃的魚，所以使用者這條鯊魚根本不屑去追那些不容易抓到的。也就是說，使用者根本不想花腦筋在介面的使用上。因此介面的設計應該顯而易懂，讓使用者不需要學習也知道如何使用。所以，在我們準備使用某種形式的Metaphor之前，必須先好好的考慮兩個點：１　Metaphor的使用能不能幫助使用者了解網站的　功能／內容／導覽２　Metaphor的形式會不會增加User 頭腦的loading, 換句話說，使用者是不是需要經過許多層的思考才能了解。如果我們以這兩個原則來檢視 WiFly 網站的介面設計，顯而易見地，這裡所使用的Metaphor只會造成使用上的困擾，並不能增進使用者經驗。 [1] Krug Steve , Don’t Make Me Think , 2000. http://blog.roodo.com/usability/archives/327463.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 01 Aug 2005 14:46:37 +0800 新完成作品之膳食纖維 / Cara's Life 因為公司人員驟減，於是幫忙當了一陣子的包貨小妹，本月雖然完成了一些網頁，卻沒有前幾個月那麼大量。好久沒貼作品，就貼這個今天剛完成的新作做本月的工作紀錄吧! 一開始接到命令做這個網頁的時候，內心有一種極度想離開的厭惡感（討厭想排版和畫面）！但是當坐在電腦前面搔頭、嘆氣加亂排版面後，靈感來了，排版套圖完成，就好欣慰，終於......又生了一頁。從今天早上接到命令到完成版面花費時間約4個小時。 http://blog.roodo.com/caracat/archives/294666.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 22 Jul 2005 14:46:38 +0800 如何找出網站的優使性問題 / UXBlog-使用者經驗部落^^--優使性(Usability) 大致上來說檢視網站優使性問題的方式有兩種： 1 由專業人員進行分析 2 針對使用者作實地測試這兩種方式的功能、利弊各有不同，所以兩種方法都使用的話將可修正最多的優使性缺點，但也可以依條件、需要的不同擇一進行。專業人員的優使性分析具有經驗的介面分析師在檢視已完成的或進行中的網站時，他們會以本身的專業知識與經驗，找出大部分網站原型的優使性缺失。由專業人士來分析的好處在於，能夠以最短的時間找出大部分的問題。專業的介面分析師因為對優使性的介面設計有一定的經驗，因此能在很短的時間內找出介面設計上明顯的問題，且能對於一些複雜的問題如網站的概念、介面類型的選擇、資訊架構、視覺安排、甚至對竸爭對手網站的分析都能提出有用的建議。建議最好在網站企畫的過程中，由專業介面分析人員定期加入討論，這樣可以在初期了解問題，避免資源的浪費。針對使用者作優使性測試對使用者進行優使性測試，就是再網站製作的過程中，找一些使用者來使用網站，經由分析人員引導測試的進行，並向使用者提出問題，藉此觀察使用者使用網站的方式；測試完成之後，再對經由測試所搜集來的資料進行分析，找出網站中需要改進的問題。這種方法所需的時間較長，在資料的判讀分析上也較為費力，但可以找出一些連專業分析人員也難以查覺的問題，此外，這種方式還可以針對特定任務、功能進行分析。比方說，某個網站想要加入一個線上購物的機制，那麼就可以針對這個機制來作優使性測試，或者當網站設計者創造了一個全新，從末有其他人用過的機制，但卻不知使用者能否接受網站的新功能，這時必須在新功能正式上線前，進行使用者測試。這種方式還有一個優點，就是能夠對所存在的問題重要性作分級。打個比方來說，假設當我們已知道在某個網站中，頁面的顏色以及內容的編排都會造成使用上的問題。如果在對使用者所作的測試中，我們了解雖然顏色會造成閱讀上的不適，但由於內容的編排不是那麼糟糕，使用者尚能勉強接受。這時我們就知道內容編排上的問題比頁面顏色的問題來得重要，在進行修改時便能依據使用者的意見而有所取捨。下表列出這兩種方式的優缺點專業人員的優使性分析使用者優使性測試優點找出網站的優使性缺點。能夠在網站開發初期發現網站概念問題。所需時間短。找出網站的優使性缺點。能夠針對功能作檢檢測。立即知道問題的所在和修正方式。能夠找出細部問題。能對某些既有優使性問題的重要性作分級。缺點無法找出所有細部問題。不一定能對所存在的問題重要性作分級。具有一定的主觀性 ( 分析者的想法不一定等同實際的使用者 ) 。進行的流程和資料的判讀較為麻煩。所需的時間較長。較難找出複雜的概念性問題。以上是摘錄自我書中的內容，在這裡針對上表中關於〝問題重要性分級〞這點作個補充，以實際的經驗來說，如果是經由專家來對網站進行優使性檢測，那麼，通常找到的問題點會比經由實際進行使用者測試所找到的問題來得多，而兩者的差距有時還不小，比方同一個網站，經由專家檢測也許可以找到林林總總約100個問題，而實際進行使用者測試也許只會出現20來個問題。造成這種差距的原因是因為優使性專家因為本身對優使性原則十分了解，因此所能看到的缺點會比一般使用者來得多，雖然經由專家檢測可以找到大多數的設計缺失，但在這些問題中卻往往無法客觀的分出那些才是造成負面使用經驗的元兇。而實際經由使用者測試所找出來的問題，在數量上雖然較少，但基本上，這些問題都是真正造成不良使用經驗的重要缺失，而且在與使用者直接接觸的過程中，我們可以了解問題之間不同的重要性，在進行網站優使性改善計畫時，常常會因為條件的限制，無法在一次改版時就將所有的問題解決，這時如果能夠了解那些問題是最重要的，那麼就能夠將有限的資源先集中在最重要的問題點上。 http://blog.roodo.com/usability/archives/279086.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 17 Jul 2005 23:56:44 +0800 如何執行表單的驗證 / ch3128 在網頁上設計一個表單，可以達成與使用者互動的目的。但為了資料的正確性，驗證使用者所填入表單的資料是否正確，是有其必要性的。一般執行表單的驗證，可以區分為表單送出前在使用者端的驗證，以及表單送出後在伺服器端的驗證。使用者端驗證可以使用 javascript 或 VBScript 等Script Language, 伺服器端驗證則依據所撰寫的程式而定了。請連結下列網頁, 並檢視網頁原始檔。表單驗證範例以下就以使用者端驗證為例, 簡單說明上述範例如何執行表單的驗證。 http://blog.roodo.com/ch3128/archives/252242.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 08 Jul 2005 17:38:42 +0800 CSS 的使用(一) / ch3128 最近覺得網頁設計是越來越有趣了，特別是加強了 CSS 的應用....... http://blog.roodo.com/ch3128/archives/211070.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 22 Jun 2005 21:32:12 +0800 Web 介面設計新趨勢 - AJAX / syshen's blog 嚴格說起來，AJAX 並不是什麼新鮮的技術，而且也不複雜高深，但是自從 AJAX 這個名子出來之後，以及 Google 幾個 Killer 級的服務應用 AJAX，使得 AJAX 好像在突然間大鳴大放，每個網站都想要開始採用類似的技術，但是 AJAX 真的有這麼好嗎？在瞭解 AJAX 之前先來看幾個成功的例子：實例介紹 Google Map Google Map 是應用 AJAX 技術最成功的例子，只要一提起 AJAX，一定也會舉 Google Map 做範例。底下是 Google Map 的 UI，如果你有用過一定很熟悉：你可以直接在 Google Map 的網頁上拖拉縮放整面地圖，地圖細節則會慢慢顯示出來，就好像在你自己的電腦上使用 papago 等軟體一樣，這就是 Google Map 最引人津津樂道的 UI 設計，但是他怎麼做到的？ Google Suggest Google Suggest 則是另外一個例子，當你在搜尋欄位中輸入關鍵字時，這時候網頁會蹦出幾個 suggestion 讓你選擇，每個 suggestion 後面還有該關鍵字的搜尋筆數，我們都知道，Google 不可能在你一登入網頁時就預先存取好這些資料，因為這些資料量太大了，如果預先存取，你光登入 Google Suggest 首頁就要十幾分鐘，那它是怎麼做到的？ GMail GMail 也是一個例子，在你登入你的 Gmail Account 之後，你所看到的信件選單，信件內容等都是在同一個網頁中顯示，不論你怎麼選擇你都不會做換頁，它是怎麼做到的？還有編輯信件時，拼字檢查是怎麼做到的？ Technorati Search Beta Technorati search 除了 search blog 文章外，現在也多了搜尋 flickr 圖片以及 furl 和 del.icio.us 的功能，算是半個 meta-search engine 吧，而且這些搜尋的結果都是在同一個頁面中顯示出來，最快顯示出來的資料當然是他自己 index 的 blog 文章，但當你在瀏覽結果時，網頁的右手邊也沒閒著，正在幫你查詢 flickr, furl, del.lcio.us 的結果呢！它是怎麼做到的呢？這些問題的答案就是 AJAX。傳統網頁流程的設計都是 Web Page -> CGI -> Web Page (Response) 的順序，這之間整個頁面都要經過重載，而且 CGI 在處理時是需要時間的，所以使用者在這段時間中需要等待，但是這樣的作法跟我們使用一般桌面應用軟體的習慣不同，在多數的應用軟體中，即使是需要等待處理的程序，也會先把處理完的結果先顯示出來，但是在傳統的網頁流程設計中，這是很難達到的。傳統的網頁流程設計是 synchronous 的，而 AJAX 是 Asynchronous，這就是為什麼 AJAX 的全名是： A synchronous J avaScript A nd X ML ( Synchronous / Asynchronous 的概念就好像是寫 network socket 程式時，synchronous / asynchronous IO，或是 blocking / none-blocking IO 的概念類似)。 AJAX 並不是新的技術，早在這個名詞出來以前，此類的技術就已經被廣泛運用了，後來由 Adaptive Path 這家公司取了 AJAX 這個名詞來代表此類的技術。所以在這家公司的網站上可以找到一篇由 Jesse James Garrett 所寫的 Ajax: A New Approach to Web Applications 文章，可以幫助大家瞭解 AJAX 的定義以及技術層次的問題，這篇文章部分也被 Jacky's blog 翻譯成中文。其實說穿了，AJAX 就是運用 Javascript 在背景偷偷幫你去跟伺服器要資料，最後再由 Javascript 或 DOM 來幫你呈現結果，因為所有動作都是由 Javascript 代勞，所以省去了網頁重載的麻煩，使用者也感受不到等待的痛苦，讓使用 Web Service 更像是在操作桌面軟體。但是， AJAX 真的那麼實用嗎？網路上也有不少 blog 在批評 AJAX： Ajax: 99% Bad 嘟嘟老窝's AJAX的七宗罪這篇文章講得很好，說中了 AJAX 的麻煩所在。 Ajax：剩下什麼呢？ AJAX 存在的目的跟 Flash 有點雷同，都是要改進 Web UI 的呈現方式，但是既然不同於傳統的 WebUI 呈現，便會出現一些不相容性，例如不利於搜尋引擎做 index，以及造成一個沒有 history 及 backforward 的網頁瀏覽，這都不一定是使用者想要的，並不是所有的網頁都適合使用 AJAX 技術來改進 UI 呈現，在貿然轉移前還是有必要多思考。其他 AJAX Demo Spell Check Upload progress bar 這個 demo 可說是最能顯示出 AJAX 強大的 Demo 了，很有趣，一定要看看。 Google Instant 這個 meta-search engine 會由 Javascript 在背景去 google 搜尋你的關鍵字，所以也不需要經過頁面重載。 Rico 的 AJAX Implementation 的 Demo 一定要玩看看他的 Weather Widget 。其他相關網站 AJAX 相關 Open source AJAX Framework Rico 其他 AJAX Matters XMLHttpRequest, Ajax, and the customer experience Where can you find Flickr and Apple in the same room? At the AJAX Summit of course. An insider report from the press-free zone where the future of webdev is being mapped out. Ruby on Rails http://blog.roodo.com/syshen/archives/184517.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 12 Jun 2005 11:43:31 +0800 換成端午節版面哦~~ / Cara's Life 把Blog的版面變更~~祝大家端午節愉快，粽子吃飽飽~~~ PS：其實這個版面的來源是幫公司做的Banner如下： http://blog.roodo.com/caracat/archives/150890.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 27 May 2005 00:02:54 +0800 [Blog] 在首頁顯示即時新聞 / 簡睿隨筆《科技篇》昨天測試將以前放在ActiveDesktop上的即時新聞顯示方法加到 Blog首頁上，經過觀察此方法仍然有效，因此今天將作法記錄下來。我使用的即時新聞來自中時電子報，亦即在該報首頁會自行捲動的即時新聞方塊。只要在自由欄位內插入下列HTML碼即能顯示即時新聞了：＜iframe name="rtnews" src="http://news.chinatimes.com.tw/chinatimes/index0513/component/inc-index0513-mainbody01-realtime-content/0,3844,,00.html" width="270" height="100" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"> ＜/iframe> 改變width與height的值就能調整顯示區域的寬與高。嗯～這個功能有什麼用處呢？似乎沒太大用處哩，試看看好玩囉。 (請注意：若您要複製上列的HTML碼，請記得將小於換成半形的小於。) http://blog.roodo.com/emisjerry/archives/143457.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 23 May 2005 10:35:02 +0800 FLASH 20050518 / allentkd 大綱: Flash 箭頭工具來選取繪製物件基礎填色與漸層填色 http://blog.roodo.com/allentkd/archives/134552.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 18 May 2005 12:18:29 +0800 Ajax / It's a hard day's night... 一種跟現在不太一樣的架構不太能說是一種技術，他是多種現在技術的應用。下面這篇文章裡面有詳盡的介紹。 Ajax: A New Approach to Web Applications 。現在 Google , Flicker , A9.com 很多服務都有採用這種技術，我覺得最主要的部分就是javascript的使用，減少了主機的負擔，並且也增快了client side的反應速度，畢竟在個人電腦越來越強的現在，多用些client side的資源，也是種前進的方向。其他參考網址 Ajax - Web Application 新路向 Ajax：剩下什麼呢？ Ajax 新浪潮 Ajax Blog http://blog.roodo.com/orbit/archives/130263.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 16 May 2005 01:50:54 +0800 發現新編輯器 / George 的布落格無意間在網路上找到了一個編輯器 PHP Designer 2005 雖然它似乎已存在許久但對我而言卻很新鮮.. 有興趣的不妨到這下載喔.. http://www.mpsoftware.dk/ 除了，這個還有一個 HTML 的編輯器也不錯用可惜兩者目前都沒有中文介面.. http://blog.roodo.com/bsd/archives/120336.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 10 May 2005 22:50:44 +0800 給網頁開發人員的書籤 by VF / Idea Grapes 今天從 del.icio.us 那邊看到了694個人設為書籤的一個網頁： Bookmarks for web developers: a list of useful web-tools ，作者是Vitaly Friedman，他將自己在網路上面收集到的開發工具做了有系統的整理，分成七大類（圖），並且不吝和其他的網頁開發人員分享。 http://blog.roodo.com/yoren/archives/101162.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 30 Apr 2005 16:16:44 +0800 強迫網頁執行符合“Unicode”標準啲字型 / 鹭水芗南－闽南语部落今仔日上大啲收成,著是學會曉安怎來強迫BLOG網頁執行“Unicode”標準啲字型（字體）。 http://blog.roodo.com/limkianhui/archives/63718.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 06 Apr 2005 20:09:28 +0800 Beh安怎tiàm網頁頂頭安計數器？ / 鹭水芗南－闽南语部落 (翻译/Limkianhui) 有啲blog伺侯器(伺服器/服务器)有提供程式,比论讲亲像" CGI "程式,安呢,伊啲blog用者着会当真利便來享受着计数器啲功能。呣佫，若准汝 (设使汝是一个blogger)啲blog伺侯器無提供"CGI"程式，辷个時阵，汝共款会当tiàm線頂选择其它網站提供啲服务，比论 sitemeter 這家啲服務。 Sitemeter 不但有法度計數，佫会当看着每日、每禮拜、每月日、每年上站啲儂數、佮瀏覽啲次數，甚至連讀者按叨位來啲，嘛拢記录及一清二楚。推薦汝来使用。 http://blog.roodo.com/limkianhui/archives/62746.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 06 Apr 2005 01:42:21 +0800 Pixelgirl Presents - 免費圖示、桌布下載 / EA West 　　嗯...剛剛從 ChaoChun @ Space 看到一個很不錯的圖示、桌布下載網站-- Pixelgirl Presents 。網站上的每個圖示、桌布都是站長親自精挑細選的喔！So都有很不錯的品質。 Pixelgirl Presents http://blog.roodo.com/williamyangzy/archives/58679.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 05 Feb 2005 12:04:59 +0800 [Blog] 在網誌首頁顯示線上人數的方法 / 簡睿隨筆《科技篇》今天試著將「多少人在線上」這樣的訊息加在網誌首頁；由於 Site Meter 並無顯示上線人數的功能（必須進入其網站用Who's On?才能看到），因此必須另外加入 Fast Online Users 網站的連結。操作步驟如下：進入 Fast Online Users 首頁在 Get your html code here 的here 上按一下，再將顯示出來的HTML複製到剪貼簿在Blog的管理網頁上將複製內容貼入新增的插入欄位內修改貼入內容；由於 Fast Online Users 產生的HTML在src後面未加入雙引號，導致樂多無法正確執行，因此要自行加上雙引號；同時要將d=後面的網址改成自己的Blog網址：  <a href="http://www.fastonlineusers.com"> <script src= " http://fastonlineusers.com/online.php?d=www.yoursite.com " ></script>online</a>  這樣很容易的就能在首頁上看到目前的上線人數了。 http://blog.roodo.com/emisjerry/archives/52538.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 28 Mar 2005 13:48:16 +0800 CSS的應用極緻 / 逛大街 The CSS Playground 有相當多的應用實例，給網頁設計者非常好的參考 http://blog.roodo.com/vsy_haha/archives/47382.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 22 Mar 2005 09:03:40 +0800 [Blog] 手動製作連結Furl與del.icio.us的圖示 / 簡睿隨筆《科技篇》今天一時興起，用手動製作的方式組合了下列圖示：　　接著解釋一下製作過程：到Adam Kalsey的網站： Button Maker 來製作雙併式的圖示如圖形分成左邊方塊(Left Box)與右邊方塊，中間有直槓(Bar) 網頁上第3個欄位指定的是中間直槓的位置(預設是25)，如果要把直槓向右移，則增加該值網頁左邊方塊的第4個欄位(Text start pixels from the left)指的是左邊文字開始位置，如果要往左邊界移動，則減少該值網頁右邊方塊的第4個欄位( Text start pixels from the bar)指的是右邊文字由直槓開始起算之位置，如果要往左邊界移動，則減少該值，要往右邊界移則增加該值文字、顏色等都指定好後按 Submit 即可產生圖形檔在網頁上在圖形上按右鍵再另存圖片依上述步驟也將圖示也產生出來由 www.furl.net 下載網站圖示檔favicon.ico 依＜span＞＜/span＞的順序將網站圖示檔和按鈕圖形檔組合在一起，HTML片段如右：＜span title="Add to Furl"＞＜img src=" 網站圖示檔URL" /＞＜img src=" 按鈕圖形檔URL" /＞＜/span＞由先前貼過的文章將內容貼到＜span＞的 onclick事件。同步驟 3由 del.icio.us 下載網站圖示檔，並比照步驟4組合在一起在以上產生好的HTML最前面用＜div align="center"＞、最後面用＜/div＞將HTML片段括住，好讓圖形顯示在中央位置步驟大概是這樣，兩組按鈕間會緊靠在一起，因此可以用空白將之空開(樂多遇到 & 符號會截斷該符號後文字，暫時用全形空白來取代&nbsp;吧)。還有最後幾個問題：找不到將游標換成手狀的樣式！在IE可以用"cursor: hand"的樣，W3C 似乎無法使用hand這個值，不知是否能有別的替代方法？原本在步驟4中的＜span＞...＜/span＞是使用＜button＞...＜/button＞(這樣問題一應該就能解決了)，但不知為何無名小站無法解析；反正＜button＞似乎不是標準標籤，就使用＜span＞吧。在Blog網站未提供連結Furl與del.icio.us方法之前，先用這個笨方法解決好了。 http://blog.roodo.com/emisjerry/archives/38143.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 13 Mar 2005 00:58:55 +0800 Jordan Stone / waking Jordan Stone的網站設計非常有特色，他常使用的軟體有Photoshop、Flash。他製作的網站操作介面、架構跟一般的網站不太相同，可以發現許多驚喜，不過也得小心迷路。網站風格走拼貼風格，有種髒髒濁濁的感覺，用色也十分特別。與英國網站設計師Martin Hughes合作＂WEFAIL＂的網站風格詭異，也十分有趣。另外兩人也陸續合作許多網站設計，包括替MTV的節目＂Punk'd＂製作的小遊戲，音樂人Bob Schneider的官方網站等。 http://blog.roodo.com/waking_life/archives/33860.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 08 Mar 2005 05:47:39 +0800 [Blog] 加入Furl與del.icio.us的連結 / 簡睿隨筆《科技篇》 Furl的連結直接拿其網站上的"Furl It"的網頁內容來用，很快速的做出其連結。 (以下灰底區內的全形小於必須改成半形才對，用全形的原因是：無名的版面樣式才不會出錯) ＜a href="javascript:( function(){ var s=document.createElement('script'); s.setAttribute('src', 'http://www.furl.net/resources/furlItComplete.jsp'); s.setAttribute('type','text/javascript'); document.getElementsByTagName('head')[0].appendChild(s); })();"＞＜img src="http://blog.roodo.com/emisjerry/f909e496.gif" alt="加到Furl" title="加到Furl"/＞＜/a＞ del.icio.us則因為樂多在存檔時會把加號刪掉，導致網址的網頁字串無法正確產生，最後用字串的連接函數 concat 才順利完成。＜a href="javascript: void(window.open('http://del.icio.us/login/?url=' .concat(encodeURIComponent(location.href)) .concat('&title=') .concat(encodeURIComponent(document.title))));"＞＜img src="http://blog.roodo.com/emisjerry/f41f53cf.gif" alt="加到del.icio.us" title="加到del.icio.us"/> ＜/a＞把上面這兩段HTML貼入追加內容欄位，就能在瀏覽該網頁時讓訪客按連結做快速收藏了。如果您知道更簡便的方法，拜託告訴我吧。 (文末這兩個按鈕圖形是取自阿祥の網路筆記本 ) http://blog.roodo.com/emisjerry/archives/31347.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 04 Mar 2005 20:07:39 +0800 佈景大改造-黑草 / Danny*2b Roodo!™ CSS暫時還是霧裡看花 . 不過 . 先從關鍵圖像置換開始 . 分別是 BODY 底下的 ... http://blog.roodo.com/daicccc/fd33431a.gif #container 底下的 ... http://blog.roodo.com/daicccc/728f4ebc.gif AFTER │ │ BEFORE │ │ .... http://blog.roodo.com/daicccc/archives/30859.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 19 Feb 2007 04:09:02 +0800 購物網站架設工具-osCommerce / leodo@blog osCommerce - 提供商業平台式的內容管理系統。廣告一下！！所上一位同學的論文研究購物網站購物流程的物徑分析，利用OSC架設一個實驗性質網站( 金毛.com )，實驗參與者就請當作在逛一般購物網站吧，依照各人習慣去做瀏覽，看到喜歡的東西可以立刻購買，或是加到購物車，就跟真的購物網一樣，並不需要填信用資料或付錢。每個星期2、4、6會抽獎送7-11的i-Cash，而得獎名單也會公佈在網站上。相關閱讀： osCommerce購物網站架設全攻略，王鵬程著。 KMD商業工具安裝說明 http://blog.roodo.com/soboring/archives/28205.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 01 Mar 2005 10:57:38 +0800 [Site] Nvu教學網站與中文語言包下載 / 簡睿隨筆《科技篇》 Nvu教學網站 Nvu 0.81在2005/02/08剛推出，非官方版的中文語言包也可以在此網站下載。 ## http://blog.roodo.com/emisjerry/archives/26967.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 28 Feb 2005 00:43:21 +0800 [Reference] 插入圖形檔案時使用的樣式 / 簡睿隨筆《科技篇》先前並未對圖形的HTML多做處理，結果導致文字偶有壓到圖形的現像。下例中的1.，2.，3.等都跑到圖裡面了：文字第一列。文字第二列。文字第三列。為了避免此狀況，img必須加入Padding樣式如下(數字可自行調整）：＜img align="left" src="http://blog.roodo.com/emisjerry/8b5cc98e.gif" style="padding: 5px"＞樂多有內建一個用於IMG的類別：PICT，只要將該類別加入Padding元素即可達成相同效果，例如：＜img align="left" src="http://blog.roodo.com/emisjerry/8b5cc98e.gif" class="pict"＞無名的話就用自訂樣式，自己加一個PICT類別即可。修改後的圖形如下：文字第一列。文字第二列。文字第三列。 ## http://blog.roodo.com/emisjerry/archives/22856.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 22 Feb 2005 23:23:45 +0800 test / Java and HTML Skills Trial Website 這是我的標題 test test http://blog.roodo.com/wanttry/archives/20328.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 19 Feb 2005 23:14:15 +0800 上轉文字特效三 / JAVA魔法師 JAVA魔法師歡迎你．複製原始碼並貼進你的網頁檔，網站做好後請記得通知我們哦！ <table> <tr><td> <div style="border:1px solid #000000" > <div style="border-width:1px;border-style:solid;border-color:#ffffff #c0c2e9 #c0c2e9 #ffffff;background-color:#cdcfed;padding:4px" > <div style="border-width:1px;border-style:solid;border-color:#c0c2e9 #ffffff #ffffff #c0c2e9" > <div style="border:1px solid #000000;background-color:#ffffff;padding:5px" > <hr style="border-style: dotted ;color:#cdcfed;height: 3px " > <marquee direction="up" width="140" height="80" scrollamount="1" style="font-size:10pt;color:#9966ff;text-align:center;padding:5px" > JAVA魔法師歡迎你．複製原始碼並貼進你的網頁檔，網站做好後請記得通知我們哦！  </marquee> <hr style="border-style: dotted ;color:#cdcfed;height: 3px " > </div> </div> </div> </div> </td></tr> </table> http://blog.roodo.com/javamagic/archives/19638.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 19 Feb 2005 02:08:51 +0800 上轉文字特效二 / JAVA魔法師 JAVA魔法師歡迎你．複製原始碼並貼進你的網頁檔，網站做好後請記得通知我們哦！ <table cellspacing="1" cellpadding="0" style="border-style:dotted;border-color:#665F38;border-width:4" > <tr> <td align="center"> <table cellspacing="1" cellpadding="0" style="border-style:dotted;border-color:#5A6D45;border-width:4" > <tr> <td align="center"> <table cellspacing="1" cellpadding="0" style="border-style:dotted;border-color:#C6C785;border-width:4" > <tr> <td align="center"> <marquee direction="up" width="140" height="80" scrollamount="1" style="font-size:10pt;color:#88484d;text-align:center;padding:5px" > JAVA魔法師歡迎你．複製原始碼並貼進你的網頁檔，網站做好後請記得通知我們哦！  </marquee>  </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> http://blog.roodo.com/javamagic/archives/19635.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 19 Feb 2005 02:07:05 +0800 上轉文字特效一 / JAVA魔法師 JAVA魔法師歡迎你．複製原始碼並貼進你的網頁檔，網站做好後請記得通知我們哦！ <table> <tr><td> <div style="border:double 4px #ffb090;padding:3px" > <div style="border:double 4px #ffb090;font-size:10pt;padding:10px;" > <marquee direction="up" width="140" height="80" scrollamount="1" style="font-size:10pt;color:#000000;text-align:center;padding:5px" > JAVA魔法師歡迎你．複製原始碼並貼進你的網頁檔，網站做好後請記得通知我們哦！  </marquee>  </div> </div> </td></tr> </table> http://blog.roodo.com/javamagic/archives/19631.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 19 Feb 2005 02:03:13 +0800 CSS基本寫法 / JAVA魔法師基本上，CSS 可加在 HTML 語法中任何一個位置，但是如果是整個網站都會使用相同的 CSS 的話，建議以這頁的方法加在 <HEAD> 跟 </HEAD> 之間： <HEAD> <STYLE TYPE="text/css">  </STYLE> </HEAD> BODY {...} →設定<BODY> 到 </BODY> 這一段區域 FONT-SIZE: 9pt →設定字體大小 COLOR: #5e5f54 →設定文字顏色 FONT-FAMILY: 新細明體,Verdana →設定文型 http://blog.roodo.com/javamagic/archives/19621.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 19 Feb 2005 01:55:04 +0800 [Blog] 換個「素雅」點的樣式 / 簡睿隨筆《科技篇》換個「素雅」點的樣式... 看看感受如何。 http://blog.roodo.com/emisjerry/archives/18761.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Thu, 17 Feb 2005 22:04:51 +0800 免費字型下載大匯整 / LaoTou的心情記事今天在 lancetw的事件簿看到他發表的一篇免費/自由字型蒐集裡面的字型包羅萬象，不管是中文跟英文都有呢！對於網頁設計的人可是一個很好用的資訊呢！ http://blog.roodo.com/laotou/archives/14942.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 09 Feb 2005 21:42:57 +0800 #[情報] Firefox PowerPack 4發表 / Think of Joe 消息來源： PTT 站Browsers版由網友EShensh (蕭．易玄)所提供的 Firefox PowerPack 4 以下為作者原文轉載：特色： * 裝好的時候，已經是最佳化過的參數，以及兩家新聞的即時書籤、一堆搜尋Plug-in * 裡面包含了被提名的套件共有 63 個，完全可自己任意選擇，量身訂做！ * 有多特別？裝了才知道！這是這次最特別的事了。在安裝好 Firefox 之後，還可以自由決定它的功能。習慣裝一堆套件，還是安於極簡風格？愛用 TBE 還是 TBP？喜歡用哪個下載套件？ It's up to you！注意：最好完整的刪除舊版的使用者資料。以下為討論文章之整理：＊完整移除原FireFox之後再安裝此版本，要記得去刪除個人設定資料夾。 C:\Documents and Settings\[使用者名稱]\Application Datas\Mozilla。＊書籤先copy出來再匯入即可。順便放上此次Mozilla Taiwan舉辦的 Extentions TOP 15票選結果供大家參考，這些link都會長期放在side bar中的FireFox推廣專區之中給大家參考! http://blog.roodo.com/sunjoe/archives/11045.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 31 Jan 2005 17:39:31 +0800 我的MEDIA CERTER(?) / 我的心情水杯 M$的MEDIA CENTER, LINUX的MYTHTV, 還是未來Apple的IMac Media Center, 到底誰會進註你的客廳? http://blog.roodo.com/Francis_Lou/archives/10825.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 30 Jan 2005 23:19:52 +0800