前言：本站為你精心整理了探索動態(tài)網(wǎng)頁設(shè)計與實現(xiàn)范文，希望能為你的創(chuàng)作提供參考價值，我們的客服老師可以幫助你提供個性化的參考范文，歡迎咨詢。

1動態(tài)網(wǎng)頁設(shè)

1．1網(wǎng)頁設(shè)計原則

網(wǎng)頁設(shè)計的目的是成功抓住用戶“眼球”，并最終為企業(yè)帶來經(jīng)濟效益，所以網(wǎng)頁的設(shè)計也遵守設(shè)計的3C原則：簡潔、一致性、好的對比度。網(wǎng)頁要能簡潔明了地表達網(wǎng)站的主題；一致性表現(xiàn)在網(wǎng)站中的各鏈接網(wǎng)頁的布局、色彩和風格上要一致；好的對比度則體現(xiàn)在網(wǎng)站的內(nèi)容上要有著重點。只有堅持這3個原則才能制作出優(yōu)秀的網(wǎng)站。

1．2網(wǎng)站設(shè)計構(gòu)思

在制作網(wǎng)站之前，應先進行構(gòu)思。第一步先明確網(wǎng)站主題。如本文是一個論壇，可以以個人的愛好為主題，或以學習PHP技術(shù)為主題，只有先定主題，才能確定接下來的內(nèi)容。第二步是明確首頁上鏈接的目錄，如本論壇網(wǎng)站里共有“首頁、冰點論壇、在線聊天、新聞頻道、下載頻道、開心笑話、上傳文件、關(guān)于我們、設(shè)為首頁、站點管理”共10個主鏈接目錄，要將其放在突出的位置，可根據(jù)需求放在左邊、頂部、右邊等較明顯的地方。第三步是明確網(wǎng)頁的主圖，主圖的選擇要根據(jù)本網(wǎng)頁的主題而定，主圖可大于網(wǎng)頁上的其它圖片，主要是為了突出主題，吸引用戶。通過以上3個步驟，首頁的基本風格也就確定了，也可根據(jù)實際情況再進行調(diào)整，或增加一些其它元素，如背景、小動畫等。

1．3網(wǎng)站風格

1．3．1版面設(shè)計

版面設(shè)計不僅要注意到形式的美觀、和諧，還要考慮到實用性，所以可在傳統(tǒng)設(shè)計的構(gòu)圖下，進行個性化創(chuàng)新，可使用如圖1的幾種構(gòu)圖現(xiàn)很多網(wǎng)站的首頁設(shè)計采用c型，因為它簡潔明了，頂部為主圖，左邊為導航欄，下邊為版權(quán)信息等內(nèi)容，中間作為各導航目錄對應的內(nèi)容展示區(qū)。本論壇設(shè)計使用d型架構(gòu)，并做了創(chuàng)新：延用了上下邊框的設(shè)計，把左邊框的導航欄整合在了上邊框中節(jié)省了空間，使網(wǎng)頁顯得更簡潔。在內(nèi)容區(qū)使用的是傳統(tǒng)的左右對稱作法，并且使用了共享邊框，使每層網(wǎng)頁具有相同的上下邊框，統(tǒng)一了風格，導航欄的上嵌共享有效地解決了導航欄深層網(wǎng)頁的路徑修改問題，實現(xiàn)鏈接路徑完全自動化層次修改。

1．3．2網(wǎng)站內(nèi)容層次

網(wǎng)頁中的每一個欄目都使用了獨立的文件夾目錄，不同欄目中調(diào)用的圖片都放在了各自文件目錄中的專用文件夾下，而不是全部都堆在一起，這樣可使網(wǎng)站結(jié)構(gòu)更清晰。

1．3．3首頁

