1、用DreamWeaver打造留言板第一課在這一課，我們首先討論一下Dreamweaver MX的工作環(huán)境以及如何在我們的本地pws服務(wù)器建立站點(diǎn)和初步管理站點(diǎn)的文件。一、Dreamweaver MX的工作環(huán)境在 Windows 中首次啟動(dòng) Dreamweaver MX時(shí)，會(huì)出現(xiàn)一個(gè)對(duì)話框，您可以從中選擇一種工作區(qū)布局。如果您以后改變了主意，可以使用“參數(shù)選擇”對(duì)話框切換到一種不同的工作區(qū)。如圖1是選擇工作區(qū)布局的對(duì)話框。圖1 選擇工作區(qū)布局對(duì)話框Dreamweaver MX工作區(qū)是一個(gè)使用 MDI（多文檔界面）的集成工作區(qū)，其中全部“文檔”窗口和面板被集成在一個(gè)更大的應(yīng)用程序窗口中，并將面板組

2、停靠在右側(cè)。Dreamweaver MX建議大多數(shù)用戶使用它。本教程也使用的是這種工作區(qū)模式。HomeSite/代碼編寫者樣式的Dreamweaver MX工作區(qū)是同樣的集成工作區(qū)，但是將面板組停靠在左側(cè)，“文檔”窗口在默認(rèn)情況下顯示“代碼”視圖。Dreamweaver MX建議HomeSite或ColdFusion Studio用戶以及其他需要使用熟悉的工作區(qū)布局的手工編碼人員使用這種布局。若要選擇這種布局，請(qǐng)選擇“Dreamweaver MX 工作區(qū)”選項(xiàng)，然后選擇“HomeSite/代碼編寫者樣式”選項(xiàng)。Dreamweaver 4工作區(qū)是一種與 Dreamweaver 4中所用布局相類似

3、的工作區(qū)布局，其中每個(gè)文檔都位于自己的獨(dú)立浮動(dòng)窗口中。面板組停靠在一起，但并不是停靠在一個(gè)更大的應(yīng)用程序窗口中。僅建議喜歡使用更熟悉的工作區(qū)的 Dreamweaver 4 用戶使用這種布局。教程副頁(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)，具體建立步驟如下：1、選擇“站點(diǎn)/新建站點(diǎn)”。（即從“站點(diǎn)”菜單中選擇“新建站點(diǎn)”命令。）即會(huì)出現(xiàn)“站點(diǎn)定義”對(duì)話框。 2、如果對(duì)話框顯示的是“高級(jí)”選項(xiàng)卡，則單擊“基本”。出現(xiàn)“站點(diǎn)定義向?qū)А钡牡谝粋€(gè)屏幕，要求您為站點(diǎn)輸入一個(gè)名稱。 3、在文本框中，輸入一

4、個(gè)名稱以在Dreamweaver中標(biāo)識(shí)該站點(diǎn)。該名稱可以是任何所需的名稱。例如，您可以將站點(diǎn)命名為“mysit”。如圖2所示。 圖2 建站向?qū)д军c(diǎn)起名4、單擊“下一步”進(jìn)入下一個(gè)步驟。出現(xiàn)向?qū)У南乱粋€(gè)屏幕，詢問(wèn)您是否要使用服務(wù)器技術(shù)。選擇“否”選項(xiàng)指示目前該站點(diǎn)是一個(gè)靜態(tài)站點(diǎn)，沒(méi)有動(dòng)態(tài)頁(yè)。如圖3所示。圖3 建站向?qū)ъo態(tài)和動(dòng)態(tài)網(wǎng)站選擇5、單擊“下一步”進(jìn)入下一個(gè)步驟。出現(xiàn)向?qū)У南乱粋€(gè)屏幕，詢問(wèn)您要如何使用您的文件，如圖4所示。選擇標(biāo)有“編輯我的計(jì)算機(jī)上的本地拷貝，完成后再上傳到服務(wù)器（推薦）”的選項(xiàng)。文本框允許您在本地磁盤上指定一個(gè)文件夾，Dreamweaver 將在其中存儲(chǔ)站點(diǎn)文件的本地版本。

5、若要指定一個(gè)準(zhǔn)確的文件夾名稱，通過(guò)瀏覽指定要比鍵入路徑更加簡(jiǎn)便易行，因此請(qǐng)單擊該文本框旁邊的文件夾圖標(biāo)。隨即會(huì)出現(xiàn)“選擇站點(diǎn)的本地根文件夾”對(duì)話框，在對(duì)話框中瀏覽到本地磁盤上可以存放所有站點(diǎn)的文件夾。然后單擊“確定”。圖4 建站向?qū)Фx站點(diǎn)文件的存儲(chǔ)位置6、單擊“下一步”進(jìn)入下一個(gè)步驟。出現(xiàn)向?qū)У南乱粋€(gè)屏幕，詢問(wèn)您如何連接到遠(yuǎn)程服務(wù)器。從彈出式菜單中選擇“無(wú)”。如果你有遠(yuǎn)程的FTP服務(wù)器空間，在這一步驟可以按照如圖5所示進(jìn)行連接到遠(yuǎn)程服務(wù)器的設(shè)置。圖5 建站向?qū)нB接到遠(yuǎn)程服務(wù)器的設(shè)置7、單擊“下一步”進(jìn)入下一個(gè)步驟。該向?qū)У南乱粋€(gè)屏幕將出現(xiàn)，其中顯示您的設(shè)置概要。單擊“完成”完成設(shè)置。完成站點(diǎn)

6、的建立之后，在文件面板中你會(huì)看到如圖6所示的類似結(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è)面的效果：lesson1_mo.htm這個(gè)頁(yè)面是用Dreamweaver MX的系統(tǒng)模板創(chuàng)建的，以下是創(chuàng)建步驟：1、執(zhí)行“文件/新建”命令，彈出“新建文檔對(duì)話框”。在此對(duì)話框中選擇“常規(guī)/頁(yè)面設(shè)計(jì)/文本：文章C”，然后單擊“創(chuàng)建”按鈕，如圖7是示意圖。圖7 利用模板創(chuàng)建新文檔示意圖2、現(xiàn)在我們?cè)陧?yè)面編輯區(qū)得到一個(gè)新頁(yè)面，并且頁(yè)面中已包含了一些模板內(nèi)容。這個(gè)頁(yè)面很簡(jiǎn)單，包括一些文本和一個(gè)圖

7、像。我們首先將那些英文文本換成一些中文文本（你可以將教程中示例頁(yè)面中的文本復(fù)制過(guò)來(lái)）。3、對(duì)圖像進(jìn)行處理。我們?cè)陧?yè)面中看到的是一個(gè)圖像占位符，下面我們要用一個(gè)具體的圖像替換它。單擊這個(gè)圖像占位符，并展開(kāi)相應(yīng)的占位符屬性面板，如圖8所示。如果圖像已經(jīng)創(chuàng)建好，就在占位符屬性面板中的源文件處進(jìn)行設(shè)置。如果圖像還沒(méi)有創(chuàng)建，就單擊占位符屬性面板中的創(chuàng)建按鈕，在FireworksMX中創(chuàng)建。圖8 占位符屬性面板4、在屬性面板中設(shè)置文本的屬性，由于我們的頁(yè)面上的文本實(shí)際上都是在表格中，所以實(shí)際上是設(shè)置表格的單元格屬性，如圖9所示。圖9 單元格屬性面板5、關(guān)于圖像和文本的距離的設(shè)置。我們以后在編輯網(wǎng)頁(yè)時(shí)會(huì)經(jīng)常

8、遇到圖像和文本之間的距離問(wèn)題，如圖10所示。我們可以先選中圖像，然后在圖像屬性面板中設(shè)置圖像和文本之間的距離，如圖11所示。 圖10 圖像和文本間的距離示意圖圖11 設(shè)置圖像和文本距離6、保存文件。執(zhí)行“文件/保存”命令，將文檔保存到我們站點(diǎn)文件夾中。如果我們文件的存儲(chǔ)路徑是:c:Inetpubwwwrootmysite1lesson1_mo.htm，則可以在瀏覽器中用以下地址訪問(wèn)它：http:/localhost/mysite1/lesson1_mo.htm或者 HYPERLINK /mysite1/lesson1_mo.htm /mysite1/lesson1_mo.htm。 第二課經(jīng)過(guò)上

