1、第1章 網頁基礎,一.www基礎 二.網站和網頁 三.Html基礎及簡單頁面設計 四.Web頁面的顏色 五.給html文檔加注釋,一.www基礎,www（world wide web，簡稱互聯網），一直被人們稱作internet的“殺手應用程序”。它可以顯示普通文字和圖像并訪問其他頁面，而信息子頁則使得它成為internet上發(fā)展最快的部分。你可能已經掌握了在web上如何探索信息世界，但也有可能不太清楚如何向全世界發(fā)布你自己的信息有關你自己的信息，如你個人的興趣、你的工作等。 要創(chuàng)建自己的頁面，最基礎技術就是html（hypertext makeup language，超文本標記語言），現在絕

2、大多數web文檔都是由html編寫的。,www是一個全球性的、交互式的、動態(tài)的、多平臺的、分布式的、圖像超文本的信息系統(tǒng)。 要能在web上四處遨游，首先必須安裝一個web瀏覽器。有了自己的web瀏覽器后，在web上導航最簡單的方法就是結合瀏覽器的各種性能在各頁上移動。你可以通過選擇指定的高亮度顯示的文字、詞或圖像從一個頁面移至另一頁面，也可以利用該頁的地址或url（uniform resource locator）統(tǒng)一資源定位器來直接移至該指定頁。,不受地域的限制，只要互聯網保持連通就可以,訪問者和網站有交互的過程，提交信息、反饋信息,網站上的信息可以隨時隨地進行更新,不受操作系統(tǒng)平臺的限制，

3、如windows、linnux等系統(tǒng)平臺,一臺服務器，多臺客戶機構成分布式,可以在www上發(fā)布多媒體信息，如圖像和聲音、視頻等,Web瀏覽器的選用,現在可以得到許多web瀏覽器，他們遍及了幾乎所有的計算機系統(tǒng)。Web瀏覽器的功能是充當與web的接口，它們在internet上對特定的web頁面和文檔發(fā)出請求，當它們接收到文件后，就將格式化后的版本返回html文件并顯示到屏幕之上。安裝了web瀏覽器的計算機還可以處理ftp等方法的信息請求。,以下是常用的瀏覽器 1.Mosaic：最早開始web研究時使用的瀏覽器，不過現在一般沒人用了。 2.Lynx：基于文本的瀏覽器，是web訪問中僅限于文本訪問的

4、最佳選擇。但無法通過該瀏覽器看到web頁面的圖像。 3.Netscape navigator：曾一度是最流行的瀏覽器，它通過開發(fā)html擴展來提高web頁面的圖形品質。 4.Internet explor：簡稱ie，已經擁有同netscape navigator基本相同的特性，更由于其方便快捷、免費等特性而成了當今最流行的瀏覽器,尋找一個web編寫工具,Html編輯器或編寫工具是指不用進入html核心而為web頁面創(chuàng)建html文檔的程序。這些程序所使用的格式與允許人們在一頁上輸入文件或圖形的字處理器或頁面設計程序相似。 許多字處理器，如microsoft word都具有html的編輯功能。一般

5、的，人們都使用windows自帶的文本編輯器記事本程序來編寫。還有一些軟件，如microsoft frontpage和dreamweaver都內置一web編寫工具，這使得初學者在創(chuàng)建web頁面時更簡單。但是要學習更好的網頁設計制作（如動態(tài)網頁等），必須要掌握html的基本原理，所以這種情況下不宜使用frontpage和dreamweaver等可視化的網頁開發(fā)工具。,了解html的發(fā)展信息,要掌握html，就必須了解它的發(fā)展。大家可以通過下面?zhèn)z個鏈接了解html文檔草案的現狀、未來html的發(fā)展已經url的工作原理的升級文檔等。 1./:提供一個鏈接指向描述已被確

6、認為internet標準及現在被所有瀏覽器支持的html特性的文檔。 2./hypertext/www/addressing/addressing.html:講解url的各種類型和如何在web文檔中使用它們。,創(chuàng)建自己web頁面的要點,有了上訴基本知識以后，就可以開始學習創(chuàng)建自己的web頁面了。不過，在創(chuàng)建自己的頁面過程中，有一些非常有用的技巧，必須好好的記住。 1.首先要搞清楚自己要說的東西。這看起來是很自然的，但是許多頁面的不成功就是由于它們缺少重點，因為要展示給讀者的觀點一定要清楚明了。如果別人搞不懂你想說什么，就不會有興趣去讀你的主頁和其他頁面。 2.確

7、定好目標之后，就應該考慮頁面應包括的內容。此時就應該按內容分割材料。材料可以分布在幾頁上，也可以組合在同一頁面中，這取決于你的寫作方式。 3.除非頁面非常短，否則編寫一個簡單介紹web站點的目標、可得到信息及途徑的簡單頁面是很有幫助的。這一頁面應包括內容介紹及目錄，它可以使讀者能對繼續(xù)閱讀哪一頁做出迅速的判斷。此外，這一頁上還可包括指向有關所述論題的、更多信息的頁面鏈接。,4.如果可能，應該將每一頁都設計的簡短一些，每一頁的文本及圖形不應該超過一到兩個屏幕。如果一頁太長，則讀者不得不來回滾動屏幕以閱讀整份頁面，這樣就會打斷文檔的流暢性。如果頁面必須很長，則應在文檔中包括目錄和指向特殊位置的鏈接

8、，以使讀者便于找到所需信息。 5.不要在頁面上設置太多的圖形。圖形文件很大，意味著瀏覽器裝載一頁包括圖形的頁面會非常費時。盡管你的網絡連接可能非常的迅速，但是別人訪問你網頁可能相對很慢。 6.在決定將自己的頁面推向世界之前，應仔細檢查一下是否有錯誤和不佳之處。,二.網站和網頁,在我們開始學習網頁制作之前呢，先讓我們了解一下關于網頁的一些知識。 1.網頁和網站 2.動態(tài)網站和靜態(tài)網站 3.web1.0和web2.0,三.Html基礎及簡單頁面設計,HTML的編寫是指創(chuàng)制和定義html文檔的過程。重要內容: 1.Html標記 2.Html的基本結構 3.創(chuàng)建一個簡單頁面 4.瀏覽自己的頁面,文檔結

