1、Dreamweaver CS4此章節(jié)均為Dreamweaver CS4的學(xué)習(xí)以便于教學(xué)及自學(xué)者使用5.1概概述述5.2Dreamweaver CS4的工工作界面面5.3建建立立教學(xué)站站點(diǎn)5.4編編輯輯教學(xué)網(wǎng)網(wǎng)頁(yè)5.5網(wǎng)網(wǎng)頁(yè)頁(yè)的布局局方法5.6表表單單5.7教教學(xué)學(xué)站點(diǎn)的的發(fā)布多媒體CAI課課件的特特點(diǎn)是集集文本、圖形圖圖像、聲聲音、動(dòng)動(dòng)畫(huà)及數(shù)數(shù)字電影影于一體體，可謂謂聲光電電并存、聲情畫(huà)畫(huà)并茂。正因?yàn)闉槿绱?，課件的的體積往往往很大大，這與與網(wǎng)絡(luò)傳傳輸是相相互矛盾盾的。因因?yàn)榫W(wǎng)絡(luò)絡(luò)傳輸速速度的“瓶頸”嚴(yán)重制制約了大大體積的的“信息息文件”的傳播播與發(fā)送送。所以以，網(wǎng)絡(luò)絡(luò)課件的的制作原原則應(yīng)該該區(qū)

2、別于于其它形形式的課課件，以以短小精精悍為最最高原則則；其次次，由于于網(wǎng)絡(luò)課課件的使使用對(duì)象象具有不不可預(yù)知知性，因因此要求求網(wǎng)絡(luò)課課件在語(yǔ)語(yǔ)言上必必須更規(guī)規(guī)范、更更精確，同時(shí)必必須具有有更好的的引導(dǎo)性性和交互互性。5.1概概述述牢固掌握握了網(wǎng)絡(luò)絡(luò)課件的的制作原原則以后后，接下下來(lái)就是是選擇網(wǎng)網(wǎng)絡(luò)課件件的制作作工具了了。目前前可以用用于制作作網(wǎng)絡(luò)課課件的工工具很多多，幾乎乎所有的的網(wǎng)頁(yè)制制作軟件件都可以以用于制制作網(wǎng)絡(luò)絡(luò)課件，例如FrontPage、Dreamweaver等等，本章章主要介介紹Dreamweaver CS4的應(yīng)應(yīng)用技術(shù)術(shù)。制制作作網(wǎng)絡(luò)課課件實(shí)質(zhì)質(zhì)上就是是建立教教學(xué)站點(diǎn)點(diǎn)，Dre

3、amweaver CS4是目目前最流流行的一一款所見(jiàn)見(jiàn)即所得得的網(wǎng)站站開(kāi)發(fā)與與網(wǎng)頁(yè)制制作軟件件，在制制作網(wǎng)絡(luò)絡(luò)課件方方面具有有獨(dú)到的的優(yōu)勢(shì)。它是一一款所見(jiàn)見(jiàn)即所得得的網(wǎng)頁(yè)頁(yè)編輯工工具，具具有功能能強(qiáng)大、界面簡(jiǎn)簡(jiǎn)潔、簡(jiǎn)簡(jiǎn)單實(shí)用用等特點(diǎn)點(diǎn)，是最最好的網(wǎng)網(wǎng)頁(yè)制作作軟件，也是制制作網(wǎng)絡(luò)絡(luò)課件的的首選軟軟件。DreamweaverCS4提提供了多多種工作作界面，以適合合不同的的工作人人員。第第一次安安裝該軟軟件并啟啟動(dòng)后，出現(xiàn)的的工作界界面如圖圖5-1所示，該工作作界面稱(chēng)稱(chēng)為“設(shè)設(shè)計(jì)器”界面。對(duì)對(duì)于老老用戶(hù)而而言，如如果不適適應(yīng)這種種工作界界面，可可以通過(guò)過(guò)界面切切換菜單單進(jìn)行切切換，選選擇適合合自己的

4、的界面模模式。本本章將以以“經(jīng)典典”界面面模式介介紹Dreamweaver CS4在網(wǎng)網(wǎng)絡(luò)課件件中的應(yīng)應(yīng)用，如如圖5-2所示示。5.2Dreamweaver CS4的工工作界面面圖5-1 “設(shè)計(jì)器”界面圖5-2 “經(jīng)典”界面由上圖可可以看出出，Dreamweaver CS4的工工作界面面主要由由菜單欄欄、【插插入】工工具欄、【文檔檔】工具具欄、編編輯窗口口、狀態(tài)態(tài)欄、【屬性】面板和和各種面面板組構(gòu)構(gòu)成，下下面簡(jiǎn)單單介紹各各主要組組成部部分。5.2.1【插入入】工具具欄DreamweaverCS4的的【插入入】工具具欄中包包含了8個(gè)標(biāo)簽簽，分別別為：常常用、布布局、表表單、數(shù)數(shù)據(jù)、Spry、In

5、ContextEditing、文本本、收藏藏夾，如如圖5-3所示示。單單擊擊【插入入】工具具欄中的的不同標(biāo)標(biāo)簽可以以進(jìn)行切切換，每每一個(gè)標(biāo)標(biāo)簽中包包括了若若干的插插入對(duì)象象按鈕。單擊【插入】工具欄欄中的對(duì)對(duì)象按鈕鈕或者將將按鈕拖拖曳到編編輯窗口口內(nèi)，即即可將相相應(yīng)的對(duì)對(duì)象添加加到網(wǎng)頁(yè)頁(yè)文件中中，并可可在網(wǎng)頁(yè)頁(yè)中編輯輯添加的的對(duì)象。圖5-3 【插入】工具欄 5.2.2【文檔檔】工具具欄【文檔】工具欄欄中包含含了代碼碼視圖、拆分視視圖、設(shè)設(shè)計(jì)視圖圖、實(shí)時(shí)時(shí)視圖、實(shí)時(shí)代代碼、文文檔標(biāo)題題、文件件管理、瀏覽器器預(yù)覽、可視化化選項(xiàng)等等按鈕，如圖5-4所所示。圖5-4 【文檔】工具欄【文檔】工具欄欄中的前

6、前三個(gè)按按鈕用于于切換視視圖模式式。單擊按按鈕可可以進(jìn)入入代碼視視圖，這這是一個(gè)個(gè)用于編編寫(xiě)和編編輯HTML、JavaScript、服務(wù)器器語(yǔ)言代代碼(如如ASP或ColdFusion標(biāo)記語(yǔ)言言)以及及其他類(lèi)類(lèi)型代碼碼的手工工編碼環(huán)環(huán)境。單單擊按按鈕鈕可以進(jìn)進(jìn)入代碼碼視圖與與設(shè)計(jì)視視圖，在在該視圖圖中，窗窗口被分分成上、下兩部部分，頂頂部窗口口用于編編寫(xiě)HTML代碼，底底部窗口口用于可可視化編編輯網(wǎng)頁(yè)頁(yè)。單擊擊按按鈕可可以進(jìn)入入設(shè)計(jì)視視圖，這這是一個(gè)個(gè)用于可可視化頁(yè)頁(yè)面布局局、可視視化編輯輯和快速速應(yīng)用程程序開(kāi)發(fā)發(fā)的設(shè)計(jì)計(jì)環(huán)境。在該視視圖中，Dreamweaver中顯示的的文檔處處于可視視化編

7、輯輯狀態(tài)，頁(yè)面效效果類(lèi)似似于在瀏瀏覽器中中查看頁(yè)頁(yè)面時(shí)看看到的內(nèi)內(nèi)容。5.2.3狀狀態(tài)欄欄在DreamweaverCS4狀態(tài)欄欄中可以以顯示當(dāng)當(dāng)前光標(biāo)標(biāo)所在位位置的HTML標(biāo)記，通過(guò)此此標(biāo)記可可以確定定所編輯輯的網(wǎng)頁(yè)頁(yè)內(nèi)容。狀態(tài)欄欄上還可可以顯示示當(dāng)前網(wǎng)網(wǎng)頁(yè)的編編輯窗口口大小、當(dāng)前網(wǎng)網(wǎng)頁(yè)文件件的大小小與網(wǎng)頁(yè)頁(yè)的傳輸輸速度，如圖5-5所所示。另另外，DreamweaverCS4的的狀態(tài)欄欄上新增增了視圖圖控制工工具，其其中選取取工具用用于選擇擇頁(yè)面中中的操作作對(duì)象；手形工工具用用于平平移視圖圖；縮放放工具用用于于放大或或縮小視視圖顯示示；而設(shè)設(shè)置縮放放比率選選項(xiàng)框可可以通通過(guò)確切切的數(shù)值值控制視

