Chapter 4 架設與發佈個人網站 個人網站的架設，不一定要非常複雜，重點是適合個人需要，所以在架設網站前，內容、素材的蒐集與網站規劃都非常重要。以下就是幾個架設HomePage的原則和注意事項，提供大家參考﹕ 確定網站主題，例如是音樂網、攝影網，或是其他主題 等等。 整理好網站的內容，例如網站簡介、其他文字資料等。 蒐集設計網站的素材。 規劃好網站的架構。 大綱 上一章 下一章 開始 離開

目錄 4-1 建立個人網站 4-2 編輯導覽結構 4-3 維護網站連結 4-4 用FrontPage發佈網站 4-1 建立個人網站 4-2 編輯導覽結構 4-3 維護網站連結 4-4 用FrontPage發佈網站 4-5 用Cute FTP發佈網站 4-6 課後習題【 實作題 】 大綱 回首頁 離開

4-1 建立個人網站 建立網站是網頁設計師必備的技術，即使您從沒有建立網站的經驗，亦可利用FrontPage輕鬆建立專屬的個人網站，因為FrontPage專門提供建立個人網站的範本，您只需完成幾個操作，即可建立一個完整的個人網站了。 成果展示： 本例將透過FrontPage提供的網站範本，建立一個個人網站，然後針對需要刪除與新增網頁，使網站更加完整。 練習檔案：無。 成果檔案：..\Example\成果檔\Ex04\4-1 建立的個人網站 下一節 下一頁 回目錄

4-1 建立個人網站 步驟一、開啟「網站範本」視窗： 下一節 上一頁 下一頁 回目錄 執行「檔案─開新檔案」功能 4-1 建立個人網站 步驟一、開啟「網站範本」視窗： 執行「檔案─開新檔案」功能 單擊「其他網站範本」連結文字 下一節 上一頁 下一頁 回目錄

4-1 建立個人網站 步驟二、建立個人網站： 利用FrontPage提供的「個人網站」範本，可以建立一個包括 首頁、興趣、相片等頁面的網站。 4-1 建立個人網站 步驟二、建立個人網站： 利用FrontPage提供的「個人網站」範本，可以建立一個包括 首頁、興趣、相片等頁面的網站。 切換到「一般」籤頁 選取「個人網站」範本 指定網站的位置 單擊「確定」按鈕 補充說明：設定網站的位置 在建立個人網站前，請先在電腦上建立一個空白資料夾，作為網站的儲存位置。如果沒有指定其他資料夾，軟體會預設將網站儲存在「C:\Documents and Settings\使用者名稱\My Documents\我的網站」位置。 下一節 上一頁 下一頁 回目錄

4-1 建立個人網站 步驟三、刪除網頁： 在預設的情況下，個人網站會自動建立「about.htm、favorite.htm、feedback.htm、index.htm、interest.htm、photo.htm」網頁，您可依照實際需要，刪除或新增網頁檔案。 選取需要刪除的網頁 單擊Delete鍵，刪除網頁 單擊「是」按鈕 下一節 上一頁 下一頁 回目錄

4-1 建立個人網站 步驟四、新增空白網頁： 下一節 上一頁 下一頁 回目錄 在空白處單擊右鍵，執行「新增─空白網頁」功能 輸入檔案名稱 4-1 建立個人網站 步驟四、新增空白網頁： 在空白處單擊右鍵，執行「新增─空白網頁」功能 輸入檔案名稱 按下Enter鍵，確定新增網頁 下一節 上一頁 下一頁 回目錄

4-1 建立個人網站 步驟五、變更網頁標題： 下一節 上一頁 下一頁 回目錄 雙擊網頁標題處，切換到編輯狀態 輸入網頁標題 4-1 建立個人網站 步驟五、變更網頁標題： 雙擊網頁標題處，切換到編輯狀態 輸入網頁標題 按下Enter鍵，確定變更網頁標題 下一節 上一頁 下一頁 回目錄

4-1 建立個人網站 步驟六、新增其他網頁檔： 依照步驟四與步驟五的方法，分別新增「我的作品、家庭相簿、個人相簿、個人履歷表、反應結果、旅遊相簿」等標題的網頁檔案。 新增網頁並變更標題後的結果 網站檔案的增刪，是依照實際需要來處理，所以就因應了本書第一章所說：建立網站前，最好先規劃好網站，如此後續的處理就變得方便多了。 下一節 上一頁 回目錄

