大學(xué)計(jì)算機(jī)基礎(chǔ)教程8-10-第9章

第9章Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

9.1網(wǎng)站基礎(chǔ)知識(shí)9.2DreamweaverCS3的基本操作9.3網(wǎng)頁(yè)布局設(shè)計(jì)基礎(chǔ)9.4網(wǎng)頁(yè)文本處理9.5網(wǎng)頁(yè)圖像添加與處理9.6常用多媒體對(duì)象的添加9.7創(chuàng)建網(wǎng)頁(yè)鏈接

9.1網(wǎng)站基礎(chǔ)知識(shí)

9.1.1基本概念

1．網(wǎng)站(Website)

網(wǎng)站是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML等工具制作的，用于展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合。

2．網(wǎng)頁(yè)

網(wǎng)頁(yè)是互聯(lián)網(wǎng)中用于傳達(dá)信息的Web頁(yè)面，該頁(yè)面會(huì)顯示文字、圖片、聲音、視頻等內(nèi)容，從而使瀏覽者能夠在網(wǎng)頁(yè)的頁(yè)面上了解到所需的信息。網(wǎng)頁(yè)實(shí)際上是一個(gè)文件，它存放于互聯(lián)網(wǎng)中某一臺(tái)服務(wù)器內(nèi)。

3．HTML

HTML(HyperTextMark-upLanguage)即超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言，是為“網(wǎng)頁(yè)創(chuàng)建和其他可在網(wǎng)頁(yè)瀏覽器中看到的信息”設(shè)計(jì)的一種置標(biāo)語(yǔ)言。HTML文件最常用的擴(kuò)展名是?.html，但是像DOS這樣的舊操作系統(tǒng)限制擴(kuò)展名為最多為三個(gè)字符，所以.htm擴(kuò)展名也可使用。

4．Java

Java是一種可以撰寫跨平臺(tái)應(yīng)用軟件的面向?qū)ο蟮某绦蛟O(shè)計(jì)語(yǔ)言，是由Sun公司推出的Java程序設(shè)計(jì)語(yǔ)言和Java平臺(tái)(即JavaSE，JavaEE，JavaME)的總稱。

5．JavaScript

JavaScript是一種能讓網(wǎng)頁(yè)更加生動(dòng)活潑的程序語(yǔ)言，也是目前網(wǎng)頁(yè)設(shè)計(jì)中最容易學(xué)又最方便的腳本語(yǔ)言之一。9.1.2網(wǎng)頁(yè)組成元素

1．網(wǎng)站Logo

網(wǎng)站Logo是網(wǎng)站形象的重要體現(xiàn)，一個(gè)好的標(biāo)志往往能反映網(wǎng)站的主題，特別是一個(gè)商業(yè)網(wǎng)站Logo，從中可以基本了解到這個(gè)網(wǎng)站的類型或者內(nèi)容。Logo一般出現(xiàn)在頁(yè)面的左上端。

2．網(wǎng)站Banner

網(wǎng)站Banner是橫幅廣告，是互聯(lián)網(wǎng)廣告中最基本的廣告形式，一般位于Logo的右側(cè)。Banner的標(biāo)準(zhǔn)大小為468×60像素，使用Gif格式的圖像文件可以使用靜態(tài)圖形，也可以使用動(dòng)畫圖像。除普通Gif格式外，采用Flash能賦予Banner更強(qiáng)的表現(xiàn)力和交互內(nèi)容。

3．導(dǎo)航欄

導(dǎo)航欄是網(wǎng)頁(yè)的重要組成元素，它的任務(wù)是幫助瀏覽者在站點(diǎn)內(nèi)快速查找信息。導(dǎo)航欄可以是簡(jiǎn)單的文字鏈接，也可以是精美的圖片或是豐富多彩的按鈕。導(dǎo)航的位置一般有四種：頁(yè)面的左側(cè)、右側(cè)、頂部和底部。有時(shí)候在同一個(gè)頁(yè)面中運(yùn)用了多種導(dǎo)航。

4．文本

無(wú)論制作網(wǎng)頁(yè)的目的是什么，文本都是網(wǎng)頁(yè)中最基本的、必不可少的元素。文本是傳達(dá)信息最重要的方式。

5．圖像

圖像是文本的說(shuō)明和解釋，在網(wǎng)頁(yè)的適當(dāng)位置放置一些圖像，不僅可以使文本清晰易讀，而且使得網(wǎng)頁(yè)更加有吸引力。

6．Flash動(dòng)畫

Flash動(dòng)畫是網(wǎng)頁(yè)中最吸引人的地方，好的動(dòng)畫能夠使頁(yè)面顯得活潑生動(dòng)，從而達(dá)到比以往靜態(tài)頁(yè)面更好的宣傳效果。9.1.3網(wǎng)頁(yè)設(shè)計(jì)步驟

1．收集資料和素材

在制作網(wǎng)頁(yè)前應(yīng)先收集要用到的文字資料、圖片素材及用于增添頁(yè)面效果的動(dòng)畫等。

2．規(guī)劃站點(diǎn)

規(guī)劃站點(diǎn)時(shí)，可以將自己假想為瀏覽者，考慮瀏覽者如何訪問(wèn)網(wǎng)站、如何從一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面。

根據(jù)瀏覽者的訪問(wèn)順序可以將內(nèi)容設(shè)計(jì)為樹形目錄，級(jí)數(shù)一般不要太多，盡可能少于四級(jí)，否則會(huì)讓人感覺(jué)繁瑣，也不方便管理。

3．制作網(wǎng)頁(yè)

網(wǎng)站一般由多個(gè)網(wǎng)頁(yè)鏈接而成。一般情況下，制作網(wǎng)頁(yè)需要配合多種工具，可以使用Dreamweaver布局頁(yè)面、編排頁(yè)面資料、建立超鏈接、添加多媒體素材以及添加網(wǎng)頁(yè)特效等，同時(shí)，也可以為素材美化需求而使用Photoshop編修圖像外觀等。

4．測(cè)試站點(diǎn)

在發(fā)布站點(diǎn)前需對(duì)站點(diǎn)進(jìn)行測(cè)試。測(cè)試站點(diǎn)可根據(jù)客戶需求、網(wǎng)站大小及瀏覽器種類等進(jìn)行。一般來(lái)說(shuō)，應(yīng)將站點(diǎn)移到一個(gè)模擬調(diào)試服務(wù)器上對(duì)其進(jìn)行測(cè)試或編輯。

5．發(fā)布站點(diǎn)

發(fā)布站點(diǎn)前，必須在Internet上申請(qǐng)一個(gè)主頁(yè)空間，用于指定網(wǎng)站或主頁(yè)在Internet上的放置位置。

