網頁設計的製作步驟

① 單擊“開始”—“所有程式”—“Microsoft Office”→“Microsoft Office FrontPage 2003”，啟動FrontPage 2003，進入網頁編輯視窗;

② 在網頁編輯視窗，單擊“檔案”—“儲存”，彈出Windows儲存視窗，指定目標資料夾為“我的文件”，指定檔名稱“”;

③ 單擊“儲存”，則檔案建立完畢。

　　網頁製作步驟⑵ 新增標題圖片

① 單擊選單“插入”—“圖片”—“來自檔案”，彈出開啟圖片對話方塊，選擇所要插入的圖片;

② 單擊“插入”，標題圖片插入完成。

　　網頁製作步驟⑶ 在標題圖片下新增滾動文字

① 單擊回車鍵，使游標位於標題圖片下最左端;

② 單擊“插入”—“Web元件”，在“元件型別”欄中選擇“動態效果”，在“選擇一種效果”欄中選擇“字幕”;

③ 單擊“完成”;

④ 在文字欄內輸入比如“你好!歡迎訪問我的個人網頁……”，單擊“樣式”—“格式”，彈出格式選單。單擊“字型”，彈出“字型”對話方塊。在“字型”欄內選擇文字字型，在“大小”欄內改大小，在“顏色欄”內選擇顏色，單擊“字元間距”選項卡，顯示字元間距欄，在“間距”欄內選擇間距，在“間距大小”欄內填入大小;

⑤ 單擊“確定”關閉所有對話方塊，新增字幕完畢。

　　網頁製作步驟⑷ 在網頁中新增四條橫線

① 游標移到字幕末尾，敲擊鍵盤上回車鍵，使游標位於字幕的下一行左側;

② 單擊“插入”—“水平線”，插入一條水平線;雙擊該水平線，彈出“水平線屬性”對話方塊;在“顏色”欄內選擇顏色，在“高度”欄內填寫高度;單擊“確定”，退出“水平線屬性”對話方塊;

③ 單擊選單“格式”—“邊框和底紋”，彈出“邊框和底紋”對話方塊;在“樣式”欄內選擇樣式，然後單擊“確定”，退出“邊框和底紋”對話方塊。

④ 複製水平線;單擊選單“編輯”—“複製”;重複三次：單擊選單“編輯”→“貼上”，繪製水平線。

　　網頁製作步驟⑸ 插入表格

① 在第一條水平線下新增一個表格，邊框粗細為0，編輯表格文字的文字和大小，居中;分別填寫你自己需要的內容;

② 移動游標至第二條水平線首;敲擊回車鍵，使第一條水平線與第二條水平線之間留出空行;

③ 插入表格：單擊選單“表格”—“插入”—“表格”，彈出“插入表格”對話方塊;在“大小”欄內分別填寫：行數和列數;在“邊框”欄的“粗細”欄中輸入0;在“佈局”欄內的“對齊方式”欄中選擇方式;

④ 表格字型設定：選定表格;在格式工具欄內選定字型，字號

⑤ 填寫文字：分別選定表格單元格，依次填寫：你所需要的內容。

⑥ 在第四條水平線下新增一個的.表格，表格文字居中;並在表格中分別填寫內容。

⑦ 移動游標至第四條線末尾，敲擊回車鍵;

⑧ 插入表格：單擊選單“表格”—“插入”—“表格”，彈出“插入表格”對話方塊;在“大小”欄內分別填寫：行數列數;在“邊框”欄的“粗細”欄中輸入0;在“佈局”欄內的“對齊方式”欄中選擇方式;

⑨ 填寫文字：分別選定表格單元格，依次填寫。

⑩ 新增文字：移動游標至第四條線末尾;敲擊回車鍵，留出空行;輸入文字。

　　網頁製作步驟⑹ “我的學校”製作 在第二條水平線下新增文字：“我的學校”，另起一行新增學校介紹並設定字型。

① 移動游標至第三條線首;敲擊回車鍵，使第二條線與第三條線之間留出空行;輸入文字“我的學校”，回車另起一行;

② 輸入或複製所需要的文字。游標定位到網頁檔案“我的學校”下一行行首;貼上學校說明文字。

③ 調整文字對齊方式;調整文字字型、字號。

　　網頁製作步驟⑺ “所有城市”製作 在第三條水平線下新增文字：“所有城市”，另起一行，新增兩張圖片。

① 移動游標至第四條線首;敲擊回車鍵，使第三條線與第四條線之間留出空行;輸入文字“所在城市”，回車另起一行;

② 插入圖片：單擊選單“插入”—“圖片”—來自檔案”，彈出開啟圖片對話方塊;選定所要的圖片然後單擊“開啟”;

③ 重複以上步驟

　　網頁製作步驟⑻ 新增連結 新增本網頁內連結

① 指定書籤：選定第一條水平線下的文字“我的學校”;單擊選單“插入”—“書籤”，彈出“書籤”對話方塊;單擊“確定”，第一個書籤設定完成。

② 選定第二條水平線下的文字“所在城市”;單擊選單“插入”—“書籤”，彈出“書籤”對話方塊;單擊“確定”，第二個書籤設定完成。

③ 選定第四條水平線下的文字“友情連結”;單擊選單“插入”—“書籤”，彈出“書籤”對話方塊;單擊“確定”，第三個書籤設定完成。

④ 新增網頁內第一個連結。選定第一個表中的文字“我的學校”;單擊選單“插入”—“超連結”，彈出的“插入超連結”對話方塊;在“連結到”內單擊“本文件中的位置”;在書籤中選擇“我的學校”標籤;

⑤ 新增網頁內第二個和第三個連結，參照第一個連結進行設定。 新增Internet連結。

⑥ 新增第一個連結：選定第四條水平線下表中的文字“百度”;單擊選單“插入”→“超連結”，彈出的“插入超連結”對話方塊;在“連結到”內單擊“原有檔案或網頁”;在“地址”欄內填寫如：。

⑦ 新增第二個、第三個、第四個和第五個連結，參照第一個連結進行設定。連結設定完成。

　　網頁製作步驟⑼ 新增背景顏色

① 單擊選單“格式”—“背景”，彈出“網頁屬性”對話方塊;

② 單擊“格式”選項卡;

③ 單擊“顏色一背景”—“其他顏色”，開啟Windows顏色對話方塊;選擇淡黃色後單擊“確定”，背景顏色插入完畢。

　　網頁製作步驟⑽ 儲存網頁 單擊選單“檔案”—“儲存”，儲存以上修改內容。退出FrontPage 2003。

　　網頁製作步驟⑾ 使用IE檢視建立的網頁

① 單擊桌面上IE圖示;

② 單擊選單“檔案”—“開啟”，彈出開啟對話方塊;選擇“我的文件”下檔案“”，

③ 單擊開啟，即可檢視瀏覽效果