介绍与FrontPage2000应用.ppt
HTML介紹與FrontPage2000應用,網頁製作班,講師：資訊中心系統發展組 王仁宏講師Email:remhommdu.edu.tw主辦：資訊推廣社 http:/www.mdu.edu.tw/iio協辦：資訊中心 http:/isc.mdu.edu.tw/isc,前言現在是一個資訊爆炸的時代，所有發生的人事物，幾乎都能跟網路有直接或是間接的關係，而網頁製作也成為現代人的基本技能，透過網頁製作的學習，你等於學會了第二種語言，利用網頁資訊在虛擬世界溝通的語言。,課程目標希望利用45節課的時間，讓所有學員對HTML有基本的認識，進而可以自己製作具水準網頁。,HTML介紹與FrontPage2000應用,第 一 課 認識HTML第 二 課 FrontPage工具介紹第 三 課 表格第 四 課 圖片的匯入第 五 課 超連結第 六 課 框架頁第 七 課 表單元件第 八 課 樣式表第 九 課 DHtml 動態網頁第 十 課 專題製作,課 程 介 紹,HTML介紹與FrontPage2000應用,第一課 認識 HTML,HTML介紹與FrontPage2000應用,第一課 認識 HTML,一、什麼是HTML？全名 Hyper Text Markup Language 超文件標記語言 是一種標記語言 是一種網路上流傳的標準格式 目前版本為 4.0,二、如何編輯HTML？只要是文字編輯器即可 記事本 WordPad FrontPage等等 HTML文件(網頁)的副檔名一定為.htm 或是.html,HTML介紹與FrontPage2000應用,一份基本的網頁應包含下列組成：宣告這份為 html 文件 宣告html文件結束,三、HTML的構成 html的構成是有結構的 html文件是由元件(element)所組成 元件是由標籤(tag)所包覆而成 例如：，即是一個網頁元件,第一課 認識 HTML,HTML介紹與FrontPage2000應用,四、常見的HTML的元件,第一課 認識 HTML,HTML介紹與FrontPage2000應用,註：還有很多html的元件不在表中，此表只列出常用的。,五、網頁各元件關係圖,第一課 認識 HTML,第一課 認識 HTML,HTML介紹與FrontPage2000應用,六、網路元件介紹,HEAD元件(標頭資訊)head元件是由標籤所包覆的區塊，用來表示這份網頁的資訊，例如標題、文件的編碼、文件的期限等等，裡面可包含下列的元件：Meta元件(這是一份中文BIG5編碼的文件)(五秒後，請幫我轉到 http:/.tw 的網址)Title元件 這是我的第一張網頁Base元件 這張網頁的預設連結，預設都連結到left的框架頁中。,例子說明：http:/.tw 奇摩站,BODY元件(文件主體)body元件是由標籤所包覆的區塊，用來表示這份網頁的主體，裡面可包含很多的元件：Body的屬性：Bgcolor屬性背景顏色Background屬性背景圖片Link、vlink、alink屬性超連結的顏色 Scroll背景圖片要不要跟著scrollbar移動。,例子說明：範例body屬性.htm,第一課 認識 HTML,HTML介紹與FrontPage2000應用,table元件(表格)table元件是由標籤所包覆的區塊，用來表示一個表格，裡面可包含下列的元件：table的屬性及元件：Bgcolor屬性 Background屬性 border屬性設定表格的框的寬度 Width、height屬性設定表格寬跟高 Cellspacing(欄跟欄之間的距離)、cellpadding(欄裡面字跟欄框的距離)屬性 Tr元件(列)Td元件(欄)(也具有像table一樣的屬性，包括bgcolor、width、height 等等),例子說明：範例table屬性.htm,第一課 認識 HTML,HTML介紹與FrontPage2000應用,第一課 認識 HTML,HTML介紹與FrontPage2000應用,標題元件標題元件是由等標籤所包覆的區塊，用來表示一個標題，可用下列的元件來表示：這是標題一,例子說明：範例Hn標題元件.htm,第一課 認識 HTML,HTML介紹與FrontPage2000應用,FONT元件(文字)Font元件是由等標籤所包覆的區塊，用來表示一段或是一個文字，可用下列的元件來表示：Font屬性 color 屬性 size 屬性 face 屬性這是Font元件,例子說明：範例font屬性.htm,第一課 認識 HTML,HTML介紹與FrontPage2000應用,文字標籤元件可以讓文字以不同的方式呈現：列舉常用的如下：粗體 斜體 底線 刪除線這是粗體,例子說明：範例文字標籤.htm,第一課 認識 HTML,HTML介紹與FrontPage2000應用,列舉清單元件可以讓文字以不同的方式列舉：列舉清單常用的如下：無序列舉 有序列舉 有序列舉 type 可為 1、A、a、I、i,例子說明：範例列舉清單標籤.htm,第二課 FrontPage工具介紹,HTML介紹與FrontPage2000應用,第二課 FrontPage工具介紹,三、熟悉操作介面請同學實際操作練習。,一、frontpage操作介面介紹由講師操作一遍，帶領同學們了解frontpage介面。,二、舊例重提【所見即所得】，就是這麼簡單！,HTML介紹與FrontPage2000應用,第二課 FrontPage工具介紹,第三課 表格,HTML介紹與FrontPage2000應用,第三課 表格,一、範例練習,用FrontPage來製作表格如何劃表格？如何調整大小如何設定顏色？如何設定邊框？如何利用表格來排版？,HTML介紹與FrontPage2000應用,第三課 表格,第四課 圖片的匯入,HTML介紹與FrontPage2000應用,第四課 圖片的匯入,一、常見的圖片格式常見的圖片格式有下列兩種：,HTML介紹與FrontPage2000應用,第四課 圖片的匯入,二、如何插入圖片 三、圖片的設定 利用FrontPage圖片工具設定圖片,HTML介紹與FrontPage2000應用,第四課 圖片的匯入,第五課 超連結,HTML介紹與FrontPage2000應用,第五課 超連結,一、何謂超連結,Hypertext Link(超文字連結)包含文字的連結、圖片、電子郵件、書籤的連結舉例說明 http:/www.mdu.edu.tw超連結元件以表示,1.文字連結,範例說明連結呈現的文字如明道管理學院首頁,二、超連結的方式,HTML介紹與FrontPage2000應用,第五課 超連結,2.圖片連結,範例說明插入圖片如,3.電子郵件連結,範例說明連結文字如王仁宏的信箱,HTML介紹與FrontPage2000應用,第五課 超連結,進階提示：如果要加上寄信的主題時，可以利用下列方式如王仁宏的信箱,4.書籤連結,可連結到某網頁的某一段落(有做書籤的地方)書籤文字製作一個書籤如 我的書籤連結時，連到我的書籤,HTML介紹與FrontPage2000應用,第五課 超連結,三、本機位置與網路位置本機位置 file:/C:/網路位置 http:/或 ftp:/注意：製作網頁時，切記一定要使用網路位置，否則別人可是會連不到網頁的喔！四、超連結的開啟種類 置換本視窗 target=“_top”開新視窗 target=“_blank”置換掉自己的視窗 target=“_self”置換掉父視窗 target=“_parent”置換掉框架頁 target=“框架頁名稱”,HTML介紹與FrontPage2000應用,第五課 超連結,第六課 框架頁,HTML介紹與FrontPage2000應用,HTML介紹與FrontPage2000應用,一、何謂框架？簡單的來說，就是將整個視窗分隔成各自獨立的畫面。框架元件，其HTML碼如下：範例說明：將一張網頁切成下面圖示的框架 起始，設定框架寬度 設定第一個框架頁的資訊，跟預設超連結的目的框架 設定第二個框架頁的資訊 不支援框架時設定 此網頁使用框架,但是您的瀏覽器並不支援.框架元件結束以上需要幾張網頁？Ans：三張，主網頁一張，第一張框架、第二張框架總共三張。,第六課 框架頁,框架,框架,整個視窗,HTML介紹與FrontPage2000應用,第六課 框架頁,三、框架中的超連結1、框架的互相連結 target=“框架頁名稱”2、重提 標籤*溫故知新 置換本視窗 target=“_top”開新視窗 target=“_blank”置換掉自己的視窗 target=“_self”置換掉父視窗 target=“_parent”置換掉框架頁 target=“框架頁名稱”,main,contents,二、框架的好處，為什麼要用框架？1、維護容易2、瀏覽速度較快3、能將網頁作更多的運用及變化例子說明：http:/賣男人網,HTML介紹與FrontPage2000應用,第六課 框架頁,五、浮動式框架廣告時常用只有IE支援浮動式框架元件，其HTML碼如下：,四、用Front Page 來製作框架1、製作框架2、編輯框架的屬性3、控制框架的外觀4、做出無框的網頁,HTML介紹與FrontPage2000應用,第七課 表單元件,第七課 表單元件(略),HTML介紹與FrontPage2000應用,第八課 樣式表,第八課 樣式表,HTML介紹與FrontPage2000應用,第八課 樣式表,一、何謂樣式表？cascading Style Sheet 簡稱 CSS是一種公開的規格可以讓你更進階的控制字型、字體大小、背景顏色、邊框、邊界、排列方式等等進階的版面控制，讓改版更容易二、使用方式有三種：A.單項元件內設定針對某元件做樣式控制B.定義在單一網頁內用內嵌的css語法，掌控網頁所有配置C.以外部檔案連結可將css存成檔案，在用連結的方式做引用,三、如何撰寫樣式表？以來表示Font Font-size:9pt 寫在html元件中(以此類推),HTML介紹與FrontPage2000應用,第八課 樣式表,HTML介紹與FrontPage2000應用,第九課 DHTML動態網頁,第九課 DHTML動態網頁,HTML介紹與FrontPage2000應用,第九課 DHTML動態網頁,一、何謂DHTML？Dynamic HTML 簡稱 DHTML利用script或是css來控制各項網頁元件，並達到動態的效果，稱之為DHTMLCSS、Script、HTML的綜合運用,二、DOM：Document Object Model文件物件模型(瀏覽器的物件模型),window,screen,navigator,location,history,event,document,frames,Window objects,body,location,selection,HTML element object,childNodes,attributes,applets,anchors,all,children,links,images,frames,forms,embeds,StyleSheets,scripts,HTML介紹與FrontPage2000應用,第九課 DHTML動態網頁,三、物件模型的方法、屬性及事件方法Methodsalert,blur,close,confirm,focus,moveby,moveto,open,navigate,print,prompt,resizeBy,resizeTo,scroll,scrollBy,scrollTo,showModelessDialog屬性Propertieshistory,length,location,name,navigator,parent,self,status,top,returnValue事件EventsOnafterprint,onbeforeprint,onbeforeunload,onblur,onerror,onfocus,onhelp,onload,onresize,onunload,onclick,ondbclick,onkeydown,onkeypress,onkeyup,onmousedown,onmouseover,onmouseup,onmousemove,onmouseout,onchange,HTML介紹與FrontPage2000應用,第九課 DHTML動態網頁,四、範例解說,範例javascript.htm,HTML介紹與FrontPage2000應用,第十課 專題製作,第十課 專題製作,下次上課請同學記得帶一片磁片,HTML介紹與FrontPage2000應用,第十課 專題製作,一、一個好網站的要件時常更新互動(留言版、討論區)內容個人風格特色其他,二、好站介紹http:/.tw 猴戲一個flash做的非常不錯的網站，他的動畫會讓人陷入一種沉思的空間。http:/www.7site.idv.tw/七號試作机他裡面的網站連結，都是很好的網站喔！與大家分享！,三、利用frontpage作一個網站！檔案開新檔案web空白網站,HTML介紹與FrontPage2000應用,第十課 專題製作,四、專題製作題目,歡迎頁,主頁,四、專題製作題目(主頁),網站標題(用跑馬燈),歡迎光臨王小宏的個人網站,自我介紹,好站連結,其他,HTML介紹與FrontPage2000應用,第十課 專題製作,六、如何上傳網頁？廠商提供(網頁介面)ftp軟體(cuteftp)frontpage2000IE5瀏覽器,五、申請免費網路空間,Tacocity 章魚網 http:/.tw/,http:/(支援asp),http:/www.educities.edu.tw/,HTML介紹與FrontPage2000應用,第十課 專題製作,師 傅 領 進 門,修 行 在 個 人,課 程 結 束,