發(fā)布站點(diǎn)一般是使用FTP(遠(yuǎn)程文件傳輸)軟件(如LeapFTP、GuteFTP等)將站點(diǎn)上傳到服務(wù)器申請(qǐng)的網(wǎng)址目錄下。

6．更新和維護(hù)站點(diǎn)

將站點(diǎn)上傳到服務(wù)器上后，每隔一段時(shí)間就應(yīng)對(duì)站點(diǎn)中的頁(yè)面進(jìn)行更新，保持網(wǎng)站內(nèi)容的新鮮感，以吸引更多的瀏覽者。此外，還應(yīng)定期打開瀏覽器檢查頁(yè)面元素顯示是否正常以及各種超鏈接是否正常等。

9.2DreamweaverCS3的基本操作

9.2.1DreamweaverCS3工作界面

啟動(dòng)DreamweaverCS3后，將首先顯示一個(gè)開始頁(yè)，新建或打開一個(gè)網(wǎng)頁(yè)后將打開其工作界面，如圖9.1所示。

1．標(biāo)題欄

標(biāo)題欄位于Dreamweaver窗口的頂部，顯示了軟件名稱及當(dāng)前編輯文檔的名稱。圖9.1DreamweaverCS3工作界面

2．文檔工具欄

文檔工具欄主要用于文檔的工作布局切換和預(yù)覽等操作。

網(wǎng)頁(yè)元素雖然多種多樣，但是都可以稱為對(duì)象。簡(jiǎn)單的對(duì)象有文字、圖像、表格等，復(fù)雜的對(duì)象包括導(dǎo)航條、程序等。大部分的對(duì)象都可以通過(guò)“插入”工具欄插入到文檔中，如圖9.1所示。

3．浮動(dòng)面板組

浮動(dòng)面板組是浮動(dòng)面板的集合，位于窗口右側(cè)，是執(zhí)行站點(diǎn)管理和事件添加等操作的場(chǎng)所，如圖9.1所示。

4．屬性面板

屬性面板用于設(shè)置和查看所選對(duì)象的各種屬性，如圖9.1所示。不同對(duì)象的屬性面板的參數(shù)設(shè)置項(xiàng)目不同。

5．插入欄

插入欄用于方便用戶在網(wǎng)頁(yè)制作過(guò)程中快速插入網(wǎng)頁(yè)元素，默認(rèn)顯示的是常用插入欄。單擊不同的選項(xiàng)卡，可進(jìn)行插入欄的切換操作，圖9.1顯示了“常用”插入欄。

6．文檔編輯區(qū)

文檔編輯區(qū)用于顯示當(dāng)前正在編輯的網(wǎng)頁(yè)頁(yè)面，絕大部分頁(yè)面設(shè)計(jì)都在此區(qū)域中進(jìn)行，例如布局頁(yè)面元素，插入和調(diào)整圖像、表格、文本等。9.2.2本地站點(diǎn)的創(chuàng)建和管理

1．站點(diǎn)的規(guī)劃

站點(diǎn)的規(guī)劃指利用文件夾分門別類地保存不同的網(wǎng)頁(yè)內(nèi)容，合理地組織站點(diǎn)結(jié)構(gòu)。

在規(guī)劃站點(diǎn)時(shí)，應(yīng)先在本地磁盤上創(chuàng)建一個(gè)文件夾作為站點(diǎn)的根目錄，在制作過(guò)程中創(chuàng)建和編輯的所有網(wǎng)頁(yè)、圖像文件及網(wǎng)站中用到的其他內(nèi)容都應(yīng)保存在該文件夾中。在發(fā)布站點(diǎn)時(shí)，只需將此文件夾中的所有內(nèi)容上傳到Web服務(wù)器上即可。如果站點(diǎn)結(jié)構(gòu)復(fù)雜，內(nèi)容較多，則還需建立子文件夾，以存放不同類別的網(wǎng)頁(yè)或圖像等。在站點(diǎn)規(guī)劃中，合理對(duì)文件或文件夾進(jìn)行命名也非常重要，好的名稱容易理解，能夠表達(dá)出網(wǎng)頁(yè)的內(nèi)容?？梢圆捎门c文件或文件夾內(nèi)容相對(duì)應(yīng)的英文或拼音來(lái)命名，避免使用長(zhǎng)文件名和中文。

2．站點(diǎn)的創(chuàng)建

1)創(chuàng)建本地站點(diǎn)

首先在硬盤的D盤創(chuàng)建文件夾mysite作為根目錄，具體操作步驟如下：

(1)在DreamweaverCS3中選擇“站點(diǎn)”|“新建站點(diǎn)”命令，打開“未命名站點(diǎn)1的站點(diǎn)定義為”對(duì)話框，如圖9.2所示。

(2)在“基本”選項(xiàng)卡的“您打算為您的站點(diǎn)起什么名字？”欄中輸入“mysite”，在設(shè)置“您的站點(diǎn)的HTTP地址(URL)是什么？”欄時(shí)，可為空，如圖9.2所示。

(3)單擊“下一步”按鈕，在打開的對(duì)話框中選擇將要采用的服務(wù)器技術(shù)，選擇“否，我不想使用服務(wù)器技術(shù)”選項(xiàng)，如圖9.3所示。圖9.2站點(diǎn)定義對(duì)話框圖9.3選擇服務(wù)器技術(shù)

(4)繼續(xù)單擊“下一步”按鈕，出現(xiàn)文件保存位置對(duì)話框。在打開的對(duì)話框頂部的兩個(gè)選項(xiàng)中選擇第1項(xiàng)。在文本框中輸入站點(diǎn)文件夾的路徑D:\mysite或單擊文本框旁邊的瀏覽按鈕，在打開的“選擇站點(diǎn)mysite的本地根文件夾”對(duì)話框中，找到將要存放站點(diǎn)文件的文件夾，如圖9.4所示。單擊“選擇”按鈕后，就會(huì)將選中文件夾的路徑加入到文本框中。

(5)單擊“下一步”按鈕，出現(xiàn)如何連接遠(yuǎn)程服務(wù)器選擇對(duì)話框，在這里選擇“無(wú)”，如圖9.5所示。圖9.4選擇“站點(diǎn)mysite的本地根文件夾”對(duì)話框圖9.5選擇如何連接遠(yuǎn)程服務(wù)器

(6)單擊“下一步”按鈕進(jìn)入結(jié)束對(duì)話框，其中列出了設(shè)置中的關(guān)鍵信息。如果需要修改設(shè)置，可以單擊“上一步”按鈕修改對(duì)話框中的內(nèi)容，如圖9.6所示。

(7)單擊“完成”按鈕，完成本站點(diǎn)的創(chuàng)建。在文件面板中出現(xiàn)剛才創(chuàng)建的站點(diǎn)，如圖9.1所示。圖9.6結(jié)束對(duì)話框

2)管理站點(diǎn)

