實(shí)例3 游戲引導(dǎo)頁(yè)

實(shí)例說(shuō)明 在本實(shí)例中將指導(dǎo)讀者制作一個(gè)游戲引導(dǎo)頁(yè)，在網(wǎng)頁(yè)的制作過(guò)程中，需要導(dǎo)入外部圖像素材、鍵入文本，并設(shè)置超鏈接。通過(guò)本實(shí)例的制作，使讀者了解在網(wǎng)頁(yè)中設(shè)置文本及超鏈接的方法。

技術(shù)要點(diǎn) 在本實(shí)例中，首先需要將網(wǎng)頁(yè)中使用的素材導(dǎo)入到本地站點(diǎn)，然后將圖片導(dǎo)入到單元格內(nèi)，設(shè)置其屬性，最后創(chuàng)建鏈接，完成該網(wǎng)頁(yè)的制作。圖3-1所示為本實(shí)例完成后的效果。

1 將本書附帶光盤中的“網(wǎng)頁(yè)基礎(chǔ)設(shè)置/實(shí)例3：游戲引導(dǎo)頁(yè)”文件夾復(fù)制到本地站點(diǎn)路徑中。

2 運(yùn)行Dreamweaver CS4，打開(kāi)復(fù)制的“實(shí)例3：游戲引導(dǎo)頁(yè)”文件夾中的“游戲引導(dǎo)頁(yè)源文件．html”，如圖3-2所示，將該文件另存在本地站點(diǎn)路徑中，然后將其命名為“游戲引導(dǎo)頁(yè)”。

3 在第一行第一列單元格內(nèi)單擊，執(zhí)行菜單欄內(nèi)的“插入”/“圖像”命令，打開(kāi)“選擇圖像源文件”對(duì)話框，從該對(duì)話框中選擇復(fù)制的“實(shí)例3：游戲引導(dǎo)頁(yè)”文件夾中的02.jpg文件，如圖3-3所示，單擊“確定”按鈕，退出該對(duì)話框。

4 退出“選擇圖像源文件”對(duì)話框后，會(huì)打開(kāi)“圖像標(biāo)簽輔助功能屬性”對(duì)話框，如圖3-4所示。使用默認(rèn)設(shè)置，單擊“確定”按鈕，退出該對(duì)話框，將圖像導(dǎo)入到頁(yè)面中。

5 圖像導(dǎo)入后的效果如圖3-5所示。

6 使用同樣的方法，在第一行第二列單元格內(nèi)導(dǎo)入復(fù)制的“實(shí)例3：游戲引導(dǎo)頁(yè)”文件夾中的03.jpg文件，在第二行單元格內(nèi)導(dǎo)入復(fù)制的“實(shí)例3：游戲引導(dǎo)頁(yè)”文件夾中的04.jpg文件，完成的效果如圖3-6所示。

7 選擇所有的單元格，在“屬性”面板中的“間距”參數(shù)欄中鍵入4，確定單元格的間距，如圖3-7所示。

8 在屬性欄中單擊“右對(duì)齊”按鈕，然后參照?qǐng)D3-8所示來(lái)定位鼠標(biāo)。

9 編輯頁(yè)面屬性。單擊“屬性”面板中的“頁(yè)面屬性”按鈕，打開(kāi)“頁(yè)面屬性”對(duì)話框，在“分類”顯示窗中選擇“鏈接（CSS）”選項(xiàng)，在“頁(yè)面屬性”對(duì)話框中會(huì)顯示“鏈接（CSS）”編輯窗，在“鏈接（CSS）”編輯窗中將“鏈接顏色”右側(cè)顯示窗中的顏色設(shè)置為黑色，在“下畫線樣式”下拉選項(xiàng)欄中選擇“始終有下畫線”選項(xiàng)，如圖3-9所示，單擊“確定”按鈕，退出該對(duì)話框。

10 創(chuàng)建鏈接文字。在“屬性”面板中的“字體”下拉選項(xiàng)欄中選擇“默認(rèn)字體”選項(xiàng)，在“大小”參數(shù)欄中鍵入36，在“大小”參數(shù)欄右側(cè)的下拉選項(xiàng)欄中選擇px選項(xiàng)，設(shè)置字體單位，如圖3-10所示。

11 在頁(yè)面內(nèi)鍵入“返回”文本，如圖3-11所示。

12 在頁(yè)面內(nèi)選擇新創(chuàng)建的文本，右擊文本，在彈出的快捷菜單中選擇“創(chuàng)建鏈接”選項(xiàng)，如圖3-12所示。

13 選擇“創(chuàng)建鏈接”選項(xiàng)后，會(huì)打開(kāi)“選擇文件”對(duì)話框，如圖3-13所示。從該對(duì)話框中選擇復(fù)制的“實(shí)例3：游戲引導(dǎo)頁(yè)”文件夾中的01.jpg文件，單擊“確定”按鈕，退出該對(duì)話框。

14 執(zhí)行菜單欄內(nèi)的“文件”/“保存”命令，將該網(wǎng)頁(yè)保存，按下鍵盤上的F12鍵瀏覽網(wǎng)頁(yè)，如圖3-14所示。

15 現(xiàn)在本實(shí)例的制作就全部完成了，圖3-15所示為本實(shí)例完成后的效果。如果讀者在制作過(guò)程中遇到了什么問(wèn)題，可以打開(kāi)本書附帶光盤中的“網(wǎng)頁(yè)基礎(chǔ)設(shè)置/實(shí)例3：游戲引導(dǎo)頁(yè)/游戲引導(dǎo)頁(yè)．html”文件，該文件為本實(shí)例完成后的文件。