网际网路网页的设计.ppt

網際網路網頁的設計 2.1 前言 全球資訊網（World Wide Web，簡稱WWW）是由超文字（HyperText）、超媒體（HyperMedia）、超連結（HyperLink）的技術所發展出來的。 所謂的超文字、超媒體的技術，其實就是使用”連結”的觀念，讓文中某些特定的資料可以擴展，指向其他的資訊媒體，而使用者只需透過全球資訊網（WWW）中的瀏覽器，利用滑鼠輕選超連結，就可以連結其所指向的另一個資訊媒體。 藉由全球資訊網所達成的”超媒體連結”更是影響了傳統的資訊傳播方法，無論是公家機關或私人企業，也紛紛走向網路的『虛擬』世界。 在全球資訊網中，WWW所扮演的角色為資訊整合環境，而其中資訊傳遞的媒介就是利用網頁（HomePage）來完成的。 網頁也就是由HTML文件所構成，HTML（Hyper Text Markup Language），即超文件標註語言。 2.2 HTML文件的基本結構 HTML 文件的基本結構包含二大部分： (1)標題區，或稱為控制碼，是利用一些『標籤』（Tags）命令來設定網頁文件的外觀，主要存放此文件的控制資訊 (2)主題區則存放此文件的內容 顏色的設定 設定背景圖案格式： BODY BACKGROUND=”圖檔名稱”…/BODY 設定背景顏色格式： BODY BGCOLOR=”#rrggbb”…/BODY 其中的 #rrggbb代表色彩三原色的組合。 設定頁面文字顏色格式： BODY TEXT=”#rrggbb”…/BODY 設定超連結文字顏色變換格式： BODY LINK=”#rrggbb” VLINK=”#rrggbb” ALINK=”#rrggbb”… /BODY LINK為設定尚未閱讀過的超連結文字顏色，VLINK（Visited Link）設定已經閱讀過的超連結文字顏色，ALINK(Active Link)設定動作中的超連結文字顏色。 註解 在編輯HTML文件時，如果要在文件中寫一些只給自己看，但不會顯示在瀏覽器上的註解，就必需用到「註解」這個標記。 其格式為＜!--…--＞。 標籤命令格式 大於()、小於()符號和置於其中的英文字，就是所謂的『標籤』(Tags)。 以標籤名稱為開始，/標籤名稱作結束，中央的文字則為內容，利用不同的標籤來控制其中的內容，瀏覽器會依照不同的標籤註解，產生許多不同的效果。 語法 (1)標籤名稱文字/標籤名稱 (2)標籤名稱 屬性＝參數文字/標籤名稱 (3)標籤名稱文字 文件資料的編排 字型格式類：主要控制字體的顯示樣式 (1)粗體字：B…/B 此區段的文字將以『粗體字』方式顯示。 (2)斜體字：I…/I 此區段的文字將以『斜體字』方式顯示。 (3)打字體：TT…/TT 此區段的文字將以『打字體』方式顯示。 (4)閃爍字：BLINK…/BLINK 此區段的文字將會產生閃爍的效果。 (5)置中體：CENTER…/CENTER 此區段的文字將被置於該行中央。 字型大小類：主要控制字型的顯示大小 (1)大一級字：BIG…/BIG 設定區段內文字字體的大小，比預設值大一級。 (2)小一級字：SMALL…/SMALL 設定區段內文字字體的大小，比預設值小一級。 (3)標題字：Hn …/Hn 其中n可由1至6，共可提供六種不同層級的標題，其用途為強調文件中的層級關係，其字型亦由大漸小。 字型控制類： HTML 提供一特別對字形控制的標籤 FONT…/FONT，此標籤內可包含數個控制參數，來控制字型的變化 語法 FONT SIZE=n COLOR=”#rrggbb” Face=”字型名稱” ……./FONT (1)SIZE=n : 控制字體的大小，n值由1至7，其預設值為3。 (2)Color=”#rrggbb”：控制字體的顏色，#rrggbb代表色彩三原色的組合 (3)Face=”字型名稱” ：控制字體的字型 HTML文件的分段方法 水平分割線：HR (1)格式：HR，未加任何參數，則為採用預設值 (2)格式：HR SIZE=n其中n由1至5 (3)格式：HR WIDTH=n可用百分比表示 (4)格式：HR WIDTH=n ALIGN=Var其中Var可以為 Var=Left 向左對齊 Var=Middle 向中對齊 Var=Right 向右對齊 (5)格式：HR NOSHADE顏色加深，變成厚實心線 文件段落：P…/P 在P 標籤內可加入一參數align，用來表示整段文章的對齊方式，其可設定為 align=Right 向右對齊，align=Left 向對齊，align=Center向中對齊。 強迫換行：BR 在瀏覽器瀏覽文件時，遇到空白及換行符號通常會被忽略掉，但是若是需要換行時，則可在要換行的文字後方加入B