在DreamweaverCS3中可以對(duì)站點(diǎn)進(jìn)行各種管理，如修改站點(diǎn)名稱和本地根文件夾等，具體操作步驟如下：

(1)在DreamweaverCS3選擇“站點(diǎn)”|“管理站點(diǎn)”命令，在打開的“管理站點(diǎn)”對(duì)話框中選中需要管理的站點(diǎn)，如圖9.7所示。

(2)單擊“編輯”，在打開的“mysite的站點(diǎn)定義為”對(duì)話框中修改相關(guān)參數(shù)，完成后單擊“確定”，如圖9.2所示。

(3)單擊“編輯站點(diǎn)”對(duì)話框中的“完成”按鈕，完成站點(diǎn)編輯。

(4)如果要?jiǎng)h除站點(diǎn)，在“管理站點(diǎn)”對(duì)話框中單擊“刪除”按鈕。圖9.7“管理站點(diǎn)”對(duì)話框9.2.3文件操作

1．新建文件夾

網(wǎng)站文件夾用于存放和管理網(wǎng)絡(luò)資源，例如可以創(chuàng)建一個(gè)名為“images”的文件夾，用于存放網(wǎng)站中應(yīng)用的所有圖片。創(chuàng)建文件夾的具體步驟如下：

(1)選擇“窗口”|“文件”命令或按下F8功能鍵，打開“文件”面板，如圖9.1所示。

(2)在網(wǎng)站名稱上右擊打開快捷菜單，選擇“新建文件夾”命令，輸入文件夾的名稱images，然后按下Enter鍵即可完成文件夾的創(chuàng)建，如圖9.8所示。圖9.8創(chuàng)建文件夾和文件

2．新建文件

(1)選擇“窗口”|“文件”命令或按下F8功能鍵，打開“文件”面板，如圖9.1所示。

(2)在網(wǎng)站名稱上右擊打開快捷菜單，選擇“新建文件”命令，輸入文件的名稱index.html，然后按下Enter鍵即可創(chuàng)建主頁(yè)文件，如圖9.8所示。

(3)按同樣的方法，繼續(xù)創(chuàng)建子頁(yè)文件，并把子頁(yè)文件放在文件夾下(如放在html文件夾)，如圖9.8所示。

注意：若用戶右擊網(wǎng)站名稱，則新建的文件將直接放置在網(wǎng)站根目錄下；若是右擊某個(gè)文件夾，則新建的文件將放置在該文件夾中。

3．打開與預(yù)覽網(wǎng)頁(yè)

打開和預(yù)覽網(wǎng)頁(yè)是兩個(gè)不同的操作，打開網(wǎng)頁(yè)是為了編輯網(wǎng)頁(yè)內(nèi)容，而預(yù)覽網(wǎng)頁(yè)是為了查看網(wǎng)頁(yè)的設(shè)計(jì)效果。

(1)打開網(wǎng)頁(yè)。打開網(wǎng)頁(yè)的方法很簡(jiǎn)單，只需在“文件”面板中雙擊某個(gè)需要打開的文檔即可。

(2)預(yù)覽網(wǎng)頁(yè)。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中經(jīng)常要通過(guò)預(yù)覽器來(lái)瀏覽網(wǎng)頁(yè)效果。預(yù)覽網(wǎng)頁(yè)的方法是，單擊“文檔”工具欄中的“在瀏覽器中預(yù)覽/調(diào)試”按鈕或按下F12功能鍵即可。

預(yù)覽網(wǎng)頁(yè)時(shí)，若網(wǎng)頁(yè)經(jīng)過(guò)編輯而未執(zhí)行保存，則將彈出提示框，詢問(wèn)是否保存修改，而只有在保存修改后才可以打開瀏覽器，顯示網(wǎng)頁(yè)頁(yè)面。

9.3網(wǎng)頁(yè)布局設(shè)計(jì)基礎(chǔ)

9.3.1網(wǎng)頁(yè)布局基礎(chǔ)

網(wǎng)頁(yè)設(shè)計(jì)者要把網(wǎng)頁(yè)相關(guān)的內(nèi)容合理地安排到頁(yè)面中，從而達(dá)到內(nèi)容與形式的完美結(jié)合，這就要掌握一些關(guān)于網(wǎng)頁(yè)布局的知識(shí)。網(wǎng)頁(yè)的布局方式主要從用戶使用的方便性、界面大方美觀、網(wǎng)頁(yè)特色等方面考慮。如今互聯(lián)網(wǎng)上的大部分網(wǎng)頁(yè)都采用通欄、二分欄、三分欄等版型結(jié)構(gòu)布局網(wǎng)頁(yè)。

1．通欄結(jié)構(gòu)設(shè)計(jì)

通欄結(jié)構(gòu)版式一般使用頁(yè)面水平(或垂直)的大范圍來(lái)顯示網(wǎng)頁(yè)內(nèi)容，常見于一些網(wǎng)站的首頁(yè)設(shè)計(jì)，如圖9.9所示。圖9.9網(wǎng)頁(yè)通欄結(jié)構(gòu)設(shè)計(jì)

2．二分欄結(jié)構(gòu)設(shè)計(jì)

二分欄結(jié)構(gòu)是所有網(wǎng)頁(yè)設(shè)計(jì)中最常用的版型之一，它通常將主頁(yè)頁(yè)面分成左右兩部分，左側(cè)為網(wǎng)站的導(dǎo)航項(xiàng)目，右側(cè)主要用來(lái)顯示信息主體。若是遇到一些信息量較大的頁(yè)面設(shè)計(jì)，則會(huì)在二分欄結(jié)構(gòu)的右側(cè)分割出多個(gè)橫向分欄，以便顯示更多不同類的信息，如圖9.10所示。圖9.10網(wǎng)頁(yè)二分欄結(jié)構(gòu)設(shè)計(jì)

3．三分欄結(jié)構(gòu)設(shè)計(jì)

三分欄結(jié)構(gòu)是網(wǎng)頁(yè)設(shè)計(jì)中最常用的另一種頁(yè)面版型，由于這種結(jié)構(gòu)版式結(jié)構(gòu)清晰、分類明確，所以一般應(yīng)用在信息量大的網(wǎng)站，設(shè)計(jì)者在不同的分欄中發(fā)布不同類型的信息，讓訪問(wèn)者十分清楚地獲取這些信息，如圖9.11所示。圖9.11網(wǎng)頁(yè)三分欄結(jié)構(gòu)設(shè)計(jì)9.3.2使用表格布局網(wǎng)頁(yè)

1．創(chuàng)建表格

1)創(chuàng)建普通表格

創(chuàng)建普通表格的具體操作步驟如下：

(1)將光標(biāo)定位到需創(chuàng)建表格的位置。

