中職 Dreamweaver CC網(wǎng)頁(yè)設(shè)計(jì)與制作（3版）模塊2（課件）

中職DreamweaverCC網(wǎng)頁(yè)設(shè)計(jì)與制作（3版）模塊2（課件）工信版DreamweaverCC網(wǎng)頁(yè)設(shè)計(jì)與制作（3版）模塊2課件01模塊1網(wǎng)頁(yè)基礎(chǔ)知識(shí)03模塊3網(wǎng)頁(yè)布局05模塊5網(wǎng)站的測(cè)試與發(fā)布02模塊2初級(jí)應(yīng)用04模塊4高級(jí)應(yīng)用06模塊6綜合應(yīng)用任務(wù)描述認(rèn)識(shí)DreamweaverCC2018工作界面，掌握在DW中創(chuàng)建、管理站點(diǎn)的基本流程及在DW中新建和設(shè)計(jì)頁(yè)面的基本過(guò)程。任務(wù)3筑夢(mèng)青春——?jiǎng)?chuàng)建與管理本地站點(diǎn)任務(wù)解析在本任務(wù)中，需要完成以下操作：1.

學(xué)會(huì)本地站點(diǎn)的創(chuàng)建與編輯方法；2.

學(xué)會(huì)網(wǎng)頁(yè)文件的新建、保存、預(yù)覽等基本操作。站點(diǎn)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處創(chuàng)建一個(gè)站點(diǎn)是建立網(wǎng)站的第一步。站點(diǎn)可以簡(jiǎn)單地理解為管理和存放網(wǎng)站中所有網(wǎng)頁(yè)及各種素材的文件夾。通過(guò)站點(diǎn)，可以方便地對(duì)站點(diǎn)文件進(jìn)行管理并能夠減少鏈接與路徑方面的錯(cuò)誤。按地理位置劃分，站點(diǎn)分為本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。我們把在本地計(jì)算機(jī)硬盤(pán)中存放網(wǎng)頁(yè)的文件夾稱(chēng)為本地站點(diǎn)，把在Internet網(wǎng)絡(luò)服務(wù)器上存放網(wǎng)頁(yè)的文件夾稱(chēng)為遠(yuǎn)程站點(diǎn)。按站點(diǎn)的交互性劃分，站點(diǎn)分為靜態(tài)站點(diǎn)和動(dòng)態(tài)站點(diǎn)。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

DW工作界面由菜單欄、工具欄、面板組、狀態(tài)欄、屬性面板、文檔窗口等組成，如圖2-9所示。

圖2-9

Dreamweaver的開(kāi)始界面DW工作界面此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處創(chuàng)建本地站點(diǎn)在Dreamweaver中創(chuàng)建Web站點(diǎn)，通常先在本地磁盤(pán)上創(chuàng)建本地站點(diǎn)，經(jīng)過(guò)一系列的測(cè)試后，再將這些網(wǎng)頁(yè)的副本上傳到一個(gè)遠(yuǎn)程Web服務(wù)器，成為真正的站點(diǎn)供他人在互聯(lián)網(wǎng)上瀏覽。創(chuàng)建本地站點(diǎn)的步驟如下。（1）運(yùn)行Dreamweaver，選擇菜單“站點(diǎn)→新建站點(diǎn)”命令，彈出“站點(diǎn)設(shè)置對(duì)象”對(duì)話框。（2）選擇對(duì)話框中的“站點(diǎn)”選項(xiàng)，在“站點(diǎn)名稱(chēng)”文本框中輸入用戶(hù)自定的站點(diǎn)名稱(chēng)。在“本地站點(diǎn)文件夾”文本框中直接輸入站點(diǎn)文件夾的路徑，或單擊后面的“瀏覽文件夾”按鈕，在打開(kāi)的“選擇根文件夾”對(duì)話框中進(jìn)行選擇。（3）如果要對(duì)站點(diǎn)屬性進(jìn)行詳細(xì)的設(shè)置和調(diào)整，可以選擇“高級(jí)設(shè)置”選項(xiàng)，在彈出的選項(xiàng)卡中進(jìn)行設(shè)置。

圖2-30“管理站點(diǎn)”對(duì)話框此處添加你的信息此處（1）選擇菜單“站點(diǎn)→管理站點(diǎn)”命令，或在“文件”面板的下拉列表中選擇“管理站點(diǎn)”命令，如圖2-30所示。（2）選擇要編輯的站點(diǎn)，單擊“編輯”按鈕或直接雙擊站點(diǎn)名稱(chēng)，在彈出的“站點(diǎn)設(shè)置對(duì)象”對(duì)話框中可以對(duì)站點(diǎn)信息進(jìn)行修改。（3）編輯完成后，單擊“保存”按鈕，返回“管理站點(diǎn)”對(duì)話框，單擊“完成”按鈕。

編輯站點(diǎn)（1）選擇菜單“站點(diǎn)→管理站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框，在彈出的“管理站點(diǎn)”對(duì)話框中選擇要復(fù)制的站點(diǎn)，單擊“復(fù)制”按鈕，將會(huì)出現(xiàn)新站點(diǎn)。（2）用鼠標(biāo)雙擊新復(fù)制出的站點(diǎn)，在彈出的“站點(diǎn)設(shè)置對(duì)象”對(duì)話框中進(jìn)行修改設(shè)置，單擊“保存”按鈕，返回“管理站點(diǎn)”對(duì)話框，單擊“完成”按鈕。復(fù)制站點(diǎn)

選擇菜單“站點(diǎn)→管理站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框，選擇要?jiǎng)h除的站點(diǎn)，單擊“刪除”按鈕，即可將站點(diǎn)刪除。

刪除站點(diǎn)，只是刪除站點(diǎn)的定義信息，硬盤(pán)中相應(yīng)位置的文件和文件夾并不會(huì)被刪除。

