Dreamweaver cs5標(biāo)準(zhǔn)實(shí)例教程配套全冊(cè)教學(xué)課件

Dreamweavercs5標(biāo)準(zhǔn)實(shí)例教程配套全冊(cè)教學(xué)課件第1章網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)本章重點(diǎn)本章和網(wǎng)頁(yè)制作的基本步驟，然后簡(jiǎn)要介紹設(shè)計(jì)制作網(wǎng)頁(yè)的常用工具，重點(diǎn)介紹Adobe公司最新推出的DreamweaverCS5，它涵蓋了網(wǎng)頁(yè)制作與站點(diǎn)管理，是使用最多的網(wǎng)頁(yè)制作工具之一。學(xué)習(xí)目的

通過(guò)本章的學(xué)習(xí)，您可以：網(wǎng)頁(yè)與網(wǎng)站網(wǎng)站建設(shè)的基本步驟

網(wǎng)頁(yè)是網(wǎng)絡(luò)上的基本文檔，網(wǎng)頁(yè)中包含文字、圖片、聲音、動(dòng)畫、影像以及鏈接等元素，通過(guò)對(duì)這些元素的有機(jī)組合，就構(gòu)成了包含各種信息的網(wǎng)頁(yè)。簡(jiǎn)單地說(shuō)，通過(guò)瀏覽器在WWW上所看到的每一個(gè)超文本文件都是一個(gè)網(wǎng)頁(yè)，而通過(guò)超鏈接連接在一起的若干個(gè)網(wǎng)頁(yè)的集合即構(gòu)成網(wǎng)站。通常我們看到的網(wǎng)頁(yè)，都是以.htm、.html、.shtml等為后綴的文件。在網(wǎng)站設(shè)計(jì)中，這種純粹HTML格式的網(wǎng)頁(yè)通常被稱為靜態(tài)網(wǎng)頁(yè)。靜態(tài)網(wǎng)頁(yè)的內(nèi)容是固定的，當(dāng)用戶瀏覽網(wǎng)頁(yè)內(nèi)容時(shí)，服務(wù)器僅僅是將已有的靜態(tài)HTML文檔傳送給瀏覽器供用戶閱讀。若網(wǎng)站維護(hù)者要更新網(wǎng)頁(yè)的內(nèi)容，就必須手工更新所有的HTML文檔。所謂動(dòng)態(tài)網(wǎng)頁(yè)，是指服務(wù)器會(huì)針對(duì)不同的使用者以及不同的要求執(zhí)行不同的程序，從而提供不同的服務(wù)，一般與數(shù)據(jù)庫(kù)有關(guān)。這種網(wǎng)頁(yè)通常在服務(wù)器端以擴(kuò)展名asp、jsp或是aspx等儲(chǔ)存。動(dòng)態(tài)網(wǎng)頁(yè)的頁(yè)面自動(dòng)生成，無(wú)須手工維護(hù)和更新HTML文檔；不同的時(shí)間、不同的人訪問(wèn)同一網(wǎng)址時(shí)會(huì)產(chǎn)生不同的頁(yè)面。動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)的最大不同就是Web服務(wù)器和用戶之間的動(dòng)態(tài)交互，這也是Internet強(qiáng)大生命力的體現(xiàn)。1.1網(wǎng)頁(yè)與網(wǎng)站

確定網(wǎng)站的主題和目標(biāo)用戶

規(guī)劃網(wǎng)站的欄目與版塊

組織站點(diǎn)結(jié)構(gòu)收集整理建站資源網(wǎng)頁(yè)版面布局與設(shè)計(jì)

測(cè)試網(wǎng)站

發(fā)布與推廣網(wǎng)站

1.2網(wǎng)站建設(shè)的基本步驟

第2章DreamweaverCS5簡(jiǎn)介

Dreamweaver最早是

Macromedia公司開發(fā)的用于網(wǎng)頁(yè)制作和站點(diǎn)管理的一款“所見即所得”的網(wǎng)頁(yè)編輯工具。它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起，使得各個(gè)層次的開發(fā)人員和設(shè)計(jì)人員都能夠快速創(chuàng)建界面精美的、基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序，其直觀性與高效性是很多網(wǎng)頁(yè)編輯工具無(wú)法比擬的，與Flash、Fireworks并稱為網(wǎng)頁(yè)制作夢(mèng)幻組合。最新推出的DreamweaverCS5趨向于易用快捷，開發(fā)環(huán)境精簡(jiǎn)而高效，由于與AdobeCSLive在線服務(wù)AdobeBrowserLab集成，開發(fā)人員能以可視方式或直接在代碼中進(jìn)行設(shè)計(jì)，使用內(nèi)容管理系統(tǒng)開發(fā)頁(yè)面并實(shí)現(xiàn)精確的瀏覽器兼容性測(cè)試。學(xué)習(xí)要點(diǎn)初次啟動(dòng)DreamweaverCS5DreamweaverCS5的窗口組成文件操作2.1初次啟動(dòng)DreamweaverCS5

雙擊桌面上的AdobeDreamweaverCS5圖標(biāo)執(zhí)行“開始”/“程序”/“AdobeDreamweaverCS5”命令，即可啟動(dòng)DreamweaverCS5簡(jiǎn)體中文版。第一次啟動(dòng)DreamweaverCS5時(shí)，會(huì)彈出如圖2-1所示的“默認(rèn)編輯器”對(duì)話框，用戶可以根據(jù)個(gè)人喜好將DreamweaverCS5設(shè)置為指定文件類型的默認(rèn)編輯器。2.1DreamweaverCS5的窗口組成

該界面用于打開最近使用過(guò)的文檔或創(chuàng)建新文檔，還可以從中通過(guò)產(chǎn)品介紹或教程了解關(guān)于Dreamweaver的更多信息。如果不希望每次啟動(dòng)時(shí)都打開這個(gè)界面，可以在“首選參數(shù)”對(duì)話框中修改設(shè)置。單擊歡迎界面上“新建”欄目下的文檔類型，或執(zhí)行“文件”/“新建”命令，在打開的“新建文檔”對(duì)話框中選擇“空白頁(yè)”類別的HTML基本項(xiàng)，然后選擇布局欄的“無(wú)”，單擊“創(chuàng)建”按鈕進(jìn)入DreamweaverCS5中文版的工作界面，如圖所示。2.2.1菜單欄2.2.2文檔工具欄：切換到代碼視圖，顯示當(dāng)前文檔的代碼。：切換到設(shè)計(jì)視圖，顯示的內(nèi)容與瀏覽器中顯示的內(nèi)容相同。：在同一屏幕中顯示代碼和設(shè)計(jì)視圖。：在“設(shè)計(jì)”視圖或“折分”視圖下，單擊該按鈕可以在不打開一個(gè)新的瀏覽器窗口的情況下實(shí)時(shí)預(yù)覽頁(yè)面的效果。再次單擊該按鈕，即可返回到可編輯的“設(shè)計(jì)”視圖或“折分”視圖。：在“實(shí)時(shí)視圖”中單擊該按鈕，Dreamweaver將以黃色突出顯示瀏覽器為呈現(xiàn)該頁(yè)面而執(zhí)行的代碼版本，此代碼是不可編輯的。再次單擊該按鈕，即可返回到可編輯的“代碼”視圖。2.2.3“插入”面板單擊文檔窗口右側(cè)浮動(dòng)面板組中的“插入”按鈕，即可彈出以前熟悉的“插入”面板?！安迦搿泵姘骞灿?類對(duì)象元素，包含一些最常用的項(xiàng)目：常用、布局、表單、數(shù)據(jù)、Spry、InContextEditing、文本和收藏夾?！安迦搿泵姘宓某跏家晥D為“常用”面板，單擊“插入”面板中“常用”面板右側(cè)的倒三角形按鈕，即可在彈出的下拉列表中選擇需要的面板，從而在不同的面板之間進(jìn)行切換。如圖所示。

2.2.4工作區(qū)

2.2.5狀態(tài)欄

DreamweaverCS5的狀態(tài)欄位于文檔窗口底部，嵌有三個(gè)重要的工具：標(biāo)簽選擇器、窗口大小彈出菜單和下載指示器，分別用于顯示和控制文檔源代碼、顯示頁(yè)面大小、查看傳輸時(shí)間等。如圖所示。2.2.6屬性面板

在DreamweaverCS5中，選中某一個(gè)對(duì)象之后，“屬性”面板將顯示被選中對(duì)象的屬性。用戶還可以在屬性面板中修改被選對(duì)象的各項(xiàng)屬性值。如上圖所示。2.2.7浮動(dòng)面板

在DreamweaverCS5工作環(huán)境的右側(cè)存在著許多浮動(dòng)面板。啟動(dòng)DreamweaverCS5后，有些浮動(dòng)面板已經(jīng)打開，更多的則沒(méi)有顯示。這些面板可以自由地在界面上拖動(dòng)，也可以將多個(gè)面板組合在一起，成為一個(gè)選項(xiàng)卡組，在默認(rèn)的情況下，DreamweaverCS5中的浮動(dòng)面板都是成組排列于工作環(huán)境的右側(cè)，并且自動(dòng)排齊。2.2.8標(biāo)尺、網(wǎng)格與輔助線

使用標(biāo)尺、網(wǎng)格和輔助線可以很方便地布局對(duì)象，并能了解編輯對(duì)象的位置。1．標(biāo)尺選擇“查看”/“標(biāo)尺”/“顯示”命令即可顯示標(biāo)尺。在文檔編輯窗口拖動(dòng)鼠標(biāo)時(shí)，在標(biāo)尺上能查看到當(dāng)前鼠標(biāo)位置的坐標(biāo)。再次選擇“查看”/“標(biāo)尺”命令可以隱藏標(biāo)尺。在“查看”/“標(biāo)尺”命令的子命令中，還可以根據(jù)設(shè)計(jì)需要設(shè)置標(biāo)尺的原點(diǎn)位置和單位。2．網(wǎng)格網(wǎng)格是文檔窗口中縱橫交錯(cuò)的直線，通過(guò)網(wǎng)格可以精確定位圖像對(duì)象。選擇“查看”/“網(wǎng)格”/“顯示網(wǎng)格”命令，即可在文檔編輯窗口中顯示網(wǎng)格。選擇“查看”/“網(wǎng)格”/“靠齊到網(wǎng)格”命令，在文檔中創(chuàng)建或移動(dòng)對(duì)象時(shí)，就會(huì)自動(dòng)對(duì)齊距離最近的網(wǎng)格線。選擇“查看”/“網(wǎng)格”/“網(wǎng)格設(shè)置”命令，在彈出的“網(wǎng)格設(shè)置”對(duì)話框中可以設(shè)置網(wǎng)格的參數(shù)，如顏色、間隔和線型。3．輔助線使用輔助線可以更精確地排列圖像，標(biāo)記圖像中的重要區(qū)域。將鼠標(biāo)移到標(biāo)尺上，按住鼠標(biāo)左鍵并拖動(dòng)到文檔中合適的位置釋放，即可添加輔助線。2.3文件操作