9、一課的學(xué)學(xué)習(xí)，我們對(duì)對(duì)Dreammweaveer MX的的工作環(huán)境以以及如何創(chuàng)建建一個(gè)站點(diǎn)和和編輯頁(yè)面文文檔有了一個(gè)個(gè)初步的認(rèn)識(shí)識(shí)。從這次課課開(kāi)始我們要要系統(tǒng)的來(lái)學(xué)學(xué)習(xí)如何創(chuàng)建建一個(gè)留言板板站點(diǎn)。通過(guò)過(guò)這個(gè)留言板板站點(diǎn)的建立立，我們要討討論在Dreeamweaaver MMX中經(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)建步驟：1、執(zhí)行“站點(diǎn)/新建站點(diǎn)”命令，得到建站向?qū)В诘?步中，給你的站點(diǎn)起個(gè)名字。比如是：liuyanban。2、單擊下一步，在下一個(gè)步驟畫面中進(jìn)行服務(wù)器腳本技術(shù)的

10、有關(guān)設(shè)置，如圖1所示。 圖1 建站向?qū)Х?wù)器腳本技術(shù)設(shè)置3、單擊下一步，進(jìn)入到建站向?qū)У南乱粋€(gè)畫面，這個(gè)步驟是關(guān)于站點(diǎn)的URL的內(nèi)容，如圖2所示。圖2 建站向?qū)д军c(diǎn)URL4、以下步驟按照建站向?qū)У哪J(rèn)設(shè)置。最后單擊完成按鈕即可。二、在站點(diǎn)中創(chuàng)建資源文件夾在創(chuàng)建了本地站點(diǎn)之后，如果您已為該站點(diǎn)創(chuàng)建了資源（圖像、Flash動(dòng)畫或其他內(nèi)容片斷），則將這些資源放置在本地站點(diǎn)根文件夾內(nèi)的一個(gè)文件夾中。那么當(dāng)您要向頁(yè)中添加內(nèi)容時(shí)，這些資源將隨時(shí)可用。 現(xiàn)在我們就在留言板站點(diǎn)根文件夾中創(chuàng)建新文件夾，并把相應(yīng)的資源文件復(fù)制到資源文件夾中。1、假設(shè)我們的留言板站點(diǎn)的根文件夾路徑為：c:Inetpubwwwroo

11、tliuyanban。2、打開(kāi)站點(diǎn)面板，展示留言板站點(diǎn)的本地視圖，右鍵單擊留言板站點(diǎn)，在彈出的快捷菜單中執(zhí)行“新建文件夾”命令。如圖3所示。按照這種方法，先創(chuàng)建兩個(gè)文件夾：images（用來(lái)放圖像文件）和swf（用來(lái)放Flash動(dòng)畫）。 圖3 在站點(diǎn)視圖創(chuàng)建新文件夾請(qǐng)下載以下資源，并把它們放在相應(yīng)的文件夾中。在站點(diǎn)面板中可以象資源管理器一樣管理文件和文件夾。留言板系統(tǒng)用戶頭像圖像(10個(gè)圖像文件)。放在images文件夾中。下載（rar文件）留言板系統(tǒng)導(dǎo)航條圖像。放在images文件夾中。下載Flash動(dòng)畫文件(1個(gè))。放在swf文件夾中。下載按照上面的步驟把站點(diǎn)中的資源文件部署好以后，在資源

12、面板中就可以看到我們部署好的相應(yīng)的資源，如圖4所示。我們可以將資源面板中的資源直接拖放到站點(diǎn)文檔中使用。圖4 資源面板三、創(chuàng)建留言板站點(diǎn)的第一個(gè)頁(yè)面（文件名：shuoming.htm）下面我們創(chuàng)建留言板站點(diǎn)的第一個(gè)頁(yè)面，這個(gè)頁(yè)面是個(gè)普通的不包含服務(wù)器腳本的靜態(tài)頁(yè)面。它用來(lái)對(duì)我們的留言板系統(tǒng)進(jìn)行說(shuō)明。1、執(zhí)行“文件/新建”命令，在彈出的新建文檔對(duì)話框中選擇“基本頁(yè)/html”，然后單擊“創(chuàng)建”按鈕，如圖5所示。圖5 新建基本html文檔2、編輯頁(yè)面文檔（頁(yè)面效果參考）輸入頁(yè)面標(biāo)題“留言板系統(tǒng)說(shuō)明”。如圖6所示。圖6 定義頁(yè)面標(biāo)題輸入頁(yè)面文字內(nèi)容并定義它們的字體、顏色等屬性。具體的屬性設(shè)置可以在屬

13、性面板中實(shí)現(xiàn)。關(guān)于連續(xù)空格的輸入：執(zhí)行“編輯/參數(shù)選擇”命令，在彈出的參數(shù)選擇對(duì)話框中選擇“允許多個(gè)連續(xù)空格”復(fù)選框，如圖7所示。圖7 參數(shù)選擇允許多個(gè)連續(xù)空格對(duì)于中文用戶來(lái)說(shuō)，我們習(xí)慣于中文的段落格式，比如段前空兩格?？梢赃@樣實(shí)現(xiàn)：將中文輸入法切換到“全角”方式，然后連續(xù)按兩次空格，完了以后再切換到“半角”方式進(jìn)行文字內(nèi)容的輸入。關(guān)于段落：每按一次Enter（回車）鍵就代表一個(gè)新段落的開(kāi)始。如果你想在段落中換行，請(qǐng)按“Shift+Enter”組合鍵。關(guān)于圖像的插入，我們可以用以下兩種方法中的任意一種：將光標(biāo)定位到要插入圖像的位置。用鼠標(biāo)單擊“插入欄”中“常用”標(biāo)簽下的圖像按鈕，如圖8所示。然

14、后找到要插入的圖像文件。圖8 插入圖像和水平線打開(kāi)資源面板，單擊圖像資源類別，選擇要插入的具體圖像資源，用鼠標(biāo)拖放到插入處。關(guān)于水平線的插入，如圖8所示。我們還可以在屬性面板設(shè)置它的簡(jiǎn)單屬性，但不能直接在屬性面板設(shè)置它的顏色。插入的水平線默認(rèn)是灰色的，要更改它的顏色，我們需要這樣操作：選中水平線，切換到代碼視圖。將光標(biāo)定位在br標(biāo)簽后，單擊空格鍵，這時(shí)會(huì)彈出一個(gè)下拉菜單，如同9所示，我們?cè)僭谄渲须p擊color屬性標(biāo)簽，這樣就會(huì)彈出調(diào)色板，在其中選擇你需要的顏色就可以了。圖9 在代碼視圖設(shè)置水平線顏色屬性3、保存頁(yè)面文檔。執(zhí)行“文件/保存”命令，把文檔保存到站點(diǎn)的根目錄下。文件名：shuomin

15、g.htm。只須輸入主文件名 shuoming 就可以了，擴(kuò)展名是系統(tǒng)自動(dòng)加上的。第三課本次課開(kāi)始我們們要設(shè)計(jì)留言言板的主頁(yè)面面了。復(fù)雜的的頁(yè)面一般都都要先用表格格布局，我們們就從留言板板主頁(yè)面的表表格布局開(kāi)始始學(xué)習(xí)。除了了表格布局，利利用層布局頁(yè)頁(yè)面也是一種種選擇。但層層的兼容性和和可控制性就就比表格差多多了，本次課課也要討論DDreamwweaverr MX中有有關(guān)層布局，以以及層和表格格相互轉(zhuǎn)換的的知識(shí)。首先讓我們們先看看留言言板站點(diǎn)主頁(yè)頁(yè)面將來(lái)大概概是個(gè)什么摸摸樣。單擊這這里打開(kāi)頁(yè)面面效果，具體體設(shè)計(jì)步驟如如下：1、創(chuàng)創(chuàng)建主頁(yè)面新新文檔（maain.assp）這個(gè)主主頁(yè)面將來(lái)是是個(gè)包含

16、ASSP腳本的動(dòng)動(dòng)態(tài)頁(yè)面。所所以它的類型型是動(dòng)態(tài)腳本本頁(yè)面文檔，文文件擴(kuò)展名是是asp。你你可以選擇以以下兩種方法法中的任意一一種創(chuàng)建它：執(zhí)行行“文件/新新建”命令，在在彈出的新建建文檔對(duì)話框框中做如圖11所示的操作作。保存文檔檔時(shí)，文件命命名為maiin。 圖11 新建ASSP VBSScriptt動(dòng)態(tài)文檔打開(kāi)站站點(diǎn)面板，在在留言板站點(diǎn)點(diǎn)本地視圖下下面的窗口中中右鍵單擊站站點(diǎn)名，在彈彈出的快捷菜菜單中執(zhí)行“新新建文件”命命令，然后將將文件名的主主文件名改為為main。2、創(chuàng)建表格在Dreamweaver MX中創(chuàng)建表格有兩種模式，一種是在標(biāo)準(zhǔn)視圖下插入表格，一種是在布局視圖下直接畫表格。在標(biāo)

