DreamweaverCS4此章節(jié)均為DreamweaverCS4的學(xué)習(xí)以便于教學(xué)及自學(xué)者使用5.1概述5.2DreamweaverCS4的工作界面5.3建立教學(xué)站點(diǎn)5.4編輯教學(xué)網(wǎng)頁5.5網(wǎng)頁的布局方法5.6表單5.7教學(xué)站點(diǎn)的發(fā)布多媒體CAI課件的特點(diǎn)是集文本、圖形圖像、聲音、動(dòng)畫及數(shù)字電影于一體，可謂聲光電并存、聲情畫并茂。正因?yàn)槿绱?，課件的體積往往很大，這與網(wǎng)絡(luò)傳輸是相互矛盾的。因?yàn)榫W(wǎng)絡(luò)傳輸速度的“瓶頸”嚴(yán)重制約了大體積的“信息文件”的傳播與發(fā)送。所以，網(wǎng)絡(luò)課件的制作原則應(yīng)該區(qū)別于其它形式的課件，以短小精悍為最高原則；其次，由于網(wǎng)絡(luò)課件的使用對象具有不可預(yù)知性，因此要求網(wǎng)絡(luò)課件在語言上必須更規(guī)范、更精確，同時(shí)必須具有更好的引導(dǎo)性和交互性。5.1概述牢固掌握了網(wǎng)絡(luò)課件的制作原則以后，接下來就是選擇網(wǎng)絡(luò)課件的制作工具了。目前可以用于制作網(wǎng)絡(luò)課件的工具很多，幾乎所有的網(wǎng)頁制作軟件都可以用于制作網(wǎng)絡(luò)課件，例如FrontPage、Dreamweaver等，本章主要介紹DreamweaverCS4的應(yīng)用技術(shù)。

制作網(wǎng)絡(luò)課件實(shí)質(zhì)上就是建立教學(xué)站點(diǎn)，DreamweaverCS4是目前最流行的一款所見即所得的網(wǎng)站開發(fā)與網(wǎng)頁制作軟件，在制作網(wǎng)絡(luò)課件方面具有獨(dú)到的優(yōu)勢。它是一款所見即所得的網(wǎng)頁編輯工具，具有功能強(qiáng)大、界面簡潔、簡單實(shí)用等特點(diǎn)，是最好的網(wǎng)頁制作軟件，也是制作網(wǎng)絡(luò)課件的首選軟件。DreamweaverCS4提供了多種工作界面，以適合不同的工作人員。第一次安裝該軟件并啟動(dòng)后，出現(xiàn)的工作界面如圖5-1所示，該工作界面稱為“設(shè)計(jì)器”界面。

對于老用戶而言，如果不適應(yīng)這種工作界面，可以通過界面切換菜單進(jìn)行切換，選擇適合自己的界面模式。本章將以“經(jīng)典”界面模式介紹DreamweaverCS4在網(wǎng)絡(luò)課件中的應(yīng)用，如圖5-2所示。5.2DreamweaverCS4的工作界面圖5-1“設(shè)計(jì)器”界面圖5-2“經(jīng)典”界面

由上圖可以看出，DreamweaverCS4的工作界面主要由菜單欄、【插入】工具欄、【文檔】工具欄、編輯窗口、狀態(tài)欄、【屬性】面板和各種面板組構(gòu)成，下面簡單介紹各主要組成

部分。5.2.1【插入】工具欄

DreamweaverCS4的【插入】工具欄中包含了8個(gè)標(biāo)簽，分別為：常用、布局、表單、數(shù)據(jù)、Spry、InContextEditing、文本、收藏夾，如圖5-3所示。