8、視圖的縮縮放。圖5-5 狀態(tài)欄5.2.4【屬性性】面板板【屬性】面板用用于顯示示或修改改當(dāng)前所所選對(duì)象象的屬性性。在頁(yè)頁(yè)面中選選擇不同同的對(duì)象象時(shí)，【屬性】面板中中將顯示示出不同同對(duì)象的的屬性。例如選選擇了文文字，在在【屬性性】面板板中顯示示的是文文字的屬屬性；如如果選擇擇了圖像像，則【屬性】面板中中將顯示示圖像的的屬性。另外，還可以以直接在在【屬性性】面板板中修改改所選對(duì)對(duì)象的屬屬性，修修改后的的效果可可以在編編輯窗口口中反映映出來(lái)。如圖5-6所所示為選選擇表格格時(shí)的【屬性】面板。在在【屬性】面板的的右下角角單擊三三角形的的切換按按鈕，可可以將【屬性】面板切切換為常常用屬性性或全部部屬性模模

9、式，如如圖5-7所示示。圖5-6 【屬性】面板 圖5-7 切換后的【屬性】面板 5.2.5面面板組組面板組是是指組合合在一起起的面板板集合，它為我我們編輯輯網(wǎng)頁(yè)提提供了既既直觀(guān)又又快速的的操作方方法，是是設(shè)計(jì)制制作網(wǎng)頁(yè)頁(yè)時(shí)不可可缺少的的工具。單單擊【窗口】菜單下下的相應(yīng)應(yīng)命令，可以打打開(kāi)或關(guān)關(guān)閉面板板。當(dāng)我我們打開(kāi)開(kāi)一個(gè)面面板時(shí)，與其成成組的面面板會(huì)同同時(shí)出現(xiàn)現(xiàn)，如圖圖5-8所示。圖5-8 打開(kāi)的面板組單擊面板板組中的的標(biāo)簽，可以在在不同的的面板之之間切換換。另外外，將光光標(biāo)指向向面板標(biāo)標(biāo)簽，按按住鼠標(biāo)標(biāo)左鍵向向外拖動(dòng)動(dòng)，可以以把該面面板從面面板組中中分離出出來(lái)；分分離出來(lái)來(lái)的面板板組還可可以

10、再放放回去，只需拖拖動(dòng)面板板標(biāo)簽到到面板組組中即可可。5.3.1規(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)頁(yè)版版面、收收集站點(diǎn)點(diǎn)素材等等。例如如，要建建立一個(gè)個(gè)教學(xué)網(wǎng)網(wǎng)站，該該網(wǎng)站主主要介紹紹語(yǔ)文、歷史、地理等等學(xué)科的的教學(xué)內(nèi)內(nèi)容。我我們首先先要考慮慮站點(diǎn)的的服務(wù)對(duì)對(duì)象，確確定主題題內(nèi)容，同樣是是介紹語(yǔ)語(yǔ)文、歷歷史、地地理等學(xué)學(xué)科的站站點(diǎn)，我我們是側(cè)側(cè)重課外外輔導(dǎo)，還是側(cè)側(cè)重考試試指南？這就是是主題問(wèn)問(wèn)題，只只有確定定了主題題，才能能有的放放矢地進(jìn)進(jìn)行工作作。5.3建建立立教學(xué)站站點(diǎn)確定了站站點(diǎn)主題題以后，需要進(jìn)進(jìn)行站點(diǎn)點(diǎn)結(jié)構(gòu)

11、的的規(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)以后，接下來(lái)來(lái)的工作作就是設(shè)設(shè)計(jì)網(wǎng)頁(yè)頁(yè)版面，網(wǎng)頁(yè)作作為一種種視覺(jué)語(yǔ)語(yǔ)言，應(yīng)應(yīng)十分注注重其版版式的設(shè)設(shè)計(jì)，其其中主要要包括色色彩、構(gòu)構(gòu)圖兩大大方面的的內(nèi)容，這完全全取決于于制作者者的綜合合水平，包括審審美能力力、設(shè)計(jì)計(jì)能力、文字能能力等多多方面的的素質(zhì)。以上三項(xiàng)項(xiàng)工作完完成以后后，接下下來(lái)需要要收集與與整理站站點(diǎn)素材材，這是是一項(xiàng)費(fèi)費(fèi)時(shí)費(fèi)力力的工作作，需要要精心組組織與籌籌備。例例如，為為了使教教學(xué)站點(diǎn)點(diǎn)具有生生動(dòng)性、吸引性性，達(dá)

12、到到生動(dòng)簡(jiǎn)簡(jiǎn)潔、便便于教學(xué)學(xué)的目的的，要求求每一部部分都要要有內(nèi)容容文字、相關(guān)圖圖像，甚甚至還要要有動(dòng)畫(huà)畫(huà)、聲音音等裝飾飾。因此此在前期期的準(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盤(pán)盤(pán)根目錄錄下建立立一個(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)文件和和素材的的

13、子文件件夾，如如用于存存放圖像像、動(dòng)畫(huà)畫(huà)、應(yīng)用用程序、插件等等的文件件夾，文文件夾的的命名最最好與所所存放的的內(nèi)容相相關(guān)，以以便查找找。5.3.2創(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)頁(yè)之之間的結(jié)結(jié)構(gòu)關(guān)系系。創(chuàng)建建站點(diǎn)的的基本結(jié)結(jié)構(gòu)時(shí)首首先要建建立空白白的站站點(diǎn)點(diǎn)，其次次是添加加網(wǎng)頁(yè)文文件與站站點(diǎn)文件件夾。1創(chuàng)建建站點(diǎn)DreamweaverCS4提提供了兩兩種創(chuàng)建建站點(diǎn)的的方法：一是在在啟動(dòng)Dreamweaver時(shí)通通過(guò)歡迎迎畫(huà)面創(chuàng)創(chuàng)建；二二是在Dreamweaver工作作環(huán)境下下，單擊擊菜單欄欄中的【站點(diǎn)】【新新建站點(diǎn)點(diǎn)】命令令。這兩兩種創(chuàng)建建站

14、點(diǎn)的的方法都都是通過(guò)過(guò)向?qū)晖瓿傻模浅Ｖ敝庇^(guān)。例5-1建立kejian站點(diǎn)點(diǎn)。1) 啟動(dòng)動(dòng)DreamweaverCS4，則彈出出歡迎畫(huà)畫(huà)面，如如圖5-9所示示。圖5-9 歡迎畫(huà)面 2)單單擊【Dreamweaver站點(diǎn)點(diǎn)】選項(xiàng)項(xiàng)，則彈彈出【的站站點(diǎn)定義義為】對(duì)對(duì)話(huà)框，在該對(duì)對(duì)話(huà)框中中有兩個(gè)個(gè)標(biāo)簽，其中【基本】標(biāo)簽就就是站點(diǎn)定義義向?qū)В谝粋€(gè)個(gè)對(duì)話(huà)框框如圖5-10所示，這里有有兩個(gè)選選項(xiàng)，第第一個(gè)選選項(xiàng)要求求輸入站站點(diǎn)名稱(chēng)稱(chēng)，以便便在Dreamweaver中標(biāo)識(shí)該該站點(diǎn)，這里輸輸入“kejian”。第二個(gè)個(gè)選項(xiàng)要要求輸入入站點(diǎn)的的http地址，如如果還沒(méi)沒(méi)有域名名，可以以暫時(shí)不不填。圖5-10

15、 第一個(gè)向?qū)?duì)話(huà)框3)單單擊按按鈕，進(jìn)進(jìn)入站點(diǎn)定義義向?qū)У牡牡诙€(gè)個(gè)對(duì)話(huà)框框，如圖圖5-11所示。該該對(duì)話(huà)框框詢(xún)問(wèn)用用戶(hù)是否否要使用用服務(wù)器器技術(shù)，選擇【否，我不不想使用用服務(wù)器器技術(shù)】選項(xiàng)，表表示該站站點(diǎn)是一一個(gè)靜態(tài)態(tài)站點(diǎn)，沒(méi)有動(dòng)動(dòng)態(tài)頁(yè)。圖5-11 第二個(gè)向?qū)?duì)話(huà)框4)單單擊按按鈕，進(jìn)進(jìn)入站點(diǎn)定義義向?qū)У牡牡谌齻€(gè)個(gè)對(duì)話(huà)框框，如圖圖5-12所示。該對(duì)話(huà)話(huà)框詢(xún)問(wèn)用戶(hù)戶(hù)如何使使用文件件，這里里選擇第第一個(gè)選選項(xiàng)，然然后在下下面的文文本框中中指定一一個(gè)文件件夾，Dreamweaver將在其中中存儲(chǔ)站站點(diǎn)文件件。5) 單擊擊按按鈕鈕，進(jìn)入入站點(diǎn)定定義向?qū)?dǎo)的第四四個(gè)對(duì)話(huà)話(huà)框，如如圖5-13所示。該該對(duì)

