Solutions學(xué)會(huì)Ｄｒｅａｍｗｅａｖｅｒ，１小時(shí)做好個(gè)人網(wǎng)站實(shí)例１：一小時(shí)創(chuàng)建個(gè)人網(wǎng)站網(wǎng)站實(shí)際上就是許多個(gè)網(wǎng)頁的集合。個(gè)人網(wǎng)站與商業(yè)網(wǎng)站最大的區(qū)別之一，就是網(wǎng)頁內(nèi)容的規(guī)模大小之分，如果你有時(shí)間和精

Solutions

學(xué)會(huì)Ｄｒｅａｍｗｅａｖｅｒ，１小時(shí)做好個(gè)人網(wǎng)站

實(shí)例１：一小時(shí)創(chuàng)建個(gè)人網(wǎng)站

網(wǎng)站實(shí)際上就是許多個(gè)網(wǎng)頁的集合。個(gè)人網(wǎng)站與商業(yè)網(wǎng)站最大的區(qū)別之一，就是網(wǎng)頁內(nèi)容的規(guī)模大小之分，如果你有時(shí)間和精力，同樣能把個(gè)人網(wǎng)站做得像商業(yè)網(wǎng)站那樣專業(yè)。

第一步：規(guī)劃網(wǎng)站

首先要確定整個(gè)網(wǎng)站的內(nèi)容結(jié)構(gòu)。筆者是一個(gè)“紅迷”，所以想建一個(gè)有關(guān)《紅樓夢(mèng)》的個(gè)人網(wǎng)站，初步確定的子欄目有“夜看紅樓”、“紅樓原文”、“詩情畫意”、“書香之外”。大欄目下還會(huì)有一些小欄目，這里就不一一列舉了。當(dāng)然，你希望建一個(gè)軟件下載站、音樂網(wǎng)站、圖片網(wǎng)站等都可以，本例重點(diǎn)是網(wǎng)站制作的方法而非網(wǎng)站內(nèi)容。

第二步：建立本地站點(diǎn)

１．在開始之前還要?jiǎng)?chuàng)建一個(gè)新的文件夾，用來管理和保存后面將要?jiǎng)?chuàng)建的網(wǎng)頁及各種資源文件，本例是在Ｄ盤下創(chuàng)建了一個(gè)名為ＲｅｄＤｒｅａｍ的文件夾。

２．啟動(dòng)Ｄｒｅａｍｗｅａｖｅｒ?。停亍。玻埃埃矗ㄒ韵潞?jiǎn)稱Ｄｒｅａｍｗｅａｖｅｒ），如果是第一次運(yùn)行它，將會(huì)彈出工作區(qū)設(shè)置窗口，選擇“設(shè)計(jì)者”后單擊“確定”按鈕進(jìn)入主界面（工作區(qū)設(shè)置以后還可以在“編輯→首選參數(shù)→常規(guī)→更改工作區(qū)”中修改）。單擊菜單命令“站點(diǎn)→管理站點(diǎn)”，在打開的對(duì)話框中單擊“新建→站點(diǎn)”，這時(shí)會(huì)顯示出站點(diǎn)定義向?qū)Т翱凇?/p>

３．按照向?qū)崾?，為站點(diǎn)取一個(gè)名稱（本例為：“紅樓逸夢(mèng)”），單擊“下一步”；接下來選擇默認(rèn)的“否，我不想使用服務(wù)器技術(shù)”，單擊“下一步”；接下來選擇“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器”項(xiàng)，并單擊下面的文件夾瀏覽圖標(biāo)，將“您將把文件存儲(chǔ)在計(jì)算機(jī)上的什么位置？”項(xiàng)設(shè)置為前面新建的文件夾，本例中即“Ｄ：＼ＲｅｄＤｒｅａｍ＼”，單擊“下一步”；將“您如何連接到遠(yuǎn)程服務(wù)器”項(xiàng)暫且設(shè)置為“無”（以后還可以修改的），單擊“下一步”、“完成”，返回到管理站點(diǎn)窗口，再單擊“完成”返回主界面（見圖１）。

第三步：巧借模板資源快速建網(wǎng)站