單擊【插入】工具欄中的不同標(biāo)簽可以進(jìn)行切換，每一個(gè)標(biāo)簽中包括了若干的插入對象按鈕。單擊【插入】工具欄中的對象按鈕或者將按鈕拖曳到編輯窗口內(nèi)，即可將相應(yīng)的對象添加到網(wǎng)頁文件中，并可在網(wǎng)頁中編輯添加的對象。圖5-3【插入】工具欄【【文文檔】】工具具欄【文檔檔】工工具欄欄中包包含了了代碼碼視圖圖、拆拆分視視圖、、設(shè)計(jì)計(jì)視圖圖、實(shí)實(shí)時(shí)視視圖、、實(shí)時(shí)時(shí)代碼碼、文文檔標(biāo)標(biāo)題、、文件件管理理、瀏瀏覽器器預(yù)覽覽、可可視化化選項(xiàng)項(xiàng)等按按鈕，，如圖圖5-4所所示。。圖5-4【文檔】工具欄【文檔檔】工工具欄欄中的的前三三個(gè)按按鈕用用于切切換視視圖模模式。。單擊按按鈕可可以進(jìn)進(jìn)入代代碼視視圖，，這是是一個(gè)個(gè)用于于編寫寫和編編輯HTML、JavaScript、服務(wù)務(wù)器語語言代代碼(如ASP或ColdFusion標(biāo)記語語言)以及及其他他類型型代碼碼的手手工編編碼環(huán)環(huán)境。。單擊擊按按鈕可可以進(jìn)進(jìn)入代代碼視視圖與與設(shè)計(jì)計(jì)視圖圖，在在該視視圖中中，窗窗口被被分成成上、、下兩兩部分分，頂頂部窗窗口用用于編編寫HTML代碼，底底部窗口口用于可可視化編編輯網(wǎng)頁頁。單擊擊按按鈕可可以進(jìn)入入設(shè)計(jì)視視圖，這這是一個(gè)個(gè)用于可可視化頁頁面布局局、可視視化編輯輯和快速速應(yīng)用程程序開發(fā)發(fā)的設(shè)計(jì)計(jì)環(huán)境。。在該視視圖中，，Dreamweaver中顯示的的文檔處處于可視視化編輯輯狀態(tài)，，頁面效效果類似似于在瀏瀏覽器中中查看頁頁面時(shí)看看到的內(nèi)內(nèi)容。狀狀態(tài)欄欄在DreamweaverCS4狀態(tài)欄欄中可以以顯示當(dāng)當(dāng)前光標(biāo)標(biāo)所在位位置的HTML標(biāo)記，，通過此此標(biāo)記可可以確定定所編輯輯的網(wǎng)頁頁內(nèi)容。。狀態(tài)欄欄上還可可以顯示示當(dāng)前網(wǎng)網(wǎng)頁的編編輯窗口口大小、、當(dāng)前網(wǎng)網(wǎng)頁文件件的大小小與網(wǎng)頁頁的傳輸輸速度，，如圖5-5所所示。另另外，DreamweaverCS4的的狀態(tài)欄欄上新增增了視圖圖控制工工具，其其中選取取工具用用于選擇擇頁面中中的操作作對象；；手形工工具用用于平平移視圖圖；縮放放工具用用于于放大或或縮小視視圖顯示示；而設(shè)設(shè)置縮放放比率選選項(xiàng)框可可以通通過確切切的數(shù)值值控制視視圖的縮縮放。圖5-5狀態(tài)欄【【屬性性】面板板【屬性】】面板用用于顯示示或修改改當(dāng)前所所選對象象的屬性性。在頁頁面中選選擇不同同的對象象時(shí)，【【屬性】】面板中中將顯示示出不同同對象的的屬性。。例如選選擇了文文字，在在【屬性性】面板板中顯示示的是文文字的屬屬性；如如果選擇擇了圖像像，則【【屬性】】面板中中將顯示示圖像的的屬性。。另外，，還可以以直接在在【屬性性】面板板中修改改所選對對象的屬屬性，修修改后的的效果可可以在編編輯窗口口中反映映出來。。如圖5-6所所示為選選擇表格格時(shí)的【【屬性】】面板。。在在【【屬性】】面板的的右下角角單擊三三角形的的切換按按鈕，可可以將【【屬性】】面板切切換為常常用屬性性或全部部屬性模模式，如如圖5-7所示示。圖5-6【屬性】面板圖5-7切換后的【屬性】面板面面板組組面板組是是指組合合在一起起的面板板集合，，它為我我們編輯輯網(wǎng)頁提提供了既既直觀又又快速的的操作方方法，是是設(shè)計(jì)制制作網(wǎng)頁頁時(shí)不可可缺少的的工具。。單單擊【【窗口】】菜單下下的相應(yīng)應(yīng)命令，，可以打打開或關(guān)關(guān)閉面板板。當(dāng)我我們打開開一個(gè)面面板時(shí)，，與其成成組的面面板會(huì)同同時(shí)出現(xiàn)現(xiàn)，如圖圖5-8所示。。圖5-8打開的面板組單擊面板板組中的的標(biāo)簽，，可以在在不同的的面板之之間切換換。另外外，將光光標(biāo)指向向面板標(biāo)標(biāo)簽，按按住鼠標(biāo)標(biāo)左鍵向向外拖動(dòng)動(dòng)，可以以把該面面板從面面板組中中分離出出來；分分離出來來的面板板組還可可以再放放回去，，只需拖拖動(dòng)面板板標(biāo)簽到到面板組組中即可可。規(guī)規(guī)劃站站點(diǎn)規(guī)劃站點(diǎn)點(diǎn)是建立立站點(diǎn)的的前期準(zhǔn)準(zhǔn)備工作作，主要要包括規(guī)規(guī)劃站點(diǎn)點(diǎn)主題、、規(guī)劃站站點(diǎn)結(jié)構(gòu)構(gòu)、設(shè)計(jì)計(jì)網(wǎng)頁版版面、收收集站點(diǎn)點(diǎn)素材等等。例如如，要建建立一個(gè)個(gè)教學(xué)網(wǎng)網(wǎng)站，該該網(wǎng)站主主要介紹紹語文、、歷史、、地理等等學(xué)科的的教學(xué)內(nèi)內(nèi)容。我我們首先先要考慮慮站點(diǎn)的的服務(wù)對對象，確確定主題題內(nèi)容，，同樣是是介紹語語文、歷歷史、地地理等學(xué)學(xué)科的站站點(diǎn)，我我們是側(cè)側(cè)重課外外輔導(dǎo)，，還是側(cè)側(cè)重考試試指南？？這就是是主題問問題，只只有確定定了主題題，才能能有的放放矢地進(jìn)進(jìn)行工作作。5.3建建立立教學(xué)站站點(diǎn)確定了站站點(diǎn)主題題以后，，需要進(jìn)進(jìn)行站點(diǎn)點(diǎn)結(jié)構(gòu)的的規(guī)劃，，同一個(gè)個(gè)網(wǎng)站要要介紹三三個(gè)學(xué)科科的內(nèi)容容，如何何組織才才能脈絡(luò)絡(luò)清晰，，這是動(dòng)動(dòng)手制作作站點(diǎn)之之前必須須做好的的一項(xiàng)工工作。當(dāng)當(dāng)確定了了站點(diǎn)主主題、組組織結(jié)構(gòu)構(gòu)以后，，接下來來的工作作就是設(shè)設(shè)計(jì)網(wǎng)頁頁版面，，網(wǎng)頁作作為一種種視覺語語言，應(yīng)應(yīng)十分注注重其版版式的設(shè)設(shè)計(jì)，其其中主要要包括色色彩、構(gòu)構(gòu)圖兩大大方面的的內(nèi)容，，這完全全取決于于制作者者的綜合合水平，，包括審審美能力力、設(shè)計(jì)計(jì)能力、、文字能能力等多多方面的的素質(zhì)。。以上三項(xiàng)項(xiàng)工作完完成以后后，接下下來需要要收集與與整理站站點(diǎn)素材材，這是是一項(xiàng)費(fèi)費(fèi)時(shí)費(fèi)力力的工作作，需要要精心組組織與籌籌備。例例如，為為了使教教學(xué)站點(diǎn)點(diǎn)具有生生動(dòng)性、、吸引性性，達(dá)到到生動(dòng)簡簡潔、便便于教學(xué)學(xué)的目的的，要求求每一部部分都要要有內(nèi)容容文字、、相關(guān)圖圖像，甚甚至還要要有動(dòng)畫畫、聲音音等裝飾飾。因此此在前期期的準(zhǔn)備備工作中中，搜集集素材的的工作量量最大。。準(zhǔn)備好素素材后，，需要確確定站點(diǎn)點(diǎn)在本地地計(jì)算機(jī)機(jī)上的存存放位置置。通常常情況下下，首先先根據(jù)站站點(diǎn)結(jié)構(gòu)構(gòu)在本地地計(jì)算機(jī)機(jī)上建立立一個(gè)站站點(diǎn)文件件夾，如如在C盤盤根目錄錄下建立立一個(gè)文文件夾作作為站點(diǎn)點(diǎn)文件夾夾，命名名為“教教學(xué)站點(diǎn)點(diǎn)”，用用于存放放站點(diǎn)的的所有文文件。其其次，為為了更好好地管理理站點(diǎn)內(nèi)內(nèi)容，便便于以后后的站點(diǎn)點(diǎn)更新與與維護(hù)工工作，需需要在站站點(diǎn)文件件夾下分分別建立立用于存存放站點(diǎn)點(diǎn)文件和和素材的的子文件件夾，如如用于存存放圖像像、動(dòng)畫畫、應(yīng)用用程序、、插件等等的文件件夾，文文件夾的的命名最最好與所所存放的的內(nèi)容相相關(guān)，以以便查找找。創(chuàng)創(chuàng)建站站點(diǎn)的基基本結(jié)構(gòu)構(gòu)創(chuàng)建站點(diǎn)點(diǎn)的基本本結(jié)構(gòu)，，是指確確定站點(diǎn)點(diǎn)的整體體結(jié)構(gòu)和和網(wǎng)頁之之間的結(jié)結(jié)構(gòu)關(guān)系系。創(chuàng)建建站點(diǎn)的的基本結(jié)結(jié)構(gòu)時(shí)首首先要建建立空白白的站站點(diǎn)點(diǎn)，其次次是添加加網(wǎng)頁文文件與站站點(diǎn)文件件夾。1．創(chuàng)建建站點(diǎn)DreamweaverCS4提提供了兩兩種創(chuàng)建建站點(diǎn)的的方法：：一是在在啟動(dòng)Dreamweaver時(shí)通通過歡迎迎畫面創(chuàng)創(chuàng)建；二二是在Dreamweaver工作作環(huán)境下下，單擊擊菜單欄欄中的【【站點(diǎn)】】\【新新建站點(diǎn)點(diǎn)】命令令。這兩兩種創(chuàng)建建站點(diǎn)的的方法都都是通過過向?qū)晖瓿傻?，，非常直直觀?！祭?-1〗建立kejian站點(diǎn)點(diǎn)。1)啟動(dòng)動(dòng)DreamweaverCS4，則彈出出歡迎畫畫面，如如圖5-9所示示。圖5-9歡迎畫面2)單單擊【Dreamweaver站點(diǎn)點(diǎn)】選項(xiàng)項(xiàng)，則彈彈出【………的站站點(diǎn)定義義為】對對話框，，在該對對話框中中有兩個(gè)個(gè)標(biāo)簽，，其中【【基本】】標(biāo)簽就就是站點(diǎn)定義義向?qū)?，，第一個(gè)個(gè)對話框框如圖5-10所示，，這里有有兩個(gè)選選項(xiàng)，第第一個(gè)選選項(xiàng)要求求輸入站站點(diǎn)名稱稱，以便便在Dreamweaver中標(biāo)識(shí)該該站點(diǎn)，，這里輸輸入“kejian””。第二個(gè)個(gè)選項(xiàng)要要求輸入入站點(diǎn)的的http地址，如如果還沒沒有域名名，可以以暫時(shí)不不填。圖5-10第一個(gè)向?qū)υ捒?)單單擊按按鈕，進(jìn)進(jìn)入站點(diǎn)定義義向?qū)У牡牡诙€(gè)個(gè)對話框框，如圖圖5-11所示。該該對話框框詢問用用戶是否否要使用用服務(wù)器器技術(shù)，，選擇【否，我不不想使用用服務(wù)器器技術(shù)】選項(xiàng)，表表示該站站點(diǎn)是一一個(gè)靜態(tài)態(tài)站點(diǎn)，，沒有動(dòng)動(dòng)態(tài)頁。。圖5-11第二個(gè)向?qū)υ捒?)單擊按按鈕鈕，進(jìn)入站點(diǎn)定義向?qū)?dǎo)的第三個(gè)對對話框，如圖圖5-12所示示。該對話框框詢問用戶如何何使用文件，，這里選擇第第一個(gè)選項(xiàng)，，然后在下面面的文本框中中指定一個(gè)文文件夾，Dreamweaver將在其中存儲(chǔ)儲(chǔ)站點(diǎn)文件。。

