網頁設計的專業首選

資料庫正規化：   正規化的目的就是要減少資料庫中重複的資料，以便快速的找到所需的資料，提高資料庫的效能。重複的資料會浪費磁碟空間，並產生維護方面的問題。   正規化型式： 資料庫正規化有一些規則。每條規則都稱為「正規化形式」。如果遵守第一條規則，資料庫就稱為屬於「第一正規化形式」   (1NF)。如果遵守前三條規則，資料庫就被視為屬於「第三正規化形式」(3NF)。     正規化型式有： ‧第一正規化型式 (First Normal Form, 1NF)。 目的是讓每個資料表都會有一個主鍵 (Primary Key, PK)，而且在資料表中，每一列的每一欄所存放的值必需是單一值。   ‧第二正規化型式 (Second Normal Form, 2NF)。 目的在去除僅與部分 PK 相依的欄位，也就是說，非 PK 的欄位不能只與 PK 中的部分欄位有關係。   ‧第三正規化型式 (Third Normal Form, 3NF)。 目的在除去所有非 PK 的欄位間的相依性，亦即所有非 PK 的欄位之間不能有從屬關係。   ‧其他正規化形式： 第四正規形式，也稱為「Boyce Codd 正規形式」(BCNF)；而第五正規形式雖然存在，但實際設計時則很少考慮此形式。忽略這些規則可能無法設計出完美的資料庫，但不會影響資料庫功能。   正規化的步驟： 第一正規化型式： 　 ‧刪除各個資料表中的重複群組。 　 ‧為每一組關聯的資料建立不同的資料表。 　 ‧使用 PK 識別每一組關聯的資料。   第二正規化型式： 　 ‧為可套用於多筆記錄的多組值建立不同的資料表。 　 ‧使用 FK (Foreign Key)，讓這些資料表產生關聯。 第三正規化型式： 　 ‧刪除不依賴索引鍵的欄位。     Posted by 程式設計師 / wyvern

預存程序 (Stored Procedures)   預存程序是一種可以寫在資料庫伺服端的SQL程序，可以在伺服端呼叫，也可以由客戶端來呼叫。通常是將某些固定的異動，或查詢動作寫成預存程序以達成下列幾個優點：   1.在預存程序中可以完全控制整個異動的完整性，使資料庫維持一致性。   2.使用者只能呼叫它來執行，無法知道其內容與資料庫中的綱要，所以也可以達成某種程度的綱要資料與異動細節之隱密性與安全性。   3.透過預存程序也可以達成邏輯上的資料獨立。   4.可以加強應用程式開發時的模組化程度，讓應用程式專注在使用者介面與流程控制，而把資料庫的異動處理與查詢部份交給預存程序來完成，使兩者有適當的劃分，讓系統更容易維護。   5.可以讓複雜的異動完全由伺服端控制與執行，客戶端只要負責發出呼叫需求與接收執行結果即可，降低網路上的流量。   6.降低人為錯誤的可能性。   資料來源 儒林：資料庫系統 - 應用實務 7.9.2       Posted by 程式設計師 / wyvern

網頁程式的漏洞   在網頁程式的撰寫上，參數的傳遞可分為post與get。 不論是以何種方式傳遞參數，在撰寫程式碼的時候必須得在 Server 端加工過後才能使用；否則很有可能會成為有心人士攻擊的漏洞。   例如： 以get的方式傳遞參數 http://www.test.com.tw/data.asp?data_seq=1 檔案 data.asp .... SQL = "select * from data_table where data_seq=" & Request("data_seq") 'Run SQL Cmd --> 以正常的參數傳遞來說，程式碼可以組合出的 SQL command 是： select * from data_table where data_seq=1 程式能按照預期的結果執行，但是如果參數被人改成： http://www.test.com.tw/data.asp?data_seq=1 or 1=1 那麼程式碼組合出來的 SQL command 將變成 select * from data_table where data_seq=1 or 1=1 如此一來，參數將會淪為攻擊者的填空遊戲。輕者程式執行出錯，重者可能會造成資料庫損毀。 因此，在 Server 端程式碼的撰寫上，必需對 Client 端傳遞過來的參數加工處理，以避免類似的漏洞產生。   Posted by 程式設計師 / wyvern

