用DreamWeaver打造留言板全

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

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

3、的工作區(qū)布局，其中每個文檔都位于自己的獨(dú)立浮動窗口中。面板組停靠在一起，但并不是停靠在一個更大的應(yīng)用程序窗口中。僅建議喜歡使用更熟悉的工作區(qū)的 Dreamweaver 4 用戶使用這種布局。教程副頁：Dreamweaver MX工作環(huán)境簡介頁面二、建立第一個站點(diǎn)（無服務(wù)器端腳本的普通靜態(tài)站點(diǎn)）下面我們建立一個沒有服務(wù)器端腳本的普通靜態(tài)站點(diǎn)，具體建立步驟如下：1、選擇“站點(diǎn)/新建站點(diǎn)”。（即從“站點(diǎn)”菜單中選擇“新建站點(diǎn)”命令。）即會出現(xiàn)“站點(diǎn)定義”對話框。 2、如果對話框顯示的是“高級”選項(xiàng)卡，則單擊“基本”。出現(xiàn)“站點(diǎn)定義向?qū)А钡牡谝粋€屏幕，要求您為站點(diǎn)輸入一個名稱。 3、在文本框中，輸入一

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

5、若要指定一個準(zhǔn)確的文件夾名稱，通過瀏覽指定要比鍵入路徑更加簡便易行，因此請單擊該文本框旁邊的文件夾圖標(biāo)。隨即會出現(xiàn)“選擇站點(diǎn)的本地根文件夾”對話框，在對話框中瀏覽到本地磁盤上可以存放所有站點(diǎn)的文件夾。然后單擊“確定”。圖4 建站向?qū)Фx站點(diǎn)文件的存儲位置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è)置。完成站點(diǎn)

6、的建立之后，在文件面板中你會看到如圖6所示的類似結(jié)果（本地視圖）。 圖6 文件面板中的本地視圖三、用系統(tǒng)模板創(chuàng)建站點(diǎn)的第一個頁面上面我們利用建站向?qū)?chuàng)建了一個站點(diǎn)，下面我們在這個站點(diǎn)中創(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)容。這個頁面很簡單，包括一些文本和一個圖

7、像。我們首先將那些英文文本換成一些中文文本（你可以將教程中示例頁面中的文本復(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í)際上都是在表格中，所以實(shí)際上是設(shè)置表格的單元格屬性，如圖9所示。圖9 單元格屬性面板5、關(guān)于圖像和文本的距離的設(shè)置。我們以后在編輯網(wǎng)頁時會經(jīng)常

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

9、一課的學(xué)學(xué)習(xí)，我們對對Dreammweaveer MX的的工作環(huán)境以以及如何創(chuàng)建建一個站點(diǎn)和和編輯頁面文文檔有了一個個初步的認(rèn)識識。從這次課課開始我們要要系統(tǒng)的來學(xué)學(xué)習(xí)如何創(chuàng)建建一個留言板板站點(diǎn)。通過過這個留言板板站點(diǎn)的建立立，我們要討討論在Dreeamweaaver MMX中經(jīng)常用用到的一些工工具和命令。一、創(chuàng)建留言板動態(tài)站點(diǎn)上一次課我們建立了一個靜態(tài)的站點(diǎn)，這一課我們首先建立一個包含服務(wù)器端腳本（ASP）的動態(tài)站點(diǎn)。以下是創(chuàng)建步驟：1、執(zhí)行“站點(diǎn)/新建站點(diǎn)”命令，得到建站向?qū)?，在?步中，給你的站點(diǎn)起個名字。比如是：liuyanban。2、單擊下一步，在下一個步驟畫面中進(jìn)行服務(wù)器腳本技術(shù)的

