1、 天津城建大學(xué) HYPERLINK 2:9080/jscx/page/grjw_xklb.jsp?r1=075008&r2=0&r3=網(wǎng)頁(yè)程序設(shè)計(jì)&r4=任麗敏&r5=07500800 網(wǎng)站建設(shè)與管理專(zhuān)題報(bào)告 學(xué)號(hào)11710115學(xué)生姓名路江飛專(zhuān)業(yè)名稱(chēng)計(jì)算機(jī)年級(jí) 班級(jí)11卓越七班成績(jī) 2013年 11月天津城建大學(xué)設(shè)計(jì)性實(shí)驗(yàn)任務(wù)書(shū) 計(jì)算機(jī)與信息工程 學(xué)院 計(jì)算機(jī) 專(zhuān)業(yè) 卓越七 班 姓名 路江飛 學(xué)號(hào):11710115 課程名稱(chēng)： 網(wǎng)站建設(shè)與管理 設(shè)計(jì)題目： 個(gè)人網(wǎng)站的建設(shè)與管理 完成期限：自 2013 年 9月 21 日至 2013 年 11 月 9 日設(shè)計(jì)依據(jù)、要求及主要內(nèi)容（可另加附頁(yè)）：

2、1設(shè)計(jì)依據(jù):本課程設(shè)計(jì)是依據(jù)為設(shè)計(jì)依據(jù), 從技術(shù)、管理角度，掌握網(wǎng)站系統(tǒng)建設(shè)與管理的基礎(chǔ)知識(shí)、網(wǎng)站規(guī)劃設(shè)計(jì)、網(wǎng)站平臺(tái)建設(shè)、網(wǎng)站系統(tǒng)管理、網(wǎng)站發(fā)布與維護(hù)、FTP服務(wù)器管理、索引服務(wù)器管理、網(wǎng)站數(shù)據(jù)庫(kù)管理、網(wǎng)站安全管理以及網(wǎng)站宣傳與推廣等內(nèi)容。2設(shè)計(jì)要求:1遵守網(wǎng)站設(shè)計(jì)原則。2合理的、符合邏輯的網(wǎng)站結(jié)構(gòu)。3網(wǎng)站內(nèi)容要豐富、簡(jiǎn)潔明快、獨(dú)具特色、保持統(tǒng)一的風(fēng)格。要求圖文并茂，顏色搭配合理。但是圖片、動(dòng)畫(huà)、音頻及視頻文件不要太大。希望充分發(fā)揮各自的創(chuàng)造能力。 4遵守網(wǎng)頁(yè)設(shè)計(jì)規(guī)則。 5. 遵守網(wǎng)站技術(shù)規(guī)范。 一、設(shè)計(jì)與管理內(nèi)容設(shè)計(jì)一個(gè)主題為介紹性網(wǎng)頁(yè)，通過(guò)網(wǎng)頁(yè)把自己的一些觀點(diǎn)介紹給大家，用自己所學(xué)習(xí)的網(wǎng)頁(yè)

3、知識(shí)來(lái)完成，使網(wǎng)頁(yè)達(dá)到一定的效果，所包含的內(nèi)容全面運(yùn)用的網(wǎng)頁(yè)知識(shí)豐富。二、網(wǎng)站項(xiàng)目需求說(shuō)明 登錄模塊：顯示用戶(hù)名和密碼界面主頁(yè)模塊：顯示個(gè)人的簡(jiǎn)介和照片收藏模塊: 顯示相冊(cè)，包括三個(gè)相冊(cè)，分別為，,夢(mèng)想模塊：顯示自己對(duì)生活和以后工作的觀點(diǎn)以及相應(yīng)的圖片和簡(jiǎn)單的視頻三、網(wǎng)站總體設(shè)計(jì)技術(shù) 首先構(gòu)思出網(wǎng)頁(yè)的大致結(jié)構(gòu)，把網(wǎng)站分成若干個(gè)獨(dú)立的頁(yè)面，把每個(gè)頁(yè)面劃分成不同的模塊，從網(wǎng)絡(luò)上面下載資源，然后再主頁(yè)上面建立相應(yīng)的鏈接鍵，鏈接相關(guān)的內(nèi)容。網(wǎng)頁(yè)包括：登陸界面，主頁(yè)，搜藏，信仰等模塊，通過(guò)鏈接把這些子網(wǎng)頁(yè)鏈接到主網(wǎng)頁(yè)不同的模塊上面，從而實(shí)現(xiàn)各個(gè)網(wǎng)頁(yè)之間的聯(lián)系和轉(zhuǎn)換。在網(wǎng)頁(yè)中插入圖片和flash使得網(wǎng)頁(yè)更