(2)選擇“插入記錄”|“表格”命令或單擊“常用”插入欄中的按鈕，打開“表格”對(duì)話框。

(3)在該對(duì)話框中進(jìn)行表格行數(shù)、列數(shù)、表格寬度、邊框粗細(xì)和單元格邊距等屬性的設(shè)置，如圖9.12所示。

(4)單擊“確定”按鈕，完成表格的創(chuàng)建。圖9.12“表格”對(duì)話框

2)創(chuàng)建嵌套表格

當(dāng)單個(gè)表格不能滿足布局需求時(shí)，可以創(chuàng)建嵌套表格，其具體操作步驟如下：

(1)將光標(biāo)定位到需插入嵌套表格的單元格內(nèi)。

(2)選擇“插入記錄”|“表格”命令或在“常用”插入欄中單擊按鈕，打開“表格”對(duì)話框。

(3)在對(duì)話框中根據(jù)需要進(jìn)行行數(shù)、列數(shù)、表格寬度和邊框粗細(xì)等屬性的設(shè)置(與直接插入表格的設(shè)置相同)。

(4)單擊“確定”按鈕，完成嵌套表格的創(chuàng)建。

2.編輯表格

1)選擇整個(gè)表格

在對(duì)表格進(jìn)行編輯操作之前，需先對(duì)表格進(jìn)行選擇。選擇整個(gè)表格主要有以下幾種方法：

單擊表格的邊框。

將鼠標(biāo)光標(biāo)定位到表格的任意單元格中，單擊窗口左下角標(biāo)簽選擇器中的<table>標(biāo)簽。

將光標(biāo)定位到表格的任意單元格中，選擇菜單中的“修改”|“表格”|“選擇表格”命令。

2)選擇行或列

將鼠標(biāo)光標(biāo)移到需選擇行的左側(cè)，當(dāng)其變?yōu)椤啊毙螤钋以撔械倪吙蚓€變?yōu)榧t色時(shí)單擊鼠標(biāo)，即可選擇該行。

將鼠標(biāo)光標(biāo)移到需選擇列的上端，當(dāng)其變?yōu)椤啊毙螤钋以摿械倪吙蚓€變?yōu)榧t色時(shí)單擊鼠標(biāo)，即可選擇該列。

3)選擇單元格

將鼠標(biāo)光標(biāo)定位到所需單元格中單擊，即可選擇該單元格。

要選擇相鄰單元格，可按住鼠標(biāo)左鍵不放，從要選擇的單元格區(qū)域的對(duì)角拖動(dòng)鼠標(biāo)(如從左上角拖動(dòng)到右下角)，選擇最后一個(gè)單元格后釋放鼠標(biāo)(或單擊左上角的單元格，然后在按住shift鍵的同時(shí)將鼠標(biāo)光標(biāo)移到右下角的單元格中并單擊鼠標(biāo))。

要選擇不相鄰的單元格，按住Ctrl鍵不放，單擊要選擇的單元格即可。

4)拆分單元格

如果在不同行中需要不同的列數(shù)或在不同列中需要不同的行數(shù)，則需要對(duì)單元格進(jìn)行拆分。拆分單元格的具體操作步驟如下：

(1)將鼠標(biāo)光標(biāo)定位到要拆分的單元格中。

(2)單擊“屬性”面板左下角“單元格”欄中的“拆分單元格為行或列”按鈕，打開“拆分單元格”對(duì)話框。

(3)在“把單元格拆分”欄中選擇將其拆分為行或列，如選中“行”單選按鈕。

(4)在“行數(shù)”數(shù)值框中輸入要拆分的行數(shù)，如“2”(如果前面選中的是“列”單選按鈕，則在“列數(shù)”數(shù)值框中設(shè)置列數(shù))。

(5)單擊“確定”按鈕，完成單元格的拆分。

5)合并單元格

合并單元格的操作比較簡(jiǎn)單：選擇要合并的連續(xù)單元格，單擊“屬性”面板左下角的“合并所選單元格，使用跨度”按鈕即可將選取中的單元格合并。

6)添加行或列

根據(jù)制作需要，可添加一些行或列。

添加單行或單列。

將鼠標(biāo)光標(biāo)定位到相應(yīng)單元格中，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格”|“插入行”命令，即可在所選單元格的上方插入新的一行；若在彈出的快捷菜單中選擇“表格”|“插入列”命令，則可在所選單元格的左側(cè)插入新的一列。

添加多行或多列。

添加多行或多列的具體操作步驟如下：

(1)將光標(biāo)定位到相應(yīng)單元格中。

(2)單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格”|“插入行或列”命令，打開“插入行或列”對(duì)話框。

(3)在“插入”欄中選中“行”單選按鈕或“列”單選按鈕，在“行數(shù)”或“列數(shù)”數(shù)值框中設(shè)置插入的行數(shù)或列數(shù)，在“位置”欄中選擇插入的位置。

(4)單擊“確定”按鈕。

7)刪除行或列

將光標(biāo)插入點(diǎn)定位到相應(yīng)單元格中，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格”|“刪除行”命令，可以刪除光標(biāo)所在的行；選擇“表格”|“刪除列”命令，可以刪除光標(biāo)所在的列。

3．設(shè)置表格的屬性

選中插入的表格，在表格“屬性”面板中可以調(diào)整表格的各種屬性，如圖9.13所示。圖9.13表格“屬性”面板

1)表格名稱

在“表格Id”文本框內(nèi)可以給表格起名，該名稱只有在涉及編程時(shí)才會(huì)用到，一般都不需要指定。

2)行和列

“行”和“列”兩個(gè)文本框中顯示的是選中表格的行數(shù)和列數(shù)。表格插入之后，仍然可以通過(guò)修改這兩項(xiàng)的數(shù)值來(lái)改變行數(shù)或列數(shù)。

3)寬

“寬”文本框中顯示的是表格的寬度。設(shè)置數(shù)值前可以在旁邊的下拉列表框中設(shè)置單位，可選擇的單位有像素和百分比。

4)邊框

設(shè)置表格邊框的大小時(shí)，可以直接在“邊框”文本框中輸入邊框的寬度值。一般用來(lái)布局的表格邊框?qū)挾榷荚O(shè)為0，此時(shí)表格邊框在Dreamweaver中以虛線顯示，這樣的表格在瀏覽器中是不會(huì)顯示的。

5)填充和間距

單元格填充指單元格中的對(duì)象與表格邊框間的距離；單元格間距指單元格之間的距離。

6)對(duì)齊

表格的“對(duì)齊”屬性可以設(shè)置表格的水平對(duì)齊方式?！皩?duì)齊”屬性可以有三個(gè)值：左對(duì)齊、右對(duì)齊和居中對(duì)齊，其中最常用的是居中對(duì)齊，利用它可以將表格放置到整個(gè)頁(yè)面的中央。