5)單擊按按鈕，，進(jìn)入站點(diǎn)定定義向?qū)У牡诘谒膫€(gè)對話框框，如圖5-13所示。該對話話框詢問用戶戶如何連接到到遠(yuǎn)程服務(wù)器器，這里從下下拉列表中選選擇“無”。。圖5-12第三個(gè)向?qū)υ捒驁D5-13第四個(gè)向?qū)υ捒?)單擊按按鈕鈕，進(jìn)入站點(diǎn)定義向?qū)?dǎo)的第五個(gè)對對話框，其中中顯示了用戶戶的設(shè)置概要要，如圖5-14所示。7)單擊擊按按鈕，則通過過向?qū)Ы⒘肆艘粋€(gè)本地教教學(xué)站點(diǎn)。圖5-14第五個(gè)向?qū)υ捒蚪⒘吮镜卣菊军c(diǎn)以后，新新建的站點(diǎn)將將顯示在【文文件】面板中中。單擊菜單單欄中的【窗窗口】\【文文件】命令，，或者按下F8鍵，可以以打開【文件件】面板。該該面板中顯示示了本地站點(diǎn)點(diǎn)的名稱以及及本地站點(diǎn)的的文件夾等選選項(xiàng)，如圖5-15所示示?，F(xiàn)現(xiàn)在我們已經(jīng)經(jīng)創(chuàng)建了一個(gè)個(gè)教學(xué)站點(diǎn)，，不過，目前前為止這個(gè)站站點(diǎn)還是空的的，沒有實(shí)際際內(nèi)容，因此此必須向站點(diǎn)點(diǎn)中添加相關(guān)關(guān)的內(nèi)容。圖5-15【文件】面板2．添加網(wǎng)頁頁文件與站點(diǎn)點(diǎn)文件夾新建的站點(diǎn)是是空白的，其其中沒有任何何內(nèi)容。根據(jù)據(jù)站點(diǎn)的規(guī)劃劃，需要向其其中添加網(wǎng)頁頁文件或站點(diǎn)點(diǎn)文件夾。網(wǎng)網(wǎng)頁文件即上上網(wǎng)時(shí)瀏覽的的HTML文文件；站點(diǎn)文文件夾則用于于管理站點(diǎn)內(nèi)內(nèi)容，因?yàn)檎菊军c(diǎn)中會(huì)有很很多文件，為為了有效地管管理文件，可可以將它們分分門別類地存存放在文件夾夾中，如圖像像文件夾可以以專門用于存存放圖像、動(dòng)動(dòng)畫等。在站點(diǎn)中添加加網(wǎng)頁文件與與文件夾的方方法基本一致致，操作步驟驟如下：1)在在【文件】面面板中單擊鼠鼠標(biāo)右鍵，則則彈出一個(gè)快快捷菜單單。2)選擇快快捷菜單中的的【新建文件件】命令，則則新建了一個(gè)個(gè)網(wǎng)頁文件，，如圖5-16所示。圖5-16新建的網(wǎng)頁文件3)在光標(biāo)標(biāo)位置處輸入入網(wǎng)頁的名稱稱，然后按下下Enter鍵確認(rèn)，則則完成了網(wǎng)頁頁文件的添加加。4)同樣的的方法，如果果在彈出的快快捷菜單中選選擇【新建文文件夾】命令令，則可以在在站點(diǎn)中添加加一個(gè)文件夾夾?！祭?-2〗〗為kejian站點(diǎn)添加加內(nèi)容。1)在在【文件】面面板中的“kejian”文件夾上上單擊鼠標(biāo)右右鍵，則彈出出一個(gè)快捷菜菜單。2)選擇擇快捷菜單中中的【新建文文件夾】命令令，則在“kejian”文件夾下下新建了一個(gè)個(gè)文件夾。3)在在光標(biāo)位置置處輸入文件件夾的名稱，，如“Images”，，按下Enter鍵確認(rèn)認(rèn)。4)根據(jù)““kejian”站點(diǎn)的的要求，用同同樣的方法再再新建三個(gè)文文件夾，分別別命名為“Chinese”、“English”和“Geography”，，用于存放關(guān)關(guān)于語文、英英語和地理等等方面的內(nèi)容容，如圖5-17

