《Dreamweaver CS3網(wǎng)頁制作學(xué)習(xí)指導(dǎo)》第3章網(wǎng)頁的基本操作

本章要點(diǎn)本章導(dǎo)讀本章任務(wù)上機(jī)實(shí)訓(xùn)第3章網(wǎng)頁的基本操作本章要點(diǎn)3.1文本的輸入和編輯

文本的輸入文字的換行插入空格文本的屬性設(shè)置插入水平線3.2頁面設(shè)置“頁面屬性”對話框的打開

頁面屬性對話框的設(shè)置

本章要點(diǎn)3.3網(wǎng)頁圖像格式

GIF圖像JPG/JPEG圖像PNG圖像3.4圖像的插入3.5設(shè)置圖像屬性本章要點(diǎn)3.6插入Flash動畫插入Flash動畫文件

設(shè)置透明背景

插入Flash按鈕

3.7插入其他多媒體元素插入音頻文件

插入視頻文件3.8超鏈接的類型鏈接路徑鏈接類型本章要點(diǎn)3.9創(chuàng)建各種超鏈接文本超鏈接

圖像超鏈接錨點(diǎn)超鏈接電子郵件超鏈接空鏈接

文件下載鏈接腳本鏈接本章導(dǎo)讀本章介紹DreamWeaver建立網(wǎng)頁的基本操作。主要包括文本的輸入和編輯方法；圖像的插入和屬性設(shè)置；Flash動畫和其他多媒體元素的插入；各種超鏈接的建立方法。本章任務(wù)1.學(xué)會文本的輸入方法；2.學(xué)會文本的屬性設(shè)置；3.學(xué)會頁面屬性的設(shè)置；4.學(xué)會圖像的插入和屬性設(shè)置；5.能插入Flash動畫、音頻和視頻文件；6.了解超鏈接的各種類型；7.能建立各種類型的超鏈接。3.1文本的輸入和編輯

·直接通過鍵盤輸入文本。

·在其他應(yīng)用程序中，選擇文本，按Ctrl+C鍵復(fù)制，切換到DreamWeaver文檔窗口,選擇菜單“編輯→粘貼”命令（或按Ctrl+V鍵）復(fù)制文本。

·選擇菜單“文件→導(dǎo)入→word文檔”命令，彈出“導(dǎo)入Word文檔”對話框，選擇要導(dǎo)入的Word文，單擊“打開”按鈕，將該word文檔中的全部文本添加到文檔窗口中。1．文本的輸入2．文字的換行強(qiáng)制換行有段落換行和換行符換行兩種方式。

(1)段落換行在換行位置按Enter鍵，會自動添加段落標(biāo)記</p>和<p>，生成新的段落，并且在兩段之間會空出一行。

(2)換行符換行

·按Shift+Enter鍵。

·選擇菜單“插入記錄→HTML→特殊字符→換行符”命令。

·選擇插入欄“文本”類別中的按鈕，在下拉菜單中選擇“換行符”命令。

·在代碼視圖窗口中，輸入換行代碼標(biāo)記<br/>。3.1文本的輸入和編輯

設(shè)置文本格式，需先選中文本，出現(xiàn)如圖文本屬性面板，可以對文本進(jìn)行相應(yīng)的屬性設(shè)置。3．插入空格·按Ctrl+Shift+Space鍵?！みx擇菜單“插入記錄→HTML→特殊字符→不換行空格”命令?！みx擇插入欄“文本”類別中的按鈕，在下拉菜單中選擇“不換行空格”命令?！ぴ诖a視圖窗口中，輸入空格代碼 ?！で袚Q中文輸入法為全角狀態(tài)，按空格鍵輸入。3.1文本的輸入和編輯4．文本的屬性設(shè)置“文本屬性”面板