刪除站點(diǎn)（1）選擇菜單“站點(diǎn)→管理站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框，選擇要導(dǎo)出的站點(diǎn)，單擊按鈕。（2）在彈出的“導(dǎo)出站點(diǎn)”對(duì)話框中，選擇站點(diǎn)定義文件的保存位置，輸入站點(diǎn)定義文件的文件名，單擊“保存”按鈕。導(dǎo)出站點(diǎn)（1）選擇菜單“站點(diǎn)→管理站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框，單擊導(dǎo)入站點(diǎn)按鈕，彈出“導(dǎo)入站點(diǎn)”對(duì)話框。（2）選擇導(dǎo)入站點(diǎn)定義文件,單擊“打開(kāi)”，選擇“管理站點(diǎn)”對(duì)話框中“完成”按鈕。

導(dǎo)入站點(diǎn)

1.創(chuàng)建文件夾（1）通過(guò)“我的電腦”或“資源管理器”直接在站點(diǎn)文件夾中進(jìn)行創(chuàng)建。（2）在“文件”面板中選擇站點(diǎn)名稱(chēng)或文件夾，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件夾”命令，輸入文件夾的名稱(chēng)，按【Enter】鍵完成。2.創(chuàng)建空白網(wǎng)頁(yè)文件

（1）啟動(dòng)DW后，窗口出現(xiàn)開(kāi)始頁(yè)面，單擊“新建”欄的“HTML”選項(xiàng)即可。（2）選擇菜單“文件→新建”命令，選擇“新建文檔”選項(xiàng)卡中的“HTML”文檔類(lèi)型，在“框架”列表中選擇“無(wú)”，文檔類(lèi)型默認(rèn)為“HTML5”，單擊“創(chuàng)建”按鈕。（3）在“文件”面板中選擇站點(diǎn)，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“新建文件”命令，輸入文件的名稱(chēng)，按【Enter】鍵完成。文檔基本操作

3.保存網(wǎng)頁(yè)文件選擇菜單“文件→保存”命令或按【Ctrl+S】組合鍵可對(duì)當(dāng)前文檔進(jìn)行保存。如果對(duì)打開(kāi)的文檔進(jìn)行了修改，但尚未保存，文件名后將自動(dòng)顯示一個(gè)“*”，如圖2-31所示，保存后“*”將消失。

文檔基本操作圖2-31修改后尚未保存的文檔添息此處4.文檔的打開(kāi)和預(yù)覽（1）打開(kāi)文檔①選擇菜單“文件→打開(kāi)”命令，彈出“打開(kāi)”對(duì)話框，選擇要打開(kāi)的文件，單擊“打開(kāi)”按鈕。②在“文件”面板中，選擇要打開(kāi)的文檔，右鍵單擊鼠標(biāo)，在彈出的快捷菜單中選擇“打開(kāi)”命令，或直接雙擊鼠標(biāo)都可以打開(kāi)該文檔。

（2）預(yù)覽文檔

①選擇菜單“文件→實(shí)時(shí)預(yù)覽→InternetExplore”或其他瀏覽器命令。②單擊狀態(tài)欄最右側(cè)的“實(shí)時(shí)預(yù)覽”按鈕，從彈出的列表中選擇“InternetExplore”或其他瀏覽器。③按【F12】鍵。文檔基本操作5．移動(dòng)和復(fù)制文件（文件夾）（1）單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“編輯→拷貝/剪切”命令，然后選擇目標(biāo)位置，從快捷菜單中選擇“編輯→粘貼”命令，可完成文件或文件夾的復(fù)制/移動(dòng)操作。

（2）用鼠標(biāo)直接將文件或文件夾拖動(dòng)到新位置，可完成文件或文件夾的移動(dòng)操作。

6.刪除文件（文件夾）（1）在“文件”面板中，選擇要?jiǎng)h除的文件或文件夾。（2）單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“編輯→刪除”命令或直接按【Del】鍵。（3）在彈出的提示對(duì)話框中單擊“是”按鈕，即可將文件或文件夾從本地站點(diǎn)文檔基本操作（1）外觀“頁(yè)面屬性”對(duì)話框的“外觀”類(lèi)別包括CSS外觀和HTML外觀，分別如圖2-34和圖2-35所示，都可以對(duì)頁(yè)面的“外觀”進(jìn)行設(shè)置。頁(yè)面字體：指定網(wǎng)頁(yè)中使用的默認(rèn)字體，以及字體樣式和粗細(xì)。大?。褐付?yè)面中使用的默認(rèn)文本大小。

文本顏色：指定文本顯示的默認(rèn)顏色。

背景顏色：設(shè)置頁(yè)面的背景顏色。背景圖像：設(shè)置頁(yè)面的背景圖像。重復(fù)：指定背景圖像在頁(yè)面的顯示方式，左邊距和右邊距：指定頁(yè)面左邊距和右邊距的大小。

上邊距和下邊距：指定頁(yè)面上邊距和下邊距的大小。頁(yè)面屬性圖2-34“外觀（CSS）”選項(xiàng)圖2-35“外觀（HTML）”選項(xiàng)（2）鏈接在“鏈接”選項(xiàng)中可以設(shè)置鏈接的屬性，如圖2-37所示。鏈接字體：指定頁(yè)面鏈接文本使用的默認(rèn)字體。

大?。褐付?yè)面鏈接文本使用的默認(rèn)文本大小。

鏈接顏色：指定頁(yè)面鏈接文本的顏色。

已訪問(wèn)鏈接：指定已訪問(wèn)鏈接文本的顏色。

變換圖像鏈接：指定當(dāng)鼠標(biāo)指針位于鏈接文本上時(shí)顯示的顏色。

活動(dòng)鏈接：指定用鼠標(biāo)指針單擊鏈接文本時(shí)顯示的顏色。