17、準(zhǔn)視圖下插入表格：“標(biāo)準(zhǔn)”視圖是默認(rèn)的 Dreamweaver MX設(shè)計(jì)視圖。若要在“標(biāo)準(zhǔn)”視圖中創(chuàng)建表格，可以使用“插入表格”命令。Dreamweaver將根據(jù)您在“插入表格”對(duì)話框中選擇的選項(xiàng)創(chuàng)建一個(gè)表格，如圖2所示。圖2 插入表格和定義表格在本例中我們插入兩個(gè)表格：一個(gè)是1行1列，寬度是755像素。另一個(gè)是3行3列，寬度是600像素。在布局視圖下繪制表格：在“布局”視圖中，可以繪制布局單元格或布局表格以定義文檔的設(shè)計(jì)區(qū)域。這給了我們更大的靈活性，想一想在頁(yè)面上畫表格的滋味吧！我們需要在插入欄中切換到布局標(biāo)簽下，并單擊布局視圖，如圖3所示。單擊繪制布局表格或單元格按鈕以后就可以用鼠標(biāo)直接繪

18、制了。圖3 布局視圖3、編輯表格通過(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)行。關(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)選中表格或者單元格的目

19、的，如圖4所示。圖4 通過(guò)標(biāo)簽檢查器選擇表格關(guān)于表格的尺寸基于百分比還是基于像素：基于百分比的表格會(huì)根據(jù)瀏覽器窗口寬度的變化而伸展或收縮。（例如，如果您指定表格使用 75% 的寬度，則不管瀏覽器窗口有多大，表格都會(huì)伸展以填充 75% 的水平間距。這在某些情況下會(huì)很有用，例如，在調(diào)整窗口大小時(shí)確保導(dǎo)航菜單總能顯示?；谙袼氐谋砀癖辉O(shè)置為某個(gè)特定寬度，并且不會(huì)隨著瀏覽器窗口大小的改變而改變。一般我們?cè)谟帽砀癫季猪?yè)面時(shí)，喜歡采用基于像素的表格，這樣設(shè)計(jì)出來(lái)的頁(yè)面更精確。本課實(shí)例就是用基于像素的表格布局頁(yè)面的。關(guān)于調(diào)整布局單元格大小有兩種方法：用鼠標(biāo)直接移動(dòng)到單元格的邊框，拖動(dòng)鼠標(biāo)調(diào)整單元格的大小。在

20、屬性面板直接輸入單元格的寬和高，來(lái)精確的控制調(diào)整單元格的大小。 表格和單元格的其它屬性的設(shè)置都可以在屬性面板中完成。4、使用層進(jìn)行布局用層進(jìn)行頁(yè)面布局，給設(shè)計(jì)者更大的靈活性。因?yàn)榭梢赃@樣說(shuō)，你可以將層放在頁(yè)面上你想讓它占據(jù)的任何位置。如圖5是創(chuàng)建層和在層面板管理層的示意圖。 圖5 創(chuàng)建層和在層面板管理層雖然用層進(jìn)行布局給設(shè)計(jì)者更大的靈活性，但用層布局缺乏更大的兼容性，在不同的瀏覽器中看到的結(jié)果可能是不一樣的，甚至在一些瀏覽器中根本就不支持你的層。當(dāng)然我們可以將層轉(zhuǎn)換為表格（表格是最兼容的頁(yè)面元素了），但是我還是建議不用層布局為好，比如重疊的層就不能轉(zhuǎn)換為表格。我們可以這樣進(jìn)行層和表格之間的互相

21、轉(zhuǎn)換：執(zhí)行“修改/轉(zhuǎn)換/層到表格”或者“修改/轉(zhuǎn)換/表格到層”就可以實(shí)現(xiàn)層和表格之間的互換了。用表格布局頁(yè)面是設(shè)計(jì)網(wǎng)頁(yè)的基礎(chǔ)，表格的布局是很靈活的，大家要多練習(xí)，嘗試不同的布局變化，這樣才能找到和掌握更多的規(guī)律。 第四課經(jīng)過(guò)前面三課的的學(xué)習(xí)，我們們已經(jīng)在留言言板站點(diǎn)創(chuàng)建建兩個(gè)頁(yè)面了了，一個(gè)是說(shuō)說(shuō)明頁(yè)面（sshuomiing.httm），一個(gè)個(gè)是主頁(yè)面（mmain.aasp）。下下面我們首先先挑毛病，挑挑一挑兩個(gè)頁(yè)頁(yè)面的創(chuàng)建過(guò)過(guò)程和創(chuàng)建結(jié)結(jié)果的毛病。1、在瀏覽器中打開(kāi)這兩個(gè)頁(yè)面，然后執(zhí)行瀏覽器中的“查看/文字大小/最大”命令。咣當(dāng)！字大了，段落也亂了！怎么這個(gè)效果啊！2、在頁(yè)面的編輯過(guò)程中，每次

22、按Enter（回車）鍵是一個(gè)新段落的開(kāi)始，但段落間的距離怎么那么大?。恳舱也坏娇刂凭嚯x的命令。：（3、仔細(xì)再看一看頁(yè)面效果，怎么超級(jí)鏈接的文字下面都有一個(gè)下畫線??？這多不好看啊，能不能去掉呢？4、我想文字段落前空兩個(gè)漢字的位置，每次都要按空格鍵設(shè)置，能不能在新段落前自動(dòng)前空兩格？5、我想表格線更細(xì)一些，可在屬性面板里面好象完成不了這個(gè)目的？我們還可以找到很多毛病和不如意的地方，怎么解決？哈哈，今天就讓一個(gè)重量級(jí)選手出場(chǎng)吧，它叫CSS層疊式樣式表。它可是設(shè)計(jì)網(wǎng)頁(yè)的重要技術(shù)，有了它，我們剛才找到的那些問(wèn)題就馬上可以解決掉。一、關(guān)于CSS樣式表層疊樣式表（CSS）是一系列格式規(guī)則，它們控制網(wǎng)頁(yè)內(nèi)容的

23、外觀。使用CSS樣式可以非常靈活并更好地控制確切的網(wǎng)頁(yè)外觀，從精確的布局定位到特定的字體和樣式。 CSS樣式使您可以控制許多僅使用HTML無(wú)法控制的屬性。例如，可以指定自定義列表項(xiàng)目符號(hào)并指定不同的字體大小和單位（像素、點(diǎn)數(shù)等等）。通過(guò)使用CSS樣式和以像素為單位設(shè)置字體大小，可以確保以更一致的方式在多個(gè)瀏覽器中處理頁(yè)面布局和外觀。除了設(shè)置文本格式外，還可以控制網(wǎng)頁(yè)中塊級(jí)別元素的格式和定位。例如，可以設(shè)置邊距、邊框、其他文本周圍的浮動(dòng)文本等等。CSS樣式表的主要優(yōu)點(diǎn)是提供便利的更新功能；更新CSS樣式時(shí)，使用該樣式的所有文檔的格式都自動(dòng)更新為新樣式。在Dreamweaver MX中主要通過(guò)“C

24、SS樣式面板”創(chuàng)建CSS樣式、查看CSS樣式的屬性以及將CSS樣式應(yīng)用于文檔中的元素。選擇執(zhí)行“窗口/CSS樣式”命令可以打開(kāi)“CSS樣式面板”，如圖1所示。CSS樣式面板中有兩種視圖，一個(gè)是應(yīng)用樣式視圖，另一個(gè)是編輯樣式試圖，如圖1和圖2所示。應(yīng)用樣式視圖：在這個(gè)視圖下可以選擇應(yīng)用于文檔元素的類（class）樣式?！皯?yīng)用樣式”視圖只顯示自定義（class）樣式。該窗格中不顯示重定義的HTML樣式和選擇器樣式。編輯樣式視圖：在這個(gè)視圖下可以查看與當(dāng)前文檔關(guān)聯(lián)的樣式定義?！熬庉嫎邮健币晥D顯示自定義（class）CSS樣式、重定義的HTML標(biāo)簽和CSS選擇器樣式的樣式定義。圖1 CSS樣式面板圖2

25、 CSS樣式面板編輯樣式面板二、在網(wǎng)頁(yè)文檔內(nèi)部定義和引用CSS樣式在Dreamweaver MX中打開(kāi)留言板站點(diǎn)的說(shuō)明文件（shuoming.htm），我們?cè)谶@個(gè)頁(yè)面文檔內(nèi)部定義和引用CSS樣式。重定義html標(biāo)簽body的屬性樣式1、打開(kāi)CSS樣式面板，選擇編輯樣式面板視圖。2、單擊面板右下角的新建CSS樣式按鈕，會(huì)彈出一個(gè)新建樣式對(duì)話框，如圖3所示。請(qǐng)按照?qǐng)D3所示進(jìn)行設(shè)置。圖3 新建CSS樣式對(duì)話框重定義body屬性3、設(shè)置完成以后，單擊確定按鈕，進(jìn)入body標(biāo)簽的屬性設(shè)置對(duì)話框中，如圖4所示。圖4 body屬性樣式設(shè)置類型屬性重新定義文本超級(jí)鏈接屬性樣式1、打開(kāi)CSS樣式面板，選擇編輯樣