4、加的有活力，同時(shí)不同的模塊選用不同的顏色字體使網(wǎng)頁(yè)更有層次感。同時(shí)在不同的子網(wǎng)頁(yè)中針對(duì)各個(gè)主題插入有符合主題的背景音樂(lè)進(jìn)一步完善網(wǎng)站。四、網(wǎng)站開(kāi)發(fā)建設(shè)方案 1、整理規(guī)劃網(wǎng)站建設(shè)的開(kāi)始就應(yīng)該有一個(gè)整體的戰(zhàn)略目標(biāo)，即確定站點(diǎn)的目標(biāo)。首先要有一個(gè)總的目標(biāo)，這個(gè)網(wǎng)站到底是要做什么。有的要顯示自己的設(shè)計(jì)水平，這就要求頁(yè)面美觀；有的是為了求職而設(shè)計(jì)的求職網(wǎng)站，這就要求提供足夠的信息讓別人了解你的工作能力；有的是要為用戶(hù)服務(wù)，這就要求網(wǎng)站有較強(qiáng)的互動(dòng)性。確定好目標(biāo)之后，需要注意的是在設(shè)計(jì)中要在不同的瀏覽器中瀏覽自己的網(wǎng)頁(yè)，看看有沒(méi)有發(fā)生變化。 2、新建站點(diǎn)規(guī)劃好站點(diǎn)之后，就可以用專(zhuān)門(mén)的網(wǎng)頁(yè)開(kāi)發(fā)軟件創(chuàng)建站點(diǎn)了

5、。在創(chuàng)建站點(diǎn)之前，我們應(yīng)該首先在我們的磁盤(pán)上創(chuàng)建一個(gè)文件夾，用于存放站點(diǎn)內(nèi)的所有資源，當(dāng)然如果你的站點(diǎn)資源比較豐富這是可以建立子文件夾存放站點(diǎn)內(nèi)相應(yīng)的資源。創(chuàng)建站點(diǎn)：在Dreamweaver中執(zhí)行【站點(diǎn)】|【新建站點(diǎn)】命令，彈出【未命名站點(diǎn)1的站點(diǎn)定義為】對(duì)話(huà)框，這個(gè)對(duì)話(huà)框包括【基本】選項(xiàng)卡和【高級(jí)】選項(xiàng)卡。在對(duì)話(huà)框的【基本】選項(xiàng)卡中輸入新建站點(diǎn)的名稱(chēng)，單擊下一步，在彈出的對(duì)話(huà)框中設(shè)置站點(diǎn)的文件類(lèi)型，單擊下一步，在彈出的對(duì)話(huà)框中選擇編輯站點(diǎn)文件的方法，并在下面的文本框中輸入新建站點(diǎn)所知的目錄。單擊下一步，進(jìn)入共享文件窗口，在“您如何選擇連接到遠(yuǎn)程服務(wù)器？”，選擇“無(wú)”。單擊下一步，進(jìn)入總結(jié)窗口

6、，點(diǎn)擊完成按鈕，再次彈出“管理站點(diǎn)”對(duì)話(huà)框，在“管理站點(diǎn)”對(duì)話(huà)框中顯示出新建本地站點(diǎn)的名稱(chēng)。單擊完成，站點(diǎn)創(chuàng)建完成。3、收集資源確定好站點(diǎn)目標(biāo)和結(jié)構(gòu)之后，接下來(lái)要做的就是收集有關(guān)網(wǎng)站的資源，其中包括以下資源：（1）文字資料：文字是網(wǎng)站的主題。無(wú)論是什么類(lèi)型的網(wǎng)站，都要離不開(kāi)敘述性的文字。離開(kāi)了文字即使圖片再華麗，瀏覽者也不知所云。所以要制作一個(gè)成功的網(wǎng)站，必須要提供足夠的文字資料。（2）圖片資料：網(wǎng)站的一個(gè)重要要求就是圖文并茂。如果單單有文字，瀏覽者看了不免覺(jué)得枯燥無(wú)味。文字的解說(shuō)再加上一些相關(guān)的圖片，讓瀏覽者能夠了解更多的信息，更能增加瀏覽者的印象。（3）動(dòng)畫(huà)資料：在網(wǎng)頁(yè)上插入動(dòng)畫(huà)可以增添頁(yè)