16、話(huà)框框詢(xún)問(wèn)用用戶(hù)如何何連接到到遠(yuǎn)程服服務(wù)器，這里從從下拉列列表中選選擇“無(wú)無(wú)”。圖5-12 第三個(gè)向?qū)?duì)話(huà)框圖5-13 第四個(gè)向?qū)?duì)話(huà)框6)單單擊按按鈕，進(jìn)進(jìn)入站點(diǎn)定義義向?qū)У牡牡谖鍌€(gè)個(gè)對(duì)話(huà)框框，其中中顯示了了用戶(hù)的的設(shè)置概概要，如如圖5-14所示。7)單單擊按按鈕，則則通過(guò)向向?qū)Ы⒘⒘艘粋€(gè)個(gè)本地教教學(xué)站點(diǎn)點(diǎn)。圖5-14 第五個(gè)向?qū)?duì)話(huà)框建立了本本地站點(diǎn)點(diǎn)以后，新建的的站點(diǎn)將將顯示在在【文件件】面板板中。單單擊菜單單欄中的的【窗口口】【文件】命令，或者按按下F8鍵，可可以打開(kāi)開(kāi)【文件件】面板板。該面面板中顯顯示了本本地站點(diǎn)點(diǎn)的名稱(chēng)稱(chēng)以及本本地站點(diǎn)點(diǎn)的文件件夾等選選項(xiàng)，如如圖5-15所所示?，F(xiàn)

17、現(xiàn)在我們們已經(jīng)創(chuàng)創(chuàng)建了一一個(gè)教學(xué)學(xué)站點(diǎn)，不過(guò)，目前為為止這個(gè)個(gè)站點(diǎn)還還是空的的，沒(méi)有有實(shí)際內(nèi)內(nèi)容，因因此必須須向站點(diǎn)點(diǎn)中添加加相關(guān)的的內(nèi)容。圖5-15 【文件】面板2添加加網(wǎng)頁(yè)文文件與站站點(diǎn)文件件夾新建的站站點(diǎn)是空空白的，其中沒(méi)沒(méi)有任何何內(nèi)容。根據(jù)站站點(diǎn)的規(guī)規(guī)劃，需需要向其其中添加加網(wǎng)頁(yè)文文件或站站點(diǎn)文件件夾。網(wǎng)網(wǎng)頁(yè)文件件即上網(wǎng)網(wǎng)時(shí)瀏覽覽的HTML文文件；站站點(diǎn)文件件夾則用用于管理理站點(diǎn)內(nèi)內(nèi)容，因因?yàn)檎军c(diǎn)點(diǎn)中會(huì)有有很多文文件，為為了有效效地管理理文件，可以將將它們分分門(mén)別類(lèi)類(lèi)地存放放在文件件夾中，如圖像像文件夾夾可以專(zhuān)專(zhuān)門(mén)用于于存放圖圖像、動(dòng)動(dòng)畫(huà)等。在站點(diǎn)中中添加網(wǎng)網(wǎng)頁(yè)文件件與文件件夾的方方法

18、基本本一致，操作步步驟如下下：1) 在【文件】面板中中單擊鼠鼠標(biāo)右鍵鍵，則彈彈出一個(gè)個(gè)快捷菜菜單單。2) 選擇擇快捷菜菜單中的的【新建建文件】命令，則新建建了一個(gè)個(gè)網(wǎng)頁(yè)文文件，如如圖5-16所所示。圖5-16 新建的網(wǎng)頁(yè)文件3)在在光標(biāo)位位置處輸輸入網(wǎng)頁(yè)頁(yè)的名稱(chēng)稱(chēng)，然后后按下Enter鍵確確認(rèn)，則則完成了了網(wǎng)頁(yè)文文件的添添加。4)同同樣的方方法，如如果在彈彈出的快快捷菜單單中選擇擇【新建建文件夾夾】命令令，則可可以在站站點(diǎn)中添添加一個(gè)個(gè)文件夾夾。例5-2為kejian站點(diǎn)添添加內(nèi)容容。1) 在【文件】面板中中的“kejian”文件夾夾上單擊擊鼠標(biāo)右右鍵，則則彈出一一個(gè)快捷捷菜單。2)選選擇快快

19、捷菜單單中的【新建文文件夾】命令，則在“kejian”文件件夾下新新建了一一個(gè)文件件夾。3)在在光標(biāo)位位置處輸輸入文件件夾的名名稱(chēng)，如如“Images”，按下Enter鍵確確認(rèn)。4)根根據(jù)“kejian”站點(diǎn)的的要求，用同樣樣的方法法再新建建三個(gè)文文件夾，分別命命名為“Chinese”、“English”和“Geography”，用于于存放關(guān)關(guān)于語(yǔ)文文、英語(yǔ)語(yǔ)和地理理等方面面的內(nèi)容容，如圖圖5-17所所示。圖5-17 新建的文件夾 5)在在“kejian”文文件夾上上單擊鼠鼠標(biāo)右鍵鍵，從彈彈出的快快捷菜單單中選擇擇【新建建文件】命令，則添加加了一個(gè)個(gè)網(wǎng)頁(yè)文文件。6)在在光標(biāo)位位置處輸輸入網(wǎng)頁(yè)頁(yè)

20、文件的的名稱(chēng)，如“index.html”，按按下Enter鍵確認(rèn)認(rèn)，如圖圖5-18所示示。7) 用同同樣的方方法，分分別在新新建的文文件夾上上單擊鼠鼠標(biāo)右鍵鍵，選擇擇快捷菜菜單中的的【新建建文件】命令，則可以以在該文文件夾中中建立新新的網(wǎng)頁(yè)頁(yè)文件。如圖5-19所示為為在每個(gè)個(gè)文件夾夾中建立立的網(wǎng)頁(yè)頁(yè)“Chinese.html”、“English.html”和和“Geography.html”。圖5-18 新建的網(wǎng)頁(yè)文件 圖5-19 新建的網(wǎng)頁(yè) 5.4.1文文本的的編輯文本在網(wǎng)網(wǎng)頁(yè)中具具有舉足足輕重的的地位。文本內(nèi)內(nèi)容充實(shí)實(shí)，可以以吸引眾眾多的瀏瀏覽者；文本編編輯處理理得當(dāng)，可以使使瀏覽者者在獲

21、得得信息的的同時(shí)感感到賞心心悅目，這對(duì)于于提高站站點(diǎn)的瀏瀏覽次數(shù)數(shù)極為重重要。向向網(wǎng)頁(yè)中中輸入文文本以后后，可以以進(jìn)行文文本的格格式、對(duì)對(duì)齊方式式等的設(shè)設(shè)置。輸輸入文本本的方法法如下：5.4編編輯輯教學(xué)網(wǎng)網(wǎng)頁(yè)在編輯窗窗口中輸輸入所需需的文本本。如需需換行分分段，可可以按下下Enter鍵鍵；如需需換行但但不分段段，可以以按住Shift鍵的的同時(shí)按按下Enter鍵。對(duì)于大量量的文本本，可以以使用“復(fù)制/粘貼”的方法法將其它它文件中中的文本本復(fù)制到到當(dāng)前網(wǎng)網(wǎng)頁(yè)中。在在網(wǎng)頁(yè)頁(yè)中輸入入文本以以后，可可以根據(jù)據(jù)需要設(shè)設(shè)置文本本屬性。選擇要要編輯的的文本，此時(shí)的的【屬性性】面板板如圖5-20所示，在這里里可

22、以設(shè)設(shè)置文本本的各種種格式。圖5-20 【屬性】面板【格式】：選擇擇其中的的選項(xiàng)，可以對(duì)對(duì)所選文文本應(yīng)用用系統(tǒng)預(yù)預(yù)設(shè)的格格式?！綢D】：用于為為所選內(nèi)內(nèi)容分配配一個(gè)ID號(hào)?！绢?lèi)】：顯示當(dāng)當(dāng)前應(yīng)用用于文本本的類(lèi)樣樣式，如如果沒(méi)有有對(duì)所選選內(nèi)容應(yīng)應(yīng)用過(guò)任任何樣式式，則顯顯示“無(wú)無(wú)”。單擊按按鈕和和按按鈕，可可以將所所選文本本加粗和和傾斜。單擊或或按按鈕，可以為為光標(biāo)所所在的段段落或所所選擇的的段落添添加無(wú)序序或有序序項(xiàng)目列列表。單擊或或按按鈕，可以使使光標(biāo)所所在的段段落向右右或向左左縮進(jìn)。【鏈接】：用于于為所選選的文本本建立超超鏈接?？梢栽谠谄浜竺婷娴奈谋颈究蛑休斴斎胍滄溄游臋n檔的路徑徑名稱(chēng)，也

23、可以以單擊右右側(cè)的圖圖標(biāo)標(biāo)，在彈彈出的對(duì)對(duì)話(huà)框中中選擇鏈鏈接的文文檔，或或者按住住圖圖標(biāo)指向向要鏈接接的文檔檔建立超超鏈接。【標(biāo)題】：用于于設(shè)置超超鏈接的的文本提提示。【目標(biāo)】：用于于選擇鏈鏈接文檔檔在窗口口中的打打開(kāi)方式式。選擇擇“_blank”選選項(xiàng)，表表示將在在新的瀏瀏覽器窗窗口中打打開(kāi)鏈接接的文檔檔；選擇擇“_parent”選項(xiàng)，表示將將在當(dāng)前前文檔的的父級(jí)框框架或包包含該鏈鏈接的框框架窗口口中打開(kāi)開(kāi)鏈接文文檔；選選擇“_self”選選項(xiàng)，表表示將在在當(dāng)前文文檔所在在的窗口口中打開(kāi)開(kāi)鏈接的的文檔；選擇“_top”選選項(xiàng)，表表示將在在整個(gè)瀏瀏覽器窗窗口中打打開(kāi)鏈接接的文檔檔。Dreamw