26、式面板視圖。2、單擊面板右下角的新建CSS樣式按鈕，會(huì)彈出一個(gè)新建樣式對(duì)話框，如圖5所示。請(qǐng)按照?qǐng)D5所示進(jìn)行設(shè)置。圖5 新建CSS樣式重新定義超級(jí)鏈接屬性3、設(shè)置完成以后，單擊確定按鈕，進(jìn)入a:link的屬性設(shè)置對(duì)話框中，如圖6所示。只設(shè)置“修飾”和“顏色”，其它不設(shè)置。圖6 a:link的類型屬性樣式設(shè)置4、重復(fù)步驟2、步驟3，分別再重新定義a:visited和a:hover的屬性樣式。和前面重新定義a:link唯一的不同是文字顏色的設(shè)置，分別設(shè)置成灰色和紅色，其他的設(shè)置都一樣。a:link超級(jí)鏈接文字的正常外觀屬性。a:visited超級(jí)鏈接文字訪問(wèn)過(guò)以后的外觀屬性a:hover當(dāng)鼠標(biāo)經(jīng)過(guò)

27、超級(jí)鏈接文字時(shí)的外觀屬性經(jīng)過(guò)前面對(duì)body和a標(biāo)簽的屬性重新定義以后，定義的CSS樣式會(huì)自動(dòng)套用到頁(yè)面的元素上。這是最終的頁(yè)面效果：shuoming_css.htm三、定義和附加外部樣式表上面我們是在文檔內(nèi)部重新定義了一些html標(biāo)簽的屬性樣式，定義的CSS樣式只對(duì)本文檔起作用，如果換了一個(gè)新文檔，又要重復(fù)上面的操作，這樣也太麻煩了！實(shí)際上，對(duì)于一個(gè)站點(diǎn)，站點(diǎn)內(nèi)的頁(yè)面大多要求一致的外觀和效果，如果我們針對(duì)一個(gè)站點(diǎn)定義一次CSS樣式，然后把定義的結(jié)果套用到整個(gè)站點(diǎn)的頁(yè)面文檔，那么我們?cè)O(shè)計(jì)網(wǎng)站和管理網(wǎng)站的效率就大大提高了。Dreamweaver MX的外部樣式表就是用來(lái)實(shí)現(xiàn)這個(gè)目的的。讓我們開(kāi)始外

28、部樣式表的應(yīng)用吧，先在Dreamweaver MX中打開(kāi)留言板站點(diǎn)的主頁(yè)面文檔（main.htm），我們要以這個(gè)文檔為實(shí)例完成我們的學(xué)習(xí)。定義外部CSS樣式表文件1、打開(kāi)CSS樣式面板，單擊右下角的新建樣式按鈕 ，則彈出新建樣式對(duì)話框，如圖7所示。請(qǐng)按照?qǐng)D7進(jìn)行設(shè)置。圖7 新建CSS樣式外部樣式文件2、完成圖7的設(shè)置后，單擊確定按鈕，則彈出保存外部樣式表對(duì)話框，如圖8所示。請(qǐng)按照?qǐng)D8所示進(jìn)行設(shè)置和操作。圖8 保存外部樣式表對(duì)話框3、完成圖8的設(shè)置并單擊保存按鈕后，會(huì)彈出body的CSS樣式定義對(duì)話框，如圖4所示，請(qǐng)按照?qǐng)D4進(jìn)行設(shè)置。在這個(gè)外部CSS樣式表文件中繼續(xù)定義CSS樣式1、單擊右下角的

29、新建樣式按鈕 ，則彈出新建樣式對(duì)話框，如圖9所示。請(qǐng)按照?qǐng)D9進(jìn)行設(shè)置。圖9 新建CSS樣式td的屬性樣式2、單擊確定按鈕以后，就彈出td的CSS樣式定義對(duì)話框，它的設(shè)置和body的設(shè)置一樣。也可參看圖4。3、重復(fù)步驟1、步驟2，在這個(gè)外部CSS樣式表中繼續(xù)定義a:link 、a:visited 、a:hover的屬性樣式。4、重定義p標(biāo)簽的“盒子”屬性樣式可以設(shè)置段落間距，如圖10所示。圖10 p標(biāo)簽的盒子屬性樣式圖11 外部CSS樣式表定義的外部CSS樣式表最終結(jié)果如圖11所示。附加外部樣式表上面我們建立了一個(gè)外部CSS樣式表文件（*.css），這個(gè)外部CSS樣式文件自動(dòng)附加到定義它的頁(yè)面文

30、檔中了。但站點(diǎn)中的其它頁(yè)面文檔如果想使用這個(gè)外部CSS樣式表中的樣式，就必須先附加它。具體步驟如下：1、打開(kāi)站點(diǎn)中的另一個(gè)頁(yè)面文檔。2、打開(kāi)CSS樣式面板，單擊面板右下角的“附加外部樣式表”按鈕 ，馬上會(huì)彈出一個(gè)“鏈接外部CSS樣式表”對(duì)話框，如圖12所示。圖12 鏈接外部樣式表3、在圖12所示的鏈接外部樣式表中瀏覽找到要附加的CSS樣式表文件以后，單擊“確定”按鈕就完成了將一個(gè)外部CSS樣式表附加到頁(yè)面文檔的操作，我們?cè)贑SS樣式表面板的編輯視圖下就可以看到附加的樣式表，如圖11所示。利用CSS樣式表模板創(chuàng)建外部CSS樣式表除了在CSS樣式面板中創(chuàng)建外部CSS樣式表以外，我們還經(jīng)常利用CSS

31、樣式表模板創(chuàng)建外部CSS樣式表。步驟如下：1、執(zhí)行“文件/新建”命令，會(huì)彈出一個(gè)新建頁(yè)面文檔對(duì)話框，如圖13所示。圖13 利用CSS模板創(chuàng)建外部CSS樣式表2、按照?qǐng)D13所示操作以后，我們就選擇了一個(gè)包含body、th、td、h1、h2、h3、h4、h5、h6、a等html標(biāo)簽的屬性樣式的CSS樣式表模板，如圖14是代碼視圖下CSS樣式表模板的部分內(nèi)容。圖14 代碼視圖下CSS樣式表模板的內(nèi)容3、我們可以直接在CSS樣式表模板的代碼視圖下直接對(duì)它的內(nèi)容進(jìn)行編輯，也可以把它附加到某一個(gè)頁(yè)面文檔以后再在CSS樣式面板的編輯視圖下對(duì)它進(jìn)行編輯。4、CSS樣式表模板中的h1、h2、h6這些屬性樣式對(duì)應(yīng)

32、在屬性面板中的格式操作如圖15所示。當(dāng)我們選擇屬性面板格式中的標(biāo)題1、標(biāo)題2、標(biāo)題6時(shí)，實(shí)際上光標(biāo)所在的文檔段落就應(yīng)用了這些屬性樣式了。圖15 屬性面板中段落格式設(shè)置四、教程副頁(yè)特定CSS樣式設(shè)置信息參考第五課對(duì)一個(gè)站點(diǎn)來(lái)說(shuō)說(shuō)，導(dǎo)航系統(tǒng)統(tǒng)是很重要的的。如果你的的站點(diǎn)導(dǎo)航系系統(tǒng)設(shè)計(jì)得好好，訪問(wèn)你的的網(wǎng)站的用戶戶就會(huì)感到特特別方便，反反之，用戶會(huì)會(huì)感到無(wú)所適適從。本次課課程我們要討討論如何在頁(yè)頁(yè)面插入Drreamweeaver的的導(dǎo)航條，并并對(duì)頁(yè)面中的的導(dǎo)航條的創(chuàng)創(chuàng)建方法進(jìn)行行總結(jié)。另外外，還順便討討論一下如何何插入flaash動(dòng)畫等等頁(yè)面元素的的方法。一、規(guī)規(guī)劃和創(chuàng)建頁(yè)頁(yè)面導(dǎo)航元素素1、打打開(kāi)留

33、言板站站點(diǎn)主頁(yè)面文文檔（maiin.aspp）。將頁(yè)面面頂部的表格格重新拆分調(diào)調(diào)整為如圖11所示的效果果。圖11 mainn.asp頁(yè)頁(yè)面頂部表格格2、根根據(jù)圖1所示示的表格尺寸寸，在Firreworkks MX和和Flashh MX中創(chuàng)創(chuàng)建圖像和動(dòng)動(dòng)畫。（在這這里下載）你下載載的是一個(gè)rrar壓縮包包（imagge5.raar），其中中包括以下內(nèi)內(nèi)容：一一個(gè)寬3000像素、高1120像素的的圖像文件（ttop0011.gif），在在Firewworks MX制作完完成。一一個(gè)寬4555像素、高990像素的fflash動(dòng)動(dòng)畫文件（ttop1.sswf），在在Flashh MX制作作完成。5組組

