【正文】 的網(wǎng)頁(yè)內(nèi)容區(qū)，繪制一個(gè)寬“184px”，高“665px”，顏色為“99CC00”的布局表格。4重復(fù)步驟3340，將圖像分別改為“”、“”、“”，文字改為“森林公園”、“三峽”、“四川”。3重復(fù)步驟38兩次，分別將圖像改為“”，“”。3緊接上面的布局表格，在它下方繪制一個(gè)布局表格，在該布局表格內(nèi)繪制一個(gè)寬“418px”，高“10px”的布局單元格。3緊接著第29步的布局表格的下方繪制一個(gè)寬“418px”，高“52px”，背景圖像為“”的布局表格，然后再在該布局表格內(nèi)偏左的位置繪制寬“156px”，高“52px”，水平對(duì)齊“居中對(duì)齊”，垂直“居中”的布局單元格，輸入文字“風(fēng)景名勝快覽”，將文字設(shè)為：字體“楷體”，大小“24px”，顏色“FF0000”。3返回到 “標(biāo)準(zhǔn)”模式，選擇[插入]/[表格]菜單命令，插入一個(gè)5行4列，寬“278px”，高“194px”，邊框“1”的表格，將第1列寬設(shè)為“54px”，第2列寬設(shè)為“110px”，第3列寬設(shè)為“52px”，第4列寬設(shè)為“50px”，每行高都設(shè)為“30px”，單擊第一單元格，設(shè)置：水平“居中對(duì)齊”，垂直“居中”，輸入文字“出發(fā)地”，將文字設(shè)為：字體“宋體”，大小“12px”，顏色“990066”。3在上面的布局單元格右邊繪制一個(gè)寬“278px”，高“239px”的布局表格。在該布局表格內(nèi)繪制一個(gè)寬“418px”，高“239px” 的布局表格。2重復(fù)步驟12223，將輸入的文字分別改為“□自駕車旅游須知”，“□潛水的醫(yī)學(xué)知識(shí)”，“□散客旅游指南”，“□自助游常識(shí)”。2重復(fù)步驟2223，將輸入的文字分別改為“□民間風(fēng)俗”，“□服飾與音樂(lè)”，“□民族節(jié)日”，“□生活習(xí)慣”。2重復(fù)步驟22兩次，同時(shí)將輸入的文字分別改為“□人口、語(yǔ)言”，“□宗教、信仰”。2在上面的布局單元格右邊繪制一個(gè)寬“153px”，高“24px”，垂直“居中”的布局單元格，輸入文字“□自然環(huán)境”(“□”的輸入：在“智能abc”輸入法下按鍵盤符號(hào)v+數(shù)字1)，將其設(shè)為：字體“宋體”，大小“14px”。緊接上面的布局單元格，在它下方繪制一個(gè)寬“181px”，高“98px”，的布局表格。1在該布局表格內(nèi)繪制一個(gè)寬“181px”，高“73px”的布局單元格，然后將“”圖像插入到該單元格，同時(shí)設(shè)該圖像的寬為“181px”，高為“73px”。1將光標(biāo)定位到該單元格，輸入文字“首頁(yè)”，然后將“插入”欄中的“布局”選項(xiàng)卡改為“文本”選項(xiàng)卡，單擊“不換行空格”按鈕兩次，出現(xiàn)了兩個(gè)空格，緊接著輸入“|”（該符號(hào)用鍵盤上的“shift+\”輸入），再單擊“不換行空格”按鈕兩次，緊接著輸入“國(guó)內(nèi)旅游”，后面文字按相同方法輸入，選中導(dǎo)航欄的所有文字，將其設(shè)為：字體“宋體”，大小“14px”，顏色“000099”。1在“插入”欄的“布局”選項(xiàng)卡中單擊“繪制布局單元格”按鈕。1將“插入”欄中的“布局”選項(xiàng)卡改為“文本”選項(xiàng)卡，單擊“換行符”按鈕，光標(biāo)自動(dòng)定位到下一行。選中該單元格，打開(kāi)屬性面板，將單元格的寬度設(shè)為“111px”，高度設(shè)為“101px”，水平對(duì)齊方式設(shè)為“左對(duì)齊”，垂直對(duì)齊方式設(shè)為“頂端”。選中該表格，切換到“標(biāo)準(zhǔn)”模式，將背景圖像改為“”。在“插入”欄的“布局”選項(xiàng)卡中單擊“繪制布局表格”按鈕 。將鼠標(biāo)移到要?jiǎng)?chuàng)建表格的左上角位置并按住鼠標(biāo)不放拖動(dòng)到要?jiǎng)?chuàng)建表格的右下角后釋放鼠標(biāo)。在“插入”欄的“布局”選項(xiàng)卡中單擊“繪制布局表格”按鈕 。單擊 按鈕即可切換到布局模式。圖263單擊布局工具欄中的按鈕，進(jìn)入布局模式。四、實(shí)驗(yàn)步驟 新建一個(gè)文檔，打開(kāi)“屬性面板”，單擊按鈕，在彈出的頁(yè)面屬性對(duì)話框中將“背景圖像”設(shè)為“”。圖261三、知識(shí)點(diǎn)分解由上圖可知，該網(wǎng)頁(yè)的結(jié)構(gòu)屬于拐角型，先畫出該網(wǎng)頁(yè)的版式結(jié)構(gòu)，如圖262所示。思考題：怎樣使得表格在不同尺寸瀏覽器、不同分辨率下都能達(dá)到鋪滿整個(gè)瀏覽器窗口的效果呢？實(shí)驗(yàn)六 利用表格進(jìn)行網(wǎng)頁(yè)布局一、實(shí)驗(yàn)?zāi)康牧私饩W(wǎng)頁(yè)設(shè)計(jì)常用的幾種版式；掌握繪制及編輯布局表格和布局單元格；掌握利用布局表格的嵌套來(lái)設(shè)計(jì)較復(fù)雜的版面；掌握在布局表格中添加具體內(nèi)容 ；掌握設(shè)置布局表格和單元格屬性 。1按【Ctrl+S】保存該網(wǎng)頁(yè)。1選中表格的每一列，將其寬度設(shè)為100像素，高100像素，水平：居中，垂直：居中。選擇[命令]\[格式化表格]菜單命令，在彈出的”格式化表格”對(duì)話框中選擇“AltRows：Greenamp。在表格的第三行輸入如下數(shù)據(jù)：100865205。在表格的第一行輸入如下數(shù)據(jù)：學(xué)號(hào)、語(yǔ)文、數(shù)學(xué)、英語(yǔ)、總分。頁(yè)面選擇第三個(gè)——頂部。 (3) 按【Ctrl+Alt+T】鍵。(1) 選擇[插入]\[表格]菜單命令。如果文檔是空白的，則只能將插入點(diǎn)放置在文檔的開(kāi)頭。四、實(shí)驗(yàn)步驟在Dreamweaver中新建一個(gè)文檔。二、實(shí)驗(yàn)內(nèi)容：掌握在表格和單元格中插入文字或圖片。思考題：在做網(wǎng)頁(yè)時(shí)，經(jīng)常需要用圖像處理軟件來(lái)制作圖像，如本實(shí)驗(yàn)中的導(dǎo)航條圖像，但是在將該圖像插入到Dreamweaver中會(huì)經(jīng)常遇到圖像不能緊密的結(jié)合在一起，如下圖所示，怎么才能將他改成圖241所示的導(dǎo)航條的效果呢？實(shí)驗(yàn)五 網(wǎng)頁(yè)表格操作一、實(shí)驗(yàn)?zāi)康恼莆毡砀竦膭?chuàng)建、結(jié)構(gòu)調(diào)整與美化。注意：“圖像”屬性面板的“對(duì)齊”下拉列表中設(shè)置圖像與周圍文字的對(duì)齊方式，而是設(shè)置圖像在網(wǎng)頁(yè)中的位置，左邊，中間還是右邊。設(shè)置完成后，單擊按鈕關(guān)閉“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框。 e) 在“替換文本”（可選）文本框中輸入描述該圖像的文本, 如本例中“在你身邊，我享受被保護(hù)的感覺(jué)……”。c) 在“鼠標(biāo)經(jīng)過(guò)圖像”文本框后單擊按鈕并選擇鼠標(biāo)指針滑過(guò)原始圖像時(shí)顯示的圖像，,或在文本框中輸入圖像文件的路徑。 執(zhí)行以上操作后都將打開(kāi)“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框，在該對(duì)話框中完成各項(xiàng)參數(shù)的設(shè)置操作，如圖246所示圖245 圖246a) 在“圖像名稱”文本框中輸入圖像的名稱。 將光標(biāo)定位到“愛(ài)情人生”后面，敲回車，選中后面的文字，單擊“屬性面板”中的“左對(duì)齊”按鈕。 ，選擇[文件]\[導(dǎo)入]\[Word文檔], 在打開(kāi)的“打開(kāi)”對(duì)話框中，選擇要添加的文件,如本例中的“”，然后單擊按鈕，Word文檔的內(nèi)容將出現(xiàn)在頁(yè)面中，如圖244所示。鼠標(biāo)經(jīng)過(guò)圖像由兩個(gè)圖像組成，主圖像（首次載入頁(yè)時(shí)顯示的圖像）和次圖像（當(dāng)鼠標(biāo)指針移過(guò)主圖像時(shí)顯示的圖像）。按【F12】鍵，預(yù)覽。打開(kāi)“”文件，選擇“Ctrl+A”,”Ctrl+C”。選中導(dǎo)航條，單擊“屬性面板”中的“居中”按鈕。本例中導(dǎo)航條項(xiàng)目順序?yàn)椤皊y”、“jdwz”、“grwz”，“rszl”。若要減少導(dǎo)航元件，可先在導(dǎo)航元件列表中選擇要?jiǎng)h除的項(xiàng)，再單擊按鈕刪除即可。如果未選擇此選項(xiàng)，在鼠標(biāo)指針滑過(guò)鼠標(biāo)經(jīng)過(guò)圖像時(shí)可能會(huì)出現(xiàn)延遲。e) 在“按下時(shí)，前往的 URL”文本框中，單擊按鈕選擇要打開(kāi)的鏈接文件（）然后從右側(cè)的下拉列表中選擇打開(kāi)文件的位置。c) 在“鼠標(biāo)經(jīng)過(guò)圖像”文本框后，單擊按鈕選擇當(dāng)一般圖像顯示時(shí)如果鼠標(biāo)指針滑過(guò)項(xiàng)目所顯示的圖像。該名稱只能包含字母和數(shù)字且不能以數(shù)字開(kāi)頭。設(shè)置的具體方法如下。 執(zhí)行下列操作之一打開(kāi)“插入導(dǎo)航條”對(duì)話框：(1) 單擊“插入欄”的“常用”選項(xiàng)卡，并單擊“插入導(dǎo)航條”按鈕 ，彈出如圖243所示對(duì)話框；(2) 選擇[插入]\[圖像對(duì)象]\[導(dǎo)航條]菜單命令。在創(chuàng)建導(dǎo)航條時(shí)，不必包含所有這4種狀態(tài)的導(dǎo)航條圖像，可以只選用“一般”和“按下”或“滑過(guò)”這兩種狀態(tài)。一個(gè)網(wǎng)頁(yè)中只允許有一個(gè)導(dǎo)航條。導(dǎo)航條通常為在站點(diǎn)上的頁(yè)面和文件之間移動(dòng)提供一條簡(jiǎn)捷的途徑。由圖242可以看出，該頁(yè)面首先導(dǎo)入了word文檔的內(nèi)容，然后插入了輪換圖像，設(shè)置圖像與文字的環(huán)繞方式。圖242三、知識(shí)點(diǎn)分解由圖241可以看出，該頁(yè)面最上面導(dǎo)航條，導(dǎo)航條下面是水平線，正文的格式與“”格式一致。二、實(shí)驗(yàn)內(nèi)容某站點(diǎn)下有如下4個(gè)網(wǎng)頁(yè)，，當(dāng)鼠標(biāo)移到每張圖像上時(shí)會(huì)顯示另外一張圖像，單擊“本站首頁(yè)”，文章內(nèi)容在“”中。掌握將Word中的文字復(fù)制到Dreamweaver中的方法。能夠修改圖像屬性，利用外部圖像處理軟件編輯圖像。1按【F12】鍵，在IE瀏覽器中單擊“再看一遍”鏈接，則返回到“中華人民共和國(guó)婚姻法”（命名錨記處），單擊“返回首頁(yè)”鏈接。 單擊“鏈接”文本框后的 按鈕，在打開(kāi)的“選擇新文件”對(duì)話框中選擇要鏈接的文件，這里選擇“”（即首頁(yè)），同時(shí)在“相對(duì)于”下拉列表框中選擇相應(yīng)的“站點(diǎn)根目錄”選項(xiàng)。 若要鏈接到同一文件夾內(nèi)其他文檔中的名為“top”的錨記，則輸入“top”形式的錨記引用。 在屬性面板的“鏈接”文本框中，輸入一個(gè)數(shù)字符號(hào)“”和錨記名稱，如“top” 。 在打開(kāi)的“命名錨記”對(duì)話框的“錨記名稱”文本框中，輸入錨記名稱，如top，并單擊“確定”按鈕，錨記標(biāo)記出現(xiàn)在插入點(diǎn)處。 執(zhí)行下列操作之一。建立錨鏈接分為創(chuàng)建命名錨記和創(chuàng)建到該命名錨記的鏈接兩部分。在Dreamweaver 8中還可以建立命名錨記的鏈接，也就是錨鏈接。內(nèi)容2的實(shí)驗(yàn)步驟: 打開(kāi)“”頁(yè)面，選擇[文件]\[導(dǎo)入]\[表格式數(shù)據(jù)]，彈出如圖238所示的“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框。注意：此時(shí)電子郵件的發(fā)送是采用OutExpress或者是OutLook發(fā)送的。 (2) 在屬性面板的“鏈接”文本框中，輸入“mailto:”，然后在它后面輸入電子郵件地址，如“csygold”，在IE瀏覽器中單擊該鏈接的顯示效果。 方法二：使用“屬性面板創(chuàng)建電子郵件鏈接，具體操作如下。 (5) 在“EMail”文本框中輸入要鏈接到的電子郵箱地址，如“csygold”。 (3) 打開(kāi)“電子郵件鏈接”對(duì)話框，如圖237所示。方法一： (1) 在“文檔”窗口的“設(shè)計(jì)”視圖中，選擇“與我聯(lián)系”熱區(qū)。1 在建立“與我聯(lián)系”鏈接時(shí)，則要?jiǎng)?chuàng)建電子郵件鏈接。圖2361 在“屬性面板”中將“鏈接”，在“替換”中輸入“情感美文”，在“目標(biāo)”下拉列表框中選擇“_blank”.1 用同樣的方法繪制其他熱點(diǎn)，并設(shè)置相應(yīng)的鏈接。1 選中該圖像，打開(kāi)“屬性面板”，將圖像的高度改為“700”，邊框改為“1”，選擇“居中對(duì)齊”按鈕。圖235 在提示對(duì)話框中單擊按鈕，打開(kāi)“復(fù)制文件為”對(duì)話框，在該對(duì)話框中選擇保存路徑，并在“文件名”文本框中更改圖像的名稱。 單擊“確定”按鈕。 單擊“確定”按鈕，彈出如圖234所示的“圖像標(biāo)簽輔助功能屬性”對(duì)話框。 執(zhí)行如下方法之一： (1) 選擇[插入]/[圖像]菜單命令，打開(kāi)“選擇圖像源”文件對(duì)話框； (2) 單擊“插入”面板的“常用”選項(xiàng)卡中的 按鈕，打開(kāi)如圖233所示的“選擇圖像源文件”對(duì)話框； (3) 按【Ctrl+Alt+I】鍵打開(kāi)“選擇圖像源文件”對(duì)話框。四、實(shí)驗(yàn)步驟內(nèi)容1的實(shí)驗(yàn)步驟：新建4個(gè)HTML文檔。圖232(a) 圖232 (b)三、知識(shí)點(diǎn)分解由圖231可以看出，在該頁(yè)面正中間有一張圖像，圖像顯示了邊框，當(dāng)鼠標(biāo)移到文字“情感美文”時(shí)會(huì)顯示提示文字“情感美文”。二、實(shí)驗(yàn)內(nèi)容某站點(diǎn)下有如下4個(gè)網(wǎng)頁(yè)，首頁(yè)效果圖如圖231所示，圖像顯示在網(wǎng)頁(yè)的中間，單擊“情感美文”，單擊“愛(ài)情故事”，單擊“婚姻情感”，單擊“與我聯(lián)系”會(huì)發(fā)送電子郵件。能熟練設(shè)置錨點(diǎn)超級(jí)鏈接和電子郵件鏈接。按【F12】鍵，預(yù)覽。注意：顏色可以用2種方式表示，一種是用英文，一種是用十六進(jìn)制代碼。(7) 同理在“屬性”面板中“大小”下拉列表中選擇“16pt”。圖228(6) 在“可用字體”列表框中找到“楷體”，單擊按鈕，則“楷體”同時(shí)出現(xiàn)在“字體列表框”和“選擇的字體”列表框中，再單擊“確定”按鈕，則在”字體”下拉列表中就可以選擇“楷體”。圖227(4)在進(jìn)行完上面操作后我們發(fā)現(xiàn)，第2塊列表區(qū)域的列表符號(hào)還是1，2，此時(shí)，先將光標(biāo)移到“選擇”前，單擊“屬性面板”中的“列表項(xiàng)目”，彈出如圖226所示的對(duì)話框，此時(shí)將“列表類型”改為“編號(hào)列表”，樣式改為“小寫字母(a,b,c)”,單擊“確定”按鈕即可。單擊“文本”屬性面板中的“編號(hào)列表”按鈕,則會(huì)出現(xiàn)圖227中所示的編號(hào)，重復(fù)該操作進(jìn)行下面的編號(hào)的添加。(2) 選中文字：將光標(biāo)定位到插入特殊字符的位置。圖226b) 在“列表類型”下拉框中選擇“項(xiàng)目列表”，在“樣式”下拉框中選擇“正方形”。 選擇上面輸入的所有內(nèi)容，進(jìn)行如下的操作：(1) 選中文字：在頁(yè)面中插入特殊符號(hào)如：“￥和空格符”,單擊“文本”屬性面板中的“項(xiàng)目列表”按鈕,則會(huì)出現(xiàn)圖221中所示的圓形符號(hào)，重復(fù)該操作進(jìn)行下面的項(xiàng)目列表符號(hào)的添加。在頁(yè)面中插入水平線。選擇[插入]/[日期]菜單命令，或者選擇“插入”面板中的“常用”選項(xiàng)卡，然后單擊“插入日期”按鈕，則打開(kāi) “插入日期”對(duì)話框。單擊“插入”欄中的“文本”選項(xiàng)卡，如圖所示。圖225內(nèi)容4的實(shí)驗(yàn)步驟:在頁(yè)面中輸入如下文字：在頁(yè)面中插入特殊符號(hào)如：“￥和空格符”。執(zhí)行以下操作之一。 單擊“確定”按鈕即可插入日期。圖2242. 在彈出的“插入日期”對(duì)話框中選擇星期格式為“星期四”、日期格式為