24、eaver CS4將CSS屬屬性面板板與HTML屬屬性面板板集成在在一起，在【屬屬性】面面板中單單擊按按鈕，可可以切換換到CSS屬性性面板，如圖5-21所示。圖5-21 切換到CSS屬性面板 【目標(biāo)規(guī)規(guī)則】：用于顯顯示頁(yè)面面中所選選文本使使用的規(guī)規(guī)則，也也可以通通過(guò)該選選項(xiàng)創(chuàng)建建新的CSS規(guī)規(guī)則、新新的內(nèi)聯(lián)聯(lián)樣式等等。單擊按按鈕，則則打開(kāi)【CSS規(guī)則定定義】對(duì)對(duì)話(huà)框，用于設(shè)設(shè)置CSS的各各項(xiàng)屬性性；如果果從【目目標(biāo)規(guī)則則】列表表中選擇擇“新CSS規(guī)規(guī)則”選選項(xiàng)，并并單擊按按鈕，則可以以新建CSS規(guī)規(guī)則。單擊按按鈕，可以打打開(kāi)【CSS樣樣式】面面板?！咀煮w】：用于于選擇所所需的字字體。如如果字體

25、體列表中中沒(méi)有所所需的字字體，可可以選擇擇列表中中的【編編輯字體體列表】選項(xiàng)，這時(shí)將將打開(kāi)【編輯字字體列表表】對(duì)話(huà)話(huà)框，如如圖5-22所所示。在在對(duì)話(huà)框框的【可可用字體體】列表表框中選選擇所需需的字體體后單擊擊按鈕鈕，將其其添加到到【字體體列表】中，單單擊按按鈕，則則該字體體將出現(xiàn)現(xiàn)在【屬屬性】面面板的字字體列表表中。圖5-22 【編輯字體列表】對(duì)話(huà)框【大小】：用于于設(shè)置文文本的字字號(hào)大小小。單擊文本本顏色塊塊，在彈出出的顏色色列表中中可以選選擇文本本的顏色色。單擊按按鈕和和按按鈕，可可以將所所選文本本加粗和和傾斜。分別單擊擊按按鈕，可以使使光標(biāo)所所在的段段落或所所選擇的的段落實(shí)實(shí)現(xiàn)左對(duì)對(duì)齊、

26、居居中對(duì)齊齊、右對(duì)對(duì)齊和兩兩端對(duì)齊齊。在Dreamweaver的的編輯窗窗口中輸輸入文本本之后，系統(tǒng)將將自動(dòng)生生成與其其對(duì)應(yīng)的的HTML代碼碼。值得得注意的的是，輸輸入文本本時(shí)按下下空格鍵鍵并不能能移動(dòng)文文字，這這是因?yàn)闉樵贖TML代代碼中不不能輸入入多個(gè)空空格。要要解決這這個(gè)問(wèn)題題，可以以在【屬屬性】面面板的【格式】下拉列列表中選選擇“預(yù)預(yù)先格式式化的”命令，然后再再按下空空格鍵。例5-3制作一個(gè)個(gè)純文字字網(wǎng)頁(yè)。1)在在【文文件】面面板中雙雙擊“Chinese.html”網(wǎng)頁(yè)文文件，打打開(kāi)該網(wǎng)網(wǎng)頁(yè)進(jìn)行行編輯。2)在【屬性】面板中單單擊按按鈕，在在彈出的的【頁(yè)面屬性性】對(duì)話(huà)框中中切換到到【外觀(guān)

27、(HTML)】分類(lèi)，如如圖5-23所所示。圖5-23 【頁(yè)面屬性】對(duì)話(huà)框(1)3)單擊【背景圖像像】文本框右右側(cè)的按按鈕，選擇一一幅圖片片作為網(wǎng)網(wǎng)頁(yè)背景景，然后后切換到到【標(biāo)題/編碼】分類(lèi)，在在【標(biāo)題】文本框中中輸入“唐詩(shī)欣欣賞”作作為網(wǎng)頁(yè)頁(yè)的標(biāo)題題欄文字字，如圖圖5-24所示。4)單擊對(duì)話(huà)話(huà)框中的的按按鈕鈕，完成成頁(yè)面屬屬性的設(shè)設(shè)置，則則為網(wǎng)頁(yè)頁(yè)設(shè)置了了標(biāo)題欄欄文字與與背景圖圖像，如如圖5-25所示。圖5-24 【頁(yè)面屬性】對(duì)話(huà)框(2) 圖5-25 設(shè)置網(wǎng)頁(yè)背景圖像5)在編輯窗窗口中輸輸入文字字“唐詩(shī)詩(shī)欣賞”并將其其選中。6)在【屬性】面板的【格式】列表中選選擇“標(biāo)標(biāo)題2”選項(xiàng)，設(shè)設(shè)置網(wǎng)頁(yè)頁(yè)

28、的標(biāo)題題。然后后切換到到CSS屬性面板板，單擊擊居中對(duì)對(duì)齊按鈕鈕，設(shè)置置文字居居中對(duì)齊齊，結(jié)果如如圖5-26所所示。7)將將光標(biāo)定定位在標(biāo)標(biāo)題文字字后面，在【插插入】工工具欄的的【常用用】標(biāo)簽簽中單擊擊按按鈕，在在頁(yè)面中中插入一一條水平平線(xiàn)，如如圖5-27所所示。圖5-26 設(shè)置網(wǎng)頁(yè)標(biāo)題格式圖5-27 插入的水平線(xiàn) 8)將將光標(biāo)定定位在水水平線(xiàn)的的后面，按下Enter鍵，產(chǎn)生一一個(gè)新段段落，在在新的段段落中輸輸入如圖圖5-28所示示的文本本內(nèi)容。9)在【屬性】面板中切切換到CSS屬性面板板，設(shè)置置文字的的相關(guān)格格式，也也可以建建立CSS規(guī)則格式式化文本本。圖5-28 輸入的文本內(nèi)容5.4.2在

29、在網(wǎng)頁(yè)頁(yè)中使用用圖像在網(wǎng)頁(yè)中中除了文文本以外外，應(yīng)用用最廣泛泛的就是是圖像了了，使用用圖像不不但可以以美化網(wǎng)網(wǎng)頁(yè)，還還可以作作為超鏈鏈接的源源端點(diǎn)，可謂一一舉兩得得。在Dreamweaver中，既可以以使用動(dòng)動(dòng)態(tài)圖像像，也可可以使用用靜態(tài)圖圖像，但但無(wú)論使使用哪種種圖像，首先要要考慮文文件的大大小，例例如，使使用靜態(tài)態(tài)圖像時(shí)時(shí)最好使使用GIF、JPG或或PNG格式的的圖像，因?yàn)檫@這些圖像像的體積積相對(duì)較較小。1插入入圖像在網(wǎng)頁(yè)中中插入圖圖像時(shí)有有兩種情情況：一一種情況況是圖像像已經(jīng)規(guī)規(guī)劃在站站點(diǎn)中；另一種種情況是是圖像位位于站點(diǎn)點(diǎn)之外。如果在在建站前前期沒(méi)有有將圖像像規(guī)劃在在站點(diǎn)之之內(nèi)，插插入

30、圖像像時(shí)將彈彈出一個(gè)個(gè)提示框框，如圖圖5-29所示示，提示示用戶(hù)將將圖像復(fù)復(fù)制到站站點(diǎn)中。插插入圖圖像的操操作比較較簡(jiǎn)單，只要單單擊菜單單欄中的的【插入入】【圖像】命令，或者在在【插入入】工具具欄的【常用】標(biāo)簽中中單擊按按鈕鈕即可。圖5-29 提示框例5-4在網(wǎng)頁(yè)中中插入圖圖像。1)在在【文件件】面板板中雙擊擊要編輯輯的網(wǎng)頁(yè)頁(yè)文件將將其打開(kāi)開(kāi)，將光光標(biāo)定位位在要插插入圖像像的位置置處。2)在在【插入入】工具具欄中選選擇【常常用】標(biāo)標(biāo)簽，單單擊其中中的按按鈕鈕，在彈彈出的【選擇圖像像源文件件】對(duì)話(huà)框框中選擇擇要插入入的圖像像文件，這里選選擇一幅幅站點(diǎn)之之外的圖圖像，如如圖5-30所所示。圖5-3