(1)設(shè)置文本字體設(shè)置文本字體，先選擇要設(shè)置字體的文本，然后在文本屬性面板的“字體”列表中選擇合適字體類型。DreamWeaver中默認(rèn)的是宋體字，“字體”列表默認(rèn)顯示的是英文字體類型，若設(shè)置其他中文字體，要先將中文字體類型添加到字體列表中，方法是：①單擊文本屬性面板中“字體”列表按鈕，選擇“編輯字體列表”命令，彈出“編輯字體列表”對話框。②在“可用字體”列表中選擇要添加的字體，雙擊鼠標(biāo)或單擊按鈕，將其添加到“選擇的字體”列表中。字體添加完畢后，單擊“確定”按鈕。3.1文本的輸入和編輯“編輯字體列表”對話框

(2)設(shè)置文字大小在屬性面板的“大小”列表中選擇相應(yīng)的大小級別和單位，可以更改選擇文字的大小。

(3)設(shè)置文本顏色

系統(tǒng)默認(rèn)文本顏色是黑色，要設(shè)置文本其他顏色，先選擇文本，單擊屬性面板中的，在顏色拾取器中選擇顏色，或在右邊的文本框中輸入顏色的名稱或16進(jìn)制代碼，例如：red或#FF0000。顏色拾取器3.1文本的輸入和編輯

(1)創(chuàng)建水平線

光標(biāo)定位于需要插入水平線的位置，選擇菜單“插入記錄→HTML→水平線”命令。

(2)修改水平線

①選擇水平線，窗口下方出現(xiàn)如圖3-14所示的屬性面板，通過屬性面板，可以設(shè)置水平線的一些屬性。“水平線屬性”面板5．插入水平線3.1文本的輸入和編輯②設(shè)置水平線顏色。右擊水平線，在彈出菜單中選擇“編輯標(biāo)簽”命令，打開“標(biāo)簽編輯器”對話框。選擇“瀏覽器特定的”選項，單擊，在顏色拾取中選擇合適顏色，單擊“確定”按鈕。

。3.1文本的輸入和編輯“標(biāo)簽編輯器”對話框

3.2頁面屬性·選擇菜單“修改→頁面屬性”命令?！ぐ碈trl+J鍵?！び覔粑臋n窗口空白處，在彈出的菜單中選擇“頁面屬性”命令?！螕魧傩悦姘逯邪粹o。1．“頁面屬性”對話框的打開

2．頁面屬性對話框的設(shè)置

“頁面屬性”對話框共有五種分類：“外觀”、“鏈接”、“標(biāo)題”、“標(biāo)題/編碼”、“跟蹤圖像”，其中常用的是“外觀”、“鏈接”和“標(biāo)題/編碼”三個類別。(1)外觀在“外觀”選項中可以設(shè)置頁面的默認(rèn)字體、背景顏色和頁面邊距等。3.2頁面屬性“外觀”對話框

(2)鏈接

在“鏈接”選項中可以設(shè)置鏈接的字體、顏色和下劃線樣式等，如圖所示?！版溄印睂υ捒?.2頁面屬性

(3)標(biāo)題/編碼

在“標(biāo)題/編碼”選項中可以設(shè)置網(wǎng)頁標(biāo)題和編碼類別，如圖所示。“標(biāo)題/編碼”對話框3.2頁面屬性

2．JPG/JPEG圖像

JPEG的含義是“聯(lián)合圖像專家組”，文件擴(kuò)展名為“.jpg”或“.jpeg”。JPEG格式可以支持24位真彩色，普遍應(yīng)用于存儲連續(xù)色調(diào)的圖像。JPEG格式可以支持有損或無損壓縮，是可以把文件壓縮到最小的格式。JPEG格式壓縮的主要是高頻信息，能用較大的壓縮比保存顏色豐富的圖像，適合應(yīng)用于互聯(lián)網(wǎng)，可減少圖像的傳輸時間，目前各類瀏覽器均支持JPEG這種圖像格式。3.3網(wǎng)頁圖像格式

1．GIF圖像