9、構和格式的定義是由html元素來完成的。而html元素是由單個或一對標記定義的包含范圍。一對標記是指一個起始標記和一個結束標記。一個起始標記是由一個元素名和后面的一個在小于號（）之間的屬性/值對系列組成。結束標記在元素前有一個斜杠（/），此外，它并不包括屬性/值列表。,1.Html標記,在html中，標記的語法如下： 要控制的文字 當用一組html標記將一段文字夾在中間時，這段文字與夾文字的標記被稱為一個組件。如： hehe 這就是一個組件，其中的title即為元素名，就是一個標記，hehe為該元素的內容，有時在元素名后面還有屬性。因此，在html文件中某個組件的完整定義語法如下: 組件數據

10、由以上可知，標記元素有四種格式： 空元素（沒有內容的元素） 帶有屬性的空元素 帶有內容的元素 帶有內容和屬性的元素,注意：在html標記中，英文大小寫字母的意義是相同的，也就是說和標記是一樣的。 由于標記的存在和使用，html擁有層次極為分明的基本結構。這對頁面的制作有很大的幫助。,2.Html的基本結構,由于在HTML語法中，每個由html標記與文字所形成的組件還可以包括另一組組件，因此，整個html文件就像一個大組件，還包含了許多小組件。 其中，所有的html文件最外層的組件，是由標記所建立的，在標記所建構的組件中，還包含了兩個主要的子組件，這兩個子組件是由標記與標記建立的。,標記：建立的

11、組件的內容為文件標題。其中并不放網頁的任何內容，而是放置有關有關html文件的信息，例如：文件的標題、編輯方式等等。這些信息大部分是提供索引、辨認和其他應用之使用。 標記：建立的組件是html文件的主體，也就是網頁的主要內容。依照各種html的控制，這些內容將呈現在瀏覽器的窗口中。 因此，所有文件的最基本結構如下：, ,從上圖中，我們可以容易的了解到整個html文件中所有的數據均被建立為一個一個組件，并組織為一個層次化的結構。 當利用html標記來定義組件時，定義標記不可交錯，否則將造成錯誤。下面的語法中，標記與標記彼此交錯，這樣是不對的，如果標記交錯時，我們無法區(qū)別兩個組件的范圍 ,3.創(chuàng)建

12、一個簡單頁面,創(chuàng)建一簡單頁面的基本步驟 1.打開一個html編輯器 2.編輯你的html文檔 3.保存html文檔 4.瀏覽你做的頁面,四.Web頁面的顏色,通過標記內屬性的設置，來達到控制web頁面的顏色的效果，主要內容： 1.為web頁面設置背景顏色 2.為web頁面設置文本顏色 3.在web頁面設置中為超文本鏈接設置顏色 4.利用圖像作為web頁面使得背景,1.為web頁面設置背景顏色,Html允許編寫者為其web頁面選擇各種各樣的顏色，包括背景、文本等等，這通過這種標記的常用屬性 Bgcolor屬性（用來控制頁面的背景顏色） 語法：bgcolor=“顏色” 其中，顏色可以通過兩種方式來

13、表示，可以直接指定顏色的英文名稱，常用的基本顏色名稱如表：,另外，也可以利用十六進制數值方式來指定顏色，顏色的表示方法如下： #RRGGBB 其中，RR代表紅色、GG代表綠色、BB代表藍色，我們以00到FF的值表示三種顏色成分的多少，以指定出三種原色以多少的成分組成新顏色。語法如下： 另外，ie支持3位數的顏色表示方法。與六位數的表示方法類似，不過就是位數少而已 #RGB分別表示紅綠藍的成分。 例如：綠色可以用“#0F0”表示 （實例）,2.為web頁面設置文本顏色,Text屬性 此屬性用于控制網頁中文字的顏色 Text=“顏色值” 有關顏色值的設定，與前面bgcolor屬性的說明一樣。 （實

14、例）,3.在web頁面設置中為超文本鏈接設置顏色,Link屬性、alink屬性、vlink屬性 Link屬性：控制的是網頁中未被選擇過的超鏈接的顏色 vlink屬性：控制的是網頁中已經被選擇過的超鏈接的顏色 Alink屬性：設置超鏈接在被選擇時的顏色 它們的語法分別為： Link=顏色值 Vlink=顏色值 Alink=顏色值 有關顏色值的設定，與bgcolor的顏色值的設定完全相同,4.利用圖像作為web頁面使得 背景,Background屬性 指定作為html文件背景的圖片，可以使用的圖文件格式為gif和jpg，其語法如下： Background=“文件名稱與路徑” 假如引用c:/html

15、/sub/目錄下的bg.gif圖文件作為html文件背景時，此屬性的設置語法如下： Background=“c:/html/sub/bg.gif”,五.給html文檔加注釋,和一般的程序語言一樣，html編輯者也可以對自己的語句進行注釋。一般來說，注釋是用來標示html語句的作用的，對程序的讀寫都有重要的作用。 注釋的格式如下: 或,一般來說，注釋有兩個用途; 1.在創(chuàng)建文檔時，為編輯文檔設計提供途徑，此類注釋將會對維護和修改極有幫助 2.一些應用程序要利用注釋在html中包括額外應用程序的特定信息,注釋的一般步驟如下： 1.打開一個html文檔 2.確定要添加注釋的位置 3.將插入點移至該位

