網(wǎng)頁設(shè)計(jì)與開發(fā).ppt

《網(wǎng)頁設(shè)計(jì)與開發(fā).ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁設(shè)計(jì)與開發(fā).ppt（82頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

1、網(wǎng)頁設(shè)計(jì)與開發(fā),呂智強(qiáng) ,網(wǎng)頁和網(wǎng)站,網(wǎng)站是有獨(dú)立域名、獨(dú)立存放空間的內(nèi)容集合（即對外發(fā)布），這些內(nèi)容可能是網(wǎng)頁，也可能是程序或其他文件，不一定要有很多網(wǎng)頁，主要有獨(dú)立域名和空間，那怕只有一個(gè)頁面也叫網(wǎng)站。 網(wǎng)頁是網(wǎng)站的組成部分。有了很多網(wǎng)頁沒有獨(dú)立的域名和空間也只能說是網(wǎng)頁。例如一個(gè)程序，盡管有很多頁面，功能也齊全，但沒有獨(dú)立域名和空間，沒對外發(fā)布，但都不能叫網(wǎng)站。,一、概述,網(wǎng)頁表現(xiàn)形式,靜態(tài)網(wǎng)頁,通常是以.htm、.html、.shtml等為后綴的，它的特點(diǎn)是不會(huì)“變” 靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站制作和維護(hù)方面工作量較大，因此當(dāng)網(wǎng)站信息量很大時(shí)完全依靠靜態(tài)網(wǎng)頁制作方式比較困難 靜態(tài)

2、網(wǎng)頁的交互性較差，功能簡單，無法實(shí)現(xiàn)更多的功能,網(wǎng)頁表現(xiàn)形式,動(dòng)態(tài)網(wǎng)頁,通常是以.php、.aspx、.jsp等為后綴的，它的特點(diǎn)是會(huì)“變” 以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，大大降低網(wǎng)站維護(hù)的工作量 可以實(shí)現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調(diào)查、用戶管理、訂單管理等等 動(dòng)態(tài)網(wǎng)頁實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁文件，只有當(dāng)用戶請求時(shí)服務(wù)器才返回一個(gè)完整的網(wǎng)頁;,什么是萬維網(wǎng),萬維網(wǎng)的核心部分由統(tǒng)一資源定位器（URL）、超文本傳輸協(xié)議（HTTP）以及超文本標(biāo)記語言（HTML）三個(gè)標(biāo)準(zhǔn)構(gòu)成。 1統(tǒng)一資源定位器 統(tǒng)一資源定位器，又叫URL（Uniform Resource Locator）。是專為標(biāo)識(shí)

3、Internet網(wǎng)上資源位置而設(shè)的一種編址方式，通常所說的網(wǎng)頁地址指的即是URL。 2超文本傳輸協(xié)議 HTTP是超文本轉(zhuǎn)移協(xié)議，是客戶端瀏覽器或其他程序與Web服務(wù)器之間的應(yīng)用層通信協(xié)議。在Internet上的Web服務(wù)器上存放的都是超文本信息，客戶機(jī)需要通過HTTP協(xié)議傳輸所要訪問的超文本信息。 3超文本標(biāo)記語言 HTML（Hyper Text Markup Language）超文本標(biāo)記語言是一種嵌入式語言。通過定義標(biāo)記標(biāo)簽使瀏覽器解析頁面并進(jìn)行顯示。,工作原理,當(dāng)進(jìn)入萬維網(wǎng)上一個(gè)網(wǎng)頁，或者其他網(wǎng)絡(luò)資源的時(shí)候，通常你要首先在瀏覽器上鍵入想訪問網(wǎng)頁的統(tǒng)一資源定位器（URL），或者通過超鏈接

4、方式鏈接到那個(gè)網(wǎng)頁或網(wǎng)絡(luò)資源。這之后的工作首先是URL的服務(wù)器名部分，被名為域名系統(tǒng)的分布于全球的因特網(wǎng)數(shù)據(jù)庫解析，并根據(jù)解析結(jié)果決定進(jìn)入哪一個(gè)IP地址。 接下來的步驟是為所要訪問的網(wǎng)頁，向在那個(gè)IP地址工作的服務(wù)器發(fā)送一個(gè)HTTP請求。在通常情況下，HTML文本、圖片和構(gòu)成該網(wǎng)頁的一切其他文件很快會(huì)被逐一請求并發(fā)送回用戶。 網(wǎng)絡(luò)瀏覽器接下來的工作是把HTML、CSS和其他接受到的文件所描述的內(nèi)容，加上圖像、鏈接和其他必須的資源，顯示給用戶。這些就構(gòu)成了瀏覽器中所看到的“網(wǎng)頁”。,開發(fā)工具的選擇,HTML的編輯工具是比較多的，讀者既可以選擇最常用的基于文本的HTML編輯器（Windows自帶的

