一、使用表格進(jìn)行頁面布局利用表格布局是網(wǎng)頁設(shè)計中的主流做法，即使是直接利用代碼編寫網(wǎng)頁也不例外。它的優(yōu)勢在于使用方便、靈活，與我們前面提到的網(wǎng)格編排法有很多共通之處。利用表格布局需要注意以下原則。合理規(guī)劃、利用表格謹(jǐn)慎使用拆分、合并表格有效使用嵌套表格在Dreamweaver中，表格的操作非常靈活，對于初學(xué)者來說，有一些典型問題需要注意：第一，可以通過拖動欄線來改變表格的寬度和高度，但在軟件視圖中看到的寬和高與在瀏覽器中預(yù)覽到的情形有時會不一致。第二，表格的寬和高在插入不同內(nèi)容后，總是會自動調(diào)整并影響其他單元格，與我們預(yù)先構(gòu)想的表格大小不吻合。OPTIONOPTION二、使用CSS樣式進(jìn)行格式化CSS是cascadingstylesheets（層疊樣式表）的縮寫，是一系列格式設(shè)置規(guī)則，功能在于控制網(wǎng)頁內(nèi)容的外觀，包括文字的樣式、圖片、表格、層等。使用CSS樣式的優(yōu)勢在于：可以控制許多僅使用HTML無法控制的屬性。例如，可以指定自定義列表項(xiàng)目符號以及字體大小和單位（像素、點(diǎn)數(shù)等）。通過使用CSS樣式，可以在多個瀏覽器中處理頁面布局和外觀，確保其保持一致。提供便利的更新功能。只需要更新CSS樣式，使用該樣式的所有文檔的格式都能自動更新為新樣式。123三、超鏈接的使用超鏈接是網(wǎng)頁設(shè)計中最重要的部分，既可把一個網(wǎng)頁與另一個網(wǎng)頁鏈接起來，也可把一個網(wǎng)站與另一個網(wǎng)站鏈接起來。超鏈接是網(wǎng)頁中由一個地方跳轉(zhuǎn)到另一個地方（網(wǎng)頁、網(wǎng)站或文件）的指針。跳轉(zhuǎn)的起點(diǎn)稱為源端點(diǎn)，或源、錨、錨點(diǎn)，跳轉(zhuǎn)的終點(diǎn)即跳轉(zhuǎn)到的頁面，稱為目標(biāo)、目的或目標(biāo)錨。超鏈接按源端點(diǎn)分文本超鏈接圖像超鏈接表單超鏈接超鏈接按目標(biāo)端點(diǎn)分外部鏈接內(nèi)部鏈接局部鏈接下載鏈接E-mail鏈接為了更清晰地表示超鏈接，特別是文本超鏈接以及它們的鏈接狀態(tài)，在網(wǎng)頁中可以使用不同的顏色對超鏈接及它們的不同狀態(tài)進(jìn)行顯示。鏈接顏色：表示正常顯示下超鏈接的文本顏色。變換圖像鏈接顏色：表示當(dāng)光標(biāo)經(jīng)過超鏈接的文字時文字呈現(xiàn)的顏色。已訪問鏈接顏色：表示已經(jīng)單擊并正確鏈接過的超鏈接的顏色，目的是提醒用戶該鏈接已經(jīng)瀏覽過，通常可以使用另一種顏色顯示。活動鏈接顏色：表示單擊以后，正在鏈接時超鏈接顯示的顏色。通常鏈接的網(wǎng)頁很快就會顯示出來，所以不容易看到它的效果。1234四、導(dǎo)航設(shè)計（一）扁平化原則導(dǎo)航的扁平化設(shè)計是當(dāng)前網(wǎng)頁設(shè)計的主流趨勢，這里的“扁平化”是指導(dǎo)航到達(dá)特定頁面的路徑需要經(jīng)過幾次鏈接的跳轉(zhuǎn)，這個過程越短（需要跳轉(zhuǎn)的次數(shù)越少）就越扁平。（二）對稱性原則對稱性原則是指在導(dǎo)航設(shè)計中菜單、按鈕等的功能要對稱，如跳轉(zhuǎn)和返回、展開和收起就是對稱的功能。這也是對導(dǎo)航交互性的設(shè)計。（三）統(tǒng)一性原則統(tǒng)一性原則是指在整個網(wǎng)站的框架內(nèi)，導(dǎo)航的視覺樣式和風(fēng)格應(yīng)相對統(tǒng)一。可以利用色彩或細(xì)微形式的變化來確定主次或?qū)蛹壍年P(guān)系。五、多媒體的應(yīng)用Dreamweaver提供了對多媒體的支持，可以在文檔中插入Flash或Shockwave影片、JavaApplets、ActiveX控件以及其他音頻或視頻對象，極大地豐富了網(wǎng)頁中的視聽效果。我們大致可以把Dreamweaver中的多媒體對象歸為4類：音頻視頻Flash對象JavaApplets或ActiveX控件聲音是多媒體效果中重要的組成部分，一段語音提示或背景音樂能為網(wǎng)頁增加不少人性化的色彩，積聚更多的人氣。在網(wǎng)頁中插入聲音主要有兩種方式：鏈接到音頻文件和嵌入音頻文件。視頻文件使用的方式與音頻文件相同，也包括嵌入和鏈接兩種。應(yīng)用在網(wǎng)頁中的視頻文件格式主要包括AVI、MPEG、MOV和RM格式。注意，與插入音頻文件時遇到的問題相同，如果想要在網(wǎng)頁中看到這些內(nèi)容，訪問者的計算機(jī)上必須安裝相關(guān)的輔助應(yīng)用程序作為插件。網(wǎng)頁設(shè)計的對象不是一個個孤零零的頁面，因?yàn)轫撁鎯?nèi)所使用的圖片、聲音、視頻等都是鏈接進(jìn)去的，不會被直接保存在頁面文件自身內(nèi)，而且頁面和頁面之間還存在著超鏈接的關(guān)系，因而它們之間是一個完整的整體。在視覺設(shè)計中，國內(nèi)制作網(wǎng)頁使用最廣泛的軟件是AdobeDreamweaver，下面就用這個軟件完成“視覺中國”網(wǎng)站首頁的設(shè)計與制作。iis信息服務(wù)安裝【微課視頻】一、站點(diǎn)架設(shè)（1）打開Windows資源管理器，在D盤中新建文件夾“adweb”。雙擊進(jìn)入該文件夾，建立一個新的子文件夾“images”，然后退回到D盤中，再新建一個文件夾“adweb_remote”。（2）打開AdobeDreamweaver（軟件版本為DreamweaverCS5），在軟件自動彈出的歡迎窗口中執(zhí)行【新建】→【Dreamweaver站點(diǎn)】命令，或者執(zhí)行【站點(diǎn)】→【新建站點(diǎn)】命令，打開【站點(diǎn)設(shè)置對象】對話框。（3）在【站點(diǎn)】選項(xiàng)卡中設(shè)置站點(diǎn)名為“網(wǎng)絡(luò)廣告設(shè)計”，在【本地站點(diǎn)文件夾】項(xiàng)內(nèi)選擇或鍵入“E:\adweb\”。（4）選擇左側(cè)【高級設(shè)置】選項(xiàng)卡，默認(rèn)進(jìn)入【本地信息】子選項(xiàng)卡，在【默認(rèn)圖像文件夾】項(xiàng)內(nèi)選擇或鍵入“E:\adweb\images\”，【鏈接相對于】設(shè)置為【文檔】，如圖所示。（5）選擇左側(cè)的【服務(wù)器】選項(xiàng)卡，單擊下方的“+”按鈕新增一個服務(wù)器設(shè)置，在彈出的子選項(xiàng)卡中（默認(rèn)為【基本】選項(xiàng)卡）設(shè)置【服務(wù)器名稱】為任意名，【連接方法】為【本地/網(wǎng)絡(luò)】，【服務(wù)器文件夾】為“E:\adweb_remote\”，【W(wǎng)ebURL】為“http://localhost/”，其他使用默認(rèn)值，如圖所示。選擇【基本】選項(xiàng)卡旁邊的【高級】選項(xiàng)卡，設(shè)置【服務(wù)器模型】為“ASP.NETVB”（該項(xiàng)選擇需要向合作的程序員咨詢，站點(diǎn)的數(shù)據(jù)庫或編程使用哪種語言則選擇相對應(yīng)的服務(wù)器模型，本例不涉及數(shù)據(jù)庫，因而隨意選擇了一個主流語言），其他保持默認(rèn)設(shè)置。其他選項(xiàng)卡同樣保持默認(rèn)設(shè)置即可。提示：在不購買真正服務(wù)器空間時可以虛擬測試網(wǎng)絡(luò)環(huán)境下的頁面效果，條件是必須安裝IIS信息服務(wù)，設(shè)置虛擬主機(jī)。這是大多數(shù)網(wǎng)頁設(shè)計師設(shè)計階段的選擇。（6）在菜單欄中執(zhí)行【文件】→【新建】命令，打開【新建文檔】對話框，從左到右依次選擇【空白頁】【HTML】（【頁面類型】）、【無】（【布局】），然后單擊【創(chuàng)建】按鈕。這時工作區(qū)出現(xiàn)一個空白新文件，不要做任何操作，直接在菜單欄中執(zhí)行【文件】→【另存為】命令，在彈出的【另存為】對話框中把文件命名為“index”，單擊【保存】按鈕。在“adweb”的文件夾內(nèi)就會出現(xiàn)一個“index.html”文件。二、排版布局（“表1”部分）我們先分析“視覺中國”網(wǎng)站首頁的布局。如圖所示，整個網(wǎng)頁由兩張大的表格組成，“表1”為藍(lán)色，“表2”為紅色。“表1”的基本框架為4行3列，“表2”的基本框架為7行4列。圖片中的綠色表格是“表1”的嵌套表格，紫色表格是“表2”的嵌套表格。下面先進(jìn)行“表1”的排版布局操作。（1）打開Dreamweaver軟件，確認(rèn)站點(diǎn)已經(jīng)設(shè)置完成（默認(rèn)進(jìn)入上次編輯的站點(diǎn)）。執(zhí)行【文件】→【新建】命令，創(chuàng)建一個空白的HTML頁面。執(zhí)行【文件】→【另存為】命令，將文件命名為“l(fā)ayout01.html”，并將其保存在根目錄下。（2）執(zhí)行【窗口】→【工作區(qū)布局】→【經(jīng)典】命令，切換好軟件界面的工作區(qū)布局（目的是保證能夠與教程的界面布局一致）。（3）執(zhí)行【修改】→【頁面屬性】命令，在彈出的對話框中設(shè)置左、右、上、下邊距均為“0”（默認(rèn)為空）。默認(rèn)值留有邊距，不利于排版。其他選項(xiàng)保持默認(rèn)設(shè)置，單擊【確定】按鈕關(guān)閉對話框。（4）執(zhí)行【插入】→【表格】命令，在彈出的【表格】對話框中設(shè)置【行數(shù)】為“4”，【列】為“3”，【表格寬度】為“1?500像素”，【邊框粗細(xì)】【單元格邊距】和【單元格間距】均為“0”（默認(rèn)為空），其他選項(xiàng)保持默認(rèn)設(shè)置。單擊【確定】按鈕關(guān)閉對話框，工作區(qū)的設(shè)計視圖中會顯示出插入的表格。單擊表格的外邊框線選中這個表格，在界面底部的【屬性】控制面板中將【對齊】設(shè)為【居中對齊】。（5）單擊該表格的第三行第一列，水平向右拖動到第三列，可以把這一行的3個單元格同時選中，然后單擊【屬性】控制面板左下角的【合并單元格】圖標(biāo)，這3個單元格會被合并成一個。以同樣的方式把第四行的3個單元格合并成一個。三、插入圖像（1）單擊該表格的第三行，執(zhí)行【插入】→【圖像】命令，在彈出的【選擇圖像源文件】對話框中單擊展開“images”文件夾找到圖片“corbis-cn.jpg”。注意將對話框底部的【相對于】設(shè)置為【文檔】，其他選項(xiàng)保持默認(rèn)設(shè)置。單擊【確定】按鈕關(guān)閉對話框。提示：關(guān)閉對話框后會再次彈出一個次級窗口，用來設(shè)置替換文本及詳細(xì)說明。它的作用是當(dāng)插入的圖片無法顯示時，會出現(xiàn)替換的文字來說明這張圖片，如可以輸入“視覺中國形象圖片”的文字，但通常可以不進(jìn)行設(shè)置，直接單擊【確定】按鈕關(guān)閉對話框。（2）單擊該表格的第二行第一列，執(zhí)行【插入】→【圖像】命令，在彈出的對話框中找到圖片“l(fā)ogo-v-china.jpg”，單擊【確定】按鈕關(guān)閉對話框。提示：插入的圖片高度大于表格的單元格高度時，會自動撐開表格，先插入圖片是為了快速控制表格該行的高度。（3）單擊該表格的第一行第一列，輸入文本“股票代碼000681.sz”，然后在【屬性】控制面板中（左下角）設(shè)置單元格高度為“35”。（4）單擊該表格的第一行第三列，在【屬性】控制面板中（左下角）設(shè)置單元格對齊方式為【右對齊】。執(zhí)行【插入】→【表格】命令，在彈出的對話框中設(shè)置【行數(shù)】為“1”，【列】為“3”，【表格寬度】為“200像素”，【邊框粗細(xì)】【單元格邊距】和【單元格間距】均為“0”。（這一般為嵌套表格。）（5）單擊這個嵌套表格的第二列，執(zhí)行【插入】→【圖像】命令，在彈出的對話框中單擊展開“images”文件夾找到圖片“l(fā)ine-01.png”，單擊【確定】按鈕關(guān)閉對話框。然后單擊這張圖片，在【屬性】控制面板中設(shè)置圖片【高】為“20”。把光標(biāo)放在該表格內(nèi)部的第一根欄線上，單擊并向右拖動，將圖片充滿第二個單元格。（6）單擊這個表格的第一個單元格，在【屬性】控制面板中設(shè)置單元格對齊方式為【右對齊】。然后輸入文字“中文”。繼續(xù)把光標(biāo)放在第三個單元格，輸入文字“English”，設(shè)置單元格對齊方式為【左對齊】。四、使用CSS格式化文本（1）在菜單欄中執(zhí)行【窗口】→【CSS樣式】命令，添加【CSS樣式】控制面板到界面中（位于工作區(qū)右側(cè)）。這是一個雙態(tài)命令，再執(zhí)行一次該命令會關(guān)閉該面板（默認(rèn)【經(jīng)典】布局中已經(jīng)打開）。單擊該面板底部的【新建CSS規(guī)則】按鈕打開【新建CSS規(guī)則】對話框，設(shè)置【選擇器名稱】為“wz01”，【規(guī)則定義】為【（新建樣式表文件）】。單擊【確定】按鈕進(jìn)入下一級窗口。（2）在新窗口中將文件位置保存在站點(diǎn)根目錄下的CSS文件夾中（如果沒有，可以新建），將文件命名為“l(fā)ayoutcs”，【相對于】設(shè)置為【文檔】。單擊【保存】按鈕進(jìn)入下一級窗口。（3）在新窗口中選擇左側(cè)【分類】項(xiàng)下的【類型】選項(xiàng)卡，單擊右側(cè)【Font-family】選項(xiàng)的下拉按鈕展開其下拉列表，選擇最底部的【編輯字體列表】選項(xiàng)彈出次級窗口，在【可用字體】一欄選擇【微軟雅黑】選項(xiàng)，然后單擊按鈕，使它出現(xiàn)在左側(cè)【選擇的字體】一欄中，單擊【確定】按鈕返回上一級窗口。（4）在該窗口中重新單擊【Font-family】的下拉按鈕展開其下拉列表，在列表的底部可以看到新增加的字體【微軟雅黑】，單擊完成字體設(shè)置。繼續(xù)在【類型】項(xiàng)下設(shè)置【Font-size】為“12px”，【Font-style】為【normal】，【Color】為色彩“#999”；【Text-decoration】為【none】，單擊【確定】按鈕關(guān)閉對話框（注意不是【應(yīng)用】按鈕）。（5）回到工作區(qū)重新全選第一行第一列單元格里的文字，然后在【屬性】控制面板（底部左側(cè)）中單擊【CSS】標(biāo)簽（默認(rèn)為【HTML】標(biāo)簽），單擊展開【目標(biāo)規(guī)則】一欄的下拉列表，選擇【.wz01】選項(xiàng)，CSS的樣式被應(yīng)用到該段文字上。依次選擇第三列單元格里的中文和英文文字，用同樣的方法把“wz01”樣式應(yīng)用到這兩段文字上。若文字的顏色較淺，在【屬性】控制面板中直接單擊修改字體顏色為“#666”，3段文字的顏色就同時改變了，這就是使用CSS的好處。（6）添加表格背景色。回到工作區(qū)重新全選表格第一行的所有單元格，在【屬性】控制面板中將【背景顏色】修改為“#CCCCCC”，該行底色則變成淺灰色。五、使用鼠標(biāo)經(jīng)過圖像制作導(dǎo)航條（1）單擊該表格的第二行第三列，在【屬性】控制面板中設(shè)置單元格對齊方式為【右對齊】。然后執(zhí)行【插入】→【表格】命令，在彈出的對話框中設(shè)置【行數(shù)】為“1”，【列】為“5”，【表格寬度】為“685像素”，【邊框粗細(xì)】【單元格邊距】和【單元格間距】均為“0”，其他選項(xiàng)保持默認(rèn)設(shè)置，單擊【確定】按鈕關(guān)閉對話框。（2）單擊這個嵌套表格的第一行第一列，執(zhí)行【插入】→【圖像對象】→【鼠標(biāo)經(jīng)過圖像】命令，在彈出的【插入鼠標(biāo)經(jīng)過圖像】對話框中按圖所示設(shè)置。【圖像名稱】是圖像的ID名，使用默認(rèn)即可。【原始圖像】是指載入網(wǎng)頁時所看到的圖像，選擇“images”文件夾下的圖片“bar_v_01b.jpg”即可。【鼠標(biāo)經(jīng)過圖像】是指拖動鼠標(biāo)到該圖像位置時所看到的圖像，選擇“images”文件夾下的圖片“bar_v_01.jpg”。【預(yù)載鼠標(biāo)經(jīng)過圖像】是指進(jìn)入該網(wǎng)頁時先加載好鼠標(biāo)經(jīng)過圖像，選擇該選項(xiàng)，能夠加快鼠標(biāo)經(jīng)過圖像的顯示速度。【替換文本】可以設(shè)置為空。最底部是這個導(dǎo)航按鈕的超鏈接，可以輸入視覺中國的官網(wǎng)地址“/”。單擊【確定】按鈕關(guān)閉對話框。（3）插入圖像后，該單元格會自動拉得很寬，不要急于調(diào)整，繼續(xù)單擊第二列，再次執(zhí)行【插入】→【圖像對象】→【鼠標(biāo)經(jīng)過圖像】命令，在彈出的對話框中參考上一步驟設(shè)置如下：【原始圖像】選擇圖片“bar_v_02b.jpg”；【鼠標(biāo)經(jīng)過圖像】選擇圖片“bar_v_02.jpg”；鏈接地址可以設(shè)置一個測試文件地址，如單擊其后的【瀏覽】按鈕，彈出次級窗口，選擇本站點(diǎn)內(nèi)根目錄下的“test01.html”（如果沒有，新建一個空白HTML文件保存在根目錄下）。（4）繼續(xù)單擊第三列，重復(fù)上面的操作，【原始圖像】選擇圖片“bar_v_03b.jpg”，【鼠標(biāo)經(jīng)過圖像】選擇圖片“bar_v_03.jpg”，其他與上一步驟的設(shè)置相同。重復(fù)這段步驟直到第五張鼠標(biāo)經(jīng)過圖像插入完成。此時，單元格的寬度也自動調(diào)整到了正確的寬度，如果還沒有，可以手動用鼠標(biāo)按住欄線并向右側(cè)收緊圖片。至此，導(dǎo)航條的制作就完成了。（5）單擊大表格（不是上面做導(dǎo)航的表格）的第四行第一列，在【屬性】控制面板中設(shè)置單元格高度為“30”。調(diào)整單元格的高度完成整體布局效果。至此，“表1”部分的版面布局就完成了。（6）執(zhí)行【文件】→【保存】命令，保存當(dāng)前制作的網(wǎng)頁內(nèi)容。然后執(zhí)行【文件】→【在瀏覽器中預(yù)覽】→【IExplore】命令（或其他本地機(jī)器安裝的瀏覽器，如360瀏覽器）。瀏覽器如果彈出“已限制此網(wǎng)頁運(yùn)行腳本或ActiveX控件”的警告，單擊【允許阻止的內(nèi)容】按鈕即可。現(xiàn)在可以看到制作的網(wǎng)頁效果了，把光標(biāo)放在導(dǎo)航按鈕上，看看它會不會變色。六、排版布局（“表2”部分）（1）單擊“表1”的外部右側(cè)，或者先單擊“表1”的外邊框線選中整個表格，然后按鍵盤上的【→】鍵，就可以把光標(biāo)放到表1的外部右側(cè)（這一步很關(guān)鍵）。（2）執(zhí)行【插入】→【表格】命令，在彈出的【表格】對話框中設(shè)置【行數(shù)】為“7”，【列】為“4”，【表格寬度】為“1500像素”，【邊框粗細(xì)】【單元格邊距】和【單元格間距】均為“0”，其他選項(xiàng)保持默認(rèn)設(shè)置，單擊【確定】按鈕關(guān)閉對話框。然后單擊表格的外邊框線選中這個表格，在界面底部的【屬性】控制面板中設(shè)置【對齊】為【居中對齊】。（3）單擊該表格的第一行第一列，在【屬性】控制面板中設(shè)置單元格寬度為“15”；單擊第一行第二列，設(shè)置單元格寬度為“500”、高度為“100”；再單擊第一行第三列，設(shè)置單元格寬度為“500”，高度不要輸入，保持為空；再單擊第一行第四列，單元格的寬度和高度都不要輸入，保持為空。（4）單擊該表格的第一行第一列，在【屬性】控制面板中把單元格【垂直】的對齊方式設(shè)置為【頂端】。執(zhí)行【插入】→【圖像】命令，選擇“images”文件夾下的圖片“trans-1.png”，單擊【確定】按鈕插入該圖片。在【屬性】控制面板中把該圖片的寬度改為“15”。提示：這是一個透明圖片，沒有任何內(nèi)容，插入就是為了限制這一列的寬度，以后編輯其他內(nèi)容時一旦此處發(fā)生改變，可以重新修改。這也是設(shè)置小尺寸列寬的一種技巧。（5）單擊該表格的第一行第二列，執(zhí)行【插入】→【圖像】命令，選擇“images”文件夾下的圖片“tit_v_01.jpg”，單擊【確定】按鈕插入該圖片。（6）單擊該表格的第三行第二列，執(zhí)行【插入】→【圖像】命令，選擇“images”文件夾下的圖片“l(fā)ist_1.jpg”，單擊【確定】按鈕插入該圖片。然后依次單擊該表格的第三行第三列和第三行第四列，分別插入圖片“l(fā)ist_2.jpg”“l(fā)ist_3.jpg”。（7）單擊該表格的第四行第二列，在【屬性】控制面板中設(shè)置單元格高度為“100”。（8）單擊該表格的第五行第二列，在【屬性】控制面板中設(shè)置單元格高度為“80”。執(zhí)行【插入】→【圖像】命令，選擇“images”文件夾下的圖片“tit_v_02.jpg”，單擊【確定】按鈕插入該圖片。（9）單擊該表格的第六行第二列，在【屬性】控制面板中設(shè)置單元格高度為“180”。（10）單擊該表格的第七行第二列，在【屬性】控制面板中設(shè)置單元格高度為“180”，同時選中這一行所有的單元格，在【屬性】控制面板中設(shè)置【背景顏色】為“#333333”（深灰色）。（1）單擊該表格的第二行第二列，在【屬性】控制面板中把單元格【垂直】的對齊方式設(shè)置為【頂端】。執(zhí)行【插入】→【表格】命令，在彈出的【表格】對話框中設(shè)置【行數(shù)】為“3”，【列】為“4”，【表格寬度】為“460像素”，【邊框粗細(xì)】【單元格邊距】和【單元格間距】均為“0”，其他選項(xiàng)保持默認(rèn)設(shè)置，單擊【確定】按鈕關(guān)閉對話框。七、版面編排細(xì)化（2）單擊這個嵌套表格的第一行，在【屬性】控制面板中設(shè)置單元格高度為“70”。單擊嵌套表格的第二行，把單元格【垂直】的對齊方式設(shè)置為【頂端】，高度設(shè)置為“70”。單擊嵌套表格的第三行，把單元格【垂直】的對齊方式設(shè)置為【頂端】，高度設(shè)置為“40”。（3）單擊這個表格的外框選中整個嵌套表格，執(zhí)行【編輯】→【復(fù)制】命令，再單擊大表格的第二行第三列，執(zhí)行【編輯】→【粘貼】命令把這個表格粘貼進(jìn)去。以同樣的方式把這個嵌套表格粘貼到大表格的第二行第四列。（4）單擊左側(cè)第一個嵌套表格的第一行，輸入標(biāo)題文字；單擊其第二行，輸入內(nèi)容文字；單擊其第三行，輸入按鈕上的文字“more>>”（見圖7-16）。以相同的方式把第二個和第三個表格所需的文字輸入進(jìn)去（文字的具體內(nèi)容可以參見配套資源中的范例文件）。提示：第一行的標(biāo)題文字中英文書寫完成后按快捷鍵【Shift】+【Enter】，這是一個“軟”回車，直接使用【Enter】鍵是“硬”回車，使用“硬”回車會在兩行之間產(chǎn)生較大的間距。（5）展開界面右側(cè)的【CSS樣式】控制面板，單擊該面板底部的【新建CSS規(guī)則】按鈕打開【新建CSS規(guī)則】對話框，輸入選擇器名稱“tit-e”，選擇定義規(guī)則的位置【layoutcs.css】（通過下拉按鈕選擇，這是前面步驟中已經(jīng)建立的CSS文件），如圖所示。單擊【確定】按鈕進(jìn)入下一級窗口。（6）參照圖7-16設(shè)置CSS樣式如下：【Font-family】設(shè)為【Tahoma】，【Font-size】設(shè)為“18px”，【Color】設(shè)為“黑色”（#000），【Text-decoration】設(shè)為【none】。（7）再新建一個CSS樣式，輸入選擇器名稱（即CSS樣式名）“tit-c”；還是選擇將其定義在【layoutcs.css】中。設(shè)置CSS樣式如下：【Font-family】設(shè)為【微軟雅黑】，【Font-size】設(shè)為“14px”，【Font-weight】設(shè)為【bold】，【Color】設(shè)為“黑色”（#000），【Text-decoration】設(shè)為【none】。（8）參照上面的步驟再新建一個CSS樣式，輸入選擇器名稱“con-c”，同樣將其定義在【layoutcs.css】中。設(shè)置CSS樣式如下：【Font-family】設(shè)為默認(rèn)，【Font-size】設(shè)為“12px”，【Color】設(shè)為“深灰”（#999），【Text-decoration】設(shè)為【none】。（9）參照上面的步驟再新建一個CSS樣式，輸入選擇器名稱“but-c”，同樣將其定義在【layoutcs.css】中。設(shè)置CSS樣式如下：【Font-family】設(shè)為【Tahoma】，【Font-size】設(shè)為“14px”，【Color】設(shè)為“暗紅”（#900），【Text-decoration】設(shè)為【none】。（10）重新全選剛才輸入的英文標(biāo)題文字部分（嵌套表格的第一行），在【屬性】控制面板中單擊【CSS】選項(xiàng)卡，單擊【目標(biāo)規(guī)則】下拉列表，選擇樣式【tit-e】，工作區(qū)里文字的效果會產(chǎn)生相應(yīng)的變化。繼續(xù)全選中文標(biāo)題文字部分，在【目標(biāo)規(guī)則】中選擇樣式【tit-c】。接著全選內(nèi)容文字（嵌套表格的第二行），在【目標(biāo)規(guī)則】中選擇樣式【con-c】。然后全選按鈕文字“more>>”，在【目標(biāo)規(guī)則】中選擇樣式【but-c】。4段文字應(yīng)用4種不同的CSS樣式，檢查一下是否是這樣。（11）參照上面的步驟依次把“表2”第二行第三列和第二行第四列中的嵌套表格各部分文字的格式（CSS樣式）設(shè)置完成。至此，“表2”第二行的版面細(xì)化完成了。（12）單擊“表2”的第六行第二列，在【屬性】控制面板中把單元格【垂直】的對齊方式設(shè)置為【頂端】，【水平】的對齊方式設(shè)置為【默認(rèn)】。然后執(zhí)行【插入】→【表格】命令，在彈出的【表格】對話框中設(shè)置【行數(shù)】為“3”，【列】為“2”，【表格寬度】為“450像素”，【邊框粗細(xì)】【單元格邊距】和【單元格間距】均為“0”，其他選項(xiàng)保持默認(rèn)設(shè)置，單擊【確定】按鈕關(guān)閉對話框。（13）在這個剛建立的嵌套表格上單擊選中第一列的3個單元格，執(zhí)行【修改】→【表格】→【合并單元格】命令，把這3個單元格合并為一個。然后在【屬性】控制面板中把單元格【垂直】的對齊方式設(shè)置為【頂端】，【水平】的對齊方式設(shè)置為【默認(rèn)】。（14）重新選中整個嵌套表格，執(zhí)行【編輯】→【復(fù)制】命令，單擊“表2”的第六行第三列，執(zhí)行【編輯】→【粘貼】命令粘貼進(jìn)去。再用相同的方式把這個表格粘貼到第六行第四列。（15）單擊最左側(cè)（第一個）嵌套表格的第一列，執(zhí)行【插入】→【圖像】命令，在彈出的【選擇圖像源文件】對話框中選擇“images”文件夾下的圖片“l(fā)ist_6.jpg”，單擊【確定】按鈕插入該圖片。單擊這張圖片，然后在【屬性】控制面板中把圖片的【寬】和【高】改為“160”和“120”。（16）單擊嵌套表格的第二列，依次輸入相應(yīng)文字，第一行是標(biāo)題，第二行是日期，第三行是按鈕。（17）參照本部分步驟（4），給第一行的標(biāo)題文字應(yīng)用“tit_c”樣式，第二行的日期文字應(yīng)用“con_c”樣式，第三行的按鈕文字應(yīng)用“but_c”樣式。單擊并拖動這三行的行線，改變它們的高度到合適位置。（18）單擊第二個嵌套表格的第一列，執(zhí)行【插入】→【圖像】命令，在彈出的【選擇圖像源文件】對話框中選擇“images”文件夾下的圖片“l(fā)ist_5.jpg”，單擊【確定】按鈕插入該圖片。參考前面的步驟，修改圖片的大小并將相應(yīng)的文字內(nèi)容和樣式添加進(jìn)去。（19）單擊第三個嵌套表格的第一列，執(zhí)行【插入】→【圖像】命令，在彈出的【選擇圖像源文件】對話框中選擇“images”文件夾下的圖片“l(fā)ist_4.jpg”，單擊【確定】按鈕插入該圖片。參考前面的步驟，修改圖片的大小并將相應(yīng)的文字內(nèi)容和樣式添加進(jìn)去。八、設(shè)置版權(quán)信息（1）單擊“表2”的第七行第二列，在【屬性】控制面板中把單元格【垂直】的對齊方式設(shè)置為【水平居中】，【水平】的對齊方式設(shè)置為【默認(rèn)】。單擊并拖動鼠標(biāo)同時選中該行第三、第四列，執(zhí)行【合并單元格】命令將它們合并在一起。然后執(zhí)行【插入】→【表格】命令，在彈出的【表格】對話框中設(shè)置【行數(shù)】為“4”，【列】為“1”，【表格寬度】為“100%”，【邊框粗細(xì)】【單元格邊距】和【單元格間距】均為“0”，其他選項(xiàng)保持默認(rèn)設(shè)置，單擊【確定】按鈕關(guān)閉對話框。（2）單擊這個嵌套表格的第一行，在【屬性】控制面板中把單元格的高度設(shè)置為“26”，下面幾行也都把高度設(shè)置為“26”。然后分別在第一、第二、第三、第四行中輸入文字，如圖7-23所示。或者打開范例文件，復(fù)制這些文字，執(zhí)行【編輯】→【選擇性粘貼】命令，在彈出的對話框中設(shè)置【粘貼】為【僅文本】，單擊【確定】按鈕關(guān)閉對話框（這樣貼進(jìn)來的文字不帶有原來的格式）。（3）依次選中第一、第二、第三、第四行中輸入的文字，在【屬性】控制面板中單擊【CSS】選項(xiàng)卡，在【目標(biāo)規(guī)則】中選擇樣式【con-c】以應(yīng)用該樣式。九、設(shè)置超級鏈接及鏈接樣式（1）執(zhí)行【文件】→【新建】命令，在彈出的【新建文檔】對話框中從左到右依次選擇【空白頁】【HTML】【無】選項(xiàng)，單擊【創(chuàng)建】按鈕。單擊新文檔底部【屬性】控制面板上的【頁面屬性】按鈕，在彈出的【頁面屬性】對話框【外觀（CSS）】選項(xiàng)卡中將【背景顏色】設(shè)為“#9C0”或你喜歡的任意顏色，單擊【確定】按鈕關(guān)閉對話框。執(zhí)行【文件】→【另存為】命令，在根目錄下存儲為“test01.html”。按照相同的方法，改變背景顏色，依次保存為“test02”（黃色背景）、“test03”（暗紅色背景）、“test04”（黑色背景）。（2）選擇頁面頂部右側(cè)的“中文”兩字，在【屬性】控制面板【鏈接】一欄后單擊【瀏覽文件】圖標(biāo)，在彈出的【選擇文件】對話框中選擇根目錄下的“test01.html”文件，單擊【確定】按鈕。單擊【屬性】控制面板【目標(biāo)】一欄的下拉列表，選擇【_blank】選項(xiàng)，這表示新開一個瀏覽器窗口顯示文件。（3）執(zhí)行【修改】→【頁面屬性】命令，彈出【頁面屬性】對話框，選擇【鏈接（CSS）】選項(xiàng)卡，右側(cè)會顯示相應(yīng)的屬性控制，按圖所示進(jìn)行設(shè)置。（4）執(zhí)行【文件】→【保存全部】命令。此時會發(fā)現(xiàn)不僅文字的顏色變成了灰色，下劃線也消失了。（5）單擊“表2”嵌套表格中的按鈕上的文字“more>>”，為它設(shè)置一個超級鏈接，參照前面步驟設(shè)置超鏈接到“test02.html”文件，【目標(biāo)】一欄同樣選擇【_blank】選項(xiàng)。此時會發(fā)現(xiàn)文字的顏色從原來的暗紅色變成了灰色。因?yàn)槲覀冊谏弦徊街行薷牧顺溄拥娜謽邮剑赃@個樣式的效果也出現(xiàn)在了這里。若需要一個特殊的超鏈接樣式，還是暗紅色的文字，該怎么辦？（6）單擊展開【CSS