Dreamweaver的文件操作可以看作是制作網(wǎng)頁(yè)的基本操作，它包括新建文件、打開文件、導(dǎo)入文件、保存和關(guān)閉文件、設(shè)置文檔屬性等。

2.3.1新建、打開文檔執(zhí)行“文件”/“新建”命令，在彈出的“新建文檔”對(duì)話框中，選擇想要?jiǎng)?chuàng)建文件的類型和布局，然后單擊“創(chuàng)建”按鈕，即可創(chuàng)建新文件。

打開網(wǎng)頁(yè)文件可以分為直接打開網(wǎng)頁(yè)文件和在框架中打開網(wǎng)頁(yè)文件兩種。（1）直接打開文件選擇“文件”/“打開”命令，彈出“打開”對(duì)話框。用戶也可在對(duì)話框中雙擊所需文件來(lái)打開。如果DreamweaverCS5還沒(méi)有啟動(dòng)，可以右擊要打開的文件，在彈出的菜單中執(zhí)行“使用DreamweaverCS5編輯”命令來(lái)打開文件。（2）在框架中打開文件如果已打開框架集文件，要在框架集中某一個(gè)框架打開文件，可以先把光標(biāo)定位在需要打開文件的框架內(nèi)，選擇“文件”/“在框架中打開”命令，則會(huì)打開“選擇HTML文件”對(duì)話框。在此方式下，只能打開以html為擴(kuò)展名的文件。2.3.2導(dǎo)入、保存、關(guān)閉文檔執(zhí)行“文件”/“導(dǎo)入”命令下的子命令，然后找到需要導(dǎo)入的文件，單擊“打開”命令，即可導(dǎo)入相應(yīng)的文件。如果同時(shí)打開了多個(gè)網(wǎng)頁(yè)文件，則執(zhí)行“文件”/“保存”或“文件”/“另存為”命令只保存當(dāng)前編輯的頁(yè)面。若要保存打開的所有頁(yè)面，則須執(zhí)行“文件”/“保存全部”命令。若是第一次保存該文件，則執(zhí)行“文件”/“保存”命令會(huì)彈出“另存為”對(duì)話框。若文件已保存過(guò)，則執(zhí)行“文件”/“保存”命令時(shí)，直接保存文件。如果希望將一個(gè)網(wǎng)頁(yè)文檔以模板的形式保存，切換到要保存的文檔所在的窗口，執(zhí)行“文件”/“另存為模板”命令，則會(huì)打開“另存模板”對(duì)話框。在該對(duì)話框的“站點(diǎn)”下拉列表框中選擇一個(gè)保存該模板文件的站點(diǎn)，然后在“另存為”后面的文本框中輸入文件的名稱，最后單擊“保存”按鈕完成文件的保存。提示：第一次保存模板文件時(shí)，DreamweaverCS5將自動(dòng)為站點(diǎn)創(chuàng)建Templates文件夾，并把模板文件存放在Templates文件夾中。請(qǐng)不要把非模板文件存放到此文件夾中。2.3.4設(shè)置文檔屬性頁(yè)面標(biāo)題、背景圖像和顏色、文本和鏈接顏色以及邊距是每個(gè)Web文檔的基本屬性。第3章編輯圖形

本章重點(diǎn)

DreamweaverCS5不僅提供網(wǎng)頁(yè)編輯特性，而且?guī)в袕?qiáng)大的站點(diǎn)管理功能。用戶可以首先在本地計(jì)算機(jī)的磁盤上創(chuàng)建本地站點(diǎn)，從全局上控制站點(diǎn)結(jié)構(gòu)，管理站點(diǎn)中的各種文檔，進(jìn)行文檔資源和鏈接等路徑的正確設(shè)置，然后上傳到服務(wù)器，供網(wǎng)民瀏覽。學(xué)習(xí)目的通過(guò)本章的學(xué)習(xí)，您可以掌握：站點(diǎn)相關(guān)術(shù)語(yǔ)構(gòu)建本地站點(diǎn)管理本地站點(diǎn)和站點(diǎn)文件測(cè)試站點(diǎn)站點(diǎn)發(fā)布3.1站點(diǎn)相關(guān)術(shù)語(yǔ)

3.1.1Internet服務(wù)器和本地計(jì)算機(jī)Internet服務(wù)器是網(wǎng)絡(luò)上一種為客戶端計(jì)算機(jī)提供各種Internet服務(wù)（包括WWW、FTP、e-mail等）的高性能計(jì)算機(jī)，它在網(wǎng)絡(luò)操作系統(tǒng)的控制下，將與其相連的硬盤、磁帶、打印機(jī)、Modem及各種專用通訊設(shè)備提供給網(wǎng)絡(luò)上的客戶站點(diǎn)共享，也能為網(wǎng)絡(luò)用戶提供集中計(jì)算、信息發(fā)表及數(shù)據(jù)管理等服務(wù)。它的高性能主要體現(xiàn)在高速度的運(yùn)算能力、長(zhǎng)時(shí)間的可靠運(yùn)行、強(qiáng)大的外部數(shù)據(jù)吞吐能力等方面。對(duì)于WWW瀏覽服務(wù)來(lái)說(shuō)，Internet服務(wù)器主要用于存儲(chǔ)網(wǎng)民所瀏覽的Web站點(diǎn)和頁(yè)面。網(wǎng)民在瀏覽網(wǎng)頁(yè)時(shí)，不需要了解它的實(shí)際位置，只需要在地址欄輸入網(wǎng)址，按下回車，就可以輕松瀏覽網(wǎng)頁(yè)。對(duì)于瀏覽網(wǎng)頁(yè)的用戶來(lái)說(shuō)，他們所使用的計(jì)算機(jī)被稱作本地計(jì)算機(jī)。本地計(jì)算機(jī)也可能做服務(wù)器，只不過(guò)可能沒(méi)有專業(yè)的服務(wù)器好，比如說(shuō)訪問(wèn)量過(guò)大可能就會(huì)出現(xiàn)癱瘓等狀況。本地計(jì)算機(jī)和Internet服務(wù)器之間通過(guò)各種線路（如電話線、ADSL、ISDN或其他纜線等）進(jìn)行連接，以實(shí)現(xiàn)相互的通信，在連接線路中，可能會(huì)通過(guò)各種各樣的中間環(huán)節(jié)。3.1.2本地站點(diǎn)與遠(yuǎn)端站點(diǎn)

嚴(yán)格地說(shuō)，站點(diǎn)是一種文檔的磁盤組織形式，它由文檔和文檔所在的文件夾組成。設(shè)計(jì)良好的網(wǎng)站通常具有科學(xué)的結(jié)構(gòu)，利用不同的文件夾，將不同的網(wǎng)頁(yè)內(nèi)容分門別類地保存。結(jié)構(gòu)良好的網(wǎng)站，不僅便于管理，也便于更新。在Internet上瀏覽網(wǎng)頁(yè)，就是用瀏覽器打開存儲(chǔ)于Internet服務(wù)器上的HTML文檔及其他相關(guān)資源。基于Internet服務(wù)器的不可知特性，我們通常將存儲(chǔ)于Internet服務(wù)器上的站點(diǎn)稱作遠(yuǎn)端站點(diǎn)。利用DreamweaverCS5可以對(duì)位于Internet服務(wù)器上的站點(diǎn)文檔直接進(jìn)行編輯和管理。但這在很多時(shí)候非常不便，例如網(wǎng)絡(luò)速度和網(wǎng)絡(luò)的不穩(wěn)定性等，都會(huì)對(duì)管理和編輯操作帶來(lái)影響。此外，直接對(duì)位于Internet服務(wù)器上的文檔和站點(diǎn)進(jìn)行操作，必須始終保持同Internet的連接。利用DreamweaverCS5，用戶可以在本地計(jì)算機(jī)上創(chuàng)建出站點(diǎn)的框架，從整體上對(duì)站點(diǎn)全局進(jìn)行把握。站點(diǎn)設(shè)計(jì)完畢之后，再利用各種上傳工具，例如FTP程序，將本地站點(diǎn)上載到Internet服務(wù)器上，形成遠(yuǎn)端站點(diǎn)。3.2構(gòu)建本地站點(diǎn)“默認(rèn)圖像文件夾”：用于設(shè)置本地站點(diǎn)圖像文件的默認(rèn)保存位置?！版溄酉鄬?duì)于”：用于設(shè)置為鏈接創(chuàng)建的文檔路徑的類型，文檔相對(duì)路徑或根目錄相對(duì)路徑?！癢ebURL”：用于設(shè)置本站點(diǎn)的地址，以便DreamweaverCS5對(duì)文檔中的絕對(duì)地址進(jìn)行校驗(yàn)?！皡^(qū)分大小寫的鏈接檢查”：選中此項(xiàng)后，對(duì)站點(diǎn)中的文件進(jìn)行鏈接檢查時(shí)，將檢查鏈接的大小寫與文件名的大小寫是否相匹配。此選項(xiàng)用于文件名區(qū)分大小寫的UNIX系統(tǒng)?！皢⒂镁彺妗保簞?chuàng)建本地站點(diǎn)的緩存，以加快站點(diǎn)中鏈接更新的速度，同時(shí)在站點(diǎn)地圖模式中，清晰地反映當(dāng)前站點(diǎn)的結(jié)構(gòu)。

如果要?jiǎng)?chuàng)建動(dòng)態(tài)網(wǎng)站，則還需要指定遠(yuǎn)程服務(wù)器和測(cè)試服務(wù)器。在DreamweaverCS5中，用戶可以在一個(gè)視圖中指定遠(yuǎn)程服務(wù)器和測(cè)試服務(wù)器，從而使用戶可以以前所未有的速度快速建立網(wǎng)站，分階段或聯(lián)網(wǎng)站點(diǎn)甚至還可以使用多臺(tái)服務(wù)器。

注意：指定測(cè)試服務(wù)器時(shí)，必須在“基本”屏幕中指定WebURL。