GIF的含義是“圖像互換格式”。GIF文件不屬于任何應(yīng)用程序，目前幾乎所有相關(guān)軟件都支持GIF圖像文件。

GIF格式圖像可以制作成GIF動畫。

GIF文件的缺點(diǎn)是最多只能使用256種顏色，適合存儲色調(diào)不連續(xù)或具有大面積單一顏色的圖像，例如按鈕、圖標(biāo)、徽標(biāo)或其它具有統(tǒng)一色彩和色調(diào)的圖像。

3．PNG圖像

PNG的含義是“可移植性網(wǎng)絡(luò)圖像”，是網(wǎng)絡(luò)接受的新型圖像文件格式。PNG能夠提供長度比GIF小30％的無損壓縮圖像文件，但與JPEG相比，壓縮量較少，它同時提供24位和48位真彩色圖像支持以及其他諸多技術(shù)性支持。由于PNG非常新，所以目前并不是所有的程序都可以用它來存儲圖像文件，Photoshop可以處理PNG圖像文件，也可以用PNG圖像文件格式存儲。文件必須具有.png文件擴(kuò)展名才能被Dreamweaver

識別為PNG文件。3.3網(wǎng)頁圖像格式3.4圖像的插入

(1)將光標(biāo)定位到窗口中要插入圖像的位置，執(zhí)行以下操作之一，打開“選擇圖像源文件”對話框。

·選擇菜單“插入記錄→圖像”命令。

·選擇插入欄“常用”類別中的“圖像”按鈕。

·按Ctrl+Alt+I鍵?！斑x擇圖像源文件“對話框

(2)在“選取文件名自”選項中選擇：

·文件系統(tǒng)：選擇一個圖像文件，一般情況應(yīng)選擇此選項。

·數(shù)據(jù)源：選擇一個動態(tài)圖像源。

(3)選擇要插入的圖像文件，單擊“確定”按鈕。3.4圖像的插入

(4)如果圖像文件不在站點(diǎn)文件夾中，會提示用戶將文件保存到站點(diǎn)文件夾中。

(5)彈出如圖所示的“圖像標(biāo)簽輔助功能屬性”對話框，在“替換文本”和“詳細(xì)描述”文本框中輸入值，然后單擊“確定”按鈕。“圖像標(biāo)簽輔助功能屬性”對話框3.5設(shè)置圖像屬性

單擊選擇圖像，窗口下方會出現(xiàn)圖像屬性面板，可以利用屬性面板設(shè)置圖像的屬性。

“圖像屬性”面板1．插入Flash動畫文件

(1)在“文檔”窗口的“設(shè)計”視圖中，將光標(biāo)定位在要插入動畫的位置，然后執(zhí)行以下操作之一：

·選擇插入欄“常用”類別中的“媒體”按鈕，在下拉菜單中選擇“Flash”命令

·選擇菜單“插入記錄→媒體→Flash”命令。

·按Ctrl+Alt+F鍵。

(2)彈出“選擇文件”對話框，選擇一個Flash文件(擴(kuò)展名為.swf)，單擊“確定”按鈕。若Flash文件不在當(dāng)前站點(diǎn)文件夾中，需將文件復(fù)制到站點(diǎn)文件夾中，完成后在“文檔”窗口中出現(xiàn)Flash占位符，大小和Flash動畫的原始尺寸相同。3.6插入Flash動畫

(1)在“文檔”窗口的“設(shè)計”視圖中，選擇插入的Flash占位符，打開Flash屬性面板。

(2)單擊編輯參數(shù)按鈕，出現(xiàn)參數(shù)對話框。2．設(shè)置透明背景“參數(shù)”對話框

3.6插入Flash動畫

(3)單擊“添加”按鈕，輸入如圖所示參數(shù)，單擊“確定”按鈕。

(1)在“文檔”窗口中，將光標(biāo)定位到要插入Flash按鈕的位置，然后執(zhí)行以下操作之一：