4-2 編輯導覽結構 使用範本建立個人網站後，網站預設已經建立導覽結構，但經過刪除與新增網頁處理後，原來的導覽結構已經產生變化，所以必須對其進行適當編輯，建構一個正確的網站導覽圖。 成果展示： 下例利用「資料夾清單」窗格，在新增的網頁與首頁、網頁與網頁之間建立導覽結構，並透過導覽圖變更網頁標題，使導覽圖符合規劃好的網站設計。 練習檔案：..\Example\練習檔\Ex04\4-2 成果檔案：..\Example\成果檔\Ex04\4-2_Ok 編輯後的網站導覽圖 上一節 下一節 下一頁 回目錄

4-2 編輯導覽結構 步驟一、開啟「資料夾清單」窗格： 步驟二、建立與首頁導覽連接： 4-2 編輯導覽結構 步驟一、開啟「資料夾清單」窗格： 步驟二、建立與首頁導覽連接： 透過「資料夾清單」窗格，將網頁拖曳到導覽區，此時會產生一條連接線，當此線連接首頁，即可將網頁與首頁建立導覽連接關係。 導覽連接線 單擊「導覽」按鈕 執行「檢視─資料夾清單」功能 拖曳網頁至導覽區，建立與首頁的導覽連接 上一節 下一節 上一頁 下一頁 回目錄

4-2 編輯導覽結構 步驟三、建立第二層導覽連接： 步驟四、建立其他導覽連接： 依照步驟三的方法，建立其他導覽連接。 上一節 下一節 上一頁 4-2 編輯導覽結構 步驟三、建立第二層導覽連接： 步驟四、建立其他導覽連接： 依照步驟三的方法，建立其他導覽連接。 拖曳網頁到導覽區，建立與第二層網頁的導覽連接 .建立其他導覽連接後的結果 上一節 下一節 上一頁 下一頁 回目錄

4-2 編輯導覽結構 步驟五、調整導覽連接： 如果初次建立的導覽不適合，可以對其進行適當的調整。 上一節 下一節 上一頁 下一頁 回目錄 4-2 編輯導覽結構 步驟五、調整導覽連接： 如果初次建立的導覽不適合，可以對其進行適當的調整。 拖曳調整導覽連接的位置 上一節 下一節 上一頁 下一頁 回目錄

4-2 編輯導覽結構 步驟六、變更網頁標題： 上一節 下一節 上一頁 下一頁 回目錄 雙擊網頁標題文字，切換成編輯狀態 輸入網頁標題文字 4-2 編輯導覽結構 步驟六、變更網頁標題： 雙擊網頁標題文字，切換成編輯狀態 輸入網頁標題文字 按下Enter鍵，確定變更網頁標題 變更另一標題後的結果 上一節 下一節 上一頁 下一頁 回目錄

4-2 編輯導覽結構 小技巧：變更導覽圖方向 在預設的狀態下，網站導覽圖以橫向顯示，您可透過「 直向/橫向」按鈕，變更導覽圖的顯示方向。另外，網站的首頁一定要處於導覽圖的首層。 單擊「 直向/橫向」按鈕 導覽圖直向的檢視效果 首頁一定要處於導覽圖首層 建立網站並設定導覽圖後，即可進行網頁設計工作。本書從下章起即會介紹網站中各個網頁的設計技巧。不過在未進行網頁設計前，本章先行介紹維護與發佈網站的方法，您可使用書中提供的網站範例，嘗試一下發佈網站的樂趣。 上一節 下一節 上一頁 回目錄

4-3 維護網站連結 在整個網站的設計過程中，難免出現一些檔案變更、素材移動等問題。當出現這種情形後，網頁的連結就會受到影響，導致出現中斷的連結。為了避免此種問題發生，就需要維護網站的品質，在發佈網站前必須先檢查連結，如果出現中斷連結則需要修正。 成果展示： 下例透過「報告」視窗，檢查中斷的連結，並重新連結新的網頁，以修正網站的連結錯誤。 練習檔案：..\Example\練習檔\Ex04\4-3 成果檔案：..\Example\成果檔\Ex04\4-3_Ok 維護網站連結後，中斷連結數為0 上一節 下一節 下一頁 回目錄