所示示。圖5-17新建的文件夾5)在“kejian”文件夾上上單擊鼠標(biāo)右右鍵，從彈出出的快捷菜單單中選擇【新新建文件】命命令，則添加加了一個(gè)網(wǎng)頁頁文件。6)在在光標(biāo)位置處處輸入網(wǎng)頁文文件的名稱，，如“index.html”，按按下Enter鍵確認(rèn)，，如圖5-18所示。7)用用同樣的方方法，分別在在新建的文件件夾上單擊鼠鼠標(biāo)右鍵，選選擇快捷菜單單中的【新建建文件】命令令，則可以在在該文件夾中中建立新的網(wǎng)網(wǎng)頁文件。如如圖5-19所示為在每每個(gè)文件夾中中建立的網(wǎng)頁頁“Chinese.html”、、“English.html”和和“Geography.html”。圖5-18新建的網(wǎng)頁文件圖5-19新建的網(wǎng)頁文文本的編編輯文本在網(wǎng)頁中中具有舉足輕輕重的地位。。文本內(nèi)容充充實(shí)，可以吸吸引眾多的瀏瀏覽者；文本本編輯處理得得當(dāng)，可以使使瀏覽者在獲獲得信息的同同時(shí)感到賞心心悅目，這對對于提高站點(diǎn)點(diǎn)的瀏覽次數(shù)數(shù)極為重要。。向網(wǎng)頁中輸輸入文本以后后，可以進(jìn)行行文本的格式式、對齊方式式等的設(shè)置。。輸入文本的的方法如下：：5.4編編輯教學(xué)網(wǎng)頁頁●在編輯窗口中中輸入所需的的文本。如需需換行分段，，可以按下Enter鍵鍵；如需換行行但不分段，，可以按住Shift鍵鍵的同時(shí)按下下Enter鍵?！駥τ诖罅康奈奈谋?，可以使使用“復(fù)制/粘貼”的方方法將其它文文件中的文本本復(fù)制到當(dāng)前前網(wǎng)頁中。在在網(wǎng)頁頁中輸入文本本以后，可以以根據(jù)需要設(shè)設(shè)置文本屬性性。選擇要編編輯的文本，，此時(shí)的【屬屬性】面板如如圖5-20所示，在這這里可以設(shè)置置文本的各種種格式。圖5-20【屬性】面板●【格式】：選選擇其中的選選項(xiàng)，可以對對所選文本應(yīng)應(yīng)用系統(tǒng)預(yù)設(shè)設(shè)的格式。●【ID】：用于為所選選內(nèi)容分配一一個(gè)ID號(hào)。●【類】：顯示當(dāng)前應(yīng)應(yīng)用于文本的的類樣式，如如果沒有對所所選內(nèi)容應(yīng)用用過任何樣式式，則顯示““無”?！駟螕舭粹o鈕和按鈕鈕，可以將所所選文本加粗粗和傾斜?！駟螕艋虬窗粹o，可可以為光標(biāo)所所在的段落或或所選擇的段段落添加無序序或有序項(xiàng)目目列表?！駟螕艋虬窗粹o，可可以使光標(biāo)所所在的段落向向右或向左縮縮進(jìn)。●【鏈接】：用用于為所選的的文本建立超超鏈接?？梢砸栽谄浜竺娴牡奈谋究蛑休斴斎胍溄游奈臋n的路徑名名稱，也可以以單擊右側(cè)的的圖標(biāo)，，在彈出的對對話框中選擇擇鏈接的文檔檔，或者按住住圖標(biāo)指指向要鏈接的的文檔建立超超鏈接。●【標(biāo)題】：用用于設(shè)置超鏈鏈接的文本提提示?！瘛灸繕?biāo)】：用用于選擇鏈接接文檔在窗口口中的打開方方式。選擇““_---blank””選項(xiàng)，表示示將在新的瀏瀏覽器窗口中中打開鏈接的的文檔；選擇擇“_parent”選選項(xiàng)，表示將將在當(dāng)前文檔檔的父級框架架或包含該鏈鏈接的框架窗窗口中打開鏈鏈接文檔；選選擇“_self”選項(xiàng)項(xiàng)，表示將在在當(dāng)前文檔所所在的窗口中中打開鏈接的的文檔；選擇擇“_top”選項(xiàng)，表表示將在整個(gè)個(gè)瀏覽器窗口口中打開鏈接接的文檔。DreamweaverCS4將CSS屬性面板板與HTML屬性面板集集成在一起，，在【屬性】】面板中單擊擊按按鈕，可以切切換到CSS屬性面板，，如圖5-21所示。圖5-21切換到CSS屬性面板●【目標(biāo)規(guī)則】】：用于顯示示頁面中所選選文本使用的的規(guī)則，也可可以通過該選選項(xiàng)創(chuàng)建新的的CSS規(guī)則則、新的內(nèi)聯(lián)聯(lián)樣式等。●單擊按按鈕，則打打開【CSS規(guī)則定義】】對話框，用用于設(shè)置CSS的各項(xiàng)屬屬性；如果從從【目標(biāo)規(guī)則則】列表中選選擇“新CSS規(guī)則”選選項(xiàng)，并單擊擊按按鈕，則可以以新建CSS規(guī)則?！駟螕舭窗粹o，可以打打開【CSS樣式】面板板?！瘛咀煮w】：用用于選擇所需需的字體。如如果字體列表表中沒有所需需的字體，可可以選擇列表表中的【編輯輯字體列表】】選項(xiàng)，這時(shí)時(shí)將打開【編編輯字體列表表】對話框，，如圖5-22所示。在在對話框的【【可用字體】】列表框中選選擇所需的字字體后單擊按按鈕，將其其添加到【字字體列表】中中，單擊按按鈕，，則該字體將將出現(xiàn)在【屬屬性】面板的的字體列表中中。圖5-22【編輯字體列表】對話框●【大小】：用用于設(shè)置文本本的字號(hào)大小小?！駟螕粑谋绢伾珘K，在在彈出的顏色色列表中可以以選擇文本的的顏色。●單擊按鈕鈕和按鈕鈕，可以將所所選文本加粗粗和傾斜。●分別單擊按按鈕，可以使使光標(biāo)所在的的段落或所選選擇的段落實(shí)實(shí)現(xiàn)左對齊、、居中對齊、、右對齊和兩兩端對齊。在Dreamweaver的編輯窗窗口中輸入文文本之后，系系統(tǒng)將自動(dòng)生生成與其對應(yīng)應(yīng)的HTML代碼。值得得注意的是，，輸入文本時(shí)時(shí)按下空格鍵鍵并不能移動(dòng)動(dòng)文字，這是是因?yàn)樵贖TML代碼中中不能輸入多多個(gè)空格。要要解決這個(gè)問問題，可以在在【屬性】面面板的【格式式】下拉列表表中選擇“預(yù)預(yù)先格式化的的”命令，然然后再按下空空格鍵?！祭?-3〗〗制作一個(gè)純文文字網(wǎng)頁。1)在在【文件】】面板中雙擊擊“Chinese.html”網(wǎng)網(wǎng)頁文件，打打開該網(wǎng)頁進(jìn)進(jìn)行編輯。2)在【屬性】面板中單擊按按鈕，在在彈出的【頁面屬屬性】對話框框中切切換到到【外觀(HTML)】分類，，如圖圖5-23所示示。圖5-23【頁面屬性】對話框(1)3)單擊【背景圖圖像】文本框框右側(cè)側(cè)的按按鈕，，選擇擇一幅幅圖片片作為為網(wǎng)頁頁背景景，然然后切切換到到【標(biāo)題/編碼】分類，，在【標(biāo)題】文本框框中輸輸入““唐詩詩欣賞賞”作作為網(wǎng)網(wǎng)頁的的標(biāo)題題欄文文字，，如圖圖5-24所示。。4)單擊對對話框框中的的按按鈕鈕，完完成頁頁面屬屬性的的設(shè)置置，則則為網(wǎng)網(wǎng)頁設(shè)設(shè)置了了標(biāo)題題欄文文字與與背景景圖像像，如如圖5-25所示。。圖5-24【頁面屬性】對話框(2)圖5-25設(shè)置網(wǎng)頁背景圖像5)在編輯輯窗口口中輸輸入文文字““唐詩詩欣賞賞”并并將其其選中中。6)在【屬性】面板的的【格式】列表中中選擇擇“標(biāo)標(biāo)題2”選項(xiàng)，，設(shè)置置網(wǎng)頁頁的標(biāo)標(biāo)題。。然后后切換換到CSS屬性面面板，，單擊擊居中中對齊齊按鈕鈕，設(shè)設(shè)置文文字居居中對對齊，，結(jié)果果如圖圖5-26所示示。7)將將光標(biāo)標(biāo)定位位在標(biāo)標(biāo)題文文字后后面，，在【【插入入】工工具欄欄的【【常用用】標(biāo)標(biāo)簽中中單擊擊按按鈕鈕，在在頁面面中插插入一一條水水平線線，如如圖5-27所所示。。圖5-26設(shè)置網(wǎng)頁標(biāo)題格式圖5-27插入的水平線8)將將光光標(biāo)定定位在在水平平線的的后面面，按按下Enter鍵，，產(chǎn)生生一個(gè)個(gè)新段段落，，在新新的段段落中中輸入入如圖圖5-28所示示的文文本內(nèi)內(nèi)容。。9)在【屬性】面板中中切換換到CSS屬性面面板，，設(shè)置置文字字的相相關(guān)格格式，，也可可以建建立CSS規(guī)則格格式化化文本本。圖5-28輸入的文本內(nèi)容在在網(wǎng)網(wǎng)頁中中使用用圖像像在網(wǎng)頁頁中除除了文文本以以外，，應(yīng)用用最廣廣泛的的就是是圖像像了，，使用用圖像像不但但可以以美化化網(wǎng)頁頁，還還可以以作為為超鏈鏈接的的源端端點(diǎn)，，可謂謂一舉舉兩得得。在在Dreamweaver中中，既既可以以使用用動(dòng)態(tài)態(tài)圖像像，也也可以以使用用靜態(tài)態(tài)圖像像，但但無論論使用用哪種種圖像像，首首先要要考慮慮文件件的大大小，，例如如，使使用靜靜態(tài)圖圖像時(shí)時(shí)最好好使用用GIF、、JPG或或PNG格格式的的圖像像，因因?yàn)檫@這些圖圖像的的體積積相對對較小小。1．插插入圖圖像在網(wǎng)頁頁中插插入圖圖像時(shí)時(shí)有兩兩種情情況：：一種種情況況是圖圖像已已經(jīng)規(guī)規(guī)劃在在站點(diǎn)點(diǎn)中；；另一一種情情況是是圖像像位于于站點(diǎn)點(diǎn)之外外。如如果在在建站站前期期沒有有將圖圖像規(guī)規(guī)劃在在站點(diǎn)點(diǎn)之內(nèi)內(nèi)，插插入圖圖像時(shí)時(shí)將彈彈出一一個(gè)提提示框框，如如圖5-29所所示，，提示示用戶戶將圖圖像復(fù)復(fù)制到到站點(diǎn)點(diǎn)中。。插插入圖圖像的的操作作比較較簡單單，只只要單單擊菜菜單欄欄中的的【插插入】】\【【圖像像】命命令，，或者者在【【插入入】工工具欄欄的【【常用用】標(biāo)標(biāo)簽中中單擊擊按按鈕鈕即可可。圖5-29提示框〖例5-4〗在網(wǎng)頁頁中插插入圖圖像。。1)在在【【文件件】面面板中中雙擊擊要編編輯的的網(wǎng)頁頁文件件將其其打開開，將將光標(biāo)標(biāo)定位位在要要插入入圖像像的位位置處處。2)在在【插插入】】工具具欄中中選擇擇【常常用】】標(biāo)簽簽，單單擊其其中的的按按鈕，，在彈彈出的的【選擇圖圖像源源文件件】對話話框中中選擇擇要插插入的的圖像像文件件，這這里選選擇一一幅站站點(diǎn)之之外的的圖像像，如如圖5-30所所示。。圖5-30【選擇圖像源文件】對話框3)單單擊擊按按鈕，，將彈彈出一一個(gè)系系統(tǒng)提提示框框，如如圖5-31所所示。。提示示所選選的圖圖像文文件不不在站站點(diǎn)中中，發(fā)發(fā)布時(shí)時(shí)可能能會(huì)出出現(xiàn)錯(cuò)錯(cuò)誤。。詢問問用戶戶是否否將所所選文文件復(fù)復(fù)制到到站點(diǎn)點(diǎn)文件件夾中中。4)單單擊按按鈕鈕，在在彈出出的【【復(fù)制制文件件為】】對話話框中中將所所選圖圖像文文件保保存在在當(dāng)前前站點(diǎn)點(diǎn)中。。圖5-31提示框5)單單擊擊按按鈕鈕，則則彈出出【圖圖像標(biāo)標(biāo)簽輔輔助功功能屬屬性】】對話話框，，用于于輸入入圖像像的替替換文文本，，如圖圖5-32所示示。6)單單擊按按鈕鈕，則則將所所選圖圖像插插入到到網(wǎng)頁頁中，，如圖圖5-33所示示。圖5-32【圖像標(biāo)簽輔助功能屬性】對話框圖5-33插入的圖像2．設(shè)設(shè)置圖圖像屬屬性插入到到網(wǎng)頁頁中的的圖像像可以以通過過【屬屬性】】面板板設(shè)置置其屬屬性，，如改改變圖圖像的的大小小、建建立超超鏈接接、設(shè)設(shè)置對對齊方方式等等。要要設(shè)置置圖像像的屬屬性，，首先先要選選擇網(wǎng)網(wǎng)頁中中的圖圖像，，這時(shí)時(shí)【屬屬性】】面板板將顯顯示圖圖像的的屬性性，如如圖5-34所所示。。圖5-34【屬性】面板●【圖像像】：：用于于顯示示圖像像文件件的大大小。。在其其下方方的【【ID】文文本框框中可可以為為圖像像文件件命名名，該該名稱稱可以以用于于腳本本的調(diào)調(diào)用。?！瘛緦挕俊亢汀尽靖摺俊浚河糜糜陲@顯示或或修改改圖像像的寬寬度和和高度度，單單位為為像素素?！瘛驹次奈募俊浚河糜糜陲@顯示該該圖像像文件件的URL地址址?！瘛炬溄咏印浚海河糜谟跒閳D圖像建建立超超鏈接接?！瘛咎鎿Q換】：：用于于輸入入圖像像的說說明性性文字字。瀏瀏覽網(wǎng)網(wǎng)頁時(shí)時(shí)，當(dāng)當(dāng)光標(biāo)標(biāo)指向向圖像像上時(shí)時(shí)將出出現(xiàn)該該文字字?！瘛揪庉嬢嫛浚海哼@里里提供供了編編輯圖圖像的的功能能，既既可以以在源源程序序中編編輯圖圖像，，也可可以在在圖像像瀏覽覽器中中優(yōu)化化圖像像?！瘛敬怪敝边吘嗑唷浚海河糜谟谠O(shè)置置圖像像與其其周圍圍對象象在垂垂直方方向的的空白白距離離?！瘛舅狡竭吘嗑唷浚海河糜谟谠O(shè)置置圖像像與其其周圍圍對象象在水水平方方向的的空白白距離離。●【目標(biāo)標(biāo)】：：用于于設(shè)置置打開開目標(biāo)標(biāo)文檔檔的目目標(biāo)窗窗口，，該選選項(xiàng)只只有在在圖像像建立立了超超鏈接接時(shí)才才可用用。●【原始始】：：用于于顯示示圖像像被載載入之之前預(yù)預(yù)先載載入的的低品品質(zhì)圖圖像的的URL地地址，，以便便縮短短用戶戶的等等待時(shí)時(shí)間。。●【邊框框】：：在其其后面面的文文本框框中輸輸入數(shù)數(shù)值，，可以以為圖圖像添添加相相應(yīng)寬寬度的的邊框框。取取值為為0時(shí)時(shí)圖像像沒有有邊框框。另另外，，其右右側(cè)的的按鈕鈕可以以對圖圖像裁裁剪、、重新新取樣樣、調(diào)調(diào)整亮亮度/對比比度、、銳化化等。?！瘛緦R齊】：：用于于設(shè)置置圖像像與其其周圍圍對象象之間間的對對齊方方式。。3．為為圖像像建立立超鏈鏈接在DreamweaverCS4中中，用用戶可可以為為圖像像建立立超鏈鏈接，，瀏覽覽網(wǎng)頁頁時(shí)單單擊圖圖像可可以打打開鏈鏈接的的目標(biāo)標(biāo)文檔檔。為為整個(gè)個(gè)圖像像建立立鏈接接的方方法比比較簡簡單，，只需需選擇擇要建建立超超鏈接接的圖圖像，，在【【屬性性】面面板的的【鏈鏈接】】文本本框中中輸入入要鏈鏈接的的目標(biāo)標(biāo)文檔檔的URL地址址，或或者利利用和和圖圖標(biāo)標(biāo)選擇擇要鏈鏈接的的目標(biāo)標(biāo)文檔檔即可可?！祭?-5〗為圖像像建立立鏈接接。1)在在【文文件】】面板板中雙雙擊““index.html”網(wǎng)網(wǎng)頁文文件將將其打打開，，然后后插入入三幅幅圖像像，作作為導(dǎo)導(dǎo)航按按鈕，，如圖圖5-35所示示。圖5-35插入的圖像2)選選擇擇“語語文天天地””圖像像，在在【屬屬性】】面板板中單單擊【【鏈接接】右右側(cè)的的按按鈕鈕，在在彈出出的【【選擇擇文件件】對對話框框中選選擇本本站點(diǎn)點(diǎn)內(nèi)的的“Chinese.html””文件件，如如圖5-36所所示。。3)單單擊擊按按鈕鈕，則則為““語文文天地地”圖圖像建建立了了鏈接接。4)選選擇““英語語之家家”圖圖像，，在【【屬性性】面面板中中按住住【鏈鏈接】】右側(cè)側(cè)的按按鈕，，將其其拖動(dòng)動(dòng)到【【文件件】面面板中中的““English.html”文文件上上，則則為圖圖像建建立了了鏈接接，如如圖5-37所所示。。圖5-36【選擇文件】對話框圖5-37為圖像建立鏈接除此之外，，在Dreamweaver中也可以以為圖像的的某一部分分建立超鏈鏈接，瀏覽覽網(wǎng)頁時(shí)單單擊該部分分圖像可以以打開鏈接接的目標(biāo)文文檔。如果果要為圖像像的某一部部分建立超超鏈接，需需要先在圖圖像上建立立熱點(diǎn)，然然后再為熱熱點(diǎn)建立超超鏈接。具具體操作步步驟如下：：1)選擇擇網(wǎng)頁中要要建立熱點(diǎn)點(diǎn)超鏈接的的圖像。2)在【屬屬性】面板板中選擇建建立熱點(diǎn)的的工具，在在圖像上建建立熱點(diǎn)，，如圖5-38所示示。圖5-38建立的熱區(qū)■選擇工具后后在圖圖像上拖曳曳鼠標(biāo)，可可以建立矩矩形熱點(diǎn)。。按住Shift鍵鍵的同時(shí)拖拖曳鼠標(biāo)，，可以建立立正方形熱熱點(diǎn)?！鲞x擇工具后后在圖圖像上拖曳曳鼠標(biāo)，可可以建立圓圓形熱點(diǎn)。?！鲞x擇工具后后在圖圖像上移動(dòng)動(dòng)并單擊鼠鼠標(biāo)，可以以建立多邊邊形熱點(diǎn)。?！鲞x擇工具，，可以以選擇并移移動(dòng)建立的的熱點(diǎn)。3)使用用工具選選擇建立立的熱點(diǎn)，，在【屬性性】面板中中為其建立立超鏈接，，如圖5-39所示示?！鲈凇炬溄印俊课谋究蛑兄休斎胍滄溄拥哪繕?biāo)標(biāo)文檔的URL地址址?！鲈凇灸繕?biāo)】】下拉列表表中選擇打打開鏈接文文檔的目標(biāo)標(biāo)窗口。■在【替換】】文本框中中輸入熱點(diǎn)點(diǎn)的說明性性文字。4．插入鼠鼠標(biāo)經(jīng)過圖圖像所謂鼠標(biāo)經(jīng)經(jīng)過圖像，，是指瀏覽覽網(wǎng)頁時(shí)當(dāng)當(dāng)光標(biāo)指向向圖像上時(shí)時(shí)該圖像將將被其它圖圖像替代，，從而產(chǎn)生生動(dòng)態(tài)效果果。下面以以實(shí)例的形形式介紹如如何在網(wǎng)頁頁中插入鼠鼠標(biāo)經(jīng)過圖圖像。圖5-39【屬性】面板〖例5-6〗制作動(dòng)態(tài)按按鈕。1)在在【文件件】面板中中雙擊要編編輯的網(wǎng)頁頁將其打開開。2)在在網(wǎng)頁中要要插入鼠標(biāo)標(biāo)經(jīng)過圖像像的位置處處定位光標(biāo)標(biāo)。3)在在【插入】】工具欄中中選擇【常常用】標(biāo)簽簽，單擊右右側(cè)的的小箭頭，，在打開的的菜單中選選擇【鼠標(biāo)標(biāo)經(jīng)過圖像像】命令，，則彈出【【插入鼠標(biāo)標(biāo)經(jīng)過圖像像】對話框框，如圖5-40所所示。圖5-40【插入鼠標(biāo)經(jīng)過圖像】對話框4)在對對話框中選選擇原始圖圖像和鼠標(biāo)標(biāo)經(jīng)過圖像像，并可為為鼠標(biāo)經(jīng)過過圖像建立立超鏈接。?！尽緢D像名稱稱】：用于于輸入圖像像名稱。【【原原始圖像】】：用于選選擇原始顯顯示的圖像像。【【鼠標(biāo)經(jīng)經(jīng)過圖像】】：用于選選擇替代原原始圖像的的圖像?！尽咎嫣鎿Q文本】】：用于輸輸入鼠標(biāo)經(jīng)經(jīng)過圖像時(shí)時(shí)的替代文文本?！尽景聪孪聲r(shí)，前往往的URL】：用于于為鼠標(biāo)經(jīng)經(jīng)過圖像建建立超鏈接接。5)單單擊按按鈕，，即可插入入鼠標(biāo)經(jīng)過過圖像，如如圖5-41所示為為鼠標(biāo)經(jīng)過過圖像的瀏瀏覽效果。。圖5-41鼠標(biāo)經(jīng)過圖像的瀏覽效果5．創(chuàng)建導(dǎo)導(dǎo)航條在網(wǎng)頁中，，導(dǎo)航條的的作用不可可忽視，使使用它可以以在站點(diǎn)的的網(wǎng)頁之間間自由跳轉(zhuǎn)轉(zhuǎn)。正如它它的名稱一一樣，導(dǎo)航航條為瀏覽覽者提供了了導(dǎo)航作用用。制作導(dǎo)導(dǎo)航條之前前，必須先先制作每一一個(gè)導(dǎo)航按按鈕的四種種狀態(tài)，準(zhǔn)準(zhǔn)備好了四四種狀態(tài)的的圖片以后后，就可以以向網(wǎng)頁中中插入導(dǎo)航航條了。在網(wǎng)頁中創(chuàng)創(chuàng)建導(dǎo)航條條的基本操操作步驟如如下：1)在在網(wǎng)頁中中要?jiǎng)?chuàng)建導(dǎo)導(dǎo)航條的位位置處定位位光標(biāo)。2)在【插插入】工具具欄中選擇擇【常用】】標(biāo)簽，單單擊其中的的、按按鈕，在在打開的菜菜單中選擇擇【導(dǎo)航條條】命令，，則彈出【【插入導(dǎo)航航條】對話話框，如圖圖5-42所示。圖5-42【插入導(dǎo)航條】對話框3)在對對話框中進(jìn)進(jìn)行選項(xiàng)設(shè)設(shè)置。■【導(dǎo)航條元元件】：用用于顯示所所有的導(dǎo)航航元件。單單擊其上方方的按鈕或或按鈕，可可以增加或或減少列表表中的導(dǎo)航航元件。單單擊其右上上角的按鈕鈕或按鈕，，可以調(diào)整整導(dǎo)航元件件的排列順順序?！觥卷?xiàng)目名稱稱】：用于于輸入導(dǎo)航航元件的名名稱，所輸輸入的名稱稱將在上面面的【導(dǎo)航航條元件】】中顯示出出來?！觥緺顟B(tài)圖像像】：用于于輸入一般般狀態(tài)下要要顯示的圖圖像的路徑徑和文件名名?！觥臼髽?biāo)經(jīng)過過圖像】：：用于輸入入鼠標(biāo)經(jīng)過過時(shí)要顯示示的圖像的的路徑和文文件名?！觥景聪聢D像像】：用于于輸入按下下鼠標(biāo)時(shí)要要顯示的圖圖像的路徑徑和文件名名?！觥景聪聲r(shí)鼠鼠標(biāo)經(jīng)過圖圖像】：用用于輸入單單擊一般狀狀態(tài)圖像后后將光標(biāo)移移過時(shí)所顯顯示的圖像像的路徑和和文件名。?！觥咎鎿Q文本本】：用于于輸入鼠標(biāo)標(biāo)經(jīng)過圖像像時(shí)的替代代文本?！觥景聪聲r(shí)，，前往的URL】：：用于輸入入單擊圖像像時(shí)要鏈接接的目標(biāo)文文檔的URL地址。。在其后面面的下拉列列表中可以以選擇顯示示目標(biāo)文檔檔的窗口。。■【選項(xiàng)】：：用于設(shè)置置圖像的載載入方式。?！觥静迦搿浚海河糜谶x擇擇要插入的的導(dǎo)航條的的方式，可可以選擇““水平”或或“垂直””方式。4)單擊按按鈕，即可可創(chuàng)建導(dǎo)航航條，如圖圖5-43所示。圖5-43創(chuàng)建的導(dǎo)航條5.4.3插入入Flash動(dòng)畫在網(wǎng)頁中使使用Flash動(dòng)畫畫，可以使使頁面的內(nèi)內(nèi)容豐富多多彩，引人人入勝，使使網(wǎng)頁增強(qiáng)強(qiáng)活力與感感染力。插插入Flash動(dòng)畫畫的操作步步驟如下：：1)在網(wǎng)網(wǎng)頁中要插插入Flash動(dòng)畫畫的位置處處定位光標(biāo)標(biāo)。2)在【【插入】工工具欄中選選擇【常用用】標(biāo)簽，，單擊其中中的按按鈕，在在打開的菜菜單中選擇擇【SWF】命令，，則彈出【【選擇文件件】對話框框。3)在在對話框中中選擇要插插入的Flash動(dòng)動(dòng)畫。4)單單擊按按鈕鈕，將位于于站點(diǎn)文件件夾之外的的動(dòng)畫復(fù)制制到站點(diǎn)文文件夾中后后，則在網(wǎng)網(wǎng)頁中插入入了Flash動(dòng)畫畫，如圖5-44所所示。圖5-44插入Flash動(dòng)畫5)在【【屬性】面面板中設(shè)置置Flash動(dòng)畫的的屬性?！觥緦挕亢汀尽靖摺浚河糜糜谠O(shè)置Flash動(dòng)畫對象象的寬度和和高度，單單位為像素素?！觥疚募浚海河糜谠O(shè)置置Flash動(dòng)畫對對象的文件件路徑?！觥驹次募俊浚河糜谥钢付ㄔ次臋n檔(FLA文件)的的路徑。■【背景顏色色】：用于于設(shè)置Flash動(dòng)動(dòng)畫的背景景顏色。■【循環(huán)】：：選擇該復(fù)復(fù)選框，可可以在瀏覽覽器中循環(huán)環(huán)播放Flash動(dòng)動(dòng)畫?！觥咀詣?dòng)播放放】：選擇擇該復(fù)選框框，則打開開瀏覽器后后可以自動(dòng)動(dòng)播放Flash動(dòng)動(dòng)畫?！觥敬怪边吘嗑唷浚河糜谟谠O(shè)置Flash動(dòng)動(dòng)畫對象與與周圍元素素上下邊界界的距離。?！觥舅竭吘嗑唷浚河糜谟谠O(shè)置Flash動(dòng)動(dòng)畫對象與與周圍元素素左右邊界界的距離。。■【品質(zhì)】：：用于設(shè)置置Flash動(dòng)畫對對象的播放放質(zhì)量。質(zhì)質(zhì)量越高，，動(dòng)畫的下下載速度就就越慢；質(zhì)質(zhì)量越低，，動(dòng)畫的下下載速度就就越快。■【比例】：：用于設(shè)置置Flash動(dòng)畫播播放時(shí)的縮縮放比例。?！觥緦R】：設(shè)設(shè)置Flash動(dòng)畫對象象與周圍元素素的對齊方式式，其與圖像像的對齊方式式相同?！觥網(wǎng)mode(窗口模式式)】：為SWF文件設(shè)設(shè)置窗口模式式的參數(shù)，以以避免與DHTML元素素沖突，默認(rèn)認(rèn)值是不透明明。■單擊按按鈕，可以以打開默認(rèn)的的Flash動(dòng)畫編輯軟軟件更新“.fla”文文件?！鰡螕舭窗粹o，可以以在編輯的頁頁面中播放Flash動(dòng)動(dòng)畫。■單擊按按鈕，則彈彈出【參數(shù)】】對話框，在在該對話框中中可以輸入傳傳遞給影片的的附加參數(shù)。。使使用表格格在DreamweaverCS4中，表格除除了可以使大大量的信息資資料有組織地地排列起來以以便管理外，，還可以用于于網(wǎng)頁布局，，即將網(wǎng)頁中中的元素放到到表格的單元元格中進(jìn)行網(wǎng)網(wǎng)頁排版，因因此它是控制制頁面整體布布局的重要工工具。5.5網(wǎng)網(wǎng)頁的布局方方法1．插入表格格在網(wǎng)頁中插入入表格的操作作步驟如下：：