5、記事本），也可以選擇一套功能強(qiáng)大，可取代記事本編輯器的EditPlus，還可以選擇所見即所得的Dreamweaver等。,網(wǎng)頁制作的相關(guān)技術(shù),1HTML HTML（Hyper Text Markup Language）超文本標(biāo)記語言是一種嵌入式語言。和一般文本的不同的是，一個(gè)HTML文件不僅包含文本內(nèi)容，還包含一些Tag，中文稱“標(biāo)記”。 通過定義標(biāo)記標(biāo)簽使瀏覽器解析頁面并進(jìn)行顯示。一個(gè)HTML文件的后綴名是htm或者是html。 2CSS CSS意思就是疊層樣式表（Cascading Style Sheets），使用CSS的優(yōu)點(diǎn)在于將格式從功能中分離出來。它定義了HTML元素的顯示，是一種

6、對web文檔添加樣式的簡單機(jī)制。 在主頁制作時(shí)采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。 只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。,網(wǎng)頁制作的相關(guān)技術(shù),3JavaScript JavaScript是由 Netscape公司開發(fā)的一種腳本語言（script language），稱為描述性語言， 具有面向?qū)ο蟮哪芰?，可以非常自由地嵌入到HTML/XHTML 文件中，從而更便捷地開發(fā)出可交互的Web網(wǎng)頁。 JavaScript是目前最為流行的客戶端腳本語言，大大地增強(qiáng)了網(wǎng)頁的交互性。JavaScrip

7、t語法構(gòu)成與C、C++、Java類似，都包括if語句、while循環(huán)、分支選擇以及運(yùn)算等結(jié)構(gòu)，但也僅是在語法上的相似。,網(wǎng)頁元素單位,相對長度單位 px：像素是相對于顯示器屏幕分辨率而言 em：相對于當(dāng)前對象內(nèi)文本的字體尺寸 絕對長度單位 cm：厘米 mm：毫米 in：英寸,HTML文檔結(jié)構(gòu),HTML（Hyper Text Markup Language）超文本標(biāo)記語言是一種嵌入式語言。通過定義標(biāo)記標(biāo)簽使瀏覽器解析頁面并進(jìn)行顯示。一個(gè)HTML4.01的文檔結(jié)構(gòu)包括以下幾部分： DOCTYPE聲明定義文檔類型。 HTML頭元素信息。 HTML正文信息（body標(biāo)簽內(nèi)信息）。,二、

8、初識(shí)HTML,聲明定義文檔類型,在HTML4.01中提供了三種DTD文檔： 嚴(yán)格型HTML4.01DTD文檔不包括那些不被推薦的元素和屬性，并且不能在帶有frameset的頁面中出現(xiàn)。 過渡型HTML4.01DTD文檔包含所有嚴(yán)密型DTD文檔中所允許的內(nèi)容，還可以使用那些不被推薦的元素以及屬性。 框架型HTML4.01 DTD文檔包含過渡型以及框架。 ,HTML頭元素信息,HTML文檔的head元素中包含了meta元素，meta元素用來指定有關(guān)這個(gè)文檔的相關(guān)信息。 例如： 用httpequiv、content、charset描述頁面的內(nèi)容。 meta元素的屬性有兩種：htt

9、p-equiv和name 。,什么是標(biāo)簽大多數(shù)HTML文檔的標(biāo)簽都是由開始標(biāo)簽和結(jié)束標(biāo)簽進(jìn)行界定（開始標(biāo)簽和結(jié)束標(biāo)簽成對出現(xiàn)），結(jié)束標(biāo)簽是以斜線開頭（/），例如中為結(jié)束標(biāo)簽。每一個(gè)標(biāo)簽都是由尖括號(hào)（）包圍。 有單向標(biāo)簽和雙向標(biāo)簽 單向標(biāo)簽：br、hr、img等,三、標(biāo)簽,,標(biāo)簽的屬性,標(biāo)簽可以擁有屬性，屬性可以為頁面中的HTML元素提供附加信息。屬性被放置在標(biāo)簽的后面，但在最終括號(hào)（）的前面，即屬性應(yīng)該添加在HTML元素里的起始標(biāo)簽中。 例如：,標(biāo)簽的嵌套,HTML標(biāo)簽經(jīng)常使用嵌套的方式，所謂的嵌套是指一個(gè)HTML標(biāo)簽包含另外一個(gè)標(biāo)簽的情況。 例如： 標(biāo)題 顯示的內(nèi)容 ,HTML基本標(biāo)簽,

10、HTML基本標(biāo)簽包括:標(biāo)題標(biāo)簽h1、段落標(biāo)簽p、換行標(biāo)簽br、水平分割標(biāo)簽hr、部分標(biāo)簽div、注釋標(biāo)簽、字體標(biāo)簽font。 部分標(biāo)簽最早在HTML3.2標(biāo)準(zhǔn)中定義，可以將文檔分割成獨(dú)立的、不同的部分。在標(biāo)簽中定義的文本內(nèi)容，實(shí)際上與沒有在標(biāo)簽中定義的沒有什么區(qū)別，但要是引入了align屬性，標(biāo)簽就變的十分有用了（用來設(shè)置段落或標(biāo)題的對齊方式）。 和其他編程語言一樣，HTML也提供了代碼注釋的方式（，作為一個(gè)程序員應(yīng)該養(yǎng)成對代碼注釋的習(xí)慣，這樣可以保持清晰的思路。瀏覽器不顯示注釋的部分。,文字格式化,常見的文字格式化標(biāo)簽如下表。,字體設(shè)置,在HTML中，字體標(biāo)簽（font）通過其屬性來設(shè)置文本