7、面的動(dòng)感效果?，F(xiàn)在Flash動(dòng)畫(huà)在網(wǎng)頁(yè)上應(yīng)用的相當(dāng)多，所以建議大家應(yīng)該學(xué)會(huì)Flash制作動(dòng)畫(huà)的一些知識(shí)。（4）其它資料：例如網(wǎng)站上的應(yīng)用軟件，音樂(lè)網(wǎng)站上的音樂(lè)文件等等。4、布局頁(yè)面設(shè)計(jì)站點(diǎn)結(jié)構(gòu)和收集了足夠的資源之后，就可以開(kāi)始布局頁(yè)面了。在Dreamweaver中，可以通過(guò)以下手段進(jìn)行排版：（1）利用表格進(jìn)行排版：表格主要有三個(gè)元素表格、行和列及單元格，而且表格還可以嵌套，不過(guò)在這里建議大家不要把所有的網(wǎng)頁(yè)都放在一個(gè)大表格中，并且嵌套最好不要超過(guò)層，因?yàn)槿绻隳菢幼隽?，瀏覽器解析的時(shí)間會(huì)增加了，那么當(dāng)瀏覽者訪問(wèn)時(shí)速度就慢了。（2）利用層排版：層很適合形式自由的排版，現(xiàn)在標(biāo)準(zhǔn)建議排版時(shí)拋棄表格，

8、不過(guò)如果初學(xué)者學(xué)習(xí)利用層排版時(shí)還要學(xué)習(xí)其它好多相關(guān)知識(shí)，其中最重要的是CSS和Javascript，使用CSS來(lái)輔助層可以對(duì)網(wǎng)頁(yè)實(shí)現(xiàn)排版，可以解決表格給我們帶來(lái)的煩惱。如果你對(duì)WEB標(biāo)準(zhǔn)感興趣，那么你就該好好的學(xué)習(xí)CSS了?。?）利用布局視圖進(jìn)行排版：在Dreamweaver MX 2004中有專(zhuān)門(mén)的布局視圖，我們初學(xué)網(wǎng)頁(yè)設(shè)計(jì)時(shí)可以使用它進(jìn)行排版。利用框架進(jìn)行排版：它是一種用瀏覽器窗口，顯示多個(gè)網(wǎng)頁(yè)的形式，前幾天記得有人在論壇中求，網(wǎng)頁(yè)格式的課件，網(wǎng)頁(yè)格式的課件大部分是用框架做出來(lái)的。5、編輯文檔與超級(jí)連接經(jīng)過(guò)上面的幾個(gè)步驟之后，一切準(zhǔn)備工作都已經(jīng)就緒，現(xiàn)在可以象裝箱一樣把收集到的資料及制作的

9、組件放到頁(yè)面布局中為它們指定的位置上了。插入到網(wǎng)頁(yè)布局之后，文字都是同一種字號(hào)，同一種風(fēng)格，同一種顏色；圖片有大有小。所以這時(shí)就要對(duì)各種元素進(jìn)行編輯了，例如，改變文本字體、字號(hào)、顏色、大小等，對(duì)圖片進(jìn)行大小，表格的調(diào)整，按鈕行為的調(diào)整等等！鏈接是網(wǎng)頁(yè)的靈魂。瀏覽者在瀏覽網(wǎng)頁(yè)時(shí)，單擊網(wǎng)頁(yè)設(shè)置的超級(jí)連接可以跳轉(zhuǎn)到相關(guān)頁(yè)面，所以一個(gè)好的網(wǎng)頁(yè)是離不開(kāi)連接的。五、網(wǎng)站詳細(xì)設(shè)計(jì) 1、ASP動(dòng)態(tài)網(wǎng)頁(yè)的設(shè)計(jì)步驟1建立個(gè)人站點(diǎn)文件夾（如：E:University）2配置IIS：開(kāi)始控制面板管理工具Internet信息服務(wù)默認(rèn)網(wǎng)站屬性(1)主目錄：本地路徑：E:University(2)文檔：time.asp3啟

10、用Dreamrever 8.0建立站點(diǎn)：站點(diǎn)新建站點(diǎn)“高級(jí)”或站點(diǎn)管理站點(diǎn)編輯“高級(jí)”(1)本地信息：站點(diǎn)名稱(chēng)：myweb；本地根文件夾：E:University(2)測(cè)試服務(wù)器：服務(wù)器模型：ASP VBScript；訪問(wèn)：本地/網(wǎng)絡(luò)。4在Deramrever中選擇：文件新建動(dòng)態(tài)頁(yè) ASP VBScript（文檔類(lèi)型：無(wú)）創(chuàng)建5開(kāi)始網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)及代碼編寫(xiě)等操作，將文件保存為.asp類(lèi)型。This page was crated aton the computer rnuning asp6在internet信息服務(wù)器窗口中右鍵點(diǎn)擊要瀏覽的網(wǎng)頁(yè)文件，選擇“瀏覽”，在打開(kāi)的IE窗口中進(jìn)行測(cè)試。2、A

