第11章 網(wǎng)站建設(shè)實(shí)例下載我們以近期構(gòu)建的一個(gè)動(dòng)態(tài)網(wǎng)站為例，從Apache服務(wù)器的編譯起步，以 Apache、PHP、MySQL為軟件基礎(chǔ)，向大家介紹建立 WWW網(wǎng)站的全過程。讀完本章之后，相信大家都可以學(xué)會(huì)這項(xiàng)技術(shù)，并構(gòu)建自己的以 Web數(shù)據(jù)庫為基礎(chǔ)的動(dòng)態(tài)網(wǎng)站。11.1 Apache、PHP、MySQL簡介PHP、MySQL 和Apache是Linux平臺(tái)網(wǎng)站的最佳拍檔。一項(xiàng)由 Netcraft 組織的非官方調(diào)查顯示，應(yīng)用 PHP的主機(jī)數(shù)目由1998年6月的7 500臺(tái)躍升至1999年3月的410 000臺(tái)。本章介紹這個(gè)Web數(shù)據(jù)庫黃金組合的 PHP+MySQL如何構(gòu)筑一個(gè)網(wǎng)絡(luò)數(shù)據(jù)庫應(yīng)用的方法。 PHP是一個(gè)類似微軟ASP的服務(wù)器端的嵌入式超文本處理語言，是建立動(dòng)態(tài)網(wǎng)站的強(qiáng)大工具。 PHP在前面的章節(jié)中已經(jīng)有了詳細(xì)的介紹，本節(jié)主要介紹 MySQL。MySQL是一個(gè)小巧玲瓏的數(shù)據(jù)庫服務(wù)器軟件，對(duì)于小型(當(dāng)然也不一定很小 )應(yīng)用系統(tǒng)是非常理想的。除了支持標(biāo)準(zhǔn)的 ANSI SQL 語句，它還支持多種平臺(tái)，而在 UNIX系統(tǒng)上該軟件支持多線程運(yùn)行方式，從而能獲得相當(dāng)好的性能。對(duì)于不使用L i n u x的用戶，它可以在Windows NT 系統(tǒng)上以系統(tǒng)服務(wù)方式運(yùn)行，或者在Windows 95/98系統(tǒng)上以普通進(jìn)程方式運(yùn)行。除了MySQL 是完全免費(fèi)這一點(diǎn) (當(dāng)然， MySQL也有一些使用許可方面的限制外)，PHP-MySQL的組合還可以跨平臺(tái)運(yùn)行，這意味著，你可以在 Windows上開發(fā)，然后在 Linux平臺(tái)上運(yùn)行。說了這么多優(yōu)點(diǎn)，大家一定迫不及待地希望看到下文。我們現(xiàn)在從安裝開始，向大家介紹我們所做的每一個(gè)步驟。11.2 Apache、PHP、MySQL的安裝11.2.1 安裝和啟動(dòng)MySQL請(qǐng) 快 點(diǎn) 開 始 行 動(dòng) ， 在 網(wǎng) 上 查 找 到 M y S Q L 的 軟 件 壓 縮 包 。 M y S Q L 主 頁 在h t t p : / / w w w. m y s q l . c o m / 。為了方便人們下載使用(這軟件還是比較大的)，全球有許許多多的鏡像網(wǎng)站；國內(nèi)也有不少L i n u x 技 術(shù) 網(wǎng) 站 提 供 此 軟 件 包 。 為 更 有 效 地 利 用 因 特 網(wǎng) ，請(qǐng)找一個(gè)就近的網(wǎng)站下載。這時(shí)候你也會(huì)有多種選擇：可以下載源代碼；同時(shí)也有各種平臺(tái)上運(yùn)行的預(yù)先編譯過的二進(jìn)制文件可以直接下載。 建議初學(xué)者選擇后一種辦法。另外， MySQL 還為 Windows用戶準(zhǔn)備了一個(gè)共享軟件版本，它的版本號(hào)稍低一些。如果想要最新的版本，得花錢買一個(gè)軟件許可。M y S Q L還提供了 O D B C 驅(qū)動(dòng)程序，使前端應(yīng)用程序可以訪問 MySQL數(shù)據(jù)庫。有關(guān)其他一些詳細(xì)信息在它的網(wǎng)站上都有介紹，可以去看看。預(yù)先編譯過的 Linux版本和Windows版本都很簡單，只須解包即可使用，不需要做太多說下載明。下面簡單介紹一下源代碼的編譯。第11章 網(wǎng)站建設(shè)實(shí)例用用217我們?cè)谛?nèi)的FTP站點(diǎn)下載了mysql-3.22.25.tar.gz.。從編譯軟件包到安裝軟件包的過程中有不少的選擇項(xiàng)，請(qǐng)大家留意這些選項(xiàng)的用途，以便根據(jù)自己的實(shí)際情況做出選擇。當(dāng)然，你若使用的是 mysql的rpm包，只需要解開這個(gè)包即可：r p m - i M y S Q L - x . r p mr p m - i M y S Q L - c l i e n t - x . r p mr p m - i M y S Q L - d e v e l - x . r p mr p m - i M y S Q L - s h a r e d - x . r p m其中，x代表的是 mysql的版本號(hào)。上述安裝將 MySQL執(zhí)行文件放在 /usr/bin目錄下，包含文件放在/usr/include/mysql目錄下，庫文件放在 /usr/lib/mysql目錄下。對(duì)于一個(gè)真正的 Linux 用戶，大都還是習(xí)慣于從源代碼編譯起，我們主要介紹從源代碼入手安裝。將下載壓縮過的軟件包文件，放在一個(gè)目錄下。使用gzip和tar來解壓縮和解包。比較快的做法是使用下面這樣的命令：g u n z i p m y s q l - x . t a r . g z | t a r x v f - 也可以用t a r - z x v f m y s q l - x . t a r . g z其中， x是你自己任取的一個(gè)版本標(biāo)記。上面的命令將創(chuàng)建一個(gè)名為mysql-x的目錄，所有的源程序文件都在這個(gè)目錄下。通過執(zhí)行c d m y s q l - x 命令轉(zhuǎn)入該目錄，仔細(xì)閱讀其中的README文件、 INSTALL文件及一些相關(guān)文件。遇到問題時(shí)，這些文件可能會(huì)對(duì)你有所幫助。MySQL帶有一些便利的配置腳本程序。只須鍵入./configure，就可以讓這些程序完成很多工作。如果需要明確指定要做的事情，可以使用./configure -help命令，它會(huì)列出你可以使用的選項(xiàng)。例如，如果你正在一臺(tái)內(nèi)存較少的機(jī)器上進(jìn)行編譯，那么可以使用-with-low-memory選項(xiàng):. / c o n f i g u r e - - w i t h - l o w - m e m o r y 如果你想把MySQL安裝在一個(gè)總目錄下，而不是安裝在機(jī)器上多個(gè)目錄下，可以指定安裝目錄，使用-prefix:. / c o n f i g u r e - p r e f i x = . . /指定的目錄 /mysql你還可以指定許多其他選項(xiàng)，像編譯過程中要略掉哪些部分、保留哪些部分等。我們不妨假定要全部安裝在服務(wù)器的 /usr/local/mysql目錄下。這意味著我們將鍵入 :. / c o n f i g u r e - p r e f i x = / u s r / l o c a l / m y s q l 配置腳本程序運(yùn)行時(shí)會(huì)檢查你的系統(tǒng)，然后生成一些文件來保證編譯的順利進(jìn)行。如果該腳本程序失敗，它也會(huì)顯示一些有用的錯(cuò)誤信息告訴失敗的原因。大家經(jīng)常會(huì)遇到腳本程序在尋找多線程庫文件時(shí)失敗。此時(shí)請(qǐng)檢查一下系統(tǒng)中是否已經(jīng)安裝了MITpthreads，如果沒有，那么請(qǐng)安裝該軟件。 Linux用戶則必須安裝 LinuxThreads。這些庫文件對(duì)于 MySQL的多線程運(yùn)行模式(也就是運(yùn)行它自己的多個(gè)版本 )是非常關(guān)鍵的。如果以上一切都順利進(jìn)行的話，只須鍵入 make命令，這個(gè)過程可能需要占用較長的時(shí)間。218使用Linux網(wǎng)站建設(shè)技術(shù)指南下載MySQL是相當(dāng)復(fù)雜的程序，編譯起來得用一段時(shí)間。如果發(fā)現(xiàn)錯(cuò)誤，可以檢查文檔，看看是否漏掉了某些與操作系統(tǒng)有關(guān)的準(zhǔn)備工作。接下來，鍵入 make install命令，所有必需的文件都會(huì)安裝到相應(yīng)的目錄下，基本上就可以開始使用了。如果以前從未安裝過 MySQL，那得創(chuàng)建默認(rèn)的許可權(quán)限才能安裝。因此請(qǐng)鍵入./scripts/mysql_install_db來進(jìn)行相應(yīng)的設(shè)置。就這樣，我們的準(zhǔn)備工作完成了。再下面所要做的就是在機(jī)器啟動(dòng)時(shí)自動(dòng)啟動(dòng)數(shù)據(jù)庫，并在關(guān)機(jī)時(shí)自動(dòng)關(guān)閉數(shù)據(jù)庫。這項(xiàng)工作也有一個(gè)專門的腳本程序，用mysql.server start命令可以啟動(dòng)數(shù)據(jù)庫，而用 mysql.server stop可以關(guān)閉數(shù)據(jù)庫。實(shí)在是再簡單不過了。如果你想手動(dòng)啟動(dòng)數(shù)據(jù)庫 (這樣就不用重啟機(jī)器了 )，你已進(jìn)到安裝 MySQL的最上層目錄(/usr/ local/mysql)中，然后鍵入 bin/safe_mysqld &命令。到現(xiàn)在為止，我們已經(jīng)完成了一半安裝工作。接下來是 PHP部分。11.2.2 安裝PHP+Apache之所以標(biāo)題是 PHP+Apache ，是因?yàn)槲覀儗⒉捎靡环N內(nèi)嵌式的編譯方法，這種方法是將PHP編譯進(jìn)了Apache目標(biāo)代碼， PHP作為Apache的一個(gè)模塊，其效率和性能上要比其他的方式好。請(qǐng)準(zhǔn)備好 PHP和Apache的源代碼。PHP的官方站點(diǎn)在 /。這個(gè)網(wǎng)站信息量極大，從開發(fā)項(xiàng)目內(nèi)容到軟件錯(cuò)誤報(bào)告都有。和 MySQL一樣，可以選一個(gè)離你最近的鏡像網(wǎng)站下載。我們選用的版本為PHP-3.0.12。Apache 的官方站點(diǎn)為 ，我們所選用的版本為 apache_1.3.12。關(guān)于Apache，我們已在前面的章節(jié)中介紹過，這里不再復(fù)述。下面要做的是，將下載的文件放在目錄/apps下，進(jìn)入 /apps目錄，用ls檢查是否有這兩個(gè)文件：apache_x.tar.gzphp-x.tar.gz第一步：解壓縮 apache并配置用下列命令解壓縮 apache_x.tar.gz：t a r z x v f a p a c h e _ x . t a r . g z它將解壓縮的文件放在 apache_x目錄下。然后我們開始配置 Apache：c d a p a c h e _ x 進(jìn)入Apache源代碼樹的目錄 ). / c o n f i g u r e - - p r e f i x = / w w w (如果你的Apache最終安裝目錄設(shè)置為/www下)第二步：解壓縮 PHP3并配置和編譯c d . . 回到上級(jí)目錄 )t a r z x v f p h p - x . t a r . g z解壓縮到目錄 php-x)c d p h p - x 進(jìn)入PHP3的源代碼目錄)我們以內(nèi)嵌模塊方式編譯，并為 PHP提供存取MySQL數(shù)據(jù)庫的功能。如果隨后需要增加其他選項(xiàng)或庫文件的話，可以在以后再加進(jìn)去。鍵入下面的命令：. / c o n f i g u r e - - w i t h - m y s q l = / u s r / l o c a l / m y s q l -with-apache=./apache_x執(zhí)行以下的命令：下載makem a k e i n s t a l l第三步：編譯和安裝 Apachecd .(回到上級(jí)目錄 )第11章 網(wǎng)站建設(shè)實(shí)例用用219. / c o n f i g u r e - - p r e f i x = / w w w - - a c t i v a t e - m o d u l e = s r c / m o d u l e / p h p 3 / l i b p h p 3 . amakem a k e i n s t a l l Apache安裝到/www目錄下)到此為止，如果一切順利的話，我們已經(jīng)成功地安裝了所需的軟件。現(xiàn)在請(qǐng)?jiān)谀愕腁pache安裝目錄下找到 ./conf/httpd.conf文件，將AddType application/x-httpd-php3 .php3一行的注釋去掉，這樣對(duì)于以 .php3為后綴的文件將作為 PHP腳本文件處理。11.2.3 啟動(dòng)Apache并測試如果你的系統(tǒng)還有正在運(yùn)行的 httpd進(jìn)程，請(qǐng)關(guān)閉它們，并啟動(dòng)新的進(jìn)程：c d / w w w / b i n. / a p a c h e c t l s t a r t用ps -aux檢查一下你的 httpd進(jìn)程，在確保新編譯的 Apache已經(jīng)開始運(yùn)作后，我們寫一個(gè)簡單的文件test.php3來檢測它。內(nèi)容如下：將這個(gè)文件放在默認(rèn)的網(wǎng)頁存放目錄 www/htdoc/下，運(yùn)行下面的命令：l y n x l o c a l h o s t / t e s t . p h p 3如果輸出時(shí) Hello,World和當(dāng)前PHP的設(shè)置，恭喜，新的 Apache已經(jīng)可以處理 PHP3腳本了。現(xiàn)在，我們要在 PHP中加入MySQL的內(nèi)容了，但首先再次確認(rèn) PHP中包含對(duì) MySQL的支持部分，要想知道 PHP中包含哪些選項(xiàng)，或服務(wù)器方面的一些情況，簡便的方法是使用函數(shù)phpinfo()。例如像下面這樣的一個(gè)程序：保存這個(gè)程序，在瀏覽器中訪問這個(gè)文件 (當(dāng)然也可以像前面那樣，使用 lynx訪問)。你會(huì)看到網(wǎng)頁中包含了一些有趣的、有用的信息。這些信息是有關(guān)服務(wù)器、Web服務(wù)器內(nèi)部環(huán)境變量、PHP中包含的選項(xiàng)等等。在第一段 Extensions中，找到以 MySQL開頭的一行。如果沒有找到，那說明 MySQL支持選項(xiàng)并沒有編譯進(jìn) PHP。再檢查一下安裝步驟，查閱一下 PHP文檔，看是否漏掉了什么。 然后重新進(jìn)行安裝設(shè)置的工作。如果找到了 MySQL那一行(見圖11-1)，那就可以繼續(xù)了。220使用Linux網(wǎng)站建設(shè)技術(shù)指南11.2.4 測試MySQL數(shù)據(jù)庫圖11-1下載從MySQL數(shù)據(jù)庫中讀取數(shù)據(jù)之前，我們得先往數(shù)據(jù)庫里放一些數(shù)據(jù)。現(xiàn)在已經(jīng)出現(xiàn)了一些MySQL的客戶端界面，可以比較容易地操作數(shù)據(jù)庫，但我們?nèi)匀挥斜匾唵谓榻B一下最原始的操作方法。MySQL使用它自己的用戶權(quán)限表。在安裝時(shí)，會(huì)創(chuàng)建一個(gè)默認(rèn)的根(root)用戶，和Linux中相似，但是該用戶是沒有口令的。數(shù)據(jù)庫管理員可以根據(jù)需要來增加用戶并賦予用戶各種不同的權(quán)限，這項(xiàng)工作完全可以另寫一本書了，這里只簡單地使用 root用戶。Linux用戶可以在 MySQL的bin 目錄下(如果完全按照 11.2.1節(jié)中的安裝，這個(gè)目錄就是/usr/local/mysql/bin)輸入命令，但命令必須以 ./開頭，才能讓程序運(yùn)行起來。首先要?jiǎng)?chuàng)建出實(shí)際的數(shù)據(jù)庫。在命令行下，鍵入下列命令：. / m y s q l a d m i n - u r o o t c r e a t e m y d b這樣就創(chuàng)建了一個(gè)名為“mydb”的數(shù)據(jù)庫。-u root選項(xiàng)告訴MySQL我們使用的是root用戶。下一步，我們要加入一些數(shù)據(jù)，這里使用的示例數(shù)據(jù)是一個(gè)同學(xué)錄數(shù)據(jù)庫。如果想在這方面多了解一些，可以查閱 MySQL用戶手冊(cè)或訪問/mysql/網(wǎng)站。把下面的文字復(fù)制到一個(gè)文件中，把該文件存在M y S Q L的 b i n目錄下，并且命名為：mydb.dump。f i r s t v a r c h a r ( 2 0 ) , l a s t v a r c h a r ( 2 0 ) , a d d r e s s v a r c h a r ( 2 5 5 ) , n i c k n a m e v a r c h a r ( 2 0 ) ,P R I M A R Y K E Y ( i d ) , U N I Q U E i d ( i d ) ) ;INSERT INTO classmates VALUES (1,Bob,Smith,128 Here St, Cityname,Big Guy);I N S E R T I N T O c l a s s m a t e s V A L U E S ( 2 , J o h n , R o b e r t s , 4 5 T h e r e St,T o w n v i l l e ,Robbi);I N S E R T I N T O c l a s s m a t e s V A L U E S ( 3 , B r a d , J o h n s o n , 1 N o w h e r e B l v d , S i r ) ;下載第11章 網(wǎng)站建設(shè)實(shí)例用用221然后在命令行下，鍵入下面的命令，把數(shù)據(jù)加入到 mydb數(shù)據(jù)庫中。. / m y s q l - u r o o t m y d b m y d b . d u m p此時(shí)應(yīng)該不會(huì)遇到什么錯(cuò)誤。如果真的出錯(cuò)了，請(qǐng)仔細(xì)檢查一下是否因上面的文字換行而引起錯(cuò)誤?，F(xiàn)在我們已經(jīng)把數(shù)據(jù)導(dǎo)入到數(shù)據(jù)庫中了。我們來處理這些數(shù)據(jù)。把下面的文字存入文件mysqltest.php3中，把該文件存在 Web服務(wù)器的文檔目錄 htdoc下。?$ d b = m y s q l _ c o n n e c t ( l o c a l h o s t , r o o t ) ;mysql_select_db(mydb,$db);$ r e s u l t = m y s q l _ q u e r y ( S E L E C T * F R O M c l a s s m a t e s , $ d b ) ;p r i n t f ( F i r s t N a m e : % s n , m y s q l _ r e s u l t ( $ r e s u l t , 0 , f i r s t ) ) ;p r i n t f ( L a s t N a m e : % s n , m y s q l _ r e s u l t ( $ r e s u l t , 0 , l a s t ) ) ;p r i n t f ( A d d r e s s : % s n , m y s q l _ r e s u l t ( $ r e s u l t , 0 , a d d r e s s ) ) ;p r i n t f ( N i c k n a m e : % s n , m y s q l _ r e s u l t ( $ r e s u l t , 0 , n i c k n a m e ) ) ;?我們對(duì)上面的代碼做個(gè)簡要的解釋。 mysql_connect()函數(shù)負(fù)責(zé)以指定的用戶名 (本例中用戶名是 root)連接到指定機(jī)器 (在本例中機(jī)器是本機(jī) localhost)上的MySQL數(shù)據(jù)庫。如果你想指定用戶口令，也可以把它送給這個(gè)函數(shù)。連接的結(jié)果保存在變量 $db中。隨后， mysql_select_db()函數(shù)告訴PHP，我們要讀取的數(shù)據(jù)庫是 mydb。我們可以在程序中同時(shí)連接到多臺(tái)機(jī)器上的多個(gè)數(shù)據(jù)庫上，但目前我們還是限于連接一個(gè)數(shù)據(jù)庫。接下來，mysql_query()函數(shù)完成最復(fù)雜的部分。利用剛才得到的連接結(jié)果標(biāo)識(shí)，該函數(shù)把一行SQL語句送給MySQL服務(wù)器去處理。返回的結(jié)果保存在變量 $result中。最后，mysql_result()函數(shù)顯示 SQL查詢命令所得到的各個(gè)字段的值。利用變量 $result，我們就可以找到第一條記錄，記錄號(hào)是 0，并將其中各字段的值顯示出來?，F(xiàn)在我們來測試 mysqltest.php3：l y n x l o c a l h o s t / m y s q l t e s t . p h p 3其顯示的結(jié)果應(yīng)該是：F i r s t N a m e : B o bL a s t N a m e : S m i t hA d d r e s s : 1 2 8 H e r e S t , C i t y n a m eP o s i t i o n : B i g G u y如果一切都很順利，那么很好，軟件的安裝和測試已經(jīng)全部完成，我們就可以著手建設(shè)自己的網(wǎng)站了。11.3 網(wǎng)站設(shè)計(jì)和主頁面制作11.3.1 網(wǎng)站總體設(shè)計(jì)網(wǎng)站建設(shè)者首先需要考慮的是網(wǎng)站的主題，任何一個(gè)網(wǎng)站必須統(tǒng)一在一個(gè)明確的主題之222使用Linux網(wǎng)站建設(shè)技術(shù)指南下載下，Internet上各種信息浩如煙海，如果一個(gè)網(wǎng)站要包羅萬象，顯然是不現(xiàn)實(shí)的。如果沒有明確的主題，什么內(nèi)容都想包括一點(diǎn)兒，結(jié)果往往相當(dāng)于什么都沒有，因此首先必須確立一個(gè)明確的主題，主題的選擇應(yīng)該結(jié)合個(gè)人的興趣特長，還應(yīng)該考慮網(wǎng)站的維護(hù)和發(fā)展。一個(gè)中等規(guī)模的網(wǎng)站，應(yīng)具備10個(gè)以上的頁面和較大量的信息資料。建設(shè)者首先應(yīng)該從整體上把握網(wǎng)站的結(jié)構(gòu)，將各個(gè)頁面、各種資料整齊有序地結(jié)合起來，總體結(jié)構(gòu)設(shè)計(jì)應(yīng)力求分類簡明、層次清晰、結(jié)構(gòu)完整。Linux網(wǎng)站建設(shè)聯(lián)盟，站點(diǎn)提供如下功能：新聞、技術(shù)、文檔、常用軟件、素材庫、BBS論壇和聊天室、友情鏈接和相關(guān)站點(diǎn)、本站創(chuàng)作組介紹等等，每個(gè)主要功能模塊都緊緊圍繞“Linux網(wǎng)站建設(shè)聯(lián)盟”這個(gè)主題。11.3.2 網(wǎng)站風(fēng)格設(shè)計(jì)一個(gè)好的網(wǎng)站應(yīng)該具有一個(gè)統(tǒng)一的風(fēng)格，包括頁面的劃分、頁面標(biāo)題、使用的字體組合、配色方案、樣式等等。獨(dú)特的風(fēng)格，賞心悅目的頁面設(shè)計(jì)將會(huì)給訪問者留下深刻的印象。一般而言，風(fēng)格可嚴(yán)肅，可活潑，可素雅，可華麗，主要由網(wǎng)站的主題而定。我們的“LinuxWebmater”屬于技術(shù)性站點(diǎn)，因此選擇了比較樸素的風(fēng)格。用深藍(lán)、深綠、淺灰作為主色調(diào)，用二號(hào)幼圓、宋體作為主要字體 (和印刷品中通用的 2號(hào)字是不同的，前者是一種較小的字體 )。在這個(gè)網(wǎng)站的開發(fā)過程中保持一致的風(fēng)格是一件很困難的事情，因?yàn)橐环N風(fēng)格往往包含好幾種字體、字號(hào)、顏色、效果的搭配，要求開發(fā)者長期地將這么多內(nèi)容牢記心上，是很讓人頭疼的。另外， HTML在布局和精確的定位方面，也有很多不足之處。結(jié)束這些問題的是誕生于1996年底的“串接樣式表 (也譯作風(fēng)格紙 )”(Cascading Style Sheet)技術(shù)，也就是常說的CSS。CSS是一項(xiàng)很有用的技術(shù)，限于篇幅，這里不做專門講解，愛好者可以參閱專門的書籍。11.3.3 需要注意的問題在網(wǎng)站建設(shè)中一定要注意下面幾點(diǎn)：1)頁面清晰、鏈接明確。再次強(qiáng)調(diào)頁面的清晰，如果瀏覽者看到的頁面雜亂無章，大量的文檔、信息、鏈接無序地?cái)[放，他可能立刻關(guān)閉窗口，并且再也不會(huì)到這里來。網(wǎng)站建設(shè)者的目標(biāo)應(yīng)該是，讓用戶可以輕松愉快地在網(wǎng)站里找到他所需要的東西，讓用戶一目了然地知曉每一個(gè)鏈接的目的地、每一個(gè)下級(jí)頁面所應(yīng)該包含的內(nèi)容。2)頁面的打開時(shí)間。如果一個(gè)頁面本身很大，又包含了較多的圖片、動(dòng)畫、聲音等多媒體效果等，還有 Java Applet插件，那就需要考慮用戶能有多大的耐心來等待打開這個(gè)頁面了。對(duì)于撥號(hào)上網(wǎng)的用戶，如果打開一個(gè)頁面就需要幾分鐘時(shí)間的話，恐怕他就寧愿“割愛”了?？紤]到網(wǎng)絡(luò)的流量和用戶的資源，建議不要使用太大的圖像，并且轉(zhuǎn)化為JPG或GIF 格式。GIF動(dòng)畫最好用專門的工具壓縮?，F(xiàn)在有一種新的 PNG圖像文件，但實(shí)用中可能會(huì)帶來瀏覽器兼容性方面的問題。另外， Java Applet也會(huì)占用較多的客戶端資源，建議少用。11.3.4 “Linux網(wǎng)站建設(shè)者”首頁“Linux網(wǎng)站建設(shè)者”的首頁包括如下內(nèi)容：網(wǎng)站標(biāo)題部分：主要是兩個(gè)圖像，一個(gè)是本站的標(biāo)題圖片，一個(gè)是創(chuàng)作組的圖標(biāo)。接下下載第11章 網(wǎng)站建設(shè)實(shí)例用用223來是本站導(dǎo)航欄：提供進(jìn)入各個(gè)功能模塊的超級(jí)鏈接。頁面正文：導(dǎo)航欄以下的部分是首頁主體，將它縱向劃分成三欄，分別占25%、50% 、25% 。中間一欄提供新聞 ( 有關(guān) Linux系統(tǒng)和網(wǎng)站建設(shè)的新聞 ) ，左邊一欄是本站熱點(diǎn)，包括“技術(shù)文檔”、“常用軟件”、欄目中最常用的一些內(nèi)容以及一些最新更新的內(nèi)容，使用“new”和“hot”的小圖標(biāo)，使得各個(gè)項(xiàng)目特別明顯。右邊一欄包括本站更新日志和一些最常用的鏈接。頁面效果如圖 11-2所示。圖11-2這個(gè)頁面大量運(yùn)用了表格來劃分頁面，圖11-3是將文字圖片去掉并且將所有表格邊框設(shè)置為寬一點(diǎn) (pixel)、顏色為黑色的效果。將兩幅圖對(duì)應(yīng)起來，可以看出頁面的劃分使用情況。最頂端的一個(gè)表格劃分成 3列，左右兩列分別放站點(diǎn)標(biāo)題圖片和創(chuàng)作組圖標(biāo)，中間留給將添加的內(nèi)容。下面的表格劃分成 4列，左右是為了留空，中間兩格分別是主菜單條和導(dǎo)航欄。菜單欄和主體之間的空白部分只是一個(gè)“ ”標(biāo)記。主體部分的表格實(shí)際上分成五欄，第二欄和第四欄寬度都是十點(diǎn) (pixel)，在這兩欄的中部分別插入了這樣一個(gè)表格： 也就是說，它只包含一個(gè)寬一點(diǎn) (pixel)、背景為藍(lán)色的單元格，這就是我們?cè)趫D 11-2中看到的左中右三個(gè)主欄之間分割的藍(lán)色豎線。而頁面中劃分用的藍(lán)色橫線是在某一個(gè)單元格中添加一條橫線， HTML代碼是這樣的：在主體部分表格的每一列中繼續(xù)嵌套表格，主要是為了圖標(biāo)和列表項(xiàng)目對(duì)齊。有些格加上了背景色，就成為很明顯的標(biāo)題欄。224使用Linux網(wǎng)站建設(shè)技術(shù)指南11.4 網(wǎng)站設(shè)計(jì)和主頁面制作11.4.1 Web-BBS的結(jié)構(gòu)分析圖11-3下載在首頁的“線上交流”部分，包含了一個(gè)基于WWW的BBS系統(tǒng)，使用第 8章介紹的 PHP技術(shù)制作而成。下面詳細(xì)介紹這個(gè) WWW-BBS(或稱Web-BBS)的制作方法，也作為第 8章的一個(gè)完整的示例。1. Web-BBS基本結(jié)構(gòu)首先分析 Web-BBS的組成結(jié)構(gòu)，前提是該 BBS基于Apache+PHP+MySQL結(jié)構(gòu)，也就是說，使用 MySQL數(shù)據(jù)庫存儲(chǔ)有關(guān)數(shù)據(jù)，使用 PHP訪問數(shù)據(jù)庫 (可以是本機(jī)訪問，也可以是遠(yuǎn)程訪問)，進(jìn)行文章列表、顯示、增加等操作。在圖11-4中，標(biāo)示出了訪問者、Apache+PHP服務(wù)器和M y S Q L 數(shù) 據(jù) 庫 之 間 的 訪 問 關(guān) 系 。首先，客戶端瀏覽器送出 HTTP訪問請(qǐng)求，WWW服務(wù)器受到請(qǐng)求以后，判斷是否需要向數(shù)據(jù)庫查詢，如果需要，生成S Q L查詢指令，并送到數(shù)據(jù)庫服務(wù)器中。這部分功能主要由PHP3程序?qū)崿F(xiàn)。MySQL數(shù)據(jù)庫服務(wù)器收到相應(yīng)端口送來的查詢請(qǐng)求以后，進(jìn)行數(shù)據(jù)庫、表的操作，以表單(query)形式向查詢者返回查詢結(jié)果。這部分功能由MySQL服務(wù)器實(shí)現(xiàn)。SQL查詢HTTP訪問MySQL數(shù)據(jù)庫Apache+PHP3.0Internet訪問者圖11-4查詢結(jié)果HTML頁面下載第11章 網(wǎng)站建設(shè)實(shí)例用用225最后，WWW服務(wù)器收到查詢結(jié)果，使用其中的數(shù)據(jù)生成標(biāo)準(zhǔn)的 HTML頁面，并將HTML代碼返回給原訪問者。這部分功能同樣由 PHP3編程實(shí)現(xiàn)。需要注意的是，客戶送來的請(qǐng)求可能包括：文章列表目錄、目錄翻頁、文章內(nèi)容、發(fā)表文章、回復(fù)文章等等，但其響應(yīng)流程大都如上所述。2. Web-BBS的數(shù)據(jù)存儲(chǔ)結(jié)構(gòu)深入到Web-BBS的具體細(xì)節(jié)，首先來關(guān)注數(shù)據(jù)存儲(chǔ)結(jié)構(gòu)，也就是有關(guān)MySQL數(shù)據(jù)庫和數(shù)據(jù)表的內(nèi)容。我們?cè)O(shè)計(jì)的簡單的 Web-BBS不涉及到用戶注冊(cè)、身份確認(rèn)方面的內(nèi)容，因此，不需要建立用戶數(shù)據(jù)表；所有的數(shù)據(jù)表都用來存放版面文章。一般而言，每張數(shù)據(jù)表對(duì)應(yīng)一個(gè)版面，需要保存的內(nèi)容包括：1)文章編號(hào)相應(yīng)的數(shù)據(jù)庫字段名“ id”。顯然是一個(gè)整數(shù)編碼，每一篇文章編號(hào)遞增，在數(shù)據(jù)庫中簡單地設(shè)置為 INT型就可以了。每次發(fā)表文章時(shí)，由程序自動(dòng)填寫這個(gè)字段，取值為當(dāng)前數(shù)據(jù)庫中最大的 id加1。后面將要看到，這個(gè)字段的存在，使數(shù)據(jù)庫操作和代碼設(shè)計(jì)簡單了很多。2)文章題目在數(shù)據(jù)庫中字段名為“ title”，字符串型，最大長度 30個(gè)字符，非空字段，也就是說不接受題目為空的文章。3)文章作者字段名“ author ”，字符串型，最大長度 18個(gè)字符，非空字段；其實(shí)，在BBS上發(fā)表文章， 99%都用假名(或者說是BBS Name，在BBS上用的名字 )，這里要求一定要輸入名字，是為了“回復(fù)文章”時(shí)用。4)作者E-mail 字段名“address”，字符串型，可以為空，如果不為空的話，在瀏覽文章時(shí)，將可以通過點(diǎn)擊作者 E-mail地址給作者寫信。5)發(fā)表日期字段名“ date”，日期型，在發(fā)表文章時(shí)，由程序?qū)懭氘?dāng)前日期，將要使用MySQL的函數(shù)NOW()，返回MySQL服務(wù)器的當(dāng)前日期。6) 文章內(nèi)容字段名“content”，存放文章內(nèi)容，設(shè)置為 TEXT類型，這個(gè)類型允許的最大數(shù)據(jù)長度為65535，每個(gè)記錄實(shí)際占用空間為實(shí)際文本長度加 2，這個(gè)類型很適合保存文章正文。3. Web-BBS的功能模塊分析Web-BBS應(yīng)該具備的基本功能模塊如圖 11-5所示。進(jìn)站版面文章瀏覽回復(fù)發(fā)表文章新文章發(fā)表文章圖11-5標(biāo)題生成提交文章處理226使用Linux網(wǎng)站建設(shè)技術(shù)指南下載WWW-BBS應(yīng)該包括這樣的基本功能：版面文章瀏覽、信件回復(fù)、發(fā)表文章。注意，信件回復(fù)和發(fā)表文章本質(zhì)上是一樣的，只是在文章題目上有一點(diǎn)小小的不同。我們按照這樣的功能劃分：在“版面文章瀏覽”的頁面包括文章列表和當(dāng)前文章內(nèi)容兩部分，利用框架頁(frame)的形式，一方面列出每篇文章的題目、作者、發(fā)表日期等信息，另一方面顯示“當(dāng)前文章”的詳細(xì)內(nèi)容。而“發(fā)表文章”的頁面主要是一個(gè)表單，要求用戶輸入文章題目、作者、E-mail等信息，當(dāng)然還有文章內(nèi)容。在表單提交后需要進(jìn)行處理，包括文章的儲(chǔ)存、索引的生成和向用戶發(fā)出“文章已發(fā)表”的提示信息。圖11-6進(jìn)一步說明了Web-BBS的請(qǐng)求-響應(yīng)信息流程。 版面文章瀏覽部分客戶端過程：(1)用戶對(duì)Web-BBS進(jìn)行HTTP訪問； (2) PHP服務(wù)器返回版面文章標(biāo)題列表頁面； (3)用戶選定文章，要求查看文章詳細(xì)內(nèi)容；(4) Web-BBS返回文章詳細(xì)內(nèi)容。注意，這里提到服務(wù)器端都使用We b - B B S這一說法，因?yàn)閷?duì)客戶而言，A p a c h e + P H P服務(wù)器和MySQL服務(wù)器是一個(gè)整體，客戶并不知道它們內(nèi)部的數(shù)據(jù)處理過程。服務(wù)器端過程： PHP服務(wù)器使用 SQL語句向 MySQL服務(wù)器查詢文章標(biāo)題； MySQL服務(wù)器以 q u e r y表的形式返回文章標(biāo)題列表；PHP服務(wù)器使用 SQL語句向MySQL服務(wù)器查MySQL 數(shù)據(jù)庫詢某一文章的詳細(xì)內(nèi)容；M y S Q L 服務(wù)器以query表的形式返回文章詳細(xì)內(nèi)容。實(shí)際的請(qǐng)求-響應(yīng)過程：(1)- - -。 發(fā)表文章客戶端過程： (5)用戶申請(qǐng)發(fā)表文章；(6)返回發(fā)表文章頁面； (7)用戶輸入文章內(nèi)容等有關(guān)選項(xiàng)，提交給 Web-BBS。服務(wù)器端過程： Apache+PHP服務(wù)器接收到用戶提交的文章內(nèi)容以后，使用SQL語句將其加入數(shù)據(jù)庫。實(shí)際的請(qǐng)求-響應(yīng)過程： -(6)-。 Web-BBS的界面分析Apache+PHP3.0Internet 訪問者圖11-6進(jìn)站以后直接進(jìn)入版面文章瀏覽界面，提供當(dāng)前的版面文章列表供訪問者選擇閱讀，并且顯示選定的文章的內(nèi)容。我們可以用框架(frame)頁面把瀏覽器窗口分割成三個(gè)區(qū)域。上部為標(biāo)題欄和網(wǎng)站導(dǎo)航。下部為 BBS區(qū)域，其中左邊為文章標(biāo)題列表區(qū)，用表格 (table)列出各篇文章的標(biāo)題、發(fā)布時(shí)間、作者等內(nèi)容，而每個(gè)標(biāo)題都是一個(gè)超級(jí)鏈接，訪問者點(diǎn)擊它，就在瀏覽器下方的右半部分顯示文章的內(nèi)容。界面設(shè)計(jì)如圖 11-7所示。顯然，左邊的文章標(biāo)題列表區(qū)不可能顯示BBS所有文章的列表，那實(shí)在是太多了，因此我們只能一頁列出幾篇文章，并且提供幾個(gè)按鈕進(jìn)行翻頁。同樣，窗口的下半部分也至少應(yīng)該有這樣兩個(gè)按鈕：發(fā)表新文章、回復(fù)當(dāng)前文章。用戶進(jìn)入“回復(fù)當(dāng)前文章”或者“發(fā)表文章”界面時(shí)，只需要在右邊的區(qū)域內(nèi)打開“發(fā)表文章”頁面，這個(gè)頁面主要由一個(gè)表單 (form)組成，還包括一個(gè)提交文章 (submit)按鈕。下載11.4.2 數(shù)據(jù)庫的建立和測試圖11-7第11章 網(wǎng)站建設(shè)實(shí)例用用227分析結(jié)束后，進(jìn)入實(shí)際的操作階段，首先從數(shù)據(jù)庫開始。創(chuàng)建數(shù)據(jù)表沒有必要使用 PHP，因?yàn)橹恍枰M(jìn)行一次操作，為此專門寫一段程序太不值得了，可以用命令行或者任意的 MySQL客戶端程序來做這件事，用到的標(biāo)準(zhǔn) SQL語句是這樣的：T E X T , P R I M A R Y K E Y ( i d ) ) 下面介紹一下最為原始的方法，如果你沒有任何的客戶端軟件，就用這個(gè)辦法創(chuàng)建數(shù)據(jù)庫和添加數(shù)據(jù)。Linux用戶可以在 MySQL的bin目錄下輸入命令，但命令必須以 ./開頭，才能讓程序運(yùn)行起來。首先要?jiǎng)?chuàng)建出實(shí)際的數(shù)據(jù)庫。在命令行下，鍵入下列命令：. / m y s q l a d m i n - u r o o t c r e a t e b b s d b這樣就創(chuàng)建了一個(gè)名為“ mydb”的數(shù)據(jù)庫。 -u root選項(xiàng)告訴MySQL我們使用的是 root用戶。接下來創(chuàng)建數(shù)據(jù)表 (table)，可以將SQL命令輸入到一個(gè)文本文件中，例如，將上面給出的創(chuàng)建數(shù)據(jù)表的SQL語句加入新建的文本文件“ webmaser.dump”，再使用命令行：. / m y s q l - u r o o t m y d b w e b m a s t e r . d u m p現(xiàn)在已經(jīng)創(chuàng)建了數(shù)據(jù)庫和數(shù)據(jù)表，如果愿意，還可以試著使用SQL語句向數(shù)據(jù)表中添加一些數(shù)據(jù)，例如添加第一篇文章：228使用Linux網(wǎng)站建設(shè)技術(shù)指南下載I N S E R T I N T O w e b m a s t e r ( i d , t i t l e , d a t e , a u t h o r , a d d r e s s , c o n t e n t ) V A L U E S ( 1 ,慶賀WebMaster開版 , 2 0 0 0 - 3 - 3 0 , b x i e , b i n _ b i n b b s . u s t c . e d u , )11.4.3 Web-BBS主頁面制作1. 參數(shù)約定、框架頁和標(biāo)題欄經(jīng)過前文的分析， BBS的基本架構(gòu)和功能模塊的內(nèi)容已經(jīng)比較清晰了，首頁包含4個(gè)文件：default.html：框架頁面的主文件，描述框架頁的結(jié)構(gòu)、框架名稱和相應(yīng)的文件。banner.html：標(biāo)題欄部分的文件。list.php：文章題目列表頁面。main.php：文章內(nèi)容顯示頁面。前邊已經(jīng)說過，由于 BBS的文章多，在同一頁面內(nèi)不可能一次全部列出，只能分頁顯示。但是list.php并不知道這一次調(diào)用者要求從哪一篇文章開始顯示，因此，我們?cè)谡{(diào)用該頁面時(shí)，通過參數(shù) startid告訴list.php開始顯示的第一篇文章編