16、置，插入注釋語句 4.保存文檔為.html文檔，在瀏覽器中查看顯示效果 （實例）,第1章 特殊字符、邏輯效果,一.特殊字符 二.字符的物理效果 三.字符的邏輯效果,一.特殊字符,在網頁中會看到許多特殊的符號標記，其中許多標記是不可能通過鍵盤直接輸入的，比如“”是html的一種標記，如果直接輸入這些標記，就會產生意想不到的錯誤。而一些ASCII之外的特殊字符也是無法直接輸入的。如果要顯示這些字符，就必須進行特殊符號的引用。,在html文檔中可以指定任何iso latin1字符，但是一般的編譯環(huán)境卻不一定包括這些字符。Html提供兩種引用類型來包含字符，這樣可以很方便地使用它們。（實例1.html

17、） 1.字符引用：通過使用iso latin1字符代碼可以包含任何字符。 2.實體引用：一些常用的字符已經被指定了助記符?？梢酝ㄟ^指定恰當的助記符來包含這些字符。 無論是字符的引用還是實體引用，都可在html文檔中輸入任何一個iso latin1字符。只是因為許多平臺并不支持全部的iso latin1字符集，html才提供了這兩種方法。,二.字符的物理效果,創(chuàng)建html頁面時，我們有時需要強調或將一個單詞或詞組同其他文本分開。這需要給特定的字符或文本以特殊的效果。正如字處理器提供了一些樣式（如黑體或斜體）來改變文本的顯示一樣，html也提供了一套改變字符顯示效果的手法，如黑體、斜體、下劃線以及

18、替換文本的尺寸和顏色。這樣的效果被稱為字符的物理效果。,字符顯示效果有黑體、斜體、下劃線等等，每種效果對應一個標記(2.html) :可使短至一個字母長至一整段的文本成為黑體。 :使其間的任何文本用斜體顯示出來 :任何位于之間的文本均以固定寬度的字體顯示出來，從而保證字的準確定位。 :給其間任意長的文本加下劃線。 :將位于之間的文本以刪除線格式顯示出來。 和: Sub標記將其間的文本放置在低于一行的位置上。 Sup標記之間的文本則比一行中的其他文本都要高一些。,對于文字而言，我們除了可以使用以上標記來控制其顯示效果外，還可以通過標記控制字符的字體、大小與顏色等。 要控制的文字 Font標記的屬

19、性 1.Face屬性：控制字符使用字體的屬性，其語法如下： Face=“字體名稱”，如果在所指定的字體名稱并不存在于用戶的系統(tǒng)中，將使用默認的字體。,2.Size屬性：控制字符大小的屬性。 語法如下： Size=“字符等級” 在ie中，字符的等級共有7級，7為最大的字號。 3.Color屬性：控制字符的顏色，語法如下： Color=“顏色” 顏色的設定可運用英文名稱或十六進制數值，與標記中bgcolor的設定方法一樣。 實例(4.html),標記 在文檔的開頭位置使用標記來改變整個文檔的大小，利用size屬性來改變默認的字符大小。例如，要創(chuàng)建一個默認字符大小為2的文檔。 其余同標記 實例(9.

20、html),專門控制字符大小的標記 和 實例(3.html),以上幾種方法可以達到改變字符大小原理： 當瀏覽器遇到一個或標記時，它就會將和(或)之間的文本按預定量放大或縮小。 當瀏覽器遇到一個標記時，它讀取其屬性并對字符的大小和顏色作出變動。 當瀏覽器遇到一個標記時，它按size屬性指定的字符大小調整這個頁面上所有文本。,三.字符的邏輯效果,除了字符的物理效果外，html還提供了一套稱為邏輯效果的標記，它們不僅可以指定在文檔文本中特定格式的效果，還能標出文本的含義。如標題樣式的使用、特別強調、制定引用等。 1.標題樣式的使用 2.增加強調和特別強調 3.包含小段代碼和變量 4.提供文字字符的樣

21、本 5.指示作為鍵盤輸入的文本 6.指定一個地址,1.標題樣式的使用,有時候，我們要給頁面添加幾個標題，有主標題和副標題等，但是又不想使各個標題的字號一樣大。這時候，我們可以通過標記來標識文檔中包含不同大小字號的主標題和副標題。 Hn標記標示的字符將以粗體的形式顯示在網頁中，語法如下： 標題字符 其中n是1至6的數字，表示標題的層次。 的標題最大，的標題最小,在標記中有一個較為常用的屬性align，用于控制標題的對齊方式。 語法如下： Align=left 或 Align=center 或 Align=right 這三個設定值依序把標題文字的對齊方式設為靠左對齊、居中對齊、靠右對齊。 實例(6

22、.html),2.增加強調和特別強調,在頁面中，我們可以不通過黑體或斜體的方法，而達到強調頁面中某些字詞的目的，這需要使用和標記。它們分別用作一般性強調和特別強調，可以高亮度顯示文本的特定區(qū)域。 當瀏覽器遇到一個標記時，它就使用瀏覽器中強調文本的特殊指示來強調位于之間的文本。 當瀏覽器遇到一個標記時，它就強調位于該標記之間的文本，如果再一次使用該標記，表示特別強調文本的特殊指示。 實例(7.html),3.包含小段代碼和變量,有時候我們有一些程序代碼樣本和變量需要放置在web頁面上。我們想使其同其他文本有所區(qū)別，但又不愿在物理形式處理上花費太多時間。我們可以使用和標記來實現這種效果。 標記將程

23、序代碼段以固定寬度字符顯示。這是因為瀏覽器將位于和標記之間的文本按其顯示代碼的樣式顯示。而位于和之間的文本則按變量的樣式處理，所以標記將程序或其他程序的變量以斜體顯示。,4.提供文字字符的樣本,在html中，我們使用標記來將位于和作為文字字符的樣本顯示。 當瀏覽器遇到一個標記時，它就根據其內置的規(guī)則格式化位于和之間的文本，通常，這種顯示文本的字符是固定寬度的。 另外，盡管標記的文本同用其他樣式標出的文本的顯示看起來是一樣的，但是最好還是用來引用一個特殊的樣本。,5.指示作為鍵盤輸入的文本,有時候設計者想在web頁中將一些輸入的樣本包括在一段計算機程序中，且使這些樣本樣式與格式化的標準文本不同。