7)背景顏色和背景圖像

背景顏色：?jiǎn)螕簟氨尘邦伾焙蟮纳珘K，打開拾色器，在其中選擇一種顏色后，表格的背景色就會(huì)相應(yīng)地發(fā)生改變。

背景圖像：?jiǎn)螕簟氨尘皥D像”后的“瀏覽文件”按鈕，將打開“選擇圖像源文件”對(duì)話框，當(dāng)選中圖片后，單擊“確定”按鈕，表格背景就會(huì)加上背景圖片。

8)邊框顏色

設(shè)置表格邊框顏色的方法和設(shè)置背景顏色一樣。

4．設(shè)置單元格屬性

1)設(shè)置單元格寬度和高度

(1)將光標(biāo)放在單元格中，此時(shí)單元格“屬性”面板顯示的是單元格的屬性，如圖9.14所示。

(2)在“屬性”面板中的“寬”和“高”文本框中分別輸入數(shù)值“200”和“50”，調(diào)整表格的寬和高。圖9.14單元格“屬性”面板

2)對(duì)齊設(shè)置

單元格的對(duì)齊包括水平對(duì)齊和垂直對(duì)齊兩個(gè)部分。水平對(duì)齊可以將單元格中所有的內(nèi)容居中到單元格的水平中央，水平對(duì)齊可以用“水平”下拉列表框來(lái)調(diào)整，如圖9.14所示。

但如果要讓單元格內(nèi)的對(duì)象對(duì)齊到單元格的頂部，此時(shí)用水平對(duì)齊是辦不到的，需要用“垂直”下拉列表框來(lái)調(diào)整，如圖9.14所示。

單元格的背景顏色、背景圖像的設(shè)置和表格完全一致，這里不再贅述。

9.4網(wǎng)頁(yè)文本處理

9.4.1文本對(duì)象的添加、編輯及修飾

1．添加文本

文本是網(wǎng)頁(yè)中最簡(jiǎn)單，也是最基本的部分，無(wú)論當(dāng)前的網(wǎng)頁(yè)多么絢麗多彩，占多數(shù)的還是文本。

在網(wǎng)頁(yè)中可直接輸入文本信息，也可以將其他應(yīng)用程序中的文本直接粘貼到網(wǎng)頁(yè)中，此外還可以導(dǎo)入Word文檔。在網(wǎng)頁(yè)中添加文本的具體操作步驟如下：

(1)打開素材文件09\9.4\素材\text01.html，如圖9.15所示。圖9.15打開素材文件

(2)將光標(biāo)放置在要輸入文本的位置，輸入文本，如圖9.16所示。圖9.16輸入文本

(3)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果。

輸入文本需要注意以下問(wèn)題：

換行：按快捷鍵Shift+回車(對(duì)應(yīng)代碼為<br/>)。

分段：直接按回車鍵(對(duì)應(yīng)代碼為<p>字符串</p>)。

輸入空格：第一種方法是插入不換行空格，按快捷鍵Ctrl+Shift+Space(對(duì)應(yīng)代碼為 )；第二種方法是切換到“文本”插入欄，在“字符”下拉列表中選擇“不換行空格”選項(xiàng)，就可直接輸入空格；第三種方法是選擇“編輯”|“首選參數(shù)”命令，打開“首選參數(shù)”對(duì)話框，在“分類”列表中選擇“常規(guī)”，在“編輯選項(xiàng)”中選中“允許多個(gè)連續(xù)空格”復(fù)選框，啟用連續(xù)空格功能，如圖9.17所示。圖9.17“首選參數(shù)”對(duì)話框

2．設(shè)置文本屬性

輸入文本后，可以在“屬性”面板中對(duì)文本的“大小”、“字體”、“顏色”等進(jìn)行設(shè)置。主要有以下參數(shù)。

格式：設(shè)置文字大小，段落屬性可以使選中的文字獨(dú)自成為一個(gè)段落，標(biāo)題1～6用來(lái)控制文本大小。在這幾種格式中，標(biāo)題1字體最大，標(biāo)題6字體最小。

字體：在字體下拉列表中有多種字體可供選擇。

樣式：用來(lái)控制網(wǎng)頁(yè)中的某一文本區(qū)域外觀的一組格式屬性。

大?。涸O(shè)置字體大小，大小只對(duì)選中文本起作用，而格式對(duì)整段文字起作用。

顏色：在彈出的調(diào)色板中進(jìn)行顏色選擇，也可以直接在顏色輸入欄中輸入顏色的十六制數(shù)作代碼。

粗體、斜體：使文字加粗、傾斜。

居左、居中、居右：使整段文本居左、居中、居右排列。

設(shè)置文本屬性的具體操作步驟如下：

(1)繼續(xù)打開素材文件09\9.4\素材\text01.html，如圖9.16所示。

(2)選中第1個(gè)標(biāo)題下面的文本內(nèi)容，在“屬性”面板中的“字體”下拉列表中選擇“宋體”選項(xiàng)，如圖9.18所示。圖9.18設(shè)置文本“屬性”面板

(3)在“大小”下拉列表中選擇字號(hào)為“14”，如圖9.18所示。

(4)單擊文本“顏色”按鈕，彈出一個(gè)調(diào)色板，在調(diào)色板中選擇文本顏色為“#506732”，如圖9.18所示。

(5)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果。

3．創(chuàng)建項(xiàng)目列表和編號(hào)列表

在網(wǎng)頁(yè)編輯中，有時(shí)會(huì)使用列表。包含層次關(guān)系、并列關(guān)系的標(biāo)題都可以制作成列表形式，這樣有利于訪問(wèn)者理解網(wǎng)頁(yè)內(nèi)容。

1)創(chuàng)建項(xiàng)目列表

如果項(xiàng)目列表之間是并列關(guān)系，則需要生成項(xiàng)目符號(hào)列表。創(chuàng)建項(xiàng)目列表的具體操作步驟如下：

(1)打開素材文件09\9.4\素材\text03.html，如圖9.19所示。

圖9.19打開素材文件

(2)將光標(biāo)放置在要?jiǎng)?chuàng)建項(xiàng)目列表的位置，選擇菜單中的“文本”|“項(xiàng)目列表”命令，創(chuàng)建項(xiàng)目列表，輸入文本，如圖9.20所示。

(3)將光標(biāo)插入到項(xiàng)目列表的最后一個(gè)字后面，按下Enter鍵，新建一個(gè)項(xiàng)目并輸入文本。這樣重復(fù)操作，可以添加多個(gè)項(xiàng)目，完成后如圖9.21所示。圖9.20創(chuàng)建第1項(xiàng)目圖9.21項(xiàng)目列表

2)創(chuàng)建編號(hào)列表