從DreamweaverCS5開始，Dreamweaver將不再安裝ASP.NET、ASPJavaScript或JSP服務(wù)器行為。但DreamweaverCS5對(duì)這些頁(yè)面仍然提供實(shí)時(shí)視圖、代碼顏色和代碼提示支持，且無(wú)需在“站點(diǎn)設(shè)置”對(duì)話框中選擇ASP.NET、ASPJavaScript或JSP。3.3管理本地站點(diǎn)和站點(diǎn)文件3.3.1管理站點(diǎn)1．打開本地站點(diǎn)（1）執(zhí)行“窗口”/“文件”命令，打開文件管理面板。（2）單擊文件管理面板左上角的下拉列表，從中選擇需要的站點(diǎn)。2．編輯站點(diǎn)（1）執(zhí)行“站點(diǎn)”/“管理站點(diǎn)”命令，彈出“管理站點(diǎn)”對(duì)話框。（2）選擇需要編輯的站點(diǎn)，單擊“編輯”按鈕，彈出該站點(diǎn)的“站點(diǎn)設(shè)置”對(duì)話框。（3）重新設(shè)置站點(diǎn)的屬性。3．刪除站點(diǎn)（1）執(zhí)行“站點(diǎn)”/“管理站點(diǎn)”命令，彈出“管理站點(diǎn)”對(duì)話框。（2）選擇需要?jiǎng)h除的站點(diǎn)，單擊“刪除”按鈕，彈出一個(gè)對(duì)話框，提示用戶本操作不能通過(guò)執(zhí)行“編輯”/“撤消”命令的辦法恢復(fù)。（3）單擊“是”，即可刪除選中站點(diǎn)。提示：刪除站點(diǎn)實(shí)際上只是刪除了Dreamweaver同該本地站點(diǎn)之間的關(guān)系。但是實(shí)際的本地站點(diǎn)內(nèi)容，包括文件夾和文檔等，仍然保存在磁盤相應(yīng)的位置上。用戶可以重新創(chuàng)建指向該位置的新站點(diǎn)。4．復(fù)制站點(diǎn)3.3.2使用文件面板

3.3.3

操作站點(diǎn)文件或文件夾1．新建/刪除站點(diǎn)文件

提示：同刪除站點(diǎn)的操作不同，這種對(duì)文件或文件夾的刪除操作，會(huì)從磁盤上真正刪除相應(yīng)的文件或文件夾。2．重命名站點(diǎn)文件3．編輯站點(diǎn)文件4．移動(dòng)/復(fù)制文件和文件夾5．刷新本地站點(diǎn)文件列表如果在DreamweaverCS5之外對(duì)站點(diǎn)中的文件夾或文件進(jìn)行了修改，則需要對(duì)本地站點(diǎn)文件列表進(jìn)行刷新，才可以看到修改后的結(jié)果。3.3.4存儲(chǔ)庫(kù)視圖DreamweaverCS5集成了一個(gè)版本控制軟件Subversion，可以提供更健壯的文件版本控制、回滾，等等的取出文件、存回文件的操作。Dreamweaver雖然不是一個(gè)完整的SVN客戶端，卻使用戶無(wú)需任何第三方工具或命令行界面，就可獲取文件的最新版本、更改或提交文件。1．建立SVN連接由于DreamweaverCS5只是集成了Subversion客戶端，因此在進(jìn)行存儲(chǔ)庫(kù)視圖操作之前，必須建立與SVN服務(wù)器的連接。2．獲取最新版本的文件3．提交文件

提示：在“文件”面板的文件列表中，文件上的綠色選中標(biāo)記表示此文件有更改，但尚未提交到存儲(chǔ)庫(kù)。4．更新文件或文件夾的SVN狀態(tài)5．鎖定和解鎖文件6．向存儲(chǔ)庫(kù)添加新文件

提示：在“文件”面板中，文件上的藍(lán)色加號(hào)表示SVN存儲(chǔ)庫(kù)中尚沒(méi)有此文件。7．解析沖突的文件3.4測(cè)試站點(diǎn)3.4.1管理網(wǎng)頁(yè)鏈接1．檢查斷開的鏈接選擇“文件”/“檢查頁(yè)”/“鏈接”命令，可以檢查當(dāng)前頁(yè)面的鏈接。選擇“站點(diǎn)”/“檢查站點(diǎn)范圍的鏈接”菜單命令，Dreamweaver將自動(dòng)檢測(cè)當(dāng)前站點(diǎn)中的所有鏈接。檢查完畢，Dreamweaver會(huì)在“結(jié)果”面板的“鏈接檢查器”頁(yè)面顯示檢查結(jié)果。

如果發(fā)現(xiàn)了錯(cuò)誤的鏈接，Dreamweaver會(huì)在“鏈接檢查器”頁(yè)面的文件窗格中列出鏈接錯(cuò)誤所在的頁(yè)面。雙擊檢測(cè)到的一個(gè)結(jié)果，會(huì)自動(dòng)打開相應(yīng)的頁(yè)面，并直接定位到錯(cuò)誤的鏈接處，修改鏈接錯(cuò)誤既快又方便。2．檢測(cè)無(wú)用文件（1）執(zhí)行“站點(diǎn)”/“檢查站點(diǎn)范圍的鏈接”菜單命令。（2）在“顯示”后面的下拉列表框中選擇“孤立文件”選項(xiàng)。3．顯示外部鏈接利用DreamweaverCS5的鏈接檢查器，還可以查看當(dāng)前站點(diǎn)中包含了哪些外部鏈接，但不會(huì)檢查這些鏈接是否正確。在“鏈接檢查器”頁(yè)面的“顯示”下拉列表中選擇“外部鏈接”選項(xiàng)，則對(duì)話框的窗格中將顯示當(dāng)前網(wǎng)站中使用的所有外部鏈接及相應(yīng)的文件。如圖所示。3.5站點(diǎn)發(fā)布3.5.1配置遠(yuǎn)程站點(diǎn)3.5.2上傳、下載與同步更新1．上傳站點(diǎn)文件

如果要上傳的文件尚未保存，可能會(huì)出現(xiàn)一個(gè)對(duì)話框（取決于用戶在“首選參數(shù)”對(duì)話框的“站點(diǎn)”類別中設(shè)置的首選參數(shù)），提示用戶在將文件上傳到遠(yuǎn)端服務(wù)器之前進(jìn)行保存。如果出現(xiàn)對(duì)話框，請(qǐng)單擊“是”保存該文件，或者單擊“否”將以前保存的版本上傳到遠(yuǎn)端服務(wù)器上。2．下載站點(diǎn)文件3．遠(yuǎn)程與本地站點(diǎn)同步（1）執(zhí)行“站點(diǎn)”/“同步站點(diǎn)范圍”菜單命令，打開“同步文件”對(duì)話框。（2）在“同步”下拉列表框中選擇同步的范圍，當(dāng)前整個(gè)站點(diǎn)或當(dāng)前選中文件。（3）在“方向”下拉列表框中設(shè)置文件同步的方式。（4）如果要將本地上沒(méi)有的遠(yuǎn)程站點(diǎn)上的文件刪除，則選中“刪除本地驅(qū)動(dòng)器上沒(méi)有的遠(yuǎn)端文件”復(fù)選框。（5）單擊“預(yù)覽”按鈕顯示更新設(shè)置預(yù)覽對(duì)話框。如圖所示。（6）如果存在需要更新的文件，選中該文件旁邊的“上傳”按鈕，然后單擊“確定”按鈕。至此，遠(yuǎn)程與本機(jī)文件的同步完成。第4章文字與圖形

本章重點(diǎn)

所謂圖文并茂，相得益彰，文字和圖片具有一種相互補(bǔ)充的視覺(jué)關(guān)系，頁(yè)面上文字太多，就顯得沉悶，缺乏生氣；頁(yè)面上圖片太多，缺少文字，勢(shì)必會(huì)減少頁(yè)面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁(yè)面，又使頁(yè)面有豐富的內(nèi)容。本章將介紹網(wǎng)頁(yè)中文本與圖形的相關(guān)操作。合理地在網(wǎng)頁(yè)中運(yùn)用這些操作，可以更生動(dòng)直觀、形象地表現(xiàn)設(shè)計(jì)主題，增強(qiáng)頁(yè)面的視覺(jué)效果。學(xué)習(xí)目的通過(guò)本章的學(xué)習(xí)，您可以掌握：在網(wǎng)頁(yè)中加入文本在網(wǎng)頁(yè)中應(yīng)用圖像4.1在網(wǎng)頁(yè)中加入文本

4.1.1插入文本1．直接在Dreamweaver的文檔窗口光標(biāo)所在位置輸入文本內(nèi)容。

2．在其他的應(yīng)用程序或文檔中復(fù)制文本，然后切換回Dreamweaver文檔窗口，將光標(biāo)插入到要放置文本的地方，再選擇“編輯”/“粘貼”或“選擇性粘貼”命令。利用DreamweaverCS5的粘貼選項(xiàng)，可以保留所有源格式設(shè)置，也可以只粘貼文本，還可以指定粘貼文本的方式。

3．使用“文件”/“導(dǎo)入”命令導(dǎo)入其他文檔中的文本，如XML、表格式數(shù)據(jù)、word文檔和Excel文檔。

4．從支持文本拖放功能的應(yīng)用程序中拖放文本到DreamweaverCS5的文檔窗口。4.1.2設(shè)置文本屬性

文本的大部分格式設(shè)置都可以通過(guò)屬性設(shè)置面板實(shí)現(xiàn)。執(zhí)行“窗口”/“屬性”命令，即可打開屬性設(shè)置面板，如圖所示。單擊屬性面板左上角的CSS按鈕，即可使用CSS規(guī)則格式化文本，如圖所示。

注意：“字體”、“大小”、“文本顏色”、“粗體”、“斜體”和“對(duì)齊”屬性始終顯示應(yīng)用于“文檔”窗口中當(dāng)前所選內(nèi)容的規(guī)則的屬性。在更改其中的任何屬性時(shí)，將會(huì)影響目標(biāo)規(guī)則。4.1.3創(chuàng)建列表項(xiàng)

在編輯網(wǎng)頁(yè)時(shí)，常常需要對(duì)同級(jí)或不同級(jí)的多個(gè)項(xiàng)目進(jìn)行編號(hào)或排列，以顯示多個(gè)項(xiàng)目間的層次關(guān)系，或使文本布局更有條理，這就需要用到列表。在Dreamweaver中可以從已有的文本或者從文檔窗口中的新文本創(chuàng)建項(xiàng)目列表和編號(hào)列表，列表還可以被嵌套。項(xiàng)目列表在各個(gè)項(xiàng)的前面沒(méi)有數(shù)字，用不同的符號(hào)及縮進(jìn)的多少來(lái)區(qū)分不同的層次；編號(hào)列表則需要通過(guò)數(shù)字及縮進(jìn)來(lái)區(qū)分不同的層次。4.1.4插入日期

DreamweaverCS5為讀者提供了插入日期的功能，使用它可以用任意格式在文檔中插入當(dāng)前時(shí)間，同時(shí)日期自動(dòng)更新。

提示：“插入日期”對(duì)話框中顯示的日期和時(shí)間不是當(dāng)前日期，也不反映訪問(wèn)者在查看站點(diǎn)時(shí)所看到的日期/時(shí)間。它們只是說(shuō)明此信息的顯示方式的示例。4.1.5插入特殊字符