1)在網(wǎng)頁中中要插入表格格的位置處定定位光標(biāo)。2)在在【插入】】工具欄中選選擇【常用】】標(biāo)簽，單擊擊其中的按按鈕，則則彈出【表格格】對話框，，如圖5-45所示。圖5-45【表格】對話框3)在對話話框中進(jìn)行選選項(xiàng)設(shè)置?！觥拘袛?shù)】和【【列】：用于于設(shè)置插入表表格的行數(shù)和和列數(shù)?！觥颈砀駥挾取俊浚河糜谠O(shè)置置表格的寬度度，選擇“像像素”為單位位時(shí)，表格的的寬度為固定定像素的寬度度；選擇“百百分比”為單單位時(shí)，表格的寬度與與瀏覽器窗口口的寬度將保保持相同的百百分比?！觥具吙虼旨?xì)】：用于設(shè)置表表格的邊框?qū)拰挾?。■【單元格邊距距】：用于設(shè)設(shè)置表格中單單元格內(nèi)的元元素距離單元元格邊框的距距離?！觥締卧耖g距距】：用于設(shè)設(shè)置表格中單單元格之間的的間距?！觥緲?biāo)題】：用用于設(shè)置表頭頭的位置，分分別為無、左左、頂部、兩兩者?！鲚o助功能中的的【標(biāo)題】：：用于設(shè)置表表格標(biāo)題，該該標(biāo)題在表格格的外側(cè)?！觥菊浚河糜糜诿枋霰砀窀竦南嚓P(guān)信息息。4)單擊按按鈕鈕，即可在網(wǎng)網(wǎng)頁中插入表表格，如圖5-46所示示。圖5-46插入的表格在網(wǎng)頁中插入入表格后，可可以向單元格格中直接輸入入文本或插入入其它的對象象，如圖像、、動(dòng)畫等，還還可以向表格格中插入嵌套套表格。當(dāng)然然，用戶也可可以從外部導(dǎo)導(dǎo)入其它軟件件編輯的表格格，如Excel電子表表格等。2．表格的編編輯操作插入到網(wǎng)頁中中的表格、單單元格可以進(jìn)進(jìn)行各種編輯輯操作，如選選擇、拆分與與合并、復(fù)制制、刪除等。。

