《网页设计实务》PPT课件.ppt

《《网页设计实务》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《网页设计实务》PPT课件.ppt（30页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、網頁設計實務網頁設計實務基礎HTML介紹週次：2建國技術學院資管系饒瑞佶2003年9月19日何謂何謂HTML?HyperTextMarkupLanguage（HTML）上製作的語言，是一種標記語言。需透過瀏覽器翻譯標記後方可呈現。HTML標準之原始資料除標準除標準HTML標記外，各瀏覽器廠商也自訂專屬的標記標記外，各瀏覽器廠商也自訂專屬的標記何謂標記語言何謂標記語言?TagLanguage製作文件的過程中必須加入所謂的標記【】，好讓瀏覽器知道該如何處理及呈現原始文件的內容。在語法中，除了少數例外，大都是以：開始，以結束；其中XX就是的標記。WebServervs.BrowserClient 端

2、Web Server下載HTML文件，由客戶端瀏覽器執行*.htm*.htm瀏覽結果會因瀏覽結果會因Browser不同而不同不同而不同HTML標記標記.要顯示之文件資料.DocumentOfDisplay.有頭有尾有頭有尾，中間夾住所要顯示的文字或圖形中間夾住所要顯示的文字或圖形純文字檔純文字檔無大小寫之分無大小寫之分檔名需要是檔名需要是.HTM或是或是.HTMLHTML標記類別標記類別文件結構標籤(DocumentStructureTags)區段格式標籤(BlockFormattingTags)字元格式標籤(CharacterFormattingTags)清單標籤(ListTags)連結標籤

3、(AnchorTag)多媒體標籤(MultimediaTag)表格標籤(TableTags)表單標籤(FromTags)文件結構標籤文件結構標籤.:標示HTML文件的啟始,終止處.:標示文件標頭區.:標釋出文件主題區.:標示標示HTML文件的啟始文件的啟始,終止終止處處.:標示文件標頭區標示文件標頭區.:標釋出文件主題區標釋出文件主題區區段格式標籤區段格式標籤.:標示HTML文件的啟始,終止處.:標示文件標頭區.:標釋出文件主題區.:文件抬頭.:i=1,2,.,6網頁標題.:產生水平線.:強迫換行.:文件段落.:以原始格式顯示.:標註聯絡人姓名電話地址等資訊.:區段引言標記字元格式標籤字元格式

4、標籤.:標示HTML文件的啟始,終止處.:標示文件標頭區.:標釋出文件主題區.:粗體字.:斜體字.:改變字型設定.:向中對齊.:文字閃爍.:加大字型.:縮小字型清單標籤清單標籤.:無編號清單.:有編號清單.:清單項目.:定義式清單.:定義描述.:目錄式清單.:選單式清單連結標籤連結標籤.:建立超連結多媒體標籤多媒體標籤.:嵌入影像.:嵌入多媒體物件.:背景音樂標準標準HTML之架構之架構瀏覽器抬頭列顯示的訊息網頁主體內容使用記事本練習.HTML表格標籤1.用以定義以橫列與直欄構成的表格。2.包含許多選擇性元件與屬性。表格元件表格元件 1.CAPTION表格標題2.TR表格列3.COL表格欄4.

5、TH儲存格標題5.TD儲存格資料表格子元件表格子元件說明每一子元件均包含若干屬性表格標題標題一標題二第一列，內容一第一列，內容二第二列，內容一第二列，內容二基本表格樣本基本表格樣本WIDTH表格的寬度HEIGHT表格的高度BORDER表格的外框線寬度FRAME表格的外框線顯示方式RULES儲存格的框線顯示方式CELLSPACING儲存格間格大小CELLPADDING儲存格內邊留白大小ALIGN表格的水平排列方式BGCOLOR表格的底色(背景色彩)BORDERCOLOR表格的外框線顏色表格元件屬性表格元件屬性通常以下列兩種方式定義。1.像素值：width=2002.百分比值：width=20%表

6、格寬度表格寬度-WIDTH格式通常以下列兩種方式定義。1.像素值：height=2002.百分比值：height=50%表格高度表格高度-HEIGHT格式1.以像素為表示單位。2.如不指定，預設值為0，即不顯示。表格外框線寬度表格外框線寬度-BORDER格式共計九種顯示方式。1.void:不顯示外框線。2.above:只顯示上框線。3.below:只顯示下框線。4.hsides:只顯示水平框線。5.vsides:只顯示垂直框線。6.lhs:只顯示左框線。7.rhs:只顯示右框線。8.box:顯示所有框線。9.border:顯示所有框線。表格外框線顯示方式表格外框線顯示方式-FRAME共計五種顯

7、示方式。1.none:不顯示內框線。2.groups:只顯示列組與欄組間的框線。3.rows:只顯示水平框線。4.cols:只顯示垂直框線。5.all:顯示所有內框線。表格內框線顯示方式表格內框線顯示方式-RULES通常以下列兩種方式定義。1.sRGB值：borderColor=#FF00002.顏色名稱：borderColor=red表格框線色彩表格框線色彩-BORDERCOLOR格式通常以下列兩種方式定義。1.sRGB值：bgColor=#0000802.顏色名稱：bgColor=navy表格背景色彩表格背景色彩-BGCOLOR格式定義儲存格與儲存格之間的間格。通常利用像素大小來表示。儲存格間格大小儲存格間格大小-CELLSPACING格式定義儲存格邊緣與內含文字的間隔。通常利用像素大小來表示。儲存格內留白大小CELLPADING格式共計三種排列方式。1.left:靠左對齊。2.right:靠右對齊。3.center:置中。表格水平排列方式表格水平排列方式ALIGN格式ColSpan與RowSpan屬性畸形表格的產生畸形表格的產生ColSpan=3RowSpan=2ColSpan=2畸形表格的畸形表格的HTML標籤標籤正常畸形