下劃線樣式：指定鏈接文本采用的下劃線樣式。列表中提供了4種樣式，如圖2-38所示，如果選擇“始終無(wú)下劃線”，則自動(dòng)取消網(wǎng)頁(yè)鏈接文本的下劃線。頁(yè)面屬性圖2-37“頁(yè)面屬性”對(duì)話框圖2-38“下劃線樣式”列表（3）標(biāo)題在“標(biāo)題”類(lèi)別中可以設(shè)置網(wǎng)頁(yè)中標(biāo)題的格式，即設(shè)置屬性面板“格式”列表框中各標(biāo)題的默認(rèn)屬性，如圖2-39所示。標(biāo)題字體：指定網(wǎng)頁(yè)中標(biāo)題使用的默認(rèn)字體?！皹?biāo)題”選項(xiàng)組：分別為“標(biāo)題1”至“標(biāo)題6”指定文本的大小和顏色。（4）標(biāo)題/編碼在“標(biāo)題/編碼”選項(xiàng)中可以設(shè)置網(wǎng)頁(yè)標(biāo)題的內(nèi)容和編碼類(lèi)別，如圖2-40所示。標(biāo)題：指定在瀏覽器窗口的標(biāo)題欄上顯示的頁(yè)面標(biāo)題。系統(tǒng)默認(rèn)的網(wǎng)頁(yè)標(biāo)題是“無(wú)標(biāo)題文檔”。編碼：指定當(dāng)前網(wǎng)頁(yè)中文本采用的編碼類(lèi)別。頁(yè)面屬性圖2-39“頁(yè)面屬性”對(duì)話框圖2-40“頁(yè)面屬性”對(duì)話框（5）跟蹤圖像“跟蹤圖像”是Dreamweaver一個(gè)非常有效的功能，它允許用戶(hù)在網(wǎng)頁(yè)中將原來(lái)的平面設(shè)計(jì)稿作為輔助的背景。這樣用戶(hù)在編輯網(wǎng)頁(yè)時(shí)即可精確的定位頁(yè)面元素。提示：（1）如果在“頁(yè)面屬性”對(duì)話框中同時(shí)設(shè)置了背景顏色和背景圖像，那么在網(wǎng)頁(yè)中優(yōu)先顯示背景圖像，沒(méi)有圖像的位置顯示背景顏色。（2）設(shè)置頁(yè)面標(biāo)題，還可以直接在頁(yè)面屬性面板的“文檔標(biāo)題”框中輸入?；蛘咴凇按a”視圖窗口中，修改標(biāo)題代碼<title>和</title>之間的內(nèi)容，如圖2-41所示。頁(yè)面屬性圖2-41代碼視圖任務(wù)描述通過(guò)“筑夢(mèng)青春——文本的設(shè)置”，學(xué)會(huì)并掌握文本對(duì)象的插入與編輯及設(shè)置文本格式。任務(wù)4筑夢(mèng)青春——

文本的設(shè)置任務(wù)解析掌握輸入文本、空格、特殊符號(hào)和實(shí)現(xiàn)文本換行的方法；學(xué)會(huì)在網(wǎng)頁(yè)中插入和編輯水平線；掌握文本HTML標(biāo)記并理解其相關(guān)屬性；學(xué)會(huì)設(shè)置文本格式。文本的設(shè)置此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本是網(wǎng)頁(yè)的主體和構(gòu)成網(wǎng)頁(yè)最基本的元素，用戶(hù)瀏覽網(wǎng)頁(yè)時(shí),獲取信息的主要方式就是通過(guò)文本，并且它信息量大、易于瀏覽和下載，需要處理好文本內(nèi)容，達(dá)到準(zhǔn)確快捷傳遞信息的目的。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本的輸入（1）添加普通文本，可以采用以下兩種方法。①直接通過(guò)鍵盤(pán)輸入文本。②在其他應(yīng)用程序中，選擇文本，按【Ctrl+C】鍵復(fù)制，在Dreamweaver的“文檔”窗口中，選擇菜單“編輯→粘貼”命令（或按【Ctrl+V】鍵）粘貼文本。（2）插入空格默認(rèn)情況下，網(wǎng)頁(yè)文檔只允許在文本或字符之間輸入一個(gè)空格，若要在文檔中輸入多個(gè)連續(xù)空格可執(zhí)行以下操作。①選擇“插入”菜單→“HTML”→“不換行空格”命令。②按【Ctrl+Shift+Space】組合鍵。③在“代碼”視圖窗口中，輸入空格代碼“