11、字體、字體大小和字體顏色。字體標(biāo)簽的屬性如下表。,color,color,color,color,無序列表,所謂無序列表就是列表中列表項(xiàng)的前導(dǎo)符號(hào)沒有一定的次序，而是用黑點(diǎn)、圓圈、方框等一些特殊符號(hào)標(biāo)識(shí)。無序列表并不是使列表項(xiàng)雜亂無章，而是使列表項(xiàng)的結(jié)構(gòu)更清晰，更合理。 當(dāng)創(chuàng)建一個(gè)無序列表時(shí)，主要使用用HTML的標(biāo)簽和標(biāo)簽來標(biāo)記。其中標(biāo)簽標(biāo)識(shí)一個(gè)無序列表的開始；標(biāo)簽標(biāo)識(shí)一個(gè)無序列表項(xiàng)。 基本語法結(jié)構(gòu)為： 項(xiàng)目名稱 項(xiàng)目名稱 項(xiàng)目名稱 項(xiàng)目名稱 ,四、列表,有序列表,有序列表與前面介紹的無序列表正好相反，所謂有序列表就是列表項(xiàng)的前導(dǎo)符號(hào)是有序的符號(hào)標(biāo)識(shí)的列表。有序的符號(hào)標(biāo)識(shí)包括：阿拉伯?dāng)?shù)字、

12、小寫英文字母、大寫英文字母、小寫羅馬數(shù)字、大寫羅馬數(shù)字。 基本語法結(jié)構(gòu)為： 項(xiàng)目名稱 項(xiàng)目名稱 項(xiàng)目名稱 標(biāo)簽的type屬性用來定義一個(gè)有序列表的前導(dǎo)字符，如果省略了type屬性，瀏覽器會(huì)默認(rèn)顯示為“1”前導(dǎo)字符。 type取值為 1（阿拉伯?dāng)?shù)字）、a（小寫英文字母）、A（大寫英文字母）、i（小寫羅馬數(shù)字）、I（大寫羅馬數(shù)字）,圖片的使用,HTML和XHTML的一個(gè)重要特性就是可以在文本中加入圖片，既可以把圖片作為文檔的內(nèi)在對象加入，又可以通過超級(jí)鏈接的方式加入，同時(shí)還可以將圖片作為背景加入到文檔中。在文檔中合理地使用圖片會(huì)使瀏覽器顯示的網(wǎng)頁更活潑、引人入勝。,五、圖片,在頁面中插入圖片,

13、在HTML中，用標(biāo)簽在網(wǎng)頁中添加圖片。圖片是以嵌入的方式添加到網(wǎng)頁中的。網(wǎng)頁開發(fā)者可以通過多種方式獲取網(wǎng)頁設(shè)計(jì)中用到的圖片，可以將現(xiàn)有的圖片掃描到計(jì)算機(jī)內(nèi)、從Internet上的Web站點(diǎn)獲取以及通過制圖軟件自己動(dòng)手制作。如果是“引用”的圖片，一定要得到圖片版權(quán)擁有者的同意才可使用。 在頁面中插入圖片的語法： ,替換文本說明,有時(shí)，由于網(wǎng)絡(luò)過忙或者用戶在圖片還沒有下載完全就點(diǎn)擊了瀏覽器的停止鍵，用戶不能在瀏覽器中看到圖片，這時(shí)替換文本說明就十分有必要了。替換文本說明應(yīng)該簡潔而清晰，能為用戶提供足夠的圖片說明信息，在無法看到圖片的情況下也可以了解圖片的內(nèi)容信息 。 例如： ,調(diào)整圖片大小,在HT

14、ML中，通過img標(biāo)簽的屬性width和height來調(diào)整圖片大小，其目的是通過指定圖片的高度和寬度加快圖片的下載速度。如果不設(shè)置width和height屬性，瀏覽器就要等到圖片下載完畢才顯示網(wǎng)頁，因此延緩了其它頁面元素的顯示。 例如：,設(shè)置背景圖片,背景屬性將背景設(shè)置為圖片。屬性值為圖片的URL。如果圖片尺寸小于瀏覽器窗口，那么圖像將在整個(gè)瀏覽器窗口進(jìn)行復(fù)制。 例如： ,添加背景顏色,使用body標(biāo)簽的bgcolor屬性可以給HTML頁面指明背景顏色。其值可以是16進(jìn)制數(shù)、RGB值或者是顏色的名稱。 例如： ,HTML使用標(biāo)簽來建立一個(gè)鏈接，通常標(biāo)簽又稱為錨。一個(gè)超級(jí)鏈接可以指向任意一個(gè)We

