動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)論文

./畢業(yè)設(shè)計(jì)〔論文題目：動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)摘要在Internet飛速發(fā)展的今天,互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道,正以一種前所未有的沖擊力影響著人類的活動(dòng)。它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此建設(shè)在Internet應(yīng)用上的地位顯的格外重要,它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分?，F(xiàn)今的社會(huì),人們已經(jīng)離不開了網(wǎng)絡(luò),網(wǎng)絡(luò)已經(jīng)成為人與人之間交流的一種形式,它能夠把事情的復(fù)雜化轉(zhuǎn)為簡(jiǎn)單化,擺脫了時(shí)間和空間的限制。為消費(fèi)者提供了一個(gè)網(wǎng)絡(luò)生活空間,通過其網(wǎng)頁(yè)展示了企業(yè)介紹、企業(yè)榮譽(yù)、產(chǎn)品介紹、招商信息、加盟程序、留言等一系列容的介紹。瀏覽者不僅可以利用留言板經(jīng)濟(jì)而又快捷地與外界進(jìn)行各種信息的溝通,也可以直接在網(wǎng)上申請(qǐng)加盟。本論文還介紹了網(wǎng)頁(yè)的結(jié)構(gòu)分析和具體功能實(shí)現(xiàn),網(wǎng)頁(yè)的界面和運(yùn)作方式,盡力模擬近代網(wǎng)頁(yè)普遍性形式,成為一個(gè)完整的動(dòng)態(tài)關(guān)鍵字Dreamweaver；Php；PhpMyAdmin；動(dòng)態(tài)網(wǎng)頁(yè).目錄1引言12網(wǎng)頁(yè)制作概述12.1網(wǎng)頁(yè)的類型12.1.1靜態(tài)頁(yè)面12.1.2動(dòng)態(tài)頁(yè)面22.2網(wǎng)頁(yè)開發(fā)技術(shù)22.3網(wǎng)頁(yè)布局32.3.1網(wǎng)頁(yè)布局的基本概念3網(wǎng)頁(yè)布局方法52.3.2網(wǎng)頁(yè)布局技術(shù)72.4網(wǎng)頁(yè)配色82.5網(wǎng)頁(yè)設(shè)計(jì)流程93動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)環(huán)境和技術(shù)93.1了解Dreamweaver開發(fā)工具93.2Php語言基礎(chǔ)知識(shí)113.3開發(fā)環(huán)境介紹124設(shè)計(jì)及具體代碼實(shí)現(xiàn)124.1網(wǎng)頁(yè)結(jié)構(gòu)設(shè)計(jì)124.2創(chuàng)建數(shù)據(jù)庫(kù)134.3主要模塊的代碼實(shí)現(xiàn)144.3.1注冊(cè)代碼的實(shí)現(xiàn)144.3.2登陸及退出登錄代碼的實(shí)現(xiàn)16留言代碼的實(shí)現(xiàn)184.4運(yùn)行測(cè)試194.4.1注冊(cè)194.4.2登陸21留言224.5遇到的問題及解決方法23結(jié)束語24致-25-參考文獻(xiàn)-26-.1引言網(wǎng)頁(yè)是信息發(fā)布與表現(xiàn)的一種主要形式。因此要實(shí)現(xiàn)一個(gè),必須了解網(wǎng)頁(yè)制作的相關(guān)知識(shí)。較流行的開發(fā)工具有：Dreamweaver,Php,PhpMyAdmin。Dreamweaver是建立Web站點(diǎn)和應(yīng)用程序的專業(yè)工具,它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合成一個(gè)功能強(qiáng)大的工具,可利用它快速創(chuàng)建界面及站點(diǎn)的應(yīng)用程序[1]。Php因?yàn)檎Z法簡(jiǎn)單、開源、跨平臺(tái),而且功能強(qiáng)大,同時(shí)能與Windows的操作系統(tǒng)無縫結(jié)合,得到廣大用戶歡迎并迅速成為各類制作的主流開發(fā)環(huán)境。使用PhpMyAdmin無須編寫任何代碼,只需通過直觀的可視化操作就可以完成大部分?jǐn)?shù)據(jù)庫(kù)管理任務(wù),是一個(gè)面向?qū)ο蟮?、采用事件?qū)動(dòng)機(jī)制的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)[2]。2網(wǎng)頁(yè)制作概述2.1網(wǎng)頁(yè)的類型2.1.1靜態(tài)頁(yè)面靜態(tài)頁(yè)面是網(wǎng)頁(yè)的代碼都在頁(yè)面中,不需要執(zhí)行asp,php,jsp,.net等程序生成客戶端網(wǎng)頁(yè)代碼的網(wǎng)頁(yè)。靜態(tài)頁(yè)面不能自主管理發(fā)布更新的頁(yè)面,如果想更新網(wǎng)頁(yè)容,要通過FTP軟件把文件DOWN下來用網(wǎng)頁(yè)制作軟件修改〔通過fso等技術(shù)例外。但是靜態(tài)頁(yè)面最大的好處是下載速度快,因?yàn)椴恍枰绦蜻\(yùn)算和數(shù)據(jù)庫(kù)連接。常見的靜態(tài)頁(yè)面以.html、.htm為擴(kuò)展名的。并非上沒有動(dòng)畫的就是靜態(tài)頁(yè)面[3]。2.1.2動(dòng)態(tài)頁(yè)面動(dòng)態(tài)頁(yè)面是通過執(zhí)行asp、php、jsp、.net等程序生成客戶端網(wǎng)頁(yè)代碼的網(wǎng)頁(yè)。動(dòng)態(tài)頁(yè)面通?？梢酝ㄟ^后臺(tái)管理系統(tǒng)對(duì)的容進(jìn)行更新管理。發(fā)布新聞,發(fā)布公司產(chǎn)品,交流互動(dòng),博客,網(wǎng)上調(diào)查等,這都是動(dòng)態(tài)的一些功能,也是我們常見的。動(dòng)態(tài)網(wǎng)頁(yè)是需要語言環(huán)境支持的,動(dòng)態(tài)頁(yè)面常見的擴(kuò)展名有：.asp、.php、.jsp、.cgi等。動(dòng)態(tài)頁(yè)面的"動(dòng)態(tài)"是與客戶端用戶互動(dòng)的意思,而非網(wǎng)頁(yè)上有動(dòng)畫的就是動(dòng)態(tài)頁(yè)面[4]。動(dòng)態(tài)網(wǎng)頁(yè)是最常用的建設(shè)的一種表達(dá)形式,其優(yōu)點(diǎn)在于可以根據(jù)先前所制定好的程序界面,根據(jù)用戶的不同請(qǐng)求返回相應(yīng)的數(shù)據(jù)。可以說是一對(duì)多的關(guān)系。從而達(dá)到資源的最大利用和節(jié)省服務(wù)器上的物理資源。如果今后需要改變站點(diǎn)風(fēng)格,只需要重新制作前臺(tái)所訪問的數(shù)據(jù)即可。只要數(shù)據(jù)庫(kù)結(jié)構(gòu)不變,可以很快的進(jìn)行改版的。2.2網(wǎng)頁(yè)開發(fā)技術(shù)動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)技術(shù)介紹——HTML、ASP、JSP、CGI、PHP。HTML〔HyperTextMark-upLanguage即超文本標(biāo)記語言,是WWW的描述語言。嚴(yán)格的來講,HTML不能算做一門編程語言,因?yàn)樗鼪]有自己的數(shù)據(jù)類型,也沒有分支、循環(huán)等控制結(jié)構(gòu)。它的設(shè)計(jì)簡(jiǎn)單,結(jié)構(gòu)靈活,允許在Web瀏覽器及其它兼容的應(yīng)用程序中顯示文本和圖像,并且文檔的某些部分可以成為超。完成后把這些文檔保存為*.html文件,然后用瀏覽器打開。

