Dreamweaver_2--基于表格的頁面布局

1、Dreamweaver cs4 網(wǎng)站制作入門網(wǎng)站制作實(shí)例一：Cafe TownsendCafe Townsend一、創(chuàng)建工作目錄工作目錄就是你建立站點(diǎn)時所要使用的本地文件夾，Dreamweaver 將此文件夾稱為本地站點(diǎn)。本地文件夾通常是你的計(jì)算機(jī)硬盤上的一個文件夾，例如：D:mywebsites 。1、在 D：盤上創(chuàng)建名為 mywebsites 的新文件夾。2、下載所需素材。cafe_townsend.rar3、將下載得到的素材解壓縮到 mywebsites 文件夾中。 你將使用 D:mywebsitescafe_townsend 文件夾作為站點(diǎn)“cafe townsend” 的根文件夾（主

2、文件夾）。 二、定義本地文件夾您必須為創(chuàng)建的每一個新 Web 站點(diǎn)定義 Dreamweaver 本地文件夾。本地文件夾是您在硬盤上用來存儲站點(diǎn)文件的工作副本的文件夾。如果不定義本地文件夾，Dreamweaver 中的某些功能可能無法正確運(yùn)行。如果定義了本地文件夾，您還可以管理文件，并使用一些文件傳輸方法在本地與 Web 服務(wù)器之間傳輸文件。1、啟動 Dreamweaver，選擇“站點(diǎn) ”“管理站點(diǎn)”。 2、在彈出的“管理站點(diǎn)”對話框中單擊“新建”按鈕，然后選擇“站點(diǎn)”。3、在彈出的“站點(diǎn)定義”對話框中，如果顯示向?qū)Вā盎尽边x項(xiàng)卡），則單擊“高級”選項(xiàng)卡，然后從“分類”列表中選擇“本地信息”（

3、它應(yīng)當(dāng)是默認(rèn)選項(xiàng)）。 4、在“站點(diǎn)名稱”文本框中，輸入 Cafe Townsend 作為站點(diǎn)名稱。 5、在“本地根文件夾”文本框中，指定在上一節(jié)中復(fù)制到 D:mywebsite 文件夾中的 cafe_townsend 文件夾。你可以單擊文件夾圖標(biāo)來瀏覽并選擇該文件夾，或者在“本地根文件夾”文本框中輸入路徑。 6、在“默認(rèn)圖像文件夾”文本框中，指定 cafe_townsend 文件夾中已有的 images 文件夾。你可以單擊文件夾圖標(biāo)來瀏覽并選擇該文件夾，或者在“默認(rèn)圖像文件夾”文本框中輸入路徑。7、單擊“確定”。隨即出現(xiàn)“管理站點(diǎn)”對話框，顯示您的新站點(diǎn)。 8、單擊“完成”關(guān)閉“管理站點(diǎn)”對話

4、框。此時“文件”面板顯示當(dāng)前站點(diǎn)的新本地根文件夾?！拔募泵姘逯械奈募斜韺⒊洚?dāng)文件管理器，允許您復(fù)制、粘貼、刪除、移動和打開文件，就象在計(jì)算機(jī)桌面上一樣?，F(xiàn)在，已經(jīng)為您的站點(diǎn)定義了一個本地根文件夾。本地根文件夾是本地計(jì)算機(jī)上用來存儲 Web 頁面的工作副本的文件夾。如果您以后想要發(fā)布頁面并使其可供公眾訪問，則需要在運(yùn)行 Web 服務(wù)器的遠(yuǎn)程計(jì)算機(jī)上定義一個遠(yuǎn)程文件夾，用來存儲本地文件的已發(fā)布副本。三、了解你的任務(wù)下圖是一張為 Cafe Townsend（一個需要制作 Web 站點(diǎn)的虛構(gòu)餐館）設(shè)計(jì)的、完整的和符合要求的設(shè)計(jì)草樣。作為 Web 設(shè)計(jì)人員，您需要對草樣進(jìn)行轉(zhuǎn)換，使之最終形成可以使用

5、的 Web 頁面。創(chuàng)建基于表格的頁面布局表格是用于在 HTML 頁上顯示表格式數(shù)據(jù)以及對文本和圖形進(jìn)行布局的強(qiáng)有力的工具。你可以使用表格快速輕松地創(chuàng)建布局。在本實(shí)例中，你將在一個新的 Dreamweaver 文檔中創(chuàng)建若干表格。這些表格的行和單元格實(shí)際上將用作你將在以后添加的內(nèi)容的“容器框”。一、創(chuàng)建并保存新頁面 建立站點(diǎn)并檢查設(shè)計(jì)草樣后，你就可以開始創(chuàng)建 Web 頁面了。首先你將創(chuàng)建一個新頁面，并將它保存到你的 Web 站點(diǎn)的本地根文件夾 my site 中。該頁面最終將成為虛構(gòu)餐館 Cafe Townsend 的主頁。1、在 Dreamweaver 中，選擇“文件”“新建”。 2、在“新建