15、b上的資源（一個(gè)HTML頁面，一張圖片，一段聲音文件，一部電影等）。 創(chuàng)建超級(jí)鏈接的基本語法格式： 這是要鏈接的站點(diǎn)(文字、圖片) 在和標(biāo)簽之間的文本文字，用戶可以單擊該文字來實(shí)現(xiàn)網(wǎng)頁的瀏覽訪問。,六、超級(jí)鏈接,,同一頁面內(nèi)的書簽鏈接,當(dāng)網(wǎng)頁的頁面較長，且該頁面是由幾個(gè)部分組成時(shí)，不得不拖動(dòng)瀏覽器的滑動(dòng)條查看信息，這樣既麻煩又費(fèi)時(shí)。HTML恰好提供了跳轉(zhuǎn)功能，能夠非常方便、快捷地實(shí)現(xiàn)從網(wǎng)頁當(dāng)前的部分跳轉(zhuǎn)到同一網(wǎng)頁的另一部分。 建立書簽語法： 鏈接內(nèi)容 創(chuàng)建書簽鏈接語法： 鏈接標(biāo)題,不同頁面間的書簽鏈接,書簽鏈接還可以在不同頁面間進(jìn)行鏈接。當(dāng)單擊書簽鏈接標(biāo)題，頁面會(huì)根據(jù)鏈接中的href屬

16、性所以定的地址，將網(wǎng)頁跳轉(zhuǎn)到目標(biāo)地址中書簽名稱所表示的內(nèi)容。 建立書簽語法： 鏈接內(nèi)容 創(chuàng)建書簽鏈接語法： 鏈接標(biāo)題,超級(jí)鏈接路徑,超級(jí)鏈接標(biāo)簽的屬性“href”定義了當(dāng)前鏈接所指的目標(biāo)地址，也就是超級(jí)鏈接路徑。在HTML中，主要提供了2種路徑：絕對路徑和相對路徑。,絕對路徑,絕對路徑就是主頁上的文件或目錄在硬盤上真正的路徑（URL和物理路徑）。例如，C:xyzindex.html代表了index.html文件的物理絕對路徑；,相對路徑,相對路徑就是相對與某個(gè)基準(zhǔn)目錄的路徑。相對路徑適合于創(chuàng)建網(wǎng)站內(nèi)部鏈接。它是以當(dāng)前文件所在的路徑為起點(diǎn)，進(jìn)行相對文件的查找。 1同一級(jí)目錄的文件鏈接 假設(shè)

17、1.html路徑是：c:Inetpubwwwrootsites admin1.html 假設(shè)2.html路徑是：c:Inetpubwwwrootsites admin2.html 1.html文件和2.html文件在同一個(gè)文件夾， 1.html文件鏈接到2.html文件，可以在1.html中寫成：同級(jí)目錄文件鏈接 2上級(jí)目錄的文件鏈接 假設(shè)1.html路徑是：c:Inetpubwwwrootsites 1.html 假設(shè)2.html路徑是：c:Inetpubwwwrootsites admin2.html 1.html文件是2.html文件的上一級(jí)目錄的文件，2.html文件鏈接到1.html

18、文件，可以在2.html中寫成：1.html,相對路徑,假設(shè)1.html路徑是：c:Inetpubwwwroot1.html 假設(shè)2.html路徑是：c:Inetpubwwwrootsites admin2.html 1.html文件是2.html文件的上兩級(jí)目錄中的文件，2.html文件鏈接到1.html文件，可以在2.html中寫成： 1.html 假設(shè)1.html路徑是：c:Inetpubwwwrootsitesadmin1.html 假設(shè)2.html路徑是：c:Inetpubwwwrootsites reg2.html 1.html文件和2.html分別在c:Inetpubwwwroo

19、tsites目錄下的admin和reg兩個(gè)文件夾內(nèi)，1.html文件鏈接到2.html文件，可以在1.html中寫成： 2.html,相對路徑,3下級(jí)目錄的文件鏈接 假設(shè)1.html路徑是：c:Inetpubwwwrootsites 1.html 假設(shè)2.html路徑是：c:Inetpubwwwrootsites admin2.html 2.html文件是1.html文件的下一級(jí)目錄的文件，1.html文件鏈接到2.html文件，可以在1.html中寫成： 2.html 假設(shè)1.html路徑是：c:Inetpubwwwrootsites 1.html 假設(shè)2.html路徑是：c:Inetpub

20、wwwrootsites adminuser2.html 2.html文件是1.html文件的下兩級(jí)目錄的文件，1.html文件鏈接到2.html文件，可以在1.html中寫成： 2.html,七、表格,主要內(nèi)容： 表格的構(gòu)成 設(shè)置表格背景 設(shè)置表格表頭 設(shè)置表格大小 設(shè)置表格數(shù)據(jù)對齊方式 cellspancing與cellpadding屬性 橫跨行和列 添加表格高級(jí)標(biāo)簽 使用表格進(jìn)行網(wǎng)頁布局,7.1 表格簡介,表格在網(wǎng)站開發(fā)中應(yīng)用廣泛，幾乎多有的HTML頁面或多或少地采用了表格。表格可以靈活地控制頁面的排版，使整個(gè)頁面層次清晰。學(xué)好網(wǎng)頁制作，熟練掌握表格的各種屬性是很有必要的。,表格標(biāo)記,基

