網(wǎng)頁制作課程設計

摘要本網(wǎng)站主要是運用Dreamweaver8.0制作，在可視化的環(huán)境下創(chuàng)建和編輯Web站點，綜合PhotoshopCS3進行創(chuàng)意和設計。通過網(wǎng)頁展示個人主頁、日志、相冊、個人檔等一系列內容。關鍵詞DreamweaverPhotoshop個人網(wǎng)站超鏈接第一章可行性與需求分析1.1開發(fā)背景㈠五十多年來，計算機的發(fā)展經歷了以下五個重要階段。①大型機階段②小型機階段③微型機階段④客戶機/服務器階段⑤互聯(lián)網(wǎng)階段㈡計算機的應用①科學計算②事務處理③過程控制④輔助工程⑤人工智能⑥網(wǎng)絡應用⑦多媒體的應用㈢網(wǎng)絡的應用①數(shù)據(jù)傳送②資源共享③提高計算機的可靠性和可用性④易于進行分布式處理㈣Internet的應用①電子郵件E-mail②遠程登錄Telnet③文件傳輸④FTP⑤WWW服務1.2性能需求Dreamweaver8.0要求的運行環(huán)境（1）CPUP3-800（2）內存256MB（3）硬盤剩余空間1.8GB（4）顯示器分辨率1024×768（5）16位視頻卡。（6）軟件WINDOWS2000/XP當前的開發(fā)環(huán)境（硬件、軟件）（1）CPUAMDArhlon(tm)64×2dualCoreProcessorTK-57（2）內存1GB（3）硬盤剩余空間20GB（4）顯示器分辨率1280×800（5）顯示卡ATIRedeonX1250（6）32位視頻卡（7）軟件WINDOWSXP1.3Dreamweaver8.0的特點：⒈將世界一流水平的“設計“和“代碼”編輯器合二為一在設計窗口中精簡源代碼使用戶能夠按工作的需要定制自己的且戶界面⒉．跨濟瀏覽器的有效性檢查⒊．使用內置的圖形編輯程序讓開發(fā)更加節(jié)時間⒋功能更多的CSS支持⒌所有傳輸?shù)奈募耆用?，并阻止越權存取你的信息、文件內容、用戶名和口令⒍圖片處理功能：圖片亮度和對比度的調節(jié)、圖片的銳化的效果1.4網(wǎng)站設計的步驟：①規(guī)劃網(wǎng)站；②建立站點及制作頁面；③注冊域名、租用空間；④上傳；推廣及維護1.5網(wǎng)站總體結構設計功能模塊圖（層次圖）個人主頁個人主頁主頁日志相冊個人檔留言板1.6可行性分析技術（軟、硬件具備）經濟（制作簡單的個人站點，不需要資金投入）社會（網(wǎng)站內容符合國家法律法規(guī)的要求，使用的各種素材不涉及版權問題）結論：可以開發(fā)第二章規(guī)劃網(wǎng)站2.1建站的目的即主題:想交朋友的你，已經積累了網(wǎng)頁設計方面的技巧，現(xiàn)在想設計一個人網(wǎng)頁，將這些技巧和自己較好的構想展現(xiàn)給大家，供朋友們參考。網(wǎng)站主要是以學習網(wǎng)站創(chuàng)建和技術交流為主。性質就是無償服務性的個人網(wǎng)站。有了網(wǎng)站的主題和性質后，就可以確定該網(wǎng)站的標題“我的個人主頁”或“個人風采”，讓大家一看就知道網(wǎng)站的主題內容是什么，一清二楚。2.2網(wǎng)站的瀏覽對象：Ⅰ對象：想交朋友的群體Ⅱ網(wǎng)站的風格：深色憂郁Ⅲ網(wǎng)站特點:顏色:以黑色為主調2.3網(wǎng)站的總體設計：⑴內容分類:主頁、日志、相冊、個人檔、留言板⑵各個頁面的主題內容:主頁：有自己簡介照片等日志：有網(wǎng)絡美文相冊：有個人照片個人檔：有姓名、性別、年齡、生日、星座、愛好等留言板：供網(wǎng)友留言、⑶網(wǎng)頁的布局圖（手繪）個人主頁導航條文字圖片⑷準備的素材：背景圖片：網(wǎng)絡下載第三章站點的建立及頁面制作1.站點建立⑴打開：“窗口”下的“新建站點”⑵按“下一步⑶單擊“下一步”⑷單擊“下一步”（出現(xiàn)“你如何連接到遠程服務器”時選擇“無”）⑸單擊完成⑴⑵⑶⑷⑸2.各個頁面的制作頁面圖㈠首頁的頁面：制作過程:1創(chuàng)建一個一個新的文件2添加背景圖片字體為行文楷體字號363添加表格制作導航欄使整體美觀大方主頁的設定：點擊“index.html”文件，右擊“設為首頁”㈡日志的頁面：制作過程1添加背景圖片2文字的添加字號24字體行文楷體字體顏色是黃色3調整整體的布局使其美觀㈢相冊的頁面：制作過程1添加背景圖片和我的圖片2布局整體㈣個人檔的頁面：制作過程1添加背景圖片和文字2整體布局㈤留言板的頁面：制作過程：1添加背景圖片和文字2加入文本域和按鈕（工具欄下的“插入”--“表單”--文本域和按鈕3布局整體第四章注冊域名、租用免費空間一、搜索一個提供免費空間的網(wǎng)頁二、注冊會員第五章上傳發(fā)布上傳工具：FTP工具、FlashFXPFTP上傳過程：申請空間后，用FTP軟件上傳！比如CuteFtp，網(wǎng)頁做好了，接下來最重要的就是上傳網(wǎng)頁啦！也只有上傳網(wǎng)頁到網(wǎng)絡上，其他的網(wǎng)友才能瀏覽得您的網(wǎng)頁，而且，上傳之后，也才能發(fā)現(xiàn)，您設計的網(wǎng)頁是否有問題。上傳的方式有千百種，這里我介紹最常用的一種，至于其他的上傳方式，只有靠自己去理解啦！1.首先來解釋一下，什么叫做『上傳』（已經知道的就快快跳過去吧！）要講到這個就不能講一下FTP這東東。簡單來說，F(xiàn)TP是一種網(wǎng)絡上的文件傳輸服務（或者說是界面啦、規(guī)格、都行啦！聽得懂就好），我們常常在下載軟件，用到的就是FTP的文件傳輸服務。2.所謂上傳呢！其實就是FTP的其中一個功能，我們既然能夠將文件從網(wǎng)絡上抓下來，那么當然也可以把文件從自己的電腦，送到服務器上去啊！（嚴格說起來，是送到另外一臺電腦...），因此，簡而言之，上傳就是把你電腦中的資料，通過軟件傳輸?shù)骄W(wǎng)絡的服務器上。3.FTP軟件一大堆，其中常用的是CuteFTP.二、設置CuteFTP1.請先進行安裝...。然后，按兩下打開CuteFTP。你就會看到如下的畫面：2.這是告訴你，使用期限已經過啦！快快注冊吧！不過，按下OK其實還是可以用的，不過去注冊一下應該會比較好一點。（對了！剛裝好是不會出現(xiàn)這信息的。）3.按下OK后，會進入一個『FTP站設置』的窗口，我們先看看左上角，將鼠標移到『FTPsites』的地方，如圖：4.然后我們按下它下面的那一排按鈕中的『Addsites』，告訴電腦我們要新增一個主機站（這個站就是我們要將網(wǎng)頁上傳的地方），如圖：5.按下『Addsites』之后，我們便會看到一個設置窗口，這個窗口主要是要讓我們來設置我們要上傳主機的詳細資料，就以本站的例子來說好了：標號1：這一格只是讓你替服務器（就是你要放上網(wǎng)頁的電腦主機啦?。┤€名稱罷了，隨您怎么填都可以，像工友就自行取為『首頁制作百寶箱』，下次再進入CuteFTP時，就直接選取『首頁制作百寶箱』就可以直接連到該網(wǎng)頁服務器器，直不需要再輸入一堆繁雜的設置了。標號2：這一格非常重要，須填上伺服器的所在位置，假設你的服務器位置在中研院，所以就填上『.tw』，或許有人會問，那我到底要填上什么呢？這...我也不知道，我怎么會知道您網(wǎng)頁放在哪呢？如果您是線上申請的免費網(wǎng)址，那么該網(wǎng)站應該都會告訴您要上傳到哪里（也就是一連串的主機位置），不然，就問問讓您放網(wǎng)頁的服務器管理員吧！對了！在填的時候千萬別加上ftp://.....orhttp://.....這些都是無法執(zhí)行的。標號3：通常連通主機后，服務器會詢問您的帳號，這一格就填上您進入服務器的帳號即可。標號4：檢查完帳號后就會要求輸入密碼，這一格就是要您填密碼啦！注意喔！這里所謂的帳號密碼是指『進入該服務器的帳號密碼』而非，您撥接上網(wǎng)的帳號密碼，通常服務器管理員都會通知您帳號密碼是多少，要不然就是當初您在申請免費網(wǎng)址時自行設置的那一組帳號密碼就是了。標號5：進入服務器方式設置，通常是『Normal』，也就是說需要帳號密碼才進得去，如果選第二項就表示任何人都可以進去，那事情就大條啦！標號6：文件上傳模式設置，選第三項『Auto-Detect』比較方便，它會自行探測文件類型做出最適合的上傳方式。標號7：嗯...這格我就較不了解了...反正選『Auto-Detect』這一項準沒錯。標號8：設置服務器端的路徑，設不設都無所謂啦！有設的話，以后再進入時，就不用切換一堆路徑，而可以直達你要上傳的目錄。所以要設置的話，先決條件是，您要知道您放網(wǎng)頁的路徑及目錄。標號9：設置自己電腦的內部目錄，像我就設置C:www，它只要一連通服務器，便會自行切換到C:www這目錄，工友就可以不用在那里找目錄而可以省下一些時間。OK！設好按下確定之后，你應該可以看見剛剛設置的服務器名稱出現(xiàn)在右上的窗口中，如圖：而它的下方會顯現(xiàn)其網(wǎng)絡位置如圖：看到之后便表示您設置成功了（但不代表你設置的值是正確的，要連得通才算數(shù)）下次再執(zhí)行CuteFTP時，就可以直接選這里來進入了。最后一個步驟，按下『Connect』連接，就行啦！接下來就是期待接通了！三、連接服務器接下來映入眼的就是整個CuteFTP的使用界面，上面是工具列，工具列下方是狀態(tài)列，左下是自己電腦的目錄，右下是服務器的目錄?，F(xiàn)在就先說說工具列：以上是左半段。以下是右半段，其實，只要認識幾個圖標就可以了，其他的并不常用。最重要的就是『往上』『往下』的兩個箭頭圖標，往上就是上傳，往下就是下載。簡單吧！整個畫面看起來如下圖：OK！進入最重要的主題：『如何上傳文件』！首先，先確定已經連通服務器，這只要看看狀態(tài)列就知道了，如上圖的狀態(tài)列所示，就是連通后的樣子。切換到適當目錄。先看看左下，這是自己電腦的目錄。由于工友所有的網(wǎng)頁文件都放在C:www的目錄下，所以，先要切換到C:www中。由于工友當初有設置內部目錄是C:www所以，一連通后，左下窗口便會出現(xiàn)C:www的內容。右下窗口是您放網(wǎng)頁在服務器的目錄位置，工友的網(wǎng)站是放在服務器的newhd/home/tad/public_html/中，所以就自行切換到您放網(wǎng)頁的目錄吧！做完這兩個動作，上傳大業(yè)已經完成大半了！接下來，回到左下窗口選取欲上傳的文件，如圖：（按住Shift鍵再選取文件可以連續(xù)選取多個文件，按住Ctrl鍵再選取文件可以選取多個不連續(xù)文件）選取完后，按下工具列的『往上』鍵，就可以啦！如圖：ftp軟件有很多種，使用方法大同小異。同時，他還有下載的功能，你可以利用這一點從服務器上下載軟件，速度比其他方法快多了。推廣及后期維護7.1推廣的各種方法1口頭告訴同學2上傳到博客、QQ空間等各種通訊工具7.2后期維護的意義1有助于最新動態(tài)的了解2有利于漏洞的修補3網(wǎng)站建設完成后，在實際的應用中還可能遇到很多問題，不符合用戶體驗。如：在不同瀏覽器下運行不正常、頁面某些地方的小改動、網(wǎng)站打不開、網(wǎng)站打開速度很慢等。這些都需要去維護，使之更符合用戶操作習慣。結束語（心得）不知不覺,我的畢業(yè)設計已經做完,回顧這一段日子,真的令我體會很深,也學會很多東西,懂得很多以前不懂的東西,也明白了一些事情.

自從第一天接觸網(wǎng)頁制作課程,我以下定決心要把網(wǎng)頁這門課學好,做出一個優(yōu)秀的網(wǎng)站.所以我時