34、共10個(gè)寬寬91像素、高高30像素的的圖像文件（ddaohanng*_*），在在Firewworks MX制作完完成。3、將將圖像topp001.ggif插入到到圖1中所所標(biāo)示的單元元格。4、將將flashh動(dòng)畫topp1.swff插入到圖11中所標(biāo)示示的單元格，具具體步驟是：將將光標(biāo)定位到到圖1中所所標(biāo)示的單元元格中。單擊擊插入欄中的的“插入fllash”命命令，彈出如如圖2所示的的“選擇文件件“對(duì)話框。在在其中瀏覽選選擇需要插入入的flassh動(dòng)畫文件件。圖22 選擇要插插入的flaash動(dòng)畫文文件選中中插入的fllash動(dòng)畫畫，在屬性面面板可以對(duì)它它進(jìn)行設(shè)置和和操作，如圖圖3所示。圖33

35、 flassh動(dòng)畫屬性性面板二、插插入導(dǎo)航條1、將將鼠標(biāo)光標(biāo)定定位到圖1中中所標(biāo)示的的單元格，然然后單擊插入入欄中的“插插入導(dǎo)航條”命命令，如圖44所示。圖4 插入導(dǎo)航條條2、單單擊“插入導(dǎo)導(dǎo)航條”命令令以后，會(huì)彈彈出如圖5所所示的“插入入導(dǎo)航條“對(duì)對(duì)話框。圖55 插入導(dǎo)航航條對(duì)話框3、在在如圖5所示示的插入導(dǎo)航航條對(duì)話框中中，我們要定定義5個(gè)導(dǎo)航航項(xiàng)目，將來(lái)來(lái)得到的是55個(gè)水平排列列的導(dǎo)航按鈕鈕。每個(gè)導(dǎo)航航項(xiàng)目分別使使用前面下載載的在Firreworkks MX制制作完成5組組圖像文件。完成以后的留言板站點(diǎn)主頁(yè)面效果：?jiǎn)螕暨@里觀看三、創(chuàng)建頁(yè)面導(dǎo)航條方法總結(jié)1、自定義簡(jiǎn)單導(dǎo)航條布局表格，導(dǎo)航條

36、中有幾個(gè)項(xiàng)目，就創(chuàng)建幾個(gè)單元格。在單元格中輸入文本或者插入圖像。分別定義每個(gè)單元格中的文本或者圖像的超級(jí)鏈接。2、創(chuàng)建Dreamweaver導(dǎo)航條（方法請(qǐng)參考前面）3、通過(guò)插入“代碼面板/代碼片段/導(dǎo)航”創(chuàng)建常見(jiàn)的導(dǎo)航條，如圖5所示。代碼片段中有很多常用的導(dǎo)航條代碼模板，利用它我們可以很容易的創(chuàng)建一些常見(jiàn)的導(dǎo)航條。圖6 代碼片段：導(dǎo)航4、創(chuàng)建Fireworks MX導(dǎo)航條Fireworks MX中也提供了創(chuàng)建導(dǎo)航條的具體工具和方法，我們?cè)贔ireworks MX中設(shè)計(jì)導(dǎo)航條，然后再插入到Dreamweaver MX中進(jìn)行編輯。如圖7所示，單擊插入欄中的插入Fireworks HTML命令可以實(shí)

37、現(xiàn)Fireworks HTML文檔的插入。圖7 插入Fireworks HTML文檔5、創(chuàng)建Flash按鈕導(dǎo)航條如圖8所示，單擊插入欄下媒體標(biāo)簽下的Flash按鈕命令可以實(shí)現(xiàn)在頁(yè)面文檔插入Flash按鈕的目的。將多個(gè)Flash按鈕集合在一起也能實(shí)現(xiàn)導(dǎo)航條的功能。圖8 插入Flash按鈕 第六課經(jīng)過(guò)前面5課課的學(xué)習(xí)，我我們對(duì)Dreeamweaaver MMX創(chuàng)建和管管理站點(diǎn)頁(yè)面面文檔的前臺(tái)臺(tái)技術(shù)有了一一個(gè)概括的認(rèn)認(rèn)識(shí)和應(yīng)用了了，實(shí)際上前前5課所涉及及到的應(yīng)該是是創(chuàng)建和管理理站點(diǎn)的最基基本的一些技技術(shù)。掌握了了這些技術(shù)，我我們?cè)O(shè)計(jì)一般般的靜態(tài)站點(diǎn)點(diǎn)應(yīng)該是沒(méi)有有問(wèn)題了。那那么現(xiàn)在開(kāi)始始留言板站點(diǎn)點(diǎn)的

38、后臺(tái)程序序的創(chuàng)建？按按道理是可以以討論這方面面的問(wèn)題了，但但我還想再討討論一些站點(diǎn)點(diǎn)頁(yè)面的其他他元素和效果果的創(chuàng)建方法法。雖然這些些技術(shù)可能和和我們的留言言板站點(diǎn)關(guān)系系不是很大，但但是因?yàn)樗鼈儌円彩且恍┏３Ｓ玫募夹g(shù)和和方法，我們們還是在這里里系統(tǒng)的學(xué)習(xí)習(xí)一下吧。一、利利用時(shí)間軸和和層實(shí)現(xiàn)頁(yè)面面中的滾動(dòng)字字幕效果。 小字報(bào)：今天留留言板的最多多的問(wèn)題是這這個(gè)教程共有有幾課？看到上面這這個(gè)滾動(dòng)字幕幕的效果了吧吧，它是通過(guò)過(guò)在Dreaamweavver時(shí)間軸軸面板中定義義層的移動(dòng)動(dòng)動(dòng)畫來(lái)實(shí)現(xiàn)的的。什么？DDreamwweaverr也有時(shí)間軸軸？是的，而而且你用它可可以設(shè)計(jì)出不不錯(cuò)的動(dòng)畫效效果呢。而且

39、且用這樣的技技術(shù)設(shè)計(jì)出來(lái)來(lái)的動(dòng)畫效果果更符合weeb的特征。1、單擊插入欄中常用標(biāo)簽下的層命令按鈕 ，在頁(yè)面中拖拽鼠標(biāo)插入一個(gè)層。在層中輸入需要的字幕文字。2、打開(kāi)時(shí)間軸面板。執(zhí)行“窗口/其他/時(shí)間軸”命令打開(kāi)時(shí)間軸面板。3、將頁(yè)面文檔中的層選中，并把它拖放到時(shí)間軸的時(shí)間線上。默認(rèn)的情況是插入的動(dòng)畫長(zhǎng)度為15幀，相應(yīng)的層名（Layer1）顯示在該動(dòng)畫欄中，并且在動(dòng)畫欄的兩端自動(dòng)加入了兩個(gè)關(guān)鍵幀。4、在時(shí)間軸面板的動(dòng)畫欄上的關(guān)鍵幀按下鼠標(biāo)左鍵并左右拖動(dòng)，則可以改變關(guān)鍵幀的位置。向右拖動(dòng)第15幀上的這個(gè)關(guān)鍵幀以延長(zhǎng)關(guān)鍵幀到60幀，如圖1所示。圖1 時(shí)間軸面板5、在第30幀鼠標(biāo)右鍵單擊，在彈出的快捷

40、菜單中選擇“插入關(guān)鍵幀”命令，在第30幀插入一個(gè)關(guān)鍵幀。6、單擊第30幀，然后將頁(yè)面文檔中的層水平向右移動(dòng)合適的距離如圖2所示。圖2 層的運(yùn)動(dòng)軌跡7、在時(shí)間軸面板中選擇：自動(dòng)播放和循環(huán)，并把行為標(biāo)志拖放到第60幀的位置，如圖1所示。這個(gè)左右來(lái)回滾動(dòng)的字幕效果就完成了，簡(jiǎn)單吧？其實(shí)時(shí)間軸和層結(jié)合在一切定義動(dòng)畫還有很多技巧，以后慢慢研究吧。：）二、創(chuàng)建當(dāng)頁(yè)面載入時(shí)彈出窗口的效果先單擊這里觀看具體頁(yè)面效果我們可以看到頁(yè)面載入時(shí)彈出了一個(gè)信息提示對(duì)話框窗口，接著又彈出了一個(gè)自定義外觀的瀏覽器窗口。這兩個(gè)效果都是通過(guò)在行為面板中定義頁(yè)面載入時(shí)的行為而實(shí)現(xiàn)的。我們定義頁(yè)面載入時(shí)的行為實(shí)際上就是定義標(biāo)簽的行

