《网页设计实务.ppt》由会员分享,可在线阅读,更多相关《网页设计实务.ppt(30页珍藏版)》请在三一办公上搜索。
1、網頁設計實務,基礎HTML介紹週次:2建國技術學院 資管系 饒瑞佶2003年9月19日,何謂HTML?,Hyper Text Markup Language(HTML)上製作的語言,是一種標記語言。需透過瀏覽器翻譯標記後方可呈現。HTML 標準之原始資料,除標準HTML標記外,各瀏覽器廠商也自訂專屬的標記,何謂標記語言?,Tag Language製作文件的過程中必須加入所謂的標記【】,好讓瀏覽器知道該如何處理及呈現原始文件的內容。在語法中,除了少數例外,大都是以:開始,以結束;其中XX就是的標記。,Web Server vs.Browser,Client 端,Web Server,瀏覽結果會因
2、Browser不同而不同,HTML標記,.要顯示之文件資料.Document Of Display.,有頭有尾,中間夾住所要顯示的文字或圖形純文字檔無大小寫之分檔名需要是.HTM或是.HTML,HTML標記類別,文件結構標籤(Document Structure Tags)區段格式標籤(Block Formatting Tags)字元格式標籤(Character Formatting Tags)清單標籤(List Tags)連結標籤(Anchor Tag)多媒體標籤(Multimedia Tag)表格標籤(Table Tags)表單標籤(From Tags),文件結構標籤,.:標示HTML文件
3、的啟始,終止處.:標示文件標頭區.:標釋出文件主題區,.:標示HTML文件的啟始,終止處.:標示文件標頭區.:標釋出文件主題區,區段格式標籤,.:標示HTML文件的啟始,終止處.:標示文件標頭區.:標釋出文件主題區,.:文件抬頭.:i=1,2,.,6網頁標題.:產生水平線.:強迫換行.:文件段落.:以原始格式顯示.:標註聯絡人姓名電話地址等資訊.:區段引言標記,字元格式標籤,.:標示HTML文件的啟始,終止處.:標示文件標頭區.:標釋出文件主題區,.:粗體字.:斜體字.:改變字型設定.:向中對齊.:文字閃爍.:加大字型.:縮小字型,清單標籤,.:無編號清單.:有編號清單.:清單項目.:定義式清
4、單.:定義描述.:目錄式清單.:選單式清單,連結標籤,.:建立超連結,多媒體標籤,.:嵌入影像.:嵌入多媒體物件.:背景音樂,標準HTML之架構,瀏覽器抬頭列顯示的訊息 網頁主體內容,使用記事本練習.,HTML,表格標籤,用以定義以橫列與直欄構成的表格。包含許多選擇性元件與屬性。,表格元件,CAPTION表格標題TR表格列COL表格欄TH儲存格標題TD儲存格資料,表格子元件,說明,每一子元件均包含若干屬性,表格標題標題一標題二第一列,內容一第一列,內容二第二列,內容一第二列,內容二,基本表格樣本,WIDTH表格的寬度HEIGHT表格的高度BORDER表格的外框線寬度FRAME表格的外框線顯示方
5、式RULES儲存格的框線顯示方式CELLSPACING儲存格間格大小CELLPADDING儲存格內邊留白大小ALIGN表格的水平排列方式BGCOLOR表格的底色(背景色彩)BORDERCOLOR表格的外框線顏色,表格元件屬性,通常以下列兩種方式定義。像素值:width=200百分比值:width=20%,表格寬度-WIDTH,格式,通常以下列兩種方式定義。像素值:height=200百分比值:height=50%,表格高度-HEIGHT,格式,以像素為表示單位。如不指定,預設值為 0,即不顯示。,表格外框線寬度-BORDER,格式,共計九種顯示方式。void:不顯示外框線。above:只顯示上
6、框線。below:只顯示下框線。hsides:只顯示水平框線。vsides:只顯示垂直框線。lhs:只顯示左框線。rhs:只顯示右框線。box:顯示所有框線。border:顯示所有框線。,表格外框線顯示方式-FRAME,共計五種顯示方式。none:不顯示內框線。groups:只顯示列組與欄組間的框線。rows:只顯示水平框線。cols:只顯示垂直框線。all:顯示所有內框線。,表格內框線顯示方式-RULES,通常以下列兩種方式定義。sRGB值:borderColor=#FF0000顏色名稱:borderColor=red,表格框線色彩-BORDERCOLOR,格式,通常以下列兩種方式定義。sRGB值:bgColor=#000080顏色名稱:bgColor=navy,表格背景色彩-BGCOLOR,格式,定義儲存格與儲存格之間的間格。通常利用像素大小來表示。,儲存格間格大小-CELLSPACING,格式,定義儲存格邊緣與內含文字的間隔。通常利用像素大小來表示。,儲存格內留白大小CELLPADING,格式,共計三種排列方式。left:靠左對齊。right:靠右對齊。center:置中。,表格水平排列方式 ALIGN,格式,ColSpan 與 RowSpan 屬性,畸形表格的產生,畸形表格的HTML標籤,正常,畸形,