网页设计前置作业.doc

網頁設計前置作業安裝個人網站伺服器在開始網頁設計之前，若我們可以先把自己的電腦模擬成私人網站的話，更能加快網頁設計的速度，首先我們必須先安裝Presonal Web Server, PWS(個人網站伺服器管理員)，經由執行PWS而達成建構私人網站的效果，PWS的軟體可於Window98、Windows ME或NT原版光碟上取得，在Win98的原版光碟中的add-onspws資料夾下，執行Setup.exe即可安裝，安裝完畢後，每次開機時，系統會自動執行，並隱藏於右下方的工作列中，如下所示。安裝完畢後，你可以直接點選桌面上的發行小圖示執行它，或是於右下方的工作列上雙按啟動PWS，其執行結果如下圖所示。網頁放置於本機的實際目錄名稱。各頁面切換的功能列，分別是主畫面、發行，Web站台，教學課程及進階。網站啟動停止鈕，其字義與實際狀態相反。個人網頁的URL名稱，通常內定為本機名稱。目前訪客計數及連線資訊。圖2-1個人網站伺服器的執行畫面。PWS會將主目錄模擬成實際的站台，讀者可在瀏覽器的網址列輸入：作者的電腦為http:/note1。http:/電腦名稱或一個很特別的IP，它代表本機的位址。一個很特別的網域名稱，它代表本機的位址。或http:/localhost便可瀏覽預設的起始網頁(一般為：default.htm或default.asp，視系統內定值而異)，就如同實際上網去瀏覽其它網站一般，通常第一次執行時會出現歡迎使用Microsoft Presonal Web Server字樣的網頁，則表示網頁開啟成功。在往後的練習中，讀者們可以將製作好的網頁儲存到C:Inetpubwwwroot的路徑下，或在該路徑下建立其它資料夾來存放網頁，並將它視為伺服端，同樣的，依照上述的網址名稱執行自己所設計的網頁，例如：http:/localhost/index.htm 或 http:/localhost/MyWeb/test.htm 1.建立一份網頁，並將它儲存於C:InetpubwwwrootMyWeb的資料夾下，取名為Test.htm2.開啟瀏覽器，於網址列輸入本機網址、資料夾名稱及網頁名稱http:/localhost/MyWeb/Test.htm3.瀏覽器呈現網頁內容即可得到與實際伺服器上執行同等的效果了，如下圖所示：圖2-2 啟動PWS上的網頁文件提示n 若作業系統為Windows NT或Windows 2000以上的版本，則系統於安裝時同時會安裝NT的網站伺服器軟體(IIS, Internet Information Server)，因此不須再安裝PWS。在PWS中，可透過進階選項畫面來進行Web站台的管理，例如在輸入網址時，通常我們會省略首頁的名稱，例如原本要輸入http:/note1/index.htm，而我們只要輸入http:/note1/即可，這是因為網頁伺服器會自動要尋找預設的網頁並且開啟它，其設定方式只需在進階選項畫面中，將啟用預設文件打勾，並將預設的起始頁依序填入，並以逗號(,)隔開即可。3.輸入預設的首頁名稱，並依其優先順序以逗號(,)分隔開來21圖2-3個人網站伺服器的進階設定畫面。除了設定起始頁之外，進階設定還可設定：允許瀏覽目錄當站台資料夾下並無預設起始頁，且勾選允許瀏覽目錄選項時，瀏覽器會將該站台或資料夾下的所有檔案及資料夾清單列出，如下所示。2.伺服器找不到起始頁，因此以預設的瀏覽目錄將資料夾列出1.輸入網址圖2-4勾選允許瀏覽目錄選項可直接檢視資料夾內容。直接瀏覽目錄的好處是可直接做為檔案下載的畫面，直接點選檔案，即可下載，不需額外製作檔案下載網頁，缺點是會將站台內容曝光，易遭有心人士破壞，因此，通常在應用時，最好能以虛擬目錄來呈現(請參考下例)，且只要放置單純的檔案即可，不要將重要的資料夾及檔案結構列出。儲存活動日誌若點選儲存Web站台活動日誌時，系統將於資料夾WindowsSystemLog fileW3SVC1下，產生一個以Nc的日誌檔，名稱以年月來命名，如2001年5月的日誌檔為Nc0105.Log，它將記錄站台活動的狀況及使用情形等，欲檢視其內容只需以文書編輯器打開它即可。新增虛擬目錄此外，PWS亦可將C:Inetupbwwwroot以外的資料夾設定成虛擬目錄，例如按下鈕後，接著出現對話盒如下：3.按下確定鈕確認1.按下按鈕後，選取C:Test資料夾並按下確定鈕2.將新的虛擬目錄字樣替換成MyTest圖2-5虛擬目錄設定畫面及步驟。欲測試這個虛擬目錄是否可正確的執行，首先在FrontPage中選取檔案開新檔案網頁，並於空白編輯區中輸入虛擬目錄測試，接著將檔案儲存於C:Test下，命名為index.htm。開啟瀏覽器，於網址列輸入http:/localhost/MyTest/，若出現下圖之結果，則表示虛擬目錄設定成功。圖2-6虛擬目錄測試結果。虛擬目錄就如同是實際的目錄一般，它可以很方便的將主機內的任意資料夾設定為網頁資料夾，不必特地搬移到網站的資料夾下(內定為C:Inetpubwwwroot)，除可簡化設計的步驟外，更能減少該資料夾被駭客破壞的可能性。補充說明在新增虛擬目錄時，其對話盒下方分別有讀取、執行及指令三個核取方塊，它主要是用來設定使用者在瀏覽時的權限，其功能為：l 讀取-每位瀏覽者應該俱備的基本條件，表示可瀏覽本站台上的網頁資料。l 執行-該站台或資料夾下若有執行檔或動態連結檔(dll)時，可直接執行，例如：http:/Note1/InsDta.exe。l 指令-表示可執行Web伺服器上含描述語言(如ASP、CGI或PHP等)的網頁，例如：http:/localhost/getDta.asp。使用FrontPage 上傳網頁的方法在開始設計網頁之前，最好能夠先了解未來網頁儲存在網路上的作業系統及其伺服器軟體型態，目前最常見的Web主機有Unix、Linux、Windows NT等，而伺服器軟體所能執行的動態描述語言也不盡相同，不過通常與FrontPage最能相互搭配的Web伺服器及Web軟體非Windows NT及IIS(Internet Information Server)莫屬，FrontPage所製作出來的網頁中，通常會包含一些動態及特殊效果，而某些特殊效果必須是在伺服器上有安裝FrontPage伺服器擴充程式或安裝SharePoint Team Services的情況下，才可正常執行，這些都是在製作網頁的同時，不能不特別考慮的重要因素。發佈網頁通常在一個網站設計完成後，接著最重要的就是發佈網頁，這時讀者一定覺得奇怪，我連網頁都還沒有開始做，為什麼要馬上學發佈網頁。不要急，因為FrontPage強大的功能之一，就是它可與網站做即時連線，動態更新，只要確認網站完整的呈現樣式之後，即可正確無誤的上傳至網站上，不須再做複雜且額外的動作。注意發佈網頁的動作通常必須是在編輯Web的條件下才可執行，一般編輯單一網頁的環境下是無法發佈的。欲觀查網頁發佈的情形，首先我們先以精靈幫我們產生一系列的網頁及其內部的相關連結，如下：1. 在FrontPage下選擇檔案新增網頁或Web，在工作窗格中選取空白Web選項。2. 選擇個人Web項目，在指定新的Web位置中，輸本機資料夾及位置，例如C:My DocumentsMy WebsTEST2，最後按下確定鈕，系統即會幫我們自動於該資料夾下建立所有的網頁資料。4.系統自動建立所有網頁資料1.選取個人Web3.按下確定鈕建立所有網頁資料2.輸入欲自動產生網頁的本機資料夾圖2-7於本機資料夾中建立個人Web網頁資料。3. 執行發佈，發佈的方式如下：內定方式發佈發佈網頁的方式又分可為Web發佈及單獨網頁儲存兩種，以Web發佈而言，若Web伺服器上安裝有伺服器擴充程式或SharePoint Team Services時，FrontPage內定以HTTP通訊協定的方式來傳送資料，發送的程序即簡化許多，選擇選單檔案發送 Web，出現如下圖示：2.按下確定鈕1.輸入欲發送的網站位置，假設我們以PWS所建立的個人網站為例，此處輸入網址為：http:/super/Test1，其中super為網站名稱，Test1為資料夾名稱4.按下發送鈕開始發送3.系統會列出欲更新的網頁清單5.發送成功，按下完成鈕結束注意若是發佈到正式的Web站，通常還會有輸入帳號及密碼的動作。Ftp通訊協定發佈若發佈的過程中，FrontPage發現該網站主機上並沒有安裝伺服器擴充程式時，它會改採以FTP檔案傳輸的方式來進行，如下所示：2.按下確定鈕1.輸入欲發送的網站位置，假設以亞卓市所申請的個人網站為例，此處輸入發送的ftp位址為.tw/，至於是要發送至那一個免費網頁空間，請按下瀏覽鈕，並選取新增ftp站台，及輸入帳號及密碼即可。4.按下發送鈕開始發送3.系統會列出欲更新的網頁清單6.按下繼續鈕繼續5.系統會將使用到動態元件且無法正常顯示的網頁列出，並告知使用者伺服器並未安裝伺服器擴充程式7.發送成功，按下完成鈕結束若網站主機上沒有安裝伺服器擴充程式，除了在發佈時FrontPage會自動採取FTP通訊協定外，在你設計的網頁中，將會有部份功能是無法啟動的，依據微軟公司所提供的資料，無法啟動的將是插入Web 元件中的部份項目，其詳細內容為：l Web 搜尋l 計數器l 相片藝廊l 十大排行榜l 確認欄位l 清單檢視l 文件庫檢視因此，一旦你確定你所要發佈的網站並未安裝FrontPage安裝伺服器擴充程式時，在設計網頁的同時，就應該避免使用上述的功能及元件，以免發佈後無法執行，而要如何確定該網站是否提供此一功能呢，通常可向網管人員洽詢，或是仔細閱讀該網站的說明文件即可。瀏覽發佈後的網頁網站在發佈後，一定要記得上網瀏覽一遍，以免有些錯誤或連結失敗，造成網頁無法正常顯示。儲存單一網頁一般而言，我們通常會將網頁儲存在自己的電腦上，除此之外，FrontPage還提供直接將檔案儲存至FTP站及Web資料夾的方法，你只需選擇檔案另存新檔，選擇儲存位置為Web資料夾後，再選擇您可用的Web資料夾即可，或是選擇檔案另存新檔，在下拉方塊中選擇新增FTP位置或是您先前所建立的FTP位置即可。指定eb資料夾後，輸入帳號及密碼即可儲存或是選定ftp位置後，輸入帳號及密碼儲存實例練習如何在完成自己的網頁後即可在網站上觀賞，實是一重要課題，以下我們便先以實際的例子，先申請網頁硬碟空間，申請認證後再依規定將網頁內容傳送至網頁磁碟空間裡，接著在瀏覽器裡鍵入網址，網頁呈現後表示登錄成功，其步驟如下。例2-1：先申請一個免費的網頁空間，依上述的步驟於本機產生一Web資料夾及所有網頁資料，上傳後並瀏覽結果。STEP1. 申請免費的網頁磁碟空間：在網路上透過搜尋引擎，鍵入關鍵字免費網頁，經過一些申請程序，即可取得網頁磁碟空間。(本例以.tw亞卓市為例)2.輸入個人的基本資料1.輸入.tw， 並於網頁中選取帳號申請STEP2. 以精靈建立好網站資料後，選取檔案發送Web，並選擇新增修改FTP位置。3.選擇新增修改FTP位置STEP3. 鍵入FTP位址、使用者名稱及密碼 (說明：雖然網頁空間是免費的，申請時會要求申請者鍵入使用者名稱及密碼，只是為了讓使用者方便管理自己的網頁防止遭不法人士盜用)。7.按下新增鈕，即可將網站資料加入清單中6.輸入申請人密碼5.輸入申請人帳號4.輸入FTP網站名稱，此處為.twSTEP4. 其餘步驟皆與Ftp通訊協定發佈同。STEP5. 開啟IE並鍵入網址，檢查網頁上網是否正常運作。正常營運後就可告訴親朋好友上網來逛逛。8.輸入網址.tw/bcstation2，其中.tw/為網址名稱，bcstation2為系統以使用者帳號為名稱所建立的資料夾隨堂練習一、選擇題1().下列何者不代表本機的位址？ (A)http:/cpux (說明：cpux為本機名稱) (B)(C).tw (D)http:/localhost2().在PWS的進階設定中，若設定啟用預設文件為：index.htm, default.htm, abc.htm，且同時建立這三個檔案於預設資料夾中，當於瀏覽器執行http:/localhost/ 時，將開啟那一個網頁？(A)index.htm (B)default.htm (C)abc.htm (D)三個網頁同時執行。3().將PWS設為允許瀏覽目錄時，則下列何者正確？(A)瀏覽網頁時，可同時開啟預設首頁及瀏覽目錄頁。(B)瀏覽器只會列出所有檔案，資料夾則隱藏起來。(C)瀏覽器只會列出所有資料夾，檔案則隱藏起來。(D)若網站或網頁資料夾中並無起始頁，則瀏覽器將瀏覽所有檔案目錄。4().在新增虛擬目錄時，讀取、執行及指令三個核取方塊所代表的功能下列何者錯誤？(A)讀取-可瀏覽站台上的網頁資料。(B)執行-可執行Web站台上的執行檔或動態連結檔(dll)。(C)指令-可執行Web伺服器上設定權限的指令。5().若發佈網頁時，Web站台上並無安裝FrontPage伺服器