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

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」導覽圖示下方，建立第二層導覽連接。上一頁回目錄

Similar presentations

Similar presentations

About project

反馈

请登录

Auth with social network:

Similar presentations

Similar presentations

About project

反馈