41、為。彈出信息提示對(duì)話框窗口1、在標(biāo)簽檢查器中單擊選中標(biāo)簽，這時(shí)整個(gè)頁(yè)面文檔就會(huì)變成灰色狀態(tài)。2、打開(kāi)行為面板，單擊 按鈕打開(kāi)行為命令下拉菜單，選中其中的“彈出信息”行為命令，如圖3所示。圖3 行為面板定義行為3、在出現(xiàn)的彈出信息對(duì)話框的信息文本框中輸入想彈出的提示信息。打開(kāi)瀏覽器窗口1、在標(biāo)簽檢查器中單擊選中標(biāo)簽，這時(shí)整個(gè)頁(yè)面文檔就會(huì)變成灰色狀態(tài)。2、打開(kāi)行為面板，單擊 按鈕打開(kāi)行為命令下拉菜單，選中其中的“打開(kāi)瀏覽器”行為命令，如圖3所示。3、在打開(kāi)瀏覽器窗口設(shè)置對(duì)話框中進(jìn)行將要打開(kāi)的瀏覽器窗口的外觀的參數(shù)定義，如圖4所示。圖4 打開(kāi)瀏覽器窗口的外觀參數(shù)的定義行為面板是個(gè)很重要的面板，我們?cè)?/p>

42、創(chuàng)建頁(yè)面效果時(shí)會(huì)經(jīng)常用到它，它里面有很多常見(jiàn)的效果的定義。比如定義頁(yè)面的狀態(tài)條信息、檢查頁(yè)面提交表單的正確性等等。以后要多研究研究它哦三、禁止訪問(wèn)用戶的右鍵單擊現(xiàn)在你用鼠標(biāo)右鍵在這個(gè)頁(yè)面上單擊一下試試你的右鍵失效了吧，想把我的頁(yè)面上的資源馬上拿走？嘿嘿還是再費(fèi)點(diǎn)工夫吧。1、將頁(yè)面文檔視圖轉(zhuǎn)換到“代碼視圖”模式，然后將光標(biāo)定位在前面一行。這里就是我們將要插入JavaScript腳本代碼的地方。2、執(zhí)行“插入/腳本對(duì)象/腳本”命令，會(huì)彈出一個(gè)插入腳本對(duì)話框，如圖5所示。圖5 插入腳本對(duì)話框3、按照?qǐng)D5進(jìn)行設(shè)置，然后確定以后，看看我們的頁(yè)面文檔中出現(xiàn)了什么：這是一對(duì)標(biāo)簽，它定義了在頁(yè)面中將要插入的腳

43、本所使用的語(yǔ)言。我們通過(guò)步驟2得到的這樣一個(gè)結(jié)果，當(dāng)然也可以手工輸入這些代碼來(lái)實(shí)現(xiàn)。4、將光標(biāo)定位在與之間。5、打開(kāi)代碼片段面板，選擇展開(kāi)其中的“JavaScript/瀏覽器函數(shù)”，然后鼠標(biāo)雙擊“禁用右鍵單擊”，如圖6所示。圖6 插入代碼片段完成以上操作以后，你會(huì)發(fā)現(xiàn)在與之間插入了一段腳本代碼。這樣就基本OK了，當(dāng)然我們還可以改一下警告信息。改這里：var message = 嘿嘿，右鍵不能拿我的東西！;四、自動(dòng)搭上著名的搜索引擎，提高自己網(wǎng)站的訪問(wèn)率自動(dòng)提高自己網(wǎng)站的訪問(wèn)率？這么好的事情誰(shuí)不想知道！其實(shí)很簡(jiǎn)單，方法就是讓著名的搜索引擎幫助我們。許多搜索引擎裝置（自動(dòng)瀏覽網(wǎng)頁(yè)為搜索引擎收集信息

44、以編入索引的程序）讀取關(guān)鍵字meta標(biāo)簽的內(nèi)容和說(shuō)明meta標(biāo)簽的內(nèi)容，并使用該信息在它們的數(shù)據(jù)庫(kù)中將您的頁(yè)面編入索引。在Dreamweaver MX中如何實(shí)現(xiàn)這個(gè)技術(shù)呢？1、單擊插入欄下的“文件頭標(biāo)簽”，如圖7，我們要使用文件頭標(biāo)簽下的兩個(gè)按鈕命令。圖7 文件頭meta標(biāo)簽屬性2、單擊圖7所示的“關(guān)鍵字屬性”按鈕，在彈出的關(guān)鍵字設(shè)置對(duì)話框的關(guān)鍵字文本框中輸入站點(diǎn)的關(guān)鍵字。比如：閃客，教程，flash等，注意多個(gè)關(guān)鍵字之間用逗號(hào)隔開(kāi)。3、單擊圖7所示的“說(shuō)明屬性”按鈕，在彈出的說(shuō)明設(shè)置對(duì)話框的描述文本框中輸入對(duì)站點(diǎn)的描述文字。比如：本站點(diǎn)是一個(gè)專門討論動(dòng)畫設(shè)計(jì)和網(wǎng)站建設(shè)的站點(diǎn)，有大量的原創(chuàng)教程

45、。 第七課這個(gè)教程的上篇篇到本課就要要結(jié)束了。說(shuō)說(shuō)實(shí)話，有一一種如獲重負(fù)負(fù)的感覺(jué)，也也終于要有一一個(gè)新的開(kāi)始始了。學(xué)習(xí)是是一個(gè)快樂(lè)和和痛苦的過(guò)程程。想一想自自己又給了110MB多數(shù)數(shù)據(jù)新的生命命、想一想這這么多的收獲獲，學(xué)習(xí)過(guò)程程中的付出也也真值得。好好了，別酸了了，還是討論論我們的課程程吧 這次課定定位在“畫”網(wǎng)網(wǎng)頁(yè)，一個(gè)畫畫字給了我們們更大的設(shè)計(jì)計(jì)空間！網(wǎng)頁(yè)頁(yè)可以畫出來(lái)來(lái)？那當(dāng)然。大大家別忘了，F(xiàn)Firewoorks可是是專業(yè)的網(wǎng)頁(yè)頁(yè)設(shè)計(jì)工具，而而且MX這個(gè)個(gè)版本賦予它它更強(qiáng)大的網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)功能能。這次我們們就討論Fiireworrks MXX和Dreaamweavver MXX結(jié)合在一起起

46、“畫”一個(gè)個(gè)漂亮的網(wǎng)頁(yè)頁(yè)。先看看這里：留言言板站點(diǎn)說(shuō)明明頁(yè)面。我們們就學(xué)習(xí)這個(gè)個(gè)頁(yè)面是怎樣樣畫出來(lái)的。一、在Fireworks MX中繪制頁(yè)面（png源文件下載）1、新建一個(gè)畫布文檔。寬：755像素、高：300像素，透明背景。2、在畫布上繪制頁(yè)面效果如圖1所示。大致包括3部分：頁(yè)面頭圖片、表格框、頁(yè)面尾圖片。圖1 圖像參考2、給圖像文檔進(jìn)行切片選擇工具欄中網(wǎng)頁(yè)工具中的切片工具 ，然后拖動(dòng)鼠標(biāo)畫矩形切片，如圖2所示。注意進(jìn)行多個(gè)切片的時(shí)候一定要對(duì)準(zhǔn)確，中間不能有縫隙，實(shí)際上在切片的時(shí)候系統(tǒng)自動(dòng)有吸附的功能，只要邊線對(duì)仔細(xì)就行。圖2 切片參考3、如圖2所示，我們把圖像一共切片分割成5個(gè)區(qū)域，綠色顯

47、示的是切片區(qū)，第個(gè)是無(wú)切片區(qū)。這里特別要注意、兩個(gè)切片的切割，它們的寬度應(yīng)一致（10像素）。而且千萬(wàn)不能把切片區(qū)中的邊框曲線切進(jìn)來(lái)?。ā蓚€(gè)切片區(qū)和切片區(qū)的連接部位就是一段曲線，應(yīng)把曲線留到切片區(qū)）4、導(dǎo)出圖像為包含表格代碼的HTML文件執(zhí)行“文件/導(dǎo)出”命令，則彈出導(dǎo)出對(duì)話框，如圖3所示。請(qǐng)按照?qǐng)D中所示進(jìn)行設(shè)置。圖3 導(dǎo)出圖像切片二、在Dreamweaver MX中對(duì)導(dǎo)出的Fireworks MX HTML文件編輯1、在Dreamweaver MX中打開(kāi)導(dǎo)出的Fireworks MX HTML文件?；蛘咴贒reamweaver MX中單擊插入欄中的 按鈕插入Fireworks HTML。2、