網(wǎng)站要想設(shè)計(jì)得漂亮好看，需要一定美術(shù)功底，這對(duì)一般初學(xué)者來說可能有些難度，我們不妨四兩撥千斤，借用一些現(xiàn)成模板快速創(chuàng)建出網(wǎng)站。

１．首先登錄到ｈｔｔｐ：／／ｗｗｗ．ｍａｃｒｏｍｅｄｉａ．ｃｏｍ／ｓｏｆｔｗａｒｅ／

圖１

ｄｒｅａｍｗｅａｖｅｒ／ｄｏｗｎｌｏａｄ／ｔｅｍｐｌａｔｅｓ／，這個(gè)網(wǎng)頁上列有許多模板，單擊每個(gè)模板下面的Ｐｒｅｖｉｅｗ可以預(yù)覽，單擊Ｄｏｗｎｌｏａｄ后面的ＭＡＣ（適用于蘋果機(jī)）或ＰＣ（適當(dāng)于ＰＣ機(jī)）可下載模板，本例下載的是名為Ｄｅｐａｒｔｍｅｎｔ　ｏｆ?。龋椋螅簦铮颍模校冒婺０澹ㄎ募麨椋海模祝撸裕澹恚穑欤幔簦澹螅撸模澹穑幔颍簦恚澹睿簦椋穑部梢允褂帽疚奶峁┫螺d的素材包中的文件來練習(xí)）。

２．解開下載的壓縮包文件，進(jìn)入其Ｄｅｐａｒｔｍｅｎｔ?。樱幔恚穑欤濉。樱椋簦遄幽夸浿校x里面所有的文件及子文件夾，復(fù)制粘貼到Ｄ：＼ＲｅｄＤｒｅａｍ中，此時(shí)回到Ｄｒｅａｍｗｅａｖｅｒ中，在右側(cè)的文件瀏覽窗格中會(huì)自動(dòng)顯示出剛剛拷貝過來的文件及文件夾來（如果沒有自動(dòng)顯示出來，可按Ｆ５鍵刷新一下即可）。

３．每個(gè)網(wǎng)站都有一個(gè)首頁，不管是誰訪問網(wǎng)站，第一個(gè)看到的總是首頁。首頁文件名一般為ｉｎｄｅｘ．ｈｔｍ，在剛剛拷貝過來的Ｄｅｐａｒｔｍｅｎｔ?。铮妗。龋椋螅簦铮颍鶅?nèi)，會(huì)發(fā)現(xiàn)也有一個(gè)ｉｎｄｅｘ．ｈｔｍ，右擊它，從右鍵菜單中選擇“設(shè)成首頁”即可。接著雙擊ｉｎｄｅｘ．ｈｔｍ在左側(cè)窗口中打開它，此時(shí)按下快捷鍵Ｆ１２在ＩＥ中預(yù)覽一下，不費(fèi)吹灰之力，一個(gè)漂亮的站點(diǎn)就建立完成了，點(diǎn)擊上方導(dǎo)航按鈕可以瀏覽多個(gè)網(wǎng)頁（見圖２）。

第四步：修改模板更新站點(diǎn)

這個(gè)模板里的網(wǎng)頁內(nèi)容雖然很豐富，但它并不是我們所需要的，我們要的只是網(wǎng)頁框架，具體內(nèi)容還得替換成自己的才行。

１．單擊菜單“修改→頁面屬性”（快捷鍵Ｃｔｒｌ＋Ｊ），在打開的頁面屬性對(duì)話框中可以對(duì)網(wǎng)頁進(jìn)行多種設(shè)置，如設(shè)置

Solutions

中（見圖３），按Ｆ５鍵刷新即可看到修改后的效果了。

圖

２

背景圖像、改變背景顏色、設(shè)置文本和鏈接的顏色等。單擊左側(cè)“標(biāo)題／編碼”項(xiàng)，然后可在右側(cè)“標(biāo)題”中輸入網(wǎng)頁的標(biāo)題，如本例中輸入的是“紅樓逸夢(mèng)”，它將出現(xiàn)在網(wǎng)頁瀏覽器的標(biāo)題欄上；將“編碼”設(shè)置為“簡(jiǎn)體中文（ＧＢ２３１２）”。單擊確定后返回主界面。