選擇擇表格、單元元格的操作方方法如下：■將光標(biāo)指向表表格邊框，單單擊鼠標(biāo)，可可以選擇整個(gè)個(gè)表格。另外外，單擊狀態(tài)態(tài)欄上的標(biāo)標(biāo)記，，也可以選擇擇整個(gè)表格。?！鰧⒐鈽?biāo)指向表表格的上邊框框，當(dāng)光標(biāo)變變?yōu)樾螤顣r(shí)單單擊鼠標(biāo)，可可以選擇一列列單元格。按按住鼠標(biāo)左鍵鍵左右拖曳，，可以選擇連連續(xù)的多列單單元格?！鰧⒐鈽?biāo)指向表表格的左邊框框，當(dāng)光標(biāo)變變?yōu)樾螤顣r(shí)單單擊鼠標(biāo)，可可以選擇一行行單元格。按按住鼠標(biāo)左鍵鍵上下拖曳，，可以選擇連連續(xù)的多行單單元格。另外外，單擊狀態(tài)態(tài)欄上的標(biāo)標(biāo)記，可以以選擇光標(biāo)所所在的一行單單元格?！鰧⒐鈽?biāo)定位在在一個(gè)單元格格中，按住Shift鍵鍵的同時(shí)單擊擊另外一個(gè)單單元格，可以以選擇二者之之間的連續(xù)單單元格。按住住Ctrl鍵的同時(shí)單單擊其它單元元格，可以選選擇多個(gè)不連連續(xù)的單元格格。另外，單單擊標(biāo)簽，可可以選擇光標(biāo)標(biāo)所在的單元元格。合并單元格的的操作步驟如如下：1)選擇擇表格中要合合并的多個(gè)相相鄰的單元格格。2)單擊【【屬性】面板板中的按按鈕，即可將將所選單元格格合并為一個(gè)個(gè)單元格，原原單元格中的的內(nèi)容將組合合為一組存放放在合并后的的單元格中。。如圖5-47所示為合合并前后的效效果對比。圖5-47合并前后的單元格對比拆分單元格的的操作與合并并單元格操作作正好相反，，它是將一個(gè)個(gè)單元格拆分分為幾個(gè)連續(xù)續(xù)的單元格，，其基本的操操作步驟如下下：1)將光標(biāo)標(biāo)定位在要拆拆分的單元格格中。2)單擊擊【屬性】面面板中的按按鈕，則彈彈出【拆分單單元格】對話話框，如圖5-48所示示。圖5-48【拆分單元格】對話框3)在對話話框中選擇要要將單元格拆拆分成的行或或列，并設(shè)置置相應(yīng)的行數(shù)數(shù)或列數(shù)。4)單單擊按按鈕，即即可拆分單元元格，原單元元格中的內(nèi)容容將保留在拆拆分后的左上上角單元格中中。如圖5-49所示為為拆分前后的的效果對比。。