”。④切換中文輸入法為全角狀態(tài)，按空格鍵可以輸入多個(gè)空格。選擇菜單“編輯→首選項(xiàng)”命令，彈出對(duì)話框。在“分類(lèi)”列表中選擇“常規(guī)”選項(xiàng)，勾選“允許多個(gè)連續(xù)的空格”復(fù)選框，單擊“確定”按鈕。此時(shí)，可以直接按空格鍵輸入空格。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本的輸入（3）插入特殊字符選擇菜單“插入→HTML”中“字符”命令，在子菜單中選擇要插入的特殊字符。用鼠標(biāo)右鍵單擊輸入法工具條上的軟鍵盤(pán)，從打開(kāi)的列表中選擇相應(yīng)的符號(hào)組，如選擇“特殊符號(hào)”，軟鍵盤(pán)，單擊可插入特殊字符。（4）插入日期在“文檔”窗口中，將插入點(diǎn)定位到需要插入日期的位置。選擇菜單“插入→HTML→日期”命令或單擊“插入”面板“HTML”類(lèi)別中的“日期”按鈕，彈出“插入日期”對(duì)話框，設(shè)置完成后，單擊“確定”按鈕。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）段落換行若想生成新的的段落，在兩段之間出現(xiàn)一空行，可采用以下方法進(jìn)行換行。①在需要換行的位置直接按【Enter】鍵。②在代碼視圖窗口中輸入段落標(biāo)記</p>和<p>。（2）換行符換行若不想生成新的段落，兩行之間不出現(xiàn)空行，可采用以下方法進(jìn)行換行。①按【Shift+Enter】組合鍵。②選擇“插入”菜單“HTML→字符”中的“換行符”命令。③選擇“插入”面板中的“文本”類(lèi)別，在“字符”下拉菜單中選擇“換行符”。④在“代碼”視圖窗口中，輸入換行標(biāo)記<br/>。文本分段換行此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“CSS”界面中設(shè)置文本格式（1）設(shè)置字體在“文本”屬性面板中單擊“CSS”按鈕，切換到文本的CSS設(shè)置界面。從“字體”列表中選擇合適的字體類(lèi)型，這時(shí)系統(tǒng)會(huì)自動(dòng)彈出“新建CSS規(guī)則”對(duì)話框，在“選擇器名稱(chēng)”中輸入一個(gè)名字，單擊“確定”按鈕。Dreamweaver默認(rèn)的是宋體字，“字體”列表默認(rèn)顯示的是英文字體類(lèi)型。若設(shè)置其他中文字體，需先將中文字體類(lèi)型添加到字體列表中。①單擊文本屬性面板中的“字體”列表按鈕，選擇“編輯字體”列表命令，彈出“管理字體”對(duì)話框。②在“自定義字體堆棧”選項(xiàng)卡的“可用字體”列表中選擇要添加的字體，雙擊鼠標(biāo)或單擊添加按鈕，將其添加到“選擇的字體”列表中，可以同時(shí)添加多種字體。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“CSS”界面中設(shè)置文本格式（2）設(shè)置文字大小在“文本”屬性面板中單擊“CSS”按鈕，切換到文本的CSS設(shè)置界面。在“大小”列表框中選擇相應(yīng)的大小，如圖2-63所示，可以更改選擇文字的大小。①無(wú)：以默認(rèn)字號(hào)顯示。②9至36：8個(gè)字號(hào)級(jí)別，數(shù)值越大，字號(hào)越大?？梢栽凇按笮　笨蛑兄苯虞斎霐?shù)字，設(shè)置字號(hào)大小。③xx-small至larger：設(shè)置字符相對(duì)于默認(rèn)字符大小的增減量。圖2-63文字大小和單位此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“CSS”界面中設(shè)置文本格式（3）設(shè)置文本顏色在“文本”屬性面板中單擊“CSS”按鈕，切換到文本的CSS設(shè)置界面。單擊屬性面板中的按鈕，彈出顏色拾取器，如圖2-64所示?？梢赃x擇顏色，或直接在下面的文本框中輸入顏色的值，系統(tǒng)默認(rèn)文本顏色是黑色。（4）設(shè)置文本的對(duì)齊方式：?jiǎn)螕魧傩悦姘逯械膶?duì)齊按鈕。對(duì)齊按鈕包括：左對(duì)齊、居中對(duì)齊、右對(duì)齊、兩端對(duì)齊。圖2-64顏色拾取器此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“HTML”界面中設(shè)置段落格式（1）設(shè)置段落標(biāo)題的格式在“格式”下拉列表中選擇“標(biāo)題1-標(biāo)題6”即可設(shè)置段落的標(biāo)題格式。若想去除已有的格式，可將格式選項(xiàng)設(shè)為“無(wú)”（2）設(shè)置段落的縮進(jìn)方式單擊“內(nèi)縮區(qū)塊”按鈕，即可設(shè)置段落的縮進(jìn)，如果想取消，則單擊左側(cè)的“刪除內(nèi)縮區(qū)塊”按鈕。（3）創(chuàng)建項(xiàng)目列表和編號(hào)列表單擊“項(xiàng)目列表”按鈕，可對(duì)段落添加項(xiàng)目列表符號(hào)。將光標(biāo)定位到需要更改項(xiàng)目列表的文字上，單擊“列表項(xiàng)目...”按鈕，打開(kāi)“列表屬性”對(duì)話框，在“列表類(lèi)型”下拉框中選擇“項(xiàng)目列表”，在“樣式”下拉框中選擇樣式，單擊“確定”按鈕。單擊“編號(hào)列表”按鈕，可對(duì)段落添加編號(hào)列表符號(hào)。將光標(biāo)定位到需要更改編號(hào)列表的文字上，單擊“列表項(xiàng)目...”按鈕，打開(kāi)“列表屬性”對(duì)話框，在“列表類(lèi)型”下拉框中選擇“編號(hào)列表”，在“樣式”下拉框中選擇樣式，單擊“確定”按鈕。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處插入水平線（1）插入水平線將光標(biāo)定位到需要插入水平線的位置，執(zhí)行以下操作之一，即可插入水平線。①選擇菜單“插入→HTML→水平線”命令。②單擊“插入”面板“HTML”類(lèi)別中的“水平線”按鈕。（2）水平線的屬性設(shè)置選擇水平線，出現(xiàn)“水平線”屬性面板，①寬和高：指定水平線的寬度和高度，單位可以是像素，也可以是頁(yè)面大小的百分比。②對(duì)齊：指定水平線的對(duì)齊方式（默認(rèn)、左對(duì)齊、居中對(duì)齊或右對(duì)齊）。只有水平線的寬度小于瀏覽器窗口的寬度時(shí)，對(duì)齊設(shè)置才有效。③陰影：指定繪制的水平線是否具有陰影效果。（3）設(shè)置水平線的顏色