首頁是一個網(wǎng)站的門戶，用戶首先看到的就是首頁，所以，首頁的制作非常關(guān)鍵。首先，首頁要體現(xiàn)出網(wǎng)站的主題，能讓用戶一目了然；其次，首頁要做的美觀，吸引用戶繼續(xù)瀏覽網(wǎng)站。如圖3所示的首頁里，最上面是兩個圖片，主要是為了突出主題和讓網(wǎng)頁能夠更加好看。在圖片下面是導航條。在頁面的中間欄主要有“戰(zhàn)爭新聞”、“娛樂新聞”、“體育新聞”、“笑話兩則”等。這幾項內(nèi)容都是存放在數(shù)據(jù)庫里，內(nèi)容都是“新聞頻道”、“開心笑話”頁面里面最新更新的內(nèi)容。在點擊之后鏈接到相應的頁面。從數(shù)據(jù)庫里調(diào)出數(shù)據(jù)的代碼如下：＜？php＄connect＝mysql＿pconnect（"local－h(huán)ost"，""，""）；mysql＿select＿db（"news"，＄connect）；＄sql＝"SELECT＊FROMwar"；＄result＝mysql＿query（＄sql）；＄rows＝＠m(xù)ysql＿num＿rows（＄result）；＄a＿row＝＠m(xù)ysql＿affected＿rows（＄result）；＄i＝＄rows－1；＠m(xù)ysql＿data＿seek（＄result，＄i）；＄data＝＠m(xù)ysql＿fetch＿array（＄result）；echo"＜／a＞＜ahref＝＇news／war／show＿war．php？id＝＄data［id］＇＞＄data［list］＜／a＞"；／／｝？＞在頁面左欄是一個能快捷進入論壇的登錄頁面和一個友情鏈接。論壇登錄可以方便用戶更快地進入論壇。頁面的右欄是一個通知欄，可以通過這個通知欄在網(wǎng)站里各種即時信息。因為通知欄要經(jīng)常更新，所以對通知欄的管理要很方便。本論壇網(wǎng)站中單獨做了一項通知的管理。為了和用戶能夠進行更好的交流，在論壇首頁的左欄做了一個投票系統(tǒng)，可以直觀反映用戶對本網(wǎng)站的評價。構(gòu)思過程見圖4。

1．3．4新聞頻道，開心笑話

因為“新聞頻道”、“開心笑話”制作的方法都是相同的，所以在這里只講述“新聞頻道”的制作過程。新聞頻道的主體界面沿用了首頁的風格，頁面的效果如圖5。圖5新聞頻道頁面的兩面是圖片新聞，中間欄是新聞標題。這樣的好處是能使讀者很快了解新聞的主要內(nèi)容。并且新聞做成了分頁顯示，這樣更有利于讀者的閱讀。這些數(shù)據(jù)、圖片都是用PHP通過數(shù)據(jù)庫管理的，所以更換信息也比較方便。對于新聞的標題都已經(jīng)做成超鏈接的形式，如果點擊即會連接到新聞的詳細內(nèi)容。值得一提的是圖片管理，這里的圖片都是通過上傳組件把圖片上傳到指定的文件夾里，在上傳圖片的同時把圖片的路徑、名稱以及相關(guān)的信息都存儲到相應的數(shù)據(jù)庫里，然后，再通過數(shù)據(jù)庫里的圖片信息把圖片調(diào)出顯示。

1．3．5上傳文件，下載頻道

“上傳文件”、“下載頻道”是兩個相互關(guān)聯(lián)的頁面，主•80要實現(xiàn)的功能是：網(wǎng)絡用戶如果有什么好的軟件想和其他網(wǎng)絡用戶共享，那么就可以從“上傳文件”的頁面通過上傳組件把軟件上傳，這樣就可以在“下載頻道”里發(fā)現(xiàn)這個軟件，并且可以下載。

2網(wǎng)站管理

現(xiàn)在所有的軟件都越來越容易使用，各行各業(yè)都在提倡以人為本的服務，這就要求一個好的網(wǎng)站應該很方便去管理。本論壇提供了一個“網(wǎng)站管理”頁面，使得網(wǎng)絡的管理者使用起來非常方便。具體作法如下：對管理員要設(shè)置密碼，這樣才能保證網(wǎng)站的安全性，并且管理員還應該對密碼有修改的權(quán)力。修改密碼的代碼如下：＜？＄connect＝mysql＿pconnect（"localhost"，""，""）；mysql＿select＿db（"pwd"，＄connect）；＄sql＝"select＊frompwd"；＄result＝mysql＿query（＄sql）；＄data＝mysql＿fetch＿array（＄result）；if（＄data［user］＝＝＄＿POST［"user1"］and＄data［pwd］＝＝＄＿POST［"pwd1"］）｛＄query＝"updatepwdsetuser＝＇"．＄＿POST［"user2"］．"＇，pwd＝＇"．＄＿POST［"pwd2"］．"＇"；＄result＝mysql＿query（＄query）；＄txt＝"修改成功！"；echo"＄txt＜ahref＝”．．／gl．php”＞返回管理首頁＜／a＞"；｝else｛＄txt＝"你的用戶名或者密碼錯誤！"；echo"＄txt重新修改請＜ahref＝”pwd．php”＞返回＜／a＞"；｝？＞