4-3 維護網站連結 步驟一、檢查中斷的連結： 步驟二、編輯超連結： 上一節 下一節 上一頁 下一頁 回目錄 中斷的超連結 4-3 維護網站連結 步驟一、檢查中斷的連結： 步驟二、編輯超連結： 中斷的超連結 報告顯示有一個中斷連結 1.在中斷連結上單擊右鍵，執行「編輯超連結」功能 單擊「報告」按鈕 單擊「中斷的超連結」連結文字 上一節 下一節 上一頁 下一頁 回目錄

4-3 維護網站連結 步驟三、修正超連結： 維護超連結後，軟體會自動再檢查一次，即可發現連結已經成功。 上一節 下一節 上一頁 回目錄 4-3 維護網站連結 步驟三、修正超連結： 單擊「瀏覽」按鈕，指定新連結網頁 選取「對所有網頁作變更」選項 單擊「取代」按鈕 維護超連結後，軟體會自動再檢查一次，即可發現連結已經成功。 上一節 下一節 上一頁 回目錄

4-4 用FrontPage發佈網站 補充說明：網站素材 網站設計完成後，就可以將網站發佈到網路。為了方便使用者直接透過FrontPage來發佈網站，軟體特別提供「發佈網站」的功能，既方便又簡單，而且適合不同類型的伺服器，如FrontPage或SharePoint Services、WebDAV、FTP等等。 補充說明：網站素材 本節提供了一個完整的個人網站，此網站也是本書各章範例的整合。各位可以使用這個網站依照操作步驟學習發佈網站的方法。另外，下節同樣使用此網站作為練習檔案。 上一節 下一節 下一頁 回目錄

4-4 用FrontPage發佈網站 成果展示： 下例將透過FrontPage軟體以FTP的方式，將本機網站發佈到遠端網站，發佈成功後開啟瀏覽器檢視網站效果。 發佈網站後，利用瀏覽器檢視網站的結果 練習檔案：..\Example\練習檔\Ex04\joicysite 上一節 下一節 上一頁 下一頁 回目錄

4-4 用FrontPage發佈網站 步驟一、設定遠端網站內容： 上一節 下一節 上一頁 下一頁 回目錄 單擊「遠端網站」按鈕 單擊「遠端網站內容」按鈕 切換到「遠端網站」籤頁 選取「FTP」選項 輸入遠端網站主機位置 單擊「確定」按鈕 上一節 下一節 上一頁 下一頁 回目錄

4-4 用FrontPage發佈網站 步驟二、輸入名稱與密碼： 步驟三、發佈網站： 登錄遠端網站後，即可將本機網站整個發佈到遠端網站，亦可逐一發佈網站內的檔案。 輸入使用者名稱 輸入密碼 單擊「確定」按鈕 選取「本機至遠端」選項 單擊「發佈網站」按鈕 上一節 下一節 上一頁 下一頁 回目錄

4-4 用FrontPage發佈網站 補充說明：發佈單一檔案 如果不想將整個網站發佈，只想發佈幾個檔案，可以只選取需要發佈的檔案，然後單擊「 從本端網站將選取的檔案發佈至遠端網站」按鈕，將選取的檔案發佈到遠端網站。 選取需要發佈的網頁 單擊「 從本端網站將選取的檔案發佈至遠端網站」按鈕 上一節 下一節 上一頁 下一頁 回目錄

4-4 用FrontPage發佈網站 步驟四、確認發佈成功： 網站發佈成功後，可以從遠端網站看到發佈的檔案。 小技巧：同步更新網站： 發佈網站過程 發佈網站後的結果 小技巧：同步更新網站： 如果已經發佈網站，但後來變更了網站內容，需要一併更新到遠端網站，可以使用「同步處理」的發佈方式，即只更新被編輯的網頁，其他網頁則保持不變。 上一節 下一節 上一頁 下一頁 回目錄