在HTML中，一個(gè)特殊字符有兩種表達(dá)方式，一種稱作數(shù)字參考，另一種稱作實(shí)體參考。所謂數(shù)字參考，就是用數(shù)字來(lái)表示文檔中的特殊字符，通常由前綴“&#”加上數(shù)值，再加上后綴“;”組成，其表達(dá)方式為：&#D;，其中D是一個(gè)十進(jìn)制數(shù)值。所謂實(shí)體參考，實(shí)際上就是用有意義的名稱來(lái)表示特殊字符，通常由前綴“&”加上字符對(duì)應(yīng)的名稱，再加上后綴“;”組成。其表達(dá)方式為：&name；，其中name是一個(gè)用于表示字符的名稱，且區(qū)分大小寫。打開“插入”面板，切換到“文本”插入面板，然后單擊“字符：其他字符”圖標(biāo)右下角的下拉箭頭，就可以看到Dreamweaver自帶的常用特殊字符，如圖所示。如果在下拉菜單中沒(méi)有找到需要的特殊字符，則單擊下拉菜單中的“其他字符”按鈕，打開“插入其他字符”對(duì)話框，即可查看其他特殊字符。如圖4-11所示。4.2在網(wǎng)頁(yè)中應(yīng)用圖像4.2.1網(wǎng)頁(yè)中可以使用的圖像格式圖像文件有多種格式，但Web頁(yè)面中通常使用的只有三種，即GIF、JPEG和PNG。1．GIF（圖形交換格式）文件最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，例如導(dǎo)航條、按鈕、圖標(biāo)、徽標(biāo)或其他具有統(tǒng)一色彩和色調(diào)的圖像。2．JPEG（聯(lián)合圖像專家組標(biāo)準(zhǔn)）該文件格式可以包含數(shù)百萬(wàn)種顏色，主要用于攝影或連續(xù)色調(diào)圖像的高級(jí)格式。隨著JPEG文件品質(zhì)的提高，圖片文件的大小和下載時(shí)間也會(huì)隨之增加。通常可以通過(guò)壓縮JPEG文件在圖像品質(zhì)和文件大小之間達(dá)到良好的平衡。3．PNG（可移植網(wǎng)絡(luò)圖形）這種文件格式是一種替代GIF格式的無(wú)專利權(quán)限制的格式，它包括對(duì)索引色、灰度、真彩色圖像以及alpha通道透明的支持。4.2.2插入水平線1．將插入點(diǎn)放在文檔中需要水平線的位置。2．單擊“插入”/“HTML”/“水平線”菜單命令，即可在光標(biāo)處插入一條水平線。3．在屬性面板中，設(shè)置水平線的寬度和高度。4.2.3插入圖像執(zhí)行“插入”/“圖像”命令，或單擊“常用”面板上的按鈕。4.2.4插入圖像占位符

圖像占位符是在將最終圖形添加到Web頁(yè)面之前使用的臨時(shí)圖形。圖像占位符不在瀏覽器中顯示，可以幫助用戶在真正創(chuàng)建圖像之前確定圖像在頁(yè)面上的位置。選擇“插入”/“圖像對(duì)象”/“圖像占位符”菜單命令。注意：與在“設(shè)計(jì)”視圖中看到的圖像占位符不同，在瀏覽器中查看圖像占位符時(shí)，不會(huì)顯示占位符的名稱和大小，而只顯示占位符的替換文本。4.2.5設(shè)置圖像屬性

在實(shí)際設(shè)計(jì)中，往往需要對(duì)圖像的一些屬性進(jìn)行調(diào)整，如大小、邊框、位置、對(duì)齊等等。這些操作可以通過(guò)如圖所示的圖像屬性控制面板得以實(shí)現(xiàn)。

注意：DreamweaverCS5的圖像編輯功能僅適用于JPEG和GIF圖像文件格式。其他圖像文件格式不能使用這些圖像編輯功能進(jìn)行編輯。4.2.6設(shè)置外部編輯器

使用DreamweaverCS5的“首選參數(shù)”對(duì)話框設(shè)定首選圖像編輯器可以提高整個(gè)工作過(guò)程的效率。設(shè)置首選圖像編輯器可以讓讀者在使用Dreamweaver的同時(shí)啟用指定的編輯器來(lái)修改編輯圖像。4.2.7插入鼠標(biāo)經(jīng)過(guò)圖像

所謂鼠標(biāo)經(jīng)過(guò)圖像，就是當(dāng)鼠標(biāo)移動(dòng)到圖像上面時(shí)，切換成另一幅圖像，同時(shí)可以通過(guò)單擊該圖像，打開鏈接的網(wǎng)頁(yè)。一個(gè)鼠標(biāo)經(jīng)過(guò)圖像其實(shí)是由兩張圖片組成的：頁(yè)面顯示的圖像和鼠標(biāo)經(jīng)過(guò)時(shí)的圖像。這兩張圖片應(yīng)具有相同的尺寸，如果兩張圖片的尺寸不同，DreamweaverCS5會(huì)自動(dòng)將第二張圖片的尺寸調(diào)整成第一張圖片的尺寸。執(zhí)行“插入”/“圖像對(duì)象”/“鼠標(biāo)經(jīng)過(guò)圖像”命令。4.2.8導(dǎo)入FireworksHTML

在Fireworks中可以將創(chuàng)建的分割圖像、熱點(diǎn)圖像、翻轉(zhuǎn)圖像以及相應(yīng)的鏈接和腳本導(dǎo)出，同時(shí)產(chǎn)生相應(yīng)的HTML代碼及圖像。這些HTML代碼可以輕松地導(dǎo)入到Dreamweaver中，以便讓Dreamweaver結(jié)合其他功能來(lái)總體規(guī)劃并開發(fā)網(wǎng)站。

在Dreamweaver文檔窗口，選擇“插入”/“圖像對(duì)象”/“FireworksHTML”菜單命令，打開“插入FireworksHTML”對(duì)話框，如圖所示。第5章制作超鏈接

本章重點(diǎn)

Internet的核心就是超級(jí)鏈接（Hyperlink），沒(méi)有鏈接，就不存在WorldWideWeb。通過(guò)超級(jí)鏈接的方式可以使各個(gè)網(wǎng)頁(yè)聯(lián)接起來(lái)構(gòu)成一個(gè)有機(jī)整體，使訪問(wèn)者能夠在各個(gè)頁(yè)面之間跳轉(zhuǎn)。超級(jí)鏈接可以是一段文本，一幅圖像或其它網(wǎng)頁(yè)元素，當(dāng)在瀏覽器中用鼠標(biāo)單擊這些對(duì)象時(shí)，瀏覽器可以載入一個(gè)指定的新頁(yè)面，或者轉(zhuǎn)到頁(yè)面的其它位置。學(xué)習(xí)目的

通過(guò)本章的學(xué)習(xí)，您可以掌握：認(rèn)識(shí)超級(jí)鏈接創(chuàng)建、管理鏈接使用熱點(diǎn)制作圖像映射5.1認(rèn)識(shí)超級(jí)鏈接

超鏈接由兩部分組成，一部分是在瀏覽網(wǎng)頁(yè)時(shí)可以看到的部分，稱為超鏈接載體，另一部分是超鏈接所鏈接的目標(biāo)。在瀏覽頁(yè)面時(shí)，單擊超鏈接的載體將會(huì)打開鏈接目標(biāo)。超鏈接載體可以是文本、圖像；鏈接的目標(biāo)可以是網(wǎng)頁(yè)、圖片、視頻或聲音和電子郵件地址等。5.2創(chuàng)建、管理超級(jí)鏈接

5.2.1創(chuàng)建文本超鏈接1、在文檔窗口中選中需要建立鏈接的文本。2、在屬性面板的“鏈接”文本框中輸入鏈接目標(biāo)；或選擇“窗口”/“屬性”菜單命令打開屬性面板。在“鏈接”后的文本框中輸入鏈接目標(biāo)。默認(rèn)情況下，文本鏈接顯示為藍(lán)色，并加有下劃線。用戶可以選擇“修改”/“頁(yè)面屬性”菜單命令，在“頁(yè)面屬性”面板的“鏈接”分類頁(yè)面設(shè)置超級(jí)鏈接在各種狀態(tài)下的顏色，以及選擇是否顯示下劃線。

注意：Dreamweaver不支持?jǐn)U展字符集（也被稱為HighASCII），所以在指定鏈接的URL時(shí)，不能包含擴(kuò)展字符集，且完全的URL最多不能超過(guò)255個(gè)字符。此外，盡管大多數(shù)瀏覽器可以解釋路徑名或URL中的空格，但在UNIX應(yīng)用中，空格會(huì)被變?yōu)?20，這將使得URL比較難看。

如果鏈接目標(biāo)是計(jì)算上的一個(gè)文件或圖片，可以單擊“鏈接”文本框右側(cè)的文件夾圖標(biāo)，打開“選擇文件”對(duì)話框，查找并選擇文件?；蛘哌x擇“指向文件”圖標(biāo)，并按下鼠標(biāo)左鍵拖動(dòng)到“文件”面板中一個(gè)現(xiàn)存的頁(yè)面。5.2.2創(chuàng)建圖片鏈接

創(chuàng)建圖片鏈接的方法與創(chuàng)建文本鏈接大致相同，不同之處在于鏈接的載體是圖片，而不是文本。使用圖片鏈接時(shí)，如果在屬性面板中為圖片設(shè)置了邊框，或邊框值沒(méi)有明確地指定為，則瀏覽器中的鏈接圖像通常顯示一個(gè)藍(lán)色邊框。如圖所示。如果不希望顯示該藍(lán)色邊框，可以在圖像的屬性面板中，將“邊框”顯式地設(shè)置為0。5.2.3

鏈接到命名錨點(diǎn)

通常情況下，當(dāng)使用絕對(duì)地址或相對(duì)地址鏈接到一個(gè)Web頁(yè)面時(shí)，瀏覽器都會(huì)重新載入并顯示這個(gè)頁(yè)面。如果網(wǎng)頁(yè)的內(nèi)容比較多，瀏覽者就必須通過(guò)滾動(dòng)方式來(lái)查看當(dāng)前屏幕以下的信息。使用命名錨點(diǎn)則可以立即響應(yīng)瀏覽者單擊錨點(diǎn)的事件，由于整個(gè)頁(yè)面已被載入，所以瀏覽器只需移動(dòng)到文檔中的特定位置。這種技術(shù)使得用戶能夠迅速定位需要的主題或返回菜單，而無(wú)需手工來(lái)回滾動(dòng)頁(yè)面了。命名錨點(diǎn)常用于長(zhǎng)篇文章、技術(shù)文件等內(nèi)容的網(wǎng)頁(yè)，通常放置在網(wǎng)頁(yè)中每個(gè)屏幕或每個(gè)主題之后，當(dāng)用戶單擊某一個(gè)命名錨點(diǎn)時(shí)可以轉(zhuǎn)到網(wǎng)頁(yè)的特定段落，以方便文章的閱讀。