31、0 【選擇圖像源文件】對(duì)話(huà)框3)單單擊按按鈕鈕，將彈彈出一個(gè)個(gè)系統(tǒng)提提示框，如圖5-31所示。提示所所選的圖圖像文件件不在站站點(diǎn)中，發(fā)布時(shí)時(shí)可能會(huì)會(huì)出現(xiàn)錯(cuò)錯(cuò)誤。詢(xún)?cè)儐?wèn)用戶(hù)戶(hù)是否將將所選文文件復(fù)制制到站點(diǎn)點(diǎn)文件夾夾中。4)單單擊按按鈕鈕，在彈彈出的【復(fù)制文文件為】對(duì)話(huà)框框中將所所選圖像像文件保保存在當(dāng)當(dāng)前站點(diǎn)點(diǎn)中。圖5-31 提示框5)單單擊按按鈕，則則彈出【圖像標(biāo)標(biāo)簽輔助助功能屬屬性】對(duì)對(duì)話(huà)框，用于輸輸入圖像像的替換換文本，如圖5-32所示。6)單單擊按按鈕，則則將所選選圖像插插入到網(wǎng)網(wǎng)頁(yè)中，如圖5-33所示。圖5-32 【圖像標(biāo)簽輔助功能屬性】對(duì)話(huà)框圖5-33 插入的圖像2設(shè)置置圖像屬屬性插

32、入到網(wǎng)網(wǎng)頁(yè)中的的圖像可可以通過(guò)過(guò)【屬性性】面板板設(shè)置其其屬性，如改變變圖像的的大小、建立超超鏈接、設(shè)置對(duì)對(duì)齊方式式等。要要設(shè)置圖圖像的屬屬性，首首先要選選擇網(wǎng)頁(yè)頁(yè)中的圖圖像，這這時(shí)【屬屬性】面面板將顯顯示圖像像的屬性性，如圖圖5-34所示示。圖5-34 【屬性】面板【圖像】：用于于顯示圖圖像文件件的大小小。在其其下方的的【ID】文本本框中可可以為圖圖像文件件命名，該名稱(chēng)稱(chēng)可以用用于腳本本的調(diào)用用?！緦挕亢秃汀靖摺浚河糜谟陲@示或或修改圖圖像的寬寬度和高高度，單單位為像像素。【源文件件】：用用于顯示示該圖像像文件的的URL地址。【鏈接】：用于于為圖像像建立超超鏈接。【替換】：用于于輸入圖圖像的說(shuō)說(shuō)

33、明性文文字。瀏瀏覽網(wǎng)頁(yè)頁(yè)時(shí)，當(dāng)當(dāng)光標(biāo)指指向圖像像上時(shí)將將出現(xiàn)該該文字?！揪庉嫛浚哼@里里提供了了編輯圖圖像的功功能，既既可以在在源程序序中編輯輯圖像，也可以以在圖像像瀏覽器器中優(yōu)化化圖像?！敬怪边呥吘唷浚河糜谠O(shè)設(shè)置圖像像與其周周?chē)鷮?duì)象象在垂直直方向的的空白距距離?！舅竭呥吘唷浚河糜谠O(shè)設(shè)置圖像像與其周周?chē)鷮?duì)象象在水平平方向的的空白距距離?！灸繕?biāo)】：用于于設(shè)置打打開(kāi)目標(biāo)標(biāo)文檔的的目標(biāo)窗窗口，該該選項(xiàng)只只有在圖圖像建立立了超鏈鏈接時(shí)才才可用?！驹肌浚河糜谟陲@示圖圖像被載載入之前前預(yù)先載載入的低低品質(zhì)圖圖像的URL地地址，以以便縮短短用戶(hù)的的等待時(shí)時(shí)間?！具吙颉浚涸谄淦浜竺娴牡奈谋究蚩蛑休斎肴霐?shù)值，

34、可以為為圖像添添加相應(yīng)應(yīng)寬度的的邊框。取值為為0時(shí)圖圖像沒(méi)有有邊框。另外，其右側(cè)側(cè)的按鈕鈕可以對(duì)對(duì)圖像裁裁剪、重重新取樣樣、調(diào)整整亮度/對(duì)比度度、銳化化等?！緦?duì)齊】：用于于設(shè)置圖圖像與其其周?chē)鷮?duì)對(duì)象之間間的對(duì)齊齊方式。3為圖圖像建立立超鏈接接在DreamweaverCS4中，用用戶(hù)可以以為圖像像建立超超鏈接，瀏覽網(wǎng)網(wǎng)頁(yè)時(shí)單單擊圖像像可以打打開(kāi)鏈接接的目標(biāo)標(biāo)文檔。為整個(gè)個(gè)圖像建建立鏈接接的方法法比較簡(jiǎn)簡(jiǎn)單，只只需選擇擇要建立立超鏈接接的圖像像，在【屬性】面板的的【鏈接接】文本本框中輸輸入要鏈鏈接的目目標(biāo)文檔檔的URL地址址，或者者利用和和圖圖標(biāo)標(biāo)選擇要要鏈接的的目標(biāo)文文檔即可可。例5-5為圖像建

35、建立鏈接接。1) 在【文件】面板中中雙擊“index.html”網(wǎng)網(wǎng)頁(yè)文件件將其打打開(kāi)，然然后插入入三幅圖圖像，作作為導(dǎo)航航按鈕，如圖5-35所示。圖5-35 插入的圖像2)選選擇“語(yǔ)語(yǔ)文天地地”圖像像，在【屬性】面板中中單擊【鏈接】右側(cè)的的按按鈕，在在彈出的的【選擇擇文件】對(duì)話(huà)框框中選擇擇本站點(diǎn)點(diǎn)內(nèi)的“Chinese.html”文件件，如圖圖5-36所示示。3) 單擊擊按按鈕鈕，則為為“語(yǔ)文文天地”圖像建建立了鏈鏈接。4)選選擇“英英語(yǔ)之家家”圖像像，在【屬性】面板中中按住【鏈接】右側(cè)的的按按鈕，將將其拖動(dòng)動(dòng)到【文文件】面面板中的的“English.html”文文件上，則為圖圖像建立立了鏈接

36、接，如圖圖5-37所示示。圖5-36 【選擇文件】對(duì)話(huà)框圖5-37 為圖像建立鏈接 除此之外外，在Dreamweaver中也也可以為為圖像的的某一部部分建立立超鏈接接，瀏覽覽網(wǎng)頁(yè)時(shí)時(shí)單擊該該部分圖圖像可以以打開(kāi)鏈鏈接的目目標(biāo)文檔檔。如果果要為圖圖像的某某一部分分建立超超鏈接，需要先先在圖像像上建立立熱點(diǎn)，然后再再為熱點(diǎn)點(diǎn)建立超超鏈接。具體操操作步驟驟如下：1)選選擇網(wǎng)網(wǎng)頁(yè)中要要建立熱熱點(diǎn)超鏈鏈接的圖圖像。2)在在【屬性性】面板板中選擇擇建立熱熱點(diǎn)的工工具，在在圖像上上建立熱熱點(diǎn)，如如圖5-38所所示。圖5-38 建立的熱區(qū)選擇工具具后后在圖像像上拖曳曳鼠標(biāo)，可以建建立矩形形熱點(diǎn)。按住Shift

37、鍵的的同時(shí)拖拖曳鼠標(biāo)標(biāo)，可以以建立正正方形熱熱點(diǎn)。選擇工具具后后在圖像像上拖曳曳鼠標(biāo)，可以建建立圓形形熱點(diǎn)。選擇工具具后后在圖像像上移動(dòng)動(dòng)并單擊擊鼠標(biāo)，可以建建立多邊邊形熱點(diǎn)點(diǎn)。選擇工具具，可以選選擇并移移動(dòng)建立立的熱點(diǎn)點(diǎn)。3)使使用工具具選選擇建立立的熱點(diǎn)點(diǎn)，在【屬性】面板中中為其建建立超鏈鏈接，如如圖5-39所所示。在【鏈接接】文本本框中輸輸入要鏈鏈接的目目標(biāo)文檔檔的URL地址址。在【目標(biāo)標(biāo)】下拉拉列表中中選擇打打開(kāi)鏈接接文檔的的目標(biāo)窗窗口。在【替換換】文本本框中輸輸入熱點(diǎn)點(diǎn)的說(shuō)明明性文字字。4插入入鼠標(biāo)經(jīng)經(jīng)過(guò)圖像像所謂鼠標(biāo)標(biāo)經(jīng)過(guò)圖圖像，是是指瀏覽覽網(wǎng)頁(yè)時(shí)時(shí)當(dāng)光標(biāo)標(biāo)指向圖圖像上時(shí)時(shí)該圖像像

