網頁設計制作步驟

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

　　② 在網頁編輯窗口，單擊“文件”—“保存”，彈出Windows保存窗口，指定目標文件夾為“我的文檔”，指定文件名稱“index.htm”;

　　③ 單擊“保存”，則index.htm文件建立完畢。

　　網頁制作步驟⑵ 添加標題圖片

　　① 單擊菜單“插入”—“圖片”—“來自文件”，彈出打開圖片對話框，選擇所要插入的圖片;

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

　　網頁制作步驟⑶ 在標題圖片下添加滾動文字

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

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

　　③ 單擊“完成”;

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

　　⑤ 單擊“確定”關閉所有對話框，添加字幕完畢。

　　網頁制作步驟⑷ 在網頁中添加四條橫線

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

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

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

　　④ 復制水平線;單擊菜單“編輯”—“復制”;重復三次：單擊菜單“編輯”→“粘貼”，繪制水平線。

　　網頁制作步驟⑸ 插入表格

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

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

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

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

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

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

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

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

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

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

　　網頁制作步驟⑹ “我的學校”制作 在第二條水平線下添加文字：“我的學校”，另起一行添加學校介紹並設置字體。

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

　　② 輸入或復制所需要的文字。光標定位到網頁文件“我的學校”下一行行首;粘貼學校說明文字。

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

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

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

　　② 插入圖片：單擊菜單“插入”—“圖片”—來自文件”，彈出打開圖片對話框;選定所要的圖片然後單擊“打開”;

　　③ 重復以上步驟

　　網頁制作步驟⑻ 添加鏈接 添加本網頁內鏈接

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

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

　　③ 選定第四條水平線下的文字“友情鏈接”;單擊菜單“插入”—“書簽”，彈出“書簽”對話框;單擊“確定”，第三個書簽設置完成。

　　④ 添加網頁內第一個鏈接。選定第一個表中的文字“我的學校”;單擊菜單“插入”—“超鏈接”，彈出的“插入超鏈接”對話框;在“鏈接到”內單擊“本文檔中的位置”;在書簽中選擇“我的學校”標簽;

　　⑤ 添加網頁內第二個和第三個鏈接，參照第一個鏈接進行設置。 添加Internet鏈接。

　　⑥ 添加第一個鏈接：選定第四條水平線下表中的文字“百度”;單擊菜單“插入”→“超鏈接”，彈出的“插入超鏈接”對話框;在“鏈接到”內單擊“原有文件或網頁”;在“地址”欄內填寫如：http://www.baidu.com。

　　⑦ 添加第二個、第三個、第四個和第五個鏈接，參照第一個鏈接進行設置。鏈接設置完成。

　　網頁制作步驟⑼ 添加背景顏色

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

　　② 單擊“格式”選項卡;

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

　　網頁制作步驟⑽ 保存網頁 單擊菜單“文件”—“保存”，保存以上修改內容。退出FrontPage 2003。

　　網頁制作步驟⑾ 使用IE查看建立的網頁

　　① 單擊桌面上IE圖標;

　　② 單擊菜單“文件”—“打開”，彈出打開對話框;選擇“我的文檔”下文件“index.htm”，

　　③ 單擊打開，即可查看浏覽效果