6、文檔”對話框的“常規(guī)”選項(xiàng)卡上，從“類別”列表中選擇“基本頁”，從“基本頁”列表中選擇“HTML”，然后單擊“創(chuàng)建”。 3、選擇“文件”“另存為”。 4、在“另存為”對話框中，瀏覽至定義為站點(diǎn)的本地根文件夾的 my site 文件夾并打開該文件夾。 5、在“文件名”文本框中輸入 index.html，然后單擊“保存”。 文件名即出現(xiàn)在應(yīng)用程序窗口頂部的標(biāo)題欄中。 6、在新文檔頂部的“文檔標(biāo)題”文本框中，鍵入 Cafe Townsend。這就是頁面的標(biāo)題。站點(diǎn)訪問者在 Web 瀏覽器中查看頁面時將在瀏覽器窗口的標(biāo)題欄中看到此標(biāo)題。 7、選擇“文件”“保存”來保存該頁面。 保存前： 保存后：二、插

7、入表格：接下來，您將添加一個表格，用于放置文本、圖形和 Macromedia Flash 資源。1、在頁面上單擊一次，在頁面左上角放置插入點(diǎn)。 2、選擇“插入”“表格”。 3、在“插入表格”對話框中，執(zhí)行下面的操作： a. 在“行數(shù)”文本框中，輸入 3。 在“列數(shù)”文本框中，輸入 1。 在“表格寬度”文本框中，輸入 700。 在“表格寬度”彈出式菜單中，選擇“像素”。 在“邊框粗細(xì)”文本框中，輸入 1。 在“單元格邊距”文本框中，輸入 0。 在“單元格間距”文本框中，輸入 0。 6、單擊“確定”。 一個三行一列的表格即出現(xiàn)在文檔中。該表格的寬度為 700 像素，邊框?yàn)?px、單元格邊距和單元格

8、間距均為 0px。 7、單擊一次空白處取消對它的選擇。 8、選擇“插入”“表格”以插入另一個表格。 注釋：后面9-14操作同理可做。9、在“插入表格”對話框中，對第二個表格執(zhí)行下面的操作： a. 在“行數(shù)”文本框中，輸入 1。 在“列數(shù)”文本框中，輸入 3。 在“表格寬度”文本框中，輸入 700。 在“表格寬度”彈出式菜單中，選擇“像素”。 在“邊框粗細(xì)”文本框中，輸入 1。 在“單元格邊距”文本框中，輸入 0。 在“單元格間距”文本框中，輸入 0。10、單擊“確定”。 第二個表格（該表格具有一行三列）即出現(xiàn)在第一個表格下方。 11、單擊空白處取消對它的選擇。 12、通過選擇“插入”“表格”，

9、然后在“插入表格”對話框中輸入以下值來插入第三個表格：a. 在“行數(shù)”文本框中，輸入 1。 在“列數(shù)”文本框中，輸入 1。 在“表格寬度”文本框中，輸入 700。 在“表格寬度”彈出式菜單中，選擇“像素”。 在“邊框粗細(xì)”文本框中，輸入1。 在“單元格邊距”文本框中，輸入 0。 在“單元格間距”文本框中，輸入 0。 13、單擊“確定”。 第三個表格（該表格具有一行一列）即出現(xiàn)在第二個表格下方。 14、單擊空白處取消對它的選擇。 注意：插入表格后可能會看到表格選擇器（由綠色線條指示）。通過在表格外單擊，通?？梢噪[藏表格選擇器。也可以通過選擇“查看”“可視化助理”“表格寬度”禁用表格選擇器。三、設(shè)

10、置表格屬性為了更方便地對表格進(jìn)行操作，現(xiàn)在將使用“擴(kuò)展表格”模式來設(shè)置具體的表格屬性。“擴(kuò)展表格”模式是一種臨時添加表格的單元格邊距和間距并增加表格邊框以簡化編輯的一種功能。它可使你能夠精確地放置插入點(diǎn)，而不會出現(xiàn)選擇錯誤的表格或錯誤的表格內(nèi)容的狀況。1、選擇“查看”“表格模式”“擴(kuò)展表格模式”。 2、在第一個表格的第一行內(nèi)單擊一次。 3、在“屬性”檢查器（“窗口”“屬性”）的“單元格高度”文本框中輸入 90，然后按 Enter 鍵 。 4、在第一個表格的第二行內(nèi)單擊一次。 5、在“屬性”檢查器的“單元格高度”文本框中輸入 166，然后按 Enter 鍵 。 6、在第一個表格的第三行內(nèi)單擊一次

11、。 7、在“屬性”檢查器的“單元格高度”文本框中輸入 24，然后按 Enter 鍵 。 現(xiàn)在第一個表格中的三行應(yīng)具有不同的高度。Ps:了解操作對應(yīng)代碼，結(jié)合對應(yīng)的html語言代碼，熟悉相關(guān)代碼。接下來，您將設(shè)置第二個表格（該表格包含三列）的屬性。注釋：以下815同理操作。8、在第二個表格的第一列內(nèi)單擊一次。 9、在“屬性”檢查器的“單元格寬度”文本框中輸入 140，然后按 Enter 鍵 。 10、在第二個表格的第二列內(nèi)單擊一次。 11、在“屬性”檢查器的“單元格寬度”文本框中輸入 230，然后按 Enter 鍵。 12、將第三列的寬度設(shè)置為 330 個像素。 如果已打開表格選擇器（“查看”“

12、可視化助理”“表格寬度”），將能看到剛才在各個表格列上輸入的三個像素值。13、您無需為這個表格的單元格輸入任何高度值，因?yàn)檫@些單元格的高度將取決于您以后添加的內(nèi)容。 14、最后，在最后一個表格（該表格包含一行和一列）內(nèi)單擊一次。 15、在“屬性”檢查器的“單元格高度”文本框中輸入 24，然后按 Enter 鍵 。 16、單擊“文檔”窗口頂部的“退出擴(kuò)展表格模式”鏈接，返回到“標(biāo)準(zhǔn)”模式。 17、保存頁面。 注意：在“擴(kuò)展表格”模式下完成對表格屬性的設(shè)置后，應(yīng)總是返回到“標(biāo)準(zhǔn)”模式。四、插入圖像占位符：圖像占位符是在準(zhǔn)備好將最終圖形添加到 Web 頁面之前使用的圖形。在對 Web 頁面進(jìn)行布局時