21、本標(biāo)簽 : table定義一個(gè)表格 tr定義表格中的行 td定義表格中的數(shù)據(jù) 基本語法： ,表格邊框,可以使用table標(biāo)簽的border屬性為表格添加邊框并設(shè)置表格邊框?qū)挾?，表格的邊框按照?shù)據(jù)單元將表格分割成單元格，邊框的寬度以像素為單位。 可以通過bordercolor屬性為邊框添加顏色，其顏色值可以是rgb(x,x,x)、16進(jìn)制顏色值或代表顏色值的顏色名稱。,表格表頭,表頭是指表格的第一行或第一列對該列或該行的表格內(nèi)容進(jìn)行說明。表頭的文字樣式為居中、加粗顯示，通過標(biāo)簽實(shí)現(xiàn)。 基本語法： ,7.2 表格背景,表格可以添加背景顏色和背景圖片，使用表格

22、背景顏色或背景圖片必須使表格中的文本數(shù)據(jù)顏色與表格的背景顏色或背景圖片形成足夠的反差。否則，將不容易分辯表格中的文本數(shù)據(jù)。,設(shè)置表格背景,可以使用bgcolor屬性設(shè)置表格的背景顏色，其值可以是rgb(x,x,x)、#xxxxxx或顏色名（colorname）。 例如： 或 ,設(shè)置表格單元背景,可以通過bgcolor屬性和background屬性為表格中的單元格添加背景顏色或背景圖片。,7.3 表格大小,設(shè)置表格大?。?如果需要表格在網(wǎng)頁中占用適當(dāng)?shù)目臻g，可以通過width和height屬性指定像素值來設(shè)置表格的寬度和高度，也可以通過表格寬度占瀏覽器窗口的百分比來設(shè)置表格的大小。方法如下：

23、 設(shè)置單元格大?。?width屬性和height屬性不但可以設(shè)置表格的大小，還可以設(shè)置表格單元格的大小，為表格單元設(shè)置width屬性或height，將影響整行或整列單元的大小。例如： 汽車名稱 價(jià)格范圍 級(jí)別 ,7.4 對齊方式,表格的對齊方式包括： 行數(shù)據(jù)水平對齊 單元格數(shù)據(jù)水平對齊 行數(shù)據(jù)垂直對齊 單元格數(shù)據(jù)垂直對齊 align屬性和valign屬性混合使用,設(shè)置表格對齊方式,使用align屬性設(shè)置表格在網(wǎng)頁中的對齊方式，在默認(rèn)的情況下表格的對齊方式為左對齊。 設(shè)置方法為： 這里 align的值為left、center、right。將表格的對齊方式設(shè)置成右對齊，則表格的右邊框自動(dòng)地向?yàn)g

24、覽器右邊框?qū)R。,設(shè)置表格數(shù)據(jù)對齊方式,1行數(shù)據(jù)水平對齊 使用align可以設(shè)置表格中數(shù)據(jù)的水平對齊方式，如果在標(biāo)簽中使用align屬性，將影響整行數(shù)據(jù)單元的水平對齊方式。align屬性的值可以是left、center、right，它的默認(rèn)值為left。 2單元格數(shù)據(jù)水平對齊 如果在某個(gè)標(biāo)簽中使用align屬性，那么align屬性將影響一個(gè)表格單元數(shù)據(jù)水平對齊方式。 3行數(shù)據(jù)垂直對齊 如果在標(biāo)簽中使用valign屬性，那么valign屬性將影響整行數(shù)據(jù)單元的垂直對齊方式，這里的valign值可以是top、middle、bottom、baseline。它的默認(rèn)值是middle。,設(shè)置表格數(shù)據(jù)

25、對齊方式,4單元格數(shù)據(jù)垂直對齊 如果在某個(gè)標(biāo)簽中使用valign屬性，那么valign只影響當(dāng)前表格單元數(shù)據(jù)垂直對齊方式。 5align屬性和valign屬性混合使用 align屬性和valign屬性除了上述用法外，有時(shí)在格式化表格單元數(shù)據(jù)時(shí)需要align屬性和valign屬性混合使用。,7.5 表格單元格的邊距,改變表格單元格間距離和單元格內(nèi)的數(shù)據(jù)填充距離可以通過table標(biāo)簽的cellspancing與cellpadding屬性實(shí)現(xiàn)。 cellspancing屬性用來添加表格單元格之間的間距（以像素為單位或表格寬度百分比）。 cellpadding屬性用來添加表格單元格內(nèi)數(shù)據(jù)填充間距

26、（以像素為單位或表格寬度百分比）。,7.6 橫跨行和列,橫跨列是指一個(gè)表格單元格橫跨多列；橫跨行是指一個(gè)表格單元格橫跨多個(gè)行。表格橫跨行和列屬性，有時(shí)橫跨行和列又稱為合并單元格。 表格橫跨行和列屬性： colspan=“”指明該單元格應(yīng)有多少列的跨度，在th和td標(biāo)簽中使用。 rowspan=“”指明該單元格應(yīng)有多少行的跨度，在th和td標(biāo)簽中使用。,7.7 表格的高級(jí)標(biāo)簽,使用表格的高級(jí)標(biāo)簽可以為表格中相似的區(qū)域添加邊界，在表格標(biāo)題上添加行或文本格式信息，定義表格的腳標(biāo)等。 表格的高級(jí)標(biāo)簽如下： thead定義表格的標(biāo)題區(qū)域。 tbody定義表格的主題區(qū)域。 tfoot定義表格的腳標(biāo)