注意：錨點(diǎn)名稱必須是惟一的，只能包含小寫的ASCII字母和數(shù)字，且不能以數(shù)字開頭。在“鏈接”文本框中輸入錨點(diǎn)名稱時(shí)，需要在錨點(diǎn)名稱前面添加一個(gè)特殊的符號(hào)“#”。如果所鏈接的錨點(diǎn)不在當(dāng)前文檔中，則在“鏈接”文本框中先添加鏈接頁(yè)面的URL，然后輸入井號(hào)和錨點(diǎn)名稱。例如，index.html#top。1.單擊“插入”面板上的“常用”標(biāo)簽，選擇命名錨記圖標(biāo)，打開“命名錨記”對(duì)話框。在“錨記名稱”文本框中鍵入錨點(diǎn)的名稱。

2.選擇要鏈接到命名錨點(diǎn)的文字，然后在屬性設(shè)置面板的“鏈接”文本框中輸入錨點(diǎn)的名稱。5.2.4

創(chuàng)建E-Mail鏈接1.在文檔窗口的設(shè)計(jì)視圖中，選中需要?jiǎng)?chuàng)建E-Mail鏈接的文本或圖像。2.在屬性面板的“鏈接”文本框中輸入發(fā)件人的地址。

在“鏈接”文本框中輸入郵件地址時(shí)，和創(chuàng)建常規(guī)超鏈接不同，在郵件地址前面必須添加“mailto:”，表示該超級(jí)鏈接是郵件鏈接。

如果沒(méi)有選中任何文本或圖像，用戶可以通過(guò)執(zhí)行“插入”/“電子郵件鏈接”菜單命令，在彈出的“電子郵件鏈接”對(duì)話框在頁(yè)面中插入E-Mail鏈接。5.2.5

虛擬鏈接和腳本鏈接虛擬鏈接也稱為空鏈接，是指沒(méi)有指定的鏈接，一般用于向頁(yè)面上的文本或?qū)ο筇砑有袨?。虛擬鏈接主要包含以下兩種格式：<ahref=#>虛擬鏈接</a><ahref=javascript:;>虛擬鏈接</a>第1種格式被單擊時(shí)將返回到頁(yè)面頂部，這種格式無(wú)法添加行為；第2種格式則不會(huì)發(fā)生任何動(dòng)作，就好像根本沒(méi)有單擊一樣。

如果為第2種虛擬鏈接添加了動(dòng)作腳本，則執(zhí)行相應(yīng)的動(dòng)作行為，此時(shí)的鏈接即為腳本鏈接。腳本鏈接可以執(zhí)行JavaScript代碼或調(diào)用JavaScript函數(shù)，用于在不離開當(dāng)前網(wǎng)頁(yè)的情況下給予訪問(wèn)者有關(guān)項(xiàng)目的補(bǔ)充信息。腳本鏈接也可用于在訪問(wèn)者點(diǎn)擊特定項(xiàng)目時(shí)執(zhí)行計(jì)算、表單驗(yàn)證和其它處理任務(wù)。例如：JavaScript:alert('只有VIP會(huì)員方可進(jìn)入！')括號(hào)中的內(nèi)容必須使用單引號(hào)，或在雙引號(hào)前添加反斜杠進(jìn)行轉(zhuǎn)義例如，JavaScript:alert(\"只有VIP會(huì)員方可進(jìn)入！\"）。5.2.6

使用URL面板管理超鏈接利用Dreamweaver提供的URL面板，可以將所有鏈接資源歸類在一起，為資源指定別名以指明用途，以便日后查找、維護(hù)資源。1.選擇“窗口”/“資源”菜單命令，打開“資源”面板。2.單擊“資源”面板左側(cè)的URLs按鈕，切換到“URLs”面板。3.單擊“收藏”單選按鈕，切換到“收藏”視圖，如圖所示。4.單擊“收藏”視圖右下角的“新建URL”按鈕，彈出“添加URL”對(duì)話框5.在“添加URL”對(duì)話框中輸入U(xiǎn)RL以及昵稱。5.3使用熱點(diǎn)制作圖像映射

簡(jiǎn)單地說(shuō)，圖像映射就是將一幅圖像用熱點(diǎn)工具分割為若干個(gè)區(qū)域，并將這些子區(qū)域設(shè)置成熱點(diǎn)區(qū)域，然后將這些不同的熱點(diǎn)區(qū)域鏈接到不同的頁(yè)面。當(dāng)用戶單擊圖像上不同熱點(diǎn)區(qū)域時(shí)，就可以跳轉(zhuǎn)到不同的頁(yè)面。在繪制熱點(diǎn)區(qū)域后，常常需要調(diào)整熱點(diǎn)區(qū)域的大小和形狀，以滿足設(shè)計(jì)需要。（1）在屬性設(shè)置面板左下角單擊調(diào)整熱點(diǎn)工具按鈕，然后單擊需要調(diào)整大小的熱點(diǎn)區(qū)域。此時(shí)被選中的熱點(diǎn)區(qū)域周圍會(huì)出現(xiàn)控制手柄。（2）把鼠標(biāo)放在這些小方塊上，然后拖拉鼠標(biāo)即可改變熱點(diǎn)區(qū)域的大小或形狀。如果是矩形或多邊形熱點(diǎn)區(qū)域，如此操作會(huì)改變區(qū)域的形狀；而對(duì)于圓形熱點(diǎn)區(qū)域，上述操作只會(huì)改變形狀的大小。第6章HTML與CSS基礎(chǔ)

本章重點(diǎn)

HTML是網(wǎng)頁(yè)的主要組成部分，網(wǎng)頁(yè)基本上都是由HTML語(yǔ)言組成的，可以說(shuō)HTML是網(wǎng)頁(yè)的骨架。因此，要制作出精彩的網(wǎng)頁(yè)，必須從網(wǎng)頁(yè)的基本語(yǔ)言學(xué)起，適當(dāng)?shù)亓私庖恍〩TML語(yǔ)言的知識(shí)，對(duì)開發(fā)網(wǎng)頁(yè)是大有裨益的。

CSS是CascadingStyleSheets（層疊樣式表單）的簡(jiǎn)稱。顧名思義，它是一種設(shè)計(jì)網(wǎng)頁(yè)樣式的工具，可以增強(qiáng)網(wǎng)頁(yè)修飾和增加網(wǎng)頁(yè)個(gè)性。利用CSS樣式，不僅可以將所有樣式信息集中到頁(yè)面的一個(gè)地方，而且還可以為其創(chuàng)建一個(gè)樣式表文件，應(yīng)用于多個(gè)頁(yè)面。學(xué)習(xí)目的

通過(guò)本章的學(xué)習(xí)，您可以掌握：HTML語(yǔ)言概述HTML的語(yǔ)法結(jié)構(gòu)常用的HTML標(biāo)簽CSS樣式CSS樣式的應(yīng)用

6.1HTML語(yǔ)言概述

HTML是HypertextMarkupLanguage的首字母縮寫，通常稱作超文本標(biāo)簽語(yǔ)言，或超文本鏈接標(biāo)示語(yǔ)言，它是基于SGML（StandardGeneralMarkupLanguage，標(biāo)準(zhǔn)通用標(biāo)簽語(yǔ)言）的一種描述性語(yǔ)言，由W3C（WorldwideWebConsortium，全球信息網(wǎng)協(xié)會(huì)）推出，并被國(guó)際標(biāo)準(zhǔn)ISO8879所認(rèn)可，是用于建立web頁(yè)面和其他超級(jí)文本的語(yǔ)言，是WWW的描述語(yǔ)言。HTML并不是真正的程序設(shè)計(jì)語(yǔ)言，它只是標(biāo)簽語(yǔ)言。使用HTML編寫的網(wǎng)頁(yè)文件是標(biāo)準(zhǔn)的ASCII文件，擴(kuò)展名通常為.htm或.html。了解網(wǎng)頁(yè)的用戶可能聽說(shuō)過(guò)許多可以編輯網(wǎng)頁(yè)的軟件，事實(shí)上，用戶可以用任何文本編輯器建立HTML頁(yè)面，例如Windows的“記事本”程序。6.2HTML的語(yǔ)法結(jié)構(gòu)<標(biāo)簽>對(duì)象</標(biāo)簽><標(biāo)簽屬性1=參數(shù)1屬性2=參數(shù)2>對(duì)象</標(biāo)簽><標(biāo)簽>

標(biāo)準(zhǔn)的HTML由標(biāo)簽和文件的內(nèi)容構(gòu)成，并用一組“<”與“>”括起來(lái)，且與字母的大小寫無(wú)關(guān)。一般來(lái)說(shuō)，HTML的語(yǔ)法有以下3種表達(dá)方式：6.2.1<標(biāo)簽>對(duì)象</標(biāo)簽>

這種語(yǔ)法結(jié)構(gòu)顯示了使用封閉類型標(biāo)簽的形式。大多數(shù)標(biāo)簽是封閉類型的，也就是說(shuō)，它們成對(duì)出現(xiàn)。所謂成對(duì)，是指一個(gè)起始標(biāo)簽總是搭配一個(gè)結(jié)束標(biāo)簽，在起始標(biāo)簽的標(biāo)簽名前加上符號(hào)“/”便是其終止標(biāo)簽，如<head>與</head>。夾在起始標(biāo)簽和終止標(biāo)簽之間的內(nèi)容受標(biāo)簽的控制。

例如：<i>網(wǎng)頁(yè)設(shè)計(jì)DIY</i>，<i>和</i>之間的“網(wǎng)頁(yè)設(shè)計(jì)DIY”受標(biāo)簽i的控制。標(biāo)簽i的作用是將所控制的文本內(nèi)容顯示為斜體，所以在瀏覽器中看到的“網(wǎng)頁(yè)設(shè)計(jì)DIY”將是斜體字。

如果一個(gè)應(yīng)該封閉的標(biāo)簽沒(méi)有結(jié)束標(biāo)簽，則可能產(chǎn)生意想不到的錯(cuò)誤，隨瀏覽器不同，可能出錯(cuò)的結(jié)果也不同。例如，如果在上例中，沒(méi)有以標(biāo)簽</i>結(jié)束對(duì)文字格式的設(shè)置，可能后面所有的文字都會(huì)以斜體字的格式出現(xiàn)。6.2.2<標(biāo)簽屬性1=參數(shù)1屬性2=參數(shù)2>對(duì)象</標(biāo)簽>

這種語(yǔ)法結(jié)構(gòu)是上一種語(yǔ)法結(jié)構(gòu)的擴(kuò)展形式，利用屬性進(jìn)一步設(shè)置對(duì)象的外觀，而參數(shù)則是設(shè)置的結(jié)果。每個(gè)HTML標(biāo)簽都可以有多個(gè)屬性，屬性名和屬性值間是用“=”連接，構(gòu)成一個(gè)完整的屬性，例如<bodybgcolor="#FF0000">表示將網(wǎng)頁(yè)背景色設(shè)置為紅色。多個(gè)屬性之間用空格分開。例如：

<fontface="隸書"size="20"color="#FF0000">愛就在你身邊</font>