２．Ｄｒｅａｍｗｅａｖｅｒ是一款所見即所得的網(wǎng)頁編輯器，許多操作與Ｗｏｒｄ比較相似。選取首頁ＷＥＬＣＯＭＥ中的所有文字，刪除后可直接在其中輸入自己想要的內(nèi)容。當(dāng)然，最好的辦法是打開Ｗｏｒｄ文件，選取相關(guān)文章內(nèi)容后按Ｃｔｒｌ＋Ｃ組合鍵復(fù)制，再在Ｄｒｅａｍｗｅａｖｅｒ中按Ｃｔｒｌ＋Ｖ組合鍵粘貼，這樣比較省事。選取文字后，可以在下方“屬性”面板中設(shè)置文字字體、大小、顏色、風(fēng)格等，與Ｗｏｒｄ操作相似，這里就不細(xì)說了。

３．網(wǎng)頁上許多文字是以圖形方式出現(xiàn)的，當(dāng)點(diǎn)擊某一對(duì)象后，如果光標(biāo)變成閃爍的“Ｉ”形狀，則所選對(duì)象是文字；如果對(duì)象周圍出現(xiàn)一個(gè)黑框，并且右下方出現(xiàn)三個(gè)節(jié)點(diǎn)黑塊，那它就是圖形了，拖動(dòng)節(jié)點(diǎn)可調(diào)整圖像的大小。點(diǎn)擊模板網(wǎng)頁上面的“Ｕｎｉｖｅｒｓｉｔｙ　Ｏｆ?。樱铮恚澹鳎瑁澹颍濉睒?biāo)志就會(huì)發(fā)現(xiàn)它實(shí)際上是一個(gè)圖形，顯然，這個(gè)標(biāo)志不符合本例站點(diǎn)的要求，需要修改一下。

４．確保圖形為選中狀態(tài)，然后單擊“屬性”面板上“編輯”右側(cè)的第一個(gè)圖標(biāo)即可調(diào)出相應(yīng)的圖像軟件進(jìn)行編輯了。雖然Ｍａｃｒｏｍｅｄｉａ有專門的網(wǎng)頁圖形處理軟件Ｆｉｒｅｗｏｒｋｓ，不過我相信大多數(shù)人還是喜歡用Ｐｈｏｔｏｓｈｏｐ，可以在“首選參數(shù)”中設(shè)置一下，以便在Ｄｒｅａｍｗｅａｖｅｒ中編輯圖形時(shí)可以隨時(shí)調(diào)出Ｐｈｏｔｏｓｈｏｐ：?jiǎn)螕舨藛巍熬庉嫛走x參數(shù)”，在首選參數(shù)對(duì)話框中點(diǎn)選左側(cè)的“文件類型／編輯器”項(xiàng)，再在右側(cè)點(diǎn)選相應(yīng)的文件擴(kuò)展名，然后單擊“編輯器”上面的“＋”號(hào)打開查找對(duì)話框，找到可執(zhí)行文件Ｐｈｏｔｏｓｈｏｐ．ｅｘｅ后確定，再單擊“設(shè)為主要”即可。本例中將后綴為ｇｉｆ、ｊｐｇ的這兩種主要的網(wǎng)頁圖形格式都設(shè)置為用Ｐｈｏｔｏｓｈｏｐ編輯了。

５．通過Ｄｒｅａｍｗｅａｖｅｒ運(yùn)行Ｐｈｏｔｏｓｈｏｐ后，它會(huì)自動(dòng)打開標(biāo)志圖形，將其中的“Ｕｎｉｖｅｒｓｉｔｙ?。希妗。樱铮恚澹鳎瑁澹颍濉　钡任淖指某伞埃裕瑁澹模颍澹幔怼。铮妗。遥澹洹。茫瑁幔恚猓澹颉　〖t樓逸夢(mèng)”，保存后返回到Ｄｒｅａｍｗｅａｖｅｒ

