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

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