用DreamWeaver打造留言板
1000元免費加油卡，點擊就送很酷很個性 我的QQ空間留言最最炫2008-06-07 作者： 來源：Cfan整理
·
摳圖——孔雀美女·
膽小者勿進(jìn)·
教你打造蝶蝎美人·
正在消失的美女·
親手給MM加幅眼鏡·
合成絕美的天上人間·
古堡中的夢幻女孩·
合成密林深處的公主·
墻壁上的剝落女孩·
森林里的蝴蝶公主在這一課，我們首先討論一下Dreamweaver MX的工作環(huán)境以及如何在我們的本地pws服務(wù)器建立站點和初步管理站點的文件。
一、Dreamweaver MX的工作環(huán)境
在 Windows 中首次啟動 Dreamweaver MX時，會出現(xiàn)一個對話框，您可以從中選擇一種工作區(qū)布局。如果您以后改變了主意，可以使用“參數(shù)選擇”對話框切換到一種不同的工作區(qū)。如圖1是選擇工作區(qū)布局的對話框。
圖1 選擇工作區(qū)布局對話框
●Dreamweaver MX工作區(qū)是一個使用 MDI（多文檔界面）的集成工作區(qū)，其中全部“文檔”窗口和面板被集成在一個更大的應(yīng)用程序窗口中，并將面板組?？吭谟覀?cè)。Dreamweaver MX建議大多數(shù)用戶使用它。本教程也使用的是這種工作區(qū)模式。
●HomeSite/代碼編寫者樣式的Dreamweaver MX工作區(qū)是同樣的集成工作區(qū)，但是將面板組?？吭谧髠?cè)，“文檔”窗口在默認(rèn)情況下顯示“代碼”視圖。Dreamweaver MX建議HomeSite或ColdFusion Studio用戶以及其他需要使用熟悉的工作區(qū)布局的手工編碼人員使用這種布局。若要選擇這種布局，請選擇“Dreamweaver MX 工作區(qū)”選項，然后選擇“HomeSite/代碼編寫者樣式”選項。
●Dreamweaver 4工作區(qū)是一種與 Dreamweaver 4中所用布局相類似的工作區(qū)布局，其中每個文檔都位于自己的獨立浮動窗口中。面板組停靠在一起，但并不是停靠在一個更大的應(yīng)用程序窗口中。僅建議喜歡使用更熟悉的工作區(qū)的 Dreamweaver 4 用戶使用這種布局。
▲教程副頁：Dreamweaver MX工作環(huán)境簡介頁面
二、建立第一個站點（無服務(wù)器端腳本的普通靜態(tài)站點）
下面我們建立一個沒有服務(wù)器端腳本的普通靜態(tài)站點，具體建立步驟如下：
1、選擇“站點/新建站點”。（即從“站點”菜單中選擇“新建站點”命令。）即會出現(xiàn)“站點定義”對話框。
2、如果對話框顯示的是“高級”選項卡，則單擊“基本”。出現(xiàn)“站點定義向?qū)?#8221;的第一個屏幕，要求您為站點輸入一個名稱。
3、在文本框中，輸入一個名稱以在Dreamweaver中標(biāo)識該站點。該名稱可以是任何所需的名稱。例如，您可以將站點命名為“mysit”。
如圖2所示。
圖2 建站向?qū)А军c起名
4、單擊“下一步”進(jìn)入下一個步驟。出現(xiàn)向?qū)У南乱粋€屏幕，詢問您是否要使用服務(wù)器技術(shù)。選擇“否”選項指示目前該站點是一個靜態(tài)站點，沒有動態(tài)頁。如圖3所示。
圖3 建站向?qū)Аo態(tài)和動態(tài)網(wǎng)站選擇
5、單擊“下一步”進(jìn)入下一個步驟。出現(xiàn)向?qū)У南乱粋€屏幕，詢問您要如何使用您的文件，如圖4所示。
●選擇標(biāo)有“編輯我的計算機(jī)上的本地拷貝，完成后再上傳到服務(wù)器（推薦）”的選項。
●文本框允許您在本地磁盤上指定一個文件夾，Dreamweaver 將在其中存儲站點文件的本地版本。若要指定一個準(zhǔn)確的文件夾名稱，通過瀏覽指定要比鍵入路徑更加簡便易行，因此請單擊該文本框旁邊的文件夾圖標(biāo)。隨即會出現(xiàn)“選擇站點的本地根文件夾”對話框，在對話框中瀏覽到本地磁盤上可以存放所有站點的文件夾。然后單擊“確定”。
圖4 建站向?qū)Аx站點文件的存儲位置
6、單擊“下一步”進(jìn)入下一個步驟。出現(xiàn)向?qū)У南乱粋€屏幕，詢問您如何連接到遠(yuǎn)程服務(wù)器。從彈出式菜單中選擇“無”。
▲如果你有遠(yuǎn)程的FTP服務(wù)器空間，在這一步驟可以按照如圖5所示進(jìn)行連接到遠(yuǎn)程服務(wù)器的設(shè)置。
圖5 建站向?qū)АB接到遠(yuǎn)程服務(wù)器的設(shè)置
7、單擊“下一步”進(jìn)入下一個步驟。該向?qū)У南乱粋€屏幕將出現(xiàn)，其中顯示您的設(shè)置概要。單擊“完成”完成設(shè)置。
▲完成站點的建立之后，在文件面板中你會看到如圖6所示的類似結(jié)果（本地視圖）。
圖6 文件面板中的本地視圖
三、用系統(tǒng)模板創(chuàng)建站點的第一個頁面
上面我們利用建站向?qū)?chuàng)建了一個站點，下面我們在這個站點中創(chuàng)建一個頁面。先查看這個頁面的效果：lesson1_mo.htm
這個頁面是用Dreamweaver MX的系統(tǒng)模板創(chuàng)建的，以下是創(chuàng)建步驟：
1、執(zhí)行“文件/新建”命令，彈出“新建文檔對話框”。在此對話框中選擇“常規(guī)/頁面設(shè)計/文本：文章C”，然后單擊“創(chuàng)建”按鈕，如圖7是示意圖。
圖7 利用模板創(chuàng)建新文檔示意圖
2、現(xiàn)在我們在頁面編輯區(qū)得到一個新頁面，并且頁面中已包含了一些模板內(nèi)容。這個頁面很簡單，包括一些文本和一個圖像。
我們首先將那些英文文本換成一些中文文本（你可以將教程中示例頁面中的文本復(fù)制過來）。
3、對圖像進(jìn)行處理。我們在頁面中看到的是一個圖像占位符，下面我們要用一個具體的圖像替換它。單擊這個圖像占位符，并展開相應(yīng)的占位符屬性面板，如圖8所示。
●如果圖像已經(jīng)創(chuàng)建好，就在占位符屬性面板中的源文件處進(jìn)行設(shè)置。
●如果圖像還沒有創(chuàng)建，就單擊占位符屬性面板中的創(chuàng)建按鈕，在FireworksMX中創(chuàng)建。
圖8 占位符屬性面板
4、在屬性面板中設(shè)置文本的屬性，由于我們的頁面上的文本實際上都是在表格中，所以實際上是設(shè)置表格的單元格屬性，如圖9所示。
圖9 單元格屬性面板
5、關(guān)于圖像和文本的距離的設(shè)置。我們以后在編輯網(wǎng)頁時會經(jīng)常遇到圖像和文本之間的距離問題，如圖10所示。我們可以先選中圖像，然后在圖像屬性面板中設(shè)置圖像和文本之間的距離，如圖11所示。
圖10 圖像和文本間的距離示意圖 圖11 設(shè)置圖像和文本距離
6、保存文件。執(zhí)行“文件/保存”命令，將文檔保存到我們站點文件夾中。
如果我們文件的存儲路徑是:c:\Inetpub\wwwroot\mysite1\lesson1_mo.htm，則可以在瀏覽器中用以下地址訪問它：http://localhost/mysite1/lesson1_mo.htm或者
http://127.0.0.1/mysite1/lesson1_mo.htm。