24、在html中，我們使用html鍵盤樣式標記來標記由用戶自己輸入的文本，還可以使用它顯示計算機命令、參數，尤其是由用戶輸入的內容。 由標記的文本通常是使用固定寬度的字符。,6.指定一個地址,Html還運行用戶使用標記來指導有關web頁的創(chuàng)建者或維護者的信息。這一信息可以包括姓名、電子郵件地址、電話號碼、信件地址或其他相關信息。 實例(8.html),以上我們掌握了字符效果的基本樣式，包括字符的物理效果和邏輯效果。在實際應用中，如何利用這些樣式來美化自己的主頁，提出幾點建議 1.只有越少使用它們，才能越有效果。如果每隔一個詞就用黑體表示或將一大段文本顯示為斜體，是不會引起讀者任何注意的。 2.除了

25、要少用強調外，頻繁地把普通樣式改為黑體或斜體等樣式也會使文檔的閱讀變得困難，這是因為研究必須先停下來并調整到新的類型樣式之后才能繼續(xù)的閱讀下去。減少樣式的變換可以防止這個問題。,3.在www用戶和文檔創(chuàng)建者之間一直有很多關于正確使用與及與的討論。在大多數瀏覽器中，這些標記的功能是相同且可互換的。這里并沒有一條使用這些標記的正確方法。但是作為一條普通規(guī)律，我們應該考慮一下規(guī)則：在要強調一個字或詞時，使用或。當某個字或詞要求一個特殊的樣式時，例如書名或特定名稱，則使用或。當有疑問的適合，則強調包含這些字詞的句子，這時用或。如果想格式化一個文檔突出強調的字詞時，則用或。,4.Html還提供了一些在大

26、多數瀏覽器中顯示時難以區(qū)分的標記：、，它們均可使文本以固定寬度字符樣式顯示。但實際上，它們之間差別很大。當從一個程序中插入一些代碼時，使用標記。當你想要顯示用戶輸入程序的信息時，請使用標記。而利用標記就可以顯示文字字符的一個樣本，其他需要用固定寬度字符顯示的情況則可用處理。這些區(qū)別不僅使瀏覽器選用最佳方式來顯示信息，還可使掃描web頁的索引程序通過標記的使用準確識別代碼和鍵盤輸入等等。如果對于所有需要使用固定寬度字符的要求均只使用,則大多數瀏覽器的輸出看起來都是一樣的，但索引程序卻很難找出web頁面中的代碼和鍵盤輸入。,準確使用這些樣式，可以為自己的新主頁添色不少，也可使它們更易閱讀。如果小心

27、使用，物理樣式可以提高web頁的顯示效果。此外，正確使用內容樣式可以使讀者找到它們感興趣的東西，同時也便于索引程序更好地做出web頁內容的目錄。,第3章 表格,表格在對web頁上的信息格式和布局進行控制的較好方法，它定義格式化信息有著強大的功能，能夠控制各種信息的位置，使得頁面結構協調一致。 一.創(chuàng)建一個簡單表格 二.定義單元格的高度和寬度 三. 控制表格的邊框及邊框線 四.創(chuàng)建跨單元格的存儲格,在網頁中，表格的運用是非常重要的技巧。在html中，表格的建立主要就運用、四種標記來顯示完成的 1.和標記：用于表示一個表格的組件。一個表格組件將由數個行、存儲格、標題格子組件所組成。 2.：用于定義

28、表格的一行，一組標記內通常包含數組由或標記所定義的存儲格。 3.用于定義表格的存儲格。 4.：用于定義表格的標題存儲格，此存儲格中的文字將以粗體的方式顯示。,在一個最基本的表格組件中，必須包含一組標記，一組標記與一組標記。語法如下： ,一.創(chuàng)建一個簡單表格,1.創(chuàng)建一個簡單的表格 2.給表格添加一個標題 3.如果需要，把表格的第一行設計為表頭 4.給單元格和表格元素定義數據,1.創(chuàng)建一個簡單的表格,輸入和標記。如果要顯示表格單元格的邊框，則需在標記中添加border屬性。并為Border屬性設置值。如： ,2.給表格添加一個標題,使用和標記來添加標題，語法： 表格標題 如果要添加的標題位于表格

29、的上方，則將表格標題置于標記下一行，如： 表格標題 ,如果要將標題置于表格下方，則將表格標題置于標記之前。如： 表格標題 我們還可以像對待其他文本一樣，格式化和中的文本 表格標題,3.把表格的第一行設計為表頭,通過標記來指定表格中特殊表頭單元格，標記之后的文本作為表頭單元格的一部分?？梢栽诒砀竦娜我獾胤绞褂眠@個標記，表頭也不是必須要放在各列的頂部。 當表格的標記和表格標題輸入之后，在表格的每一列中放置一個標記和該列中的文本。 表格標題 第一列第二列第三列 ,4.給單元格和表格元素定義數據,使用標記來建立單元格，并往其中添加數據，它的用法與標記的用法十分相似。 個人資料 姓名居住地職業(yè) 張三北京

30、學生 李四上海工程師 王五深圳老師 ,標記的用法同類似，表格是用來創(chuàng)建表格中行的。如實例所示，表格的每一行都是由標記來建立。 根據需要，可把某個單元格設置成空數據格，即不輸入數據到該格中，也就是在標記之后不輸入數據。 李四工程師,二.定義單元格的高度和寬度,表格的寬度由標記的width屬性來控制，而高度則是由標記的height屬性來控制的。語法分別為： Width=數值 Height=數值 數值的設定值若為一整數，則其單位為像素，若設定值為n%，則代表表格的寬度為整個網頁寬度的百分之n。如： 將width屬性設為50%，代表此表格寬度為整個網頁寬度的一半。, 個人資料 姓名居住地職業(yè) 張三北京