·選擇插入欄“常用”類別中的“媒體”按鈕，在下拉菜單中選擇“Flash按鈕”命令

·選擇菜單“插入記錄→媒體→Flash按鈕”命令。3．插入Flash按鈕

“插入Flash按鈕”對話框3.6插入Flash動畫

(2)彈出如圖所示對話框，完成相應(yīng)設(shè)置，單擊“應(yīng)用”或“確定”按鈕，將Flash按鈕插入“文檔”窗口中。

(1)在“設(shè)計”視圖中，將光標(biāo)定位到要插入音頻文件的位置，然后執(zhí)行以下操作之一：

·選擇插入欄“常用”類別中的“媒體”按鈕，在下拉菜單中選擇“插件”命令。

·選擇菜單“插入記錄→媒體→插件”命令。

(2)在選擇文件對話框中選擇要插入的音頻文件，單擊“確定”按鈕。

(3)在文檔窗口中出現(xiàn)，表示音頻文件已經(jīng)插入到當(dāng)前網(wǎng)頁中，可以單擊屬性面板中的按鈕試聽。1．插入音頻文件

3.7插入其他多媒體元素音頻播放控件

目前網(wǎng)頁可用的視頻文件類型也有多種，有Flash視頻，也有非Flash視頻，插入視頻的方法也有多種，常見的操作是：

(1)將視頻文件拷貝到站點(diǎn)文件夾。

(2)在“文檔”窗口中輸入視頻名稱，并選中。

(3)單擊屬性面板的鏈接框右側(cè)的瀏覽文件按鈕，瀏覽選擇站點(diǎn)中的視頻文件。

2．插入視頻文件

3.7插入其他多媒體元素3.8超鏈接的類型1．鏈接路徑

(1)絕對路徑

絕對路徑是指被鏈接目標(biāo)對象的完整路徑，包括服務(wù)器協(xié)議名稱、主機(jī)名稱、文件夾名稱和文件名稱，其格式為：傳輸協(xié)議：//服務(wù)器地址：通訊端口/文件位置/文件名。例：/special/00013H9J/index_eclipse.html

如果要鏈接到本站點(diǎn)以外其他站點(diǎn)中的網(wǎng)頁和對象，則必須使用絕對路徑進(jìn)行鏈接。

(2)相對路徑

相對路徑是以當(dāng)前文件所在路徑為起點(diǎn)，到被鏈接文件經(jīng)由的路徑。

·要鏈接到同一目錄下的文件，只需輸入要鏈接文件的名稱。

·要鏈接到下級目錄中的文件。需先輸入目錄名，然后加“/”，再輸入文件名。

·要鏈接到上一級目錄中文件，則先輸入“../”，再輸入文件名。

(3)根路徑

根路徑是從站點(diǎn)的根文件夾到文檔的路徑。根路徑目錄地址的書寫也很簡單，首先以一個斜杠開頭，表示站點(diǎn)的根文件夾，然后書寫文件夾名，最后書寫文件名。如果根目錄要寫盤符，就在盤符后使用“│”。如：/lx/images/ss.jpg

d│/lx/images/ss.jpg

根據(jù)鏈接使用的對象不同，可將超鏈接分為：文本鏈接、圖像鏈接、錨點(diǎn)鏈接、電子郵件鏈接、空鏈接、文件下載鏈接、腳本鏈接等。3.8超鏈接的類型2．鏈接類型1．文本超鏈接3.9創(chuàng)建各種超鏈接

(1)利用屬性面板創(chuàng)建

①在“文檔”窗口中選擇文本。②在屬性面板中執(zhí)行下列操作之一：

·單擊“鏈接”框右側(cè)的文件夾圖標(biāo)，瀏覽選擇目標(biāo)文件。

·在“鏈接”框中直接鍵入文檔的路徑和文件名。

·單擊“鏈接”框右側(cè)的指向文件圖標(biāo)，拖動鼠標(biāo)到右側(cè)文件面板中相應(yīng)的文件。③在屬性面板“目標(biāo)”列表框中選擇文檔的打開方式：