當(dāng)網(wǎng)頁(yè)內(nèi)的文本需要按序排列時(shí)，就應(yīng)該使用編號(hào)列表。編號(hào)列表的項(xiàng)目符號(hào)可以在阿拉伯?dāng)?shù)字、羅馬數(shù)字和英文字母中選擇。

繼續(xù)打開素材文件09\9.4\素材\text03.html，將光標(biāo)放置在要?jiǎng)?chuàng)建編號(hào)列表的位置，選擇菜單中的“文本”|“編號(hào)列表”命令，創(chuàng)建編號(hào)列表，如圖9.22所示。

提示：?jiǎn)螕簟皩傩浴泵姘逯械摹熬幪?hào)列表”按鈕，即可創(chuàng)建編號(hào)列表。圖9.22創(chuàng)建編號(hào)列表9.4.2插入其他字符對(duì)象

1．插入特殊符號(hào)

插入特殊符號(hào)具體步驟如下：

(1)打開素材文件09\9.4\素材\text04.htm，如圖9.23所示。

(2)將光標(biāo)放在“Copyright”后面，選擇菜單中的“插入”|“HTM”|“特殊字符”命令，在彈出的子菜單選擇“版權(quán)(C)”，即可插入版權(quán)符號(hào)，如圖9.24所示。圖9.23打開素材文件圖9.24插入版權(quán)符號(hào)

2．設(shè)置網(wǎng)頁(yè)屬性

一般來(lái)說(shuō)，設(shè)置文本后，默認(rèn)的網(wǎng)頁(yè)屬性并不能完全滿足用戶的需求，因此設(shè)置網(wǎng)頁(yè)屬性是必不可少的。使用“頁(yè)面屬性”對(duì)話框，可以設(shè)置網(wǎng)頁(yè)的整體效果。

(1)打開素材文件09\9.4\素材\text04.htm，如圖9.23所示。

(2)單擊“屬性面板”中“頁(yè)面屬性”按鈕，打開“頁(yè)面屬性”對(duì)話框，在左邊“分類”項(xiàng)中選擇“外觀”，在“外觀”項(xiàng)中把背景顏色的顏色值改為“#D8E6C8”，最好用顏色選擇器來(lái)選擇，如圖9.25所示。圖9.25“頁(yè)面屬性”對(duì)話框

(3)設(shè)置一下頁(yè)面邊距，左邊距為“150”，右邊距為“150”，上邊距為“10”，下邊距為“5”。

(4)在“頁(yè)面屬性”對(duì)話框中選擇“分類”中的“標(biāo)題/編碼”項(xiàng)，把標(biāo)題改為“德強(qiáng)商務(wù)學(xué)院”。

(5)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果。

3．插入水平線

在一些頁(yè)面中，經(jīng)常能看到頁(yè)面的下面有一條水平線，水平線下面一行是版權(quán)聲明等內(nèi)容。插入水平線的具體步驟如下：

(1)打開素材文件09\9.4\素材\text04.htm，如圖9.23所示。

(2)將光標(biāo)插入到編號(hào)列表最后一行下面的文本行中，選擇“插入”|“HTML”|“水平線”命令，則在頁(yè)面相應(yīng)處插入了一條水平線，也可以利用HTML工具欄來(lái)插入水平線，如圖9.26所示。圖9.26插入水平線

(3)選中水平線，在水平線“屬性”面板中將“寬”設(shè)置為“400像素”、“高”設(shè)置為“1”，如圖9.26所示。

(4)選中水平線，切換到拆分視圖，在相應(yīng)的位置輸入代碼color=“#FF0000”，如圖9.27所示，水平線顏色只有預(yù)覽時(shí)才能看見效果。

(5)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果。圖9.27更改水平線顏色

9.5網(wǎng)頁(yè)圖像添加與處理

1．JPEG(JPG)格式

JPEG是網(wǎng)頁(yè)中比較常用的格式，畫質(zhì)清晰，體積卻比GIF和BMP小得多。JPEG采用圖像壓縮格式，壓縮的比率越高，文件的體積就越小，圖像的質(zhì)量就越差。

2．GIF

GIF格式的圖像可以支持透明背景、動(dòng)態(tài)圖形和交錯(cuò)合適的圖形，支持顯示不含漸變色的圖像和單色圖像，支持黑白色。

3．PNG

PNG是一種替代GIF格式的無(wú)專利權(quán)限制的格式，它包括對(duì)索引色、灰度、真彩色圖像以及Alpha通道透明的支持。PNG文件可保留所有原始層、矢量、顏色和效果信息，并且在任何時(shí)候所有元素都是可以完全編輯的。9.5.1在網(wǎng)頁(yè)中插入圖像

1．插入背景圖像

設(shè)置背景圖像是網(wǎng)頁(yè)操作的常見步驟，采取下面的方法即可完成。

(1)打開素材文件09\9.5\素材\photo01.htm，如圖9.28所示。

(2)選擇“修改”|“頁(yè)面屬性”命令，打開“頁(yè)面屬性”對(duì)話框，如圖9.29所示。圖9.28打開素材文件圖9.29“頁(yè)面屬性”對(duì)話框

(3)單擊對(duì)話框中“背景圖像”文本框后面的“瀏覽”按鈕選擇圖像bj.gif，或者在文本框中直接輸入背景圖像文件的路徑和名稱。

(4)單擊“確定”按鈕，插入背景圖像，如圖9.30所示。

(5)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果。圖9.30顯示背景圖像

2．插入頁(yè)面圖像

在頁(yè)面中插入圖像和插入其他頁(yè)面元素沒(méi)什么區(qū)別，其操作步驟如下：

(1)打開素材文件09\9.5\素材\photo02.htm，如圖9.31所示。

(2)將光標(biāo)放在第1段文字的后面，選擇菜單中的“插入”|“圖像”命令，打開“選擇圖像源文件”對(duì)話框，在對(duì)話框中選擇圖像images02.jpg，單擊“確定”按鈕即可，如圖9.32所示。圖9.31打開素材文件圖9.32插入圖像

3．創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像

鼠標(biāo)經(jīng)過(guò)圖像就是當(dāng)鼠標(biāo)經(jīng)過(guò)圖像時(shí)，原圖像會(huì)變成另外一張圖像。創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像的具體操作步驟如下：

(1)續(xù)打開素材文件09\9.5\素材\photo02.htm，如圖9.32所示。

(2)將光標(biāo)定位到第3段文本的前面，選擇“插入記錄”|“圖像對(duì)象”|“鼠標(biāo)經(jīng)過(guò)圖像”命令，打開“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框，如圖9.33所示。圖9.33“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框

(3)在“圖像名稱”文本框中輸入圖像名稱，單擊“原始圖像”文本框后的“瀏覽”按鈕，在打開的對(duì)話框中選擇原始圖像images03并單擊“確定”按鈕，返回“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框，用同樣的方法設(shè)置鼠標(biāo)經(jīng)過(guò)圖像images04。