　　2001年秋天，網路公司的股票價格在美國股票市場大幅下滑，很多人把這種現象稱之為網路達康泡沫化。許多投資者因而認定，網際網路不過是誇大不實的科技而已。但是儘管股票市場暴跌，背後隱含的新科技革命，卻已經悄悄誕生。 　　隨著web 2.0的興起，網站不再只是一個PUSH資訊的媒介，而是一個平台，一個讓全球人類交流資訊的平台，透過web 2.0 讓資訊散撥出去。因此，傳統的行銷方式已不適用，目前採用的是「病毒行銷」（Viral marketing），亦即採用直接從一個用戶到另一個用戶的方式來傳播訊息。 　　所以一個體質好的網站便越來越重要，在網頁設計時立場便需明確，了解自已網站所要表達的東西，使這些資訊能夠更快速的散撥出去，讓自已的網站蘊含網路的威力，取得先機。 Posted by 程式設計師 / Kelly

「Client 端程式碼」對各種瀏灠器的相容性   通常，動態網頁除了 Server 端的程式碼撰寫「Client 端程式碼」也必須下不少工夫。例如：表單提交前的資料驗證、圖片的輪播、選單的收合等等。 因此，對於 Client 端 是否能正常執行指令碼也必須適當的考量，然而目前瀏灠器的種類繁多，對JavaScript程式碼的解讀也不同；所以如何撰寫出能在大部份瀏灠器上正常執行的指令碼是非常重要的，否則網頁的跨平台性將會大打折扣。 以目前較多人使用的 IE 及 FireFox 來說，有些指令碼其實並不通用，所以在程式的撰寫上必須要多加注意，因此有時候得視情況撰寫替代的程式碼以增加相容性。   舉例來說：   指令：document.getElementsByName("myID") 作用：找出所有 ID="myID" 的元素遵回傳 Array 雖然此一指令能夠在 IE 上正常執行，但是到了 FireFox 上卻是一點用也沒有。 因此，可以考慮將這些元素的 ID 額外加上編號 x ( x 代表任意數字)，然後在網頁載入後，再使用 document.getElementById("myID_x") 將各個元素一一存進一個 Array。     屬性：e.innerText 作用：存取元素的文字內容 在 IE 上，可以使用 e.innerText = "測試內文"; 來指定元素 e 的內容；但是在 FireFox 上，innerText 這個屬性卻沒辦法正常使用。 所幸還有一個屬性 innerHTML 可以在兩者正常執行，因此應該儘量使用 innerHTML 來替代 innerText。     參數： 說明：tbCell 為 table 的 cell 元素、tbRow 為 table 的 row 元素 下列指令碼是在 row 元素中，插入一個 cell 元素，index 為插入位置 tbCell = tbRow.insertCell(); //IE 執行正常、FireFox 則否 tbCell = tbRow.insertCell(index); //IE、FireFox 皆正常   對於常使用 Client 端 指令碼來產生動態產生元素的程設師而言，選擇較高相容性的指令碼來撰寫雖然比較費時；但是至少能夠確保大部份的使用者都能正常顯示、操作，也能減少許多因為相容性而衍生出來的問題。     Posted by 程式設計師 / wyvern