4-4 用FrontPage發佈網站 步驟五、檢視遠端網頁： 發佈網站後，即可使用瀏覽器開啟網站首頁，檢視效果。 輸入遠端網站網址 按下Enter鍵，開啟網站首頁 遠端網站檢視結果 如果不想使用FrontPage內建的上傳功能發佈網站，可以使用專門的FTP軟體來完成。下節將介紹如何使用Cute FTP發佈網站。 上一節 下一節 上一頁 回目錄

4-5 用Cute FTP發佈網站 除FrontPage內建的網站發佈功能之外，還可以使用專業的FTP軟體發佈網站。常用的FTP軟體有CuteFTP、TurboFTP、WS_FTP、FTP Commander等，其中最受歡迎的是CuteFTP，因為它的使用界面類似Windows的檔案總管視窗，而且下載檔案支援續傳、可下載或上傳整個目錄。當建立遠端網站連線後，即可將本機電腦上的虛擬網站直接拖曳至遠端網站，以便將整個網站內容發佈到網路上。 上一節 下一節 下一頁 回目錄

4-5 用Cute FTP發佈網站 成果展示： 下例將利用Cute FTP Professional 6軟體將本機的網站檔案上傳到遠端網站，藉此說明使用FTP軟體發佈網站的方法。 發佈網站後的結果 練習檔案：..\Example\練習檔\Ex04\joicysite 上一節 下一節 上一頁 下一頁 回目錄

4-5 用Cute FTP發佈網站 步驟一、建立FTP站台： 上一節 下一節 上一頁 下一頁 回目錄 單擊「 新增」按鈕 設定站台標籤 單擊「 新增」按鈕 設定站台標籤 設定遠端網站主機位址 輸入使用者名稱與密碼 單擊「確定」按鈕 上一節 下一節 上一頁 下一頁 回目錄

4-5 用Cute FTP發佈網站 步驟二、切換到專業界面： 步驟三、連接遠端網站： 上一節 下一節 上一頁 下一頁 回目錄 切換到「Site Manager」籤頁 雙擊連接遠端網站站台 執行「檢視─切換到專業界面」功能 上一節 下一節 上一頁 下一頁 回目錄

4-5 用Cute FTP發佈網站 步驟四、上傳網站檔案 ： 上一節 下一節 上一頁 下一頁 回目錄 按下Ctrl＋A快速鍵，選取全部檔案 將網站資料夾拖曳到遠端網站，上傳網站檔案 上一節 下一節 上一頁 下一頁 回目錄

4-5 用Cute FTP發佈網站 步驟五、檢視上傳情況 ： 將網站資料夾拖曳到遠端網站後，軟體會自動上傳該資料夾的檔案。 上一節 下一節 網站資料正在上傳中 網站資料上傳完畢後的結果 上一節 下一節 上一頁 下一頁 回目錄

4-5 用Cute FTP發佈網站 補充說明：連線限制 為了避免網路被太多的連線佔用過多的頻寬，所以大多上傳下載軟體都會預設限制連線數，Cute FTP Professional 6軟體則預設最大連線數為5，如果您想要調整更多的連線數，可以透過「通用選項」視窗，變更最大連線數。開啟通用選項視窗的方法，執行「工具—通用選項」功能即可。 當上傳資料數超過最大連線數時，軟體即會出現警告視窗 透過「通用選項」視窗的「連線」項可變更最大連線設定 經過本章關於網站構建、維護與發佈的介紹，相信您已經掌握了網站管理的方法，後續則可以在建構完成的網站基礎上進行網頁設計。 上一節 下一節 上一頁 回目錄

4-6 課後習題 選擇題 回目錄 離 開

4-6 課後習題_選擇題 1.（ ）在預設的情況下，以下哪個網頁不是「個人網站」範本自動建立的檔案？ A.index.htm 4-6 課後習題_選擇題 1.（ ）在預設的情況下，以下哪個網頁不是「個人網站」範本自動建立的檔案？ A.index.htm B.favorite.htm C.composition.htm D.feedback.htm 2.（ ）如果忘記了本機網站那些網頁曾編輯過，但又想只將這些編輯過的網頁更新到遠端網站，請問應該使用什麼功能發佈網站？ A.發佈單一檔案 B.同步處理 C.發佈整個網站 D.下載遠端網站 看答案 下一頁 回目錄