38、將被其其它圖像像替代，從而產(chǎn)產(chǎn)生動(dòng)態(tài)態(tài)效果。下面以以實(shí)例的的形式介介紹如何何在網(wǎng)頁(yè)頁(yè)中插入入鼠標(biāo)經(jīng)經(jīng)過(guò)圖像像。圖5-39 【屬性】面板例5-6制作動(dòng)態(tài)態(tài)按鈕。1)在在【文文件】面面板中雙雙擊要編編輯的網(wǎng)網(wǎng)頁(yè)將其其打開(kāi)。2)在在網(wǎng)頁(yè)頁(yè)中要插插入鼠標(biāo)標(biāo)經(jīng)過(guò)圖圖像的位位置處定定位光標(biāo)標(biāo)。3) 在【插入】工具欄欄中選擇擇【常用用】標(biāo)簽簽，單擊擊右右側(cè)的小小箭頭，在打開(kāi)開(kāi)的菜單單中選擇擇【鼠標(biāo)標(biāo)經(jīng)過(guò)圖圖像】命命令，則則彈出【插入鼠鼠標(biāo)經(jīng)過(guò)過(guò)圖像】對(duì)話(huà)框框，如圖圖5-40所示示。圖5-40 【插入鼠標(biāo)經(jīng)過(guò)圖像】對(duì)話(huà)框4)在在對(duì)話(huà)框框中選擇擇原始圖圖像和鼠鼠標(biāo)經(jīng)過(guò)過(guò)圖像，并可為為鼠標(biāo)經(jīng)經(jīng)過(guò)圖像像建立超超鏈接

39、。【圖像像名稱(chēng)】：用于于輸入圖圖像名稱(chēng)稱(chēng)。【原原始圖像像】：用用于選擇擇原始顯顯示的圖圖像。【鼠標(biāo)經(jīng)經(jīng)過(guò)圖像像】：用用于選擇擇替代原原始圖像像的圖像像。【替替換文本本】：用用于輸入入鼠標(biāo)經(jīng)經(jīng)過(guò)圖像像時(shí)的替替代文本本?！景窗聪聲r(shí)，前往的的URL】：用用于為鼠鼠標(biāo)經(jīng)過(guò)過(guò)圖像建建立超鏈鏈接。5)單單擊按按鈕，即即可插入入鼠標(biāo)經(jīng)經(jīng)過(guò)圖像像，如圖圖5-41所示示為鼠標(biāo)標(biāo)經(jīng)過(guò)圖圖像的瀏瀏覽效果果。 圖5-41 鼠標(biāo)經(jīng)過(guò)圖像的瀏覽效果5創(chuàng)建建導(dǎo)航條條在網(wǎng)頁(yè)中中，導(dǎo)航航條的作作用不可可忽視，使用它它可以在在站點(diǎn)的的網(wǎng)頁(yè)之之間自由由跳轉(zhuǎn)。正如它它的名稱(chēng)稱(chēng)一樣，導(dǎo)航條條為瀏覽覽者提供供了導(dǎo)航航作用。制作導(dǎo)導(dǎo)航條之

40、之前，必必須先制制作每一一個(gè)導(dǎo)航航按鈕的的四種狀狀態(tài)，準(zhǔn)準(zhǔn)備好了了四種狀狀態(tài)的圖圖片以后后，就可可以向網(wǎng)網(wǎng)頁(yè)中插插入導(dǎo)航航條了。在網(wǎng)頁(yè)中中創(chuàng)建導(dǎo)導(dǎo)航條的的基本操操作步驟驟如下：1)在在網(wǎng)頁(yè)頁(yè)中要?jiǎng)?chuàng)創(chuàng)建導(dǎo)航航條的位位置處定定位光標(biāo)標(biāo)。2) 在【插入】工具欄欄中選擇擇【常用用】標(biāo)簽簽，單擊擊其中的的、按按鈕鈕，在打打開(kāi)的菜菜單中選選擇【導(dǎo)導(dǎo)航條】命令，則彈出出【插入入導(dǎo)航條條】對(duì)話(huà)話(huà)框，如如圖5-42所所示。圖5-42 【插入導(dǎo)航條】對(duì)話(huà)框3)在在對(duì)話(huà)框框中進(jìn)行行選項(xiàng)設(shè)設(shè)置?！緦?dǎo)航條條元件】：用于于顯示所所有的導(dǎo)導(dǎo)航元件件。單擊擊其上方方的按鈕鈕或按鈕鈕，可以以增加或或減少列列表中的的導(dǎo)航元元件。

41、單單擊其右右上角的的按鈕或或按鈕，可以調(diào)調(diào)整導(dǎo)航航元件的的排列順順序。【項(xiàng)目名名稱(chēng)】：用于輸輸入導(dǎo)航航元件的的名稱(chēng)，所輸入入的名稱(chēng)稱(chēng)將在上上面的【導(dǎo)航條條元件】中顯示示出來(lái)?！緺顟B(tài)圖圖像】：用于輸輸入一般般狀態(tài)下下要顯示示的圖像像的路徑徑和文件件名?！臼髽?biāo)經(jīng)經(jīng)過(guò)圖像像】：用用于輸入入鼠標(biāo)經(jīng)經(jīng)過(guò)時(shí)要要顯示的的圖像的的路徑和和文件名名。【按下圖圖像】：用于輸輸入按下下鼠標(biāo)時(shí)時(shí)要顯示示的圖像像的路徑徑和文件件名。【按下時(shí)時(shí)鼠標(biāo)經(jīng)經(jīng)過(guò)圖像像】：用用于輸入入單擊一一般狀態(tài)態(tài)圖像后后將光標(biāo)標(biāo)移過(guò)時(shí)時(shí)所顯示示的圖像像的路徑徑和文件件名。【替換文文本】：用于輸輸入鼠標(biāo)標(biāo)經(jīng)過(guò)圖圖像時(shí)的的替代文文本。【按下時(shí)時(shí)，

42、前往往的URL】：用于輸輸入單擊擊圖像時(shí)時(shí)要鏈接接的目標(biāo)標(biāo)文檔的的URL地址。在其后后面的下下拉列表表中可以以選擇顯顯示目標(biāo)標(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)畫(huà)畫(huà)在網(wǎng)頁(yè)中中使用Flash動(dòng)畫(huà)畫(huà)，可以以使頁(yè)面面的內(nèi)容容豐富多多彩，引引人入勝勝，使網(wǎng)網(wǎng)頁(yè)增強(qiáng)強(qiáng)活力與與感染力力。插入入Flash動(dòng)動(dòng)畫(huà)的操操作步驟驟如下：1)在在網(wǎng)頁(yè)頁(yè)中要插插入Flash動(dòng)畫(huà)的的位置處處定位光光

43、標(biāo)。2)在在【插入入】工具具欄中選選擇【常常用】標(biāo)標(biāo)簽，單單擊其中中的按按鈕鈕，在打打開(kāi)的菜菜單中選選擇【SWF】命令，則彈出出【選擇擇文件】對(duì)話(huà)框框。3) 在對(duì)對(duì)話(huà)框中中選擇要要插入的的Flash動(dòng)動(dòng)畫(huà)。4)單單擊按按鈕，將將位于站站點(diǎn)文件件夾之外外的動(dòng)畫(huà)畫(huà)復(fù)制到到站點(diǎn)文文件夾中中后，則則在網(wǎng)頁(yè)頁(yè)中插入入了Flash動(dòng)畫(huà)，如圖5-44所示。圖5-44 插入Flash動(dòng)畫(huà)5)在在【屬性性】面板板中設(shè)置置Flash動(dòng)動(dòng)畫(huà)的屬屬性?！緦挕亢秃汀靖摺浚河糜谟谠O(shè)置Flash動(dòng)畫(huà)畫(huà)對(duì)象的的寬度和和高度，單位為為像素?！疚募浚河糜谟谠O(shè)置Flash動(dòng)畫(huà)畫(huà)對(duì)象的的文件路路徑?！驹次募浚河糜糜谥付ǘㄔ次臋n

44、檔(FLA文件件)的路路徑?！颈尘邦侇伾浚河糜谠O(shè)設(shè)置Flash動(dòng)畫(huà)的的背景顏顏色?！狙h(huán)】：選擇擇該復(fù)選選框，可可以在瀏瀏覽器中中循環(huán)播播放Flash動(dòng)畫(huà)?！咀詣?dòng)播播放】：選擇該該復(fù)選框框，則打打開(kāi)瀏覽覽器后可可以自動(dòng)動(dòng)播放Flash動(dòng)畫(huà)畫(huà)。【垂直邊邊距】：用于設(shè)設(shè)置Flash動(dòng)畫(huà)對(duì)對(duì)象與周周?chē)厮厣舷逻呥吔绲木嗑嚯x?！舅竭呥吘唷浚河糜谠O(shè)設(shè)置Flash動(dòng)畫(huà)對(duì)對(duì)象與周周?chē)厮刈笥疫呥吔绲木嗑嚯x?！酒焚|(zhì)】：用于于設(shè)置Flash動(dòng)畫(huà)畫(huà)對(duì)象的的播放質(zhì)質(zhì)量。質(zhì)質(zhì)量越高高，動(dòng)畫(huà)畫(huà)的下載載速度就就越慢；質(zhì)量越越低，動(dòng)動(dòng)畫(huà)的下下載速度度就越快快?！颈壤浚河糜谟谠O(shè)置Flash動(dòng)畫(huà)畫(huà)播放時(shí)時(shí)的縮放放比例