3網(wǎng)站優(yōu)化設(shè)計

追求上網(wǎng)的速度，大家通常會選擇快的網(wǎng)速，但有時也會發(fā)現(xiàn)，雖然網(wǎng)速很快，但所下載的頁面速度卻很慢，這很大程度上是因為網(wǎng)站設(shè)計不合理，所以要去優(yōu)化網(wǎng)站，通過采取一些簡單的技術(shù)加快網(wǎng)站的下載速度。

3．1打散表格

很多網(wǎng)站的頁面設(shè)計是使用“表格”進行布局的，因為表格可方便地進行復雜的版面設(shè)計，但由于網(wǎng)頁中的所有元素都包含在一張大表中，所以瀏覽器會將整張表格的內(nèi)容都下載下來才開始顯示相關(guān)內(nèi)容。為了縮短顯示時間，可將一張大表格打散成若干個獨立的表格來實現(xiàn)，但同時也要注意不要放置無實用價值的表格，特別是使用一些所見即所得工具，如FrontpPage，這樣會產(chǎn)生一些多余的單元格、行和列，會使網(wǎng)頁下載的速度變得更慢，因為瀏覽器要對這些多余的內(nèi)容進行解釋并顯示。

3．2杜絕表格嵌套

使用表格嵌套進行網(wǎng)頁版面設(shè)計的好處是能夠設(shè)計出具有創(chuàng)意的版面來，所以這一點一直吸引著設(shè)計人員，但嵌套層數(shù)越多的表格，瀏覽器進行解釋與顯示的時間就越長，所以在不放棄表格嵌套設(shè)計帶來的創(chuàng)意優(yōu)勢外，建議表格嵌套層數(shù)不超過3層，這樣既能充分利用表格嵌套設(shè)計版面的優(yōu)勢，又能很好地避免過多嵌套帶來的瀏覽器顯示速度緩慢的問題。

3．3合理運用

HTML代碼很多網(wǎng)頁設(shè)計者會運用HTML代碼來代替一些用圖標工具制作的效果，從而總體減少網(wǎng)站的代碼，提高網(wǎng)站的運行速度，但有時適當?shù)倪x擇圖標工具會比使用HT－ML代碼運行的速度要快，比如：有時使用適當?shù)膱D片比用HTML代碼要來的快。

3．4優(yōu)化腳本運行

很多網(wǎng)頁設(shè)計者會將腳本語言PHP、JavaScript或Vbscript等放在代碼的＜head＞中，以便于所有的網(wǎng)頁在下載前先啟動腳本語言。但是，如在＜head＞中放置大量的腳本代碼會導致整個頁面的下載及顯示速度變慢。為了減少過量腳本代碼在＜head＞中帶來的顯示速度緩慢問題，可把那些用戶觸發(fā)事件時才執(zhí)行的腳本程序放到觸發(fā)事件之前，也可寫到一個外部文件中，等使用時，再加以調(diào)用。

4結(jié)語

動態(tài)網(wǎng)頁設(shè)計，不僅要具備網(wǎng)頁制作的基本知識，還需要熟練掌握網(wǎng)絡編程知識。動態(tài)網(wǎng)頁設(shè)計不是一門單純的藝術(shù)，它是多種藝術(shù)的總和，要設(shè)計出美觀實用的網(wǎng)頁，必須要系統(tǒng)掌握各種網(wǎng)頁制作技術(shù)，包括圖像處理技術(shù)、音頻處理技術(shù)和編程知識等。但最重要的是有系統(tǒng)的科學理論作為指導。隨著人們對網(wǎng)絡信息需求的日益增多，相信動態(tài)網(wǎng)頁技術(shù)也會不斷發(fā)展，技術(shù)會不斷成熟。

作者：崔絨花單位：南通中等專業(yè)學校