4-6 課後習題_選擇題 3.（ ）FrontPage軟體不支援哪種伺服器類型？ A.SharePoint Services 4-6 課後習題_選擇題 3.（ ）FrontPage軟體不支援哪種伺服器類型？ A.SharePoint Services B.WebDAV C.FTP D.Telnet 4.（ ）網站中哪個網頁一定會在導覽圖首層。 A.首頁 B.簡介頁 C.任意一頁 D.任意多頁 看答案 上一頁 下一頁 回目錄

4-6 課後習題_選擇題答案 1.（C）在預設的情況下，以下哪個網頁不是「個人網站」範本自動建立的檔案？ A.index.htm 4-6 課後習題_選擇題答案 1.（C）在預設的情況下，以下哪個網頁不是「個人網站」範本自動建立的檔案？ A.index.htm B.favorite.htm C.composition.htm D.feedback.htm 2.（B）如果忘記了本機網站那些網頁曾編輯過，但又想只將這些編輯過的網頁更新到遠端網站，請問應該使用什麼功能發佈網站？ A.發佈單一檔案 B.同步處理 C.發佈整個網站 D.下載遠端網站 選擇題 下一頁 回目錄

4-6 課後習題_選擇題答案 3.（D）FrontPage軟體不支援哪種伺服器類型？ A.SharePoint Services 4-6 課後習題_選擇題答案 3.（D）FrontPage軟體不支援哪種伺服器類型？ A.SharePoint Services B.WebDAV C.FTP D.Telnet 4.（A）網站中哪個網頁一定會在導覽圖首層。 A.首頁 B.簡介頁 C.任意一頁 D.任意多頁 選擇題 上一頁 回目錄

實作題 一、本實作題要求透過「網站範本」視窗建立一個單頁網站，然後新增「about.htm、favorite.htm、composition.htm、music.htm、sport.htm、works.htm、community.htm」網頁，並分別設定對應的標題，完成一個完整的網站。 建立網站後的結果 成果檔案：..\Example\成果檔\Ex04\4_P1 下一頁 回目錄

實作題 提示： 執行「檔案─開新檔案」功能，開啟「開新檔案」工作窗格，然後單擊「其他網站範本」連結文字。 切換到「一般」籤頁，選取「單頁網站」範本，然後單擊「瀏覽」按鈕，指定新網站的位置，最後單擊「確定」按鈕。 上一頁 下一頁 回目錄

實作題 提示： 建立網站後，切換到網站「資料夾」視窗，然後在空白位置單擊右鍵，執行「新增─空白網頁」功能，輸入檔案名稱為「about.htm」。 上一頁 下一頁 回目錄

實作題 提示： 依照提示3與提示4的方法，新增「favorite.htm、composition.htm、music.htm、sport.htm、works.htm、community.htm」網頁，並設定對應的標題為「我的最愛、我的作品、音樂、運動、工作、個人社群」。 雙擊網頁的標題，切換到編輯文字狀態，然後輸入新標題為「關於站主」，最後按下Enter鍵，確定變更標題。 上一頁 下一頁 回目錄

實作題 二、本實作題將延續上題的網站內容，透過「導覽」視窗將「about.htm、favorite.htm、composition.htm、community.htm」與「index.htm」建立導覽連接，然後將「music.htm、sport.htm、works.htm」與「favorite.htm」建立導覽連接，完成網站導覽結構圖。 網站導覽結構圖的效果 練習檔案：..\Example\練習檔\Ex04\4-P2 成果檔案：..\Example\成果檔\Ex04\4-P2_Ok 上一頁 下一頁 回目錄

實作題 提示： 執行「檢視─資料夾清單」功能，開啟「資料夾清單」工作窗格，然後單擊「導覽」按鈕，切換到「導覽」視窗。 將「about.htm」網頁拖曳到「index.htm」導覽圖示下方，建立導覽連接。 上一頁 下一頁 回目錄

實作題 提示： 依照提示2的方法，將「favorite.htm、composition.htm、community.htm」三個網頁拖曳到「index.htm」導覽圖示下方，建立導覽連接。 上一頁 下一頁 回目錄

實作題 提示： 依照相同的方法，將「music.htm、sport.htm、works.htm」網頁拖曳到「favorite.htm」導覽圖示下方，建立第二層導覽連接。 上一頁 回目錄