插入入或刪除行或或列的操作步步驟如下：1)選選擇表格的的行、列或單單元格后，單單擊鼠標(biāo)右鍵鍵，則彈出如如圖5-50所示的快捷捷菜單。圖5-49拆分前后的單元格對比圖5-50快捷菜單2)選擇【【表格】子菜菜單中的相應(yīng)應(yīng)命令，可以以插入或刪除除行或列?！鲞x擇【插入行行】命令，可可以在所選單單元格的上方方插入一行單單元格。■選擇【插入列列】命令，可可以在所選單單元格的左側(cè)側(cè)插入一列單單元格?！鲞x擇【插入行行或列】命令令，則彈出【【插入行或列列】對話框，，如圖5-51所示。在在對話框中進(jìn)進(jìn)行選項(xiàng)設(shè)置置，即可插入入多行或多列列單元格。圖5-51【插入行或列】對話框■選擇【刪除行行】命令，可可以刪除所選選的一行單元元格。■選擇【刪除列列】命令，可可以刪除所選選的一列單元元格。3．設(shè)置表格格的屬性如果插入到網(wǎng)網(wǎng)頁中的表格格不能滿足網(wǎng)網(wǎng)頁設(shè)計(jì)的需需要，可以通通過設(shè)置表格格的屬性進(jìn)行行調(diào)整。選擇擇要設(shè)置屬性性的表格區(qū)域域(可以是整整個(gè)表格、一一行或一列或或一個(gè)單元格格)后，在【【屬性】面板板中設(shè)置其相相應(yīng)的屬性。。下面我們以以選擇整個(gè)表表格為例，講講解表格的屬屬性設(shè)置。選選擇了表格后后的【屬性】】面板如圖5-52所示示。圖5-52【屬性】面板■【表格】：用用于設(shè)置表格格的名稱。■【行】和【列列】：用于設(shè)設(shè)置表格的行行數(shù)和列數(shù)。?！觥緦挕浚河糜谟谠O(shè)置表格的的寬度，單位位為“百分比比”或“像素素”?！觥咎畛洹浚河糜糜谠O(shè)置單元元格中的內(nèi)容容與邊框之間間的距離?！觥鹃g距】：用用于設(shè)置單元元格之間的距距離?！觥緦R】：用用于設(shè)置表格格在網(wǎng)頁中的的對齊方式，，可以選擇““默認(rèn)”、““左對齊”、、“居中對齊齊”或“右對對齊”等方式式?！觥具吙颉浚河糜糜谠O(shè)置表格格外邊框的寬寬度?！觥绢悺浚河糜谟谠O(shè)置表格的的CSS樣式式?！鰡螕舭粹o鈕，可以取消消單元格的寬寬度設(shè)置，使使其寬度隨單單元格的內(nèi)容容自動(dòng)縮放。?！鰡螕舭粹o鈕，可以取消消單元格的高高度設(shè)置，使使其高度隨單單元格的內(nèi)容容自動(dòng)調(diào)整。?！鰡螕舭粹o鈕，可以將表表格寬度轉(zhuǎn)換換為像素。■單擊按鈕鈕，可以將表表格寬度轉(zhuǎn)換換為百分比。。使使用框架架框架主要用于于將網(wǎng)頁分割割為多個(gè)HTML頁面進(jìn)進(jìn)行顯示。例例如，一個(gè)網(wǎng)網(wǎng)頁由三個(gè)框框架組成，左左側(cè)的框架可可以顯示一個(gè)個(gè)滾動(dòng)菜單；；頂部的框架架可以顯示站站點(diǎn)的徽標(biāo)和和橫幅廣告等等；而右側(cè)的的框架則用于于顯示網(wǎng)頁的的主要內(nèi)容。。每一個(gè)框架架都是一個(gè)獨(dú)獨(dú)立的HTML頁面，它它們通過框架架集組合在一一起。所所謂框架集集(也稱為框框架組)就是是一個(gè)定義了了頁面結(jié)構(gòu)和和屬性的HTML頁面，，包括框架數(shù)數(shù)目、框架的的大小、在框框架中加載頁頁面的來源及及其他可定義義的屬性?？蚩蚣芗跒g覽覽器中不顯示示，它只是用用于存儲(chǔ)框架架的一個(gè)容器器。如圖5-53所示就就是用框架定定義的PhotoshopCS的的幫助頁面。。圖5-53PhotoshopCS的幫助頁面1．建立框架架建立框架的基基本操作步驟驟如下：1)在在【插入】工工具欄中選擇擇【布局】標(biāo)標(biāo)簽，單擊其其中的按按鈕，則彈彈出一個(gè)菜單單，如圖5-54所示。。圖5-54【框架】菜單2)在彈出出的菜單中單單擊所需的框框架格式，即即可將該框架架應(yīng)用到頁面面中，框架之之間以邊框間間隔。3)在框框架中單擊鼠鼠標(biāo)，可以插插入文本、圖圖像、表格等等內(nèi)容，如圖圖5-55所所示為使用框框架建立的網(wǎng)網(wǎng)頁。如如果使用用系統(tǒng)預(yù)設(shè)的的框架不能滿滿足網(wǎng)頁設(shè)計(jì)計(jì)的要求，用用戶還可以自自定義框架，，即重新設(shè)計(jì)計(jì)框架的結(jié)構(gòu)構(gòu)，基本的操操作步驟如下下：1)單擊菜菜單欄中的【【插入】\【【HTML】】\【框架】】命令，則彈彈出【框架】】命令子菜單單，如圖5-56所示。。圖5-55使用框架建立的網(wǎng)頁圖5-56【框架】命令子菜單2)在子菜菜單中選擇所所需的命令，，即可在框架架邊框中插入入相應(yīng)的框架架。另另外，按住Alt鍵的同同時(shí)將光標(biāo)指指向框架邊框框，當(dāng)光標(biāo)變變?yōu)殡p箭頭時(shí)時(shí)按住鼠標(biāo)左左鍵拖曳，也也可以建立框框架。2．編輯框架架在網(wǎng)頁中插入入框架之后，，還可以進(jìn)行行編輯操作，，如選擇框架架、修改框架架、刪除框架架、拆分框架架等。編編輯框架的的基本操作如如下：■單擊網(wǎng)頁中的的框架邊框，，可以選擇框框架集。■在網(wǎng)頁中按住住Alt鍵單單擊框架，可可以選擇該框框架，被選擇擇的框架在頁頁面中以虛線線邊框表示。?！鲈凇究蚣堋棵婷姘逯袉螕艨蚩蚣芸s略圖，，可以選擇相相應(yīng)的框架。。圖5-57【框架】面板■將光標(biāo)指向框框架內(nèi)邊框，，當(dāng)光標(biāo)變?yōu)闉殡p向箭頭時(shí)時(shí)，按住鼠標(biāo)標(biāo)左鍵拖曳，，可以移動(dòng)框框架邊框的位位置，從而改改變框架的形形狀。如果按按住鼠標(biāo)左鍵鍵向框架外拖拖曳，則可以以刪除該框架架。■將光標(biāo)定位在在框架中，單單擊菜單欄中中的【修改】】\【框架集集】命令，從從彈出的子菜菜單中選擇所所需的命令，，可以拆分該該框架，如圖圖5-58所所示。圖5-58【框架集】子菜單3．設(shè)置框架架集和框架的的屬性選擇了網(wǎng)頁中中的框架集或或框架后，可可以在【屬性性】面板中設(shè)設(shè)置它們的屬屬性，如圖5-59所示示為框架集的的【屬性】面面板?！觥具吙颉浚河糜糜谠O(shè)置所選選框架集邊框框是否在瀏覽覽器窗口中顯顯示。選擇““是”選項(xiàng)時(shí)時(shí)將以三維立立體效果顯示示框架集邊框框；選擇“否否”選項(xiàng)時(shí)將將不顯示框架架集邊框；選選擇“默認(rèn)””選項(xiàng)時(shí)，將將由瀏覽器決決定是否顯示示框架集邊框框。大多數(shù)瀏瀏覽器的默認(rèn)認(rèn)設(shè)置為“是是”，即顯示示框架集邊框框。圖5-59【屬性】面板(1)■【邊框?qū)挾取俊浚河糜谠O(shè)置置所選框架集集的邊框?qū)挾榷龋瑔挝粸橄裣袼?。■【邊框顏色】】：用于設(shè)置置所選框架集集的邊框顏色色?！觥拘辛羞x定范范圍】：該區(qū)區(qū)域位于【屬屬性】面板右右側(cè)，其中深深灰色部分為為當(dāng)前所選框框架。在該區(qū)區(qū)域中單擊鼠鼠標(biāo)，可以選選擇相應(yīng)的框框架。■【值】：在文文本框中輸入入數(shù)值，可以以指定所選框框架的尺寸。?！觥締挝弧浚河糜糜谠O(shè)置所選選框架的尺寸寸單位，可以以選擇“像素素”、“百分分比”或“相相對”。如如圖5-60所示為為選擇了框架架后的【屬性性】面板。圖5-60【屬性】面板(2)■【框架名稱】】：用于定義義所選框架的的名稱，該名名稱用于創(chuàng)建建超鏈接?！觥驹次募浚海河糜谳斎牖蚧蝻@示將在該該框架中顯示示的網(wǎng)頁的URL地址，，也可以利用用和圖圖標(biāo)選擇網(wǎng)網(wǎng)頁。■【滾動(dòng)】：用用于設(shè)置是否否在框架中顯顯示滾動(dòng)條。。選擇“是””選項(xiàng)時(shí)將在在框架中顯示示滾動(dòng)條；選選擇“否”選選項(xiàng)時(shí)，則不不顯示滾動(dòng)條條；選擇“自自動(dòng)”選項(xiàng)時(shí)時(shí)將根據(jù)需要要決定是否顯顯示滾動(dòng)條，，當(dāng)網(wǎng)頁內(nèi)容容超出框架范范圍時(shí)將顯示示滾動(dòng)條，不不超出范圍時(shí)時(shí)將不顯示滾滾動(dòng)條；選擇擇“默認(rèn)”選選項(xiàng)時(shí)，將使使用瀏覽器的的默認(rèn)設(shè)置，，多數(shù)瀏覽器器的默認(rèn)設(shè)置置為“自動(dòng)””?！鲞x擇【不能調(diào)調(diào)整大小】復(fù)復(fù)選框時(shí)，瀏瀏覽者在瀏覽覽頁面時(shí)不能能通過拖曳框框架邊框改變變框架大小。?！觥具吙颉浚河糜糜谠O(shè)置是否否顯示框架的的邊框。選擇擇“是”選項(xiàng)項(xiàng)時(shí)，將顯示示框架的邊框框；選擇“否否”選項(xiàng)時(shí)，，將隱藏框架架的邊框；選選擇“默認(rèn)””選項(xiàng)時(shí)，將將顯示默認(rèn)的的框架邊框。?！觥具吙蝾伾俊浚河糜谠O(shè)置置框架邊框的的顏色。該顏顏色將覆蓋框框架集的邊框框顏色?！觥具吔鐚挾取俊浚河糜谠O(shè)置置框架中的內(nèi)內(nèi)容距框架左左右邊界之間間的空白寬度度?！觥具吔绺叨取俊浚河糜谠O(shè)置置框架中的內(nèi)內(nèi)容距框架上上下邊界之間間的空白寬度度。4．保存框架架在預(yù)覽網(wǎng)頁之之前，需要先先保存框架和和框架集文件件。如果一個(gè)個(gè)網(wǎng)頁中有四四個(gè)框架，則則保存框架時(shí)時(shí)將產(chǎn)生五個(gè)個(gè)HTML文文件，其中每每個(gè)框架都會(huì)會(huì)產(chǎn)生一個(gè)HTML文文件，框架集集將單獨(dú)產(chǎn)生生另一個(gè)HTML文件。。