(4)選中“預(yù)載鼠標(biāo)經(jīng)過(guò)圖像”復(fù)選框，可避免圖像顯示延遲。在“替換文本”文本框中輸入所需內(nèi)容，單擊“按下時(shí)，前往的URL”文本框后的“瀏覽”按鈕，在打開的對(duì)話框中選擇要鏈接到的網(wǎng)頁(yè)文檔并單擊“確定”按鈕，返回“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框。

(5)單擊“確定”按鈕，插入鼠標(biāo)經(jīng)過(guò)圖像。

(6)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果，如圖9.34和圖9.35所示。圖9.34鼠標(biāo)經(jīng)過(guò)前圖像圖9.35鼠標(biāo)經(jīng)過(guò)后圖像9.5.2圖像的編輯與設(shè)置

插入圖像后，如果圖像的大小和位置不合適，還需要對(duì)圖像的屬性進(jìn)行具體的調(diào)整，如大小、位置和對(duì)齊方式等，可以通過(guò)圖像“屬性”面板設(shè)置，如圖9.36所示。圖9.36圖像“屬性”面板

1．設(shè)置圖像名稱

圖像的名稱一般用在程序代碼中。如果要為圖像指定id，只需在圖像名稱文本框中輸入名稱即可。

2．設(shè)置圖像大小

方法1：選中圖像，然后在“屬性”面板上的“寬”或“高”文本框中輸入新的圖像大小。

方法2：?jiǎn)螕粢s放的圖像，在圖像上出現(xiàn)三個(gè)控制手柄，用鼠標(biāo)拖曳控制手柄調(diào)整圖像大小。

3．設(shè)置邊框?qū)挾?/p>

選中圖像后，通過(guò)在“邊框”文本框中輸入數(shù)值來(lái)定義邊框的寬度。

4．設(shè)置對(duì)齊方式

在“屬性”面板中的“對(duì)齊”下拉列表框中共包含九種對(duì)齊方式，它們定義了圖像與附近文字之間的相對(duì)位置。

5．設(shè)置邊距

邊距分為“垂直邊距”和“水平邊距”兩部分，可以分別設(shè)定在水平或垂直方向上的若干像素內(nèi)為空白區(qū)域。

6．設(shè)置鏈接

選中圖像后，在“鏈接”文本框中可以直接輸入要鏈接對(duì)象(如網(wǎng)頁(yè)等)的路徑，或者單擊“瀏覽文件”按鈕找到要鏈接的文件。

7．裁剪圖像

Dreamweaver提供了直接在文檔中裁剪圖像的功能，不再需要在其他圖像編輯軟件中進(jìn)行操作。裁剪圖像的具體步驟如下：

(1)打開素材文件09\9.5\素材\photo03.htm，如圖9.37所示。

(2)選中要裁剪的圖像，單擊“屬性”面板中的“裁剪”按鈕。

(3)此時(shí)在圖像的周圍會(huì)出現(xiàn)調(diào)整圖像大小的控制點(diǎn)，調(diào)整控制點(diǎn)到圖像合適的范圍，如圖9.38所示。圖9.37打開素材文件圖9.38調(diào)整控制點(diǎn)范圍

(4)調(diào)整圖像范圍后，鼠標(biāo)雙擊圖像或按下Enter鍵，完成圖像裁剪。

(5)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果。

設(shè)置圖像屬性的具體步驟如下：

(1)繼續(xù)打開素材文件09\9.5\素材\photo02.htm，如圖9.32所示。

(2)選擇圖像，在“屬性”面板中的“替換”下拉列表中輸入“小貓咪”，將“對(duì)齊”設(shè)置為“右對(duì)齊”，如圖9.39所示。

(3)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果。圖9.39圖像右對(duì)齊顯示

9.6常用多媒體對(duì)象的添加

9.6.1添加Flash對(duì)象

1．了解Flash文件格式

要想在網(wǎng)頁(yè)中插入合適的Flash媒體元素，首先要了解其文件格式。Flash文件主要有以下幾種文件類型。

.swf：該類型文件是Flash電影文件，是運(yùn)行于網(wǎng)絡(luò)中的最佳文件格式，是一種壓縮格式的Flash文件。

.fla：該類文件是Flash源文件，在Flash應(yīng)用程序中創(chuàng)建并且只能在Flash應(yīng)用程序中打開。

2．插入Flash動(dòng)畫

制作網(wǎng)頁(yè)時(shí)必須考慮到網(wǎng)絡(luò)的下載速度，所以在插入Flash動(dòng)畫文件之前最好將其壓縮為?.swf格式。在網(wǎng)頁(yè)中插入Flash動(dòng)畫后，可在“屬性”面板中對(duì)其進(jìn)行大小調(diào)整和預(yù)覽等操作。具體的操作步驟如下：

(1)打開素材文件09\9.6\素材\flash.htm，如圖9.40所示。

(2)將光標(biāo)定位到需插入Flash動(dòng)畫的位置。

(3)選擇“插入記錄”|“媒體”|“Flash”命令，打開“選擇文件”對(duì)話框。

(4)在該對(duì)話框的“查找范圍”下拉列表框中選擇文件所在的位置，然后在文件列表框中選擇hr01.swf文件，如圖9.41所示。圖9.40打開素材文件圖9.41“選擇文件”對(duì)話框

(5)單擊“確定”按鈕，完成Flash動(dòng)畫的插入。

(6)選中插入的Flash動(dòng)畫，其“屬性”面板如圖9.42所示，在其中設(shè)置相關(guān)屬性，如寬和高等。

(7)在“屬性”面板中單擊“播放”按鈕，可在窗口中播放插入的Flash動(dòng)畫；這時(shí)“播放”按鈕變?yōu)椤巴Ｖ埂卑粹o，單擊該按鈕，可停止播放Flash動(dòng)畫。

(8)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果，如圖9.43所示。圖9.42flash動(dòng)畫“屬性”面板圖9.43預(yù)覽效果

3．插入Flash視頻

插入Flash視頻也是目前網(wǎng)頁(yè)制作中常用的方法。在DreamweaverCS3中，可以輕松地在網(wǎng)頁(yè)中插入Flash視頻。插入Flash視頻的具體操作步驟如下：

(1)打開素材文件09\9.6\素材\flash02.htm，如圖9.44所示。

(2)將光標(biāo)定位到需要插入Flash視頻的位置。

(3)選擇“插入記錄”|“媒體”|“Flash視頻”命令(或單擊“常用”插入欄中的媒體按鈕后的按鈕，在彈出的下拉菜單中選擇“Flash視頻”命令)，打開“插入Flash視頻”對(duì)話框。

