三種網(wǎng)站設計技術的比較分析

三種網(wǎng)站設計技術的比較分析摘要：在設計時，我們會將網(wǎng)頁分為公共部分和私有部分。常見的網(wǎng)站設計技術有模板式、框架式以及CSS式。我們可以使用不同的設計技術來實現(xiàn)網(wǎng)站建設，它們在設計步驟、后期維護等方面各有不同。關鍵詞：網(wǎng)站設計；DIVCSS;模板；框架0引言在網(wǎng)頁設計歷史中，最早普及的是Microsoft公司的Frontpage軟件，之后取代它成為主流設計軟件的是Dreamweave。Dreamweaver可以實現(xiàn)多種不同的網(wǎng)頁設計形式，從靜態(tài)網(wǎng)站到動態(tài)網(wǎng)站，Dreamweaver都可以實現(xiàn)非常好的設計效果。在2006年前，一般比較流行的網(wǎng)站設計是框架或者模板技術，之后由于新的網(wǎng)頁標準的出現(xiàn)，DIV+CSS設計技術逐漸成為了主流。無論使用哪種網(wǎng)站設計技術，都可以使用Dreamweaver來完成。1網(wǎng)站設計首先我們要從工業(yè)設計的角度來談談網(wǎng)站設計。網(wǎng)站設計要兼顧實用性和美觀性，以實用性為第一要素，以滿足用戶需要為最高目標。網(wǎng)站首先要設計出整體框架，確定網(wǎng)站整體主要包括哪幾部分內(nèi)容，并明確用戶需求，將所有網(wǎng)站內(nèi)容經(jīng)分析轉換為各個網(wǎng)站欄目。在這個階段要確定網(wǎng)站的基本結構，網(wǎng)頁的基本樣式以及網(wǎng)站的logo和色調等主要標識。這些要通過對目標客戶需求的調查研究來判斷決2頁面布局設計師常常將頁面分為公共部分和私有部分，這種設計理念有利于解決以下3個問題：①用戶在每個頁面看到相同的導航欄等網(wǎng)站主要信息，可盡快掌握該網(wǎng)站的結構，找到自己需要的信息；②便于實現(xiàn)整體設計；③便于實現(xiàn)后期維護。常見的公共部分包括導航欄、banner、logo、登錄框和搜索框。私有部分是指每個子頁面與其他子頁面不同的部分。從設計者維護者角度，可以根據(jù)需要只修改部分頁面代碼或者部分內(nèi)容即可實現(xiàn)整個網(wǎng)站的全部更新。比如網(wǎng)站的banner常常需要修改，我們就需要在設計之初考慮到如何布置才能避免重復勞動，可以讓我們經(jīng)由一些簡單的操作就一次實現(xiàn)全站所有頁面的更新。所以雖然各個子頁要有效傳遞不同信息，但網(wǎng)站內(nèi)各個頁面之間應保持部分一致。這個保持一致的部分就是公共部分。3不同設計技術的比較從一個小型網(wǎng)站設計的角度，我們主要考慮的就是如何實現(xiàn)頁面公共部分的設計問題。以一個普通的上下分欄的頁面為例，一般把公共部分放置在頁面上端，每個子頁面的私有部分放在頁面下部。以下為3種網(wǎng)站設計技術在Dreamweaver中的設計步驟?？蚣苁骄W(wǎng)站需首先創(chuàng)建一個框架文件，此時整個頁面看似分為上下兩個部分，其實是由兩個頁面文件拼成的。需要整體修改一個網(wǎng)站的所有頁面的公共部分時，只要修改上面那個頁面即可?？蚣芫W(wǎng)站的最大不足是不容易控制頁面結構，最主要的是不容易控制復雜頁面在不同分辨率下的布局。模板式網(wǎng)站需首先創(chuàng)建一個模板文件，一般把公共部分設置為不可編輯部分，將子頁面需要更新的私有信息模塊設為可編輯部分，然后以該模板為基礎創(chuàng)建各個頁面。這樣在創(chuàng)建各個頁面的時候，就會擁有統(tǒng)一的公共部分。當有修改的需要時在模板中只要修改該公共部分，保存后各個由該模板創(chuàng)建的子頁面會全部自動更新。如果是DIV+CSS網(wǎng)站，其特點是表現(xiàn)形式和內(nèi)容的分離，也就是頁面內(nèi)容與頁面形式代碼分別存儲在兩個文件中，所有頁面的形式代碼為公共部分，在創(chuàng)建網(wǎng)站的時候首先創(chuàng)建公用的CSS代碼文件以及基本框架頁面html文件，然后根據(jù)需要在頁面框架文件中補充更新進去具體頁面內(nèi)容，最好分別保存為各個子頁面。在需要更新頁面布局的時候只要單獨修改CSS文件即可。4結束語從設計者角度來講，使用模板方式來設計網(wǎng)站是最常見也最簡便的方式，如果能善用Dreamweaver“所見即所得”的功能，可以在最短時間內(nèi)設計出更多美觀實用的頁面，也兼顧了后期維護的需要。但是使用模板加表格的網(wǎng)頁設計模式很容易出現(xiàn)冗余代碼。相比之下DIV+CSS設計模式能夠簡化代碼，提高網(wǎng)頁打開速度，帶來很好的瀏覽體驗。參考文獻：:1］楊陽.DIV+CSS網(wǎng)站布局實錄［M］.北京:科學出版社，2009．[2]鄭