上述語(yǔ)句表示將“愛就在你身邊”的字體設(shè)置為隸書，字號(hào)設(shè)置為20，顏色設(shè)置為紅色。6.2.3<標(biāo)簽>HTML標(biāo)簽并非都成對(duì)出現(xiàn)。而這種不成對(duì)出現(xiàn)的標(biāo)簽稱為非封閉類型標(biāo)簽。在HTML語(yǔ)言中，非封閉類型的標(biāo)簽不多，常見的換行標(biāo)簽<br>。例如：在DreamweaverCS5的代碼視圖的<body>與</body>標(biāo)簽之間輸入<fontface="隸書"size="5"color="#006600">溪水急著要流向海洋<br>浪潮卻渴望重回土地 </font>，在瀏覽器中的顯示效果如圖所示。6.2.4標(biāo)簽嵌套

標(biāo)簽之間可以相互嵌套，形成更為復(fù)雜的語(yǔ)法。例如，如果希望將一行文本同時(shí)設(shè)置粗體和斜體格式，則可以采用下面的語(yǔ)句：

<b><i>十里香</i></b>

用戶在嵌套標(biāo)簽時(shí)需要注意標(biāo)簽的嵌套順序，如果標(biāo)簽的嵌套順序發(fā)生混亂，則可能會(huì)出現(xiàn)不可預(yù)料的結(jié)果。

標(biāo)簽嵌套發(fā)生錯(cuò)誤時(shí)，用戶切換到“設(shè)計(jì)”視圖，可以看到其顯示效果如圖所示。單擊標(biāo)簽為黃色的文本塊，在屬性面板中可以看到相關(guān)的錯(cuò)誤提示，提示用戶這是一個(gè)無(wú)效的標(biāo)簽，因?yàn)檫@是一個(gè)交迭的或未關(guān)閉的標(biāo)簽。6.3常用的HTML標(biāo)簽6.3.1文檔的結(jié)構(gòu)標(biāo)簽

在DreamweaverCS5中創(chuàng)建了一個(gè)HTML文檔后，切換到“代碼“視圖，用戶會(huì)發(fā)現(xiàn)，盡管新建文檔的設(shè)計(jì)視圖是空白的，但是其中已經(jīng)有了不少源代碼。在默認(rèn)狀態(tài)下，這些源代碼如下所示：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無(wú)標(biāo)題文檔</title></head><body></body></html>基本HTML頁(yè)面以DOCTYPE開始，它聲明文檔的類型，且它之前不能有任何內(nèi)容（包括換行符和空格），否則將使文檔聲明無(wú)效。1．<html>標(biāo)簽

<html>…</html>標(biāo)簽是HTML文檔的開始和結(jié)束標(biāo)簽，告訴瀏覽器這是整個(gè)HTML文件的范圍。

HTML文檔中所有的內(nèi)容都應(yīng)該在這兩個(gè)標(biāo)簽之間，一個(gè)HTML文檔非注釋代碼總是以<html>開始，以</html>結(jié)束的。2．<head>標(biāo)簽

<head>…</head>標(biāo)簽一般位于文檔的頭部，用于包含當(dāng)前文檔的有關(guān)信息，例如標(biāo)題和關(guān)鍵字等，通常將這兩個(gè)標(biāo)簽之間的內(nèi)容統(tǒng)稱作HTML的“頭部”。位于頭部的內(nèi)容一般不會(huì)在網(wǎng)頁(yè)上直接顯示，而是通過(guò)另外的方式起作用。例如，在HTML的頭部定義的標(biāo)題不會(huì)顯示在網(wǎng)頁(yè)上，但是會(huì)出現(xiàn)在網(wǎng)頁(yè)的標(biāo)題欄上。3．<title>標(biāo)簽

<title>和</title>標(biāo)簽位于HTML文檔的頭部，即位于<head>和</head>標(biāo)簽之間，用于定義顯示在瀏覽器窗口左上角的標(biāo)題欄中的內(nèi)容。4．<body>標(biāo)簽

<body>…</body>用于定義HTML文檔的正文部分，例如文字、標(biāo)題、段落和列表等，也可以用來(lái)定義主頁(yè)背景顏色。<body>…</body>定義在</head>標(biāo)簽之后，<html>…</html>標(biāo)簽之間。所有出現(xiàn)在網(wǎng)頁(yè)上的正文內(nèi)容都應(yīng)該寫在這兩個(gè)標(biāo)簽之間。6.3.2注釋標(biāo)簽HTML的客戶端注釋標(biāo)簽為<!--…-->，在這個(gè)標(biāo)簽內(nèi)的文本都不會(huì)在瀏覽器窗口中顯示出來(lái)，一般將客戶端的腳本程序段放在此標(biāo)簽中，對(duì)于不支持該腳本語(yǔ)言的瀏覽器也可隱藏程序代碼。例如：<!--<p><ahref="index.html">鏈接三</a></p>-->在DreamweaverCS5的“代碼”視圖中，注釋內(nèi)容顯示為灰色，如圖所示。6.3.3文本格式標(biāo)簽

文本格式標(biāo)簽用于控制網(wǎng)頁(yè)中文本的樣式，如大小、字體、段落樣式等。1．<font>標(biāo)簽

<font>...</font>標(biāo)簽用于設(shè)置文本字體格式，包括字體、字號(hào)、顏色、字型等，適當(dāng)?shù)貞?yīng)用可以使頁(yè)面更加美觀。2．<b>、<i>、<em>、<h#>標(biāo)簽3．<s>、<big>、<small>、<u>標(biāo)簽4．<pre>預(yù)格式化標(biāo)簽

<pre>…</pre>標(biāo)簽用于設(shè)定瀏覽器在輸出時(shí)，對(duì)標(biāo)簽內(nèi)部的內(nèi)容幾乎不做修改地輸出。例如，在Dreamweaver的代碼視圖中輸入以下代碼：<pre>再別康橋</pre>再別康橋該示例在瀏覽器中的顯示效果如右圖所示。6.3.4排版標(biāo)簽<br>、<p>、<hr>標(biāo)簽<left>、<right>、<center>標(biāo)簽<sub>和<sup>標(biāo)簽<div>...</div>用于塊級(jí)區(qū)域的格式化顯示。該標(biāo)簽可以把文檔劃分為若干部分，并分別設(shè)置不同的屬性值，使同一文字區(qū)域內(nèi)的文字顯示不同的效果。常用于設(shè)置CSS樣式。<span>…</span>用于定義內(nèi)嵌的文本容器或區(qū)域，主要用于一個(gè)段落、句子甚至單詞中。Div標(biāo)簽和span標(biāo)簽的區(qū)別在于，div是一個(gè)塊級(jí)元素，可以包含段落、標(biāo)題、表格，乃至諸如章節(jié)、摘要和備注等。而span是行內(nèi)元素，span的前后是不會(huì)換行的，它純粹是應(yīng)用樣式。6.3.5列表標(biāo)簽1．無(wú)序列表所謂無(wú)序列表，是指列表項(xiàng)之間沒(méi)先后次序之分。<ul>…</ul>用來(lái)標(biāo)簽無(wú)序列表的開始和結(jié)束。其標(biāo)簽格式為：<ul><li>...</ul>。其中每一個(gè)<li>標(biāo)簽表示一個(gè)列表項(xiàng)值。2．有序列表

<ol>…</ol>用于標(biāo)簽有序列表的開始和結(jié)束。有序列表有一個(gè)屬性“type”，其值的功能介紹如下：type=1：表示用數(shù)字給列表項(xiàng)編號(hào)，這是默認(rèn)設(shè)置。type=a：表示用小寫字母給列表項(xiàng)編號(hào)。type=A：表示用大寫字母給列表項(xiàng)編號(hào)。type=i：表示用小寫羅馬字母給列表項(xiàng)編號(hào)。type=I：表示用大寫羅馬字母給列表項(xiàng)編號(hào)。3．普通列表普通列表通過(guò)<dl><dt>...<dd>...</dl>的形式實(shí)現(xiàn)，通常用于排版。其中，<dl>…</dl>標(biāo)簽用于創(chuàng)建一個(gè)普通的列表；<dt>…</dt>用于創(chuàng)建列表中的上層項(xiàng)目；<dd>…</dd>用于創(chuàng)建列表中最下層的項(xiàng)目。<dt>…</dt>和<dd>…</dd>都必須放在<dl>…</dl>標(biāo)志對(duì)之間。

6.3.6表格標(biāo)簽1．<table>標(biāo)簽表格由<table>…</table>標(biāo)簽構(gòu)成。<table>標(biāo)簽還有很多屬性用于控制表格的顯示效果。2．<tr>、<td>和<th>標(biāo)簽

<tr>…</tr>標(biāo)簽用于標(biāo)志表格一行的開始和結(jié)束。3．<colspan>和<rowspan>標(biāo)簽

colspan：設(shè)置<th>…</th>內(nèi)的內(nèi)容應(yīng)該跨越幾列。

rowspan：設(shè)置<th>…</th>內(nèi)的內(nèi)容應(yīng)該跨越幾行。

6.3.7框架標(biāo)簽1．<frameset>標(biāo)簽

<frameset>...</frameset>標(biāo)簽用于在頁(yè)面中創(chuàng)建可以在同一瀏覽器窗口中顯示多個(gè)網(wǎng)頁(yè)的區(qū)域。<frameset>標(biāo)簽在多窗口頁(yè)面中的地位就相當(dāng)于<body>在普通單窗口頁(yè)面中的地位，在頁(yè)面中用<frameset>…</frameset>標(biāo)志頁(yè)面主體部分的起止位置。同時(shí)，<frameset>標(biāo)簽決定了如何劃分窗口，以及每個(gè)窗口的位置和大小。2．<frame>標(biāo)簽用<frameset>標(biāo)簽把窗口分割好后，各子窗口的屬性用HTML的<frame>標(biāo)簽來(lái)定義，所以<frameset>標(biāo)簽中必須包含<frame>標(biāo)簽，用以定義各子窗口的屬性。3．<noframe>標(biāo)簽

<noframe>…</noframe>標(biāo)簽用于設(shè)置當(dāng)瀏覽器不支持框架技術(shù)時(shí)顯示的文本。通常的做法是在此標(biāo)簽之間放置提示用戶瀏覽器不支持框架的信息。4．<iframe>標(biāo)簽

<iframe>...</iframe>標(biāo)簽用于在網(wǎng)頁(yè)中設(shè)置浮動(dòng)幀網(wǎng)頁(yè)。常用的主要屬性有src和name屬性。其中屬性src用于設(shè)置浮動(dòng)幀的初始頁(yè)面的URL。name屬性用于設(shè)置浮動(dòng)幀窗口的標(biāo)識(shí)名稱。6.3.8表單標(biāo)簽1．<form>標(biāo)簽

<form>…</form>標(biāo)簽用于表示一個(gè)表單的開始與結(jié)束，并且通知服務(wù)器處理表單的內(nèi)容。2．<input>標(biāo)簽