10、有關(guān)設(shè)置，如圖1所示。 圖1 建站向?qū)Х?wù)器腳本技術(shù)設(shè)置3、單擊下一步，進(jìn)入到建站向?qū)У南乱粋€畫面，這個步驟是關(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動畫或其他內(nèi)容片斷），則將這些資源放置在本地站點(diǎn)根文件夾內(nèi)的一個文件夾中。那么當(dāng)您要向頁中添加內(nèi)容時，這些資源將隨時可用。 現(xiàn)在我們就在留言板站點(diǎn)根文件夾中創(chuàng)建新文件夾，并把相應(yīng)的資源文件復(fù)制到資源文件夾中。1、假設(shè)我們的留言板站點(diǎn)的根文件夾路徑為：c:Inetpubwwwroo

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

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

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

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

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

16、ASSP腳本的動動態(tài)頁面。所所以它的類型型是動態(tài)腳本本頁面文檔，文文件擴(kuò)展名是是asp。你你可以選擇以以下兩種方法法中的任意一一種創(chuàng)建它：執(zhí)行行“文件/新新建”命令，在在彈出的新建建文檔對話框框中做如圖11所示的操作作。保存文檔檔時，文件命命名為maiin。 圖11 新建ASSP VBSScriptt動態(tà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è)計視圖。若要在“標(biāo)準(zhǔn)”視圖中創(chuàng)建表格，可以使用“插入表格”命令。Dreamweaver將根據(jù)您在“插入表格”對話框中選擇的選項(xiàng)創(chuàng)建一個表格，如圖2所示。圖2 插入表格和定義表格在本例中我們插入兩個表格：一個是1行1列，寬度是755像素。另一個是3行3列，寬度是600像素。在布局視圖下繪制表格：在“布局”視圖中，可以繪制布局單元格或布局表格以定義文檔的設(shè)計區(qū)域。這給了我們更大的靈活性，想一想在頁面上畫表格的滋味吧！我們需要在插入欄中切換到布局標(biāo)簽下，并單擊布局視圖，如圖3所示。單擊繪制布局表格或單元格按鈕以后就可以用鼠標(biāo)直接繪

18、制了。圖3 布局視圖3、編輯表格通過合并和拆分單元格以及插入行和列，可以很容易地修改初始表格結(jié)構(gòu)以創(chuàng)建更復(fù)雜的設(shè)計。我們還可以使表格的邊框變得不可見，然后用表格單元格（在表格中每一行與列的交叉處所創(chuàng)建的框）來控制 Web頁中文本和圖像的位置。當(dāng)觀眾在瀏覽器中查看頁面時就不會看到設(shè)計的基礎(chǔ)結(jié)構(gòu)。這些都是對表格的編輯。通常情況下，表格編輯在標(biāo)準(zhǔn)視圖下進(jìn)行。關(guān)于表格和單元格的選中常有兩種方法：用鼠標(biāo)直接指向表格選中它們。用鼠標(biāo)指向表格的邊框或者是內(nèi)部，根據(jù)鼠標(biāo)的狀態(tài)來判斷選中整個表格、某一行還是某個單元格。在表格中的任意一個單元格單擊鼠標(biāo)，然后在標(biāo)簽檢查器選擇相應(yīng)的標(biāo)簽，以實(shí)現(xiàn)選中表格或者單元格的目

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

36、中有幾個項(xiàng)目，就創(chuàng)建幾個單元格。在單元格中輸入文本或者插入圖像。分別定義每個單元格中的文本或者圖像的超級鏈接。2、創(chuàng)建Dreamweaver導(dǎo)航條（方法請參考前面）3、通過插入“代碼面板/代碼片段/導(dǎo)航”創(chuàng)建常見的導(dǎo)航條，如圖5所示。代碼片段中有很多常用的導(dǎo)航條代碼模板，利用它我們可以很容易的創(chuàng)建一些常見的導(dǎo)航條。圖6 代碼片段：導(dǎo)航4、創(chuàng)建Fireworks MX導(dǎo)航條Fireworks MX中也提供了創(chuàng)建導(dǎo)航條的具體工具和方法，我們在Fireworks MX中設(shè)計導(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)在頁面文檔插入Flash按鈕的目的。將多個Flash按鈕集合在一起也能實(shí)現(xiàn)導(dǎo)航條的功能。圖8 插入Flash按鈕 第六課經(jīng)過前面5課課的學(xué)習(xí)，我我們對Dreeamweaaver MMX創(chuàng)建和管管理站點(diǎn)頁面面文檔的前臺臺技術(shù)有了一一個概括的認(rèn)認(rèn)識和應(yīng)用了了，實(shí)際上前前5課所涉及及到的應(yīng)該是是創(chuàng)建和管理理站點(diǎn)的最基基本的一些技技術(shù)。掌握了了這些技術(shù)，我我們設(shè)計一般般的靜態(tài)站點(diǎn)點(diǎn)應(yīng)該是沒有有問題了。那那么現(xiàn)在開始始留言板站點(diǎn)點(diǎn)的

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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