網(wǎng)頁設(shè)計PPT課件--第1章.ppt

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