７．至此，首頁就改造完成了，是不是很漂亮。不過，當(dāng)光標(biāo)從導(dǎo)航按鈕上滑過時(shí)，你會(huì)發(fā)現(xiàn)按鈕又變成英文的了。這是因?yàn)椋@里的每個(gè)按鈕都是由三張圖片構(gòu)成的，正常狀態(tài)、光標(biāo)懸停時(shí)狀態(tài)、單擊時(shí)狀態(tài)會(huì)顯示不同的圖片。前面修改的是正常狀態(tài)的圖片，還需要將鼠標(biāo)?？吭诎粹o上或單擊時(shí)顯示的圖片也改過來。在Ｄｒｅａｍｗｅａｖｅｒ右側(cè)的文件瀏覽窗格中，單擊展開ｎａｖ文件夾，所有按鈕圖形都在這里了，依次雙擊打開圖形修改即可。

第五步：上傳網(wǎng)站文件到

Ｗｅｂ服務(wù)器

圖４圖３

６．原模板網(wǎng)頁上方的四個(gè)導(dǎo)航按鈕及左側(cè)的ＩＭＡＧＥ占位符也都是圖片，依據(jù)上面方法調(diào)用Ｐｈｏｔｏｓｈｏｐ進(jìn)行修改，用自己的圖形代替原有圖形。本例中上面的四個(gè)導(dǎo)航按鈕分別被改為“夜看紅樓”、“紅樓原文”、“詩情畫意”、“書香之外”，左側(cè)的ＩＭＡＧＥ占位符被換成一幅紅樓夢(mèng)圖片及站長(zhǎng)自己寫的題詩了。修改完成后，按Ｆ１２鍵在瀏覽器中預(yù)覽一下，最終效果如圖４所示。

３８

２００５

年第１１期

Solutions

好了，剩下的就是一個(gè)工作量問題了，在文件瀏覽窗格中打開其他網(wǎng)頁文件，依照上面方法進(jìn)行修改即可。網(wǎng)站文件都建好后，當(dāng)然是要傳到網(wǎng)上去了，否則放到自己的硬盤上孤芳自賞多沒意思。

１．單擊菜單“站點(diǎn)→管理站點(diǎn)”命令，點(diǎn)選一個(gè)站點(diǎn)（本例只有一個(gè)站點(diǎn)：“紅樓逸夢(mèng)”），單擊“編輯”按鈕，在打開的向?qū)Т翱谥悬c(diǎn)擊“高級(jí)”標(biāo)簽，再在左側(cè)選擇“遠(yuǎn)程信息”，然后在右側(cè)設(shè)置遠(yuǎn)程服務(wù)器的各項(xiàng)參數(shù)。這些參數(shù)一般在你

圖５

成的網(wǎng)頁，只能在這些可編輯區(qū)域中添加、編輯自己的內(nèi)容，其他地方的內(nèi)容是改不了的。如果想把網(wǎng)頁中某個(gè)部分指定為可編輯區(qū)域，可選中該處元素，或者在文檔窗口狀態(tài)欄的標(biāo)志選擇器中選擇相應(yīng)標(biāo)志（如＜ｔｄ＞、＜ｉｍｇ＞等），然后單擊菜單命令“插入→模板對(duì)象→可編輯區(qū)域”（快捷鍵為Ｃｔｒｌ＋Ａｌｔ＋Ｖ），在彈出對(duì)話框中隨意取一個(gè)名稱，確定即可。

申請(qǐng)Ｗｅｂ服務(wù)器空間的時(shí)候，由網(wǎng)管提供給你的。本例如圖５所示，將“訪問”設(shè)置“ＦＴＰ”后，下面會(huì)顯示出相應(yīng)選項(xiàng)，根據(jù)提示填寫即可。設(shè)置完畢，可先單擊“測(cè)試”按鈕測(cè)試一下，如果一切正常，連續(xù)單擊“確定”按鈕返回即可。

圖６

第三步：如果想刪除可編輯區(qū)域，可右單擊可編輯區(qū)域名稱，再從右鍵菜單中選擇“模板→刪除模板標(biāo)志”即可。修改好后單擊菜單　“文件→保存”命令保存模板，如果已經(jīng)使用此模板創(chuàng)建了多個(gè)網(wǎng)頁，則會(huì)彈出如圖７所示的對(duì)話框，顯示哪些網(wǎng)頁是應(yīng)用了該模板的，是否需要更新為新模板，根據(jù)需要選擇即可。