很多網頁設計師都有共同的問題:表格用得好好的，為什麼要改用CSS編寫??尤其是從平面設計轉成網頁設計的人來說，原本Photoshop繪圖，ImageReady排版輸出然後由Dreamweaver調整HTML，css的語法可說是許多人的夢靨。 CSS是Cascading Style Sheets的縮寫，中文可以簡單稱為「樣式表」，由W3C所制定的。CSS的進化由第一級：用於 HTML 網頁中，可取代傳統字型標籤和其他「樣式」標記(ex:背景顏色、文字顏色大小、邊界...等等)，一直到W3C 批准了 CSS 第二級，除了在第一級的規範裡增加了更多功能之外，同時也出現了定位的屬性。而這些屬性也取代了被氾濫使用的table標籤。 以上的敘述還是無法充分的解釋css的優點，以一般人的想法來說，用表格所顯示的效果與css幾乎相同，而css又因不同的瀏覽器支援度而有所差異，可以用表格輕鬆達到的效果何樂而不為??以下列出幾個css的優點，再由您來判定哪一種方式是真正最適合用於網頁設計的的編法，也許您會對css有所改觀。 ‧比較兩種不同寫法的HTML原始碼，表格的原碼數量勢必比css多出許多。 ‧更新、改版更容易。表格設計是死的，css設計是活的，設計好的表格版型     因原始碼的複雜，很難再改變。再者，您可一次更新網站的相同內容，而不     需要每個頁面分別修改。ex:假設，想要把原本標題靠右的文字內容改為置中     ，只需修改css即可。 ‧CSS能讓我們更輕易的修改整個網站的設計風格。大多數的網站不會希望網     站樣貌是同一個樣子，使用久了總會看膩，這時若採用表格設計網頁，勢必     要因為新的版面風格而重新製作表格欄位，反之，css所設計的版面，只需     要修改CSS文字樣式即可。 ‧CSS的編寫照顧到弱勢族群。盲人專用的瀏覽器(語音或點字瀏覽器)，可將     不必要的顯示效果拿掉，而將最重要的內容優先顯示，借此能讓盲人立即掌     握到最重要的資訊，這樣是這幾年最流行的無障礙網頁設計。 ‧網站設計除了整體外觀漂亮之外，還須考量到seo，使自己的網站能在各大     搜尋引擎容易被找到。CSS的設計有助於SEO讓搜尋機器人更加輕易辨識網     頁內容。 綜合以上CSS的優點，您是否也對CSS用來設計版面有了新的看法?當然剛開始使用CSS設計排版對許多網頁設計師是一項艱鉅的挑戰，同樣一個版面，也許用表格編排只需花上半天的時間，用CSS排版卻要用掉三天的工作天，但，一旦掌握其中的道理與規則，相信您也會對CSS愛不釋手。 Posted by 視覺設計師 / Fanny 

什麼是好的「網頁設計」？ 這個問題從很久以前就存在到現在，以客戶來說，會被他們賺錢就是好網站，對設計來說，能發揮最大的設計創意就是好設計 每方都有自己認為好網頁的原因與理由，其實不論網站做的再好，總有人批評，網站做的再差，就是有人喜歡那種風格 但以平均值來說，好的網頁設計，還是有他好的地方與可以提供一個比較大眾化的準則。 以網站最基本最基本的原理來說，撇開 視覺設計與程式設計的好壞，以及網站內容如何豐富，最直接的就是"流量" 流量不高，設計了一個100萬的網站放網頁上，也不會有任何效果，但是另一種思考是，以知名廠商的網站來說 他們不在乎流量，而一定要有一定品質的網頁設計效果，這又是另外一種好的網頁設計： 總而言之，好的有網頁設計定義實在太多種，看是要以賺錢為主，還是以打形象為主，最適當的應該是"符合當前最大利益與效益" 的網站，應該就是好的網頁設計。 以剛成立的網站來說，"流量"就是最基本的需求，以老字號公司來說，"形象"就是一種無形的資產，但是可以轉化成消費者對 產品的印象，因此 [　如何符合客戶當前的需求與行銷手法　] 再某些程度上，可以算是一個好的網頁設計。 Posted by 網頁設計師 / Asen

最近這幾年正好是網頁設計由table走向css的一個過渡時期，其實很多設計包括我自已一開始都會覺得css是非常麻煩的，有的時候為了解決某個瀏覽器的一個小bug，往往花上半天到一天的時間，而雖然書上總是說的很容易，但在實作的時候也總是會碰到很多問題，所以很多設計都會直接跟我說”用table就好啦!”或是”table萬歲!” 可是因為在許多css的書籍及網站都宣揚許多使用css的好處，所以雖然一開始花了很多時間在研究，後來真的也漸漸發現了使用css及table的差異，和它的好處: 1.原始碼整個乾淨了許多，沒有那些多餘了tr，td， [  原始碼瞬間瘦身成功  ] 2.由於原始碼變得整齊，而且標籤也具有意義，所以在修改的時候變得更容易， [  更好管理  ] ，不需要盲目的尋找不具意義的標籤，一個一個作修改，節省了許多時間 3.網站檔案變小後，當然 [  load網頁的速度也加快了許多  ] 4.有意義的標籤如title、h1、h2，使得搜尋引擊更容易去判斷此網站的內容及關鍵字為何，進而 [  提升網站的排名  ] 『 當然使用css還有許多優點是我所沒有提到的，但是我覺得基於上面四項好處，我們就應該儘量的由table轉向css，致力研究更多css的用法，讓我們的客戶擁有更通用、更優化的一個網站。』 Posted by 視覺設計師 / 小P