保存存框架的操作作步驟如下：：

1)單擊菜單單欄中的【文文件】\【保保存全部】命命令，將彈出出【另存為】】對話框，如如圖5-61所示。圖5-61【另存為】對話框2)在對話話框中選擇保保存HTML文件的位置置和文件的保保存類型。3)為為HTML文件命名。。該對話框中中默認(rèn)的名稱稱為“UntitledFrameset-5.html”，提示示用戶現(xiàn)在保保存的是框架架集文件。4)單單擊按按鈕，將將彈出另一個(gè)個(gè)【另存為】】對話框。該該對話框中默默認(rèn)的名稱為為“Untitled-5”，提示示用戶現(xiàn)在保保存的是所選選框架文件。。

5)繼續(xù)單擊擊按按鈕，在彈出出的【另存為為】對話框中中分別為框架架文件命名，，可以保存其其它的框架文文件。5．使用超鏈鏈接在DreamweaverCS4中可以使用用超鏈接控制制框架內(nèi)容的的顯示，而這這一操作的關(guān)關(guān)鍵在于正確確指定顯示網(wǎng)網(wǎng)頁的目標(biāo)窗窗口或框架。。例如，如果果將導(dǎo)航條放放在左側(cè)框架架中，要使與與其鏈接的網(wǎng)網(wǎng)頁內(nèi)容顯示示在主框架中中，就必須為為導(dǎo)航條中的的鏈接指定目目標(biāo)框架為主主框架，這樣樣，當(dāng)用戶單單擊左側(cè)框架架中的導(dǎo)航條條時(shí)，與其鏈鏈接的網(wǎng)頁內(nèi)內(nèi)容將在主框框架中顯示。。使用超鏈接的的操作步驟如如下：1)選擇擇框架中要建建立超鏈接的的文本或其它它對象。2)在在【屬性】面面板的【鏈接接】文本框中中輸入要鏈接接的網(wǎng)頁的URL地址，，也可以利用用和圖圖標(biāo)選擇網(wǎng)網(wǎng)頁文件。3)在在【屬性】】面板的【目目標(biāo)】選項(xiàng)中中選擇用于顯顯示鏈接網(wǎng)頁頁的目標(biāo)窗口口或框架。3)在【屬屬性】面板的的【目標(biāo)】選選項(xiàng)中選擇用用于顯示鏈接接網(wǎng)頁的目標(biāo)標(biāo)窗口或框架架?！鲞x擇“_----blank”選項(xiàng)，，表示在新的的瀏覽器窗口口中打開鏈接接的網(wǎng)頁?！鲞x擇“_parent””選項(xiàng)，表示示在當(dāng)前框架架的父級框架架中打開鏈接接網(wǎng)頁?！鲞x擇“_self”選項(xiàng)項(xiàng)，表示在當(dāng)當(dāng)前框架中打打開鏈接的網(wǎng)網(wǎng)頁。■選擇“_top”選項(xiàng)，，表示在當(dāng)前前網(wǎng)頁的最頂頂層框架集中中打開鏈接的的網(wǎng)頁?！鲞x擇“mainFrame”選項(xiàng)，，表示在主框框架中打開鏈鏈接的網(wǎng)頁。?！鲞x擇“l(fā)eftFrame”選項(xiàng)，，表示在左框框架中打開鏈鏈接的網(wǎng)頁。。■選擇“topFrame”選項(xiàng)，表表示在上面的的框架中打開開鏈接的網(wǎng)頁頁。使使用CSS+DIVCSS是層疊疊樣式表的簡簡稱，它是一一組格式設(shè)置置規(guī)則，用于于控制網(wǎng)頁內(nèi)內(nèi)容的外觀。。使用CSS可以非常靈靈活地控制頁頁面的外觀，，可以控制許許多文本屬性性，如字體、、大小、粗體體、下劃線、、文本陰影等等，還可以確確保在多個(gè)瀏瀏覽器中以更更加一致的方方式處理頁面面外觀。除此此之外，CSS還可以控控制網(wǎng)頁中塊塊級別元素的的格式與定位位，這將涉及及到DIV標(biāo)標(biāo)簽。DIV標(biāo)簽是用來來定義網(wǎng)頁內(nèi)內(nèi)容中的邏輯輯區(qū)域的標(biāo)簽簽，使用DIV標(biāo)簽可以以將內(nèi)容居中中、創(chuàng)建列效效果、創(chuàng)建不不同的顏色區(qū)區(qū)域等，另外外還可以絕對對定位，這時(shí)時(shí)的DIV標(biāo)標(biāo)簽視為AP元素。APDiv元元素與以前版版本中的圖層層有一定的相相似性，可以以用于絕對定定位網(wǎng)頁元素素。1．插入APDivAP元素通常常是絕對定位位的Div標(biāo)標(biāo)簽，它是分分配有絕對位位置的HTML網(wǎng)頁元素素，在DreamweaverC