网页制作软体简易教学讲义.doc

Frontpage Express網頁製作軟體簡易教學講義By莊靜圓1998年11月 基本觀念的建立一、 什麼是HomepageHomepage由Html文件構成的；在homepage上的文字大小及顏色、插圖、音樂、表格、清單等都是由Html來控制的。HtmlHyperText MakeUp Language，是一種標籤(Tags)語言，實際上只是一種純文字檔，需透過瀏覽器(IE或Netscape)才可以看到美麗多元化的檔。Tags數個Tags可以構成Html，而Tags是以來表示，在Html包括了起始標籤及終止標籤，但不每一種標籤都有起始及終止標籤，有的只有終止標籤。 組成概念：Tags Html Homepage WWW Internet二、 Homepage的優點思考Homepage可以做什麼？可以呈現什麼樣的效果？三、 寫作homepage的工具 傳統是自己寫指令（Html），現在有許多類似Word介面的軟體出現，不再需要自己撰寫複雜的指令，但最好還是要對指令有基本的認識。製作Homepage的工具如記事本、Word、Html abc、Frontpage Express、HotDog.等多種編輯體。 本次教學所使用的編輯軟體FrontPage Express，有WYSIWYG的功能（What You See Is What You Get），也就是所見即所得，你現在所看到的，也將會和在WWW上看到的一樣。不用自己撰寫指令，且是中文介面，使用介面也亦操作。四、 寫Homepage的基本注意事項 取檔名時，最好都使用英文，且在八個位元以內（也就是八個英文字母以內）；並注意檔名最好要和該內容有相關，以免日後混淆、不知道哪個檔案是哪個內容。 首頁最好取名為index.html或default.html（以index.html較好），因為若這完全是屬於你自己的網頁而你想掛上網時，一般的Server會有這樣的要求。 內容中所插入的圖檔、音樂檔、視訊檔等，或做超連結自己的檔案時，都不要寫出路徑，只要直接寫出檔名即可，以免日後掛上網會產生路徑的錯誤。 一定要將所有檔案（包括Html檔、圖案檔、聲音檔、視訊檔）放在同一個資料夾內。 在Homepage中，只支援兩種圖檔，JPG（JPEG）及GIF檔：音樂檔也只支援MID檔及WAV檔。 FrontPage Express 簡易教學一、啟動FrontPage Express 方法：開始 程式集 Internet Explorer FrontPage Express，如圖一。 啟動FrontPage Express後，畫面顯示如圖二。圖二 FrontPage Express介面圖一 啟動FrontPage Express二、介面簡要說明狀態工具列功能表格式工具列標準工具列表單工具列網頁編輯區圖三 FrontPage Express介面說明P.S.若某一工具列沒有出現，請到功能表中的檢視點選。三、功能表的介紹 檔案：功能和一般Word一樣，可以開啟舊檔、開啟新檔、存檔等其中還包括了畫 面內容，可設定Homepage的檔名、背景音樂、背景處理、邊界空間等。圖四 檔案功能表 編輯：文字的複製、剪下、貼上、還原（只能還原一次）等。（見圖五） 檢視：可以選擇是否要將各工具列呈現在畫面（使用介面）上。（見圖六） 插入：可插入各種Homepage的效果，包括了水準線、特殊符號、圖像、音樂、捲動式 字幕（只有Internet Explorer支援）。（見圖八） 格式：主要是字型（大小、顏色、粗體、斜體、體形）的設定。（見圖七）圖八 插入功能表圖六 檢視功能表圖七 格式功能表圖五 編輯功能表三、文字排版 步驟一先在網頁編輯區打上一些文字，並反白。 步驟二（1） 使用下列工具可以更改原來的字型樣式（格式工具列）。文字向左、中間、右對齊底線粗體變大變小文字向前或向後縮排斜體 在文字前加上號碼或符號（若要更改號碼或符號則格式分項和符號）字的顏色圖九 文字排版範例改變字的字形 （2）另一種更改原來的字型樣式的方法（格式 字型）也有特殊樣式，如字的閃 爍等。一般大小，等於是三號大小。打字機的字較一般小一點。四、 背景處理（格式 背景） 背景可用兩種方法處理（1） 單一顏色（2） 圖案（浮水印：背景不會因捲軸捲動而跟著動） 超連結顏色的設定五、插入水準線（插入 水準線）水準線快按兩下 修改水準線的樣式 快按兩下，即可修改水準線的寬度、 高度、對齊方式、顏色等。六、插入圖像（插入 圖像） 步驟一使用瀏覽來選擇檔案。 （只支援JPG或GIF檔） 步驟二可修改圖的大小，並利用向前或向後縮格來移動圖的位置。滑鼠點上圖形，周邊出現小方點可拉放圖形的大小 double click 圖十 插入圖片圖片，可修改圖片的內容。（替代顯示：若網路上無法download所要替代的）七、背景音樂（插入 背景音樂） 步驟一使用瀏覽來選擇檔案。（只支援WAV或MID檔） 步驟二在網頁編輯區上任一地方按滑鼠右鍵，選擇畫面內容，勾選不線次數，即可一直重複播放。或在檔案功能表下選擇畫面內容。八、捲動式字幕（插入 捲動式字幕） 先輸入文字，再加以設定所要的速度、呈現方式、次數、背景顏色等。（效果要在瀏覽器上才看得見）九、表格（表格 插入表格） 法一：在表格功能表上選擇插入表格預設值是在左邊 法二：在標準工具列中選擇插入表格。滑鼠按著拖曳不放，選擇所要的欄數及列數，選 好即可放開。圖十一 插入表格 修改表格內容 在表格的工具列下選擇可以有許多針對表格所作的功能。基本的插入或刪除欄、列，要先將遊標移到所要工作的儲存格裡，才會有效果。在進階的功能，如表格裡的顏色、表格外框寬度等，則可選擇表格圖十二 修改表格內容或儲存格內容來設定。十、超連結（插入 連結） 可以插入超連結的有兩種，一種是已經在WWW上的，另一種是自己的Homepage的檔案。除此之外，還可以插入讓別人寄信給你的連結。 選擇功能表下的插入中的連結。可插入WWW上的位置，以http、ftp、gopher等為開頭的，也有可以讓別人寄信給你的連結mailto為開頭的。在這些後面再打上位置即可插入自己將要做的Homepage，除了連結，也會幫你開啟一個新檔。插入自己已經做好的Homepage，不過這些檔案要在插入前都先在FrontPage Express中開啟了。 十一、儲存檔案 在檔案功能表中選擇儲存檔案，或在標準工具列中選擇儲存檔案。 FrontPage Express有Web發佈精靈的功能，也就是不用藉著Ftp將檔案傳到WWW上，可以由內部設定將以做好的Homepage送到你的Server。（當然是要先有連線，且申請好你放網頁的空間）不過，在我們尚未完成整個Homepage時，都是先將檔案存在自己的硬碟裡。將網頁存在自己的硬碟裡Web發佈精靈開始程式集Internet ExplorerWeb發佈精靈十二、使用精靈 精靈可以幫你先建立好格式，減去你一些設計的時間，不過，由於格式都是預先設定好了，受到很多的限定。 使用精靈：檔案功能表開啟新檔。可選擇精靈樣式，而一般空白畫面就是一般畫面。 見圖十三。十三、使用Html指令修改細部 可以在檢視功能表下選擇HTML，來看你的Homepage的Html指令。這時，若你對這些指令有基本的認識，就可以對細部加以修改。（見圖十四）圖十三 使用精靈圖十四 Html指令原貌十四、檔案上傳-FTP FTP是可以將你的Homepage檔案上傳（Upload）、也可以將你的Homepage檔案下載（Download）的一個工具。 見圖十五。圖十五 WS_FTP的開始介面 製作Homepage的網路資源在WWW上有很多教你如何製作Homepage的資源，在上面可以找到相關的線上學習教材，也可以找到很多共用資源，如各種動、靜態圖檔或音樂檔等。我們可以藉著各搜尋引擎來找尋，以下是幾個常用的網站名稱及其URL。蕃薯藤.tw/奇摩站.tw/哇塞中文網/蓋世引擎.tw/Yahoo（英）/ 範例一（蕃薯藤.tw/） 網頁製作資源共用 圖形圖案 HTML編寫 電腦網路/WWW 若是要專門找尋音樂檔，則可在搜尋引擎裡的長方格中鍵入mid或midi這種關鍵檢索字。 從網路上抓下（download）圖檔或音樂檔的方法：對著該物件按下滑鼠右鍵另存圖片（Internet Explorer）或圖片另存新檔（Netscape）。 我的第一個烘培機創作經過短短的時間學會了基本的Homepage製作，就真正來替自己做一個屬於自己的第一個烘培機！ 先前準備工作1. 紙上草擬你所要呈現的Homepage內容。2. 上網找尋（download）你所要用的相關圖檔或音樂檔。3. 可以利用掃描器掃描自己所要的圖片，將它存成電腦圖檔（.JPG或.GIF）。PS.若是照片或有較多的顏色的圖片，最好存成JPG檔，以免顏色失真。4. 找到FrontPage Express的軟體使用。5. 開始設計 本次主題 -我的烘培機