(3)在“視頻類型”下拉列表框中選擇視頻的類型，如選擇“累進(jìn)式下載視頻”選項(xiàng)。圖9.44打開素材文件

(4)單擊“URL”文本框后面的“參數(shù)”按鈕，在打開的“選擇文件”對(duì)話框中選擇校園.flv文件，單擊“確定”按鈕，如圖9.45所示。圖9.45“選擇文件”對(duì)話框

(5)返回“插入Flash視頻”對(duì)話框，在“外觀”下拉列表框中選擇視頻播放器的外觀界面，如選擇“ClearSkin3(最小寬度：260)”選項(xiàng)。在“外觀”下拉列表框下方會(huì)顯示選擇的界面效果。

(6)單擊“檢測(cè)大小”按鈕，自動(dòng)獲取選擇的視頻文件的寬度或高度；也可以在“寬度”和“高度”文本框中輸入視頻畫面的寬度和高度。

(7)設(shè)置完成后的“插入Flash視頻”對(duì)話框如圖9.46所示。

(8)單擊“確定”按鈕，插入Flash視頻，如圖9.47所示。

(9)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果。圖9.46“插入Flash視頻”對(duì)話框圖9.47插入Flash視頻9.6.2插入其他媒體對(duì)象

1．插入背景音樂(lè)和視頻文件

在網(wǎng)頁(yè)中可以插入mid、wav和mp3等格式的音樂(lè)文件和視頻文件。

插入音樂(lè)文件和視頻文件方法一樣，下面以插入背景音樂(lè)為例介紹插入插件的步驟：

(1)打開素材文件09\9.6\素材\flash02.htm，如圖9.44所示。

(2)將光標(biāo)定位到網(wǎng)頁(yè)中的任何位置。

(3)選擇“插入記錄”|“媒體”|“插件”命令(或單擊“常用”插入欄中的媒體按鈕后的按鈕，在彈出的下拉菜單中選擇“插件”圖標(biāo))，打開“選擇文件”對(duì)話框。

(4)在打開的對(duì)話框選擇所需的音樂(lè)文件，如“春天在哪里.mp3”，如圖9.48所示。單擊“確定”按鈕即可在網(wǎng)頁(yè)中插入背景音樂(lè)。圖9.48“選擇文件”對(duì)話框

(5)完成插入后，此時(shí)的背景音樂(lè)還不能自動(dòng)播放。選中頁(yè)面中的插件圖標(biāo)，在“屬性”面板單擊“參數(shù)”按鈕，在彈出的“參數(shù)”對(duì)話框中設(shè)置三個(gè)參數(shù)：

autostart=true表示音樂(lè)在瀏覽頁(yè)面時(shí)自動(dòng)開始播放。

hidden=true表示隱藏插件圖標(biāo)。

loop=true表示背景音樂(lè)不停地循環(huán)，而loop=3則表示循環(huán)3次。

(6)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果。

2．插入JavaApplet

利用JavaApplet可以制作水中倒影效果，操作步驟如下：

(1)新建文件并將保存到09\9.6\素材\applet文件夾下，命名為flash03.html。

(2)將光標(biāo)定位到需插入JavaApplet的位置。

(3)選擇“插入記錄”|“媒體”|“Applet”命令，打開“選擇文件”對(duì)話框。

(4)在“選擇文件”對(duì)話框中選擇Lake.class。

(5)單擊“確定”按鈕，插入Applet圖標(biāo)，在“屬性”面板上修改其寬度為“300”，高度為“500”(該數(shù)值由Applet程序引用的圖像的寬度來(lái)確定)。

(6)切換到代碼視圖，在代碼視圖的編輯窗口中的<applet>和</applet>之間輸入相應(yīng)的代碼。

<appletcode=“Lake.class”width=“300”height=“500”>

<paramname=“image”value=“tuxiang.jpg”>//設(shè)置水中倒影的圖像

</applet>

(6)保存文檔，按F12鍵在瀏覽器中預(yù)覽效果，如圖9.49所示。

圖9.49水中倒影效果

9.7創(chuàng)建網(wǎng)頁(yè)鏈接

9.7.1超鏈接基礎(chǔ)

1．路徑

在創(chuàng)建超鏈接之前，首先得清楚文檔的鏈接路徑。概括起來(lái)，文檔的鏈接路徑主要有三種形式。

(1)絕對(duì)路徑。絕對(duì)路徑一般是指服務(wù)器上的文件，它是完整的文件路徑，包含其應(yīng)用協(xié)議。例如。

(2)相對(duì)路徑。相對(duì)路徑是指本地站點(diǎn)內(nèi)常用的文件路徑，如果文件都在同一個(gè)目錄中，使用相對(duì)路徑極為有效。

(3)根目錄相對(duì)路徑。使用多個(gè)服務(wù)器的大型站點(diǎn)需要用到這種文檔路徑，但是，對(duì)于一般的Web站點(diǎn)，就沒(méi)有必要使用這種文檔路徑。

2．創(chuàng)建超鏈接的方法

使用Dreamweaver創(chuàng)建超鏈接既簡(jiǎn)單又方便，只要選中要設(shè)置成超鏈接的文字或圖像，然后應(yīng)用以下幾種方法添加相應(yīng)的URL即可。

(1)使用“屬性”面板創(chuàng)建鏈接。利用“屬性”面板創(chuàng)建超鏈接的方法很簡(jiǎn)單，選中要?jiǎng)?chuàng)建超鏈接的對(duì)象，在面板中的“鏈接”文本框中輸入要鏈接的路徑，或單擊“鏈接”文本框右邊的“瀏覽文件”按鈕，如圖9.50所示，打開“選擇文件”對(duì)話框，在對(duì)話框中選擇要鏈接的對(duì)象即可。圖9.50“屬性”面板

(2)通過(guò)插入欄創(chuàng)建鏈接。這種方法只能創(chuàng)建文本鏈接。選中要?jiǎng)?chuàng)建鏈接的文本，單擊“常用”插入欄中的按鈕，打開“超級(jí)鏈接”對(duì)話框，如圖9.51所示。在對(duì)話框中的“鏈接”文本框輸入鏈接的目標(biāo)，或單擊“鏈接”文本框右邊的“瀏覽文件”按鈕，選擇相應(yīng)的鏈接目標(biāo)，單擊“確定”按鈕，即可創(chuàng)建鏈接。圖9.51“超級(jí)鏈接”對(duì)話框9.7.2創(chuàng)建超鏈接

1．外部鏈接

外部鏈接是相對(duì)于本地鏈接而言的，與本地鏈接不同的是，外部鏈接的鏈接目標(biāo)文件在遠(yuǎn)程服務(wù)器上。創(chuàng)建外部鏈接的具體步驟如下：

(1)打開素材文件09\9.7\素材\index.html，如圖9.52所示。

(2)選中文字“百