《網(wǎng)頁(yè)制作基礎(chǔ)教程（Dreamweaver CS3版）》第5章 樣式與行為

第5章樣式與行為樣式與行為在網(wǎng)頁(yè)的制作過(guò)程中起到非常大的作用。5.1使用樣式

樣式表是目前網(wǎng)頁(yè)制作中普遍應(yīng)用的一個(gè)技術(shù)，它通過(guò)設(shè)置代碼標(biāo)簽來(lái)實(shí)現(xiàn)對(duì)字體、顏色、填充、邊距和字間距等進(jìn)行格式化操作。5.1.1使用樣式

樣式表可以分為HTML樣式表和CSS樣式表，HTML樣式表功能比較弱，格式化文本的效率也不高，類似與Word中的“格式刷”。CSS是CascadingStyleSheets（層疊樣式表單）的簡(jiǎn)稱。對(duì)于設(shè)計(jì)者來(lái)說(shuō)它是一個(gè)非常靈活的工具，它允許設(shè)計(jì)者在HTML文檔中加入樣式，不但不必再把繁雜的樣式定義編寫在文檔結(jié)構(gòu)中，而且可以將所有關(guān)于文檔的樣式指定內(nèi)容全部脫離出來(lái)，在行內(nèi)定義，在標(biāo)題中定義，甚至作為外部樣式文件供HTML調(diào)用。5.1.2使用CSS樣式增大行間距1在Dreamweaver中打開(kāi)網(wǎng)頁(yè)“index.htm”，單擊窗口右邊“浮動(dòng)面板”中“CSS”，在打開(kāi)的面板中單擊，在彈出菜單中選擇“新建”命令，在“新建CSS規(guī)則”對(duì)話框中輸入：.hangjv，作為樣式名稱，注意前面一個(gè)小數(shù)點(diǎn)，目的是避免與其他HTML標(biāo)記混淆。選擇“定義在”為“（新建樣式表文件）”，單擊“確定”按鈕。

5.1.2使用CSS樣式增大行間距2

在彈出“hangjv的CSS樣式定義”對(duì)話框中，單擊行高右邊的，在下拉選項(xiàng)中選擇“（值）”，然后再將文本框中的“（值）”刪掉，輸入“20”，將行高值設(shè)為20像素，單擊“確定”按鈕。單擊鼠標(biāo)，使光標(biāo)出現(xiàn)在第一段文字中，單擊樣式表中的樣式“hangjv”，第一段文字的行間距變成20像素。

5.1.2使用CSS樣式去掉超鏈接下劃線

單擊窗口右邊“浮動(dòng)面板”中“設(shè)計(jì)”左邊的箭頭，在打開(kāi)的面板中單擊“CSS樣式”選項(xiàng)卡，將其打開(kāi)。在“CSS樣式”選項(xiàng)卡中，單擊“新建CSS樣式”按鈕，打開(kāi)“新建CSS樣式”對(duì)話框

。在“新建CSS樣式”對(duì)話框中，選擇“使用CSS選擇器”

。然后單擊“選擇器”右邊下拉框的箭頭，在下拉選項(xiàng)中選擇“a:link”

，單擊“確定”后，在“保存樣式表為”對(duì)話框中，輸入文件名，在“a:link的CSS樣式定義”對(duì)話框中，選擇“無(wú)”

，單擊“確定”。

在網(wǎng)頁(yè)中可以發(fā)現(xiàn)所有的超鏈接熱區(qū)文本都沒(méi)有下劃線了。5.4行為的簡(jiǎn)單應(yīng)用

所謂“行為”，就是響應(yīng)網(wǎng)頁(yè)中的某一事件而采取的一個(gè)動(dòng)作。當(dāng)把某個(gè)行為賦予網(wǎng)頁(yè)中的某個(gè)對(duì)象時(shí)，也就定義了一個(gè)動(dòng)作，以及與之相對(duì)應(yīng)的事件。事件可以是鼠標(biāo)的移動(dòng)，網(wǎng)頁(yè)的打開(kāi)與關(guān)閉，鍵盤的使用等；動(dòng)作可以是彈出問(wèn)候語(yǔ)、刷新頁(yè)面、播放聲音、檢查用戶瀏覽器等。

5.4.1行為

在網(wǎng)頁(yè)中添加行為即可將該行為附加到整個(gè)文檔中，同時(shí)網(wǎng)頁(yè)中的所有元素，包括鏈接、圖像、表格或者任何其他的HTML對(duì)象都被賦予這個(gè)行為。

一個(gè)事件可以關(guān)聯(lián)多個(gè)動(dòng)作，每個(gè)動(dòng)作的執(zhí)行由浮動(dòng)面板中的排列順序決定。改變“行為”浮動(dòng)面板中行為的順序也就改變了行為的執(zhí)行順序。

5.4.2為網(wǎng)頁(yè)添加背景音樂(lè)

打開(kāi)網(wǎng)頁(yè)文件

，單擊窗口右下角的按鈕，選中整個(gè)網(wǎng)頁(yè)。單擊窗口右邊浮動(dòng)面板中“設(shè)計(jì)”左邊的箭頭，打開(kāi)“設(shè)計(jì)”面板，在“設(shè)計(jì)”面板中，單擊“行為”，打開(kāi)“行為”選項(xiàng)卡。然后單擊“添加行為”按鈕，在彈出的菜單中選擇“播放聲音”，打開(kāi)“播放聲音”對(duì)話框。單擊“瀏覽”按鈕，找到音樂(lè)文件，單擊“確定”。保存網(wǎng)頁(yè)后，在瀏覽器中打開(kāi)網(wǎng)頁(yè)可以聽(tīng)到音樂(lè)。5.4.3使用行為彈出對(duì)話框1第一種方法：

打開(kāi)網(wǎng)頁(yè)文件

，單擊窗口右下角的按鈕，選中整個(gè)網(wǎng)頁(yè)。單擊窗口右邊浮動(dòng)面板中“設(shè)計(jì)”左邊的箭頭，打開(kāi)“設(shè)計(jì)”面板，在“設(shè)計(jì)”面板中，單擊“行為”，打開(kāi)“行為”選項(xiàng)卡。然后單擊“添加行為”按鈕，在彈出的菜單中選擇“彈出信息”

。

在“彈出信息”對(duì)話框中，輸入要顯示的信息，單擊

“確定”按鈕。完成設(shè)置。5.4.3使用行為彈出對(duì)話框2第二種方法：

采用“調(diào)用JavaScript”行為也可以帶到同樣的效果。重復(fù)上面的操作，在創(chuàng)建行為時(shí)選擇命令“調(diào)用JavaScript”

，

在“調(diào)用JavaScript”對(duì)話框中輸入：alert(“顯示內(nèi)容”)，最后單擊“確定”，完成設(shè)置。

5.4.4使用行為彈出網(wǎng)頁(yè)窗口

首先，新建一個(gè)要彈出的網(wǎng)頁(yè)文件。打開(kāi)網(wǎng)頁(yè)文件

，單擊窗口右下角的按鈕，選中整個(gè)網(wǎng)頁(yè)。單擊窗口右邊浮動(dòng)面板中“設(shè)計(jì)”左邊的箭頭，打開(kāi)“設(shè)計(jì)”面板，在“設(shè)計(jì)”面板中，單擊“