45、?！緦?duì)齊】：設(shè)置置Flash動(dòng)動(dòng)畫(huà)對(duì)象象與周?chē)鷩氐牡膶?duì)齊方方式，其其與圖像像的對(duì)齊齊方式相相同?！網(wǎng)mode(窗口模模式)】：為SWF文文件設(shè)置置窗口模模式的參參數(shù)，以以避免與與DHTML元元素沖突突，默認(rèn)認(rèn)值是不不透明。單擊按按鈕，可可以打開(kāi)開(kāi)默認(rèn)的的Flash動(dòng)動(dòng)畫(huà)編輯輯軟件更更新“.fla”文件件。單擊按按鈕，可可以在編編輯的頁(yè)頁(yè)面中播播放Flash動(dòng)畫(huà)。單擊按按鈕，則則彈出【參數(shù)】對(duì)話(huà)框框，在該該對(duì)話(huà)框框中可以以輸入傳傳遞給影影片的附附加參數(shù)數(shù)。5.5.1使使用表表格在DreamweaverCS4中，表表格除了了可以使使大量的的信息資資料有組組織地排排列起來(lái)來(lái)以便管管理外，還可以以

46、用于網(wǎng)網(wǎng)頁(yè)布局局，即將將網(wǎng)頁(yè)中中的元素素放到表表格的單單元格中中進(jìn)行網(wǎng)網(wǎng)頁(yè)排版版，因此此它是控控制頁(yè)面面整體布布局的重重要工具具。5.5網(wǎng)網(wǎng)頁(yè)頁(yè)的布局局方法1插入入表格在網(wǎng)頁(yè)中中插入表表格的操操作步驟驟如下：1)在在網(wǎng)頁(yè)頁(yè)中要插插入表格格的位置置處定位位光標(biāo)。2)在在【插插入】工工具欄中中選擇【常用】標(biāo)簽，單擊其其中的按按鈕，則則彈出【表格】對(duì)話(huà)框框，如圖圖5-45所示示。圖5-45 【表格】對(duì)話(huà)框 3)在在對(duì)話(huà)框框中進(jìn)行行選項(xiàng)設(shè)設(shè)置。【行數(shù)】和【列列】：用用于設(shè)置置插入表表格的行行數(shù)和列列數(shù)?！颈砀駥拰挾取浚河糜谠O(shè)設(shè)置表格格的寬度度，選擇擇“像素素”為單單位時(shí)，表格的的寬度為為固定像像素的寬

47、寬度；選選擇“百百分比”為單位位時(shí)，表格的寬寬度與瀏瀏覽器窗窗口的寬寬度將保保持相同同的百分分比?！具吙虼旨?xì)細(xì)】：用于設(shè)設(shè)置表格格的邊框框?qū)挾??！締卧窀襁吘唷浚河糜谟谠O(shè)置表表格中單單元格內(nèi)內(nèi)的元素素距離單單元格邊邊框的距距離?！締卧窀耖g距】：用于于設(shè)置表表格中單單元格之之間的間間距?！緲?biāo)題】：用于于設(shè)置表表頭的位位置，分分別為無(wú)無(wú)、左、頂部、兩者。輔助功能能中的【標(biāo)題】：用于于設(shè)置表表格標(biāo)題題，該標(biāo)標(biāo)題在表表格的外外側(cè)?！菊浚河糜谟诿枋霰肀砀竦南嘞嚓P(guān)信息息。4) 單擊擊按按鈕鈕，即可可在網(wǎng)頁(yè)頁(yè)中插入入表格，如圖5-46所示。圖5-46 插入的表格 在網(wǎng)頁(yè)中中插入表表格后，可以向向單元格

48、格中直接接輸入文文本或插插入其它它的對(duì)象象，如圖圖像、動(dòng)動(dòng)畫(huà)等，還可以以向表格格中插入入嵌套表表格。當(dāng)當(dāng)然，用用戶(hù)也可可以從外外部導(dǎo)入入其它軟軟件編輯輯的表格格，如Excel電子子表格等等。2表格格的編輯輯操作插入到網(wǎng)網(wǎng)頁(yè)中的的表格、單元格格可以進(jìn)進(jìn)行各種種編輯操操作，如如選擇、拆分與與合并、復(fù)制、刪除等等。選選擇擇表格、單元格格的操作作方法如如下：將光標(biāo)指指向表格格邊框，單擊鼠鼠標(biāo)，可可以選擇擇整個(gè)表表格。另另外，單單擊狀態(tài)態(tài)欄上的的標(biāo)標(biāo)記記，也可可以選擇擇整個(gè)表表格。將光標(biāo)指指向表格格的上邊邊框，當(dāng)當(dāng)光標(biāo)變變?yōu)樾螤顮顣r(shí)單擊擊鼠標(biāo)，可以選選擇一列列單元格格。按住住鼠標(biāo)左左鍵左右右拖曳，可以選

49、選擇連續(xù)續(xù)的多列列單元格格。將光標(biāo)指指向表格格的左邊邊框，當(dāng)當(dāng)光標(biāo)變變?yōu)樾螤顮顣r(shí)單擊擊鼠標(biāo)，可以選選擇一行行單元格格。按住住鼠標(biāo)左左鍵上下下拖曳，可以選選擇連續(xù)續(xù)的多行行單元格格。另外外，單擊擊狀態(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)單單

50、擊【屬性】面板中中的按按鈕，即可將將所選單單元格合合并為一一個(gè)單元元格，原原單元格格中的內(nèi)內(nèi)容將組組合為一一組存放放在合并并后的單單元格中中。如圖圖5-47所示示為合并并前后的的效果對(duì)對(duì)比。圖5-47 合并前后的單元格對(duì)比拆分單元元格的操操作與合合并單元元格操作作正好相相反，它它是將一一個(gè)單元元格拆分分為幾個(gè)個(gè)連續(xù)的的單元格格，其基基本的操操作步驟驟如下：1)將將光標(biāo)標(biāo)定位在在要拆分分的單元元格中。2)單單擊【屬性】面板中中的按按鈕，則彈出出【拆分分單元格格】對(duì)話(huà)話(huà)框，如如圖5-48所所示。圖5-48 【拆分單元格】對(duì)話(huà)框 3)在在對(duì)話(huà)框框中選擇擇要將單單元格拆拆分成的的行或列列，并設(shè)設(shè)置相應(yīng)

51、應(yīng)的行數(shù)數(shù)或列數(shù)數(shù)。4) 單擊擊按按鈕鈕，即可可拆分單單元格，原單元元格中的的內(nèi)容將將保留在在拆分后后的左上上角單元元格中。如圖5-49所示為為拆分前前后的效效果對(duì)比比。插插入入或刪除除行或列列的操作作步驟如如下：1)選選擇表格格的行、列或單單元格后后，單擊擊鼠標(biāo)右右鍵，則則彈出如如圖5-50所所示的快快捷菜單單。圖5-49 拆分前后的單元格對(duì)比圖5-50 快捷菜單2)選選擇【表表格】子子菜單中中的相應(yīng)應(yīng)命令，可以插插入或刪刪除行或或列。選擇【插插入行】命令，可以在在所選單單元格的的上方插插入一行行單元格格。選擇【插插入列】命令，可以在在所選單單元格的的左側(cè)插插入一列列單元格格。選擇【插插入行

52、或或列】命命令，則則彈出【插入行行或列】對(duì)話(huà)框框，如圖圖5-51所示示。在對(duì)對(duì)話(huà)框中中進(jìn)行選選項(xiàng)設(shè)置置，即可可插入多多行或多多列單元元格。圖5-51 【插入行或列】對(duì)話(huà)框選擇【刪刪除行】命令，可以刪刪除所選選的一行行單元格格。選擇【刪刪除列】命令，可以刪刪除所選選的一列列單元格格。3設(shè)置置表格的的屬性如果插入入到網(wǎng)頁(yè)頁(yè)中的表表格不能能滿(mǎn)足網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)計(jì)的需要要，可以以通過(guò)設(shè)設(shè)置表格格的屬性性進(jìn)行調(diào)調(diào)整。選選擇要設(shè)設(shè)置屬性性的表格格區(qū)域(可以是是整個(gè)表表格、一一行或一一列或一一個(gè)單元元格)后后，在【屬性】面板中中設(shè)置其其相應(yīng)的的屬性。下面我我們以選選擇整個(gè)個(gè)表格為為例，講講解表格格的屬性性設(shè)置。選

53、擇了了表格后后的【屬屬性】面面板如圖圖5-52所示示。圖5-52 【屬性】面板【表格】：用于于設(shè)置表表格的名名稱(chēng)?！拘小亢秃汀玖小浚河糜谟谠O(shè)置表表格的行行數(shù)和列列數(shù)?！緦挕浚河糜谠O(shè)設(shè)置表格格的寬度度，單位位為“百百分比”或“像像素”。【填充】：用于于設(shè)置單單元格中中的內(nèi)容容與邊框框之間的的距離?！鹃g距】：用于于設(shè)置單單元格之之間的距距離?！緦?duì)齊】：用于于設(shè)置表表格在網(wǎng)網(wǎng)頁(yè)中的的對(duì)齊方方式，可可以選擇擇“默認(rèn)認(rèn)”、“左對(duì)齊齊”、“居中對(duì)對(duì)齊”或或“右對(duì)對(duì)齊”等等方式。【邊框】：用于于設(shè)置表表格外邊邊框的寬寬度?！绢?lèi)】：用于設(shè)設(shè)置表格格的CSS樣式式。單擊按按鈕，可以取取消單元元格的寬寬度設(shè)置置，