11、ccess數(shù)據(jù)庫(kù)連接的設(shè)計(jì)步驟 用ASP腳本連接到data數(shù)據(jù)庫(kù)%Set cn=Server.Create(ADODB.Connection)Strcn=DRIVER=MicrosoftAccess Driver(*.mdb);DBQ=&Server.MapPath(data.mdb)連接數(shù)據(jù)庫(kù) data.mdbcn.Open Strcnset rs=cn.Execute(Books) 連接數(shù)據(jù)表Booksif err.Number 0 then 判斷數(shù)據(jù)庫(kù)是否連接成功ResPonse.Write數(shù)據(jù)庫(kù)連接失敗“ResPonse.EndesleResPonse.Write數(shù)據(jù)庫(kù)連接失敗“Res

12、Ponse.Endend if%3、使用動(dòng)態(tài)網(wǎng)頁(yè)數(shù)據(jù)源的設(shè)計(jì)步驟 （1）創(chuàng)建ODBC數(shù)據(jù)源。如果要在ASP中使用ADO組件對(duì)象數(shù)據(jù)庫(kù)，首先要?jiǎng)?chuàng)建一個(gè)指向數(shù)據(jù)庫(kù)的ODBC連接。在Windows系統(tǒng)中，ODBC的連接主要通過(guò)ODBC數(shù)據(jù)源管理器來(lái)完成。創(chuàng)建ODBC數(shù)據(jù)源:執(zhí)行【開(kāi)始】|【控制面板】|【管理工具】|【數(shù)據(jù)源（ODBC）】命令，彈出【ODBC數(shù)據(jù)源管理器】對(duì)話(huà)框，然后選擇【系統(tǒng)DSN】選項(xiàng)卡，在【系統(tǒng)DSN】選項(xiàng)卡中單擊【添加】按鈕，彈出【創(chuàng)建新數(shù)據(jù)源】對(duì)話(huà)框。在【創(chuàng)建新數(shù)據(jù)源】對(duì)話(huà)框中選擇數(shù)據(jù)源的驅(qū)動(dòng)程序Microsoft Access Driver（*.mdb），然后單擊【完成】按

13、鈕，彈出【ODBC Microsoft Access安裝】對(duì)話(huà)框。在【數(shù)據(jù)源名】文本框中輸入要連接的數(shù)據(jù)源名，在【數(shù)據(jù)庫(kù)】項(xiàng)中單擊【選擇】按鈕，彈出【選擇數(shù)據(jù)庫(kù)】對(duì)話(huà)框，在此對(duì)話(huà)框中選擇前面所創(chuàng)建的數(shù)據(jù)庫(kù)。選好數(shù)據(jù)庫(kù)后，單擊【確定】按鈕，回到【ODBC Microsoft Access安裝】對(duì)話(huà)框，在此對(duì)話(huà)框中的【數(shù)據(jù)庫(kù)】項(xiàng)中顯示連接的數(shù)據(jù)庫(kù)的路徑，單擊【確定】按鈕，回到【ODBC 數(shù)據(jù)源管理器】對(duì)話(huà)框，此時(shí)也就創(chuàng)建好了ODBC數(shù)據(jù)源的連接了。（2）創(chuàng)建DSN連接。DSN即數(shù)據(jù)源名稱(chēng)。它表示將應(yīng)用程序和某個(gè)數(shù)據(jù)庫(kù)連接的信息集合。ODBC數(shù)據(jù)源管理器使用該信息來(lái)創(chuàng)建數(shù)據(jù)庫(kù)的連接，通常DSN可以保

14、存在文件或注冊(cè)表中。實(shí)際上創(chuàng)建ODBC連接，就是創(chuàng)建同DSN的連接。當(dāng)創(chuàng)建了指向數(shù)據(jù)庫(kù)的ODBC連接后，同該數(shù)據(jù)庫(kù)連接的有關(guān)信息就被保存在了DSN中，而在程序中如果要操作數(shù)據(jù)庫(kù)，也必須通過(guò)DSN來(lái)進(jìn)行。在Dreamweaver 8中來(lái)創(chuàng)建DSN的連接。首先打開(kāi)Dreamweaver 8，執(zhí)行【窗口】|【數(shù)據(jù)庫(kù)】命令，打開(kāi)【數(shù)據(jù)庫(kù)】面板，然后單擊加號(hào)按鈕，從彈出菜單中選擇【數(shù)據(jù)源名稱(chēng)（DSN）】命令，彈出【數(shù)據(jù)源名稱(chēng)（DSN）】對(duì)話(huà)框，在此對(duì)話(huà)框中的【連接名稱(chēng)】文本框中輸入連接數(shù)據(jù)庫(kù)名稱(chēng)，在【數(shù)據(jù)源名稱(chēng)（DSN）】下拉列表中選擇數(shù)據(jù)源，然后單擊【測(cè)試】按鈕，如果成功，會(huì)彈出成功創(chuàng)建連接腳本提示信

