网路网页设计课程.DOC

HTML語法網頁設計教學講義 基礎學習單元(一) 鄭老師整理(2011/9/7) Content 基礎學習單元(一)……………………p1 基礎學習單元(二)－(表單與表格)…p6 基礎學習單元(三)……………………p15 基礎學習單元(四)……………………p21 5. 基礎學習單元(五)……………………p27 教學大綱： 1.全球資訊網路(World Wide Web，WWW)基本架構與運作模式介紹 2.網頁基本製作工具與使用方法說明與製作簡單網路網頁。 教學內容： l.WWW基本架構與運作模式介紹： (1)何謂WWW? ．WWW為World Wide Web之縮寫，中文為「全球資訊網路」；而Internet之中文翻譯成「網際網路」。 ．WWW最早是由CERN (The European Laboratory for Particle Physics，歐洲共同核子研究所)這個機構發展出來的，主要目標是希望能夠建立一個整合各種資源、文件及多媒體的系統，讓使用者可以藉由簡單之使用方法，輕易的擷取所需的資料。 (2)常見專有名詞： ．Hypertext：「超文件」，與傳統文件不同，當對於某個主題有興趣時，可以利用滑鼠點選，取得額外之資訊。 ．HTML：Hypertext Markup Language，「超文件標記語言」。超文件透過此標記語言描述後，文件中之每一個文字及圖片都可以連到不同之文件。 ．Browser：瀏覽器，用於關看WWW上HTML文件之工具。 ．Homepage：原本是指第一個呈現出來之超文件，現在個人網頁也可稱作此名稱。 ．HTTP通訊協定：Hypertext Transfer Protocol，客戶端(Client)與伺服器端(Server)之溝通，是以此種通訊協定來進行。 ．URL與Hyperlink：Uniform Resource Locator，用於描述一般網路資源之位址，目前就直視而言，可將URL視為網站之位址。在HTML文件中加入URL，此可連結到其它HTML文件的URL即為Hyperlink。 (3)WWW基本架構與運作模式： ．WWW為主從式架構(Client-Server Architecture)，客戶瑞(Client)可以向伺服器端(Server)提出要求，然後再由伺服器端提供所需之服務(如圖一)。 ．一般我們所提到的CGI，稱為「共通閘道介面」，此為伺服端(Server)對外資訊服務的標準介面；而CGI程式則是符合此介面要求之程式語言(如圖二) ．伺服器有三種方式將資料傳送給應用程式：1環境變數2命令列參數3標準輸入(Stdin)，而應用程式是以標準輸出(Stdout)到標準輸入(Stdin)方式傳送HTML文件給伺服器。 隨堂練習： 1-1.何謂WWW？它的中文名字是什麼呢？ 1-2.WWW之基本架構為何？什麼是HTML文件？ 1-3.我們要用什麼工具來觀看HTML文件呢？ 2.網頁基本製作工具與使用方法說明： (1)純文字編輯軟體： (存檔必須存成 .htm 檔，然後用IE瀏覽器開起。若要修正檔案內容，請從檢視(原始檔 來修改，再重新整理。) ．記事本 如圖三：利用記事本撰寫HTML文件 優點： 1.此為最基本之網頁編寫方式，讓編輯者可以完全掌握文件架構。 缺點： 1.無法讓使用者編輯與觀看編輯結果(WYSIWYG)同步完成。 2.當文件檔案太大時，較不易除錯。 (2)圖形介面編輯軟體： ．FrontPage 2003 如圖四：利用 Frontpage Editor 編輯 HTML 文件 ．其它相關網頁製作軟體：: (多媒體網頁編輯軟體：Dreamweaver、Flash、Fireworks、Director、Freehand．(以上五套為Macromdeia公司最新多媒體網頁製作工具) (圖形製作軟體：Photoshop、PhotoImpact。 隨堂練習：1-4. 請利用「記事本」編輯完成以下之內容，並將其存成1-4.htm，再利用瀏覽器觀看所編輯完之檔案。 HTML HEAD TITLE隨堂練習1-4/TITLE /HEAD BODY Hello!這是我用HTML語言所寫的第一個網頁 /BODY /HTML 3.製作簡單網路網頁： (l)由隨堂練習1-4可以看出一個基本網頁(HTML文件)之架構，它是由許多標記(Tags)所組成的，這些標記是不用分大、小寫的，放在“”與“”符號內，兩兩成對。 (2)大部分網頁之原始檔大致由以下標記所組成： HTML → 宣告HTML文件之開始 HEAD → 宣告文件資訊開始 TITLE隨堂練習1-4/TITLE /HEAD → 宣告