31、學生 李四上海工程師 王五深圳老師 , 個人資料 姓名居住地職業(yè) 張三北京學生 李四上海工程師 王五深圳老師 ,兩者設置寬度和高度的區(qū)別，當改變?yōu)g覽器窗口大小的時候，用百分比設置的表格會隨瀏覽器窗口的變化而變化，而通過像素設定寬度和高度的表格的大小不會變化。 以上是對整個表格的所有單元格的高度和寬度的控制，也可以在標記中添加width和height屬性來控制某一行的寬度和高度。如： ,三. 控制表格的邊框及邊框線,通過標記的屬性可以控制整個表格組件的格式。 1.Border屬性：用來控制表格邊框線的厚度，語法如下： Border=數值，數值的設定若為整數，則其單位為像素(pixel)。 2.C

32、ellspacing屬性：用于控制存儲格邊框到表格邊框的距離，框線的寬度。 Cellspacing=數值 3.cellpadding:用于控制存儲格內文字的邊緣到存儲格邊框的距離。 cellpadding=數值, 設置表格的邊框 姓名居住地職業(yè) 張三北京學生 李四上海工程師 王五深圳老師 ,4.設置表格背景顏色與邊框厚度顏色 標記還有兩個屬性 Bgcolor屬性：控制表格的背景顏色 bordercolor屬性：控制表格厚度的顏色 ,5.設置表格的對齊方式 表格對齊方式有兩種：水平方向和垂直方向 align(水平方向)： Align=left（水平左對齊） Align=right(水平右對齊)

33、Align=center(水平居中對齊) Valign(垂直方向) Valign=top(垂直頂部對齊) valign=bottom(垂直底部對齊) Valign=baseline(垂直一條公共基線對齊) valign=middle(垂直居中對齊),(1).align屬性可以放置于標記中，控制整個表格在網頁中的對齊方式。 靠左對齊表格 居中對齊表格 靠右對齊表格 ,(2).align和valign屬性也可以在標記中控制對齊方式 張三北京學生 李四上海工程師 王五深圳老師 ,四.創(chuàng)建跨單元格的存儲格,我們常常會看到有的表格里的某些存儲格跨了好幾個單元格，這是通過colspan和rowspan屬性

34、來控制而達到的。 Colspan屬性：水平延伸存儲格，語法： Colspan=n N為整數，代表此存儲格水平延伸的存儲格數。 Rowspan屬性：垂直延伸存儲格數, 個人資料 姓名居住地職業(yè) 個人資料 姓名 居住地 職業(yè) 姓名 個人資料 居住地職業(yè) 張三北京學生 李四上海工程師 王五深圳老師 ,第3章 列表,有些信息最好是以列表的形式表現出來，比如一個菜譜的配料、最喜歡的10套唱片、一個演出大綱以及一套術語的定義。雖然可以利用和之類的標記來管理在文檔中各項目的位置及創(chuàng)建列表，但是這些標記使用起來很麻煩，而且對于最合適信息的列表類型的創(chuàng)建也無多大的靈活性。所有html提供了一些標記用來創(chuàng)建包括有

35、數字編號、點或圈標志、縮進及其他性能的列表：而且，html4.0還包含了一些為建立以最佳形式表達數據的列表提供更多功能的屬性。,將文字內容以條列的方式顯示，對于閱讀者來說通常是比較清除而易讀的。Html共提供了三種用于條列文字的標記，它們是有序條列與無序條列以及說明項目條列標記 1.有序號條列就是有一定順序的列表，比如有數字編號的列表和指定編號的列表等。 2.無序號條列就是有標志但不管順序的列表，如點圈標志等。 3.說明項目條列就是沒有標志，且排列內容無一定次序的列表。,1.建立一個有數字編號的列表 2.指定編號的格式和順序 3.創(chuàng)建一個帶有點或圈標志的列表 4.創(chuàng)建一個無標志列表 5.建立一

36、個菜單列表 6.建立目錄列表 7.建立術語列表 8.嵌套列表 9.利用列表使主頁更有活力,1.建立一個有數字編號的列表,在html中可以創(chuàng)建一個在各項目之前自動生成數字編號的排序類別。項目之前的數字取決于該項目在列表中的位置：若第一項是1，則第二項是2，以此類推。 這是通過和標記來實現的 語法如下： 條列1 條列2 條列3 ,建立一個有數字編號的列表的一般步驟如下： 紅色 綠色 藍色 紫色 實例：1.html,一些瀏覽器允許將列表做的更緊湊一些來節(jié)省空間。在一個緊湊的列表中列表項目間通?？崭窈苄?，且會使用更小更緊縮的字體。如要指定一個壓縮的列表，只需用標記代替列表開頭的標記。,2.指定編號的格

37、式和順序,有時候編號不一定是數字，或者是數字也不一定是從1開始。如果是這樣，我們可以通過標記的屬性start和type來控制。 如果不是以數字1開始，則在列表的開始處的標記中放置一個start屬性，其后是等號(=)及第一個數字的值。例如要創(chuàng)建一個以100為開頭的列表如下：, 紅色 綠色 藍色 紫色 ,可以在標記中使用value屬性來改變列表內的標號順序。例如要從3開始，但是列表后部的值更大一些，下面的html語句創(chuàng)建的列表首先從3開始，到了藍色這一欄將從10開始。（實例：13.html） 紅色 綠色 藍色 紫色 ,利用type屬性來控制序號的種類，語法如下： Type=1 type=A typ

38、e=a type=i type=I,例如要在列表中使用大寫字母，則輸入： 紅色 綠色 藍色 紫色 我們還可以在標記中使用type屬性來更改列表中的編號體系。例如將標準數字改為羅馬大寫數字，則輸入：, 紅色 綠色 藍色 紫色 實例：2.html 3.html,當一個html瀏覽器遇到一個帶有等于某值的start屬性編號列表時，它可用這個值開始為列表編號。類似的，當它遇到一個等于某值的type屬性時，它就用此數值匹配編號類型的預定義列表，并使用恰當類型為列表編號。當瀏覽器在一列表元素中遇到一個type或value標記時，它就根據標記中設置的值改變列表編號系統(tǒng)。,3.創(chuàng)建一個帶有點或圈標志的列表,H