切換至代碼視圖，在水平線標(biāo)記中輸入“color="顏色值"”即可。提示：在“設(shè)計(jì)”視圖中，水平線的顏色不會(huì)改變，但可以在“實(shí)時(shí)”視圖或?yàn)g覽頁(yè)面時(shí)看到設(shè)置的顏色。若要插入豎直線，只需設(shè)置水平線的寬度為較小值，高度為較大值。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處默認(rèn)情況下，Dreamweaver使用CSS設(shè)置文本格式。使用“屬性”面板設(shè)置文本樣式時(shí)，將自動(dòng)創(chuàng)建CSS樣式，這些樣式被嵌入在當(dāng)前文檔的頭部，如圖2-69所示，對(duì)選中的文本進(jìn)行字體、大小和顏色屬性設(shè)置后，系統(tǒng)自動(dòng)打開(kāi)“新建CSS規(guī)則”對(duì)話框。使用這種方式創(chuàng)建CSS樣式，操作簡(jiǎn)單，但創(chuàng)建的樣式只能嵌入到當(dāng)前文檔中，且功能有限。

CSS樣式圖2-69設(shè)置文本樣式此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處

“CSS設(shè)計(jì)器”面板是一個(gè)比屬性面板功能更為強(qiáng)大的編輯器，它顯示為當(dāng)前文檔定義的所有CSS樣式，而不管這些樣式是嵌入在文檔中還是在外部樣式表中。

可以使用“CSS設(shè)計(jì)器”面板查看、創(chuàng)建、編輯和刪除CSS樣式，并且可以將外部樣式表附加到文檔。

執(zhí)行以下操作之一均可打開(kāi)”CSS設(shè)計(jì)器”面板，如圖2-70所示。?選擇“窗口→CSS樣式”命令。

