第三講讓網頁更生動美觀

一、開啟網頁

要想對乙個已經存在的網頁檔案進行編輯、處理，那麼就要先開啟網頁。

單擊常用工具欄中的「開啟」按鈕

【例】開啟上講中儲存d盤上「網頁練習」資料夾中的「迎春接福」網頁（檔名為「ycjf.htm"）。

1）單擊「開啟」按鈕，開啟如下圖所示的「開啟檔案」對話方塊。單擊「查詢範圍」右邊的下拉按鈕

2）在下拉清單中選擇（單擊）「d」

3）在「d」盤的檔案列表視窗中找到「網頁練習」資料夾，雙擊它，使查詢範圍變成「網頁練習」：

4）在「網頁練習」資料夾的檔案列表視窗中雙擊「ycjf.htm」，就可開啟這個網頁檔案。

假如您想在「我的電腦」或「資源管理器」中直接在frontpage中開啟網頁檔案（.htm檔案），不能用雙擊。因為網頁檔案的預設開啟工具是ie瀏覽器，那樣做只能在ie中開啟網頁。可以右擊檔案，然後在出現的快捷選單中單擊「編輯」，就可用frontpage開啟網頁檔案進行修改編輯。

二、插入水平線

在網頁的製作過程中，為了使網頁條理更清晰，通常在標題與正文之間插入一條水平線。通過這條水平線將它們分開，另外，由於水平線的顏色、粗細可以自由設定，所以插入水平線也可以對網頁有美化作用。

下面以開啟的「迎春接福」網頁為例說明水平線的插入及設定。

將游標移動到標題欄後面。單擊「插入」選單，在它的下一級選單（下左圖）中單擊「水平線」命令，結果如下右圖所示。

下面我們來看一下水平線的設定方法。將滑鼠指標移動到水平線上，單擊滑鼠右鍵，在下左圖所示的快捷選單中單擊「水平線屬性」，得到如下右圖所示的「水平線屬性」對話方塊。

在「水平線屬性」對話方塊中，共有4部分可以設定。各設定值的具體含義如下表：

水平線屬性設定

項目設定值含義

寬度水平線的長度，預設值佔顯示視窗的100％

高度水平線的粗細，預設值為5個畫素

對齊方式

水平線在整個視窗中的對齊方式

顏色水平線的顏色，單擊下拉箭頭，可選擇合適的顏色

現在我們將水平線設定成寬度為80％，高度為5個畫素，顏色為蘭色，居中顯示，得到如下圖所示的樣子。

三、設定網頁背景色

然後單擊灰色作為網頁的背景色，顯示結果如下：

也可以用做背景，具體方法我們在以後再介紹。

四、為網頁新增背景**

frontpage可以為網頁配上背景**，這樣就可以邊瀏覽網頁邊欣賞**。考慮到網路的速度，我們在選擇樂曲時盡量選取比較小的聲音檔案，最好用「midi」格式的檔案，這種格式的聲音檔案相對較小。

現在，我們就為「迎春接福」網頁設定上一段**「遠方的客人請你留下來」。

在設定前，要先將「遠方的客人請你留下來」**檔案（yfdkr.mid）複製到「網頁練習」資料夾中，然後在開啟了「迎春接福」網頁的frontpage用滑鼠右擊網頁，在彈出的快捷選單（左下圖）中單擊「屬性」，開啟「網頁屬性」對話方塊。

在「網頁屬性」對話方塊中，單擊「背景**」欄的「瀏覽」按鈕，開啟「背景**」對話方塊,同時還會開啟乙個的對話方塊，如下圖所示。

選中**檔案「music.mid」，單擊「確定」按鈕，返回「網頁屬性」對話方塊。可以看到，背景**的位置已經確定好了，如下圖：

儲存網頁後，開啟音箱電源。單擊「檔案」選單，在下拉列表中選擇「在瀏覽器中預覽」，在ie瀏覽器中將網頁開啟，就可以在美妙的**聲中欣賞自己的網頁了。

假如沒有聲音，可重新設定ie瀏覽器的高階選項，具體步驟是：

【練一練】

根據自己的喜好對上講建立的網頁的背景顏色，文字的字型、大小、風格進行設定。配上一段背景**，並用ie瀏覽器預覽。

第三講 讓網頁更生動美觀