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

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

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

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

9.1.1基本概念

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

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

2．網(wǎng)頁

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

3．HTML

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

4．Java

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

5．JavaScript

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

1．網(wǎng)站Logo

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

2．網(wǎng)站Banner

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

3．導(dǎo)航欄

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

4．文本

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

5．圖像

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

6．Flash動畫

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

1．收集資料和素材

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

2．規(guī)劃站點

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

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

3．制作網(wǎng)頁

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

4．測試站點

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

5．發(fā)布站點

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

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

6．更新和維護站點

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

9.2DreamweaverCS3的基本操作

9.2.1DreamweaverCS3工作界面

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

1．標(biāo)題欄

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

2．文檔工具欄

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

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

3．浮動面板組

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

4．屬性面板

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

5．插入欄

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

6．文檔編輯區(qū)

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

1．站點的規(guī)劃

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

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

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

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

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

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

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

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

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

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

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

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

2)管理站點

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

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

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

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

(4)如果要刪除站點，在“管理站點”對話框中單擊“刪除”按鈕。圖9.7“管理站點”對話框9.2.3文件操作

1．新建文件夾

網(wǎng)站文件夾用于存放和管理網(wǎng)絡(luò)資源，例如可以創(chuàng)建一個名為“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)建主頁文件，如圖9.8所示。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1．創(chuàng)建表格

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

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

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

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

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

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

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

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

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

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

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

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

2.編輯表格

1)選擇整個表格

在對表格進行編輯操作之前，需先對表格進行選擇。選擇整個表格主要有以下幾種方法：

單擊表格的邊框。

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

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

2)選擇行或列

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

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

3)選擇單元格

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

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

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

4)拆分單元格

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

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

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

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

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

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

5)合并單元格

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

6)添加行或列

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

添加單行或單列。

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

添加多行或多列。

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

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

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

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

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

7)刪除行或列

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

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

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

1)表格名稱

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

2)行和列

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

3)寬

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

4)邊框

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

5)填充和間距

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

6)對齊

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

7)背景顏色和背景圖像

背景顏色：單擊“背景顏色”后的色塊，打開拾色器，在其中選擇一種顏色后，表格的背景色就會相應(yīng)地發(fā)生改變。

背景圖像：單擊“背景圖像”后的“瀏覽文件”按鈕，將打開“選擇圖像源文件”對話框，當(dāng)選中圖片后，單擊“確定”按鈕，表格背景就會加上背景圖片。

8)邊框顏色

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

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

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

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

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

2)對齊設(shè)置

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

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

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

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

9.4.1文本對象的添加、編輯及修飾

1．添加文本

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

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

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

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

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

輸入文本需要注意以下問題：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖9.19打開素材文件

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

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

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

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

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

提示：單擊“屬性”面板中的“編號列表”按鈕，即可創(chuàng)建編號列表。圖9.22創(chuàng)建編號列表9.4.2插入其他字符對象

1．插入特殊符號

插入特殊符號具體步驟如下：

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

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

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

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

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

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

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

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

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

3．插入水平線

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

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

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

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

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

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

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

1．JPEG(JPG)格式

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

2．GIF

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

3．PNG

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

1．插入背景圖像

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

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

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

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

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

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

2．插入頁面圖像

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

方法2：單擊要縮放的圖像，在圖像上出現(xiàn)三個控制手柄，用鼠標(biāo)拖曳控制手柄調(diào)整圖像大小。

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

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

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

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

5．設(shè)置邊距

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

6．設(shè)置鏈接

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

7．裁剪圖像

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

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

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

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

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

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

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

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

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

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

9.6常用多媒體對象的添加

9.6.1添加Flash對象

1．了解Flash文件格式

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

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

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

2．插入Flash動畫

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

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

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

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

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

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

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

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

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

3．插入Flash視頻

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

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

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

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

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

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

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

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

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

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

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

1．插入背景音樂和視頻文件

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

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

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

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

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

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

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

autostart=true表示音樂在瀏覽頁面時自動開始播放。

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

loop=true表示背景音樂不停地循環(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”命令，打開“選擇文件”對話框。

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

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

(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)頁鏈接

9.7.1超鏈接基礎(chǔ)

1．路徑

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

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

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

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

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

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

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

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

1．外部鏈接

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

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

(2)選中文字“百