個人博客網站設計

江蘇廣播電視大學專科畢業(yè)設計第2頁共23頁江蘇大學07計算機函授徐江榮題目：個人博客網站建設學校：學科專業(yè)：學生：學號：指導教師：個人博客網站建設摘要：在IT網絡日益普及的今天，越來越多的人開始接觸網絡，在網絡上留下自己的印記，擁有一個博客系統(tǒng)，就能更好的展示自己。本文分網站規(guī)劃、使用工具、前臺設計、后臺設計、問題解決等部分展示了“個人博客網站”的設計和建設過程。網站具有發(fā)布博文、訪客留言、友情鏈接、云標簽、文章按功能統(tǒng)計等，基本能滿足個人博客的需求。本文偏重技術角度詳細介紹了前臺后臺每個模塊的設計思路和實現功能，同時介紹了建設網站中更改設計方案以滿足使用者提出新的要求的例子，解決了類似保護隱私文件等問題。網站建設中使用了Dreamweaver、photoshop等工具，架設平臺為WindowsServer2003+IIS6.0、php、mysql，php運行在IIS環(huán)境下，網站用php語言編寫并使用數據庫保存信息，同時使用CSS來設計網站風格。關鍵詞：phpmysqlIIS數據庫技術引言隨著信息時代的到來和網絡技術的不斷發(fā)展，中國每天訪問Internet網絡的人群數量也在飛速的增加。而傳統(tǒng)的靜態(tài)網站已經不能適應日益膨脹的信息量和及時發(fā)布等需求，在這種情況下，制作全動態(tài)的綜合性網站是跟上潮流的唯一選擇。我設計的個人博客網站就是建立在“動態(tài)”的基礎上，讓網站的瀏覽和維護都變的最為簡單，讓網站成為展示自我，與網友溝通交流的重要工具。網站設計以功能設計為重心，界面效果簡潔大方，一個好的網站架構應該能夠讓網站管理者隨心所欲的更改網站里的全部內容，這也在網站的通用性方面有很大增強。個人博客網站追求的目的就是把能寫入數據庫的部分全部設計在數據鏈里，這樣管理員只通過瀏覽器就能完成絕大部分的網站內容維護。網站建設中使用了Dreamweaver、photoshop等工具，架設平臺為WindowsServer2003+IIS6.0、php+mysql,網站用php語言編寫并使用數據庫保存信息，用戶和管理員在任何一臺能上網的計算機上都能實現網站頁面的瀏覽和網站內容的管理。第一章網站概述網站設計目的第一批中文博客是在2002年出現的，早些時候博客只是一個新的網絡名詞并無特殊之處，。就在不經意間，博客竟如雨后春筍般冒出來，博得越來越多網民的歡心，并在互聯(lián)網上引發(fā)了一股博客熱潮。博客的發(fā)展現狀呈現出以下特點：發(fā)展速度驚人；從精英向大眾人群迅猛擴展；博客人群主體更加多元化；博客服務商激增，出現群雄爭霸局面；博客資源爭奪激烈，博客服務商面臨市場洗牌。博客發(fā)展到今天已經取得了相當規(guī)模的成就，以新浪、搜狐、網易為代表的三大門戶網站都已經推出了自己的博客服務，還有一些著名的專業(yè)博客網站都已經對博客資源展開了激烈的爭奪。在規(guī)模擴大的同時博客技術也在不斷的進步和完善，目前博客技術已經取得的成果包括：發(fā)表日志，發(fā)表評論，相冊等一些通用功能。 擁有一個完全獨立的博客就必須要有一個適合個人的博客網站，用戶可根據自己的實現想法和需求而改變博客的結構、色彩等，是自己完全可控的，本站就是為實現這一目的而設計。網站實現功能（1）管理內容：為個人博主提供博客的內容管理平臺，提供日志、留言、評論、鏈接、四大類的信息管理內容。除評論外，每種信息均可自行管理信息分類，以及管理這種信息。（2）閱讀博客：系統(tǒng)首頁為博客訪問者提供了博客分類列表，瀏覽者可以選擇自己喜歡的博客專題。另外首頁還包括最新日志列表、訪問率最高的日志列表、評論最多的博文、熱點關鍵詞等。（3）系統(tǒng)功能頁面：日志和博客關鍵字搜索，列出日志、評論、留言的總數、友情鏈接的管理等。1.3網站首頁模塊圖1-1一個網站最重要的是首頁，如圖1-1一般正規(guī)的網站所有的子頁都在首頁有鏈接或體現，所以網站首頁模塊也反應了網站中大部分頁面的功能。1．通用頁面頭部和通用頁底為了保持網站風格統(tǒng)一和修改的方便，把每頁都出現的通用頁首和頁底做成獨立的文件，并與mysql數據庫相連，方便更容易的更改頁首頁底內容。2．首頁博文首頁博文顯示最新發(fā)表的6篇文章的簡介，訪客可以通過簡介了解大致的文章內容。3．最新按類統(tǒng)計模塊這一模塊實現按類進行統(tǒng)計，向訪問展示了本站發(fā)表的文章的情況，可以了解到最新發(fā)表的文章、最新訪客的評論、熱門文章和熱評文章。4．分類模塊站內的內容按不同的類別歸屬于某一個大類，訪問可以根據分類來更方便的閱讀感興趣的方面。5．云標簽模塊本站使用了云標簽功能，發(fā)表的每篇文章都可以設置多個關鍵詞，在首頁可以將本站最熱的關鍵詞顯示在最前，這樣就方便查看相關的文章。6．友情鏈接可以將網友的相關博客或自己感興趣的網站做鏈接，提高交互性，后臺可以對友情鏈接進行管理。7．搜索功能可以提供全站文章的搜索功能。1.4網站特點介紹1．全動態(tài)設計整個網站基本沒有靜態(tài)內容，而是用幾個網頁框架讀取數據庫信息，網站的日常維護乃至高級維護都不需要借助網頁編輯工具，只需要在瀏覽器上即可完成。2．獨立的前后臺設計前臺只管讀取數據庫，后臺只管編輯數據庫，兩者分工不同在操作上完全獨立，而通過數據庫有把前后臺緊密的連接在一起。3．分工明確的模塊功能文章模塊、分類模塊、云標簽模塊、友情鏈接模塊、文章統(tǒng)計模塊、搜索模塊……每個模塊只完成他所要完成的事情，設計清楚，操作簡單。4．高度模板化的頁面設計網站前臺的核心頁面只有四個，但是就是通過這四個頁面的不同組合可以把所有信息展現在瀏覽者面前。5．統(tǒng)一的頁面風格所有頁面都使用相同的CSS所以整體風格保持一直，通用頁面在設計上框架也基本保持一致，使網站的整體感很強。6．單用戶模塊因為是設計成個人博客系統(tǒng)，所以本站只能單用戶使用，使用更專一。第二章網站建設工具介紹頁面框架設計：Dreamweaver8頁面圖片處理：PhotoShopCS2網頁腳本語言：PHP頁面風格控制：CSS編程調試工具：EditPlus后臺數據庫：mysql網站架設平臺：WindowsServer2003+IIS6.0+PHP-5.2.02.1Dreamweaver8Dreamweaver8是由美國著名多媒體軟件開發(fā)廠商Macromedia公司推出的一套專業(yè)可視化網頁開發(fā)工具。它與該公司的另外兩個網頁制作軟件Flash、Fireworks并稱“DreamTeam”。其中Flash用來生成矢量動畫；Fireworks完成Web圖像制作；而Dreamweaver則進行各類素材的集成和發(fā)布。Dreamweaver8提供了強大的可視化編輯功能來確保高質量網頁的完成，設計環(huán)境使用CSS樣式表來進行網頁樣式的統(tǒng)一管理，可以迅速高效地開發(fā)出代碼簡潔、專業(yè)規(guī)范的站點。同時，Dreamweaver8還提供了許多與編程相關的工具和功能，并且，借助Dreamweaver8還可以使用服務器語言（例如ASP、JSPColdFusion標記語言和PHP）生成支持動態(tài)數據庫的Web應用程序。2.1.1Dreamweaver8簡介1．DreamWeaver8界面Dreamweaver8的工作界面包括：標題欄、菜單欄、工具欄、文檔窗口、上下文菜單、標簽選擇器、狀態(tài)欄、屬性檢查器、面板組等。2．Dreamweaver8安裝壞境Dreamweaver8雖然使用上與DreamweaverMX2004基本相同，但Dreamweaver8對需要安裝的計算機所實用的系統(tǒng)提出了更高的要求，最基本的配置是：800MHzIntelPentiumIII處理器（或同等處理器）以及更高頻率的處理器、Windows2000或WinwowsXP、256MBRAM、1024*768,16位顯示器以及650MB以上可用磁盤空間。3．Dreamweaver8新增功能Dreamweaver8相對于其前期版本，其包含了許多新功能。這些功能的增加使得軟件的易用性得到了改善，也更方便了網頁設計、網站開發(fā)的工作，新增功能包括縮放功能、“樣式呈現”工具欄、對XML數據進行可視化操作、CSS布局的可視化、代碼折疊功能以及插入Flash視頻等。2.1.2Dreamweaver8的特點1．靈活的編寫方式Dreamweaver8具有靈活編寫網頁的特點，將“設計”和“代碼”編輯器合二為一，在設計窗口中精化源代碼，使用戶能夠按工作的需要定制自己的用戶界面，并且利用一些浮動窗口，用鼠標單擊的方式插入圖像、表格、表單、應用程序、腳本語言等各種對象，同時也提供對代碼的編輯，包括樣式表和JavaScript腳本。2．可視化的編輯界面Dreamweaver8是一種所見即所得的HTML編輯器，可以實現頁面元素的插入和生成?？梢暬庉嫮h(huán)境大量減少了代碼的編寫，同時也保證了其專業(yè)性和兼容性，并且可以對內部的HTML編輯器和任何第三方的HTML編輯器進行實時的訪問。無論用戶習慣手工輸入HTML源代碼還是使用可視化的編輯界面，Dreamweaver8都將提供便捷的方式使用戶設計網頁和管理網站變得更容易。3．功能更多的CSS支持、CSS的可視化設計、CSS檢查工具CSS樣式一直都是網頁制作的一個重要環(huán)節(jié)，網頁文本字體、顏色，圖像的位置等外觀設置都可以通過CSS樣式表來控制。Dreamweaver8中有強大的CSS樣式表編輯器，使用者可以利用CSS面板上的功能按照要求，非常輕松地編輯出自己滿意的CSS樣式，從而達到美化網頁外觀的效果。4．強大的Web站點管理功能用戶自定義控制不僅可以迅速完成個人頁面以及站點的設計，而且Dreamweaver8的RoundtripHTML/JavaScript行為庫以及模板和標簽功能也非常適合大型網站的合作開發(fā)，通過與其他群組產品的配合使用以及眾多第三方支持可輕松完成動態(tài)發(fā)布電子商務網站的構建。FTP安全保障，是Dreamweaver8新增功能之一，所有傳輸的文件完全加密，并阻止越權存取你的信息、文件內容、用戶名和口令。5．內建的圖形編輯引擎修剪、改變大小、尺寸、旋轉角度、調節(jié)明暗度都不需要離開Dreamweaver8環(huán)境，因為它本身集成了MacromediaFireworks的基本圖形編輯技術，這是以往版本所沒有的功能，如圖2-1所示。圖2-1內建的圖形編輯引擎功能6．Dreamweaver8的集成特性Dreamweaver8繼承了Fireworks、Flash和Shockwave的集成特性，可以在這些Web創(chuàng)作工具之間自由地進行切換，輕松地創(chuàng)建美觀實用的網頁。7．豐富的媒體支持能力可以方便地在網頁中加入Java、Flash、Shockwave、ActiveX以及其他Plug-in媒體文件。而且Dreamweaver8具有強大的多媒體處理功能，在設計DHTML（DynamicHTML，動態(tài)HTML）和CSS(CascadingStyleSheets,層疊樣式表)方面表現的極為出色，它利用JavaScript和DHTML語言代碼輕松實現網頁元素的動作和交互操作，產生完美的網頁效果。2.2PHPPHP，一個嵌套的縮寫名稱，是英文超級文本預處理語言（PHP:HypertextPreprocessor）的縮寫。PHP是一種HTML內嵌式的語言，是一種在服務器端執(zhí)行的嵌入HTML文檔的腳本語言，語言的風格有類似于C語言，現在被很多的網站編程人員廣泛的運用。PHP獨特的語法混合了C、Java、Perl以及PHP自創(chuàng)新的語法。它可以比CGI或者Perl更快速的執(zhí)行動態(tài)網頁。用PHP做出的動態(tài)頁面與其他的編程語言相比，PHP是將程序嵌入到HTML文檔中去執(zhí)行，執(zhí)行效率比完全生成HTML標記的CGI要高許多；與同樣是嵌入HTML文檔的腳本語言JavaScript相比，PHP在服務器端執(zhí)行，充分利用了服務器的性能；PHP執(zhí)行引擎還會將用戶經常訪問的PHP程序駐留在內存中，其他用戶再一次訪問這個程序時就不需要重新編譯程序了，只要直接執(zhí)行內存中的代碼就可以了，這也是PHP高效率的體現之一。PHP具有非常強大的功能，所有的CGI或者JavaScript的功能PHP都能實現，而且支持幾乎所有流行的數據庫以及操作系統(tǒng)[4]。2.2.1PHP與傳統(tǒng)靜態(tài)頁面的區(qū)別把信息系統(tǒng)納入Internet/Intranet的框架之后,首先要解決的問題是通過網頁訪問后臺數據庫信息。所有應用程序都被分割為頁面的形式,用戶的交互操作是以提交表單等方式來實現的,這就要求Web站點具有很強的動態(tài)數據發(fā)布能力。然而,目前Web的服務,仍以提供"靜態(tài)"主頁內容為主。所謂"靜態(tài)",指的就是站點的主頁內容是"固定不變"的,無法根據用戶的需求和實際情況作出相應的變化。當瀏覽器通過Internet的HTTP協(xié)議向站點的Web服務器申請主頁時,站點服務器就會將已設計好的靜態(tài)的HTML文件傳送給瀏覽器。若要更新主頁的內容,只能用非在線的手動方式更新HTML的文件數據。PHP所設計出的是動態(tài)主頁,可接收用戶提交的信息并作出反應,其中的數據可隨實際情況而改變,無須人工對網頁文件進行更新即可滿足應用需要。例如:當在瀏覽器上填好表單并提交HTTP請求時,可以要求在站點服務器上執(zhí)行一個表單所設定的應用程序,而不只是一個簡單的HTML文件。該應用程序分析表單的輸入數據,根據不同的數據內容將相應的執(zhí)行結果(通常是數據庫查尋的結果集)以HTML的格式傳送給瀏覽器。數據庫的數據可以隨時變化,而服務器上執(zhí)行的應用程序卻不必更改,客戶端得到的網頁信息會始終保持新鮮的魅力[2]。2.2.2PHP的特性開放的源代碼：所有的PHP源代碼事實上都可以得到?；诜掌鞫耍河捎赑HP是運行在服務器端的腳本,可以運行在UNIX、LINUX、WINDOWS下。嵌入HTML：因為PHP可以嵌入HTML語言，所以學習起來并不困難。簡單的語言：PHP堅持腳本語言為主，與Java和C++不同。效率高：PHP消耗相當少的系統(tǒng)資源。圖像處理：用PHP動態(tài)創(chuàng)建圖像面向對像：在php4,php5中，面向對象方面都有了很大的改進，現在php完全可以用來開發(fā)大型商業(yè)程序。PHP相對于其他語言，編輯簡單，實用性強，更適合初學者[2]。2.2.3PHP在數據庫方面的豐富支持，也是它迅速走紅的原因之一，它支持下列的數據庫或是資料表：AdabasDDBAdBasedbmfileProInformixInterBasemSQLMicrosoftSQLServerMySQLSolidSybaseODBCOracle8OraclePostgreSQL而在Internet上它也支持了相當多的通訊協(xié)議(protocol)，包括了與電子郵件相關的IMAP，POP3；網管系統(tǒng)SNMP；網絡新聞NNTP；帳號共用NIS；全球信息網HTTP及Apache服務器；目錄協(xié)議LDAP以及其它網絡的相關函數。除此之外，用PHP寫出來的Web后端CGI程序，可以很輕易的移植到不同的系統(tǒng)平臺上。例如，先以Linux架的網站，在系統(tǒng)負荷過高時，可以快速地將整個系統(tǒng)移到SUN工作站上，不用重新編譯CGI程序。面對快速發(fā)展的Internet，這是長期規(guī)劃的最好選擇。在加入其它的模塊之后，提供了更多樣的支持如下：英文拼寫檢查BC高精確度計算公元歷法PDF文件格式Hyperwave服務器圖形處理編碼與解碼功能哈稀處理WDDX功能qmail與vmailmgr系統(tǒng)壓縮文件處理XML解析除此之外，一般語言有的數學運算、時間處理、文件系統(tǒng)、字符串處理、行程處理等功能[3]。2.2.4IIS環(huán)境下PHP的安裝、配置與調試1．PHP的安裝如圖2-2圖2-22．配置PHP如圖2-3圖2-3單擊“添加”按鈕進行應用程序擴展名的映射，瀏覽可執(zhí)行文件為已安裝PHP目錄下的“php5isapi.dll”，同時“擴展名”為“.php”。如圖2-4圖2-43．調試PHP打開文本編輯器，輸入代碼<?phpphpinfo();?>將該文件保存在已定義的文件夾內，并輸入保存文件名如圖2-5圖2-52.3MysqlMySQL是一個小型關系型數據庫管理系統(tǒng)。2.3.1Mysql簡介MySQL被廣泛地應用在Internet上的中小型網站中。由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，許多中小型網站為了降低網站總體擁有成本而選擇了MySQL作為網站數據庫。MySQL最初的開發(fā)者的意圖是用mSQL和他們自己的快速低級例程(ISAM)去連接表格。不管怎樣，在經過一些測試后，開發(fā)者得出結論：mSQL并沒有他們需要的那么快和靈活。這導致了一個使用幾乎和mSQL一樣的API接口的用于他們的數據庫的新的SQL接口的產生，這樣，這個API被設計成允許為用于mSQL而寫的第三方代碼更容易移植到MySQL[1]。2.3.2Mysql的特性[2]1.使用C和C++編寫，并使用了多種編譯器進行測試，保證源代碼的可移植性2.支持AIX、FreeBSD、HP-UX、Linux、MacOS、NovellNetware、OpenBSD、OS/2Wrap、Solaris、Windows等多種操作系統(tǒng)3.為多種編程語言提供了API。這些編程語言包括C、C++、Eiffel、Java、Perl、PHP、Python、Ruby和Tcl等。4.支持多線程，充分利用CPU資源5.優(yōu)化的SQL查詢算法，有效地提高查詢速度6.既能夠作為一個單獨的應用程序應用在客戶端服務器網絡環(huán)境中，也能夠作為一個庫而嵌入到其他的軟件中提供多語言支持，常見的編碼如中文的GB2312、BIG5，日文的Shift_JIS等都可以用作數據表名和數據列名7.提供TCP/IP、ODBC和JDBC等多種數據庫連接途徑8.提供用于管理、檢查、優(yōu)化數據庫操作的管理工具2.3.3Mysql的安裝運行mysql5.0.27的安裝文件出現如下圖2-6界面圖2-62.4其他工具除了PHP和MYSQL、DW外，網站的設計與開發(fā)還會用到其他軟件。2.4.1PhotoShopPhotoshop是Adobe公司推出的一款功能十分強大、使用范圍廣泛的平面圖像處理軟件。目前Photoshop是眾多平面設計師進行平面設計，圖形、圖像處理的首選軟件。菜單欄Photoshop菜單欄中菜單命令包括了Photoshop大部分操作命令，與使用其他Windows應用軟件的菜單命令一樣，直接用鼠標單擊菜單欄，在打開的菜單中選擇菜單命令即可，如圖2-7圖2-7狀態(tài)欄的使用當Photoshop屏幕上出現圖像編輯窗口時，狀態(tài)欄主要顯示三個部分的內容：左側部分顯示當前圖像縮放的百分比，中間部分為圖像文件信息，左側部分為當前使用工具的說明，如圖2-8。圖2-8工具箱的使用Photoshop提供了一個集畫圖、編輯、顏色選擇、屏幕視圖等操作于一體的工具盤。有效利用工具盤是提高Photoshop操作效率的捷徑。選擇缺省工具的方法是,用鼠標左鍵直接在工具盤上單擊所需工具圖標。在工具箱中,如果工具圖標右下方有一個小三角,表示該工具圖標中還隱藏著其他工具圖標。選擇隱藏工具的方法是:將鼠標移到隱藏工具所在的圖標上,按下鼠標左鍵不松手,將會出現隱藏工具選項,將鼠標移到所需工具圖標上松開鼠標,就可以選擇該工具。當選擇工具后,圖像上的光標將變?yōu)楣ぞ郀?。面板組的顯示與控制在缺省狀態(tài)下,Photoshop提供三個面板組給我們在操作中編輯、查詢，每一組中都包含三個以上的面板,它們是“導航器/信息/選項”，面板組、“顏色/色板/畫筆”,面板組和“圖層/通道/路徑/歷史記錄/動作”面板組。使用下述方法之一可以選擇面板：(1)在打開的面板組中,用鼠標單擊所選面板的標簽。(2)選擇“窗口,,菜單欄下的顯示或隱藏某面板項。使用下述方法之一可以控制顯示或隱藏面板組：(l)反復按【TAB】鍵,可以控制顯示或隱藏面板組及工具盤。(2)反復按【SHIFT＋TAB】鍵,可以控制顯示或隱藏面板組。每個面板組右上角都有一個三角圖標,單擊它可以打開面板菜單,從而調整面板選項;而通過拖曳面板組右下角邊框,可以改變面板組的大小。2.4.2CSS技術[3]CSS（CascadingStylesheets，層疊樣式表）是一種制作網頁的新技術，現在已經為大多數的瀏覽器所支持，成為網頁設計必不可少的工具之一。使用CSS能夠簡化網頁的格式代碼，加快下載顯示的速度，也減少了需要上傳的代碼數量，大大減少了重復勞動的工作量。尤其是當你面對的是有數百個網頁的站點時，CSS簡直象是神對我們的恩賜！CSS（CascadingStylesheets，層疊樣式表）是一種制作網頁的新技術，現在已經為大多數的瀏覽器所支持，成為網頁設計必不可少的工具之一。W3C（TheWorldWideWebConsortium）把動態(tài)HTML（DynamicHTML）分為三個部分來實現：腳本語言（包括JavaScript、Vbscript等）、支持動態(tài)效果的瀏覽器（包括InternetExplorer、NetscapeNavigator等）和CSS樣式表。一、層疊樣式表的特點且不說過去的網頁缺少動感，就是在網頁內容的排版布局上也有很多困難，如果不是專業(yè)人員或特別有耐心的人，很難讓網頁按自己的構思和創(chuàng)意來顯示信息。即便是掌握了HTML語言精髓的人也要通過多次地測試，才能駕馭好這些信息的排版，過程十分漫長和痛苦。為了Internet的發(fā)展，讓更多人早日踏足這個多姿多彩的世界，新的HTML輔助工具呼之欲出。樣式表就是在這種需求下誕生的，它首先要做的是為網頁上的元素精確地定位，可以讓網頁設計者象導演一樣，輕易地控制由文字、圖片組成的演員們，在網頁這個舞臺上按劇本要求好好地表演。其次，它把網頁上的內容結構和格式控制相分離。瀏覽者想要看的是網頁上的內容結構，而為了讓瀏覽者更好地看到這些信息，就要通過格式控制來幫忙了。以前兩者在網頁上的分布是交錯結合的，查看修改很不方便，而現在把兩者分開就會大大方便網頁的設計者。內容結構和格式控制相分離，使得網頁可以光由內容構成，而將所有網頁的格式控制指向某個CSS樣式表文件。這樣一來的好出表現在兩個方面：第一，簡化了網頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數量（因為重復設置的格式將被只保存一次）。第二，只要修改保存著網站格式的CSS樣式表文件就可以改變整個站點的風格特色，在修改頁面數量龐大的站點時，顯得格外有用。避免了一個一個網頁的修改，大大減少了重復勞動的工作量，當你面對的是有數百個網頁的站點時，CSS簡直象是神對我們的恩賜！二、添加層疊樣式表的方法我們?yōu)榫W頁添加樣式表的方法有四種。1．最簡單的方法是直接添加在HTML的標識符（tag）里：<Tagstyle=”properties”>網頁內容</tag>舉個例子：<pstyle=”color:blue;font-size:10pt”>CSS實例</p>代碼說明：用藍色顯示字體大小為10pt的“CSS實例”。盡管使用簡單、顯示直觀，但是這種方法不怎么常用，因為這樣添加無法完全發(fā)揮樣式表的優(yōu)勢“內容結構和格式控制分別保存”。2．添加在HTML的頭信息標識符<head>里：<head><styletype=”text/css”><!--樣式表的具體內容--></style></head>type=”text/css”表示樣式表采用MIME類型，幫助不支持CSS的瀏覽器過濾掉CSS代碼，避免在瀏覽器面前直接以源代碼的方式顯示我們設置的樣式表。但為了保證上述情況一定不要發(fā)生，還是有必要在樣式表里加上注釋標識符“<!--注釋內容-->”。3．鏈接樣式表同樣是添加在HTML的頭信息標識符<head>里：<head><linkrel=”stylesheet”href=”*.css”type=”text/css”media=”screen”></head>*.css是單獨保存的樣式表文件，其中不能包含<style>標識符，并且只能以css為后綴。Media是可選的屬性，表示使用樣式表的網頁將用什么媒體輸出。取值范圍：?Screen（默認）：輸出到電腦屏幕?Print：輸出到打印機?TV：輸出到電視機?Projection：輸出到投影儀?Aural：輸出到揚聲器?Braille：輸出到凸字觸覺感知設備?Tty：輸出到電傳打字機?All：輸出到以上所有設備如果要輸出到多種媒體，可以用逗號分隔取值表。Rel屬性表示樣式表將以何種方式與HTML文檔結合。取值范圍：?Stylesheet：指定一個外部的樣式表?Alternatestylesheet：指定使用一個交互樣式表4．聯(lián)合使用樣式表同樣是添加在HTML的頭信息標識符<head>里：<head><styletype=”text/css”><!--@import“*.css”其他樣式表的聲明--></style></head>以@import開頭的聯(lián)合樣式表輸入方法和鏈接樣式表的方法很相似，但聯(lián)合樣式表輸入方式更有優(yōu)勢。因為聯(lián)合法可以在鏈接外部樣式表的同時，針對該網頁的具體情況，做出別的網頁不需要的樣式規(guī)則。需要注意的是：?聯(lián)合法輸入樣式表必須以@import開頭。?如果同時輸入多個樣式表有沖突的時候，將按照第一個輸入的樣式表對網頁排版。?如果輸入的樣式表和網頁里的樣式規(guī)則沖突時，使用外部的樣式表。2.4.3EditPlus2.0EditPlus是Internet時代的32位元文本編輯程序，HTML編輯及程序員的Windows平臺編輯器。它可以充分的替換寫字板，它也提供網頁作者及程序設計師許多強悍的功能。對於HTML、CSS、PHP、ASP、Perl、C/C++、Java、javascript及VBScript的語法突顯。當然，它也可以在自定義語法文件后擴充其他的程序語言。嵌合網頁瀏覽器作HTML頁的預覽，及FTP命令做本地文件上傳到FTP服務器。其他功能還包括HTML工具欄、用戶工具、行號、標尺、網址突顯。自動完成、剪貼文本、區(qū)塊選取、強大的搜索與替換、多重撤消/重做、拼寫檢查、自定義鍵盤快捷鍵、以及更多。這個小工具也許只是記事本的增強版，但他的各項功能都是恰到好處，顏色識別、多文本查找、文件對比等功能在實際編程中再實用不過。在我的開發(fā)過程中倒是有一多半頁面是用它編輯出來的。第三章網站前臺頁面設計這一部分是瀏覽者能直接接觸到的部分，因此網頁外觀設計思路是所有前臺頁面框架盡量一致，風格盡量統(tǒng)一，這樣使瀏覽者在不同頁面間跳轉時有連續(xù)感。功能設計的思路是最大程度利用數據庫，網站功能精巧的集中在少數幾個PHP頁面上，但通過這幾個頁面的不同組合跳轉再從數據庫讀取數據能很輕松的演變出成千上萬個頁面來。3.1整體規(guī)劃重點設計首頁，首頁做好后其他頁面結構和風格與首頁相同。結構方面每個頁面從數據庫讀取通用頁首和頁底，給人以頁面之間的熟悉感。風格用CSS統(tǒng)一控制字體顏色大小、超鏈接屬性、表格背景邊框等，各頁面完全相同，如圖3-1圖3-1網站通用頭部，如圖3-2圖3-2網站通用底部，如圖3-3圖3-3網站文章內容的跳轉和欄目的鏈接主要通過以下幾個部分實現點擊文章標題可進入相關的文章內容頁面通過文章統(tǒng)計模塊進入相應的文章頁面通過文章分類模塊進入相應的文章頁面3.2首頁設計首頁框架設計1．盡量精簡首頁的作用好比一本書的封面，是為了吸引用戶瀏覽你的網址內容。因此，首頁的設汁應以醒目為上、令人一目了然。切勿堆砌太多不必要的細節(jié)，或使畫面過于復雜。在首頁上清楚列出幾項要點以及主頁內容即可。頁面給人的第一觀感最為重要，盡管這是一個學院的網站，首頁的好壞直接影響師生們對整個網站的感受。2．盡量簡樸首頁上的圖形應力求簡樸，避免耽擱用戶的時間。圖像愈大、顏色愈深，傳送頁面的時間愈長。這也并不是說要完全略去圖像不用，只是要注意使用圖像所引起的效果。首頁上的顏色最好不超過六十四種，頁頂圖像最好保持在大約10KB(千字節(jié))以下。切勿禁不住誘惑,覺得非要放入大幅的圖畫不可；應考慮只用三兩幅短小精悍的圖像。首頁整體上要能夠迅速傳送。如果載入的時間超過五至十秒，很多用戶就會等得不耐煩。3．使首頁易于漫游首頁的其中一個主要功能是作為漫游工具，指引用戶查閱你存儲在網址或其他地點的信息，盡量使漫游過程不費吹灰之力。基于清晰明確和速度的考慮，首頁上的鏈接項目應只限于幾個高級的類別。另外，所提供的信息不應埋藏在重重疊疊的頁面之下。穿越五個以上的聯(lián)接項目已足以令人厭煩。因此，必須在廣度和深度之間求取平衡。首頁PHP代碼設計各模塊構成：文章簡介模塊文章統(tǒng)計模塊文章分類模塊3.3分頁顯示頁面設計分頁顯示頁面功能設計本頁面的主要功能是將文章按每頁指定數量顯示出來，并實現上下頁翻頁功能進行查找，這在文章總數達到一點數量的時候非常有用。頁面框架與前面的首頁基本相同，主體部分頂端和底端都顯示當前欄目名稱，中間是本欄目下的全部文章，如果文章總數超過6篇則只顯示前6篇，同時“下頁”的鏈接生效，點擊后即可顯示下面6篇文章。本頁實現效果如下圖3-4所示。圖3-43.4文章顯示頁面設計文章內容頁面主要是利用url參數獲得文章id編號，如果編號正確并且文章有效則顯示文章主體內容，及讀出數據庫中id對應的posts字段下的內容并顯示。值得一提的是文檔主體右邊的“文章統(tǒng)計分類”和“文章分類”及文章底部的“相關文章”，文章分類自動全站文章的分類，訪問者可根據喜歡查看有關的類別文章以獲得自己想要的內容，而相關文章更是利用數據庫定義的關鍵字自動讀取keywords相近的5篇文章，在查找同類文章時非常有用。3.5用戶登錄頁面設計用戶可以在網站的管理入口輸入用戶名和密碼登錄網站，登陸網站之后就能發(fā)表博文、管理來訪者的留言、管理友情鏈接等。用戶登錄頁面由表單添加用戶名和密碼文本框以及登錄按鈕，通過“用戶登錄”選項將用戶輸入的用戶名和密碼和后臺數據庫中表users中的用戶名和密碼相對應，如果正確則轉到登錄成功頁面，否則轉到登錄失敗頁面。同時提供忘記密碼模塊的鏈接入口。第四章網站后臺功能設計這一部分是網站管理員經常接觸的內容，網站后臺是管理員添加更改網站內容和進行綜合設置的地方，后臺功能設計好壞直接關系到網站整體功能的強弱和網站使用的效率，從技術角度上講他不像前臺那樣只需要從數據庫中讀取數據，而是要先定義好數據庫內容，再對數據庫進行數據的添加、更改、刪除等綜合操作，因此它與前臺相比要更復雜，也需要投入更多的時間和精力。4.1整體規(guī)劃首先需要用戶名和密碼才能登陸，管理員進入后臺后，可進行“文章管理”，“分類管理”、“評論管理”、“標簽管理”、“鏈接管理”，及數據庫的備份與恢復操作，如圖4-1圖4-14.2數據庫結構設置動態(tài)PHP站點的運行必須以數據庫支持運作，因此數據庫的設計極為重要。本網站的數據庫按不同需求建立了以下表，并根據各個表的需要設立了不同字段。數據表的總體結構如下圖4-2：圖4-2按照功能大致分為五類。User：用戶信息，包括users表和usermeta表。link：鏈接信息，包括links表。post:文章及評論信息，包括posts、postmeta、comments。category,link_category,tag:這個是比較復雜的信息模塊，它包含了對分類，鏈接分類，標簽的管理，包括term，term_relationships和term_taxonomy表。option:全局設置信息，包括options表。posts作為一個博客系統(tǒng)，最核心的當然是博主發(fā)表的一些“文章”了，這些“文章”存放的地方就是這個posts表了。注意，這里所說的“文章”是加引號的，因為這個表里存放的除了普通的文章之外，還有附件和頁面（page）的一些信息。表里面的post_type這個字段就是用來標示類型的。還有一點需要注意的就是，這個表里一些字段是針對于post_type的特定類型的，比如menu_order這個字段是“頁面（page）”特有的，用來指定“頁面”的順序。post_mime_type是針對附件的，來指定附件的類型。postmeta每篇文章的屬性是不可能僅僅用posts表里的那幾個字段來完全標示的，往往還有一些因人而異的屬性：寫這篇文章時候的心情，地點等等。這些屬性的名稱和值類型都是不確定的，因此，采用了元信息(meta)來表示它們。這個表很簡單，只有meta_id,post_id,meta_key,meta_value這四個字段。post_id是相關post的id。我們注意到meta_value是longtext類型的，這里僅是用來存儲值。在撰寫文章的時候，編輯框下面有一個CustomFields的選項，我們可以在這里添加post的meta信息。comments用戶評論。除了評論的內容以外，還記錄了評論用戶的名字，郵箱，網址，瀏覽器類型等信息。比較重要的兩個字段是comment_post_ID和comment_approved，前一個用來指示這條評論隸屬于哪一篇文章，后一個用來記錄審核狀況。還有一個比較有意思的是這個commnet_agent字段，我們可以利用這個字段來統(tǒng)計一下用戶瀏覽器類型。users用戶帳號表。存儲用戶名、密碼還有一些用戶的基本信息。usermeta類似上面的postmeta，存儲一些因人而異的用戶信息。（比如QQ？ICQ？）options用來記錄博客的一些設置和選項。里面有一個blog_id字段。links用來存儲Blogroll里面的鏈接。terms記錄分類，鏈接分類，標簽的一些簡要信息，包括名稱，縮寫。term_taxonomy是對terms中的信息的關系信息補充，有所屬類型（category,link_category,tag），詳細描述，父類，所擁有文章（鏈接）數量。term_relationships關系表，多對多的，object_id是與不同的對象關聯(lián)，例如posts中的ID（links中的link_id）等，term_taxonomy_id就是關聯(lián)term_taxonomy中的term_taxonomy_id。term_relationships中的term_order；terms中的term_group，option。4.3用戶登陸模塊設計管理員通過login.php進行后臺登錄，提交數據后與數據庫建立連接，查詢數據庫中是否有對應的用戶存在，如果有則進入后臺，如果用戶名或密碼錯誤就返回登錄界面，如圖4-3圖4-3登錄頁面代碼設計functionlogin_header($title='Login',$message='',$error=''){ global$error; if(empty($error)) $error=newError(); //定義顯示登錄信息及登錄失敗后的提示 if(!empty($message))echoapply_filters('login_message',$message)."\n"; //Incaseapluginuses$errorratherthanthe$errorsobject if(!empty($error)){ $error->add('error',$error); unset($error); }//如果登錄信息為空，則顯示錯誤信息對話框if(force_ssl_admin()&&!is_ssl()){ if(0===strpos($_SERVER['REQUEST_URI'],'http')){ redirect(preg_replace('|^http://|','https://',$_SERVER['REQUEST_URI'])); exit(); }else{ redirect('https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit(); }//如果驗證成功則進入后臺管理界面，后臺地址使用定義的變量獲取地址4.4文章管理模塊設計文章管理模塊包含了搜索文章、按文章發(fā)表時間顯示、按類別顯示、對文章的編輯、刪除、修改、狀態(tài)的管理和按分頁顯示文章列表，通過傳遞ID值調用相應的文章。如圖4-4圖4-44.5鏈接管理模塊設計通過后臺的鏈接管理模塊，管理員可輕松的添加、刪除和修改前臺的友情鏈接部分。如圖4-5圖4-54.6分類管理模塊設計分類管理模塊包含了搜索分類、對分類的添加、編輯、刪除、修改的管理和按分頁顯示分類列表，通過傳遞ID值調用相應的分類。如圖4-6圖4-64.7標簽管理模塊設計 標簽主要是管理發(fā)表博客時所使用到的關鍵詞，通過此模塊可以實現對標簽的編輯、修改、添加、刪除等操作，并以分頁的方式顯示。如圖4-7圖4-7標簽管理代碼設計<?phpprintf(__('管理標簽(<ahref="%s">添加新標簽</a>)'),'#addtag')?></h2><?phpelse:?> <h2><?php_e('管理標簽')?></h2><?phpendif;?><pid="post-search"> <labelclass="hidden"for="post-search-input"><?php_e('搜索標簽');?>:</label> <inputtype="text"id="post-search-input"name="s"value="<?phpechoattribute_escape(stripslashes($_GET['s']));?>"/> <inputtype="submit"value="<?php_e('搜索標簽');?>"class="button"/></p><?php$page_links=paginate_links(array( 'base'=>add_query_arg('pagenum','%#%'), 'format'=>'', 'total'=>ceil(count_terms('post_tag')/$tagsperpage), 'current'=>$pagenum));//標簽分類顯示，超過20條就以分頁的方式顯示<divclass="alignleft"><inputtype="submit"value="<?php_e('刪除');?>"name="deleteit"class="button-secondarydelete"/><?phpnonce_field('bulk-tags');?></div></table></form><?phpendif;?>第五章遇到的問題及解決辦法就好像編程時很少有源代碼編譯一次就能通過一樣，我們做網站的過程中也會遇到各種各樣的問題，而每解決一個問題，就意味著我們自己的水平又提高了一點，日后又能多解決一種問題。制作這個網站過程中碰到了不少問題，簡單的略加思考就能解決，復雜的卻想很久還是不得要領——當然最后還是給解決了。下面列舉其中幾個例子。問題1：環(huán)境搭配php最經典的組合當然是LAMP(Linux+Apache+MySQL+PHP)了，不過我沒有條件和精力弄Linux所以用Windows2003代替Linux了，自己調試用，又不是做服務器，所以不要求性能足夠用了。本身我的機器是Win2003+IIS+Framework環(huán)境能跑起來ASP和.net，并且裝有jdk+tomcat+oracle還能跑起來jsp，本打算不破壞這些環(huán)境再安裝apache和mysql，不過安裝過程還是比較繁瑣的。于是采用了比較方便的平臺WindowsServer2003+IIS6.0、php+mysql。問題2：對utf-8編碼文件的標記BOM導致的頁面空行這個問題以前在學習xhtml+css的時候遇到過，那時候是因為文檔聲明類型前面加別的代碼了或者沒有寫文檔聲明類型xhtml1.0卻用w3c的標準做頁面導致的，起初我以為也是把require寫在文檔聲明前面出的問題呢，后來反復調試發(fā)現不是這么簡單，后來上百度搜索了很多關于require引起空行的問題，有一個牛人提到了要在dreamweaver里面ctrl+j把utf-8編碼的BOM去掉，當時也不懂BOM是什么，說去掉就去掉吧，確實解決問題了，這算是把這一關過去了，不過后面還有utf-8的問題呢，也是跟這個有關系。問題3：php下checkbox的取值問題這是我發(fā)現php唯一一個不方便的地方，不像asp那樣，所有同名的checkbox的值存成一個集合，php只能取同名里最后一個checkbox的值，在做多數據wherein(aa,bb,cc,dd)查詢的時候很不方便，只能用js+一個hiddeninput的方法實現，雖然有點小麻煩，不過不是大問題，很容易就解決了，上網查了一下也確實只有這么才能解決！問題4：Access庫轉到MySQL的問題畢竟數據庫已經設計好了，再在PHPMyAdmin中建一次表也很麻煩，索性找個軟件來直接轉庫，看到MySQL里面的data文件夾下有和我建的數據庫一樣名字的文件夾，我以為有這個文件夾就不用建庫倒庫了，一時興起把沒用的都刪掉了，問題來了PHPMyAdmin連不