27、區(qū)域。 colgroup定義表格的列組。 col為表格中的一個(gè)或多個(gè)列定義屬性值。只能在表格或colgroup里使用這個(gè)元素。,7.8 使用表格進(jìn)行網(wǎng)頁布局,使用個(gè)非HTML時(shí)一常普遍的應(yīng)用就是用HTML表格功能給網(wǎng)頁進(jìn)行布局。下圖就是利用HTML表格對網(wǎng)頁進(jìn)行布局的效果，此布局定義了兩個(gè)表格，上下各一個(gè)表格，將這兩個(gè)表格的border值設(shè)置為0。如果將border值設(shè)置為1，則很容易看出此頁面的表格布局。,八、表單,主要內(nèi)容： 創(chuàng)建單行文本框 創(chuàng)建口令文本框 創(chuàng)建提交與復(fù)位按鈕 創(chuàng)建單選按鈕與復(fù)選按鈕 創(chuàng)建多行文本框 創(chuàng)建下拉框 上傳文件 處理表單 定義域集合 使用Tab鍵與快捷鍵,8.

28、1 單行文本框,一個(gè)表單是一塊可以含有表單元素的區(qū)域，可以使用標(biāo)簽在網(wǎng)頁中創(chuàng)建表單。 例如： ,8.2 口令文本框,在進(jìn)行網(wǎng)上注冊的時(shí)候，用戶使用的是提交用戶名和口令的表單?？诹钗谋究螂[藏了當(dāng)前要填寫的內(nèi)容，使信息更加保密。 例如： ,8.3 提交與復(fù)位按鈕,使用提交按鈕（submit）可以將填寫在文本框中的內(nèi)容發(fā)送到服務(wù)器，復(fù)位按鈕（Reset）使表單文本框的內(nèi)容返回初始值。 例如： ,8.4 單選按鈕與復(fù)選框按鈕,單選按鈕允許用戶從選擇列表中選擇一個(gè)單項(xiàng)的輸入字段類型。當(dāng)type=“radio”是表示該輸入是一個(gè)單選按鈕。 復(fù)選按鈕允許用戶從選擇列表中選擇一個(gè)或多個(gè)選項(xiàng)的輸入字段類型。

29、當(dāng)type=“checkbox ”是表示該輸入是一個(gè)復(fù)選按鈕。,8.5 多行文本框,多行文本框是在表單中應(yīng)用比較廣泛的文本輸入?yún)^(qū)域。多行文本框主要用于得到用戶的評論和一些反饋信息，用戶可以在里面書寫文字，字?jǐn)?shù)沒有限制。默認(rèn)的字體是固定的?？梢酝ㄟ^標(biāo)簽創(chuàng)建多行文本。 textarea標(biāo)簽的屬性： Cols指定文本區(qū)域的列數(shù)。 Row指定文本區(qū)域的行數(shù)。 Disabled第一次加載的時(shí)候文字區(qū)域不可用。 Readonly將文本區(qū)域的內(nèi)容設(shè)置為不可修改（可選屬性）。 Name：指定文本區(qū)域的名稱（可選屬性）。,8.6 下拉框,如果一個(gè)列表選項(xiàng)過長，可以考慮使用下拉框。下拉框可以使用戶選擇其

30、中的一個(gè)選項(xiàng)，在選擇列表中僅有一個(gè)是可選項(xiàng)，單擊右邊下拉按鈕便可進(jìn)行選項(xiàng)的選擇。下拉框通過select標(biāo)簽、option標(biāo)簽來定義。 其屬性如下表 。,8.7 處理表單,通常情況下，用戶通過submit按鈕來提交表單，收集的信息發(fā)送到Web服務(wù)器上。這一過程通過HTML文檔中action屬性指定所收集的信息發(fā)送到哪里。如何處理信息，可以通過form標(biāo)簽的特殊屬性實(shí)現(xiàn)。 處理表單的通用語法模式： ,8.8 定義域集合,在設(shè)計(jì)網(wǎng)頁時(shí)，如果表單中包含多個(gè)控件，可以通過標(biāo)簽將相關(guān)主題的控件或標(biāo)簽組合在一起（定義域集合），這樣使網(wǎng)頁中的表單分布更合理、結(jié)構(gòu)更清晰，從而增加了網(wǎng)頁的易讀性；同時(shí)也有利于