?按Shift+F11快捷鍵。?單擊屬性面板上的“CSS設(shè)計(jì)器”按鈕。CSS設(shè)計(jì)器面板圖2-70CSS設(shè)計(jì)器面板“CSS設(shè)計(jì)器”面板包含源、@媒體、選擇器、屬性4個(gè)窗口，各窗口按鈕的含義及作用如下：（1）源窗口“添加CSS源”按鈕：?jiǎn)螕粼摪粹o，彈出的列表中包括“創(chuàng)建新的CSS文件”、“附加現(xiàn)有的CSS文件”、“在頁(yè)面中定義”3個(gè)選項(xiàng)，用來(lái)創(chuàng)建或附加CSS文件，如圖2-71所示?！皠h除CSS源”按鈕：?jiǎn)螕粼摪粹o可以將選中的CSS文件刪除。（2）@媒體窗口“添加媒體查詢(xún)”按鈕：選擇一個(gè)CSS源并單擊該按鈕，打開(kāi)“定義媒體查詢(xún)”對(duì)話框，可以定義希望使用的媒體查詢(xún)?！皠h除媒體查詢(xún)”按鈕：?jiǎn)螕粼摪粹o可以將選中的CSS文件刪除。CSS設(shè)計(jì)器面板圖2-71“添加CSS源”按鈕列表（3）選擇器窗口“添加選擇器”按鈕：選擇一個(gè)CSS源并單擊該按鈕，輸入樣式名稱(chēng)，如圖2-73所示。“刪除選擇器”按鈕：?jiǎn)螕粼摪粹o將選中的CSS樣式刪除。（4）屬性在選擇器窗口中選擇一個(gè)CSS樣式，可以在屬性窗口中進(jìn)行以下操作：“添加CSS屬性”按鈕：?jiǎn)螕粼摪粹o，定義屬性，如圖2-74所示。選擇“布局”、“文本”、“邊框”、“背景”、“更多”選項(xiàng)按鈕，設(shè)置屬性值。“刪除CSS屬性”按鈕：?jiǎn)螕粼摪粹o可將選中的屬性刪除。若勾選“顯示集”選項(xiàng)，則僅顯示已設(shè)置屬性。CSS設(shè)計(jì)器面板圖2-73“添加選擇器”窗口圖2-74“屬性”窗口添加屬性此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）打開(kāi)“CSS設(shè)計(jì)器”面板，在源窗口中單擊“添加CSS源”按鈕。（2）如果選擇的是“創(chuàng)建新的CSS文件”選項(xiàng)，則打開(kāi)“創(chuàng)建新的CSS文件”對(duì)話框，單擊右側(cè)的“瀏覽”按鈕，打開(kāi)“將樣式表文件另存為”對(duì)話框。選擇樣式表文件的保存位置，輸入樣式表文件名，單擊“保存”按鈕，在“創(chuàng)建新的CSS文件”對(duì)話框中選擇“鏈接”或“導(dǎo)入”，單擊“確定”按鈕。如果選擇“附加現(xiàn)有的CSS文件”，則打開(kāi)“使用現(xiàn)有的CSS文件”對(duì)話框，單擊“瀏覽”按鈕，彈出“選擇樣式表文件”對(duì)話框，選擇現(xiàn)有的CSS文件，單擊“確定”按鈕。在“使用現(xiàn)有的CSS文件”對(duì)話框中選擇“鏈接”或“導(dǎo)入”，單擊“確定”按鈕。如果選擇的是“在頁(yè)面中定義”選項(xiàng)，則定義的樣式、屬性嵌入在文檔中。（3）在選擇器窗口單擊“添加選擇器”按鈕，輸入樣式名稱(chēng)，在屬性窗口定義屬性。創(chuàng)建CSS樣式此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）定義CSS樣式“布局”屬性在“CSS設(shè)計(jì)器”面板的“屬性”窗口選擇“布局”選項(xiàng)，可對(duì)控制元素在頁(yè)面上放置方式、定位屬性進(jìn)行設(shè)置，如圖2-78所示。“width”和“height”：設(shè)置元素的寬度和高度?！癿in-width”和“min-height”：設(shè)置最小寬度和最小高度?！癿ax-width”和“max-height”：設(shè)置最大寬度和最大高度?！癲isplay”：設(shè)置顯示?！癰ox-sizing”：設(shè)置box-sizing。“margin”：邊距，指定一個(gè)元素的邊框與另一個(gè)元素之間的間距。取消選擇“全部相同”可設(shè)置元素各個(gè)邊的邊距?！皃adding”：填充，指定元素內(nèi)容與元素邊框之間的間距。取消選擇“全部相同”選項(xiàng)可設(shè)置元素各個(gè)邊的填充。定義CSS樣式屬性圖2-78“布局”屬性定義窗口此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）定義CSS樣式“布局”屬性“position”：設(shè)置對(duì)象的位置，包括“靜態(tài)(static)”、“絕對(duì)(absolute)”、“固定（fixed）”和“相對(duì)(relative)”。“float”：浮動(dòng)；“clear”:清除?！皁verflow-x”：設(shè)置水平溢出行為?！皁verflow-y”：設(shè)置垂直溢出行為?！皏isibility”：設(shè)置對(duì)象的可見(jiàn)性，包括“繼承(inherit)”、“可見(jiàn)(visible)”和“隱藏(hidden)”?！癦-index”：設(shè)置對(duì)象的堆積順序，包括“自動(dòng)”和“值”兩個(gè)選項(xiàng)，值越大，越靠上顯示?！皁pacity”：設(shè)置不透明度級(jí)別。定義CSS樣式屬性此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（2）定義CSS樣式“文本”屬性在“CSS設(shè)計(jì)器”面板的“屬性”窗口選擇“文本”選項(xiàng)，可對(duì)文本基本字體、陰影屬性進(jìn)行設(shè)置，如圖2-79所示?！癱olor”、“font-family”：為樣式設(shè)置文本的顏色、字體。“font-style”：指定字體樣式為正常(normal)、斜體(italic)或偏斜體(oblique)，默認(rèn)值為正常?！癴ont-variant”：設(shè)置字體變形?！癴ont-weight”：設(shè)置字體粗細(xì)?！癴ont-size”：設(shè)置文本大小。“l(fā)ine-height”：設(shè)置行高?！皌ext-align”：設(shè)置文字的對(duì)齊方式?！皌ext-decoration”：向文本添加下劃線(underline)、上劃線(overline)、刪除線(line-through)。正常文本的默認(rèn)設(shè)置是“無(wú)(none)”。定義CSS樣式屬性圖2-79“文本”屬性定義窗口此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（2）定義CSS樣式“文本”屬性,如圖2-80所示?！皌ext-indent”：文本縮進(jìn)“h-shadow”：設(shè)置水平陰影?！皏-shadow”：設(shè)置垂直陰影?！癰lur”：設(shè)置文本陰影的模糊半徑?！癱olor”：設(shè)置文本陰影的模糊顏色。“text-transform”：設(shè)置文本大寫(xiě)?！發(fā)etter-spacing”：設(shè)置字母間距?！皐ord-spacing”：設(shè)置單詞間距?！皐hite-space”：空格?！皏ertical-align”：設(shè)置垂直對(duì)齊方式。“l(fā)ist-style-position”：設(shè)置列表項(xiàng)目標(biāo)記位置?！發(fā)ist-style-image”：設(shè)置列表樣式圖像?！發(fā)ist-style-type：設(shè)置列表項(xiàng)目標(biāo)記類(lèi)型。定義CSS樣式屬性圖2-80“文本”屬性定義窗口此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（3）定義CSS樣式“邊框”屬性在“CSS設(shè)計(jì)器”面板的屬性“窗口”中，選擇“邊框”選項(xiàng)，可以定義元素周?chē)吙虻脑O(shè)置，如圖2-80所示。“border”：設(shè)置邊框的速記。“width”：設(shè)置元素邊框的粗細(xì)。“style”：設(shè)置邊框的樣式外觀。樣式的顯示方式取決于瀏覽器，Dreamweaver在“文檔”窗口中將所有樣式呈現(xiàn)為實(shí)線?！癱olor”：設(shè)置邊框的顏色。可分別設(shè)置每條邊的顏色，但顯示方式取決于瀏覽器?！癰order-radius”：設(shè)置邊框半徑的速記。如圖2-81所示?！癰order-collapse”：設(shè)置邊框折疊?！癰order-spading”：設(shè)置邊框空間。定義CSS樣式屬性圖2-80“邊框”屬性定義窗口圖2-81“邊框”半徑定義窗口此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（4）定義CSS樣式“背景”屬性在“CSS設(shè)計(jì)器”面板的屬性“窗口”中，選擇“邊框”選項(xiàng)，可定義CSS樣式的背景、向框添加陰影屬性，如圖2-82所示。