54、使其其寬度隨隨單元格格的內(nèi)容容自動(dòng)縮縮放。單擊按按鈕，可以取取消單元元格的高高度設(shè)置置，使其其高度隨隨單元格格的內(nèi)容容自動(dòng)調(diào)調(diào)整。單擊按按鈕，可以將將表格寬寬度轉(zhuǎn)換換為像素素。單擊按按鈕，可以將將表格寬寬度轉(zhuǎn)換換為百分分比。5.5.2使使用框框架框架主要要用于將將網(wǎng)頁(yè)分分割為多多個(gè)HTML頁(yè)頁(yè)面進(jìn)行行顯示。例如，一個(gè)網(wǎng)網(wǎng)頁(yè)由三三個(gè)框架架組成，左側(cè)的的框架可可以顯示示一個(gè)滾滾動(dòng)菜單單；頂部部的框架架可以顯顯示站點(diǎn)點(diǎn)的徽標(biāo)標(biāo)和橫幅幅廣告等等；而右右側(cè)的框框架則用用于顯示示網(wǎng)頁(yè)的的主要內(nèi)內(nèi)容。每每一個(gè)框框架都是是一個(gè)獨(dú)獨(dú)立的HTML頁(yè)面，它們通通過(guò)框架架集組合合在一起起。所所謂謂框架集集(也稱(chēng)稱(chēng)為框

55、架架組)就就是一個(gè)個(gè)定義了了頁(yè)面結(jié)結(jié)構(gòu)和屬屬性的HTML頁(yè)面，包括框框架數(shù)目目、框架架的大小小、在框框架中加加載頁(yè)面面的來(lái)源源及其他他可定義義的屬性性。框架架集在瀏瀏覽器中中不顯示示，它只只是用于于存儲(chǔ)框框架的一一個(gè)容器器。如圖圖5-53所示示就是用用框架定定義的PhotoshopCS的的幫助頁(yè)頁(yè)面。圖5-53 Photoshop CS的幫助頁(yè)面1建立立框架建立框架架的基本本操作步步驟如下下：1) 在【插入】工具欄欄中選擇擇【布局局】標(biāo)簽簽，單擊擊其中的的按按鈕，則彈出出一個(gè)菜菜單，如如圖5-54所所示。圖5-54 【框架】菜單2)在在彈出的的菜單中中單擊所所需的框框架格式式，即可可將該框框架

56、應(yīng)用用到頁(yè)面面中，框框架之間間以邊框框間隔。3)在在框架架中單擊擊鼠標(biāo)，可以插插入文本本、圖像像、表格格等內(nèi)容容，如圖圖5-55所示示為使用用框架建建立的網(wǎng)網(wǎng)頁(yè)。如如果使使用系統(tǒng)統(tǒng)預(yù)設(shè)的的框架不不能滿(mǎn)足足網(wǎng)頁(yè)設(shè)設(shè)計(jì)的要要求，用用戶(hù)還可可以自定定義框架架，即重重新設(shè)計(jì)計(jì)框架的的結(jié)構(gòu)，基本的的操作步步驟如下下：1) 單擊擊菜單欄欄中的【插入】【HTML】【框架】命令，則彈出出【框架架】命令令子菜單單，如圖圖5-56所示示。圖5-55 使用框架建立的網(wǎng)頁(yè)圖5-56 【框架】命令子菜單2)在在子菜單單中選擇擇所需的的命令，即可在在框架邊邊框中插插入相應(yīng)應(yīng)的框架架。另另外外，按住住Alt鍵的同同時(shí)將光光

57、標(biāo)指向向框架邊邊框，當(dāng)當(dāng)光標(biāo)變變?yōu)殡p箭箭頭時(shí)按按住鼠標(biāo)標(biāo)左鍵拖拖曳，也也可以建建立框架架。2編輯輯框架在網(wǎng)頁(yè)中中插入框框架之后后，還可可以進(jìn)行行編輯操操作，如如選擇框框架、修修改框架架、刪除除框架、拆分框框架等。編編輯框框架的基基本操作作如下：?jiǎn)螕艟W(wǎng)頁(yè)頁(yè)中的框框架邊框框，可以以選擇框框架集。在網(wǎng)頁(yè)中中按住Alt鍵鍵單擊框框架，可可以選擇擇該框架架，被選選擇的框框架在頁(yè)頁(yè)面中以以虛線(xiàn)邊邊框表示示。在【框架架】面板板中單擊擊框架縮縮略圖，可以選選擇相應(yīng)應(yīng)的框架架。圖5-57 【框架】面板將光標(biāo)指指向框架架內(nèi)邊框框，當(dāng)光光標(biāo)變?yōu)闉殡p向箭箭頭時(shí)，按住鼠鼠標(biāo)左鍵鍵拖曳，可以移移動(dòng)框架架邊框的的位置，從而

58、改改變框架架的形狀狀。如果果按住鼠鼠標(biāo)左鍵鍵向框架架外拖曳曳，則可可以刪除除該框架架。將光標(biāo)定定位在框框架中，單擊菜菜單欄中中的【修修改】【框架架集】命命令，從從彈出的的子菜單單中選擇擇所需的的命令，可以拆拆分該框框架，如如圖5-58所所示。圖5-58 【框架集】子菜單 3設(shè)置置框架集集和框架架的屬性性選擇了網(wǎng)網(wǎng)頁(yè)中的的框架集集或框架架后，可可以在【屬性】面板中中設(shè)置它它們的屬屬性，如如圖5-59所所示為框框架集的的【屬性性】面板板?！具吙颉浚河糜谟谠O(shè)置所所選框架架集邊框框是否在在瀏覽器器窗口中中顯示。選擇“是”選選項(xiàng)時(shí)將將以三維維立體效效果顯示示框架集集邊框；選擇“否”選選項(xiàng)時(shí)將將不顯示示框

59、架集集邊框；選擇“默認(rèn)”選項(xiàng)時(shí)時(shí)，將由由瀏覽器器決定是是否顯示示框架集集邊框。大多數(shù)數(shù)瀏覽器器的默認(rèn)認(rèn)設(shè)置為為“是”，即顯顯示框架架集邊框框。圖5-59 【屬性】面板(1)【邊框?qū)拰挾取浚河糜谠O(shè)設(shè)置所選選框架集集的邊框框?qū)挾?，單位為為像素?！具吙蝾侇伾浚河糜谠O(shè)設(shè)置所選選框架集集的邊框框顏色。【行列選選定范圍圍】：該該區(qū)域位位于【屬屬性】面面板右側(cè)側(cè)，其中中深灰色色部分為為當(dāng)前所所選框架架。在該該區(qū)域中中單擊鼠鼠標(biāo)，可可以選擇擇相應(yīng)的的框架?！局怠浚涸谖谋颈究蛑休斴斎霐?shù)值值，可以以指定所所選框架架的尺寸寸?！締挝弧浚河糜谟谠O(shè)置所所選框架架的尺寸寸單位，可以選選擇“像像素”、“百分分比”或或“相

60、對(duì)對(duì)”。如如圖5-60所所示為選選擇了框框架后的的【屬性性】面板板。圖5-60 【屬性】面板(2)【框架名名稱(chēng)】：用于定定義所選選框架的的名稱(chēng)，該名稱(chēng)稱(chēng)用于創(chuàng)創(chuàng)建超鏈鏈接?！驹次募浚河糜糜谳斎肴牖蝻@示示將在該該框架中中顯示的的網(wǎng)頁(yè)的的URL地址，也可以以利用和和圖圖標(biāo)標(biāo)選擇網(wǎng)網(wǎng)頁(yè)?！緷L動(dòng)】：用于于設(shè)置是是否在框框架中顯顯示滾動(dòng)動(dòng)條。選選擇“是是”選項(xiàng)項(xiàng)時(shí)將在在框架中中顯示滾滾動(dòng)條；選擇“否”選選項(xiàng)時(shí)，則不顯顯示滾動(dòng)動(dòng)條；選選擇“自自動(dòng)”選選項(xiàng)時(shí)將將根據(jù)需需要決定定是否顯顯示滾動(dòng)動(dòng)條，當(dāng)當(dāng)網(wǎng)頁(yè)內(nèi)內(nèi)容超出出框架范范圍時(shí)將將顯示滾滾動(dòng)條，不超出出范圍時(shí)時(shí)將不顯顯示滾動(dòng)動(dòng)條；選選擇“默默認(rèn)”選選項(xiàng)