39、tml可以用來創(chuàng)建帶有圈標志的或稱為無序的列表，其中的點圈能夠自動生成并置于每一個列表項之前。這一技術極像編號列表中使用的技術，其唯一區(qū)別僅在于使用的標記不同。 這里使用的標記是和。用法與和基本相同。不同的地方在于type屬性的不同，此標記的語法如下： 條列1 條列2 條列3 ,這里type屬性用于設定項目符號，用法為： Type=circle Type=disc Type=square 其中，三種type值所代表的條列符號分分別為圓圈、實心圓、實心正方體。 實現步驟與前面有數字編號的列表的建立步驟完全一樣，只不過是要把和換成和。 實例：4.html,4.創(chuàng)建一個無標志列表,在html中，我們

40、可以創(chuàng)建一個沒有任何標志的列表，這個通過使用和標記來完成。 建立無標志列表步驟與有數字列表建立步驟一樣。不過要把和換成和,同時把換成。如果要創(chuàng)建的是不同于普通文本的縮進式列表，則不用而用代替 實例：5.html 上例中縮進式列表原理是標記在列表項之前又加了一個制表符。不過，縮進量是由瀏覽器設置的，而不能由文檔控制。,5.建立一個菜單列表,使用標記和標記可以使列表各項以菜單的形式顯示。用法與和基本相同。用標記替換標記。 實例：6.html,6.建立目錄列表,使用標記和標記可以使列表各項以一個相關條目的形式顯示。用法與和基本相同。 實例：6.html,7.建立術語列表,通過前面的學習，我們已經了解

41、、和標記。在那里，和標記是分開使用的。但是它們卻可以共同使用來創(chuàng)建一個術語列表。也就是說，以帶有術語及其帶有的列表形式顯示處理，并且強調指出這些詞語及其定義。 實例：7.html,8.嵌套列表,我們經常可以看到這樣的列表，既有主標題，每個主標題下又有子標題，并能以此類推。這就叫嵌套式列表。 在html中，嵌套是很容易實現的 1.數字編號列表（實例：8.html） 2.點圈標志列表（實例：9.html） 3.菜單列表（實例：10.html） 4.無標志列表（實例：11.html） 5.混合列表（實例：12.html）,9.利用列表使主頁更有活力,列表的使用有利也有弊。用的好，讀者通過它能很快地找

42、到所需的信息。通過將相關信息分組并使用平行結構，用戶可以很容易地根據提供信息進行分類。但是，如果用得不好，反而會有很差的效果。 在使用html創(chuàng)建列表時，要注意以下幾點： 1.避免列表太長。太長的列表會令人生厭并不易閱讀，而且讀者也很難找到所需的特定信息。在這種情況下，應該把它拆成小的列表，并標以不同的題目。這也就是嵌套式列表的有用之處。 2.保持列表的一貫性，在一個列表中間不要更換動詞時態(tài)或做其他形式上的改動。 3.在各行中，使各項保持相同的長度。列表可以做成只有一個詞的短表，也可以做成包括成段句子的長表；但是這兩種類型不能混用。,第4章 超級鏈接,只需少量的標記就可以格式化文本文件并使其在

43、world wide web上高效地顯示出來，它使html和www成為在internet上發(fā)表文檔的好方法。但這僅僅是利用了world wide web的極少量的能力。文檔閱讀者可以設想只需通過簡簡單單的鍵盤敲擊和鼠標摁動，就可移至該文檔的其他位置上、本臺計算機的其他文檔上，或者是全世界的internet資源上。 www提供了一種工具來完全地實現上述功能。它就是超級鏈接。,1.url介紹 2.創(chuàng)建鏈接 3.創(chuàng)建一個簡單的鏈接 4.創(chuàng)建一個指向頁面特定部分的鏈接 5.在表格和列表中使用鏈接,1.url介紹,url（uniform resource locator，全球資源定位器），是world

44、wide web瀏覽器用來定位在internet上文件的工具，為使用各種協議訪問信息提供了一個簡單連貫的方法。一個url包括3部分：一個協議代碼、一個裝有所需文件的計算機地址（或一個電子郵件地址或是新聞組名稱），以及包含所需信息的文件地址和文件名。如： 當瀏覽器遇到一個url時，它首先檢查其協議以決定程序獲取信息必須使用的方法。之后瀏覽器取得計算機的地址，然后訪問站點，并使用url中的路徑信息找到文件并將它的一個拷貝返回到瀏覽器所在的計算機上。,1.解釋一個url url包括3個部分，第一部分是協議，協議表明應使用何種方法獲得所需信息?，F在world wide web上共有7個主要協議。,在這

45、7種協議中的5種（ftp、gopher、http、telnet和wais）協議后均需接一個冒號和兩個斜杠（/），斜杠之后則是相關信息的主機地址。如： 而在mailto協議之后緊跟一個冒號，其后就是e-mail地址了。如： mailto: 在news協議中，協議后跟一個冒號，其后是usenet新聞的名稱。如： News:alt.widgets 對于除了mailto和news之外的協議，計算機地址之后都接著所需文件或目錄的路徑。如： ftp:/,2.理解相對的url 有時候url只是一個文件或某種路徑，并不包括任何種類的協議。此時可以利用路徑名來尋找各個目錄中的文件，如: C:/my docume

