網(wǎng)頁(yè)制作課程設(shè)計(jì)

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

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