HTML是網(wǎng)絡(luò)的通用語言,一種簡(jiǎn)單、通用的全置標(biāo)記語言。它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面,這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到,無論使用的是什么類型的電腦或?yàn)g覽器[5]。在早期,動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)主要采用CGI技術(shù),即CommonGatewayInterface<公用網(wǎng)關(guān)接口>。在早期,你可以使用不同的程序編寫合適的CGI程序,如VisualBasic,Delphi或C/C++等。雖然CGI技術(shù)成熟而且功能強(qiáng)大,但由于編程困難,效率低下,修改復(fù)雜等缺陷,所以有逐漸被新技術(shù)取代的趨勢(shì)。ASP全名ActiveServerPages,是一個(gè)WEB服務(wù)器端的開發(fā)環(huán)境,利用它可以產(chǎn)生和運(yùn)行動(dòng)態(tài)的、交互的、高性能的WEB服務(wù)應(yīng)用程序。ASP采用腳本語言VBScript〔Javascript作為自己的開發(fā)語言。ASP更精確的說是一個(gè)中間件,這個(gè)中間件將Web上的請(qǐng)求轉(zhuǎn)入到一個(gè)解釋器中,在這個(gè)解釋器中將所有的ASP的Script進(jìn)行分析,再進(jìn)行執(zhí)行,而這時(shí)可以在這個(gè)中間件中去創(chuàng)建一個(gè)*.html文件〔靜態(tài)網(wǎng)頁(yè)。PHP是一種跨平臺(tái)的服務(wù)器端的嵌入式腳本語言.它大量地借用C,Java和Perl語言的語法,并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動(dòng)態(tài)生成頁(yè)面.它支持目前絕大多數(shù)數(shù)據(jù)庫(kù)。還有一點(diǎn),PHP是完全免費(fèi)的[6]。JSP是Sun公司推出的新一代站點(diǎn)開發(fā)語言,他完全解決了目前ASP,PHP的一個(gè)通?。_本級(jí)執(zhí)行〔據(jù)說PHP4也已經(jīng)在Zend的支持下,實(shí)現(xiàn)編譯運(yùn)行。Sun公司借助自己在Java上的不凡造詣,將Java從Java應(yīng)用程序和JavaApplet之外,又有新的碩果,就是Jsp－－JavaServerPage。Jsp可以在Serverlet和JavaBean的支持下,完成功能強(qiáng)大的站點(diǎn)程序。2.3網(wǎng)頁(yè)布局2.3.1網(wǎng)頁(yè)布局的基本概念最開始,網(wǎng)頁(yè)呈現(xiàn)在你面前的時(shí)侯,它就好像一白紙,它需要你任意揮灑你的設(shè)計(jì)才思,可以創(chuàng)造出自己的設(shè)計(jì)方案。,雖然你能控制一切你所能控制的東西,但假如你知道什么是一種約定俗成的標(biāo)準(zhǔn)或者說大多數(shù)訪問者的瀏覽習(xí)慣,那么你可以在此基礎(chǔ)上加上自己的東西,這樣你創(chuàng)造出來的網(wǎng)頁(yè)才能更好的被別人接受?！?頁(yè)面尺寸由于頁(yè)面尺寸和顯示器大小及分辨率有關(guān)系,網(wǎng)頁(yè)的局限性就在于你無法突破顯示器的圍,而且因?yàn)闉g覽器也將占去不少空間,留下給你的頁(yè)面圍變得越來越小。一般分辨率在800x600的情況下,頁(yè)面的顯示尺寸為：780x428個(gè)象素；分辨率在640x480的情況下,頁(yè)面的顯示尺寸為:620X311個(gè)象素；分辨率在1024X768的情況下,頁(yè)面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出,分辨率越高頁(yè)面尺寸越大。瀏覽器的工具欄也是影響頁(yè)面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加,那么當(dāng)你顯示全部的工具欄時(shí),和關(guān)閉全部工具欄時(shí),頁(yè)面的尺寸是不一樣的。在網(wǎng)頁(yè)設(shè)計(jì)過程中,向下拖動(dòng)頁(yè)面是惟一給網(wǎng)頁(yè)增加更多容<尺寸>的方法。除非你能肯定站點(diǎn)的容能吸引大家拖動(dòng),否則不要讓訪問者拖動(dòng)頁(yè)面超過三屏。如果需要在同一頁(yè)面顯示超過三屏的容,那么你最好能在上面做上頁(yè)面部連接,方便訪問者瀏覽?！?整體造型造型就是創(chuàng)造出來的物體形象,這里是指頁(yè)面的整體形象。這種形象應(yīng)該是一個(gè)整體,圖形與文本的接合應(yīng)該是層疊有序。雖然,顯示器和瀏覽器都是矩形,但對(duì)于頁(yè)面的造型,你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形,圓形,三角形,菱形等。對(duì)于不同的形狀,它們所代表的意義是不同的。比如矩形代表著正式,規(guī)則,你注意到很多ICP和政府網(wǎng)頁(yè)都是以矩形為整體造型；圓形帶表著柔和,團(tuán)結(jié),溫暖,安全等,許多時(shí)尚站點(diǎn)喜歡以圓形為頁(yè)面整體造型；三角形代表著力量,權(quán)威,牢固,侵略等,許多大型的商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三角形為頁(yè)面整體造型；菱形代表著平衡,協(xié)調(diào),公平,一些交友站點(diǎn)常運(yùn)用菱形作為頁(yè)面整體造型。雖然不同形狀帶表著不同意義,但目前的網(wǎng)頁(yè)制作多數(shù)是接合多個(gè)圖形加以設(shè)計(jì),在這其中某種圖形的構(gòu)圖比例可能占的多一些?！?頁(yè)頭頁(yè)頭又可稱之為頁(yè)眉,頁(yè)眉的作用是定義頁(yè)面的主題。比如一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁(yè)眉里。這樣,訪問者能很快知道這個(gè)站點(diǎn)是什么容。頁(yè)頭是整個(gè)頁(yè)面設(shè)計(jì)的關(guān)鍵,它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁(yè)面的協(xié)調(diào)性。頁(yè)頭常放置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告?！?文本文本在頁(yè)面中出現(xiàn)都數(shù)以行或者塊<段落>出現(xiàn),它們的擺放位置決定者整個(gè)頁(yè)面布局的可視性。在過去因?yàn)轫?yè)面制作技術(shù)的局限,文本放置的位置的靈活性非常小,而隨著DHTML的興起,文本已經(jīng)可以按照自己的要求放置到頁(yè)面的任何位置?！?頁(yè)腳頁(yè)腳和頁(yè)頭相呼應(yīng)。頁(yè)頭是放置站點(diǎn)主題的地方,而頁(yè)腳是放置制作者或者公司信息的地方。你能看到,許多制作信息都是放置在頁(yè)腳的?！?圖片圖片和文本是網(wǎng)頁(yè)的兩大構(gòu)成元素,卻一不可。如何處理好圖片和文本的位置成了整個(gè)頁(yè)面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。〔7多媒體除了文本和圖片,還有聲音,動(dòng)畫,視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到,但隨著動(dòng)態(tài)網(wǎng)頁(yè)的興起,它們?cè)诰W(wǎng)頁(yè)布局上也將變得更重要。2.3.2網(wǎng)頁(yè)布局方法網(wǎng)頁(yè)布局的方法有兩種,第一種為紙上布局；第二種為軟件布局。下面分別加以介紹?！?紙上布局法許多網(wǎng)頁(yè)制作者不喜歡先畫出頁(yè)面布局的草圖,而是直接在網(wǎng)頁(yè)設(shè)計(jì)器里邊設(shè)計(jì)布局邊加容。這種不打草稿的方法不能讓你設(shè)計(jì)出優(yōu)秀的網(wǎng)頁(yè)來。所以在開始制作網(wǎng)頁(yè)時(shí),要先在紙上畫出你頁(yè)面的布局草圖來。首先,尺寸的選擇。目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數(shù)訪問者,你頁(yè)面的尺寸以800X600的分辨率為準(zhǔn)。其次,造型的選擇。先在白紙上畫出象征瀏覽器窗口的矩形,這個(gè)矩形就是你布局的圍了。選擇一個(gè)形狀作為整個(gè)頁(yè)面的主題造型,我們選擇圓形,因?yàn)樗碚呷岷?和時(shí)尚流行比較相稱,然后在矩形框架里隨意畫出來,你可以試者在增加一些圓形或者其它形狀。這樣畫下來,你會(huì)發(fā)現(xiàn)很亂。其實(shí),如果你一開始就想設(shè)計(jì)出一個(gè)完美的布局來是比較困難的,而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點(diǎn),你不要擔(dān)心你設(shè)計(jì)的布局是否能夠?qū)崿F(xiàn)。事實(shí)上,只要你能想到的布局都能靠現(xiàn)今的HTML技術(shù)實(shí)現(xiàn)。如圖2-1和圖2-2圖2-1手繪布局圖圖2-2布局圖考慮到左邊向左凹的弧線,為了取得平衡我們?cè)陧?yè)面右邊增加了一個(gè)矩形,<也可以是一條線段>如圖2-3。圖2-3布局圖的改善然后,增加頁(yè)頭。一般頁(yè)頭都是位于頁(yè)面頂部,所以我們?yōu)閳D3增加了一個(gè)頁(yè)頭,為了和左邊的弧線和右邊的矩形取得平衡,我們?cè)黾恿艘粋€(gè)矩形頁(yè)頭并讓頁(yè)頭相交與左邊的弧線,如圖2-4。圖2-4頁(yè)頭的圖示然后,增加文本。頁(yè)面的空白部分加別加入文本和圖形。因?yàn)樵陧?yè)面右邊有矩形作為陪襯,所以文本放置在空白部分不會(huì)因?yàn)樽筮叺幕【€而顯得不協(xié)調(diào),如圖2-5。圖2-5文本的圖示最后,增加圖片。圖片是美化頁(yè)面和說明容必須的媒體。在這里把圖片加入到適當(dāng)?shù)牡胤?如圖2-6。圖2-6圖片的圖示經(jīng)過以上的幾個(gè)步驟,一個(gè)時(shí)尚頁(yè)面的大概布局就出現(xiàn)了。當(dāng)然,它不是最后的結(jié)果,而是你以后制作時(shí)的重要參考依據(jù)?！?軟件布局法除了紙上布局,還可以利用軟件來完成這些工作。如利用Photoshop。Photoshop所具有的對(duì)圖像的編輯功能用到設(shè)計(jì)網(wǎng)頁(yè)布局上更顯得心應(yīng)手。利用Photoshop可以方便的使用顏色,使用圖形,并且可以利用層的功能設(shè)計(jì)出用紙無法實(shí)現(xiàn)的布局意念。2.3.2網(wǎng)頁(yè)布局技術(shù)〔1層疊樣式表的應(yīng)用在新的HTML4.0標(biāo)準(zhǔn)中,CSS<層疊樣式表>被提出來,它能完全精確的定位文本和圖片。CSS有點(diǎn)復(fù)雜,但它的確是一個(gè)好的布局方法[7]。曾經(jīng)無法實(shí)現(xiàn)的想法利用CSS都能實(shí)現(xiàn)。目前在許多站點(diǎn)上,層疊樣式表的運(yùn)用是一個(gè)站點(diǎn)優(yōu)秀的體現(xiàn)。比如一些企業(yè)?！?表格布局表格布局被廣泛使用,已經(jīng)成為一個(gè)潛在的標(biāo)準(zhǔn)。隨便瀏覽一個(gè)站點(diǎn),它們一定是用表格布局的。表格布局的優(yōu)勢(shì)在于它能對(duì)不同對(duì)象加以處理,而又不用擔(dān)心不同對(duì)象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點(diǎn)是,當(dāng)你用了過多表格時(shí),頁(yè)面下載速度受到影響[8]。對(duì)于表格布局,打開一個(gè)站點(diǎn)的首頁(yè),然后保存為HTML文件,利用網(wǎng)頁(yè)編輯工具打開它<要所見即所得的軟件>,會(huì)可以看到這個(gè)頁(yè)面是如何利用表格的。〔3框架布局由于它的兼容性,框架布局并沒有被所有人接受。但從布局上考慮,框架結(jié)構(gòu)不失為一個(gè)好的布局方法。它如同表格布局一樣,把不同對(duì)象放置到不同頁(yè)面加以處理,因?yàn)榭蚣芸梢匀∠吙?所以一般來說不影響整體美觀。2.4網(wǎng)頁(yè)配色充斥著枯燥的設(shè)計(jì),惠普、IBM、戴爾、微軟,以及其他數(shù)不盡的〔相似的布局,相似的配色。這樣一種標(biāo)準(zhǔn)化的界面可以使瀏覽更方便,但同時(shí)帶給用戶一種很世俗的體驗(yàn),并不能與訪客產(chǎn)生一種積極的聯(lián)系。面對(duì)這種單調(diào)的設(shè)計(jì),有一種解決方法,就是使用顏色?？赡軟]有其他設(shè)計(jì)元素能像顏色一樣能影響人們對(duì)世界感受。顏色可以瞬間改變我們的情緒和意見。顏色會(huì)讓我們感覺到舒適、敬畏,或者激動(dòng)[9]。在界面設(shè)計(jì)中,顏色組合對(duì)設(shè)計(jì)非常有用?？梢詤^(qū)分設(shè)計(jì)讓用戶更加難忘、引導(dǎo)用戶使用戶專注于交互、吸引用戶使頁(yè)面布局更舒適,更有魅力。一旦有機(jī)會(huì)可以讓更獨(dú)特,就不能放棄。如果你的做的很醒目,那么用戶可能會(huì)花更多時(shí)間瀏覽并且想是從哪里訪問過來的,他們有可能記住這個(gè)并且下次再訪問?？赡軟]有比顏色更好的元素可以達(dá)到這樣的效果了。人們會(huì)馬上對(duì)顏色產(chǎn)生感覺：激動(dòng)、高興或者枯燥乏味。當(dāng)你試圖在一個(gè)充滿飽和色調(diào)的頁(yè)面上瀏覽信息時(shí),你的眼睛會(huì)不斷地返回那些亮的顏色。最強(qiáng)的視覺元素是最重要的。我們趨向于忘記那些深藍(lán)、黃色和灰色,因?yàn)槊刻於伎吹?。在那些用戶需要長(zhǎng)時(shí)間在線使用的Web應(yīng)用程序中,注意這一點(diǎn)尤為重要。不是很強(qiáng)烈的配色可以使用戶專注于工作和接收重要信息。當(dāng)然完美的Web體驗(yàn)不能僅僅依靠顏色,結(jié)構(gòu)、交互、布局等方面也必須協(xié)同工作,來創(chuàng)建可用、易用的和應(yīng)用程序。但是顏色是平衡中的重要部分,不能忽略。2.5網(wǎng)頁(yè)設(shè)計(jì)流程網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)互動(dòng)的過程,不僅是設(shè)計(jì)師構(gòu)思設(shè)計(jì)就可以完成的。從客戶提出需求到最終發(fā)布,期間需要客戶與設(shè)計(jì)人員共同參與協(xié)商才可以,具體流程如下：首先,獲取客戶需求和資料。在設(shè)計(jì)頁(yè)面之前,設(shè)計(jì)師需要知道客戶的需求,從而確定客戶建立的目的?？蛻籼岢鲂璺浅Ｖ匾囊粋€(gè)環(huán)節(jié)。沒有詳細(xì)的需求,設(shè)計(jì)人員無法憑空進(jìn)行設(shè)計(jì)制作。在這個(gè)步驟中,雙方的溝通與交流是非常重要的。其次,確定容。設(shè)計(jì)人員選擇適合自己的圖像編輯軟件、動(dòng)畫制作軟件和網(wǎng)頁(yè)制作軟件進(jìn)行網(wǎng)頁(yè)的初步設(shè)計(jì),這中間可能還需要和客戶進(jìn)行多次溝通才能達(dá)到客戶滿意的效果。在具體設(shè)計(jì)時(shí),設(shè)計(jì)人員應(yīng)該為定位一個(gè)主題,從而保證所有網(wǎng)頁(yè)都圍繞這個(gè)主題進(jìn)行設(shè)計(jì)制作,保證風(fēng)格的和諧統(tǒng)一。然后,申請(qǐng)域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務(wù)器空間上,然后上傳發(fā)布文件。最后,后期維護(hù)。一般靜態(tài)上傳后,如果客戶方?jīng)]有專業(yè)人員維護(hù),這樣就需要設(shè)計(jì)人員從客戶方獲取新資料進(jìn)行定期或不定期的更新。如果是動(dòng)態(tài),設(shè)計(jì)人員需要負(fù)責(zé)培訓(xùn)客戶方如何使用后臺(tái)管理,這樣客戶就可以自己通過后臺(tái)管理添加信息,設(shè)計(jì)人員只要及時(shí)更正動(dòng)態(tài)的錯(cuò)誤即可。3動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)環(huán)境和技術(shù)3.1了解Dreamweaver開發(fā)工具Dreamweaver是美國(guó)MACROMEDIA公司開發(fā)的集網(wǎng)頁(yè)制作和管理于一身的所見即所得網(wǎng)頁(yè)編輯器,它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁(yè)開發(fā)工具,利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)[10]。Dreamweaver的特點(diǎn)如下：最佳的制作效率：Dreamweaver可以用最快速的方式將Fireworks或Photoshop等檔案移至網(wǎng)頁(yè)上。Dremweaver能與您喜愛的設(shè)計(jì)工具,如Flash等和外掛模組等搭配,不需離開Dremweaver便可完成,整體運(yùn)用流程自然順暢。除此之外,只要單擊便可使Dreamweaver自動(dòng)開啟Firework或Photoshop來進(jìn)行編輯與設(shè)定圖檔的最佳化。管理：使用地圖可以快速制作雛形,設(shè)計(jì),更新和重組網(wǎng)頁(yè)。改變網(wǎng)頁(yè)位置或檔案名稱,Dreamweaver會(huì)自動(dòng)更新所有連結(jié)。使用支援文字,HTML碼,HTML屬性標(biāo)簽和一般語法的搜尋及置換功能使得復(fù)雜的更新變得迅速又簡(jiǎn)單。無可比擬的控制能力：Dreamweaver是唯一提供RoundtripHTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。它包含HomeSite和BBEdit等主流文字編輯器。幀<frames>和表格的制作速度快的令您無法想像。進(jìn)階表格編輯功能使您簡(jiǎn)單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組,Dreamweaver支援精準(zhǔn)定位,利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)行版面配置。所見即所得：Dreamweaver成功整合動(dòng)態(tài)式出版視覺編輯及電子商務(wù)功能,提供超強(qiáng)的支援能力給Third-party廠商,包含ASP,Apache,BroadVision,ColdFusion,iCAT,Tango與自行發(fā)展的應(yīng)用軟體。當(dāng)您正使用Dreamweaver在設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁(yè)時(shí),所見即所得的功能,讓您不需要透過瀏覽器就能預(yù)覽網(wǎng)頁(yè)。夢(mèng)幻樣版和XML：Dreamweaver將容與設(shè)計(jì)分開,應(yīng)用於快速網(wǎng)頁(yè)更新和團(tuán)隊(duì)合作網(wǎng)頁(yè)編輯。建立網(wǎng)頁(yè)外觀的樣版,指定可編輯或不可編輯的部份,容提供者可直接編輯以樣式為主的容卻不會(huì)不小心改變既定之樣式。您也可以使用樣版正確地匯入或輸出XML容。全方位的呈現(xiàn)：利用Dreamweaver設(shè)計(jì)的網(wǎng)頁(yè),可以全方位的呈現(xiàn)在任何平臺(tái)的熱門瀏覽器上。對(duì)于動(dòng)態(tài)HTML支援和鼠標(biāo)換圖效果,聲音和動(dòng)畫的DHTML效果資料庫(kù)可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能,Dreamweaver可以告知您在不同瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時(shí),只要從Dreamweaver的在下載它的描述檔,便可得知詳盡的成效報(bào)告。3.2Php語言基礎(chǔ)知識(shí)PHP〔HypertextPreprocessor是一種嵌入HTML頁(yè)面中的腳本語言。它大量地借用C和Perl語言的語法,并結(jié)合PHP自己的特性,使Web開發(fā)者能夠快速地寫出動(dòng)態(tài)產(chǎn)生頁(yè)面[11]。PHP是完全免費(fèi)的開源產(chǎn)品,不用花錢,Apache和MYSQL也是用樣免費(fèi)開源,在國(guó)外非常流行,PHP和MYSQL搭配使用,可以非?？焖俚拇罱ㄒ惶撞诲e(cuò)的動(dòng)態(tài)系統(tǒng),因此國(guó)外大多數(shù)主機(jī)系統(tǒng)都配有免費(fèi)的APACHE＋PHP＋MYSQL。通常認(rèn)為這種搭配的執(zhí)行效率比IIS＋ASP＋ACCESS要高,而后者的使用還必須另外交錢給微軟。PHP的語法和Perl很相似,但是PHP所包含的函數(shù)卻遠(yuǎn)遠(yuǎn)多于Perl,PHP沒有命名空間,編程時(shí)候必須努力避免模塊的名稱沖突。一個(gè)開源的語言雖然需要簡(jiǎn)單的語法和豐富的函數(shù),但PHP部結(jié)構(gòu)的天生缺陷導(dǎo)致了PHP不適合于編寫比中小型業(yè)余更大的[12]。PHP開發(fā)的成功案例：MediaWiki—著名的維基百科〔Wiki程序,如此龐大的條目居然只用PHP＋MYSQL就能夠支持,真是不可思議。WordPress—著名的Blog系統(tǒng),功能上絲毫不輸于MovableType,不少用戶都紛紛從MovableType轉(zhuǎn)移到了WordPress。總之,PHP語法簡(jiǎn)單,非常易學(xué)易用,很利于快速開發(fā)各種功能不同的定制,PHP因?yàn)榻Y(jié)構(gòu)上的缺陷,使的PHP在復(fù)雜的大型項(xiàng)目上的開發(fā)和維護(hù)都比較困難。它是一種服務(wù)器端的腳本語言,嵌入在HTML中,它可以在多種平臺(tái)上運(yùn)行。其語法與C語言、Java語言的語法相似。它具有龐大的函數(shù)庫(kù),這主要是因?yàn)樗情_源式的,源代碼完全公開,每個(gè)使用PHP的程序員都可以加入自己的函數(shù)庫(kù),從而實(shí)現(xiàn)更多的功能,PHP幾乎支持所有的數(shù)據(jù)庫(kù)。但是PHP對(duì)組件的支持不夠完善,擴(kuò)展性較差,常與免費(fèi)的數(shù)據(jù)庫(kù)系統(tǒng)MySQL一起構(gòu)建中小型B/S應(yīng)用的或信息系統(tǒng)[13]。3.3開發(fā)環(huán)境介紹如果僅僅需要編輯靜態(tài)的HTML網(wǎng)頁(yè),那么安裝和配置服務(wù)器不是必需的,因?yàn)镠TML頁(yè)面的運(yùn)行無需服務(wù)器的支持,但是如果需要在本地測(cè)試Php或者ASP.NET等動(dòng)態(tài)網(wǎng)頁(yè),那么服務(wù)器的支持是必不可少的。Apache本身是一個(gè)開源組織的名稱,它組織開發(fā)了許多優(yōu)良的開源軟件,其中最早的項(xiàng)目便是ApacheHTTPServer,一個(gè)開源的免費(fèi)的Web服務(wù)器[14]。ApacheHTTPServer是ApacheSoftwareFoundation的一部分,除了官方的開發(fā)人員以外還有數(shù)以百計(jì)的用戶參與開發(fā),他們可以提供自己的意見、代碼及文檔等。Php最初員就是基于Apache開發(fā)的,所以它與Apache有良好的兼容性。4設(shè)計(jì)及具體代碼實(shí)現(xiàn)本網(wǎng)頁(yè)是一個(gè)關(guān)于旅游的網(wǎng)頁(yè),其主要實(shí)現(xiàn)了線路介紹、景點(diǎn)介紹、小吃介紹、游客注冊(cè)、游客登錄及退出、游客留言等功能。4.1網(wǎng)頁(yè)結(jié)構(gòu)設(shè)計(jì)css+div結(jié)構(gòu)目前用的人最多,框架結(jié)構(gòu)現(xiàn)在很少有人使用了,而表格結(jié)構(gòu)目前用的人也不多,但并不意味著已經(jīng)被淘汰,它也有DIV所不能取代的效果——方便快速的布局,只要不是經(jīng)常改動(dòng)的小部分就可以用表格。DIV可以與表格一起用,大布局用DIV,而小地方就用表格,效果會(huì)很好。比如本次論文所涉及的網(wǎng)頁(yè)就用到了表格與css+div相結(jié)合的思想,其上、下、左、右和中間分別是一個(gè)單獨(dú)的div模塊。具體框架結(jié)構(gòu)如圖4-1。圖4-1網(wǎng)頁(yè)框架圖4.2創(chuàng)建數(shù)據(jù)庫(kù)本論文設(shè)計(jì)的網(wǎng)頁(yè),所用到的數(shù)據(jù)庫(kù)test是通過數(shù)據(jù)庫(kù)管理工具——PhpMyAdmin做的,具體創(chuàng)建過程就不在這一一介紹了。其包含兩個(gè)表分別為：liuyan、test2,如圖4-2和4-3。圖4-2信息存儲(chǔ)表1本表主要存儲(chǔ)游客名、游客留言容和留言時(shí)間等數(shù)據(jù)。圖4-3信息存儲(chǔ)表2本表主要存儲(chǔ)數(shù)據(jù)有：游客注冊(cè)名、性別、年齡、學(xué)歷、專業(yè)、愛好、備注、密碼〔密碼就是注冊(cè)時(shí),所輸入的驗(yàn)證碼和注冊(cè)時(shí)間。4.3主要模塊的代碼實(shí)現(xiàn)4.3.1注冊(cè)代碼的實(shí)現(xiàn)<?phpif<$_POST['name']>{include<"conn.php">;$up=$_FILES["tx"];$hh=$up['type'];$fff=$up['tmp_name'];$yu=$up['name'];//獲得客戶端和服務(wù)器端的驗(yàn)證碼。$host=$_SERVER['HTTP_HOST'];$host=md5<$host>;$cookie_=$_COOKIE[$host];session_start<>;$y=$_SESSION[$cookie_];$y_d=$_POST['yz'];/*。。。。。。。。。。。。。。核對(duì)客戶端和服務(wù)器端的驗(yàn)證碼庫(kù)。。。。。。。。。。。。。。*/if<$y_d===$y>{/*。。。。。。。。。。。。。。。。。。。查詢數(shù)據(jù)庫(kù)中的資源個(gè)數(shù)。。。。。。。。。。。。。。。。。。。*/$dd=mysql_query<"SELECT*FROM`test2`">;$hang=mysql_num_rows<$dd>;$hang=$hang+1;/*。。。。。。。。。。。。。。values后不能有空格。<id,name,sex,age,diploma,speciality,like,remark,mima,enrolDate>。。。。。。。。。。。*/$sql="insertintotest2values<$hang,'{$_POST[name]}','{$_POST[sex]}',{$_POST[age]},"."'{$_POST[diploma]}','{$_POST[speciality]}','{$_POST[like]}','{$_POST[remark]}','{$_POST[yz]}',now<>>";/*。。。。。。。。。。。。。。。。。。。。。。。。檢測(cè)是否插入成功。。。。。。。。。,。。。。。。。。。*/if<mysql_query<$sql,$conn>>{if<$hh=="image/pjpeg"||$hh=="image/gif"||$hh=="image/png"||$hh=="image/bmp"||$hh=="image/jpg"||$hh=="image/jpeg">{move_uploaded_file<$fff,'E:/zhandian/zhandian1/sousuo/touxiang/'.$_POST['name'].'.jpg'>;//目錄地址不能用反斜杠'\'。}echo"<SCRIPTlanguage=javascript>alert<'注冊(cè)成功,您是第".$hang."位注冊(cè)用戶!'>;</SCRIPT>";}else{echo"<SCRIPTlanguage=javascript>alert<'對(duì)不起,您未能注冊(cè)成功!'>;</SCRIPT>";}}else{echo"<SCRIPTlanguage=javascript>alert<'對(duì)不起您未能注冊(cè)成功,因?yàn)槟斎氲尿?yàn)證碼不正確或右側(cè)的驗(yàn)證碼已經(jīng)失效。'>;</SCRIPT>";}}mysql_close<$conn>;?>這段代碼主要是將游客注冊(cè)信息插入到test2表,如果游客注冊(cè)成功,會(huì)彈出一個(gè)注冊(cè)成功提示框"注冊(cè)成功,您是第***位注冊(cè)用戶!"。如果沒能注冊(cè)成功,則會(huì)彈出一個(gè)注冊(cè)失敗提示框"對(duì)不起,您未能注冊(cè)成功!"或"對(duì)不起您未能注冊(cè)成功,因?yàn)槟斎氲尿?yàn)證碼不正確或右側(cè)的驗(yàn)證碼已經(jīng)失效。",〔出現(xiàn)此提示是因?yàn)橛慰驮谧?cè)時(shí),由于停留時(shí)間過長(zhǎng),對(duì)應(yīng)的session已經(jīng)不存在了如圖4-4所示。圖4-4注冊(cè)界面4.3.2登陸及退出登錄代碼的實(shí)現(xiàn)<?phpheader<'Content-Type:text/html;charset=GB2312'>;include<"conn.php">;$g=mysql_query<"SELECT*FROM`test2`WHEREname='{$_GET[username]}'andmima='{$_GET[mima]}'">;$h=mysql_query<"SELECT*FROM`test2`WHEREmima='{$_GET[mima]}'andname!='{$_GET[username]}'">;$j=mysql_query<"SELECT*FROM`test2`WHEREname='{$_GET[username]}'andmima!='{$_GET[mima]}'">;$hang=mysql_num_rows<$g>;$hang_1=mysql_num_rows<$h>;$hang_2=mysql_num_rows<$j>;if<$hang>{$host=$_SERVER['HTTP_HOST'];$host=md5<$host>;$cookie_=$_COOKIE[$host].$_COOKIE[$host];session_start<>;$_SESSION[$cookie_]=$_GET[username];echo"<divstyle='padding:53px0px53px0px;'><center>歡迎<fontstyle='font-family:宋體;'color='black'><strong><I>".$_GET[username]."</I></strong></font>登陸！</center></div>";}else{if<$hang_1>{echo'用戶名有誤';}else{if<$hang_2>{echo'密碼有誤';}else{echo'用戶名和密碼都有誤';}}}?>這段代碼主要是檢測(cè)游客登錄時(shí),所提交的用戶名和密碼。如果表test2中有游客所提交的游客名,但沒有游客所提交的密碼,則會(huì)輸出一個(gè)錯(cuò)誤提示信息"密碼有誤"。如果表test2中有游客提交的密碼,但沒有游客提交的用戶名,則會(huì)輸出一另一個(gè)錯(cuò)誤信息"'用戶名有誤"。如果表test2中既沒有游客提交的游客名,也沒有游客所提交的密碼,則會(huì)輸出"用戶名和密碼都有誤"。如果表test2中既包含游客提交的游客名,又包含游客提交的密碼,則輸出"歡迎***登陸！"信息,并把游客的名字存入到一個(gè)名為$cookie_的SESSION中。<?phpheader<'Content-Type:text/html;charset=GB2312'>;$host=$_SERVER['HTTP_HOST'];$host=md5<$host>;$cookie_=$_COOKIE[$host].$_COOKIE[$host];session_start<>;$_SESSION[$cookie_]="";?>這段代碼主要是將值為要退出的游客名的SESSION設(shè)為空,登陸界面如圖4-5：圖4-5登陸界面4.3.3留言代碼的實(shí)現(xiàn)<?phpheader<'Content-Type:text/html;charset=GB2312'>;include<"conn.php">;//獲得客戶端和服務(wù)器端的密碼。$host=$_SERVER['HTTP_HOST'];$host=md5<$host>;$cookie_=$_COOKIE[$host].$_COOKIE[$host];session_start<>;$y=$_SESSION[$cookie_];if<$y>{/*。。。。。。。。。。。。。。查詢數(shù)據(jù)庫(kù)中的資源個(gè)數(shù)。。。。。。。。。。。。。。。*/$dd=mysql_query<"SELECT*FROM`liuyan`">;$hang=mysql_num_rows<$dd>;$hang=$hang+1;$sql="insertintoliuyanvalues<$hang,'{$y}','{$_GET[liuyan]}',now<>>";/*。。。。。。。。。。。。。。。。。。檢測(cè)是否插入成功。。。。。。。。。。。。。。。。。。。。。。。。*/if<mysql_query<$sql,$conn>>{echo$hang;}else{echo"留言失敗";}}else{echo"還沒登陸";}mysql_close<$conn>;?>這段代碼主要是將游客提交的留言容插入到表liuyan中,如果游客留言信息被成功插入,則會(huì)輸出插入位置〔游客是第幾位留言的。如果插入失敗。則會(huì)輸出錯(cuò)誤提示信息"留言失敗"或"還沒登陸",〔當(dāng)游客還沒登錄時(shí)就留言,會(huì)輸出此錯(cuò)誤信息留言界面如圖4-6。圖4-6留言界面4.4運(yùn)行測(cè)試我們以游客山為例,來測(cè)試一下本網(wǎng)頁(yè)的幾個(gè)主要功能模塊?！灿慰妥?cè)、游客登錄和游客留言4.4.1注冊(cè)當(dāng)游客山輸入注冊(cè)信息時(shí),界面如圖4-7：圖4-7注冊(cè)界面當(dāng)游客山提交信息成功后,將會(huì)彈出一個(gè)成功提示信息,如圖4-8：圖4-8提示界面當(dāng)我們查看數(shù)據(jù)庫(kù)test中的表test2時(shí),會(huì)發(fā)現(xiàn)其多了一條關(guān)于山的游客信息。如圖4-9：如圖4-9注冊(cè)后的數(shù)據(jù)庫(kù)圖4.4.2登陸當(dāng)山把名字和密碼輸入時(shí),登陸界面如圖4-10：圖4-10登陸界面當(dāng)山以正確的名字和密碼登陸后,出現(xiàn)提示,如圖4-11：圖4-11提示界面4.4.3留言當(dāng)山寫入留言時(shí),留言界面如圖4-12：圖4-12留言界面當(dāng)山成功將留言容提交后,會(huì)彈出一個(gè)留言成功提示框,如圖4-13：圖4-13成功留言界面當(dāng)我們查看數(shù)據(jù)庫(kù)test中的表liuyan時(shí),會(huì)發(fā)現(xiàn)其多了一條有游