第四步：模板改好后，就可以使用它創(chuàng)建新網(wǎng)頁了。單擊菜單命令“文件→新建”，在新建文檔窗口“常用”選項(xiàng)卡中是Ｄｒｅａｍｗｅａｖｅｒ內(nèi)置的多個(gè)模板，如使用自己的模板，可單擊“模板”選項(xiàng)卡，選擇ｌａｙｏｕｔ模板，再單擊“創(chuàng)建”，即可創(chuàng)建一個(gè)新網(wǎng)頁，對(duì)新網(wǎng)頁進(jìn)行必要的編輯

圖７

２．單擊菜單“站點(diǎn)→上傳”命令，將彈出一個(gè)對(duì)話框詢問是否包含相關(guān)文件，當(dāng)然選擇“是”了，否則網(wǎng)頁上的圖形會(huì)顯示不出來的。如果文件不多，一會(huì)就能傳完了。其實(shí)也可以不用Ｄｒｅａｍｗｅａｖｅｒ的上傳功能，網(wǎng)站文件制作完成后，使用ＣｕｔｅＦＴＰ或ＦｌａｓｈＦＸＰ之類的上傳工具將所有文件傳到服務(wù)器上也可以。

因?yàn)樯婕暗桨踩膯栴}，圖５中所填寫的都是虛擬數(shù)據(jù)（子目錄是ｆｌｙ２ｓｐｒｉｎｇ，而非ｌｘｆ），本例真正的網(wǎng)址為：ｈｔｔｐ：／／ｗｗｗ．ｎｅｗｈｕａ．ｃｏｍ／ｃｆａｎ／ｆｌｙ２ｓｐｒｉｎｇ／，歡迎大家光臨。

實(shí)例２：模板的真面目

實(shí)例１中多次提到的“模板”，實(shí)際上指的是別人制作好了的現(xiàn)存的網(wǎng)頁，那只是筆者為了敘述方便。而真正的Ｄｒｅａｍｗｅａｖｅｒ模板，則是一些后綴名為ｄｗｔ的文件，它們指定保存在站點(diǎn)Ｔｅｍｐｌａｔｅｓ目錄下面。

模板就是一個(gè)模具，使用它可以快速“拓”出多個(gè)內(nèi)容一模一樣的網(wǎng)頁來，如果網(wǎng)頁上有許多相同的內(nèi)容固定不變（如本例中網(wǎng)站標(biāo)志、導(dǎo)航按鈕、左側(cè)的圖片及題詩等），使用模板就可以省去重復(fù)勞動(dòng)之苦了。

第一步：實(shí)例１所使用的示例文件中已經(jīng)包含了兩個(gè)自定義的模板。在Ｄｒｅａｍｗｅａｖｅｒ主界面右側(cè)的文件瀏覽窗格中，單擊展開Ｔｅｍｐｌａｔｅｓ文件夾，雙擊其中的ｌａｙｏｕｔ．ｄｗｔ模板文件打開它。

第二步：可以像編輯網(wǎng)頁一樣在模板中插入表格、圖形、文字、ＪａｖａＳｃｒｉｐｔ腳本等任何內(nèi)容。不過模板比一般的網(wǎng)頁多出了可編輯區(qū)域、鎖定區(qū)域等概念。如圖６所示，左上角帶有名稱的藍(lán)線框，稱為可編輯區(qū)域，通過模板生

修改后，保存即可（注意：網(wǎng)頁一定要保存在當(dāng)前站點(diǎn)文件夾內(nèi)）。編輯新網(wǎng)頁的過程中，你會(huì)發(fā)現(xiàn)，光標(biāo)移出可編輯區(qū)域時(shí)，就變成Ｓｔｏｐ的圖案，而成內(nèi)容是不可更改的。

Ｄｒｅａｍｗｅａｖｅｒ中要學(xué)的東西還很多，不是三頁的文章能說得完的，有興趣的朋友請(qǐng)繼續(xù)關(guān)注我們的雜志，將會(huì)刊出更多新鮮熱辣的Ｄｒｅａｍｗｅａｖｅｒ使用技巧的。另外，朋友們有什么好建議也請(qǐng)告知我，郵件請(qǐng)發(fā)：ｍｅｄｉａ＠ｃｆａｎ．ｃｏｍ．ｃｎ。

?。郏伲伲保埃?/p>