簡單網(wǎng)頁設(shè)計-個人簡介

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

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

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

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

5、。在創(chuàng)建站點(diǎn)之前，我們應(yīng)該首先在我們的磁盤上創(chuàng)建一個文件夾，用于存放站點(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)定義為】對話框，這個對話框包括【基本】選項卡和【高級】選項卡。在對話框的【基本】選項卡中輸入新建站點(diǎn)的名稱，單擊下一步，在彈出的對話框中設(shè)置站點(diǎn)的文件類型，單擊下一步，在彈出的對話框中選擇編輯站點(diǎn)文件的方法，并在下面的文本框中輸入新建站點(diǎn)所知的目錄。單擊下一步，進(jìn)入共享文件窗口，在“您如何選擇連接到遠(yuǎn)程服務(wù)器？”，選擇“無”。單擊下一步，進(jìn)入總結(jié)窗口

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

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

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

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

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

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

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

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

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

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

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