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