<input>標(biāo)簽用于在表單內(nèi)放置表單對(duì)象。此標(biāo)簽不需成對(duì)使用。它有一個(gè)type屬性，對(duì)于不同的type屬性值，<input>標(biāo)簽有不同的屬性。3．<select>和<option>標(biāo)簽

<select>…</select>標(biāo)簽用于在表單中插入一個(gè)列表框?qū)ο蟆Ｋ?lt;option></option>標(biāo)簽一起使用，<option>標(biāo)簽用于為列表框添加列表項(xiàng)。4．<textarea>標(biāo)簽

<textarea>…</textarea>標(biāo)簽的作用與<input>標(biāo)簽的type屬性值為text時(shí)的作用相似，不同之處在于，<textarea>顯示的是多行多列的文本區(qū)域，而<input>文本框只有一行。<textarea>和</textarea>之間的文本是文本區(qū)域的初始文本。6.3.9其它標(biāo)簽1．<img>標(biāo)簽在HTML文檔中插入圖像。2．<a>標(biāo)簽

<a>標(biāo)簽有兩個(gè)不能同時(shí)使用的屬性href和name，此外還有target屬性等。3．<meta>標(biāo)簽

<meta>標(biāo)簽是實(shí)現(xiàn)元數(shù)據(jù)的主要標(biāo)簽，它能夠提供文檔的關(guān)鍵字、作者、描述等多種信息，在HTML的頭部可以包括任意數(shù)量的<meta>標(biāo)簽。4．<link>標(biāo)簽

<link>標(biāo)簽也稱作外部樣式表，它是把CSS寫到一個(gè)擴(kuò)展名為CSS的文件中，主要用于多個(gè)頁(yè)面排版風(fēng)格的統(tǒng)一控制，避免單個(gè)頁(yè)面重復(fù)地設(shè)置CSS樣式。5．<base>標(biāo)簽

<base>標(biāo)簽是一個(gè)非封閉性的基鏈接標(biāo)簽，定義文檔的基礎(chǔ)URL地址。6．<bgsound>標(biāo)簽用于在網(wǎng)頁(yè)中添加背景音樂(lè)。其常用到兩個(gè)屬性src屬性和loop屬性。7．<style>標(biāo)簽用于在網(wǎng)頁(yè)當(dāng)前文檔中創(chuàng)建樣式，也叫嵌入樣式表，它把CSS直接寫入到HTML的head部分，這是CSS最為典型的使用方法。8．<marquee>字幕標(biāo)簽用于在頁(yè)面中設(shè)置滾動(dòng)字幕。6.4CSS樣式CSS是一組能控制文檔范圍內(nèi)文本外觀的格式化屬性集合，是一個(gè)包含了一些CSS標(biāo)簽，以.css為文件名后綴的文本文件。它是一種設(shè)計(jì)網(wǎng)頁(yè)樣式的工具，在標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)中負(fù)責(zé)網(wǎng)頁(yè)內(nèi)容(XHTML)的表現(xiàn)。與傳統(tǒng)的HTML樣式相比，CSS樣式有以下特點(diǎn)：1．將格式和結(jié)構(gòu)分離2．以前所未有的能力控制頁(yè)面布局3．制作體積更小，網(wǎng)頁(yè)下載更快4．輕松地同時(shí)更新多個(gè)網(wǎng)頁(yè)5．良好的兼容性6.4.1基本語(yǔ)法規(guī)范1．選擇器任何html元素都可以是一個(gè)CSS的選擇器，選擇器僅僅是指向特別樣式的元素。根據(jù)聲明的不同，可把選擇器分為四類：類：創(chuàng)建可作為“類”屬性應(yīng)用于文本范圍或文本塊的自定義樣式。它由用戶給定樣式表元素名稱，并且可以在整個(gè)HTML中被調(diào)用。標(biāo)簽：用于重新定義一個(gè)特定HTML標(biāo)簽的默認(rèn)格式。復(fù)合內(nèi)容：用于定義組合樣式（兩個(gè)或兩個(gè)以上CSS元素組合）以及具有特殊序列號(hào)（ID）的樣式元素。選擇器提供了四種給定的組合樣式，分別是a:active（激活的鏈接）；a:hover（當(dāng)前鏈接）；a:link（鏈接）；a:visited（訪問(wèn)過(guò)的鏈接）。通過(guò)對(duì)這4個(gè)元素的定義可以在網(wǎng)頁(yè)中非常方便地制作有個(gè)性的超鏈接。

ID：選擇器用于個(gè)別地定義每個(gè)元素的成分。這種選擇器應(yīng)該盡量少用，因?yàn)樗哂幸欢ǖ木窒?。指定ID選擇器時(shí)，其名字前面要有指示符“#”。6.4.2創(chuàng)建CSS樣式

將插入點(diǎn)放在文檔中。然后在CSS樣式面板中，單擊面板右下角區(qū)域中的新建CSS樣式按鈕。在彈出的“新建CSS規(guī)則”對(duì)話框中選擇CSS樣式表的類型。6.4.3鏈接外部CSS表

所謂外部CSS樣式表，指的是一個(gè)包含樣式和格式規(guī)范的外部文本文件。對(duì)一個(gè)外部CSS樣式表進(jìn)行編輯后，所有同該CSS樣式表鏈接的文檔都會(huì)根據(jù)所作的修改自動(dòng)進(jìn)行更新。在“CSS樣式”面板中，單擊按鈕，彈出“鏈接外部樣式表”對(duì)話框。

如果選擇“導(dǎo)入”，會(huì)將外部CSS樣式表的信息包含進(jìn)當(dāng)前文檔，而“鏈接”選項(xiàng)只讀取和傳送信息，不會(huì)載入樣式信息。雖然“導(dǎo)入”和“鏈接”都可以將外部CSS樣式表中的所有樣式調(diào)用到當(dāng)前文檔中，但“鏈接”可以提供更多的功能，適用的瀏覽器也更多。6.4.4編輯CSS樣式

DreamweaverCS5提供了多種方式對(duì)樣式表進(jìn)行管理。如果要編輯某個(gè)樣式表，請(qǐng)執(zhí)行以下操作之一：

單擊文本屬性面板左上角的按鈕，在“目標(biāo)規(guī)則”下拉列表中選擇要編輯的CSS樣式，然后單擊按鈕；執(zhí)行“窗口”/“CSS樣式”命令打開“CSS樣式”面板，在樣式列表中雙擊要修改的樣式；在“CSS樣式”面板中選中要修改的樣式，然后單擊“CSS樣式”面板底部的編輯樣式圖標(biāo)，打開“CSS規(guī)則定義”對(duì)話框；執(zhí)行“窗口”/“CSS樣式”命令打開“CSS樣式”面板，單擊面板下方的屬性值，當(dāng)屬性值區(qū)域變?yōu)榭删庉嫚顟B(tài)時(shí)，直接對(duì)選中的屬性進(jìn)行修改。6.5CSS樣式的應(yīng)用6.5.1

變化的鼠標(biāo)

打開“CSS規(guī)則定義”對(duì)話框。單擊對(duì)話框左側(cè)“分類”列表框中的“擴(kuò)展”選項(xiàng)，切換到擴(kuò)展設(shè)置面板。6.5.2

背景不跟隨內(nèi)容滾動(dòng)

第7章表格和AP元素

本章重點(diǎn)在網(wǎng)頁(yè)設(shè)計(jì)的眾多環(huán)節(jié)中，頁(yè)面布局是最為重要的環(huán)節(jié)之一。用于網(wǎng)頁(yè)布局設(shè)計(jì)的常用工具是表格，它不但能夠記載表單式的資料、規(guī)范各種數(shù)據(jù)、輸入列表式的文字，而且還用來(lái)排列文字和圖形；它還可以與AP元素相互轉(zhuǎn)換，在整個(gè)網(wǎng)頁(yè)元素空間編排上都發(fā)揮著重要的作用。合理布局表格，會(huì)使網(wǎng)頁(yè)更具有自己的個(gè)性特點(diǎn)，又便于管理和修改。AP元素是Dreamweaver中最有價(jià)值的對(duì)象之一。所謂AP元素，就是絕對(duì)定位元素，是分配有絕對(duì)位置的HTML頁(yè)面元素，它是由層疊樣式表發(fā)展而來(lái)的，由于AP元素可以放置在網(wǎng)頁(yè)中的任何位置，從而能有效地控制網(wǎng)頁(yè)中的對(duì)象。學(xué)習(xí)目的

通過(guò)本章的學(xué)習(xí)，您可以掌握：創(chuàng)建表格設(shè)置表格和單元格屬性表格常用操作創(chuàng)建AP元素AP元素常用操作

AP元素與表格相互轉(zhuǎn)換7.1創(chuàng)建表格

在“插入”/“常用”面板上單擊插入表格圖標(biāo)按鈕，或選擇“插入”/“表格”菜單命令，打開如圖所示的“表格”對(duì)話框。

提示：在“邊框粗細(xì)”文本框中輸入的是表格邊框的寬度，表格中的單元格的邊框不受該值影響。如果要在“邊框”設(shè)置為0時(shí)查看表格的邊框，請(qǐng)選擇“查看”/“可視化助理”/“表格邊框”菜單命令。7.2設(shè)置表格和單元格屬性

如果要設(shè)置單元格的屬性，則選中單元格，執(zhí)行“窗口”/“屬性”命令展開單元格屬性面板進(jìn)行修改。

用戶不能直接在屬性面板上設(shè)置表格或單元格的背景圖像。如果希望將圖像設(shè)置為表格或單元格的背景，就要用到表格屬性的CSS設(shè)置面板。

注意：使用屬性檢查器更改表格和其元素的屬性時(shí)，需要注意表格格式設(shè)置的優(yōu)先順序：?jiǎn)卧窀袷皆O(shè)置優(yōu)先于行格式設(shè)置，行格式設(shè)置又優(yōu)先于表格格式設(shè)置。例如，如果將單個(gè)單元格的背景顏色設(shè)置為藍(lán)色，然后將整個(gè)表格的背景顏色設(shè)置為黃色，則藍(lán)色單元格不會(huì)變?yōu)辄S色，因?yàn)閱卧窀袷皆O(shè)置優(yōu)先于表格格式設(shè)置。7.3表格常用操作選擇表格元素

調(diào)整表格的尺寸、行高和列寬

使用擴(kuò)展表格模式

增加、刪除行和列

復(fù)制、粘貼與清除單元格

合并、折分單元格

表格數(shù)據(jù)排序

注意：使用擴(kuò)展表格模式時(shí)，一旦選擇了表格中的某個(gè)對(duì)象或放置了插入點(diǎn)，就應(yīng)該返回到“設(shè)計(jì)”視圖的“標(biāo)準(zhǔn)”模式下進(jìn)行編輯。諸如調(diào)整大小之類的一些可視操作在“擴(kuò)展表格”模式中不會(huì)產(chǎn)生預(yù)期結(jié)果。7.3.4表格數(shù)據(jù)的導(dǎo)入與導(dǎo)出