46、nts/my doc/2.doc 同時，web瀏覽器會假設給出的位置與當前頁面的位置相關，它將使用路徑信息在目錄中上移或下移以達到該位置并檢索此文件。也就是說，不用寫出完整的路徑名就能指定頁面和其他文件的位置 如下目錄結構圖,如要訪問一個與當前頁面所處目錄相同的文件，則只需將該文件的名稱作為url。如：現在是在page1.html中，想要到page2.html中，則只需輸入：page2.html,如果要訪問的文件位于當前頁面所在目錄的子目錄中，則需包括子目錄名，并將其余文件名用一個斜杠（/）分開，如由page1.html到page3.html中，則輸入： flash/page3.html 如果

47、對于父目錄（高于當前目錄所在目錄的目錄）中的文件，則在兩個句號（.）和文件名之間用一個斜杠分隔開。例如，想由page3.html到page1.html中，則輸入： ./page1.html 由上兩步綜合起來使用，可由一個目錄轉移到任何一個其他目錄。例如要從page3.html到page4.html中，則輸入： ./image/page4.html 實例：1.html,2.創(chuàng)建鏈接,要將你的文檔或信息與別的資源連接起來，就必須創(chuàng)建它們之間的鏈接。 創(chuàng)建鏈接的方式有兩種： 1.可以使用來指定一個文檔同其他資源的關系，包括之前和之后的文檔、表格內容、索引以及其他文檔部分。瀏覽器閱讀和存儲包含在元素中

48、的信息，并將其作為相關文件的位置。 2.使用標記可以創(chuàng)建各種各樣的鏈接，如指向本地頁面的鏈接、指向其他頁面的鏈接、指向頁面特定部分的鏈接以及指向服務器或站點的鏈接等。 當用戶選擇建立于頁面中的鏈接后，瀏覽器便會瀏覽該超級鏈接位置的網頁。建立超級鏈接所使用的標記為，其語法為： 超級鏈接名稱,此語句的各個部分 1.超級鏈接名稱 此字符串將顯示于網頁中，代表此超級鏈接，并供用戶選擇超級鏈接之用。除了可以使用字符串外，在標記中，也可以插入圖像文件，這樣該圖像文件便可代表該超級鏈接。當用戶把鼠標移到代表該超級鏈接的文字或圖片上時，光標的形狀將變成手狀，表示該用戶可選擇該鏈接。,2.鏈接位置 用于指定hr

49、ef屬性中超級鏈接的目標位置，這可使用url來指定。url的格式由使用的通訊協議、鏈接地址與文件位置所組成 下面列舉一些常見的鏈接位置的設定方式 (1).通過http協議鏈接至其他網頁 (2).指定通過ftp協議鏈接至網絡上的ftp服務器 (3)telnet鏈接： (4)電子郵件 (5)鏈接至同一服務器上的其他網頁 ,3.創(chuàng)建一個簡單的鏈接,創(chuàng)建簡單鏈接的一般步驟： 1.打開或創(chuàng)建一個需要使用鏈接的文檔，并定位要用于鏈接的字或詞。 2.通過在錨點文本的前后放置和標記來標出用作鏈接的文本。 3.在標記中放置href屬性并使其等于要鏈接的對象的url 4.保存文檔，查看效果 實例：2.html,5

50、.創(chuàng)建一個指向頁面特定部分的鏈接,通過上面的學習，我們能夠創(chuàng)建從一個頁面到另外一個頁面的鏈接，但有時候你只需從一個頁面到另一個頁面的一個指定位置之間的鏈接，例如鏈接到第二個頁面的第四部分，這應該怎么達到呢？ 方法就是在第二個頁面的html文檔中建立一個錨。所謂錨，就是鏈接到文檔內部的指定位置。在第一個頁面建立的鏈接將包含鏈接的文件名和錨的名字。然后，當瀏覽器按這個鏈接查找時，就把第二個頁面裝入，然后向下滾動到錨的指定位置。,如果第二個頁面就是第一個頁面，這也是可行的。也就是說，進行的是從一個頁面到該頁面本身某個位置的鏈接。這種鏈接常用在web頁面較長，無法在一頁中顯示的情況下。 實例：firs

51、t.html,6.在表格和列表中使用鏈接,設計者可以將表格或列表與超級鏈接聯合起來使用，比如建立一個菜單用以組織一套指向不同頁面的鏈接?？梢韵駷槠胀撁嫣砑渔溄右粯釉诹斜砗捅砀裰刑砑渔溄?。 實例：2.html,第3章 分節(jié)分欄、html擴展,1.在web頁中創(chuàng)建分節(jié) 2.利用表格進行web頁面的布局控制 3.給滾動的文本添加滾動的文本框 4.控制頁面的顯示效果的一些方法,1.在web頁中創(chuàng)建分節(jié),在web頁中創(chuàng)建分節(jié)是由和標記來實現的。當瀏覽器遇到標記時，它取出和之間的所有文本，并根據標記中的屬性所包含的指示格式化該文本。 標記的屬性主要有align,設置文本的定位，可設置為left、righ

52、t和center。 實例1,2.利用表格進行web頁面的布局控制,表格的應用非常廣泛且靈活，為控制web頁的圖像、文本和其他對象提供了極有力的途徑。我們可以在表格單元格中插入文本、圖像及其他對象，并控制它們在瀏覽器窗口中的確切位置。 1.安排圖像、嵌入對象和文本 2.創(chuàng)建分欄文本，將文本分為若干列，在屏幕上一個挨一個地排列,1.安排圖像、嵌入對象和文本,實例1,2.創(chuàng)建分欄文本，將文本分為若干列，在屏幕上一個挨一個地排列,所謂在web頁中分欄，就是說將文本分為若干列，在屏幕上一個挨一個地排列。在html中，我們可以利用表格來達到。 實例1,由于www的迅猛發(fā)展，計算機技術更新速度越來越快。瀏覽