48、這時(shí)你會(huì)發(fā)現(xiàn)，原來(lái)那些切片在這里都是一些表格單元?，F(xiàn)在你清楚該怎么做了吧。3、單擊原來(lái)的哪個(gè)區(qū)域，將選中的圖片刪除，這里是我們輸入文字的主要表格單元格。4、現(xiàn)在是最關(guān)鍵的操作。目前我們?cè)?、那兩個(gè)單元格（原來(lái)是切片區(qū)域）看到的圖片等于是插入到單元格中的圖片。必須把它們轉(zhuǎn)變成單元格的背景圖片這樣的性質(zhì)。這樣文字單元格隨文字的輸入而延伸時(shí)，、單元格也會(huì)跟著延伸并不斷線了?？梢栽趯傩悦姘逋瓿梢陨喜僮鳎鐖D4所示。圖4 在屬性面板中進(jìn)行圖片性質(zhì)的轉(zhuǎn)換大功告成！到此，本教程的上篇就結(jié)束了。從下一課開(kāi)始我們就要討論留言板站點(diǎn)的后臺(tái)數(shù)據(jù)庫(kù)和程序的設(shè)計(jì)了，一起繼續(xù)努力吧。 第八課從這一課我們就就要開(kāi)始學(xué)習(xí)習(xí)如何

49、實(shí)現(xiàn)留留言板站點(diǎn)的的動(dòng)態(tài)特性了了。那么什么么是靜態(tài)站點(diǎn)點(diǎn)？什么又是是動(dòng)態(tài)站點(diǎn)呢呢？還是簡(jiǎn)單單的說(shuō)明一下下： 靜態(tài)站點(diǎn)和和動(dòng)態(tài)站點(diǎn)概概述所所謂“靜態(tài)”指指的就是網(wǎng)站站的網(wǎng)頁(yè)內(nèi)容容“固定不變變”，當(dāng)用戶戶瀏覽器通過(guò)過(guò)互聯(lián)網(wǎng)的HHTTP協(xié)議議向WEB服服務(wù)器請(qǐng)求提提供網(wǎng)頁(yè)內(nèi)容容時(shí)，服務(wù)器器僅僅是將原原已設(shè)計(jì)好的的靜態(tài)HTMML文檔傳送送給用戶瀏覽覽器。其頁(yè)面面的內(nèi)容使用用的僅僅是標(biāo)標(biāo)準(zhǔn)的HTMML代碼，最最多再加上一一些諸如飛來(lái)來(lái)飛去的蝴蝶蝶這樣的動(dòng)畫畫效果。若網(wǎng)網(wǎng)頁(yè)維護(hù)者要要更新網(wǎng)頁(yè)的的內(nèi)容，就必必須手動(dòng)地來(lái)來(lái)更新其所有有的HTMLL文檔，給維維護(hù)者帶來(lái)大大得出乎想象象的工作量，如如圖1。圖11

50、靜態(tài)站點(diǎn)點(diǎn)簡(jiǎn)單圖示動(dòng)態(tài)態(tài)網(wǎng)站技術(shù)將將網(wǎng)頁(yè)維護(hù)者者從一遍一遍遍的重復(fù)而煩煩瑣的手動(dòng)更更新中解脫出出來(lái)，并且可可以實(shí)現(xiàn)諸如如留言板、BBBS論壇、新新聞實(shí)時(shí)發(fā)布布等站點(diǎn)訪問(wèn)問(wèn)者與webb服務(wù)器交互互性很強(qiáng)的頁(yè)頁(yè)面。以ASSP技術(shù)為例例，動(dòng)態(tài)站點(diǎn)點(diǎn)的一般實(shí)現(xiàn)現(xiàn)原理如圖22所示。圖22 ASP技技術(shù)動(dòng)態(tài)站點(diǎn)點(diǎn)簡(jiǎn)單圖示一般情情況下，在我我們的動(dòng)態(tài)站站點(diǎn)部署中包包括兩個(gè)主要要內(nèi)容：一個(gè)個(gè)是動(dòng)態(tài)腳本本程序，另一一個(gè)是對(duì)數(shù)據(jù)據(jù)的存儲(chǔ)和管管理。本教程程中，前者使使用的是ASSP技術(shù)，后后者是常用的的數(shù)據(jù)庫(kù)技術(shù)術(shù)，用數(shù)據(jù)庫(kù)庫(kù)來(lái)存儲(chǔ)和管管理數(shù)據(jù)是動(dòng)動(dòng)態(tài)網(wǎng)站最高高效的選擇。下下面我們就先先討論討論數(shù)數(shù)據(jù)庫(kù)技術(shù)一、數(shù)數(shù)

51、據(jù)庫(kù)技術(shù)簡(jiǎn)簡(jiǎn)介任何程程序都要處理理數(shù)據(jù)，如何何存儲(chǔ)和管理理程序中要處處理的數(shù)據(jù)是是程序的關(guān)鍵鍵。數(shù)據(jù)庫(kù)技技術(shù)是目前使使用最廣泛的的數(shù)據(jù)存儲(chǔ)和和管理技術(shù)，它它在大量以數(shù)數(shù)據(jù)處理為主主的程序中起起舉足輕重的的作用。目前使使用最廣泛的的數(shù)據(jù)庫(kù)類型型是關(guān)系型數(shù)數(shù)據(jù)庫(kù)。在關(guān)關(guān)系型數(shù)據(jù)庫(kù)庫(kù)中我們可以以把數(shù)據(jù)庫(kù)中中的數(shù)據(jù)看成成一個(gè)二維表表格，如圖33所示。圖33 二維表格格數(shù)據(jù)實(shí)實(shí)際上現(xiàn)實(shí)世世界的很多數(shù)數(shù)據(jù)都可以描描述為如圖33所示的這種種二維表格的的形式。關(guān)系系數(shù)據(jù)庫(kù)正式式利用這種二二維表格的形形式來(lái)描述和和管理程序中中的數(shù)據(jù)的。數(shù)數(shù)據(jù)庫(kù)的基本本組成單位是是記錄，記錄錄被視為單個(gè)個(gè)實(shí)體的相關(guān)關(guān)數(shù)據(jù)的集合合

52、。例如圖33表格中每一一個(gè)用戶的信信息（表格的的一行）就是是一個(gè)記錄。另另外，圖3表表格中的用戶戶ID、姓名名、性別、留留言內(nèi)容、OOICQ、等（表格格的一列）各各個(gè)相關(guān)信息息在數(shù)據(jù)庫(kù)中中用專業(yè)術(shù)語(yǔ)語(yǔ)說(shuō)就是一個(gè)個(gè)域，比如：姓名域、性性別域等等。一個(gè)數(shù)據(jù)庫(kù)可包含多個(gè)表，每個(gè)表具有唯一的名稱。這些表可以是相關(guān)的，也可以是彼此獨(dú)立的。表中每一列代表一個(gè)域，每一行代表一條記錄。如圖4所示是一個(gè)表的結(jié)構(gòu)。圖4 數(shù)據(jù)庫(kù)中的一個(gè)表從一個(gè)或多個(gè)表中提取的數(shù)據(jù)子集稱為記錄集。記錄集也是一種表，因?yàn)樗枪蚕硐嗤械挠涗浀募?。通過(guò)圖5，我們可以很清楚的理解什么是記錄集了吧。在Dreamweaver MX中定義記錄

53、集可是創(chuàng)建動(dòng)態(tài)交互頁(yè)面的重要步驟呢。 圖5 記錄集表二、用ACCESS2000創(chuàng)建留言板站點(diǎn)數(shù)據(jù)庫(kù)ACCESS2000是微軟的OFFICE2000辦公系統(tǒng)中的一個(gè)重要組件。它是最常用的桌面數(shù)據(jù)庫(kù)管理系統(tǒng)之一，它簡(jiǎn)單易用。作為用戶訪問(wèn)量不是很大的個(gè)人小型站點(diǎn)，用ACCESS2000設(shè)計(jì)數(shù)據(jù)庫(kù)還是可行的。下面我們就用ACCESS2000創(chuàng)建留言板站點(diǎn)中的數(shù)據(jù)庫(kù)。創(chuàng)建數(shù)據(jù)庫(kù)文檔并設(shè)計(jì)數(shù)據(jù)庫(kù)表結(jié)果1、創(chuàng)建空數(shù)據(jù)庫(kù)文檔。啟動(dòng)ACCESS2000程序，在出現(xiàn)的Microsoft Access提示框中選擇“新建數(shù)據(jù)庫(kù)/空Access數(shù)據(jù)庫(kù)”，如圖6所示。圖6 新建空Access數(shù)據(jù)庫(kù)2、如圖6，單擊“確定”