“background-color”：給選定的對(duì)象添加背景顏色?！癰ackground-image”：給選定的對(duì)象添加背景背景圖像?？梢栽凇皍rl”框中輸入文件路徑，也可以通過(guò)右側(cè)“瀏覽”按鈕添加圖像。定義CSS樣式屬性圖2-82“背景”屬性定義窗口“gradient”：設(shè)置背景圖像漸變。 “background-position”:設(shè)置圖像與選定對(duì)象的水平、垂直相對(duì)位置,水平包括右（right）、左（left）和居中(center)。垂直包括上（top）、下(bottom)和居中（center）?！癰ackground-size”：設(shè)置背景大小?！癰ackground-dip”：設(shè)置背景剪輯?！癰ackground-repeat”：設(shè)置背景圖像的重復(fù)方式，包括“重復(fù)(repeat)”、“橫向重復(fù)(repeat-x)”和“縱向重復(fù)(repeat-y)”、“不重復(fù)(norepeat)”4個(gè)選項(xiàng)?！癰ackground-origin”：設(shè)置背景起源?！癰ackground-attathment”：設(shè)置圖像滾動(dòng)模式，包括固定(fixed)在原始位置和隨內(nèi)容一起滾動(dòng)(scroll)。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處定義CSS樣式“背景”屬性向框添加陰影，如圖2-83所示，可以定義以下屬性：“h-shadow”：設(shè)置水平陰影?！皏-shadow”：設(shè)置垂直陰影?！癰lur”：設(shè)置框陰影的模糊半徑?！皊pread”：設(shè)置框陰影的擴(kuò)散半徑?！癱olor”：設(shè)置框陰影的顏色?！癷nset”：設(shè)置插圖。定義CSS樣式屬性圖2-83“背景”屬性定義窗口此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）編輯CSS樣式打開(kāi)“CSS設(shè)計(jì)器”面板。在“選擇器”窗口選擇要編輯的樣式，在“屬性”窗格中編輯該規(guī)則的屬性。（2）應(yīng)用CSS樣式CSS樣式后被定義后，可以將這些CSS樣式應(yīng)用于網(wǎng)頁(yè)中的文本、圖像等對(duì)象。（3）從選定內(nèi)容刪除類(lèi)樣式選擇要從中刪除樣式的對(duì)象或文本，在屬性面板“目標(biāo)規(guī)則”列表或“類(lèi)”列表中選擇“無(wú)”。（4）刪除CSS樣式在“CSS設(shè)計(jì)器”面板中，選中要?jiǎng)h除的樣式，按Delete鍵即可將樣式刪除。（5）重命名CSS樣式在“CSS設(shè)計(jì)器”面板中，雙擊要重命名的CSS樣式，輸入新樣式名稱(chēng)，然后按【Enter】鍵。（6）鏈接外部CSS樣式表在“CSS設(shè)計(jì)器”面板的源窗口中單擊“添加CSS源”按鈕，從列表選擇“附加現(xiàn)有的CSS文件”。管理CSS樣式任務(wù)描述通過(guò)“筑夢(mèng)青春——多媒體網(wǎng)頁(yè)設(shè)計(jì)”，學(xué)會(huì)在網(wǎng)頁(yè)中插入多媒體元素。任務(wù)5

筑夢(mèng)青春

——多媒體網(wǎng)頁(yè)設(shè)計(jì)任務(wù)解析

在本任務(wù)中，需要完成以下操作：①掌握在網(wǎng)頁(yè)中插入圖像及設(shè)置圖像屬性的方法；②掌握Dreamweaver中“鼠標(biāo)經(jīng)過(guò)圖像”功能；③掌握在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)及屬性設(shè)置的方法；④掌握給網(wǎng)頁(yè)添加聲音及屬性設(shè)置的方法。多媒體元素此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處在一張?jiān)O(shè)計(jì)精美的網(wǎng)頁(yè)，適當(dāng)運(yùn)用音頻、視頻、動(dòng)畫(huà)等常見(jiàn)媒體，會(huì)增添頁(yè)面動(dòng)感。

通過(guò)“獨(dú)具匠心——多媒體網(wǎng)頁(yè)設(shè)計(jì)”，學(xué)會(huì)在網(wǎng)頁(yè)中插入豐富多彩的Flash動(dòng)畫(huà)，利用插件的方式加入網(wǎng)頁(yè)音樂(lè)，豐富網(wǎng)頁(yè)內(nèi)容，使網(wǎng)頁(yè)的瀏覽達(dá)到聽(tīng)其聲、觀其影的效果，使訪問(wèn)者在瀏覽網(wǎng)頁(yè)時(shí)賞心悅目。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處插入圖像在網(wǎng)頁(yè)中插入圖像的方法如下：（1）將光標(biāo)定位到窗口中要插入圖像的位置，執(zhí)行以下操作之一。①選擇菜單“插入→Image”命令。

