網站規劃與設計上課補充教材

第一堂課： 什麼是 WWW 伺服器與瀏覽器，及 HTML 初探

瞭解 WWW、瀏覽器 (browser)、HTML、多媒體、資料庫、網頁程式語言、java scripts 等等經常看到的瀏覽器相關元件，這些元件的相關性為何？而你想要瀏覽一個網站時， 最重要的當然就是取得該網站的主機名稱，那網路其實是透過 TCP/IP 的協定，亦即 IP 在座溝通，那麼主機名稱是如何轉成 IP 的？你的主機名稱能不能是 vbird.google.com 呢？這就是 WWW server 與 DNS 的相關性。此時，相當重要的是：製作網站的第一個重點是『取一個好記的主機名稱(URL)』！』囉！
本章重點目標：
  1. 先看老師的繪圖在白板上面，包括 Server / Client / DNS / URL / browser / www server / PHP (.NET, perl...) / SQL database / HTML / CSS / Java scripts... 等等的圖示，然後對照底下的資料來開始了解 WWW, HTML 之間的相依性囉！

  2. 認識 TCP/IP 與通訊協定；
    • 什麼是 Internet？什麼是 IP ？什麼是 DNS ？以及相關通訊協定？
    • 什麼是主從式架構 (server/client)
    • 主從式架構中，啟動的埠口有沒有什麼特定的埠號？
    • Windows 系統底下，什麼指令可以查詢的到 IP/netmask/gateway/dns IP 等參數？

  3. 認識 WWW 伺服器與瀏覽器的傳輸行為；
    • WWW 伺服器需要啟動的是什麼程式？
    • 用戶端啟動的瀏覽器有沒有需要啟動埠口？

  4. WWW 伺服器提供的資料為？多媒體、純文字、特殊檔案等；
  5. 什麼是 HTML (超文本檔案)？如何觀察？能不能拿本網頁來查閱看看？
    • 副檔名應該是什麼？首頁的檔名應該是什麼？
    • 多媒體檔案的副檔名比較常見的又有哪些？
    • HTML 會紅的原因是因為哪一個標籤 (tag) 的作用呢？

  6. 有哪些常見的瀏覽器？瀏覽器對 HTML 與特殊標籤的解析為何？
    • 使用 IE 瀏覽一下，並處理一下工具內的 proxy 以及 java script 項目；
    • 練習：使用 Firefox 瀏覽一下，並處理一下工具內的 proxy 設定項目與 java script 項目；
    • 練習：使用 google chrome 瀏覽一下吧！

  7. 什麼是用戶端程式 (Client Side) 與伺服器端程式 (Server Side) ？如果以 PHP 及 Java scripts 來說明的話，兩者分別是由哪個軟體去觸發執行的？

  8. 網頁文字的使用與用戶端有關還是與伺服器端有關？舉例來說，你設計的網頁上面規定顯示的字體為『微軟正黑體』， 這是正確的還是不正確的設定？為甚麼？(網頁設計上非常的重要！)

  9. 整個網站的目錄規劃！極重要！
    • 超連結資料可以是 C:\Windows\myfile.jpg 嗎？
    • 資料可以超出根目錄 ( / ) 之外嗎？
    • 最好放置到同一個目錄中！！！
    • 整體網站根目錄最好不要有太多網頁檔，網頁檔案請分門別類放置於不同的子目錄中
    • 最好有 include/, images/, homepage/, audio/... 等子目錄分門別類放置資料

  10. 第一個網頁的製作須知：
    • 網頁副檔名通常為： .html, .htm 等等；
    • 網頁檔名不要用中文、不要有特殊符號(如空格、>、<、&、*等等)；
    • HTML的檔案裡面共分為兩大部分，分別是：
      • <head>：表頭部分，宣告抬頭(title)以及編碼等重要資訊；
      • <body>：內文部分，實際的網頁資料就是放於此處。
    • HTML的標籤有『成對』與『非成對』標籤之分；
    • 表頭部分重要的項目有：
      • <title>：抬頭部分，為成對標籤，可在瀏覽器上方顯示本頁名稱；
      • <meta...>：編碼部分，中文編碼主要為big5與utf-8兩大類
      • <script language="語法宣告">：可以加入Javascript等程式在網頁中(新版設計中，不需要再加 language 了，因為預設的 script 就是 java script 喔)
    • 網頁編輯時的注意事項：
      • 標籤與標籤的屬性請務必使用『小寫』英文，不要用大寫！(養成好習慣)；
      • 網頁的第一行請加入語法宣告 (html5 的語法是？)；
      • 首頁務必取名為： index.html 才好！
      • 總之，網頁編輯盡量依循『標準』會比較能夠適合所有的瀏覽器！

  11. 補充教材：何謂網站與網站功能(舊版教材，請自行查閱)
本章練習與習題：
  1. 在你的個人目錄中，建立一個名為 www 的子目錄，未來這個目錄就是你的『網頁根目錄』，所有的網頁相關資料 (文字檔、媒體檔、影像檔等等的一切) 都需要放至於此目錄中才行！
  2. 先以 notepad++ 製作出第一個含有 html, head, body, header, nav, aside, footer 等方塊模型的網頁，其中第一行務必要有 <!doctype html> 的字樣才行！而且需要有網頁的 title 喔！這個檔名就取名為 demo.html 吧！
  3. 在 www 當中建立另一個名為 homework 的子目錄，並在其中建立一個名為 class_01.html 的檔案，內容為 (1)自行繪製出今日上課談到的 browser, www server, URL, DNS, html, 多媒體, database, php (.net), java script，等元件的相關性；(2)每個元件的詳細說明。 圖片可以自行繪製，也能手繪後以相機拍照上傳均可，並且圖片須放置於 /www/images/ 的子目錄中，取名為 class_01-1.jpg 喔！
  4. 根據課程內容的說法，一般來說，網站的建置底下，根目錄底下常見的目錄與放置的資料有哪些？請將答案寫入 class_01-2.html 檔案中
  5. 建立一個名為 index.html 的檔案，這個檔案須能交待你的姓名與學號，且這個檔案需要可以連結到 class_01.html, class_02.html 以及 demo.html 才行。
  6. 依據老師給的帳號/密碼，使用 pietty 連接到 class.vbird.tw， 並更改你的密碼，確保你資料正確；
  7. 嘗試使用 Filezilla 連接到 class.vbird.tw ，嘗試上傳下載今天講到的三個檔案 index.html, class_01.html, deom.html。請注意，上傳完畢之後，請使用 google chrome 瀏覽器自行瀏覽看看，一定要能看到的你上傳的結果才是成功的上傳了資料。