31、tab鍵在元素之間的移動(dòng)。 在定義表單的域集合時(shí)，往往要用標(biāo)簽為fieldset設(shè)置標(biāo)題，還可以使用align屬性設(shè)置標(biāo)題的對齊方式。 用戶信息 姓名： 年齡： 性別： 籍貫： ,8.9 使用Tab鍵與快捷鍵,1. 使用Tab鍵 瀏覽者可以通過使用Tab鍵在表單的各個(gè)組件之間移動(dòng)。默認(rèn)情況下，Tab鍵的移動(dòng)順序?yàn)轫樞蛞苿?dòng)?？梢酝ㄟ^tabindex屬性來實(shí)現(xiàn)。 例如： 姓名： 年齡： 性別： 籍貫： 2. 快捷鍵 可以通過accesskey屬性給HTML中的元素指定一個(gè)快捷方式，指定方法如下： ,九、多媒體,主要內(nèi)容： 會(huì)滾動(dòng)的文字 音樂 創(chuàng)建視頻,9.1 會(huì)滾動(dòng)的文字,滾動(dòng)文字可以增加文字的

32、動(dòng)態(tài)效果，引起瀏覽者的注意，豐富頁面的內(nèi)容。,創(chuàng)建滾動(dòng)文字標(biāo)簽,使文字在網(wǎng)頁中動(dòng)態(tài)地滾動(dòng)好像只是flash的專利，其實(shí)則不然，可以通過HTML的同樣能夠達(dá)到文字在網(wǎng)頁中移動(dòng)的效果。但是只適用于Internet Explorer，并不是標(biāo)準(zhǔn)標(biāo)簽，這里并不推薦使用這個(gè)擴(kuò)展標(biāo)簽。 例如： 這是會(huì)滾動(dòng)的文字?。。?！,設(shè)置滾動(dòng)文字的屬性,滾動(dòng)文字的屬性用來控制文字的移動(dòng)方向、滾動(dòng)方式、文字滾動(dòng)速度以及移動(dòng)文字的外觀等多個(gè)屬性。常見的屬性有direction、scrollamount、align、bgcolor等。 1設(shè)置文字滾動(dòng)的方向 可以通過direction屬性來設(shè)置文字滾動(dòng)的方向，該屬性有l(wèi)ef

33、t、right屬性值，left為默認(rèn)屬性值，在不設(shè)置direction屬性時(shí)文字的滾動(dòng)順序?yàn)閺挠蚁蜃笠苿?dòng)。 2設(shè)置滾動(dòng)文字速度 與屬性用來控制滾動(dòng)文字的速度。scrollamount屬性用來設(shè)置滾動(dòng)過程中文字每次移動(dòng)的像素?cái)?shù)，當(dāng)scrollamount取值較小時(shí)，文字滾動(dòng)的較慢；反之文字滾動(dòng)較快。scrolldelay屬性用來設(shè)置文字移動(dòng)的延遲，以毫秒為單位。值越小，文字滾動(dòng)的越快（文字滾動(dòng)速度與計(jì)算機(jī)的處理能力有關(guān)）。,設(shè)置滾動(dòng)文字的屬性,3設(shè)置滾動(dòng)文字字幕區(qū)域 使用height和width屬性設(shè)置滾動(dòng)文字字幕區(qū)域大小，在默認(rèn)情況下，滾動(dòng)文字字幕區(qū)域?yàn)檎麄€(gè)IE瀏覽器屏幕。這兩個(gè)屬性值可以取

34、絕對的像素?cái)?shù)，也可以取相對的百分比。,9.2 背景音樂,為網(wǎng)頁添加背景音樂的方法一般有三種，第一種是通過普通的標(biāo)簽來添加，一種是通過標(biāo)簽來添加, 還有一種直接建立聲音的鏈接 。,嵌入背景音樂,1. 標(biāo)簽 Internet Explorer自帶了一個(gè)內(nèi)置音頻解碼器，支持特殊的標(biāo)簽，該標(biāo)簽可以把聲音文件集成到文檔中，在后臺(tái)作為背景音樂播放。 基本語法： 2. 標(biāo)簽 embed可以用來插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3等等。 基本語法： 3. 建立聲音的鏈接 在設(shè)計(jì)網(wǎng)頁的時(shí)候可以創(chuàng)建一個(gè)背景音樂的鏈接，單擊網(wǎng)頁上的鏈接后，就會(huì)播出背景音樂。當(dāng)建立聲音鏈接時(shí)，提倡使

35、用萬維網(wǎng)上的音頻格式。建立聲音的鏈接方法如下： 點(diǎn)擊播放音樂春風(fēng) ,9.3 創(chuàng)建視頻,在網(wǎng)頁中創(chuàng)建視頻與創(chuàng)建音頻的方法基本相同，可以通過創(chuàng)建一個(gè)視頻的鏈接實(shí)現(xiàn)視頻在網(wǎng)頁中的加載。當(dāng)瀏覽者選中視頻連接時(shí)，瀏覽器將播放該視頻。如果瀏覽器不能播放該視頻格式，則會(huì)自動(dòng)打開本地計(jì)算機(jī)上已安裝支持該格式的視頻播放器軟件。如果本地計(jì)算機(jī)上沒有安裝所需的視頻播放軟件，則瀏覽器會(huì)提示瀏覽者是否要保存該視頻文件到本地的計(jì)算機(jī)上。,創(chuàng)建內(nèi)部視頻,1使用標(biāo)簽創(chuàng)建視頻 所謂內(nèi)部視頻就是視頻文件可以直接在網(wǎng)頁中播放?？梢酝ㄟ^標(biāo)簽創(chuàng)建內(nèi)部視頻。創(chuàng)建方法如下： 2使用標(biāo)簽創(chuàng)建視頻 一些網(wǎng)頁設(shè)計(jì)者利用標(biāo)簽的dynsrc屬性在網(wǎng)

