北京科技大學遠程與成人教育學院畢業(yè)設計（論文）題目實用網(wǎng)站的設計與實現(xiàn)學習中心北京ITET培訓中心專業(yè)計算機科學與技術年級0802姓名劉吉惠學號2083592089北京科技大學遠程與成人教育學院畢業(yè)設計（論文）題目網(wǎng)站的設計與實現(xiàn)學習中心北京ITET培訓中心專業(yè)計算機科學與技術年級0902姓名學號指導教師2011年12月22日指導教師年月日北京科技大學遠程與成人教育學院畢業(yè)設計（論文）任務書北京ITET培訓中心學習中心計算機科學與技術專業(yè)年級劉吉惠同學（學號2083592089）經(jīng)研究決定，你的畢業(yè)設計（論文）題目為實用網(wǎng)站的設計與實現(xiàn)指導教師為請你于2010年10月11日2010年11月12日期間完成。指導教師（簽字）年月日學生（簽字）劉吉惠2010年10月25日北京科技大學遠程與成人教育學院畢業(yè)設計（論文）任務書北京ITET培訓中心學習中心計算機科學與技術專業(yè)0902年級馬蘭蘭同學（學號2093592116）經(jīng)研究決定，你的畢業(yè)設計（論文）題目為網(wǎng)站的設計與實現(xiàn)指導教師為請你于2011年10月11日2010年12月31日期間完成。指導教師（簽字）年月日學生（簽字）馬蘭蘭2011年12月22日一、設計題目及內(nèi)容摘要設計題目論個人網(wǎng)站的設計與實現(xiàn)內(nèi)容摘要INTERNET的日益興起和以網(wǎng)頁為載體的網(wǎng)絡信息的廣泛傳播和應用，使得網(wǎng)站的建設及網(wǎng)頁制作得到發(fā)展的空間。大有大型企業(yè)的產(chǎn)品推銷、售后服務、解決方案。而小的有形形色色，五彩繽紛的個人網(wǎng)站。這主要是因為很多人已經(jīng)不滿足僅僅在INTERNET上的瀏覽信息，而是希望更深入的參與其中，擁有自己的WEB網(wǎng)站，這似乎也已經(jīng)成為一種潮流。關鍵字網(wǎng)站網(wǎng)頁制作目錄引言411網(wǎng)站域名的注冊與使用412網(wǎng)站建設的相關軟件413網(wǎng)站的規(guī)劃設計4131網(wǎng)站的欄目設計5132確定網(wǎng)站的框架514網(wǎng)頁基本構成元素5一、建站須知61、確定主題62、選擇空間63、網(wǎng)站設計要點64、在本地搭建網(wǎng)站服務器平臺6二、個人網(wǎng)頁的制作71、用PHOTOSHOP完成網(wǎng)頁設計72DREAMWEAVER完成網(wǎng)頁制作83、制作時應注意事項10三、網(wǎng)站的上傳10總結12致謝12引言11網(wǎng)站域名的注冊與使用建立一個網(wǎng)站首先要有一個自己的網(wǎng)站地址網(wǎng)址，網(wǎng)址是由域名來決定的。因此若想建立網(wǎng)站，首先需要注冊或者轉入一個域名以便命名要建立的網(wǎng)站。隨著INTERNET的發(fā)展，人們把域名分為幾個大類，分別以不同的后綴結尾COM用于商業(yè)公司ORG用于組織、協(xié)會等NET用于網(wǎng)絡教育EDU用于教育機構GOV用于政府部門MIL用于軍事領域CN中國專用的頂級域名因此，在做一個網(wǎng)站以前要先注冊一個好的域名。一個非產(chǎn)品推銷的純信息服務網(wǎng)站，其所有建設的價值，都凝結在其網(wǎng)站域名之上。失去這個域名，所有前期工作就將全部落空。目前，做個人網(wǎng)站的很多都依賴免費個人空間，其域名也是依賴免費域名指向，如網(wǎng)易的虛擬域名服務，其實這對個人網(wǎng)站的推廣與發(fā)展很為不利，不光是它“適時”開啟的窗口妨礙了瀏覽者的視線和好感，讓人一看就知道是個人網(wǎng)站，而且也妨礙了網(wǎng)頁的傳輸速度。所以，可以花點錢去注冊一個域名，獨立的域名就是個人網(wǎng)站的第一筆財富，要把域名起得形象、簡單、易記。12網(wǎng)站建設的相關軟件1、PHOTOSHOP2、DREAMWEAVER3、FLASH4、FIREWORKS13網(wǎng)站的規(guī)劃設計在進行一個網(wǎng)站設計之前，要先明確網(wǎng)站的風格及特點，這對具體的設計是很有利的。利用制作網(wǎng)站的軟件如DREAMWEAVER進行網(wǎng)頁框架、文字布局、頁面鏈接、動態(tài)效果等設計，也包括利用PHOTOSHOP或者FIREWORKS等平面設計軟件實現(xiàn)平面設計、靜態(tài)無聲圖片設計，或者利用FLASH實現(xiàn)動畫效果。網(wǎng)站的延伸設計。主要包括網(wǎng)站主題的定位、用戶群定位、智能交互、制作策劃、形象包裝和宣傳營銷等。131網(wǎng)站的欄目設計在我們確定了網(wǎng)站的主題和風格后，就應該圍繞主題制作相應的網(wǎng)頁內(nèi)容，設計相應的題材欄目。設計網(wǎng)站LOGO網(wǎng)站LOGO是網(wǎng)站的標志，是站點特色和內(nèi)涵的集中體現(xiàn)。設計時不僅要考慮到網(wǎng)站整體發(fā)展到一個高度時相應的推廣活動所要求的各類效果，同時應使用能夠讓多數(shù)用戶喜歡、印象深刻的造型。設計網(wǎng)站的標準色彩網(wǎng)站給人的第一印象來自視覺沖擊，所以確定網(wǎng)站的標準色彩是相當重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并可能影響到網(wǎng)頁瀏覽者的情緒。網(wǎng)站標準色彩的選擇和確定，是由網(wǎng)站的主題和企業(yè)自身的特點決定的。所以，在定位網(wǎng)站VI形象時，要明確網(wǎng)站所要傳達的信息、定位網(wǎng)站的用戶群，不要使用過多的顏色和注意網(wǎng)站色差問題等。132確定網(wǎng)站的框架網(wǎng)站框架可以使站點鏈接清楚，層次清晰。同時，為以后為以后業(yè)務需要和規(guī)模擴充，提供了方便，以免以后修改整個網(wǎng)站的框架。14網(wǎng)頁基本構成元素要學會制作網(wǎng)頁，首先需要了解網(wǎng)頁都是由什么元素構成的。文字文本是構成網(wǎng)頁的基本元素。一個最簡單的網(wǎng)頁可以只有幾行文本。圖片正是有個各種美麗的圖片，網(wǎng)頁才變得多姿多彩。動畫如今，網(wǎng)頁上的動畫越來越多，最常用的有GIF動畫、FLASH動畫等。超連接如上所述，超連接幾乎是必不可少的。一個沒有超連接的網(wǎng)頁，就如同汪洋大海中的一座孤島，失去了與外界的一切聯(lián)系。其它元素還可以在網(wǎng)頁中添加聲音、視頻等元素。一、建站須知1、確定主題做個人網(wǎng)站，好多人都喜歡在網(wǎng)頁中放一些自己感興趣的內(nèi)容，但是個人的能力畢竟有限，網(wǎng)站后期會因為無力維護而導致站點更新緩慢、內(nèi)容匱乏。所以個人建議在做個人網(wǎng)站時，要選定一個主題。做一個小而精的有自己風格的網(wǎng)站。2、選擇空間個人認為建站初期可以申請免費域名空間，但是到后期為了網(wǎng)站更好的發(fā)展可以考慮去注冊一個域名。3、網(wǎng)站設計要點制作清晰的網(wǎng)頁鏈接關系。其中導航清晰，布局合理，層次分明，頁面的鏈接層次不需太深，這樣可使瀏覽者在最短的時間內(nèi)找到需要的東西。盡量保持風格統(tǒng)一，這樣可以加深瀏覽者對自己網(wǎng)站的印象。色彩和諧、重點突出。保持主頁界面的清爽性動態(tài)不易太多。動態(tài)效果太多會讓瀏覽者眼花繚亂，適當?shù)膭討B(tài)效果可起到畫龍點睛的作用。4、在本地搭建網(wǎng)站服務器平臺（安裝以WINDOWSXP為例）1）將WINDOWSXP系統(tǒng)安裝光盤插入到驅(qū)動器里。2）選擇開始菜單上的設置控制面板命令，打開控制面板，雙擊添加或刪除程序，打開3）在左側列表中選擇添加/刪除WINDOWS組建4選中【INTERNET信息服務（IIS）】5）單擊下一步，安裝完成后就會出現(xiàn)【W(wǎng)INDOWS組件向?qū)А堪惭b結束對話框（一般默認IIS會被安裝在C盤，集中一個WWWROOT文件夾就是瀏覽訪問的默認目錄）6）打開IIS，如圖。創(chuàng)建一個新的WEB站點從圖中可以看到新建，選擇新建|虛擬目錄，這是就會出現(xiàn)虛擬目錄創(chuàng)建向?qū)У膶υ捒颉０凑諏υ捒虻奶崾局鸩竭M行下一步的操作。其中虛擬目錄別名就是新建的站點名稱，網(wǎng)站內(nèi)容目錄就是輸入虛擬目錄的真實位置（即個人網(wǎng)站的所有網(wǎng)站文件）。7）設置站點屬性因為是選擇本地計算機作為WEB服務器，所以可以在URL前綴的文本框中輸入HTTP/127001/二、個人網(wǎng)頁的制作1、用PHOTOSHOP完成網(wǎng)頁設計1）頁面內(nèi)容翔實網(wǎng)絡是虛擬的，而網(wǎng)站往往體現(xiàn)的是現(xiàn)實世界中的一個實體，不管是企業(yè)或個人。極富特色、內(nèi)容翔實、瀏覽順暢、效果獨特的網(wǎng)頁才會使人駐足觀看。2）視覺效果新穎網(wǎng)頁形象要不落俗套，把內(nèi)容的獨特的元素，如名稱、標志、標準字體、標準色等等。通過這些元素的合理應用，來實現(xiàn)網(wǎng)站形象與個性的塑造提高視覺效果。3）欄目布局明確頁面合理流暢、環(huán)環(huán)相扣、可信安全，這幾點是一個優(yōu)秀網(wǎng)站的精神所在，也是吸引力的來源。所以在建網(wǎng)站時應把網(wǎng)站內(nèi)容的層次性和空間性突出顯示出來，使人一眼就能看出網(wǎng)站重點突出，結構分明。4）特殊字體慎用在PHOTOSHOP中雖然可以使用任意字體，但是當頁面上傳至網(wǎng)絡空間中，文字是非圖片形式可編輯的時候，誰也不能預測訪問者在他們的計算機上將看到什么。所以為了避免所選擇的字體在訪問者的計算機上不能顯示，特殊字體須謹慎使用。2DREAMWEAVER完成網(wǎng)頁制作站點21創(chuàng)建站點要制作一個網(wǎng)站，第一步操作都是一樣的，就是要創(chuàng)造一個“站點”，這樣可以使整個網(wǎng)站的脈絡結構清晰地展現(xiàn)在面前，避免了以后再進行紛雜的管理。從菜單中選擇“站點/管理站點”在彈出的對話框中選擇“新建”，之后再選擇其中的“站點”，再次彈出一個對話框，在文本框中輸入自己已經(jīng)想好的網(wǎng)站名稱“MYSELF”。填好后，單擊“下一步”，進入下一個步驟。由于我要做的是一個靜態(tài)的網(wǎng)頁，所以選擇上面的一項“否，我不想使用服務器技術?！眴螕簟跋乱徊健保M入下一個步驟。在此選項中有兩個選擇，選擇推薦的“編輯我的計算機上的本地副本，完成后再上傳到服務器”。底下的文本框允許在本地磁盤上指定一個文件夾，DREAMWEAVER將在其中儲存站點文件的本地副本。單擊該文本框后面的文件夾圖標，新建并指定一個空的文件夾如“E/WEBSITE”。之后單擊“下一步“，進入下一個步驟。這一步是如何設置連接到遠程服務器，彈出式菜單中有6種選擇，這里選擇“無”。而后“下一步”再“完成”，即可。22創(chuàng)建站點內(nèi)容站點創(chuàng)建完成后，就可以創(chuàng)建WEB頁來填充站點了。在“右側浮動面板組”中選擇“文件/文件”面板，此時整個網(wǎng)站中沒有任何內(nèi)容。用鼠標右擊面板中的本地根目錄文件夾。在彈出的菜單中選擇“新建文件”，新建一個文件后將其命名為“INDEXHTM或INDEXHTML,它就是未來的首頁。由于“MYSELF”網(wǎng)站并不是只有一個欄目，所以繼續(xù)用鼠標右擊右側，在彈出的菜單中選擇第二項“NEWFOLDER新建文件夾”。執(zhí)行N操作，新建N個文件夾，并把它們重命名為網(wǎng)站其他欄目的名稱，存放它們各自的內(nèi)容。之后再次新建1個文件夾，命名為IMAGES,用來存放“所有的圖象文件”的內(nèi)容。之后在個欄目的文件夾里還要建立想相應的欄目網(wǎng)頁。221首頁設置首頁布局每個網(wǎng)站都會有一個首頁，就功能上而言，它代表著一個網(wǎng)站的風格與特色，就網(wǎng)站架構上而言，它代表了網(wǎng)站的第一層架構，至于網(wǎng)站上其他WEB頁，原則上都必須通過首頁來連接散播出去，可見首頁是多么的重要。首頁是打開網(wǎng)站后在瀏覽器中顯示的第一個頁面。它是起什么名字通常要視SERVER端的設置，一般的有INDEXHTM,DEFAULTHTM或HOMEHTM等，目前主要以INDEXHTM的居多。當然，后綴名為HTML也是正確的。設置首頁的頁面屬性首先雙擊“文件”浮動面板中的INDEXHTM,進入頁面的編輯窗口。右健單擊空白區(qū)域，在菜單中選擇“頁面屬性”，之后彈出“頁面屬性”對話框，若選擇主菜單“修改/頁面屬性”項，也可以把打開該對話框。在“頁面屬性”對話框中，左側窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標題”、“標題/編碼”、“跟蹤圖像”5項，右側區(qū)域則顯示各類中可以設置的項目。查看和編輯頭內(nèi)容一個網(wǎng)頁文件結構上實際是由兩部分組成，頭HEAD內(nèi)容和主體BODY內(nèi)容主體內(nèi)容BODY是文檔的主要部分，也是包含文本和圖像等的可見部分。頭內(nèi)容HEAD是除文檔標題外的不可見部分，包含有文檔類型、語言編碼、搜索引擎的關鍵的關鍵字和內(nèi)容指示器以及樣式定義等重要信息，這些元器并不是每個頁面都需要的，例如，可以僅為主頁提供關鍵字。下面就以首頁為例，說明怎樣插入較常用的頭HEAD內(nèi)容。單擊“菜單攔”下面“插入快捷”的下拉列表，選擇其中的HTML類，此時右側將會顯示該類中可以插入的對象快捷按鈕，再次單擊第2個按鈕“文件頭”旁邊的下拉箭頭，會彈出菜單，該項列出的便是即將插入的頭內(nèi)容。插入圖像圖像是網(wǎng)頁中不可或缺的組成成份，恰當?shù)厥褂脠D像，可以使網(wǎng)站充滿生活生命力與說服力，吸引更多的瀏覽者，加深他們欣賞你網(wǎng)站的意愿。下面就來詳細介紹對網(wǎng)頁圖像進行處理的操作步驟，以使得它們在保持圖形美麗與網(wǎng)站風格搭配的基礎上，圖片文件能夠變的更小。首先將光標停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入快健欄”的下拉表，選擇其中的“常用”類，則右側將會顯示該類中可以插入的對象快鍵按鈕。左起第5個即為“圖像圖像”按鈕，單擊它右側的下拉列表，選擇第1項“圖像”。隨即彈出“選擇圖像源文件”對話框。從計算機磁盤中選擇想要插入的圖像文件，或在URL編輯框中輸入圖像的路徑和名稱。下面的“相對于”下拉表框中，可選擇文件URL地址的類型，如果選擇“文檔”選項，表示圖像地址相對于當前文檔如果選擇“站點根目錄”選項，表示地址相對于根目錄。最后單擊“確定”按鈕，即可完成插入圖像的操作。插入文本文字是人類語言最基本的表達方式，在網(wǎng)頁中，文本內(nèi)容也可以說是重要的組成部分，一個網(wǎng)站成功與否，它是最關鍵的因素。在這最關鍵的因素?？韶S富網(wǎng)站的文字內(nèi)容，并以最最美觀、最整齊的方式放入到網(wǎng)頁中。222創(chuàng)建其它網(wǎng)頁還有其它的幾個網(wǎng)站與主頁的制作相同，一個網(wǎng)頁是圖象和文字的組合。223建立網(wǎng)頁鏈接網(wǎng)站實際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢這就是網(wǎng)頁的“鏈接”?！版溄印?，又稱“超鏈接“HYPERLINK,它作為網(wǎng)頁的橋梁，起著相當重要的作用。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在DREAMWEAVER中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“EMAIL鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉菜單”，共8種。文字鏈接“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。圖像鏈接“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應該在網(wǎng)頁中插入“圖像”，有關插入“圖像”或“導航條”按鈕的內(nèi)容。EMAIL的鏈接EMAIL鏈接，是指當瀏覽者單擊該鏈接之后，不是打開一個網(wǎng)頁文件，而是啟動用戶的EMAIL客戶端軟件如OUTLOOKEXPRESS,并打開一個空白的新郵件，供瀏覽者撰寫內(nèi)容來與網(wǎng)站聯(lián)系人聯(lián)系，這是一種最方便的互動方式。建立EMAIL鏈接的步驟如下所述操作步驟步驟1將光標停留在頁面右下角要插入EMAIL鏈接的位置。步驟2選擇“插入快捷欄”中的“常用”分類，單擊左側第2個“電子郵件鏈接”按鈕。步驟3在彈出的“電子郵件鏈接”對話框中有兩個輸入項，分別是“文本”和“EMAIL”。在“文本”項中輸入鏈接的文字，中文、英文均可，在EMAIL項中輸入網(wǎng)站聯(lián)系人的電子郵件地址步驟4單擊“確定”按鈕，具有“EMAIL鏈接”屬性的文本就插入到光標所在位置了，按下CTRLS保存網(wǎng)頁，再按下F12預覽查看實際效果。上面的方法只適用于文本的“EMAIL鏈接”，如果想在其它的對象如圖像上也加入這種鏈接，該怎辦呢下面介紹第2種建立“EMAIL鏈接”的方法。其實很簡單，與前面講過的圖像加入鏈接的方法基本一樣。先在頁面中需要的地方插入圖像，之后選中圖像，并在“屬性面板”的“鏈接”文本框中輸入如下語句即可MAILTOMOUMOUMOU郵箱。與第1種方法不同的是，EMAIL地址前面增加了MAILTO字樣。用這種方法就可以給圖像等其他對象建立“EMAIL鏈接”了。3、制作時應注意事項預覽時看不到圖片有時圖片在編輯狀態(tài)下是好的，而在預覽時或在網(wǎng)頁發(fā)布后無法顯示，究其原因，一個方面可能是路徑問題，另一方面可能就是因為圖片用的是中文文件名而招來的麻煩。如果是路徑的問題，可能是圖片不在站點內(nèi)，這就需要把圖片存人相應的文件夾中，然后改變圖片的路徑就可以了。如果圖片是在站點內(nèi)，在預覽時仍看不見圖片，則往往是使用了中文的文件名、目錄名或文件名。解決的方法是把中文名字改為英文字母、數(shù)字和下劃線等符號組合成文件名或目錄。不要忽略頁面屬性的設置設置左邊界、頂部邊界、邊界寬度和邊界高度。細心的用戶會發(fā)現(xiàn)在沒有進行設置前瀏覽時頁面會在上下、左右，各留一片空白，這塊區(qū)域用戶不能利用，白白浪費了，為了節(jié)省網(wǎng)頁中的寶貴空間，建議把這四個選項都設置為0。適當變化網(wǎng)頁中的字體網(wǎng)頁中的字體字號、字距、行距和文字顏色可作些適當變化，以求最美的視覺效果。需要突出的地方可以用不同的字體、字號和不同的顏色表示。字體最好采用系統(tǒng)自帶的字體，因為字體的顯示效果是由瀏覽者的瀏覽器來決定的。許多漂亮的文字，瀏覽器可能并不支持，可以把文字做成圖片的方式來處理，不過這