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

Solutions

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

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

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

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

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

第二步：建立本地站點

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

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

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

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

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

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

圖１

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

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

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

第四步：修改模板更新站點

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

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

Solutions

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

圖

２

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

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

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

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

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

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

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

Ｗｅｂ服務(wù)器

圖４圖３

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

３８

２００５

年第１１期

Solutions

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

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

圖５

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

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

圖６

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

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

圖７

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

因為涉及到安全的問題，圖５中所填寫的都是虛擬數(shù)據(jù)（子目錄是ｆｌｙ２ｓｐｒｉｎｇ，而非ｌｘｆ），本例真正的網(wǎng)址為：ｈｔｔｐ：／／ｗｗｗ．ｎｅｗｈｕａ．ｃｏｍ／ｃｆａｎ／ｆｌｙ２ｓｐｒｉｎｇ／，歡迎大家光臨。

實例２：模板的真面目

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

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

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

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

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

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

　［ＹＹ１０］