實例1 幼兒園網頁首頁

實例說明 在本實例中將指導讀者制作一個幼兒園網頁的首頁，該網頁為標準的網頁形式，包含一張圖片素材，通過本實例的制作可以使讀者了解網頁設計的基礎知識點，并了解頁面屬性的相關設置。由于本實例是本書中的第一個實例，因此還為讀者介紹了本地站點及本地站點路徑的設置。

技術要點 在本實例中，為了便于管理網頁，首先為網頁設置站點及站點路徑，然后通過設置頁面屬性，編輯網頁的大小和邊距，最后導入素材圖像，完成該網頁的設置。圖1-1所示為本實例完成后的效果。

1 首先需要定義一個本地站點，運行Dreamweaver CS4，單擊起始頁面的“Dreamweaver站點”選項，打開“網頁制作的站點定義為”對話框，在該對話框中設置站點名稱和HTTP地址，由于本站點是為制作練習使用的，所以可以不設置HTTP地址，如圖1-2所示，單擊“下一步”按鈕，進入下一個面板。

2 進入“編輯文件，第2部分”面板，選擇“否，我不想使用服務器技術”單選按鈕，如圖1-3所示，單擊“下一步”按鈕，進入下一個面板。

3 進入“編輯文件，第3部分”面板，選擇“編輯我的計算機上的本地副本，完成后再上傳到服務器（推薦）”單選按鈕，并設置文件的保存路徑，如圖1-4所示，單擊“下一步”按鈕，進入下一個面板。

4 進入“共享文件”面板，在“您如何連接到遠程服務器？”下拉選項欄中選擇“無”選項，如圖1-5所示，單擊“下一步”按鈕，進入下一個面板。

5 進入“總結”面板后，單擊“完成”按鈕，如圖1-6所示，完成本地站點的設置。

6 現在“文件”面板中會顯示創建站點的信息，如圖1-7所示。

7 下面制作網頁。將本書附帶光盤中的“網頁基礎設置/實例1：制作幼兒園網頁的首頁”文件夾復制到本地站點路徑內。

8 接下來創建一個新文件，單擊起始頁面內的HTML選項，如圖1-8所示，創建一個新的HTML格式文件。

9 執行菜單欄中的“文件”/“保存”命令，打開“另存為”對話框，如圖1-9所示，設置文件的保存路徑及文件名，將文件保存在本地站點路徑中。

10 接下來需要設置網頁的大小和邊距。單擊“屬性”面板中的“頁面屬性”按鈕，打開“頁面屬性”對話框，在“分類”顯示窗中選擇“外觀（CSS）”選項，在“頁面屬性”對話框中會顯示“外觀（CSS）”編輯窗，在“外觀（CSS）”編輯窗中的“左邊距”、“右邊距”、“上邊距”和“下邊距”參數欄中均鍵入0，確定頁面邊距，如圖1-10所示，單擊“確定”按鈕，退出該對話框。

11 將本書附帶光盤中的“網頁基礎設置/實例1：幼兒園網頁首頁”文件夾復制到本地站點路徑中。

12 執行菜單欄中的“插入”/“圖像”命令，打開“選擇圖像源文件”對話框，從該對話框中選擇復制的“實例1：幼兒園網頁首頁”文件夾中的Flower.jpg文件，如圖1-11所示，單擊“確定”按鈕，退出該對話框。

13 退出“選擇圖像源文件”對話框后，會打開“圖像標簽輔助功能屬性”對話框，如圖1-12所示。使用默認設置，單擊“確定”按鈕，退出該對話框，將圖像導入到頁面中。

14 圖像導入后的效果如圖1-13所示。

15 執行菜單欄中的“文件”/“保存”命令，將該網頁保存，按下鍵盤上的F12鍵瀏覽網頁，如圖1-14所示。

16 現在本實例的制作就全部完成了，圖1-15所示為本實例完成后的效果。如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤中的“網頁基礎設置/實例1：幼兒園網頁的首頁/幼兒園網頁首頁．html”文件，該文件為本實例完成后的文件。