DREAMWEAVER8.0官方教程-第2章

第2章Dreamweaver8入門設(shè)置站點和工程文件創(chuàng)立基于表格的頁面布局向頁面添加表格使用CCS設(shè)置頁面格式發(fā)布站點2.1設(shè)置站點和工程文件本節(jié)介紹MacromediaDreamweaver8站點的概念，并演示如何為例如Web站點設(shè)置工程文件。在Dreamweaver中，站點通常包含兩局部：本地計算機〔本地站點〕上的一組文件和遠程Web效勞器上的一個位置〔遠程站點〕。當準備好將本地計算機上的文件提供給公眾訪問時，需要將這些文件上傳到該位置?？梢允褂肈reamweaver的“文件”面板管理站點文件。使用Dreamweaver創(chuàng)立Web站點最常見的方法是在本地磁盤上創(chuàng)立并編輯頁面，然后將這些頁面的副本上傳到一個遠程Web效勞器以便通過網(wǎng)絡(luò)查看。在本節(jié)中，只學(xué)習(xí)如何設(shè)置本地站點，以便立即著手構(gòu)建Web頁面。在設(shè)置完本地Web站點之后，將學(xué)習(xí)如何創(chuàng)立遠程站點，以便將文件上傳到Web效勞器。在Dreamweaver中，“站點”一詞既表示W(wǎng)eb站點，又表示屬于Web站點的文檔的本地存儲位置。在開始構(gòu)建Web站點之前，需要建立站點文檔的本地存儲位置。2.1.1了解Dreamweaver站點本地文件夾是用戶的工作目錄。Dreamweaver將此文件夾稱為本地站點。本地文件夾通常是硬盤上的一個文件夾。遠程文件夾是存儲文件的位置，這些文件用于測試、生產(chǎn)、協(xié)作和發(fā)布等，具體取決于用戶的環(huán)境。Dreamweaver將此文件夾稱為遠程站點。遠程文件夾是運行Web效勞器的計算機上的某個文件夾。運行Web效勞器的計算機通常是〔但，不總是〕使你的站點可在Web上公開訪問的計算機。動態(tài)頁文件夾〔“測試效勞器”文件夾〕是Dreamweaver用于處理動態(tài)頁的文件夾。此文件夾與遠程文件夾通常是同一文件夾。除非在開發(fā)Web應(yīng)用程序，否那么無須考慮此文件夾。Dreamweaver站點可組織與Web站點相關(guān)的所有文檔，跟蹤和維護鏈接，管理文件，共享文件以及將站點文件傳輸?shù)絎eb效勞器。Dreamweaver站點最多由3局部組成，具體取決于用戶的計算機環(huán)境和所開發(fā)的Web站點的類型：可以使用“站點定義向?qū)А痹O(shè)置Dreamweaver站點，該向?qū)I(lǐng)用戶完成設(shè)置過程?；蛘?，也可以使用“站點定義”的“高級”設(shè)置，根據(jù)需要分別設(shè)置本地文件夾、遠程文件夾和測試文件夾。2.1.2設(shè)置工程文件創(chuàng)立本地站點時，可將任何現(xiàn)有資源〔圖像或其他內(nèi)容〕放在本地站點的根文件夾〔站點的主文件夾〕下。當準備向頁面中添加內(nèi)容時，可隨時使用這些資源。創(chuàng)立站點的第一步是將例如文件復(fù)制到硬盤上相應(yīng)的文件夾中，具體操作步驟如下：步驟1在硬盤上創(chuàng)立名為local_sites的新文件夾。步驟2在硬盤的Dreamweaver應(yīng)用程序文件夾中找到cafe_townsend文件夾。提示：如果將Dreamweaver安裝到其默認位置，那么該文件夾的路徑為C:\ProgramFiles\Macromedia\Dreamweaver8\Tutorial_assets\cafe_townsend\。步驟3將cafe_townsend文件夾復(fù)制到local_sites文件夾中。將使用cafe_townsend文件夾作為Dreamweaver站點的根文件夾〔主文件夾〕。2.1.3定義本地文件夾必須為創(chuàng)立的每一個新Web站點定義Dreamweaver本地文件夾。本地文件夾是用戶在硬盤上用來存儲站點文件的工作副本的文件夾。如果不定義本地文件夾，Dreamweaver中的某些功能可能無法正確運行。如果定義了本地文件夾，還可以管理文件，并使用一些文件傳輸方法在本地與Web效勞器之間傳輸文件。下面將放置了站點資源的文件夾定義為站點的本地文件夾，具體操作步驟如下：步驟1啟動Dreamweaver，選擇“站點”|“新建站點”命令。步驟2翻開“站點定義”對話框，單擊“高級”選項卡。步驟3從“分類”列表中選擇“本地信息”〔它應(yīng)當是默認選項〕，在“站點名稱”文本框中輸入CafeTownsend作為站點名稱。步驟4在“本地根文件夾”文本框中，指定local_sites文件夾中的cafe_townsend文件夾。提示：可以單擊文件夾圖標來瀏覽并選擇該文件夾，或者在“本地根文件夾”文本框中輸入路徑。步驟5在“默認圖像文件夾”文本框中，指定所需的文件夾。此時，“站點定義”對話框如右圖所示。步驟6單擊“確定”按鈕。此時“文件”面板顯示當前站點的新本地根文件夾，如以下圖所示?！拔募泵姘逯械奈募斜韺⒊洚斘募芾砥?，允許復(fù)制、粘貼、刪除、移動和翻開文件，就像在計算機桌面上一樣?，F(xiàn)在，已經(jīng)為站點定義了一個本地根文件夾。本地根文件夾是本地計算機上用來存儲Web頁面的工作副本的文件夾。如果以后想要發(fā)布頁面并使其可供公眾訪問，那么需要在運行Web效勞器的遠程計算機上定義一個遠程文件夾，用來存儲本地文件的已發(fā)布副本。2.2創(chuàng)立基于表格的頁面布局頁面布局將確定用戶的頁面在瀏覽器中會如何顯示，例如，顯示菜單、圖像和MacromediaFlash內(nèi)容將如何放置。表格是用于在HTML頁上顯示表格式數(shù)據(jù)以及對文本和圖形進行布局的強有力的工具?？梢允褂帽砀窨焖佥p松地創(chuàng)立布局。通常，創(chuàng)立Web站點并不是以翻開Dreamweaver并立即對頁面進行布局開始的。創(chuàng)立Web站點的初始工作從紙張或圖形編輯應(yīng)用程序〔如MacromediaFireworks〕開始。圖形設(shè)計人員通常會畫出Web站點綜合圖形的草圖〔也稱為“草樣”〕，以便向客戶展示并確保站點的初始構(gòu)思能讓客戶滿意設(shè)計草樣由客戶要求其Web站點具有的任意數(shù)目的頁面元素組成。例如，客戶可能會提出：“頁面頂端要有徽標，要有能鏈接到其他頁面的導(dǎo)航功能，有用于聯(lián)機存儲的局部和可以插入視頻剪輯的位置?！备鶕?jù)這些討論，設(shè)計人員開始對站點布局進行規(guī)劃，并制作滿足客戶要求的例如頁面草圖。2.2.1檢查設(shè)計草樣作為Web設(shè)計人員，需要對草樣進行轉(zhuǎn)換，使之最終形成可以使用的Web頁面〔通常需要其他圖形設(shè)計人員與Flash開發(fā)人員的幫助〕。如右圖所示，圖形設(shè)計人員已經(jīng)提供了Web頁面設(shè)計草樣，其中包括一些內(nèi)容區(qū)域和圖形方案。建立站點并檢查設(shè)計草樣后，就可以開始創(chuàng)立Web頁面了。首先將創(chuàng)立一個新頁面，并將它保存到你的Web站點的本地根文件夾中。該頁面最終將成為站點的主頁。具體操作步驟如下：2.2.2創(chuàng)立并保存新頁面步驟1選擇“文件”|“新建”命令，翻開“新建文檔”對話框。步驟2單擊“常規(guī)”選項卡，從“類別”列表中選擇“根本頁”，從“根本頁”列表中選擇“HTML”，如右圖所示，然后單擊“創(chuàng)立”按鈕。步驟6文件名即出現(xiàn)在應(yīng)用程序窗口頂部的標題欄中，在新文檔頂部的“文檔標題”文本框中，輸入CafeTownsend，如以下圖所示。提示：頁面的標題與文件名。站點訪問者在Web瀏覽器中查看頁面時將在瀏覽器窗口的標題欄中看到此標題。步驟7選擇“文件”|“保存”命令來保存該頁面。2.2.3插入表格在“行數(shù)”文本框中輸入3。在“列數(shù)”文本框中輸入1。在“表格寬度”文本框中輸入700，在其右側(cè)的“表格寬度”下拉列表框中選擇“像素”。在“邊框粗細”文本框中輸入0。在“單元格邊距”文本框中輸入0。在“單元格間距”文本框中輸入0。在頁面中添加一個表格，用于放置文本、圖形和MacromediaFlash資源。具體操作步驟如下：步驟1在頁面上單擊一次，在頁面左上角放置插入點，如右圖所示。步驟2選擇“插入”|“表格”命令，翻開“表格”對話框，執(zhí)行以下操作：此時對話框顯示如右圖所示，單擊“確定”按鈕。步驟3一個3行1列的表格即出現(xiàn)在文檔中。該表格的寬度為700像素，邊框、單元格邊距和單元格間距均為0，如以下圖所示。步驟4單擊該表格的右側(cè)取消對它的選擇。步驟5選擇“插入”|“表格”命令，翻開“表格”對話框，對第2個表格執(zhí)行以下操作：在“行數(shù)”文本框中輸入1。在“列數(shù)”文本框中輸入3。在“表格寬度”文本框中輸入700，在其右側(cè)的“表格寬度”下拉列表框中選擇“像素”。在“邊框粗細”文本框中輸入0。在“單元格邊距”文本框中輸入0。在“單元格間距”文本框中輸入0。步驟6單擊“確定”按鈕。第2個表格〔該表格具有1行3列〕即出現(xiàn)在第一個表格下方，如以下圖所示。在“行數(shù)”文本框中輸入1。在“列數(shù)”文本框中輸入1。在“表格寬度”文本框中輸入700，在其右側(cè)的“表格寬度”下拉列表框中選擇“像素”。在“邊框粗細”文本框中輸入0。在“單元格邊距”文本框中輸入0。在“單元格間距”文本框中輸入0。步驟7單擊該表格的右側(cè)取消對它的選擇。步驟8選擇“插入”|“表格”命令，翻開“表格”對話框，對第3個表格執(zhí)行以下操作：步驟9單擊“確定”按鈕。第3個表格〔該表格具有1行1列〕即出現(xiàn)在第2個表格下方，如以下圖所示。步驟10單擊該表格右側(cè)取消對它的選擇，此時頁面如以下圖所示?！皵U展表格”模式是用于臨時添加表格的單元格邊距和間距并增加表格邊框以簡化編輯的一種功能。特別需要指出的是，它使用戶能夠精確地放置插入點，而不會意外選擇錯誤的表格或其他表格內(nèi)容。注意：在“擴展表格”模式下完成對表格屬性的設(shè)置后，應(yīng)該返回到“標準”模式?！皵U展表格”模式不屬于所見即所得環(huán)境，因此某些操作〔如調(diào)整大小〕不會得到預(yù)期的結(jié)果。2.2.4設(shè)置表格屬性注意：插入表格后可能會看到表格選擇器〔由綠色線條指示〕。通過在表格外單擊，通?？梢噪[藏表格選擇器。也可以通過選擇“查看”|“可視化助理”|“表格寬度”禁用表格選擇器。使用“擴展表格”模式設(shè)置具體的表格屬性，具體操作步驟如下：步驟2在第1個表格的第1行內(nèi)單擊鼠標，如以下圖所示。步驟3在“屬性”檢查器的“單元格高度”文本框中輸入90，如以下圖所示，然后按Enter鍵。步驟1選擇“查看”|“表格模式”|“擴展表格模式”命令。注意：如果出現(xiàn)“擴展表格模式入門”對話框，如右圖所示，單擊“確定”按鈕。注意：如果未出現(xiàn)“單元格高度”文本框，單擊“屬性”檢查器右下角的展開箭頭

。步驟4在第1個表格的第2行內(nèi)單擊鼠標，如右圖所示。步驟5在“屬性”檢查器的“單元格高度”文本框中輸入166，然后按Enter鍵。步驟6在第1個表格的第3行內(nèi)單擊鼠標。步驟7在“屬性”檢查器的“單元格高度”文本框中輸入24，然后按Enter鍵?，F(xiàn)在第1個表格中的3行具有了不同的高度，如右圖所示。步驟8在第2個表格的第1列內(nèi)單擊鼠標，在“屬性”檢查器的“單元格寬度”文本框中輸入140，然后按Enter鍵。步驟9在第2個表格的第2列內(nèi)單擊鼠標，在“屬性”檢查器的“單元格寬度”文本框中輸入230，如以下圖所示，然后按Enter鍵。提示：如果已翻開表格選擇器〔選擇“查看”|“可視化助理”|“表格寬度”命令〕，將能看到剛剛在各個表格列上輸入的像素值。步驟10將第3列的寬度設(shè)置為330個像素。提示：無需為這個表格的單元格輸入任何高度值，因為這些單元格的高度將取決于以后添加的內(nèi)容。步驟11在第3個表格中單擊鼠標。步驟12在“屬性”檢查器的“單元格高度”文本框中輸入24，然后按Enter鍵。此時單元格的布局如右圖所示。步驟13單擊“文檔”窗口頂部的“擴展表格模式[退出]”鏈接，返回到“標準”模式。步驟14保存頁面。圖像占位符是在準備好將最終圖形添加到Web頁面之前使用的圖形。在對Web頁面進行布局時圖像占位符很有用，因為通過使用圖像占位符，可以在真正創(chuàng)立圖像之前確定圖像在頁面上的位置。具體操作步驟如下：步驟1在文檔窗口中，在第1個表格的第1行內(nèi)單擊鼠標。步驟2選擇“插入”|“圖像對象”|“圖像占位符”命令。步驟3翻開“圖像占位符”對話框，執(zhí)行以下操作：2.2.5插入圖像占位符在“名稱”文本框中輸入banner_graphic。在“寬度”文本框中輸入700。通過設(shè)置某些表格的單元格以及頁面背景的顏色，可向頁面添加更多顏色。2.2.6向頁面添加顏色在“高度”文本框中輸入90。單擊顏色框并從顏色選擇器中選擇一種顏色。在本例中選擇紅棕色〔#993300〕。保存“替換文本”文本框為空。步驟4單擊“確定”按鈕。圖像占位符出現(xiàn)在第1個表格內(nèi)，圖像占位符顯示最終放置于此處的圖像的標簽和大小屬性，如以下圖所示。注意：當在瀏覽器中查看時，不顯示圖像占位符的標簽文字和大小文本。步驟5保存頁面。假設(shè)要設(shè)置單元格的顏色，具體操作步驟如下：步驟1在第2個表格的第1個單元格內(nèi)單擊鼠標。步驟2單擊標簽選擇器中的<td>標簽〔單元格標簽〕以選擇該單元格，如以下圖所示。步驟3在“屬性”檢查器中的“背景顏色”文本框輸入#993300，然后按Enter鍵。表格單元格的顏色即變?yōu)榧t棕色，如以下圖所示。1．設(shè)置單元格顏色步驟4在第2個單元格內(nèi)單擊鼠標，然后單擊標簽選擇器中的<td>標簽〔單元格標簽〕以選擇該單元格。步驟5在“屬性”檢查器中的“背景顏色”文本框中輸入#F7EEDF，然后按Enter。表格單元格的顏色即變?yōu)闇\棕色。步驟6重復(fù)步驟4～步驟5，將第3個表格單元格的顏色也更改為淺棕色。步驟7設(shè)置完這3個單元格的顏色后，單擊一次表格的外部，取消選擇該表格。通過“頁面屬性”對話框可以設(shè)置一些頁面屬性，包括頁面字體的大小和顏色、已訪問鏈接的顏色以及頁面邊距等。具體操作步驟如下：2．設(shè)置頁面背景顏色步驟1選擇“修改”|“頁面屬性”命令，翻開“頁面屬性”對話框。步驟2在“外觀”類別中，單擊“背景顏色”顏色框，然后從顏色選擇器中選擇黑色〔#000000〕，如右圖所示。步驟3單擊“確定”按鈕。頁面的背景即變?yōu)楹谏?，如以下圖所示。2.3向頁面添加內(nèi)容可以向Web頁面添加多種內(nèi)容，包括圖形、MacromediaFlash文件、MacromediaFlash視頻文件、文本等。向頁面添加內(nèi)容后，即可在瀏覽器中進行預(yù)覽，這樣可以查看頁面在Web上會如何顯示。在本例中，通過向主頁添加資源來學(xué)習(xí)如何添加圖像、MacromediaFlash文件、MacromediaFlash視頻文件和文本。完成后的頁面如右圖所示。2.3.1插入圖像創(chuàng)立頁面布局之后，就可以將資源添加到頁面。在Dreamweaver中有多種方法向Web頁面添加圖像。要替換圖像占位符，具體操作步驟如下：步驟1雙擊頁面頂部的圖像占位符，如以下圖所示。1．替換圖像占位符步驟2翻開“選擇圖像源文件”對話框，瀏覽至定義為站點根文件夾的cafe_townsend文件夾中的images文件夾。步驟3選擇banner_graphic.jpg文件，如右圖所示，單擊“確定”按鈕。步驟4Dreamweaver將圖像占位符替換為橫幅圖形，如以下圖所示。要使用“插入”菜單插入圖像，具體操作步驟如下：步驟1在第1個表格的第3行〔低于剛插入的橫幅圖形兩行，彩色表格單元格之上〕內(nèi)單擊鼠標，如右圖所示。2．使用“插入”菜單插入圖像步驟5在表格外單擊鼠標取消選中該圖像。步驟2選擇“插入”|“圖像”命令，翻開“選擇圖像源文件”對話框。一個長的彩色圖形出現(xiàn)在該表格行中，如以下圖所示。它看上去更像表格單元格的背景色，而不是圖形，但如果仔細看，將看到該圖形具有圓角。添加完所有資源之后，這種圓角效果將使頁面的下半局部呈現(xiàn)一種有趣的外觀。步驟3瀏覽至cafe_townsend文件夾中的images文件夾，選擇body_main_header.gif文件，單擊“確定”按鈕。注意：如果出現(xiàn)“圖像標簽輔助功能屬性”對話框，如右圖所示，單擊“確定”按鈕。3．通過拖動插入圖像要通過拖動插入圖像，具體操作步驟如下：步驟1在頁面上最后一個表格的最后一行〔彩色表格單元格之下〕中單擊鼠標。步驟2在“文件”面板中，找到body_main_footer.gif文件〔它位于images文件夾中〕，將該文件拖到最后一個表格的插入點，如以下圖所示。步驟3在表格外單擊鼠標，并保存該頁面。步驟3按Enter鍵創(chuàng)立更多空間，如右圖所示。步驟4單擊“文件”面板中的“資源”選項卡，或選擇“窗口”|“資源”命令顯示站點資源，如以下圖所示。4．從“資源”面板插入圖像要從“資源”面板插入圖像，具體操作步驟如下：步驟1在第1個淺棕色表格單元格內(nèi)單擊鼠標。步驟2在“屬性”檢查器中，從“水平”下拉列表框中選擇“居中對齊”，如以下圖所示，然后從“垂直”下拉列表框中選擇“頂端”。該操作將表格單元格的內(nèi)容對齊到單元格的中間，并使單元格的內(nèi)容從單元格頂端開始。步驟5如果未選擇“圖像”視圖，那么單擊“圖像”以查看圖像資源。步驟6在“資源”面板中，選擇street_sign.jpg文件，執(zhí)行以下操作之一：將street_sign.jpg文件拖到中心位置的表格單元格中的插入點。單擊“資源”面板底部的“插入”按鈕。步驟7圖形顯示在頁面上，如以下圖所示。步驟8在表格外單擊鼠標取消選中該圖像。步驟9保存該頁。2.3.2插入并播放Flash文件要插入的Flash文件是一個靈活消息區(qū)域〔FMA〕文件。FMA是向訪問者顯示告知性信息的一種常見的Flash應(yīng)用程序類型，可以根據(jù)業(yè)務(wù)需要更改告知性信息。假設(shè)要插入FlashFMA文件，需要插入HTML代碼，將文件嵌入Dreamweaver頁面。執(zhí)行此操作的最簡單方法是將SWF文件〔導(dǎo)出的Flash影片文件〕插入頁面。將SWF文件插入Dreamweaver時，Dreamweaver會替用戶寫入所有必需的FlashHTML代碼。具體操作步驟如下：步驟1在第1個表格的第2行內(nèi)單擊鼠標。步驟2在“屬性”檢查器中，從“水平”下拉列表框中選擇“居中”，然后從“垂直”下拉列表框中選擇“居中”，如以下圖所示。該操作將表格單元格的內(nèi)容放置到單元格的中間。步驟3選擇“插入”|“媒體”|“Flash”命令，翻開“選擇文件”對話框，如以下圖所示。步驟4瀏覽至站點的cafe_townsend根文件夾，選擇flash_fma.swf文件，單擊“確定”按鈕。Flash內(nèi)容占位符〔而不是FMA本身的場景〕將顯示在文檔窗口中。這是因為HTML代碼“指向”SWF文件flash_fma.swf。當用戶載入index.html頁面時，瀏覽器會播放該SWF文件。步驟5在插入SWF文件之后，只要不單擊頁面上的其他位置，F(xiàn)lash內(nèi)容占位符就會保持為選中狀態(tài)。如果它不處于選中狀態(tài)，通過單擊Flash內(nèi)容占位符即可將其選中。步驟6在“屬性”檢查器中單擊“播放”按鈕，如以下圖所示。Dreamweaver在“文檔”窗口中播放Flash文件，顯示站點訪問者在瀏覽器中查看頁面時將看到的內(nèi)容，如以下圖所示。步驟7在“屬性”檢查器中單擊“停止”按鈕可以結(jié)束Flash文件播放。步驟8保存該頁。使用提供的資源插入Flash視頻文件，具體操作步驟如下：步驟1在第1個淺棕色表格單元格內(nèi)單擊鼠標，如以下圖所示。步驟2選擇“插入”|“媒體”|“Flash視頻”命令，翻開“插入Flash視頻”對話框。步驟3從“視頻類型”下拉列表框中選擇“漸進式下載視頻”。2.3.3插入Flash視頻步驟4單擊URL文本框右側(cè)的“瀏覽”按鈕，瀏覽至站點的根文件夾cafe_townsend中，選擇cafe_townsend_home.flv文件。所選的FLV文件名稱顯示在URL文本框中，如右圖所示。步驟5從“外觀”下拉列表框中選擇HaloSkin2。所選外觀的預(yù)覽會出現(xiàn)在“外觀”下拉列表框的下方?！巴庥^”選項指定將包含F(xiàn)lash視頻內(nèi)容的Flash視頻組件的外觀。步驟6在“寬度”和“高度”文本框中，執(zhí)行以下操作：在“寬度”文本框中輸入180。在“高度”文本框中輸入135?！皩挾取焙汀案叨取蔽谋究蛑械闹狄韵袼貫閱挝恢付‵LV文件的寬度和高度?？梢匀我庹{(diào)整這些值以更改Web頁面上的Flash視頻的大小。增加視頻的尺寸時，視頻的圖片品質(zhì)通常會下降。提示：單擊“檢測大小”按鈕可以確定FLV文件的準確寬度和高度。但是，有時Dreamweaver無法確定FLV文件的尺寸大小。在這種情況下，必須手動輸入寬度和高度值。

注意：“包括外觀”選項是FLV文件的寬度和高度與所選外觀的寬度和高度的加和。步驟7其余選項保存默認的選擇值：限制高寬比：保持Flash視頻組件的寬度和高度之間的高寬比不變。默認情況下會選擇此選項。自動播放：指定在Web頁面翻開時是否播放視頻。默認情況下取消選擇該選項。自動重新播放：指定播放控件在視頻播放完之后是否返回起始位置。默認情況下取消選擇該選項。步驟8單擊“確定”按鈕。Flash視頻內(nèi)容添加到Web頁面。2.3.4插入文本可以在Dreamweaver文檔窗口中直接鍵入文本，也可以從其他源〔如MicrosoftWord或純文本文件〕復(fù)制并粘帖文本。然后，使用層疊樣式表〔CSS〕設(shè)置文本格式。要插入正文文本，具體操作步驟如下：步驟1在“文件”面板中，找到要插入的文本文件sample_text.txt文件〔在cafe_townsend根文件夾中〕并雙擊該文件的圖標，在Dreamweaver中翻開它。1．插入正文文本“插入Flash視頻”命令生成一個視頻播放器SWF文件和一個外觀SWF文件，它們用于在Web頁面上顯示Flash視頻內(nèi)容〔可能需要單擊“文件”面板中的“刷新”按鈕來查看新的文件〕。這些文件與Flash視頻內(nèi)容所添加到的HTML文件存儲在同一目錄中。當上傳包含F(xiàn)lash視頻內(nèi)容的HTML頁面時，Dreamweaver將這些文件作為相關(guān)文件上傳。步驟9保存該頁。此時窗口處于“代碼”視圖中，如右圖所示，并且不能切換到“設(shè)計”視圖〔到現(xiàn)在為止一直使用的視圖〕，因為該文件不是HTML文件。步驟2在sample_text.txt“文檔”窗口中，按Ctrl+A鍵選擇所有文本，然后選擇“編輯”|“復(fù)制”命令以復(fù)制該文本。步驟3單擊文檔右上角中的“關(guān)閉”按鈕關(guān)閉sample_text.txt文件。步驟4在index.html“文檔”窗口中，在第2個淺棕色的單元格內(nèi)單擊鼠標。步驟5選擇“編輯”|“粘貼”命令，復(fù)制的文本出現(xiàn)在所選表格單元格中，如右圖所示。根據(jù)顯示器的分辨率，該表格〔由3列組成〕將伸展以適合該文本。步驟6確保插入點仍在剛剛粘貼文本的表格單元格中。如果插入點不在，那么在表格單元格內(nèi)單擊鼠標。步驟7在“屬性”檢查器中，從“垂直”下拉列表框中選擇“頂端”，將剛剛粘貼的文本沿表格單元格的頂端對齊。步驟8保存該頁。要插入導(dǎo)航條文本，具體操作步驟如下：步驟1在由3列組成的表格的第1列〔紅棕色的列〕中單擊鼠標。步驟2輸入單詞Cuisine，如右圖所示。步驟3按空格鍵并輸入ChefIpsum。步驟4重復(fù)前面的步驟，直到輸入以下單詞，并且在每個單詞之間留一個空格：Articles，SpecialEvents，Location，Menu，ContactUs，如以下圖所示。2．插入導(dǎo)航條文本鍵入時不要按Enter鍵。只使用空格鍵分隔單詞，并使這些單詞自然換行。表格單元格的固定寬度確定了一行中可容納的單詞個數(shù)。步驟5在插入點仍舊處于由3列組成的表格的第1個單元格中時，在標簽選擇器中單擊<td>標簽，如以下圖所示。步驟6在“屬性”檢查器中，從“垂直”下拉列表框中選擇“頂端”，將剛剛鍵入的文本沿表格單元格的頂端對齊。步驟7保存頁面。2.3.5創(chuàng)立鏈接鏈接是在Web頁面中插入的指向其他文檔的引用?？梢詫⑷魏晤愋偷馁Y源轉(zhuǎn)換為鏈接，但最常用的鏈接類型是文本鏈接?？梢栽谡军c創(chuàng)立過程的任何階段創(chuàng)立鏈接。在本節(jié)中，將為導(dǎo)航條創(chuàng)立鏈接，即使尚未將該文本格式設(shè)置為導(dǎo)航條的形式。cafe_townsend站點根文件夾包含可以鏈接的已完成的HTML頁面〔CafeTownsend的菜單頁〕。將把此頁面用于導(dǎo)航中的所有鏈接，即使在建立實際站點時，這些鏈接中的每一個鏈接將對應(yīng)于不同的頁面。要在站點中創(chuàng)立鏈接，具體操作步驟如下：步驟1當index.html頁面在文檔窗口中處于翻開的情況下，選擇在由3列組成的表格的第1個單元格中鍵入的單詞Cuisine，如右圖所示。提示：只選擇單詞Cuisine，不要選中它后面的空格。步驟2在屬性檢查器中單擊“鏈接”文本框旁的文件夾圖標?！霸O(shè)計”視圖為用戶提供了頁面在Web上顯示時的大致外觀，但是要查看確切的最終結(jié)果，那么必須在瀏覽器中預(yù)覽頁面。雖然瀏覽器通常會生成相同的結(jié)果，但是每個瀏覽器版本顯示HTML頁面的方式可能會不同。2.3.6在瀏覽器中預(yù)覽頁面步驟3翻開“選擇文件”對話框，瀏覽至根文件夾cafe_townsend，選擇menu.html文件，單擊“確定”按鈕。步驟4在頁面上單擊鼠標取消選擇單詞Cuisine。Cuisine文本出現(xiàn)下劃線并變成藍色，表示它現(xiàn)在是一個鏈接。步驟5重復(fù)上述步驟，為ChefIpsum，Articles，SpecialEvents，Location，Menu和ContactUs分別創(chuàng)立一個鏈接。將每個單詞或一組單詞鏈接到menu.html頁面，并在創(chuàng)立鏈接時注意防止在單詞或單詞組前后出現(xiàn)空格。這僅僅是一組空白鏈接；在現(xiàn)實站點中，您會將導(dǎo)航中的每個單詞鏈接到各自不同的頁面。注意：當在Dreamweaver的“文檔”窗口中單擊鏈接時，它們并不起作用；鏈接只在瀏覽器中才起作用。為確保鏈接正常工作，在瀏覽器中預(yù)覽頁面。步驟6保存頁面。Dreamweaver試圖生成在各種瀏覽器中看起來盡可能相似的HTML；但有時候差異難以防止。因此，在瀏覽器中預(yù)覽工作是使用戶了解在發(fā)布頁面后站點訪問者將看到的外觀的惟一方式。要在瀏覽器中預(yù)覽頁面，具體操作步驟如下：步驟1確保index.html文件在文檔窗口中翻開。步驟2按F12鍵啟動主瀏覽器〔如果尚未運行〕并顯示索引頁面，如以下圖所示。注意：Dreamweaver自動檢測到主瀏覽器并使用它進行預(yù)覽。如果預(yù)覽未顯示出來，或者如果它未顯示在預(yù)期的瀏覽器中，切換回Dreamweaver并選擇“文件”|“在瀏覽器中預(yù)覽”|“編輯瀏覽器列表”命令。當在瀏覽器中預(yù)覽的“首選參數(shù)”對話框出現(xiàn)時，將正確的瀏覽器添加到列表中。步驟3切換回Dreamweaver以執(zhí)行任何必要的更改。步驟4保存工作并再次按F12鍵，以確保更改生效。2.4使用CSS設(shè)置頁面格式可以使用CSS以HTML無法提供的方式來設(shè)置文本格式和定位文本，從而能更加靈活自如地控制頁面的外觀。本例將使用層疊樣式表〔CSS〕設(shè)置主頁上文本的格式。將創(chuàng)立不同類型的CSS規(guī)那么來設(shè)置正文文本的格式，還將設(shè)置該頁左側(cè)的鏈接文本的格式來創(chuàng)立導(dǎo)航條。完成后的頁面如右圖所示。2.4.1了解CSS層疊樣式表〔CSS〕是一系列格式設(shè)置規(guī)那么，它們控制Web頁面內(nèi)容的外觀。使用CSS設(shè)置頁面格式時，內(nèi)容與表現(xiàn)形式是相互分開的。頁面內(nèi)容〔HTML代碼〕位于自身的HTML文件中，而定義代碼表現(xiàn)形式的CSS規(guī)那么位于另一個文件〔外部樣式表〕或HTML文檔的另一局部〔通常為<head>局部〕中。使用CSS可以非常靈活并更好地控制頁面的外觀，從精確的布局定位到特定的字體和樣式等。CSS使用戶可以控制許多僅使用HTML無法控制的屬性。例如，可以為所選文本指定不同的字體大小和單位〔像素、磅值等〕。通過使用CSS從而以像素為單位設(shè)置字體大小，還可以確保在多個瀏覽器中以更一致的方式處理頁面布局和外觀。CSS格式設(shè)置規(guī)那么由兩局部組成：選擇器和聲明。選擇器是標識已設(shè)置格式元素〔如P，H1、類名稱或ID〕的術(shù)語，而聲明那么用于定義樣式元素。在下面的例如中，H1是選擇器，介于大括號{}之間的所有內(nèi)容都是聲明：H1{font-size:16pixels;font-family:Helvetica;自定義CSS規(guī)那么〔也稱為“類樣式”〕可以將樣式屬性應(yīng)用到任何文本范圍或文本塊。所有類樣式均以句點〔.〕開頭。例如，可以創(chuàng)立稱為.red的類樣式，設(shè)置規(guī)那么的color屬性為紅色，然后將該樣式應(yīng)用到一局部已定義樣式的段落文本中。HTML標簽規(guī)那么重定義特定標簽〔如p或h1〕的格式。創(chuàng)立或更改h1標簽的CSS規(guī)那么時，所有用h1標簽設(shè)置了格式的文本都會立即更新。font-weight:bold;}聲明由兩局部組成：屬性〔如font-family〕和值〔如Helvetica〕。上述例如為H1標簽創(chuàng)立了樣式：鏈接到此樣式的所有H1標簽的文本都將是16像素大小并使用Helvetica字體和粗體。術(shù)語“層疊”是指對同一個元素或Web頁面應(yīng)用多個樣式的能力。例如，可以創(chuàng)立一個CSS規(guī)那么來應(yīng)用顏色，創(chuàng)立另一個規(guī)那么來應(yīng)用邊距，然后將兩者應(yīng)用于一個頁面中的同一文本。所定義的樣式“層疊”到Web頁面上的元素，并最終創(chuàng)立想要的設(shè)計。CSS的主要優(yōu)點是容易更新；只要對一處CSS規(guī)那么進行更新，那么使用該定義樣式的所有文檔的格式都會自動更新為新樣式。在Dreamweaver中可以定義以下規(guī)那么類型：CSS選擇器規(guī)那么〔高級樣式〕重定義特定元素組合的格式，或其他CSS允許的選擇器形式的格式〔例如，每當h2標題出現(xiàn)在表格單元格內(nèi)時，就應(yīng)用選擇器tdh2〕。高級樣式還可以重定義包含特定id屬性的標簽的格式〔例如，由#myStyle定義的樣式可以應(yīng)用到所有包含屬性/值對id="myStyle"的標簽〕。首先要創(chuàng)立包含CSS規(guī)那么〔定義段落文本樣式〕的外部樣式表。在外部樣式表中創(chuàng)立樣式時，可以在一個中央位置同時控制多個Web頁面的外觀，而不需要為每個Web頁面分別設(shè)置樣式。具體操作步驟如下：步驟1選擇“文件”|“新建”命令。步驟2翻開“新建文檔”對話框，在“類別”列表框中選擇“根本頁”，在“根本頁”列中選擇“CSS”，如右圖所示，單擊“創(chuàng)立”按鈕。2.4.2創(chuàng)立新的樣式表空白樣式表將出現(xiàn)在“文檔”窗口中?！霸O(shè)計”視圖和“代碼”視圖按鈕已被禁用。CSS樣式表是純文本文件，其內(nèi)容將不會用于在瀏覽器中查看。步驟3選擇“文件”|“保存”命令，設(shè)置保存位置為cafe_townsendfolder文件夾，輸入文件名cafe_townsend.css，單擊“保存”按鈕。步驟4在樣式表中鍵入以下代碼：p{font-family:Verdana,sans-serif;font-size:11px;color:#000000;line-height:18px;padding:3px;}當輸入代碼時，Dreamweaver將使用代碼提示為用戶建議一些選項，以幫助完成輸入。當看到希望Dreamweaver為你完成輸入的代碼時，按Enter鍵。不要忘記在每行結(jié)尾處的屬性值后面加上一個分號。完成后的代碼類似以下圖所示。步驟5保存樣式表。當將樣式表附加到Web頁面中時，在樣式表中定義的規(guī)那么將應(yīng)用到頁面上的相應(yīng)元素。例如，當將cafe_townsend.css樣式表附加到index.html頁時，將根據(jù)用戶定義的CSS規(guī)那么設(shè)置所有段落文本〔用HTML代碼中的<p>標簽設(shè)置格式的文本〕的格式。具體操作步驟如下：步驟1在“文檔”窗口中，翻開CafeTownsend的index.html文件。步驟2選擇頁面中的第一段文本，如以下圖所示。2.4.3附加樣式表步驟3在“屬性”檢查器中查看，并確保使用段落標簽設(shè)置了該段落的格式。如果“屬性”檢查器中的“格式”下拉列表框中顯示“段落”，那么已使用段落標簽設(shè)置了段落的格式，如以下圖所示。如果“屬性”檢查器中的“格式”下拉列表框中顯示“無”或其他內(nèi)容，那么選擇“段落”來設(shè)置段落的格式。步驟4對第2段文本重復(fù)步驟3。步驟5在“CSS樣式”面板中，單擊位于面板右下角的“附加樣式表”按鈕，如左圖所示。步驟6翻開“鏈接外部樣式表”對話框，選擇文件夾completed_files\dreamweaver中的cafe_townsend.css文件，如右圖所示。步驟7單擊“確定”按鈕?！拔臋n”窗口中的文本將根據(jù)外部樣式表中的CSS規(guī)那么來設(shè)置格式?！癈SS樣式”面板可讓用戶跟蹤影響當前所選頁面元素的CSS規(guī)那么和屬性，或影響整個文檔的規(guī)那么和屬性，還可以在不翻開外部樣式表的情況下修改CSS屬性。具體操作步驟如下：步驟1確保index.html頁在“文檔”窗口中翻開。步驟2單擊“CSS樣式”面板頂部的“全部”按鈕，檢查CSS規(guī)那么。在“全部”模式下，CSS面板顯示應(yīng)用到當前文檔的所有CSS規(guī)那么，不管這些規(guī)那么是在外部樣式表中，還是在自身文檔中。應(yīng)在“所有規(guī)那么”窗格中看到兩個主要類別：一個<樣式>標簽類別和一個cafe_townsend.css類別，如以下圖所示。2.4.4“CSS樣式”面板步驟3假設(shè)未展開<樣式>標簽類別，單擊展開該類別。步驟4單擊正文規(guī)那么，值為#000000的background-color屬性出現(xiàn)在下面的“屬性”窗格中。步驟5單擊展開cafe_townsend.css類別。步驟6單擊p規(guī)那么。在外部樣式表中為p規(guī)那么定義的所有屬性和值將顯示在下面的“屬性”窗格中，如以下圖所示。步驟7在“文檔”窗口中，在剛設(shè)置格式的兩個段落中的任何位置單擊鼠標。步驟8在“CSS樣式”面板中，單擊面板頂部的“正在”按鈕，然后檢查CSS樣式。在“正在”模式中，CSS面板顯示當前所選內(nèi)容的屬性的摘要。顯示的屬性與外部樣式表中p規(guī)那么的屬性相對應(yīng)。2.4.5創(chuàng)立新的CSS規(guī)那么使用“CSS樣式”面板可以創(chuàng)立自定義的CSS規(guī)那么或類樣式。類樣式可以設(shè)置任何范圍或文本塊的樣式屬性，并可以應(yīng)用到任何HTML標簽。具體操作步驟如下：步驟1在“CSS樣式”面板中，單擊面板右下角的“新建CSS規(guī)那么”按鈕，如右圖所示。步驟2翻開“新建CSS規(guī)那么”對話框，從“選擇器類型”選項中選擇“類”，如以下圖所示。步驟3在“名稱”文本框中輸入.bold。提示：確保在單詞“bold”前輸入句點〔.〕。所有類樣式必須以句點開頭。步驟4在“定義在”下拉列表框中選擇cafe_townsend.css。在“字體”文本框中輸入Verdana,sans-serif。在“大小”文本框中輸入11，并在其右側(cè)的下拉列表框中選擇“像素”。步驟5單擊“確定”按鈕，翻開“CSS規(guī)那么定義”對話框，表示正在cafe_townsend.css文件中創(chuàng)立一個稱為.bold的類樣式，如右圖所示。步驟6執(zhí)行以下操作：在“行高”文本框中輸入18，并在靠右側(cè)的下拉列表框中選擇“像素”。從“粗細”下拉列表框中選擇“粗體”。在“顏色”文本框中輸入#990000。步驟7單擊“確定”按鈕。再單擊“CSS樣式”面板頂部的“全部”按鈕。步驟8假設(shè)未展開cafe_townsend.css類別，單擊該類別旁邊的按鈕。Dreamweaver已將.bold類樣式添加到在外部樣式表中定義的規(guī)那么列表中。如果在“所有規(guī)那么”窗格中單擊.bold規(guī)那么，那么該規(guī)那么的屬性將出現(xiàn)在“屬性”窗格中。新規(guī)那么還出現(xiàn)在“屬性”檢查器的“樣式”下拉列表框中。2.4.6將類樣式應(yīng)用到文本要將創(chuàng)立的類規(guī)那么應(yīng)用到某些段落文本，具體操作步驟如下：步驟1在“文檔”窗口中，選擇第1段中文本的前4個單詞：CafeTownsend’svisionarychef。步驟2在“屬性”檢查器中，從“樣式”下拉列表框中選擇“bold”，如右圖所示?！按煮w”類樣式應(yīng)用到文本。步驟3重復(fù)步驟2，將“粗體”類樣式應(yīng)用到第2段的前4個單詞，如以下圖所示。步驟4保存頁面。2.4.7設(shè)置導(dǎo)航條文本的格式許多Web頁面使用內(nèi)含文本的彩色矩形圖像來創(chuàng)立導(dǎo)航條。但是，如果使用CSS，所需要設(shè)置的只是鏈接文本和一些格式。通過使用display:block屬性并設(shè)置塊的寬度，可以有效地創(chuàng)立矩形，而不需要另外使用圖像。為導(dǎo)航創(chuàng)立新規(guī)那么的具體操作步驟如下：1．為導(dǎo)航創(chuàng)立新規(guī)那么步驟1假設(shè)未翻開cafe_townsend.css文件，那么翻開該文件，或單擊其選項卡來顯示該文件。步驟2定義一個新規(guī)那么，方法是在該文件的.bold類樣式后面鍵入以下代碼：.navigation{}這是一個空規(guī)那么，文件中的代碼如右圖所示。步驟3保存cafe_townsend.css文件。步驟4假設(shè)未翻開index.html文件，那么翻開該文件。步驟5在“CSS樣式”面板中，確保選中了“全部”模式，選擇新的.navigation規(guī)那么，然后單擊面板右下角的“編輯樣式”按鈕，如右圖所示。步驟6翻開“CSS規(guī)那么定義”對話框，如右圖所示，執(zhí)行以下操作：在“字體”文本框中輸入Verdana,sans-serif。從“大小”下拉列表框中選擇16，然后從其右側(cè)的下拉列表框中選擇“像素”。從“樣式”下拉列表框中選擇“正?！?。從“修飾”區(qū)域中選擇“無”復(fù)選框。從“粗細”下拉列表框中選擇“粗體”。在“顏色”文本框中輸入#FFFFFF。步驟7單擊“確定”按鈕。步驟8在“CSS樣式”面板中，確保選中了.navigation規(guī)那么，然后單擊“顯示列表視圖”按鈕，如右圖所示。列表視圖可使“屬性”窗格按字母順序顯示所有可用屬性〔與“設(shè)置屬性”視圖不同，“設(shè)置屬性”視圖只顯示已設(shè)置的屬性〕。步驟9單擊background-color屬性右邊的列，假設(shè)要查看屬性的完整內(nèi)容，將鼠標指針停留在該屬性上。步驟10輸入十六進制值#993300，如以下圖所示，按Enter鍵。提示：假設(shè)要查看工作對外部樣式表的影響，在工作時保持cafe_townsend.css文件在“文檔”窗口中處于翻開狀態(tài)。在“CSS樣式”面板中做出選擇的同時將看到Dreamweaver在樣式表中寫入CSS代碼。步驟11找到display屬性，在右邊的列中單擊鼠標，然后從下拉列表框中選擇block，如左圖所示。步驟12找到padding屬性，在右邊的列中單擊鼠標，輸入值8px，然后按Enter鍵。步驟13找到width屬性，在右邊的列中單擊鼠標，在第一個文本框中輸入140，從下拉列表框中選擇像素，然后按Enter鍵。步驟14單擊“只顯示設(shè)置屬性”按鈕，以便在“屬性”窗格中僅顯示用戶設(shè)置的屬性，如右圖所示。步驟15單擊cafe_townsend.css文件以顯示該文件，可以看到Dreamweaver已經(jīng)將指定的所有屬性添加到該文件中。步驟16保存并關(guān)閉cafe_townsend.css文件。應(yīng)用規(guī)那么的具體操作步驟如下：步驟1在“文檔”窗口中翻開index.html頁，單擊單詞Cuisine將插入點置于該單詞中的某個位置，如以下圖所示。2．應(yīng)用規(guī)那么步驟2在標簽選擇器中，單擊最右邊的<a>標簽，如以下圖所示。提示：此操作將為指定的<a>標簽或鏈接選擇所有文本。步驟3在“屬性”檢查器中，從“樣式”下拉列表框中選擇navigation。在“文檔”窗口中，Cuisine文本的外觀完全發(fā)生了變化，如以下圖所示。步驟4對于導(dǎo)航條中的每個鏈接，重復(fù)步驟1～步驟3。必須為每個<a>標簽或鏈接分配一個導(dǎo)航類樣式，因此，使用標簽選擇器分別選擇每個鏈接，然后逐個為每一個鏈接分配類樣式是很重要的，如以下圖所示。提示：在設(shè)置鏈接文本的格式時確實有困難，既要確保每個〔或每組〕鏈接的單詞之間有空格〔不是回車〕。還要確保兩個鏈接之間的空格本身未被鏈接。如果空格已鏈接，小心選擇鏈接的空格，在“屬性”檢查器中去除“鏈接”文本框，并按Enter鍵。步驟5完成對導(dǎo)航條的所有單詞的格式設(shè)置后，保存該頁面，然后在瀏覽器中預(yù)覽工作〔選擇“文件”|“在瀏覽器中預(yù)覽”命令〕?？梢詥螕翩溄右源_保其有效。添加鼠標經(jīng)過效果可以使導(dǎo)航條塊的背景色在每次鼠標指針經(jīng)過某個鏈接時改變顏色。假設(shè)要添加鼠標經(jīng)過效果，添加包含:hover的新規(guī)那么。具體操作步驟如下：3．添加鼠標經(jīng)過效果步驟1翻開cafe_townsend.css文件。步驟2選擇整個.navigation規(guī)那么，如右圖所示。步驟3選擇“編輯”|“復(fù)制”命令復(fù)制文本。步驟4在該規(guī)那么的末尾單擊鼠標，然后多按幾次Enter鍵創(chuàng)立一些空格，如右圖所示。步驟5選擇“編輯”|“粘貼”命令將已復(fù)制的文本粘貼到剛創(chuàng)立的空格中。步驟6將:hover添加到已粘貼的.navigation選擇器中，如以下圖所示。步驟7在新的.navigation:hover規(guī)那么中，將當前的背景色#993300替換為#D03D03，如以下圖所示。步驟8保存并關(guān)閉該文件。步驟9在“文檔”窗口中翻開index.html文件，選擇“文件”|“在瀏覽器中預(yù)覽”命令在瀏覽器中預(yù)覽該頁面。當將鼠標指針停留在任何一個鏈接上時，可以看到新的鼠標經(jīng)過效果。2.5發(fā)布站點遠程站點通常是運行Web效勞器的遠程計算機上保存本地文件副本的位置。用戶在瀏覽器中查看頁面時，就是在訪問在Web效勞器上運行的遠程站點。創(chuàng)立了Web站點后，可以通過將文件上傳到遠程文件夾來發(fā)布該站點。遠程文件夾是存儲文件的位置，這些文件用于測試、生產(chǎn)、協(xié)作和發(fā)布，具體取決于用戶的環(huán)境。Dreamweaver將此文件夾稱為遠程站點。在發(fā)布站點之前，必須能夠訪問遠程Web效勞器〔例如ISP效勞器、客戶所擁有的效勞器、公司中的Intranet效勞器，或者Windows計算機上的Internet信息效勞器〕。如果尚不具有對這樣一個效勞器的訪問權(quán)，與你的ISP、客戶或系統(tǒng)管理員聯(lián)系。也可以在本地計算機上運行一個Web效勞器，如IIS。如果遠程根文件夾為空，那么本例中所