【正文】 用DreamWeaver打造留言板第一課在這一課，我們首先討論一下Dreamweaver MX的工作環(huán)境以及如何在我們的本地pws服務(wù)器建立站點(diǎn)和初步管理站點(diǎn)的文件?！　　　∫弧reamweaver MX的工作環(huán)境　　　在 Windows 中首次啟動(dòng) Dreamweaver MX時(shí)，會(huì)出現(xiàn)一個(gè)對(duì)話(huà)框，您可以從中選擇一種工作區(qū)布局。如果您以后改變了主意，可以使用“參數(shù)選擇”對(duì)話(huà)框切換到一種不同的工作區(qū)。如圖1是選擇工作區(qū)布局的對(duì)話(huà)框?！　　　　　D1 選擇工作區(qū)布局對(duì)話(huà)框　　　●Dreamweaver MX工作區(qū)是一個(gè)使用 MDI（多文檔界面）的集成工作區(qū)，其中全部“文檔”窗口和面板被集成在一個(gè)更大的應(yīng)用程序窗口中，并將面板組?？吭谟覀?cè)。Dreamweaver MX建議大多數(shù)用戶(hù)使用它。本教程也使用的是這種工作區(qū)模式?！　　馠omeSite/代碼編寫(xiě)者樣式的Dreamweaver MX工作區(qū)是同樣的集成工作區(qū)，但是將面板組?？吭谧髠?cè)，“文檔”窗口在默認(rèn)情況下顯示“代碼”視圖。Dreamweaver MX建議HomeSite或ColdFusion Studio用戶(hù)以及其他需要使用熟悉的工作區(qū)布局的手工編碼人員使用這種布局。若要選擇這種布局，請(qǐng)選擇“Dreamweaver MX 工作區(qū)”選項(xiàng)，然后選擇“HomeSite/代碼編寫(xiě)者樣式”選項(xiàng)。　　●Dreamweaver 4工作區(qū)是一種與 Dreamweaver 4中所用布局相類(lèi)似的工作區(qū)布局，其中每個(gè)文檔都位于自己的獨(dú)立浮動(dòng)窗口中。面板組?？吭谝黄?，但并不是?？吭谝粋€(gè)更大的應(yīng)用程序窗口中。僅建議喜歡使用更熟悉的工作區(qū)的 Dreamweaver 4 用戶(hù)使用這種布局?！　　坛谈表?yè)：Dreamweaver MX工作環(huán)境簡(jiǎn)介頁(yè)面　　　二、建立第一個(gè)站點(diǎn)（無(wú)服務(wù)器端腳本的普通靜態(tài)站點(diǎn)）　　　下面我們建立一個(gè)沒(méi)有服務(wù)器端腳本的普通靜態(tài)站點(diǎn)，具體建立步驟如下：　　選擇“站點(diǎn)/新建站點(diǎn)”。（即從“站點(diǎn)”菜單中選擇“新建站點(diǎn)”命令。）即會(huì)出現(xiàn)“站點(diǎn)定義”對(duì)話(huà)框。 　　如果對(duì)話(huà)框顯示的是“高級(jí)”選項(xiàng)卡，則單擊“基本”。出現(xiàn)“站點(diǎn)定義向?qū)А钡牡谝粋€(gè)屏幕，要求您為站點(diǎn)輸入一個(gè)名稱(chēng)。 　　在文本框中，輸入一個(gè)名稱(chēng)以在Dreamweaver中標(biāo)識(shí)該站點(diǎn)。該名稱(chēng)可以是任何所需的名稱(chēng)。例如，您可以將站點(diǎn)命名為“mysit”?！　∪鐖D2所示。 　　　　　　圖2 建站向?qū)А军c(diǎn)起名　　　單擊“下一步”進(jìn)入下一個(gè)步驟。出現(xiàn)向?qū)У南乱粋€(gè)屏幕，詢(xún)問(wèn)您是否要使用服務(wù)器技術(shù)。選擇“否”選項(xiàng)指示目前該站點(diǎn)是一個(gè)靜態(tài)站點(diǎn)，沒(méi)有動(dòng)態(tài)頁(yè)。如圖3所示?！　　　　　D3 建站向?qū)Аo態(tài)和動(dòng)態(tài)網(wǎng)站選擇　　　單擊“下一步”進(jìn)入下一個(gè)步驟。出現(xiàn)向?qū)У南乱粋€(gè)屏幕，詢(xún)問(wèn)您要如何使用您的文件，如圖4所示?！　　襁x擇標(biāo)有“編輯我的計(jì)算機(jī)上的本地拷貝，完成后再上傳到服務(wù)器（推薦）”的選項(xiàng)。　　●文本框允許您在本地磁盤(pán)上指定一個(gè)文件夾，Dreamweaver 將在其中存儲(chǔ)站點(diǎn)文件的本地版本。若要指定一個(gè)準(zhǔn)確的文件夾名稱(chēng)，通過(guò)瀏覽指定要比鍵入路徑更加簡(jiǎn)便易行，因此請(qǐng)單擊該文本框旁邊的文件夾圖標(biāo)。隨即會(huì)出現(xiàn)“選擇站點(diǎn)的本地根文件夾”對(duì)話(huà)框，在對(duì)話(huà)框中瀏覽到本地磁盤(pán)上可以存放所有站點(diǎn)的文件夾。然后單擊“確定”?！　　　　　D4 建站向?qū)Аx站點(diǎn)文件的存儲(chǔ)位置　　　單擊“下一步”進(jìn)入下一個(gè)步驟。出現(xiàn)向?qū)У南乱粋€(gè)屏幕，詢(xún)問(wèn)您如何連接到遠(yuǎn)程服務(wù)器。從彈出式菜單中選擇“無(wú)”?！　　绻阌羞h(yuǎn)程的FTP服務(wù)器空間，在這一步驟可以按照如圖5所示進(jìn)行連接到遠(yuǎn)程服務(wù)器的設(shè)置。　　　　　　圖5 建站向?qū)АB接到遠(yuǎn)程服務(wù)器的設(shè)置　　　單擊“下一步”進(jìn)入下一個(gè)步驟。該向?qū)У南乱粋€(gè)屏幕將出現(xiàn)，其中顯示您的設(shè)置概要。單擊“完成”完成設(shè)置?！　　瓿烧军c(diǎn)的建立之后，在文件面板中你會(huì)看到如圖6所示的類(lèi)似結(jié)果（本地視圖）。 　　　　　　圖6 文件面板中的本地視圖　　　三、用系統(tǒng)模板創(chuàng)建站點(diǎn)的第一個(gè)頁(yè)面　　上面我們利用建站向?qū)?chuàng)建了一個(gè)站點(diǎn)，下面我們?cè)谶@個(gè)站點(diǎn)中創(chuàng)建一個(gè)頁(yè)面。先查看這個(gè)頁(yè)面的效果：　　這個(gè)頁(yè)面是用Dreamweaver MX的系統(tǒng)模板創(chuàng)建的，以下是創(chuàng)建步驟：　　執(zhí)行“文件/新建”命令，彈出“新建文檔對(duì)話(huà)框”。在此對(duì)話(huà)框中選擇“常規(guī)/頁(yè)面設(shè)計(jì)/文本：文章C”，然后單擊“創(chuàng)建”按鈕，如圖7是示意圖?！　　　　　D7 利用模板創(chuàng)建新文檔示意圖　　　現(xiàn)在我們?cè)陧?yè)面編輯區(qū)得到一個(gè)新頁(yè)面，并且頁(yè)面中已包含了一些模板內(nèi)容。這個(gè)頁(yè)面很簡(jiǎn)單，包括一些文本和一個(gè)圖像?！　∥覀兪紫葘⒛切┯⑽奈谋緭Q成一些中文文本（你可以將教程中示例頁(yè)面中的文本復(fù)制過(guò)來(lái)）?！　?duì)圖像進(jìn)行處理。我們?cè)陧?yè)面中看到的是一個(gè)圖像占位符，下面我們要用一個(gè)具體的圖像替換它。單擊這個(gè)圖像占位符，并展開(kāi)相應(yīng)的占位符屬性面板，如圖8所示?！　　袢绻麍D像已經(jīng)創(chuàng)建好，就在占位符屬性面板中的源文件處進(jìn)行設(shè)置。　　●如果圖像還沒(méi)有創(chuàng)建，就單擊占位符屬性面板中的創(chuàng)建按鈕，在FireworksMX中創(chuàng)建。　　　　　　圖8 占位符屬性面板　　　在屬性面板中設(shè)置文本的屬性，由于我們的頁(yè)面上的文本實(shí)際上都是在表格中，所以實(shí)際上是設(shè)置表格的單元格屬性，如圖9所示?！　　　　　D9 單元格屬性面板　　關(guān)于圖像和文本的距離的設(shè)置。我們以后在編輯網(wǎng)頁(yè)時(shí)會(huì)經(jīng)常遇到圖像和文本之間的距離問(wèn)題，如圖10所示。我們可以先選中圖像，然后在圖像屬性面板中設(shè)置圖像和文本之間的距離，如圖11所示?！　?　　　　圖10 圖像和文本間的距離示意圖　圖11 設(shè)置圖像和文本距離　　　保存文件。執(zhí)行“文件/保存”命令，將文檔保存到我們站點(diǎn)文件夾中?！　∪绻覀兾募拇鎯?chǔ)路徑是:c:\Inetpub\root\mysite1\，則可以在瀏覽器中用以下地址訪問(wèn)它：://localhost/mysite1/。 第二課經(jīng)過(guò)上一課的學(xué)習(xí)，我們對(duì)Dreamweaver MX的工作環(huán)境以及如何創(chuàng)建一個(gè)站點(diǎn)和編輯頁(yè)面文檔有了一個(gè)初步的認(rèn)識(shí)。從這次課開(kāi)始我們要系統(tǒng)的來(lái)學(xué)習(xí)如何創(chuàng)建一個(gè)留言板站點(diǎn)。通過(guò)這個(gè)留言板站點(diǎn)的建立，我們要討論在Dreamweaver MX中經(jīng)常用到的一些工具和命令。　　　　一、創(chuàng)建留言板動(dòng)態(tài)站點(diǎn)　　　上一次課我們建立了一個(gè)靜態(tài)的站點(diǎn)，這一課我們首先建立一個(gè)包含服務(wù)器端腳本（ASP）的動(dòng)態(tài)站點(diǎn)。以下是創(chuàng)建步驟：　　執(zhí)行“站點(diǎn)/新建站點(diǎn)”命令，得到建站向?qū)В诘?步中，給你的站點(diǎn)起個(gè)名字。比如是：liuyanban?！　螕粝乱徊剑谙乱粋€(gè)步驟畫(huà)面中進(jìn)行服務(wù)器腳本技術(shù)的有關(guān)設(shè)置，如圖1所示。 　　　　　　圖1 建站向?qū)А?wù)器腳本技術(shù)設(shè)置　　單擊下一步，進(jìn)入到建站向?qū)У南乱粋€(gè)畫(huà)面，這個(gè)步驟是關(guān)于站點(diǎn)的URL的內(nèi)容，如圖2所示?！　　　　　D2 建站向?qū)А军c(diǎn)URL　　以下步驟按照建站向?qū)У哪J(rèn)設(shè)置。最后單擊完成按鈕即可?！　《?、在站點(diǎn)中創(chuàng)建資源文件夾　　▲在創(chuàng)建了本地站點(diǎn)之后，如果您已為該站點(diǎn)創(chuàng)建了資源（圖像、Flash動(dòng)畫(huà)或其他內(nèi)容片斷），則將這些資源放置在本地站點(diǎn)根文件夾內(nèi)的一個(gè)文件夾中。那么當(dāng)您要向頁(yè)中添加內(nèi)容時(shí)，這些資源將隨時(shí)可用。　　　 現(xiàn)在我們就在留言板站點(diǎn)根文件夾中創(chuàng)建新文件夾，并把相應(yīng)的資源文件復(fù)制到資源文件夾中。　　假設(shè)我們的留言板站點(diǎn)的根文件夾路徑為：c:\Inetpub\root\liuyanban\?！　〈蜷_(kāi)站點(diǎn)面板，展示留言板站點(diǎn)的本地視圖，右鍵單擊留言板站點(diǎn)，在彈出的快捷菜單中執(zhí)行“新建文件夾”命令。如圖3所示?！　“凑者@種方法，先創(chuàng)建兩個(gè)文件夾：images（用來(lái)放圖像文件）和swf（用來(lái)放Flash動(dòng)畫(huà)）?！　　　?　　圖3 在站點(diǎn)視圖創(chuàng)建新文件夾　　▲請(qǐng)下載以下資源，并把它們放在相應(yīng)的文件夾中。在站點(diǎn)面板中可以象資源管理器一樣管理文件和文件夾?！　　　窳粞园逑到y(tǒng)用戶(hù)頭像圖像(10個(gè)圖像文件)。放在images文件夾中。下載（rar文件）　　　●留言板系統(tǒng)導(dǎo)航條圖像。放在images文件夾中。下載　　　●Flash動(dòng)畫(huà)文件(1個(gè))。放在swf文件夾中。下載　　按照上面的步驟把站點(diǎn)中的資源文件部署好以后，在資源面板中就可以看到我們部署好的相應(yīng)的資源，如圖4所示。我們可以將資源面板中的資源直接拖放到站點(diǎn)文檔中使用?！　　　　　D4 資源面板　　　三、創(chuàng)建留言板站點(diǎn)的第一個(gè)頁(yè)面（文件名：）　　下面我們創(chuàng)建留言板站點(diǎn)的第一個(gè)頁(yè)面，這個(gè)頁(yè)面是個(gè)普通的不包含服務(wù)器腳本的靜態(tài)頁(yè)面。它用來(lái)對(duì)我們的留言板系統(tǒng)進(jìn)行說(shuō)明?！　?zhí)行“文件/新建”命令，在彈出的新建文檔對(duì)話(huà)框中選擇“基本頁(yè)/html”，然后單擊“創(chuàng)建”按鈕，如圖5所示?！　　　　　D5 新建基本html文檔　　　編輯頁(yè)面文檔（頁(yè)面效果參考）　　●輸入頁(yè)面標(biāo)題“留言板系統(tǒng)說(shuō)明”。如圖6所示。　　　　　　圖6 定義頁(yè)面標(biāo)題　　●輸入頁(yè)面文字內(nèi)容并定義它們的字體、顏色等屬性。具體的屬性設(shè)置可以在屬性面板中實(shí)現(xiàn)?！　　耜P(guān)于連續(xù)空格的輸入：執(zhí)行“編輯/參數(shù)選擇”命令，在彈出的參數(shù)選擇對(duì)話(huà)框中選擇“允許多個(gè)連續(xù)空格”復(fù)選框，如圖7所示?！　　　　　D7 參數(shù)選擇——允許多個(gè)連續(xù)空格　　　●對(duì)于中文用戶(hù)來(lái)說(shuō)，我們習(xí)慣于中文的段落格式，比如段前空兩格?？梢赃@樣實(shí)現(xiàn)：將中文輸入法切換到“全角”方式，然后連續(xù)按兩次空格，完了以后再切換到“半角”方式進(jìn)行文字內(nèi)容的輸入?！　　耜P(guān)于段落：每按一次Enter（回車(chē)）鍵就代表一個(gè)新段落的開(kāi)始。如果你想在段落中換行，請(qǐng)按“Shift+Enter”組合鍵?！　　耜P(guān)于圖像的插入，我們可以用以下兩種方法中的任意一種：　?、賹⒐鈽?biāo)定位到要插入圖像的位置。用鼠標(biāo)單擊“插入欄”中“常用”標(biāo)簽下的圖像按鈕，如圖8所示。然后找到要插入的圖像文件?！　　　　　D8 插入圖像和水平線(xiàn)　　②打開(kāi)資源面板，單擊圖像資源類(lèi)別，選擇要插入的具體圖像資源，用鼠標(biāo)拖放到插入處。　　●關(guān)于水平線(xiàn)的插入，如圖8所示。我們還可以在屬性面板設(shè)置它的簡(jiǎn)單屬性，但不能直接在屬性面板設(shè)置它的顏色?！　〔迦氲乃骄€(xiàn)默認(rèn)是灰色的，要更改它的顏色，我們需要這樣操作：　　選中水平線(xiàn)，切換到代碼視圖。將光標(biāo)定位在br標(biāo)簽后，單擊空格鍵，這時(shí)會(huì)彈出一個(gè)下拉菜單，如同9所示，我們?cè)僭谄渲须p擊color屬性標(biāo)簽，這樣就會(huì)彈出調(diào)色板，在其中選擇你需要的顏色就可以了?！　　　　　D9 在代碼視圖設(shè)置水平線(xiàn)顏色屬性　　　保存頁(yè)面文檔。執(zhí)行“文件/保存”命令，把文檔保存到站點(diǎn)的根目錄下。文件名：。只須輸入主文件名 shuoming 就可以了，擴(kuò)展名是系統(tǒng)自動(dòng)加上的。第三課本次課開(kāi)始我們要設(shè)計(jì)留言板的主頁(yè)面了。復(fù)雜的頁(yè)面一般都要先用表格布局，我們就從留言板主頁(yè)面的表格布局開(kāi)始學(xué)習(xí)。除了表格布局，利用層布局頁(yè)面也是一種選擇。但層的兼容性和可控制性就比表格差多了，本次課也要討論Dreamweaver MX中有關(guān)層布局，以及層和表格相互轉(zhuǎn)換的知識(shí)?！　∈紫茸屛覀兿瓤纯戳粞园逭军c(diǎn)主頁(yè)面將來(lái)大概是個(gè)什么摸樣。單擊這里打開(kāi)頁(yè)面效果，具體設(shè)計(jì)步驟如下：　　　　創(chuàng)建主頁(yè)面新文檔（）　　　這個(gè)主頁(yè)面將來(lái)是個(gè)包含ASP腳本的動(dòng)態(tài)頁(yè)面。所以它的類(lèi)型是動(dòng)態(tài)腳本頁(yè)面文檔，文件擴(kuò)展名是asp。你可以選擇以下兩種方法中的任意一種創(chuàng)建它：　　●執(zhí)行“文件/新建”命令，在彈出的新建文檔對(duì)話(huà)框中做如圖1所示的操作。保存文檔時(shí)，文件命名為main。 　　　　　　圖1 新建ASP VBScript動(dòng)態(tài)文檔　　●打開(kāi)站點(diǎn)面板，在留言板站點(diǎn)本地視圖下面的窗口中右鍵單擊站點(diǎn)名，在彈出的快捷菜單中執(zhí)行“新建文件”命令，然后將文件名的主文件名改為main?！　　　?chuàng)建表格　　在Dreamweaver MX中創(chuàng)建表格有兩種模式，一種是在標(biāo)準(zhǔn)視圖下插入表格，一種是在布局視圖下直接畫(huà)表格?！　　跇?biāo)準(zhǔn)視圖下插入表格：　　“標(biāo)準(zhǔn)”視圖是默認(rèn)的 Dreamweaver MX設(shè)計(jì)視圖。若要在“標(biāo)準(zhǔn)”視圖中創(chuàng)建表格，可以使用“插入表格”命令。Dreamweaver將根據(jù)您在“插入表格”對(duì)話(huà)框中選擇的選項(xiàng)創(chuàng)建一個(gè)表格，如圖2所示?！　　　　　D2 插入表格和定義表格　　　在本例中我們插入兩個(gè)表格：一個(gè)是1行1列，寬度是755像素。另一個(gè)是3行3列，寬度是600像素。　　▲在布局視圖下繪制表格：　　在“布局”視圖中，可以繪制布局單元格或布局表格以定義文檔的設(shè)計(jì)區(qū)域。這給了我們更大的靈活性，想一想在頁(yè)面上畫(huà)表格的滋味吧！　　我們需要在插入欄中切換到布局標(biāo)簽下，并單擊布局視圖，如圖3所示。單擊繪制布局表格或單元格按鈕以后就可以用鼠標(biāo)直接繪制了?！　　　　　D3 布局視圖　　　編輯表格　　通過(guò)合并和拆分單元格以及插入行和列，可以很容易地修改初始表格結(jié)構(gòu)以創(chuàng)建更復(fù)雜的設(shè)計(jì)。我們還可以使表格的邊框變得不可見(jiàn)，然后用表格單元格（在表格中每一行與列的交叉處所創(chuàng)建的框）來(lái)控制 Web頁(yè)中文本和圖像的位置。當(dāng)觀眾在瀏覽器中查看頁(yè)面時(shí)就不會(huì)看到設(shè)計(jì)的基礎(chǔ)結(jié)構(gòu)。這些都是對(duì)表格的編輯。通常情況下，表格編輯在標(biāo)準(zhǔn)視圖下進(jìn)行?！　　耜P(guān)于表格和單元格的選中常有兩種方法：　　①用鼠標(biāo)直接指向表格選中它們。用鼠標(biāo)指向表格的邊框或者是內(nèi)部，根據(jù)鼠標(biāo)的狀態(tài)來(lái)判斷選中整個(gè)表格、某一行還是某個(gè)單元格。　?、谠诒砀裰械娜我庖粋€(gè)單元格單擊鼠標(biāo)，然后在標(biāo)簽檢查器選擇相應(yīng)的標(biāo)簽，以實(shí)現(xiàn)選中表格或者單元格的目的，如圖4所示?！　　　　　D4 通過(guò)標(biāo)簽檢查器選擇表格　　　●關(guān)于表格的尺寸基于百分比還是基于