1．導(dǎo)入表格式數(shù)據(jù)

注意：如果不指定文件所使用的分隔符，文件將不能正確導(dǎo)入，則數(shù)據(jù)也不能在表格中正確格式化。2．導(dǎo)出表格數(shù)據(jù)7.4

表格布局實(shí)例7.6創(chuàng)建AP元素DreamweaverCS5中的AP元素有如下優(yōu)點(diǎn)：1.能夠精確定位2．插入自如3．加速瀏覽4．可疊加（1）單擊“插入”面板上的“布局”標(biāo)簽，切換到“布局”面板。（2）單擊“布局”面板中的“繪制APDiv”圖標(biāo)，此時(shí)鼠標(biāo)將會(huì)變成形狀。（3）在文檔窗口中需要插入AP元素的位置，按下鼠標(biāo)左鍵拖出一個(gè)矩形AP元素。

技巧：如果需要繪制多個(gè)AP元素，在單擊“繪制APDiv”圖標(biāo)之后，按住Ctrl鍵的同時(shí)在文檔窗口中繪制一個(gè)AP元素，只要不釋放Ctrl鍵，就可以連續(xù)繪制多個(gè)AP元素。繪制嵌套AP元素，有以下三種方法：

（1）在“首選參數(shù)”對(duì)話框中啟用AP元素嵌套功能，并確?！癆P元素”面板上的“防止重疊”復(fù)選框沒(méi)有選中，然后將光標(biāo)放置在已繪制的AP元素內(nèi)部繪制一個(gè)AP元素，新繪制的AP元素將自動(dòng)嵌套在先創(chuàng)建的AP元素中。若在“首選參數(shù)”對(duì)話框中禁用了AP元素嵌套功能，可以采用接下來(lái)的第二種方式。（2）在繪制子AP元素的同時(shí)，按下鍵盤上的Alt鍵。先創(chuàng)建的AP元素成為父AP元素，在父AP元素內(nèi)創(chuàng)建的AP元素成為子AP元素。（3）執(zhí)行“窗口”/“AP元素”菜單命令，調(diào)出“AP元素”管理面板。然后在AP元素列表中選中將作為子元素的AP元素，按住Ctrl鍵將該AP元素拖動(dòng)到父AP元素上，釋放鼠標(biāo)即可。

7.7AP元素常用操作激活、選擇AP元素移動(dòng)、對(duì)齊、復(fù)制AP元素調(diào)整AP元素的尺寸設(shè)置AP元素的堆疊順序顯示、隱藏AP元素

7.8

AP元素與表格相互轉(zhuǎn)換執(zhí)行“修改”/“轉(zhuǎn)換”/“將APDiv轉(zhuǎn)換為表格”命令執(zhí)行“修改”/“轉(zhuǎn)換”/“將表格轉(zhuǎn)換為APDiv”命令

注意：在模板文檔或基于模板創(chuàng)建的文檔中，不能將AP元素和表格進(jìn)行相互轉(zhuǎn)換。如果確實(shí)需要轉(zhuǎn)換，應(yīng)在將文檔存為模板之前進(jìn)行轉(zhuǎn)換。AP元素的應(yīng)用實(shí)例

第8章創(chuàng)建框架網(wǎng)頁(yè)

本章重點(diǎn)通常，一個(gè)站點(diǎn)中有很多東西是相同的，例如每一個(gè)頁(yè)面都有相同的頁(yè)面廣告條、相同的導(dǎo)航欄，這樣訪問(wèn)者才能自由地訪問(wèn)這個(gè)站點(diǎn)。如果為每個(gè)頁(yè)面都創(chuàng)建這些相同的內(nèi)容，增大工作量的同時(shí)，也浪費(fèi)了寶貴的網(wǎng)絡(luò)空間。使用框架可以輕松解決這些問(wèn)題。學(xué)習(xí)目的通過(guò)本章的學(xué)習(xí)，您可以掌握：框架概述創(chuàng)建框架和框架集選擇框架和框架集保存框架集和框架編輯框架8.1框架概述

一般情況下，框架網(wǎng)頁(yè)由邊框、滾動(dòng)條和其中顯示的框架文件組成。下面我們簡(jiǎn)要介紹一下框架網(wǎng)頁(yè)的這三個(gè)組成部分，便于讀者更好地理解本章的內(nèi)容。邊框邊框是相鄰框架間的分隔線。邊框線有兩個(gè)屬性：粗細(xì)和顏色。用戶可以根據(jù)需要調(diào)整邊框的粗細(xì)和顏色，以增加視覺(jué)效果。滾動(dòng)條當(dāng)框架中的內(nèi)容比較多，不能一屏完全顯示時(shí)，就需要用滾動(dòng)條來(lái)控制滾動(dòng)頁(yè)面，以便顯示網(wǎng)頁(yè)其他部分的內(nèi)容?？蚣芪募懊嫣岬竭^(guò)，框架是網(wǎng)頁(yè)上的一個(gè)顯示區(qū)域，每個(gè)框架都可以不受頁(yè)面上其他框架的影響顯示一個(gè)獨(dú)立的頁(yè)面。這個(gè)在框架內(nèi)打開的網(wǎng)頁(yè)文件即為框架文件。8.2創(chuàng)建框架和框架集

8.2.1使用預(yù)置框架

激活“插入”/“布局”面板，單擊圖標(biāo)中的向下箭頭彈出“框架的類型”下拉菜單，如圖所示。

預(yù)置框架的代表圖標(biāo)都是由兩種顏色組成的，其中藍(lán)色的區(qū)域表示在創(chuàng)建框架后，原文檔內(nèi)容所在的位置；空白區(qū)域則是指新創(chuàng)建的框架文檔所在的位置。如果插入框架之后，框架邊框不可見，執(zhí)行“查看”/“可視化助理”/“框架邊框”命令，即可使文檔窗口中的框架邊框可見。8.2.2自定義框架

一個(gè)網(wǎng)頁(yè)可以包含多個(gè)框架，每個(gè)新創(chuàng)建的框架都包括它自己的框架集HTML文檔和框架文檔?？蚣芪臋n可以是普通的網(wǎng)頁(yè)，也可以是另外的一個(gè)框架網(wǎng)頁(yè)，如果框架中包含的網(wǎng)頁(yè)是一個(gè)框架網(wǎng)頁(yè)，則形成了框架的嵌套。例如，上例創(chuàng)建的框架就是一個(gè)嵌套框架。簡(jiǎn)單地說(shuō)，嵌套框架就是一個(gè)框架中的框架。大多數(shù)網(wǎng)頁(yè)使用的框架都是嵌套框架。8.2.3noframe和iframe

由于早期版本的瀏覽器不支持框架，當(dāng)頁(yè)面中含有框架時(shí)，瀏覽器就不能正確顯示頁(yè)面的內(nèi)容，這時(shí)必須編輯一個(gè)無(wú)框架文檔。當(dāng)不支持框架的瀏覽器載入框架體文件時(shí)，瀏覽器只會(huì)顯示出無(wú)框架內(nèi)容。新建一個(gè)文檔，執(zhí)行“修改”/“框架集”/“編輯無(wú)框架內(nèi)容”命令。

可以在該窗口中輸入文本、插入圖像、編輯表格、制作表單等內(nèi)容。但是不能在該窗口中創(chuàng)建框架。Iframe是個(gè)比較新的標(biāo)識(shí)。其實(shí)iframe和frame功能一樣，也可以調(diào)用一個(gè)外部文件，不同的是它是個(gè)浮動(dòng)框架，可以放置在網(wǎng)頁(yè)中的任何位置；而且它引用的HTML文件不是與另外的HTML文件相互獨(dú)立顯示，而是直接嵌入在一個(gè)HTML文件中，與這個(gè)HTML文件內(nèi)容相互融合，成為一個(gè)整體。此外，利用iframe還可以多次在一個(gè)頁(yè)面內(nèi)顯示同一內(nèi)容，而不必重復(fù)寫內(nèi)容，一個(gè)形象的比喻即“畫中畫”電視。這種極大的自由度可以給網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)很大的靈活性。

（1）單擊“布局”面板上的插入iframe按鈕，文檔窗口自動(dòng)切換為“折分”視圖，并在“代碼”視圖中插入<iframe></iframe>標(biāo)記。如圖所示。（2）在“代碼”視圖中修改<Iframe></iframe>代碼。8.3選擇框架和框架集選取框架和框架集可以直接在文檔窗口中進(jìn)行，也可以在“框架”面板中進(jìn)行。1．將鼠標(biāo)指針移動(dòng)到框架的某條邊框上，當(dāng)鼠標(biāo)指針變?yōu)樗诫p向箭頭（左右邊框）或垂直雙向箭頭（上下邊框）時(shí)，單擊邊框即可選中整個(gè)框架。在文檔窗口中，被選取的框架周圍有虛線包圍。

2．將鼠標(biāo)指針移動(dòng)到第一次分割框架的邊框位置，當(dāng)鼠標(biāo)指針變?yōu)樗诫p向箭頭（左右邊框）或垂直雙向箭頭（上下邊框）時(shí)，單擊邊框即可選中整個(gè)框架組。

3．執(zhí)行“窗口”/“框架”命令可以打開“框架”面板，用鼠標(biāo)點(diǎn)擊框架的邊框即可選取框架?？蚣苊姘逄峁┛蚣芗瘍?nèi)各個(gè)框架的可視化表示形式。它能夠顯示框架集的層次結(jié)構(gòu)，而這種層次在文檔窗口中的顯示可能不夠直觀。8.4保存框架集和框架

若要在瀏覽器中預(yù)覽框架網(wǎng)頁(yè)，必須先保存框架網(wǎng)頁(yè)。由于每一個(gè)框架代表一個(gè)單獨(dú)的網(wǎng)頁(yè)，所以在保存框架結(jié)構(gòu)的文檔時(shí)，不但要保存整個(gè)文檔的框架結(jié)構(gòu)，還要保存各個(gè)框架文件。否則，框架中輸入的內(nèi)容會(huì)丟失。

選擇“文件”/“保存框架頁(yè)”菜單命令；或選擇“文件”/“框架集另存為”命令，則只保存框架集文件。在最后退出文檔時(shí)，Dreamweaver會(huì)彈出對(duì)話框詢問(wèn)是否保存各個(gè)框架文件。在框架內(nèi)單擊，然后選擇“文件”/“保存框架”命令，則只保存框架文件。

執(zhí)行“文件”/“保存全部”命令，則會(huì)彈出一個(gè)保存文件窗口，同時(shí)會(huì)顯示整個(gè)框架被選中的狀態(tài)。8.5編輯框架設(shè)置框架屬性設(shè)置框架的背景在“頁(yè)面屬性”對(duì)話框中設(shè)置框架的背景。在框架中打開文檔只有在框架集內(nèi)編輯文檔時(shí)才顯示框架名稱。在文檔自身的文檔窗口中編輯該文檔時(shí)（在框