| 用Word做網頁，理想的折衷選擇 | |
|
1. Word檔案可以編排圖文與製作超連結，另存新檔時選擇網頁格式即可存為網頁。 2. 可存為 html 格式，此時網頁內相關的圖片等資源會存為另一個與 htm檔同名的目錄，移動網頁時別忘了它！ 3. 如存為 mht格式所有資源成為單一檔案。 4. 欲擷取網路上的網頁時亦可另存新檔為 html或 mht。 |
|
|
看看 FrontPage 幫我們做些什麼事情？ |
|
|
練習一 |
開新網站(單頁網站)→檢視程式碼，看看預設了什麼東西？ |
| 練習二 |
回到設計頁面更改背景顏色→檢視程式碼 |
| 練習三 | 更改上面程式碼的顏色部份，如 bgcolor= red ，看看設計介面的反應 |
| 練習四 |
插入一張圖片 上面程式碼是從我的圖片中插入圖片 『../』的符號表示在上一層目錄，這是相對路徑，所以如果你將網站目錄換位置，就找不到這張圖了！ 按一下存檔會出現這樣的畫面  這是問你要不要將圖片加入網站，當然要比較好，確定後看看網站資料夾  你可以將圖片移到images資料夾，再去看看程式碼  FrontPage幫我們將圖片位置也改了，猜猜看，如果你自己到檔案總管將圖移走，會發生什麼事？ |
| 練習五 |
試試看使用：格式→佈景主題 這是使用現成的整組設定，包括背景、文字字型顏色等等。請切換到網站的『_themes』目錄可以看到細節資訊。  其中大部分是會用到的小圖案，這些東西事實上都是從Office軟體中或網路安裝到你目前網站的。 最重要的是『*.css』檔案其中包含了所有的設定，譬如何時要用何種字體，設計按鍵或標題時應該用哪個圖形等等。像下面是設定顏色的CSS檔案：(如 a:visited是超聯結被點選之後的顏色)  |
| 結論一 | FrontPage幫我們產生HTML程式碼 |
| 結論二 | 設計介面與程式碼會即時互動同步 |
| 結論三 | FrontPage幫我們管理網站與網頁的相關檔案，所以不要在檔案總管自己改變檔案位置！ |
|
網頁瀏覽幕後的工作主要是：先有人使用HTML語言設計出網頁，再將它(們)放置到網路可及的電腦(伺服器Server)上面；客戶端上網時指定網址要求這個伺服器傳遞特定網頁給他。在這過程中有兩點值得特別介紹一下： |
|
一、網頁不是單一檔案 HTML文件與一般的Word或PowerPoint雖然外觀相似，但檔案結構完全不同！網頁實質內容只是一些『程式碼』將許多圖文影音等個別檔案加以連結編排，其中某些檔案甚至是在網路上別的地方，根本不在同一台電腦！所以即使看起來單純的『一頁』網頁，移動時還是會有『一堆』檔案，這與我們寫VB程式時的專案相似，要讓程式正常運作，所有檔案都必須在指定的位置，所以正確的移動網站資料，使它到別處仍可正常運作是初學者最常遇到的困擾。 因為我們個人用的電腦通常不是伺服器主機，我們也不太有機會直接在主機上面工作，所以網頁製作的過程免不了要有『上傳』網頁的動作，移動網站很麻煩，但是我們一定要會，避免錯誤的關鍵就是要了解『網頁不是單一檔案』這個概念，也必須知道網頁連結這些檔案的方式。本節課老師將示範以FrontPage來製作一個最簡單的網頁(網站)，進行插圖、超連結簡單編排等等，重點在於介紹HTML網頁文件的結構。  網頁上的個種資源都不在HTML檔案內 |
|
練習：請用FrontPage 做個簡單的個人網站，包含圖片、短文、超連結及至少兩張網頁 |
|
老師示範： 1. 網頁橫幅：插入→網頁橫幅 2. 網站架構→新增網頁→更改檔名→資料夾處理(給予網頁及資源檔案適當的名稱與位置)  3. 導覽列與超連結製作 4. 表格與排版的關係 |
|
二、網頁伺服器(網站)的架構 做好了網頁要讓人在網路上看到，必須將它放到『伺服器』電腦上，這個伺服器不只是一台電腦，還包括一個管理網頁的軟體。微軟系統的伺服器軟體稱為 IIS(Internet Information Service) ，也可以用其他的廠牌軟體，但目前要做ASP網頁只能使用 IIS。  伺服器的基本條件是必須在網路上『找得到』，具體來說就是有固定 IP，如果這個 IP 有註冊網址，表示在某個『名稱伺服器(DNS)』電腦上有文字的網址與 IP 對照的目錄可以查，但是即使沒有網址只有 IP 也可以做網頁伺服器。 網站的運作基本上是使用 FTP (檔案伺服器軟體)讓網主上傳並管理網站資料，其他客戶則使用 HTTP 協定經過瀏覽器取得網頁觀看。前者使可以讀寫的，後者則基本上是只能讀不能修改刪除的。 1.上傳自己的網站資料到這裡！帳號密碼上課聽老師講 2.進去後會看到很多 ?-? 的目錄 3.請根據你目前使用的電腦編號放置你的網頁資料。 4.傳好之後到瀏覽器打入網址 http://ycc.dwu.edu.tw/?-? (自己的電腦編號) 就可以看到你的首頁了！ |
|
|
|
利用上面這種機制建立的網站，客戶端與網主不同的是：客戶不能改變網站的實際內容。 所以要留言或登入買東西等等，會改變網站內部實際資料的動作是不允許的！ 要進行交易或聯繫還是必須透過其他管道，像是打電話或寫Email。 如果你的網站允許客戶留言，甚至會自動產生新的網頁回應客戶，這就是『互動式』或稱『動態』網頁。 這不表示網主會在伺服端隨時待命，而是伺服端的網頁內包含有程式碼，可以隨著客戶的要求進行資料的處理或儲存變更。也就是網站資料不需網主更新也是會變化的，這種網站當然對於提供網頁空間的伺服器有點不安全，至少容量管制比較複雜，譬如可能被留言資訊灌爆等等。但是動態的網頁功能多出靜態網頁很多，已經漸漸變成主流，也是本學期本課程的主要教學方向之一。 |
|
靜態網頁與網站習題： 1.請說明 doc 檔案與 htm 檔案結構的主要差異。 2.是不是只要我將網頁相關圖檔都放在htm檔的同一個目錄，網頁就一定可以顯示圖檔？ 3.在FrontPage或DreamWeaver軟體裡面可以直接編輯HTML的程式碼(文字)嗎？ 4.要在網頁中設計顯示一張實體在網路上其他地方的圖應如何作？ 5.如果你上傳網頁後發現某張圖開天窗看不到，你應該怎麼找到那張遺失的圖片？ 6.請說明作為網頁伺服器電腦的兩個基本條件為何？ 7.IIS是什麼碗糕？ 8.有Flash動畫的網頁你認為是『動態』還是『靜態』網頁？ 為什麼？ 9.對於網站管理來說伺服端需要『網頁伺服器』與『檔案伺服器』兩種軟體，請分別說明其用途。 |