【導(dǎo)讀】計的這個個人網(wǎng)站作品來說明并演示一個完整的網(wǎng)站制作過程。論文詳細(xì)的介紹了整個網(wǎng)站設(shè)計的全過程。站建設(shè)的一個步驟，理論和實踐相結(jié)合。每一章的實例合在一起，就構(gòu)成一個大實例。括主頁的設(shè)計和一部分鏈接頁面的設(shè)計。第一章本網(wǎng)站設(shè)計規(guī)劃·······················3. 軟件準(zhǔn)備和ISS的安裝與設(shè)置················5. 動態(tài)頁面的制作·······················13. 校園資訊的制作·······················15. 第四章本站數(shù)據(jù)庫的設(shè)計過程····················17. 第五章網(wǎng)站的測試與上傳······················20

　　

【正文】 對話框如圖 25 所示。 步驟 2 右鍵單擊“默認(rèn) Web 站點”，在彈出的菜單里面選擇“屬性”項，網(wǎng)站設(shè)計的前期準(zhǔn)備 計算機(jī)科學(xué)與技術(shù)專業(yè) 37 打開一個新的對話框如圖 26 所示。 步驟 3 在圖 36 所示的“ Web 站點”中，可以設(shè)置站點的說明、 IP 地址和其他一些屬性。選擇“主目錄”標(biāo)簽，顯示如圖 27 所示界面。 步驟 4 在“ 主目 錄” 選項 卡中 ，“本 地路 徑” 的默 認(rèn)設(shè) 置是 ：“ C:\Ipub\root” ,為了方便以后編輯和管理網(wǎng)站，將其路徑設(shè)置如”D:\mysite” 。如圖 27 所示，讀者也可以根據(jù)實際情況設(shè)置為其他路徑。選擇“文檔”標(biāo)簽，打開如圖 28 所示界面。 網(wǎng)站設(shè)計的前期準(zhǔn)備 計算機(jī)科學(xué)與技術(shù)專業(yè) 38 步驟 5 可以添加一個默認(rèn)文檔作為主頁。選擇“添加”按鈕，在彈出的對話框中輸入文檔名。為下一節(jié)的實例輸入“ ” 作為網(wǎng)頁首頁，然后單擊左邊的向上和向下箭頭改變默認(rèn)文檔的次序。以上介紹了 IIS 的安 裝和設(shè)置。 第八章 本站的制作過程 首頁的制作過程 靜態(tài)頁面的制作 本站的制作過程 計算機(jī)科學(xué)與技術(shù)專業(yè) 39 這是 我的這個個人網(wǎng)站 的首頁 的一部分，在這個主頁的上部，是有兩個 Flash圖片做成的，如上圖所示。接下來，我就簡單演示一下這個主頁的制作過程。首先，運(yùn)行 Dreamwear MX 2020，選擇“文件” — “新建” — “創(chuàng)建基本頁”如圖： 選擇“標(biāo)準(zhǔn)、擴(kuò)展、布局”里的“布局”，接著選擇旁邊的“布局表格”，然后在空白頁面上按我事先的規(guī)劃畫出如下布局： 本站的制作過程 計算機(jī)科學(xué)與技術(shù)專業(yè) 40 接著，選擇“布局”旁邊的“繪制布局單元格”在剛剛繪制好的“布局表格”上繪 制出單元格， 如果只看兩幅圖，似乎沒什么區(qū)別，但實際這是后一幅圖比前一幅多了“繪制布局單元格”，這一點是非常重要的。接下來，回到“常用” “標(biāo)準(zhǔn)”，選擇“表格”，在最上面的布局里插入一行一列單元格，比例設(shè)為 100，如圖： 本站制作過程 計算機(jī)科學(xué)與技術(shù)專業(yè) 41 將光標(biāo)放在插入的表格內(nèi)，接著就是插入一幅 Flash 動畫。選擇“插入” —“媒體” — “ Flash”，在彈出的文件中選取我自己事先做好的 Flash 動畫的，調(diào)整 Flash 動畫的大小，既可以手動調(diào)整，也可以在下面的屬性里添上我自己事先設(shè)置好的大小，我通常是手動輸入的。這樣，首頁頂部的 這個 Flash 動畫就添加成功了。接下來，我用同樣的方法把這個動畫下的另一個動畫菜單添加上。添加后的效果入圖： 因為只有在瀏覽器中，整個 Flash 動畫才可以被看到，所以，我就按下 F12，這樣就可以在瀏覽器中看到剛剛我做好的主頁中的一部分了。接下來，我們就來講講首頁底部的頁面的制作過程。 首先，我先把底面按和頂部一樣都插入一個一行一列的，邊框為 0 的表格，然后把光標(biāo)放在表格里，設(shè)置背景圖片，如圖： 本站制作過程 計算機(jī)科學(xué)與技術(shù)專業(yè) 42 在設(shè)置背景圖片的時候，我把選擇了我自己事先做好的一幅圖，接下來，就在這個表格里輸入如圖的文字，包括：本站簡 介，本站業(yè)務(wù) ...最后，我把屬于我的版權(quán)信息也輸入到了這個底步。這樣，整個首頁的靜態(tài)頁面就大體做好了。 動態(tài)頁面的制作 在整個網(wǎng)站中，動態(tài)頁面占了這個主頁的大部分，在這里，我就把我的這個個人主頁的動態(tài)頁面的制作大體的講解一下。首先，我根據(jù)我的個人主頁所要實現(xiàn)的功能我制作好了我的數(shù)據(jù)庫（在第四章），接下來，我就把我設(shè)定系統(tǒng)的DSN（數(shù)據(jù)源名稱）的方法來講講。首先，我明白， DSN 是用來確定數(shù)據(jù)庫所在的位置以及數(shù)據(jù)庫的相關(guān)屬性的。使用 DSN 的優(yōu)點是，如果我要移動數(shù)據(jù)庫檔案的位置或是使用其他類型的數(shù)據(jù)庫的 時候，我只要重新設(shè)定 DSN 即可，不需要去修改原來使用的程序。下面，我就演示我在自己的電腦上配置 DSN 的過程： ，雙擊“管理工具”下的“數(shù)據(jù)源（ ODBC）”，如圖所示： “數(shù)據(jù)源（ ODBC）”對話框中選擇“系統(tǒng) DSN”標(biāo)簽，然后單擊“添加”按鈕，如圖： 本站制作過程 計算機(jī)科學(xué)與技術(shù)專業(yè) 43 “創(chuàng)建新數(shù)據(jù)源”對話框中，選擇數(shù)據(jù)庫的驅(qū)動程序為“ Microsoft Access Driver（ *.mdb）”，然后單擊“完成”按鈕，如圖： “ ODBC Microsoft Access 安裝” 對話框，在“數(shù)據(jù)源名”文本框中輸入我的這個網(wǎng)站的數(shù)據(jù)庫的名稱： youthfly,單擊“數(shù)據(jù)庫”欄中的“選擇”按鈕選擇我的這個網(wǎng)站根目錄中我已經(jīng)建好的數(shù)據(jù)庫 ，然后單擊“確定”按鈕，如圖： ，我發(fā)現(xiàn)系統(tǒng)數(shù)據(jù)源名稱中已經(jīng)多了一個“ ”，這就是我的網(wǎng)站要使用的數(shù)據(jù)庫。單擊“完成”按鈕，這樣，我就完成了數(shù)據(jù)源的創(chuàng)建過程。如圖： 本站制作過程 計算機(jī)科學(xué)與技術(shù)專業(yè) 44 ，我要在 Dreamweaver MX 2020 中把數(shù)據(jù)庫的連接完成。運(yùn)行Dreamweaver MX 2020，打 開“應(yīng)用程序”面板，然后選擇“數(shù)據(jù)庫”標(biāo)簽，如圖： 單擊“ +”按鈕，在彈出的快捷菜單中選擇“數(shù)據(jù)源名稱”。隨即打開“數(shù)據(jù)源名稱”對話框，在“連接名稱”文本框中輸入“ yougthfly”如圖： 單擊“測試”，我就可以測試數(shù)據(jù)庫是否正確連接了。單擊“確定”，這樣，我就完成了數(shù)據(jù)庫的連接設(shè)置過程。完成了數(shù)據(jù)庫連接的設(shè)置，接下來就是把首頁的部分內(nèi)容和數(shù)據(jù)庫相連接了。（略） 鏈接頁面的制作 校園資訊的制作 本站制作過程 計算機(jī)科學(xué)與技術(shù)專業(yè) 45 這 個就是我的個人主頁里“校園資訊”的界面，當(dāng)點擊右面的題目時，在網(wǎng)頁的左邊就會顯 示響應(yīng)的內(nèi)容，下面我就演示我制作這個網(wǎng)頁的過程： 首先，在制作主頁面的時候，我已經(jīng)在把主頁的頂部和底部制作完成后，保存為模板了，所以，在這里，我們就選擇“文件” — “新建” — “模板”，然后選擇我們保存過的模板。在打開的模板中，我們把中間的空白區(qū)域劃分成左右兩個部分。 我們把這兩個空白區(qū)域去分別保存成為兩個頁面，這樣方便我們在后面的鏈接。在右邊保存的頁面中，插入表格若干， 本站制作過程 計算機(jī)科學(xué)與技術(shù)專業(yè) 46 打開數(shù)據(jù)庫，連接好數(shù)據(jù)庫，并將數(shù)據(jù)庫中的內(nèi)容分別拽入到表格中的適當(dāng)位置，這樣，數(shù)據(jù)庫中的內(nèi)容就顯示在右面。接下來，我們就為右面的內(nèi) 容做鏈接。首先，選擇右面的一題目，然后在屬性里的超級鏈接里面添入剛才保存的兩個頁面的左邊的頁面。這樣，將每個頁面分別和左面的頁面鏈接，當(dāng)你點擊右邊的題目的時候，那么和內(nèi)容相對應(yīng)的題目就會在左邊的頁面中顯示出來。 以上是我的一個鏈接頁面的設(shè)計過程，因為鏈接頁面較多，但大部分的制作過程都比較相似，所以我就不再講解了。 第九章 本站數(shù)據(jù)庫的設(shè)計過程 數(shù)據(jù)庫設(shè)計 網(wǎng)站的數(shù)據(jù)庫建設(shè)在整個網(wǎng)站的設(shè)計過程中占具最重要的位置，它設(shè)計的好與壞直接關(guān)系到整個網(wǎng)站的成敗。其中，管理系統(tǒng)需要考慮到三者的使用問題：一 .系統(tǒng)管理員 二 .信息發(fā)布者 三 .瀏覽者： 4． 系統(tǒng)管理員： 系統(tǒng)管理員具有對整個網(wǎng)站發(fā)布，數(shù)據(jù)庫的管理，信息管理，人員管理的最高權(quán)限。 5． 信息發(fā)布者： 網(wǎng)站信息的發(fā)布者，他們的任務(wù)是更新網(wǎng)站上的信息，所本站制作過程 計算機(jī)科學(xué)與技術(shù)專業(yè) 47 以他們的權(quán)限只局限于對文章的增、刪、改上。 6． 瀏覽者： 信息的最終瀏覽者，他們是不具有任何權(quán)限的普通用戶。 系統(tǒng)管理員（ ADMIN）擁有最大的權(quán)限，可添加 /刪除任何信息，包括任何文章，任何用戶。在設(shè)計數(shù)據(jù)庫過程中，必須考慮到各種信息存放，更新，查詢。所以數(shù)據(jù)庫必須能最大限度的滿足各種信息的輸入輸出。 以下為后臺 數(shù)據(jù)庫的各表的結(jié)構(gòu)和字段的分析。 Admin_id 系統(tǒng)管理員圖： 首頁題目表圖： 中間版塊題目表圖： 中間版塊內(nèi)容表圖： 本站數(shù)據(jù)庫的設(shè)計過程 計算機(jī)科學(xué)與技術(shù)專業(yè) 48 網(wǎng)站公告欄表圖： 網(wǎng)站中用到的調(diào)查表圖： 網(wǎng)站所用到的后臺文件 文件名 作用與功能 備注 登陸 后臺 首頁 管理文章 后臺 發(fā)布信息 后臺 投票管理 后臺 刪除功能 后臺 發(fā)布功能 后臺 數(shù)據(jù)庫文件 后臺 公告管理 后臺 網(wǎng)站數(shù)據(jù)安全 怎樣防止 mdb 數(shù)據(jù)庫被下載一直是用 access 的用戶的一大頭疾。現(xiàn)在總結(jié)如下有效方法，我自己根據(jù)教程總結(jié)了以下幾點，以用來保護(hù)我的個人站點： 1. 修改數(shù)據(jù)庫名。這是常用方法，將數(shù)據(jù)庫名該成怪異名字或長名字，以防別人猜測。一旦被人猜到，別人還是能下載數(shù)據(jù)庫文件，但幾率不大。如將數(shù)據(jù)庫 改成 dslfjds$^amp。 等 2. 修改數(shù)據(jù)庫后綴。一般改成 、 、 本站數(shù)據(jù)庫的設(shè)計過程 計算機(jī)科學(xué)與技術(shù)專業(yè) 49 、 、 等等，注意要在 IIS 中設(shè)置這些后綴的文件不能被解析。 3. 將數(shù)據(jù)庫 改成 。 這是最簡單有效的辦法。分 析 ： 假 設(shè) 別 人 得 到 你 的 數(shù) 據(jù) 庫 地 址 串 將 是 ： 因為 在這里起到間斷符的作用，地址串遇到 號，自動認(rèn)為訪問地址串結(jié)束。注意：不要設(shè)置目錄可訪問。用這種方法，不管別人用何種工具都無法下載，如 flashget，網(wǎng)絡(luò)螞蟻等。注：只要數(shù)據(jù)庫文件名任何地方含有 39。39。，別人都無法正常下載。同理，空格號也可以起到 39。39。號作用，但必須是文件名中間出現(xiàn)空格。 4. 將數(shù)據(jù)庫連接文件放到其他虛擬目錄下。 5. 將 Access 數(shù)據(jù)庫加密。 在我的這個個人網(wǎng)站的數(shù)據(jù)庫中，我采用了 Access 數(shù)據(jù)庫加密的方法來保護(hù)自己的數(shù)據(jù)庫安全，這樣， 即使我的數(shù)據(jù)庫被人下載，他仍然破解不了我的用戶的密碼。 第十章 網(wǎng)站的測試與上傳 網(wǎng)站的測試 一個好的網(wǎng)站建設(shè)好了之后是不能立即發(fā)布的，在這之前需要進(jìn)行一段時間的測試，沒有經(jīng)過測試的網(wǎng)站往往會在瀏覽器兼容性和顯示器兼容性上出現(xiàn)問題。同樣由于在程序開發(fā)和頁面制作的過程中難免會出現(xiàn)誤差，所以在正式發(fā)布前通過測試找出網(wǎng)站的 Bug（網(wǎng)頁中的漏洞）是非常重要的一個環(huán)節(jié)，通常稱此過程為捉蟲。 為什么測試顯得這么重要呢？沒有經(jīng)過測試的頁面會出現(xiàn)那些問題呢？下面將從幾個不同的方面來說明這些問題。 率不同產(chǎn)生差異 經(jīng)常上網(wǎng)的人可能會有這樣的經(jīng)歷，那就是同樣一個網(wǎng)頁在不同的分辨率下會有不同的顯示。這就是由于分辨率不同所造成的。 顯示器不同產(chǎn)生不同的瀏覽結(jié)果，瀏覽器版本不同也可能會使得網(wǎng)站的瀏覽效果產(chǎn)生差異。同一個頁面在 IE 和 Netscape 瀏覽器下的顯示效果也可能是不同網(wǎng)站的測試與上傳 計算機(jī)科學(xué)與技術(shù)專業(yè) 50 的，這些頁面上的問題都是訪問者可能遇到的。網(wǎng)站建設(shè)者不能在頁面上發(fā)布類似于“本站默認(rèn)瀏覽器在 IE 以上，默認(rèn)顯示器分辨率為 800*600”的標(biāo)記，反而應(yīng)該想辦法去適應(yīng)瀏覽網(wǎng)站的訪問者，而不是讓訪問者通過調(diào)整 瀏覽器分辨率和顯示器來適應(yīng)網(wǎng)站。所以，網(wǎng)站的測試就顯的很重要了。 。 在一個網(wǎng)站的開發(fā)過程中，網(wǎng)站的測試是保證整個網(wǎng)站整體質(zhì)量的重要一環(huán)，本章將就網(wǎng)站的測試技術(shù)及相應(yīng)的自動測試工具做一個簡要的介紹。主要就如下幾個方面進(jìn)行探討：性能測試，安全性測試，穩(wěn)定性測試 ，瀏覽器兼容性測試 ，可用性 /易用性測試，鏈接