53、器的升級速度更是如此，隨著瀏覽器的不斷升級，可供web頁的創(chuàng)建者使用的技術范圍越來越廣。 3.給滾動的文本添加滾動文本框 4.控制頁面的顯示效果的一些方法,3.給滾動的文本添加滾動的文本框,讓文本在一個頁面滾動是吸引讀者注意力的一個獨特的技巧。通過標記可以達到此效果。主要語法如下： 要控制的文本 我們還可以使用它的各種屬性來控制滾動文本框的尺寸、滾動行為和顏色等。 標記的屬性主要有： 1.Behavior屬性：用來控制滾動類型。 它支持3種值，如下表，默認為scroll,2.Direction屬性：控制文本在滾動文本框中移動的方向。有兩個設定值：left和right。分別代表文本從右向左滾動和

54、從左向右滾動。默認值為left。 3.Scrollamount屬性：用來設置滾動文本框每次重畫間隔的像素數，也就是說，控制的是在滾動文本框下一次顯示時，滾動文本框的內容將要向下移動的像素數。 4.Scrolldelay控制重畫間的延遲，也就是重畫之間的間隔時間，一微秒為單位。 5.Loop屬性：用來設置滾動文本框滾動的次數。Loop=n N代表滾動的次數。如果n=-1或infinite，則此時代表滾動文本框將連續(xù)不停的滾動。,6.Bgcolor屬性：用來設置滾動文本框的背景顏色。與以前學過的bgcolor的設置完全相同。 7.Height屬性：控制滾動文本框的高度。 8.Width屬性：控制滾

55、動文本框的寬度。 9.Align屬性：控制滾動文本框周圍的文本對齊方式。有3個設定值：top、middle和bottom。分別代表文本與滾動文本框的頂部、中部和底部對齊。 10.Hspace屬性：用于調整滾動文本框的水平邊界。設定值單位為像素。 11.Vspace屬性：用于調整滾動文本框的垂直邊界。設定值單位為像素。 實例1,第3章 管理文檔空間,Web頁的布局或空間設計對于使頁面的結構緊湊且易懂是十分重要的。在設計頁面時，設計者通常不太注意空間的布置，而這恰恰是錯誤的。一個空間布局合理的頁面是很容易閱讀的，因此人們也就會經常的訪問它。一個空間布置不當的頁面會因為其結構過于松散或擁擠不堪而使讀

56、者錯過了應注意的信息。,1.在文檔中添加水平線 2.利用表格將文本與一條線對齊、居中對齊文本 3.分段與換行,1.在文檔中添加水平線,使用標記來實現，它沒有關閉標記，只在頁面上創(chuàng)建一條水平線，將文檔頁面中一部分信息同其他信息分隔開。例如，標題在前，或從一個項目列表中分離出文本主體，都可使用水平線來實現。 標記注意主要屬性有： Width屬性：控制表現的長度，單位為像素 Width=n或width=n% Size屬性：控制標線的寬度 Size=n N為數字，代表以像素為單位的該線的粗細程度，默認為2 Align屬性：控制標線的對齊方式。 Align=left right center 實例1,2

57、.利用表格將文本與一條線對齊,表格可以將文本與一表格行的頂部或底部對齊，這是格式化文本的一個有用的性能。這是通過標記來實現的。 屬性的語法如下： =top =center =bottom 當瀏覽器在一個表格單元格中遇到標記時，它將單元格的內容與單元格的頂部、中部或底部對齊。單元格的大小由該行中所有單元格的內容決定。 實例2,3.分段與換行,分段使用,而換行使用的是標記。 實例1 同其他的標記使用的方法相同，即在不想有行中斷的位置放置標記，在保持不中斷的文本片段末尾放置標記。 瀏覽器遇到標記且當前行中沒有足夠的空間來放置標記和標記之間的文本時，它就將文本移至新的一行中。如果當前行有足夠的空間放置

58、，則仍位于此行中。,4.在web頁面中包含預先格式化的文本,同其他的標記使用的方法相同，即在預先設置了格式的文本的開頭放置標記，末尾放置標記。 瀏覽器以固定的字體顯示標記之間的所有文本，且不忽略回車符和制表符等。 實例1,第六章 樣式表,Html可以定義文檔的結構，但是有些具體的內容并不能被精確的定義。從前面我們所學的各種標記和屬性的應用可以看出，到目前為止沒有一種方式能夠精確指定某一元素的絕對位置，元素的位置隨著瀏覽器窗口的變化而不斷地變化。 利用樣式表可以精確地定義如何表達元素、方便地改變文檔的風格。一個很經典的樣式表能為開發(fā)web網頁起到事半功倍的作用。多個樣式表可以精確地控制html文

59、檔在瀏覽器中的顯示效果，并能創(chuàng)造出更多的效果，同時還可以表達某些特定頁面的內容。,樣式表提供了增強、擴展和改進瀏覽器顯示web頁面的方法，所以它已經成為html功能最為強勁的特性之一。 樣式表的各種長度單位如下表,樣式表可以分為級聯樣式表css(cascading style sheets)和動態(tài)樣式表。后者是由級聯式樣式表和javascript組合在一起的，它具有級聯式樣式表的功能，所以它的功能要比前者強大得多。 我們所要學習的是級聯樣式表，一般來講，樣式表是級聯式樣式表的簡稱，而不包含動態(tài)樣式表。樣式表主要是通過把各種樣式屬性按照要求組合在一起，從而形成對指定元素的樣式修飾。而這些放在一起的樣式屬性就構成了樣式規(guī)則，因為它們規(guī)定了指定元素在頁面中的顯示樣式。下面主要介紹有關樣式表的基本內容和應用樣式表的常用標記。,1.級聯樣式表的基本規(guī)則 樣式表實際上是由一些具體的樣式屬性所組成的，如顏色屬性、文本屬性、以及位置屬性等，并由這些樣式屬性來精確、詳細地格式化文檔顯示。尤其是樣式表中可以應用位置屬性，主要就可以控制元素在頁面中的具體位置，如元素在頁面中的絕對位置等。 顯示在頁面上的元素樣式可能很復雜，樣式表可以根據具體的要求，通過添加相關的樣式屬性來描述指定的樣式，所以這就使得樣式表的使用及其靈活、多樣。在實踐