②單擊“插入”面板“HTML”類(lèi)別中的“Image”按鈕。③按【Ctrl+Alt+I】組合鍵。（2）打開(kāi)“選擇圖像源文件”對(duì)話框，選擇要插入的圖像文件，單擊“確定”按鈕。（3）如果圖像文件不在站點(diǎn)文件夾中，彈出對(duì)話框，如圖2-98所示。提示用戶(hù)將文件保存到站點(diǎn)文件夾中，選擇“是”按鈕，彈出“復(fù)制文件為”對(duì)話框，選擇站點(diǎn)文件夾，單擊“保存”按鈕。圖2-98提示復(fù)制文件對(duì)話框選擇圖像后，在窗口下方出現(xiàn)圖像屬性面板，如圖2-100所示，可以設(shè)置圖像的屬性。設(shè)置圖像屬性（1）設(shè)置圖像大小（2）設(shè)置源文件（3）鏈接設(shè)置（4）替換設(shè)置（5）編輯圖像圖2-100圖像屬性面板此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處鼠標(biāo)經(jīng)過(guò)圖像是指在瀏覽器中當(dāng)鼠標(biāo)指針移到一幅圖像上時(shí)發(fā)生變化的圖像。鼠標(biāo)經(jīng)過(guò)圖像實(shí)際上由兩幅圖像組成，即初始圖像和替換圖像。具體的操作步驟如下：（1）將光標(biāo)定位到要插入變換圖像的位置，執(zhí)行以下操作之一：選擇菜單“插入→HTML→鼠標(biāo)經(jīng)過(guò)圖像”命令。在“插入”面板的“HTML”類(lèi)別中選擇“鼠標(biāo)經(jīng)過(guò)圖像”.（2）在“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框中設(shè)置：原始圖像：選擇鼠標(biāo)經(jīng)過(guò)前顯示的圖像。鼠標(biāo)經(jīng)過(guò)圖像：選擇當(dāng)鼠標(biāo)經(jīng)過(guò)原始圖像時(shí)顯示的圖像。（3）設(shè)置完畢后，單擊“確定”按鈕插入鼠標(biāo)經(jīng)過(guò)圖像此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）要在文檔中插入FLASH動(dòng)畫(huà)文件，可以使用以下步驟完成：將光標(biāo)定位到要插入動(dòng)畫(huà)的位置，執(zhí)行以下操作之一，打開(kāi)“選擇SWF”對(duì)話框。選擇菜單“插入→HTML→FlashSWF”命令。在“插入”面板的“HTML”類(lèi)別中的“FlashSWF”。按【Ctrl+Alt+F】組合鍵。（2）設(shè)置SWF對(duì)象的屬性“文件”:用來(lái)指向Flash源文件的路徑?！把h(huán)”：連續(xù)播放SWF文件。如果沒(méi)有選擇此項(xiàng)，則只播放一次，然后停止?！白詣?dòng)播放”：加載頁(yè)面時(shí)自動(dòng)播放SWF文件?！癢mode”：設(shè)置SWF文件的Wmode參數(shù)，以避免與DHTML元素相沖突，包括不透明、透明、窗口。插入FLASH動(dòng)畫(huà)文件（SWF）此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）將光標(biāo)定位到要插入視頻的位置，執(zhí)行以下操作之一，彈出“插入FLV”對(duì)話框，如圖2-104所示。選擇“插入”菜單中的“HTML→FlashVideo”命令。在“插入”面板的“HTML”類(lèi)別中的“FlashVideo”。（2）在對(duì)話框中完成相應(yīng)設(shè)置視頻類(lèi)型：在下拉列表中選擇“累進(jìn)式下載視頻”。URL：可在文本框中輸入一個(gè)FLV文件的URL地址，或單擊“瀏覽”按鈕，從彈出的對(duì)話框中選擇FLV文件。寬度和高度：設(shè)置視頻的寬度和高度。自動(dòng)播放：如果選中該復(fù)選框，則在瀏覽網(wǎng)頁(yè)時(shí)自動(dòng)播放視頻。自動(dòng)重新播放：如果選中該復(fù)選框，則視頻將循環(huán)播放。（3）單擊“確定”按鈕，即可在文檔中插入一個(gè)FLV文件。插入FLASH視頻文件（FLV）圖2-104“插入FLV”對(duì)話框此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）要在網(wǎng)頁(yè)中插入音頻，可采用以下步驟：①將光標(biāo)定位到要插入音頻文件的位置在“插入”面板的“HTML”類(lèi)別中的“插件”。選擇菜單“插入→HTML→插件”命令。②在打開(kāi)的“選擇文件”對(duì)話框中選擇要插入的音頻文件。③可以在屬性面板中設(shè)置其屬性。（2）給網(wǎng)頁(yè)添加背景音樂(lè)

選擇音頻插件占位符，在屬性面板中單擊“參數(shù)”按鈕，打開(kāi)“參數(shù)”對(duì)話框，如圖2-106所示，在“參數(shù)”框中輸入“hidden”,并設(shè)定值為“true”（或直接在屬性面板中將其寬度和高度的值設(shè)為0），單擊加號(hào)按鈕，在新出現(xiàn)的行中輸入“autostart”，并設(shè)定值為“true”，單擊“確定”按鈕。插入音頻文件圖2-106“參數(shù)”對(duì)話框任務(wù)描述通過(guò)任務(wù)“筑夢(mèng)青春——?jiǎng)?chuàng)建網(wǎng)頁(yè)鏈接”，學(xué)會(huì)在網(wǎng)頁(yè)中插入超級(jí)鏈接的方法。任務(wù)6

筑夢(mèng)青春

——?jiǎng)?chuàng)建網(wǎng)頁(yè)鏈接任務(wù)解析

在本任務(wù)中，需要完成以下操作：掌握在網(wǎng)頁(yè)中插入超鏈接的方法；了解并能夠設(shè)置超鏈接的屬性；掌握超鏈接HTML標(biāo)記并理解相關(guān)屬性。超級(jí)鏈接此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處超鏈接是網(wǎng)頁(yè)非常重要的特征，它可以實(shí)現(xiàn)文檔間的跳轉(zhuǎn)。超鏈接由源端點(diǎn)和目標(biāo)端點(diǎn)構(gòu)成，表示出了文檔間跳轉(zhuǎn)的關(guān)系。

源端點(diǎn)是網(wǎng)頁(yè)中用來(lái)建立超鏈接的對(duì)象，可以是文本、圖片或其他網(wǎng)頁(yè)元素，目標(biāo)端點(diǎn)是單擊源端點(diǎn)后跳轉(zhuǎn)到的對(duì)象，可以是網(wǎng)頁(yè)、圖片、電子郵件地址、文件或應(yīng)用程序，也可以是頁(yè)面中的某個(gè)位置。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處每個(gè)文件都有自己的存放位置和路徑，創(chuàng)建正確的鏈接，首先要清楚一個(gè)文件到要鏈接的目標(biāo)文件之間的路徑關(guān)系，也就是鏈接路徑。（1）絕對(duì)路徑是指鏈接目標(biāo)對(duì)象的完整路徑。當(dāng)要鏈接到其他網(wǎng)站中的文件時(shí)，或者說(shuō)是建立外部鏈接時(shí)，必須使用絕對(duì)路徑，即完整的URL。（2）相對(duì)路徑是以當(dāng)前文件所在位置為起點(diǎn)，到被鏈接文件經(jīng)由的路徑。當(dāng)要鏈接到同一站點(diǎn)文件夾中的文件時(shí)，或者說(shuō)是建立內(nèi)部鏈接時(shí)，一般使用相對(duì)路徑。（3）根相對(duì)路徑根相對(duì)路徑是從站點(diǎn)的根文件夾到文檔的路徑。鏈接路徑此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處