網頁設計PPT課件--第1章.ppt

網頁設計,目 錄,第1章 HTML基礎 第2章 列表、圖像及超鏈接 第3章 表格、表單及框架 第4章 CSS 第5章 網頁制作技術進階,課件下載,第1章 HTML基礎,1.1 HTML 概述 1.2 頁面顏色控制 1.3 文本段落控制 1.4 文字格式控制,如今，公司、企業(yè)和個人都在建設自己的Web站點，編寫自己的Web網頁，HTML正是創(chuàng)建網頁的基礎語言。 HTML是英文Hyper Text Markup Language的縮寫，意為超文 本標記語言，是一種用來編寫超文本文檔的簡單標記語言。用HTML編寫超 文本文檔稱為HTML文檔，它用于描述網頁內容的排版、顯示方式，最后要 通過WWW瀏覽器顯示出來，就是我們看到的網頁。所謂超文本是指文檔中 還可以有圖片、聲音、動畫、影視等內容。 HTML帶來了超鏈接的技術，即瀏覽網頁時通過單擊鼠標可以從一個主 題跳轉到另一個主題，從一個頁面跳轉到另一個頁面，從而可以與世界各地 主機文件鏈接，直接獲取相關主題。,HTML的具體功能： 1格式化文本。如設置文本的對齊方式、字體、顏色等。 2建立超鏈接。鼠標點擊獲得指定的目標；設置超鏈接樣式等。 3建立列表。以列表方式顯示信息，方便閱讀。 4插入圖形。如設置圖像的樣式（如大小、邊框、布局等）。 5建立表格。 6加入表單、控鍵等。這是客戶與網頁交互的主要渠道。 7加入多媒體。如聲音、視頻、動畫。,1.1.1 HTML的功能,1.1 HTML概述,1.1.2 創(chuàng)建一個簡單的HTML頁面,創(chuàng)建HTML文檔可以使用熟悉的文本編輯器(如記事本或寫字板)，瀏覽HTML頁面需要使用Web瀏覽器，如IE (Internet Explorer)、Firefox等。,【例1-1】創(chuàng)建一個簡單網頁，網頁文件名為Cha1-1.htm。 (1) 用記事本編輯HTML文檔 單擊“開始”“所有程序” “附件”“記事本”， 在其中輸入HTML文檔內容， 如右圖所示。, 保存HTML頁面文件：在記事本菜單欄中單擊“文件”“保存”，在彈出的“另存為”對話框中選擇存放的文件夾“第1章”，文件名欄中輸入“Cha1-1.htm”，選擇保存類型為“所有文件”，如下圖所示。, 最后單擊【保存】，則一個文件名為“Cha1-1.htm”的HTML網頁文件創(chuàng)建完畢。下圖所示就是保存在第1章文件夾下的HTML網頁文件“Cha1-1.htm”。 HTML文件的后綴名為.htm或.html。,(2) 瀏覽HTML頁面 找到“Cha3-1.htm”文件，雙擊它，或右鍵單擊后再單擊“打開”，顯示結果如圖所示。, Cha1-1.htm文檔說明,到稱為頭部 “簡單網頁示例”定義頁面標題； “”之間的內容構成注釋部分。注釋可以有多行，注釋的內容不會在瀏覽器上顯示。 到是內容部分 “ 進入”是定義一段文字“進入”； “”是設置一條水平線； “ Web世界! ”是以“h1”字號(最大號)定義一個標題“Web世界!”。,1.1.3 HTML文檔中的標簽,HTML文檔是純文本文件，由如 、 這樣一些標簽組成。標簽用來標記文檔中的元素，以設置文檔的布局、文字的格式、圖象的位置等等。 標簽結構： 說明： 標簽中的標簽名字不可少，但屬性可選, 如就是沒包含屬性。 標簽中的字母不區(qū)分大小寫，如可寫成。 “”與標簽名字之間不能有空格，標簽名字中也不能加入空格(尾標簽中也，同樣)。,標簽有雙標簽和單標簽之分。 雙標簽是由和組成的成對標簽。 如 和 是一對雙標簽。單標簽就是只有始標簽而沒有尾標簽的，控制的內容跟隨其后。 如就是個單標簽。,1.1.4 HTML文檔的基本結構,1. HTML文檔的基本結構,2. HTML文檔的頭部 HTML文檔的頭部在、雙標簽中，但頭標簽對、 可以省略。 頭部用于放置網頁標題、網頁基地址、元信息、關聯(lián)鏈接等信息，這些信息在網頁中是不顯示的。 一個HTML文檔可以沒有頭部。, 頭部信息 ,在頭部中可以放置下列標簽： 、 設置HTML網頁的基地址，基地址定義其后所有鏈接的相對地址起點。 說明一些與網頁有關的信息，如網頁語言的編碼方式。 設置網頁語言的編碼方式時使用 標簽中charset屬性，純英文網頁可以不設編碼，簡體中文網頁使用 charset=gb2312，繁體中文使用charset=big5。如簡體中文可如下設置： ,3. HTML文檔的主體 主體中放置要在網頁中顯示的內容，如文本、圖像、表單、超鏈接等等。 主體中可以包含標題、段落、表格、水平線、層等標簽。 和必須成對使用。, 文檔主體(正文) ,1.1.5 習題,1. HTML文檔的基本結構由哪幾部分組成？ 2. 使用記事本創(chuàng)建網頁有哪幾個主要步驟？ 3. 按照例1-1的步驟，將該例在計算機上做一遍。 4. 編寫一個HTML文檔，顯示結果如右圖。,1.2 頁面顏色控制,1.2.1 標簽的屬性,每個標簽都有自己的一些屬性，它們用于進一步設置該標簽相關的顯示方式，其格式如下： 雙標簽中，屬性只能放在始標簽中。 屬性是可選的，可以按任何順序設置。如未設置某個屬性，就使其默認值。 標簽名、屬性名、等號、屬性值之間允許有空格和換行符，很多屬性值的雙引號也可以省略，但建議不要省略，更規(guī)范一些。,主體標簽有多個屬性，它們是控制整個頁面顯示方式的。控制顏色的屬性如右（表1-1）。,1.2.2 設置頁面的背景色和前景色,默認情況下，網頁的背景色為白色，前景色為黑色。 利用 標簽中的 bgclcor 屬性和 text 屬性可分別設置網頁的背景顏色和文字顏色。 【例1-2】 創(chuàng)建一個簡單網頁，設置其背景色為黃色，文字為紅色。網頁文件名為Cha2-1.htm。 步驟：（1）利用修改 Cha1-1.htm建立文檔， 以減少編輯工作量。 在打開Cha1-1.htm文檔 后，將文檔內容修改為 如右圖所示。,（2）保存。利用“另存為”命令文件將保存為：“Cha1-2.htm”。 顯示效果：,1.2.3 顏色值,HTML文檔中的顏色是由三原色“red”、“green”和“blue”組合而成的RGB格式數(shù)字，每個原色都有256個色度，即可取值0255，具體是用十六進制數(shù)來代表，所以只需要2位即可表示。由于每個原色有256種，故三種原色一共可組合成1677721種顏色。 顏色值表示： “#RRGGBB”格式 其中的每個字母代表一個十六進制數(shù)，RR、GG、BB分別 設置紅、綠、藍三色的彩度。 例. bgcolor=“#00ff00”，表示將背景顏色設置為綠色。, “RGB(r,g,b)”格式 其中的r、g、b是個0255之間的整數(shù)。 例. bgcolor=“RGB(0,255,0)”，表示將背景色設為綠色。 “RGB(r%,g%,b%)”格式 其中的r、g、b是個0100之間的實數(shù)，也就是將 格式中的0255數(shù)字轉換為百分比表示。 例. bgcolor=“RGB(100%,0%,0%)”，表示將背景顏色設置為紅色 。,對于一些常用的基本顏色，還有相應的英文詞對應，以方便使用，如cha1-2.htm文檔中的用法：bgcolor=“yellow”。,1.2.4 設置頁面的背景圖案,利用標簽中的background屬性可將網頁的背景設置為一個圖片。,【例1-3】創(chuàng)建一個簡單網頁，將其背景設置為一個圖片。,（1）編寫文檔 打開Cha1-2.htm文檔，做如下修改： 修改為： “現(xiàn)在網頁的背景是黃色”修改為：“現(xiàn)在網頁的背景是圖片” 注意：“BaiYun.jpg”是個圖象文件，要放在Cha1-3.htm文檔一起。如果圖象文件在其它文件夾中，如在D盤根目錄下，則該句應改為： （2）保存文檔。文檔另存為Cha1-3.htm。 顯示結果：,1.2.5 習題,1. 回答下列問題： 控制整個頁面顯示方式的屬性應該放在哪里？ 設置文字顏色的屬性名怎樣拼寫？ 設置背景顏色的屬性名怎樣拼寫？ 怎樣設置頁面的背景圖案？ 2. 寫出顏色的三種表示方法。 3. 重新制作1.1.5中習題4的網頁，使背景顏色變?yōu)辄S色。 4.到計算機中搜索一幅圖片，將該圖片作為背景圖案加入到1.1.5中習題4的網頁中。,1.3 文本段落控制,1.3.1 標題標簽 、分段標簽和換行標簽,文本是網頁的基本內容，標題標簽、分段標簽和換行標簽是控制文本格式的標簽。 1. 標題標簽 文本按內容分為不同層次，標題是不同層次的文本內容的概述。 標題由雙標簽、控制，格式如下： 標題內容 其中的n是標題的級別，分為6級：h1、h2、h3、h4、h5和h6。每一級在瀏覽器中的顯示樣式都不同, n越小, 級別越高,即字號越大。,標簽有個“align”屬性，取值有l(wèi)eft、center、right，它們控制標題的三種對齊方式：左、中、右，默認是靠左。,1.3.1 標題標簽 、分段標簽和換行標簽,使用標題 這是一級標題 這是二級標題 這是 三級標題 這是 四級標題 這是五級標題 這是六級標題 這里不是標題 ,【例1-4】創(chuàng)建一網頁，在其中設置6個級別的文本標題。 文檔的代碼：,2. 分段標簽和換行標簽 HTML中使用雙標簽、對文本進行分段，尾標簽可以省略。 標簽也有“align”屬性，取值和意義與標題標簽相同。 、之間可以包含文本等內容，也可以包含后面章節(jié)介紹的內聯(lián)標簽，如、等標簽，但不可以包含標題標簽。,瀏覽器顯示一個標簽分段時，前后自動換行，并空出一行。內容默認左對齊，首行不退格。每對分段標簽之間的文本中原有的換行及其多于一個的空格將被忽略。 用標簽控制文本段落時，兩個段落之間會空出一行。如果不希望中間有空行，則可使用換行標簽，這是個很簡單的單標簽，其作用就是回車換行。,【例1-5】 使用分段標簽和換行標簽顯示文本。, 分段標簽、換行標簽示例 1.3.1 標題、分段和換行標簽 , 分段標簽之間可以包含文本等內容，也可以包含后面 章節(jié)介紹的內聯(lián)標簽，但不可以包含標題標簽。 瀏覽器顯示一個分段時，前后自動換行，并空出一行。 每對分段標簽之間的 文本中原有的換行 及其多于一個的空格將 被忽略，內容 默認 左對齊。 首行不退格。 ,1.3.2 居中對齊標簽和原樣顯示標簽,居中對齊標簽是雙標簽，用于控制段落居中對齊。 原樣顯示標簽也是雙標簽，在中的文本將呈原樣顯示，包括空格、換行等。,【例1-6】居中對齊標簽和原樣顯示標簽示例。, 居中對齊標簽和原樣顯示標簽示例 現(xiàn)在是標題，居中對齊 現(xiàn)在是段落，居中對齊 現(xiàn)在文本呈原樣顯示（現(xiàn)字前有4個空格） 比上一行再多空4格（2個中文字） 前面有12個空格 h3級標題，h前有2個空格 ,1.3.3 層標簽和短行標簽,1. 層標簽 層標簽是雙標簽，作用和段標簽類似，使控制的內容連續(xù)地顯示，忽略文本中的換行符及過多的空格。但p標簽使控制的內容與前后其它元素間自動保持一個空行，而div標簽控制的內容結束時不空行。 另外，div標簽可以嵌套，可以與自己嵌套，也可以嵌入p標簽中，而p標簽是無法嵌套的。 【例1-7】層標簽示例。, p標簽使控制的內容連續(xù)地顯示，忽略文本中的換行符及過多的空格?，F(xiàn)在是p的 顯示樣式。 p標簽使控制的內容與前后其它元素間自動保持一個空行?，F(xiàn)在是p的顯示樣式。 div標簽使控制的內容連續(xù)地顯示，忽略文本中的換行符及過多的空格?，F(xiàn)在是div 的顯示樣式。 div標簽控制的內容結束時不空行?，F(xiàn)在是div的顯示樣式。 p標簽不能嵌套，而div標簽能嵌套。本段正是嵌套在 內層的div標簽控制的內容。 現(xiàn)在外層結束。 ,2. 短行標簽 短行標簽是雙標簽，與標簽、標簽類似，也是使控制的內容連續(xù)地顯示，忽略文本中的換行符及過多的空格。但是，p標簽和div標簽都控制著整個行，控制的區(qū)域形成一個矩形塊，而span標簽僅僅控制行中的一部分，所以叫做短行標簽。span標簽也能夠嵌套，它往往嵌入p、div等標簽中，控制行中一部分的內容 。,【例1-8】 短行標 簽示例。, p標簽、div標簽、span標簽都使控制的內容連續(xù)地顯示， 忽略文本中的換行符及過多的空格。 但是，p標簽和div標簽都控制著整個行，控制的區(qū)域形成一個矩形塊。而span標簽僅僅控制行中的一部分， 所以叫做短行標簽。 span標簽也能夠嵌套，它往往嵌入p、div等標簽中，控制行中一部分的內容。 ,1.3.4 習題,1. 回答下列問題： 本節(jié)的七個標簽的名稱怎樣拼寫？哪些是單標簽？ 段標簽的文本中，換行及其多于一個的空格起作用嗎？ 如果希望多段文本都居中對齊，用什么方法最簡便？ 原樣顯示標簽中的換行及多個空格起作用嗎？ 2. 利用 、 設計如右上圖所示的頁面。 3. 利用、設計如右圖所示網頁。 4. 利用居中標簽中嵌套原樣顯示標簽設計如下圖所示網頁，要求所有文字都始終相對居中，例如窗口變寬時的效果如下面右圖所示。,1.4 文字格式控制,1.4.1 文字格式控制標簽,網頁中的文字可以通過文字格式控制標簽 (雙標簽)控制格式，它有以下三個屬性： face 設置文字的字體。 face的取值有多種。如宋體(默認值)、黑體、隸書、 楷體_gb2312、Times New Roman、Arial等； size 設置文字的字號。 size的取值為17，默認值為3，數(shù)字越大文字就越大。 還可用+、-來設定字號的相對值(相對于默認值3的值)； color 設置文字的顏色。 color的取值就是1.2 節(jié)所介紹的顏色取值方法。 【例1-9】文字格式控制示例。, 文字格式控制 默認格式的文字 黑體 3號字 紅色 隸書 6號字 綠色 Arial 黃色 6號字 Times New Roman 1號字 ,1.4.2 HTML的專用字符,有些字符在HTML語言中有特殊意義，例如“”，稱為專用字符。 在網頁文本中顯示專用字符時，必須使用對應的特殊編碼或對應的字符代碼(稱為預定義實體或轉義碼)，否則有可能會出現(xiàn)不正確的顯示結果。 HTML的預定義實體由字符）三部分組成，分號可省略。 部