54、按鈕以后，出現(xiàn)“文件新建數(shù)據(jù)庫(kù)”對(duì)話框。在其中給你的空Access數(shù)據(jù)庫(kù)文件起個(gè)名字，找到存放它的本地硬盤文件夾。建議你把它存放到留言板站點(diǎn)根目錄下的data文件夾下。E:Inetpubwwwrootliuyanban_jchdataliuyanban_data.mdb3、完成第2步以后，單擊“創(chuàng)建”按鈕，則會(huì)彈出一個(gè)數(shù)據(jù)庫(kù)設(shè)計(jì)窗口，如圖7所示。我們要在這個(gè)窗口中完成數(shù)據(jù)庫(kù)的設(shè)計(jì)。圖7 數(shù)據(jù)庫(kù)設(shè)計(jì)窗口創(chuàng)建表4、雙擊表窗口中的“使用設(shè)計(jì)器創(chuàng)建表”，會(huì)彈出一個(gè)表設(shè)計(jì)器設(shè)計(jì)視圖，在其中我要完成表的結(jié)構(gòu)（域）的設(shè)計(jì)。設(shè)計(jì)結(jié)果看這里5、設(shè)置表中主鍵。右鍵單擊y_id字段，在彈出的快捷菜單中選擇“主鍵”。

55、這樣y_id字段就成為表的主鍵了。6、當(dāng)設(shè)計(jì)完成后，單擊關(guān)閉按鈕關(guān)閉表設(shè)計(jì)器設(shè)計(jì)視圖窗口，這時(shí)會(huì)彈出一個(gè)提示框，如圖8所示?；卮稹笆恰北４嬖O(shè)計(jì)結(jié)果。圖8 保存設(shè)計(jì)提示信息7、單擊“是”以后，會(huì)彈出如圖9所示的對(duì)話框。在其中輸入數(shù)據(jù)庫(kù)表的名字yonghu。圖9 命名數(shù)據(jù)庫(kù)表8、重復(fù)以上步驟創(chuàng)建另一個(gè)數(shù)據(jù)庫(kù)表_guest。設(shè)計(jì)結(jié)果看這里在設(shè)計(jì)好的數(shù)據(jù)庫(kù)表中輸入記錄經(jīng)過(guò)前面的設(shè)計(jì)步驟以后，數(shù)據(jù)庫(kù)設(shè)計(jì)窗口變成如下結(jié)果，如圖10所示。圖10 向數(shù)據(jù)表中添加記錄請(qǐng)嘗試分別在兩個(gè)數(shù)據(jù)庫(kù)表中添加一些記錄并刪除這些記錄。第九課對(duì)于動(dòng)態(tài)站點(diǎn)（比比如我們的留留言板站點(diǎn)）的的創(chuàng)建，除了了靜態(tài)頁(yè)面元元素的設(shè)計(jì)之之外，在

56、服務(wù)務(wù)器端要?jiǎng)?chuàng)建建和部署兩個(gè)個(gè)方面的內(nèi)容容：一個(gè)動(dòng)態(tài)態(tài)腳本程序（本本留言板站點(diǎn)點(diǎn)采用的是AASP技術(shù)）、另另一個(gè)是數(shù)據(jù)據(jù)庫(kù)。在前一一課我們已經(jīng)經(jīng)創(chuàng)建了留言言板站點(diǎn)的數(shù)數(shù)據(jù)庫(kù)文件，下下面就該創(chuàng)建建動(dòng)態(tài)腳本程程序了。在創(chuàng)創(chuàng)建動(dòng)態(tài)腳本本程序之前，將將數(shù)據(jù)庫(kù)和留留言板站點(diǎn)連連接在一起是是最基本的要要求。原因很很簡(jiǎn)單：動(dòng)態(tài)態(tài)腳本程序?yàn)闉榱送瓿晌覀儌冾A(yù)定的程序序任務(wù)，必定定要操作數(shù)據(jù)據(jù)，而數(shù)據(jù)被被我們部署在在數(shù)據(jù)庫(kù)中，那那么首先將數(shù)數(shù)據(jù)庫(kù)和站點(diǎn)點(diǎn)連接起來(lái)，使使動(dòng)態(tài)腳本程程序能夠很方方便的讀、寫寫數(shù)據(jù)庫(kù)中的的數(shù)據(jù)應(yīng)該是是很自然的要要求了。 在Dreeamweaaver MMX中如何實(shí)實(shí)現(xiàn)數(shù)據(jù)庫(kù)和和站點(diǎn)的連接

57、接呢？連接的的方法有幾種種呢？連接好好的數(shù)據(jù)庫(kù)中中的數(shù)據(jù)是不不是直接就可可以應(yīng)用到我我們的頁(yè)面中中呢？本課要要一一解決這這些問(wèn)題。在在Dreammweaveer MX中中實(shí)現(xiàn)數(shù)據(jù)庫(kù)庫(kù)連接的方法法在Drreamweeaver MX中有兩兩種實(shí)現(xiàn)數(shù)據(jù)據(jù)庫(kù)連接的方方法：一個(gè)是是通過(guò)DSNN（數(shù)據(jù)源名名稱）實(shí)現(xiàn)連連接，另一個(gè)個(gè)是通過(guò)自定定義連接字符符串實(shí)現(xiàn)連接接。下面就以以上一課所建建立的留言板板數(shù)據(jù)庫(kù)（EE:Ineetpubwwwroootliiuyanbban_jcchdattaliuuyanbaan_datta.mdbb）為例，討討論它和留言言板站點(diǎn)的連連接方法。一、通通過(guò)DSN（數(shù)數(shù)據(jù)源名稱）

58、實(shí)實(shí)現(xiàn)連接1、定定義系統(tǒng)DSSN打開(kāi)開(kāi)控制面板，然然后打開(kāi)其中中的ODBCC數(shù)據(jù)源管理理器，如圖11所示。選擇擇其中的系統(tǒng)統(tǒng)DSN標(biāo)簽簽，然后單擊擊添加按鈕，我我們要添加一一個(gè)新的系統(tǒng)統(tǒng)DSN名稱稱。圖11 ODBCC數(shù)據(jù)源管理理器添加新新的系統(tǒng)DSSN單單擊添加按鈕鈕以后會(huì)彈出出一個(gè)“創(chuàng)建建新數(shù)據(jù)源”對(duì)對(duì)話框，如圖圖2所示。選選擇其中的“MMicrossoft AAccesss Drivver(*.mdb)”。圖2 選擇需要的驅(qū)動(dòng)程序來(lái)安裝數(shù)據(jù)源單擊“完成”按鈕以后，會(huì)彈出“ODBC Microsoft Access安裝”對(duì)話框。在其中定義數(shù)據(jù)源名并選取數(shù)據(jù)庫(kù)文件，如圖3所示。圖3 ODBC

59、 Microsoft Access安裝經(jīng)過(guò)上面步驟的操作以后，在圖1所示的窗口中就會(huì)顯示一個(gè)新定義的數(shù)據(jù)源名稱。將來(lái)我們?cè)贒W中就用這個(gè)數(shù)據(jù)源名稱建立連接。2、在Dreamweaver MX中通過(guò)DSN（數(shù)據(jù)源名稱）實(shí)現(xiàn)連接在Dreamweaver MX中打開(kāi)留言板站點(diǎn)的主頁(yè)面文檔（main.asp）。打開(kāi)數(shù)據(jù)庫(kù)面板，單擊 按鈕，在彈出的菜單中選擇“ 數(shù)據(jù)源名稱（DSN）”，如圖4所示。圖4 數(shù)據(jù)庫(kù)面板數(shù)據(jù)源名稱在出現(xiàn)的數(shù)據(jù)源名稱對(duì)話框中，選擇DSN、定義連接名稱，如圖5所示。圖5 定義數(shù)據(jù)源連接按照?qǐng)D5所示的完成操作確定以后，數(shù)據(jù)庫(kù)面板就會(huì)出現(xiàn)新定義的連接名稱，單擊它前面的+展開(kāi)，可以看到留

60、言板數(shù)據(jù)庫(kù)中的兩個(gè)表，如圖6所示。這時(shí)我們已經(jīng)完成了數(shù)據(jù)庫(kù)和留言板站點(diǎn)的連接了，連接名是liuyanban_jch。圖6 數(shù)據(jù)庫(kù)面板完成創(chuàng)建的連接以上我們完成了數(shù)據(jù)庫(kù)和站點(diǎn)的連接，這個(gè)連接的建立是通過(guò)定義DSN完成的。通過(guò)DSN建立的數(shù)據(jù)庫(kù)連接的特征是：十分方便對(duì)數(shù)據(jù)庫(kù)的管理。比如，數(shù)據(jù)庫(kù)的物理路徑發(fā)生了改變，只需重新定義DSN，不需涉及到腳本程序的更改。如果我們采取通過(guò)DSN建立數(shù)據(jù)庫(kù)連接，必須能控制站點(diǎn)服務(wù)器的DSN的定義。也就是說(shuō)應(yīng)該能夠滿足以下兩種情況：或者站點(diǎn)服務(wù)器就是你自己管理；或者是你租用的服務(wù)器，但你可以及時(shí)通知ISP服務(wù)商幫你定義需要的DSN。二、通過(guò)自定義連接字符串實(shí)現(xiàn)連接