13、圖像占位符很有用，因?yàn)橥ㄟ^使用圖像占位符，您可以在真正創(chuàng)建圖像之前確定圖像在頁面上的位置。1、在文檔窗口中，在第一個表格的第一行內(nèi)單擊一次。 2、選擇“插入”“圖像對象”“圖像占位符”。 3、在“圖像占位符”對話框中，執(zhí)行下面的操作： 4、在“名稱”文本框中，鍵入 banner_graphic。 5、在“寬度”文本框中，輸入 700。 6、在“高度”文本框中，輸入 90。 7、單擊顏色框并從顏色選擇器中選擇一種顏色。在本教程中，我們選擇了紅棕色 (#)。 保留“替換文本”文本框?yàn)榭?。Ps:了解操作對應(yīng)代碼，結(jié)合對應(yīng)的html語言代碼，熟悉相關(guān)代碼。 8、單擊“確定”。 圖像占位符出現(xiàn)在第一個表

14、格內(nèi)。圖像占位符顯示最終放置于此處的圖像的標(biāo)簽和大小屬性。 10保存頁面。 關(guān)于圖像占位符：圖像占位符是在將最終圖形添加到 Web 頁面之前使用的臨時圖形；它不是顯示在瀏覽器中的圖形圖像。在您發(fā)布站點(diǎn)之前，應(yīng)該用適用于 Web 的圖形文件（例如 GIF 或 JPEG）替換所有添加的圖像占位符。五、向頁面添加顏色現(xiàn)在，您將通過設(shè)置某些表格單元格以及頁面背景的顏色，向頁面添加更多顏色。1、在上述包含三列的表格的第一個單元格內(nèi)單擊一次。 2、擊標(biāo)簽選擇器中的 標(biāo)簽（單元格標(biāo)簽）以選擇該單元格。 3、在“屬性”檢查器（“窗口”“屬性”）中，在“背景顏色”文本框內(nèi)單擊一次。 “背景顏色”文本框位于“背景顏色”(Bg) 顏色框旁。 4、在“背景顏色”文本框中，輸入十六進(jìn)制值 #，然后按 Enter 鍵。表格單元格的顏色即變?yōu)榧t棕色。 5、在上述包含三列的表格的第二個單元格內(nèi)單擊一次。 6、單擊標(biāo)簽選擇器中的 標(biāo)簽（單元格標(biāo)簽）以選擇該單元格。 7、在“屬性”檢查器中，在“背景顏色”文本框內(nèi)單擊一次，輸入十六進(jìn)制值 #F7EEDF，然后按 Enter 鍵 。 表格單元格的顏色即變?yōu)闇\棕色。 8、重復(fù)第 5 7 步，將第三個表格單元格的顏色也更改為淺棕色。 9、設(shè)置完這三個單元格的顏色后，單擊一次表格的外部，取消選擇該表格。 Ps:了解操作對應(yīng)代碼，結(jié)合對應(yīng)的html語言代碼，熟悉相關(guān)代碼。