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

《网页制作软体简易教学讲义》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、FrontpageExpress網頁製作軟體簡易教學講義By莊靜圓1998年11月±基本觀念的建立一、什麼是HomepageHomepage由Html文件構成的；在homepage上的文字大小及顏色、插圖、音樂、表格、清單等都是由Html來控制的。HtmlHyperTextMakeUpLanguage，是一種標籤(Tags)語言，實際上只是一種純文字檔，需透過瀏覽器(IE或Netscape)才可以看到美麗多元化的檔。Tags數個Tags可以構成Html，而Tags是以<>來表示，在Html包括了起始

2、標籤<>及終止標籤，但不每一種標籤都有起始及終止標籤，有的只有終止標籤。Ø組成概念：Tags→Html→Homepage→WWW→Internet-11-一、Homepage的優點思考Homepage可以做什麼？可以呈現什麼樣的效果？二、寫作homepage的工具傳統是自己寫指令（Html），現在有許多類似Word介面的軟體出現，不再需要自己撰寫複雜的指令，但最好還是要對指令有基本的認識。製作Homepage的工具如記事本、Word、Htmlabc、FrontpageExpress、HotDo

3、g...等多種編輯體。本次教學所使用的編輯軟體FrontPageExpress，有WYSIWYG的功能（WhatYouSeeIsWhatYouGet），也就是「所見即所得」，你現在所看到的，也將會和在WWW上看到的一樣。不用自己撰寫指令，且是中文介面，使用介面也亦操作。三、寫Homepage的基本注意事項Ø取檔名時，最好都使用英文，且在八個位元以內（也就是八個英文字母以內）；並注意檔名最好要和該內容有相關，以免日後混淆、不知道哪個檔案是哪個內容。Ø首頁最好取名為index.html或default.

4、html（以index.html較好），因為若這完全是屬於你自己的網頁而你想掛上網時，一般的Server會有這樣的要求。Ø內容中所插入的圖檔、音樂檔、視訊檔…等，或做超連結自己的檔案時，都不要寫出路徑，只要直接寫出檔名即可，以免日後掛上網會產生路徑的錯誤。Ø一定要將所有檔案（包括Html檔、圖案檔、聲音檔、視訊檔…）放在同一個資料夾內。Ø在Homepage中，只支援兩種圖檔，JPG（JPEG）及GIF檔：音樂檔也只支援MID檔及WAV檔。±FrontPageExpress簡易教學一、啟動FrontP

5、ageExpressØ方法：開始→程式集→InternetExplorer→FrontPageExpress，如圖一。Ø啟動FrontPageExpress後，畫面顯示如圖二。圖二FrontPageExpress介面圖一啟動FrontPageExpress二、介面簡要說明-11-狀態工具列功能表格式工具列標準工具列表單工具列網頁編輯區圖三FrontPageExpress介面說明P.S.若某一工具列沒有出現，請到功能表中的「檢視」點選。三、功能表的介紹Ø檔案：功能和一般Word一樣，可以開啟舊檔、開啟

6、新檔、存檔…等﹔其中還包括了畫面內容，可設定Homepage的檔名、背景音樂、背景處理、邊界空間…等。圖四檔案功能表Ø編輯：文字的複製、剪下、貼上、還原（只能還原一次）…等。（見圖五）Ø檢視：可以選擇是否要將各工具列呈現在畫面（使用介面）上。（見圖六）Ø插入：可插入各種Homepage的效果，包括了水準線、特殊符號、圖像、音樂、捲動式-11-字幕（只有InternetExplorer支援）。（見圖八）Ø格式：主要是字型（大小、顏色、粗體、斜體、體形…）的設定。（見圖七）圖八插入功能表圖六檢視功能表圖

7、七格式功能表圖五編輯功能表三、文字排版Ø步驟一先在網頁編輯區打上一些文字，並反白。Ø步驟二（1）使用下列工具可以更改原來的字型樣式（格式工具列）。文字向左、中間、右對齊底線粗體變大變小文字向前或向後縮排斜體在文字前加上號碼或符號（若要更改號碼或符號則「格式→分項和符號」）字的顏色圖九文字排版範例改變字的字形（2）另一種更改原來的字型樣式的方法（格式→字型）﹔也有特殊樣式，如字的閃爍…等。-11-＊一般大小，等於是三號大小。＊打字機的字較一般小一點。四、背景處理（格式→背景）Ø背景可用兩種方法處理（1

8、）單一顏色（2）圖案（浮水印：背景不會因捲軸捲動而跟著動）Ø超連結顏色的設定五、插入水準線（插入→水準線）水準線快按兩下Ø修改水準線的樣式快按兩下，即可修改水準線的寬度、高度、對齊方式、顏色…等。六、插入圖像（插入→圖像）-11-Ø步驟一使用「瀏覽」來選擇檔案。（只支援JPG或GIF檔）Ø步驟二可修改圖的大小，並利用向前或向後縮格來移動圖的位置。滑鼠點上圖形，周邊出現小方點可拉放圖形的大小Ødoubleclick圖十插入圖片圖片，可修改圖片的內容。（替代顯示：若網路上