15、息。此時(shí)數(shù)據(jù)庫(kù)也就連接好了。在【數(shù)據(jù)源名稱(chēng)（DSN）】對(duì)話(huà)框中單擊【確定】按鈕，回到【數(shù)據(jù)庫(kù)】面板，這是就可以看到創(chuàng)建的數(shù)據(jù)源了。4.登錄模塊的界面：5.主頁(yè)模塊的界面：6.收藏模塊的界面7.理想模塊的主要界面：六、網(wǎng)站測(cè)試與發(fā)布 1登錄測(cè)試測(cè)試內(nèi)容：打開(kāi)首頁(yè)后，是否顯示相應(yīng)的界面。操作：打開(kāi)首頁(yè)查看。結(jié)果：相應(yīng)的界面顯示出來(lái)。結(jié)論：測(cè)試成功。2主頁(yè)測(cè)試測(cè)試內(nèi)容：是否顯示自己的信息操作：點(diǎn)擊主頁(yè)按鈕結(jié)果：顯示出自己的正確信息結(jié)論：測(cè)試成功3收藏測(cè)試測(cè)試內(nèi)容：是否顯示相冊(cè)。操作：點(diǎn)擊收藏按扭，點(diǎn)擊相冊(cè)結(jié)果：顯示相冊(cè)信息，顯示每個(gè)相冊(cè)的照片結(jié)論：測(cè)試成功4理想測(cè)試測(cè)試內(nèi)容：是否顯示正確的圖片和正確

16、的文字。操作：點(diǎn)擊理想按鈕結(jié)果：顯示出正確的圖片和文字。結(jié)論：測(cè)試成功七、網(wǎng)站系統(tǒng)管理八、設(shè)計(jì)體會(huì)（要求宋體四?。┩ㄟ^(guò)這次課程設(shè)計(jì)，我了解了一個(gè)網(wǎng)站形成的基本過(guò)程和基本綱領(lǐng)構(gòu)架，加深了我對(duì)動(dòng)態(tài)網(wǎng)站的認(rèn)識(shí)，相信這些知識(shí)都將對(duì)我的學(xué)習(xí)帶來(lái)很大的幫助。這次設(shè)計(jì)個(gè)人博客網(wǎng)站，對(duì)我來(lái)說(shuō)是一個(gè)將所學(xué)知識(shí)從書(shū)本運(yùn)用到實(shí)際操作的寶貴次體驗(yàn)。在設(shè)計(jì)過(guò)程中我學(xué)會(huì)了很多，也感到自身知識(shí)的貧乏，同時(shí)也認(rèn)識(shí)到了理論與實(shí)踐間存在的巨大差距，有些看上去很簡(jiǎn)單的問(wèn)題，在動(dòng)手去實(shí)踐時(shí)卻未必會(huì)順利。一味的啃書(shū)并非是好的。只有理論與實(shí)踐相結(jié)合，才能更快的進(jìn)步，學(xué)到更多的知識(shí)。希望在今后的努力中能做出更完善的設(shè)計(jì)。同時(shí)，通過(guò)這次課程設(shè)計(jì)，我們對(duì)一個(gè)動(dòng)態(tài)網(wǎng)站從設(shè)計(jì)到功能的實(shí)現(xiàn)有了一個(gè)更全面的理解。同時(shí)老師和同學(xué)的相互討論促使我們對(duì)課本上的知識(shí)理解得更加全面，并且將其運(yùn)用到實(shí)踐中。培養(yǎng)了我們的團(tuán)隊(duì)協(xié)作解決問(wèn)題的能力。在這次課設(shè)中遇到好多書(shū)上沒(méi)有提到的問(wèn)題，通過(guò)運(yùn)用書(shū)上的知識(shí)，并且將其加以現(xiàn)實(shí)化，解決了這些問(wèn)題，提高了我們獨(dú)立思考解決問(wèn)題的能力。這一切，都將成為我以后工作中的一筆很大的財(cái)富，也為以后走上工作崗