·_blank：將鏈接的文檔在一個新的瀏覽器窗口打開，原來打開的瀏覽器窗口不變。

·_parent：將鏈接的文檔在該鏈接所在框架的父級框架或父級窗口中打開。

·_self：將鏈接的文檔在當(dāng)前的瀏覽器窗口中打開。該目標(biāo)是系統(tǒng)默認(rèn)的，因此不需要指定它。

·_top：將鏈接的文檔在整個瀏覽器窗口中打開，從而刪除所有框架。(2)利用超鏈接命令創(chuàng)建①將光標(biāo)放在文檔中希望建立鏈接的位置。②通過下列操作之一，執(zhí)行超鏈接命令：·選擇菜單“插入記錄→超級鏈接”命令?！螕簟安迦搿睓诘摹俺Ｓ谩鳖悇e中的“超鏈接”按鈕。③彈出如圖3-46所示超級鏈接對話框，完成相應(yīng)設(shè)置，單擊“確定”按鈕。3.9創(chuàng)建各種超鏈接“超級鏈接”對話框網(wǎng)頁中的圖像也可以建立超鏈接，圖像超鏈接有兩種情況：一種是以整個圖像為對象建立超鏈接，這種鏈接的建立方法和文本鏈接的建立方法一樣。另一種是為圖像的不同區(qū)域分別創(chuàng)建超鏈接，稱為圖像熱點(diǎn)的鏈接，這種鏈接的建立方法是：

(1)在文檔窗口中插入圖像，并選中圖像。

(2)利用熱點(diǎn)工具劃分圖像的不同區(qū)域。

(3)利用指針熱點(diǎn)工具選擇圖像熱點(diǎn)。

(4)在熱點(diǎn)屬性面板中完成超鏈接設(shè)置

“熱點(diǎn)屬性”面板3.9創(chuàng)建各種超鏈接2．圖像超鏈接

(1)創(chuàng)建命名錨記創(chuàng)建命名錨記是指定要訪問內(nèi)容的特定位置，方法是：①將光標(biāo)定位到要插入命名錨記的位置。②執(zhí)行以下操作之一來插入命名錨記。

·選擇菜單“插入記錄→命名錨記”命令。

·選擇插入欄“常用”類別中的“命名錨記”按鈕。

·按Ctrl+Alt+A鍵。③彈出“命名錨記”對話框，在“錨記名稱”框中，鍵入錨記的名稱，單擊“確定”按鈕，在光標(biāo)處會出現(xiàn)錨點(diǎn)標(biāo)記。

3.9創(chuàng)建各種超鏈接3．錨點(diǎn)超鏈接“命名錨記”對話框

(2)鏈接到命名錨記

在“文檔”窗口中，選擇要從其創(chuàng)建鏈接的文本或圖像，然后執(zhí)行以下操作之一，將其鏈接到命名錨記。

·在屬性面板的“鏈接”框中，鍵入符號(#)和錨記名稱。

·單擊屬性面板中“鏈接”框右側(cè)的“指向文件”圖標(biāo)，然后將它拖到要鏈接到的錨記上。

·在“文檔”窗口中，按住Shift鍵不放拖動鼠標(biāo)，從所選文本或圖像拖動到要鏈接到的錨記。

3.9創(chuàng)建各種超鏈接4．電子郵件超鏈接

(1)利用屬性面板創(chuàng)建郵件鏈接

①在文檔窗口中選擇要創(chuàng)建電子郵件鏈接的文本或圖像。②在屬性面板的“鏈接”框中，鍵入mailto:電子郵件地址，如mailto:lx@163.com。

(2)利用菜單命令創(chuàng)建郵件鏈接

①在文檔窗口中將光標(biāo)定位到要創(chuàng)建郵件鏈接的位置，：

·選擇菜單“插入記錄→電子郵件鏈