36、頁內(nèi)部添加視頻文件。dynsrc屬性用來指定視頻文件所在位置。 例如：,11 CSS語法基礎(chǔ),CSS意思就是疊層樣式表（Cascading Style Sheets），使用CSS的優(yōu)點(diǎn)在于將格式從功能中分離出來。它定義了HTML元素的顯示，是一種對web文檔添加樣式的簡單機(jī)制。 主要內(nèi)容： CSS定義 CSS語法 CSS類型 偽類與為元素,11.1 理解CSS,1基本語法 CSS規(guī)則由選擇器（selector）、屬性（property）和值（value）三部分組成。 基本格式如下： selector property : value 2組合 為了提高效率，可以將相同屬性和值賦給多個(gè)選擇器

37、，并用逗號(hào)將選擇器分開。例如： h1,h2,h3,h4,h5,h6 color: blue ,11.1 理解CSS,3選擇器類 選擇器類可以將同一類型的HTML元素定義出不同的樣式。例如： p.right text-align: right p.center text-align: center 居右顯示。 居中顯示。 4ID選擇器 可以使用id選擇器來定義HTML標(biāo)簽的樣式。id選擇器可用“#”來定義。例如： p# idone text-align: center; color:blue或# idone text-align: center; color:blue,11.1 理解CSS,5

38、關(guān)聯(lián)選擇器 可以為嵌入的其它標(biāo)簽定義樣式，格式為： h3 em color:blue 指定了嵌套在標(biāo)簽中的標(biāo)簽所包含的內(nèi)容字體顏色為藍(lán)色。具有這樣形式的選擇器稱為關(guān)聯(lián)選擇器（contextual selector），兩個(gè)標(biāo)簽之間用空格分隔（h3和em之間用空格隔開）。類似的還有： h3 b color:blue h2 em b color:blue,11.2 CSS類型,CSS按其位置不同主要分為以下三種類型： 行內(nèi)樣式表（Inline Style Sheet） 內(nèi)部樣式表（Intenal Style Sheet） 外部樣式表（Extenal Style Sheet）,行內(nèi)樣式表,行內(nèi)

39、樣式是定義在HTML標(biāo)簽里，只對所在的標(biāo)簽有效。使用行內(nèi)樣式就失去了樣式表的優(yōu)勢，將內(nèi)容和形式相混淆了，一般這類方法在個(gè)別元素需要改變樣式時(shí)使用。 ,內(nèi)部樣式表,內(nèi)部樣式表是使用標(biāo)簽在head區(qū)域內(nèi)定義樣式，內(nèi)部樣式表只對所在的網(wǎng)頁有效，缺點(diǎn)是不利于多個(gè)網(wǎng)頁的維護(hù)。 例如： p.parghtext-align:center hr.linecolor:blue 內(nèi)部樣式表 ,外部樣式表,外部樣式表可以集中控制和管理多個(gè)網(wǎng)頁的格式和布局，省去了對這些網(wǎng)頁的每個(gè)標(biāo)簽都要分別進(jìn)行格式化的麻煩。與內(nèi)部樣式表不同，外部樣式表作為單獨(dú)的文件存儲(chǔ)。如果對外部樣式表進(jìn)行修改，結(jié)果將影響到引用該樣式表的所有網(wǎng)頁。

40、 引用方法：,多重樣式表,樣式表的優(yōu)先級(jí)依次是行內(nèi)樣式表（Inline Style Sheet），內(nèi)部樣式表（Intenal Style Sheet）外部樣式表（Extenal Style Sheet），瀏覽器缺省（Browser Default）。 如果一些屬性被相同的選擇器設(shè)置成不同的樣式，值就會(huì)被更為具體的樣式所繼承，也就是按照樣式表的優(yōu)先級(jí)進(jìn)行繼承。,11.3 偽類與偽元素,偽類是一種特殊的類選擇器，用來指定一個(gè)或者與其相關(guān)的選擇符的狀態(tài)。 偽類由四部分組成：選擇器（selector）、偽類（pseudo-class）、屬性（property）、值（value）。其語法結(jié)構(gòu)如下： 選擇

41、器:偽類 屬性: 值 selector:pseudo-class property: value 此外，CSS類還可以和偽類混合使用。格式如下： 選擇器.類:偽類 屬性: 值，例如：a.two:link color: #ff0000 selector.class:pseudo-class property: value,11.3 偽類與偽元素,偽元素的語法規(guī)則與偽類語法規(guī)則類似，偽元素用于為一個(gè)選擇器添加特殊效果。 其語法結(jié)構(gòu)如下： 選擇器:偽元素 屬性: 值 selector:pseudo-element property: value 偽元素同樣可以與CSS類混合使用，其結(jié)構(gòu)如下： 選擇器. 類: 偽元素 屬性: 值 selector.class:pseudo-element property: value,