第2章表格、表單和框架_第1頁
第2章表格、表單和框架_第2頁
第2章表格、表單和框架_第3頁
第2章表格、表單和框架_第4頁
第2章表格、表單和框架_第5頁
已閱讀5頁，還剩92頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第2章表格、表單和框架

內(nèi)容提要小結(jié)2.3框架2.2表單2.1表格使用HTML，可以設(shè)計更復(fù)雜的網(wǎng)頁元素，例如表格、表單以及框架等。表格可以使網(wǎng)頁上顯示的文字更加整齊，有條理。表格還可以實現(xiàn)網(wǎng)頁的布局。表單是控件的容器，客戶端提交給服務(wù)器端的信息通常放置在控件里，是設(shè)計網(wǎng)頁必不可少的元素?？蚣芸梢詫⒕W(wǎng)頁內(nèi)容有效地進行劃分，使不同的區(qū)域顯示不同的內(nèi)容。2.1表格一個完整的表格由一對<table>標簽來定義。每個表格均有若干個單元行（由一對<tr>標簽定義）組成。每個單元行由若干個單元格（由一對<td>標簽定義）組成。表格內(nèi)的具體信息放置在單元格中。單元格可以包含文本、圖像、列表、段落、表單、水平線以及表格等。基本語法<table><tr> <th>head1</th> <th>head2</th> ……</tr><tr> <td>row1,cell1</td> <td>row1,cell2</td> ……</tr><tr> <td>row2,cell1</td> <td>row2,cell2</td> ……</tr> ……</table>例：2-1.HTML表格標題

表格標題，就是對表格內(nèi)容的簡單說明，用<caption>標記來定義?；菊Z法：<caption>表格標題</caption>語法解釋：<caption>標記在表格標記范圍內(nèi)，表格標題一般顯：示在表格上方，是對表格內(nèi)容的簡略說明。例：2-2.HTML劃分表格結(jié)構(gòu)從結(jié)構(gòu)上來看，表格可以分成表頭、主體和表尾三個部分，分別使用<thead>、<tbody>、<tfoot>標簽來表示。表頭和表尾一張表格只能有一個，而一張表格可以有多個主體。對于大型的表格來說，應(yīng)該使<tfoot>出現(xiàn)在<tbody>的前面，這樣瀏覽器在顯示數(shù)據(jù)時，有利于加快表格的顯示速度。另外，<thead>、<tbody>、<tfoot>標簽內(nèi)部都必須使用<tr>標簽。與表格相關(guān)的元素或標簽如表所示。元素說明table表格的最外層標記，代表一個表格tr單元行，由若干單元格橫向排列組成td單元格，包含表格數(shù)據(jù)th單元格標題，與td作用相似，但一般作為表頭行的單元格thead表頭分組tfoot表尾分組tbody表格主體分組colgroup列分組caption表格標題劃分表格結(jié)構(gòu)使用<thead>、<tobody>、<tfoot>對表格進行結(jié)構(gòu)劃分的好處是可以先顯示<tbody>的內(nèi)容，而不必等整個表格下載完成后才能顯示。無論<thead>、<tbody>、<tfoot>的順序如何改變，<thead>的內(nèi)容總是在表的最前面，<tfoot>的內(nèi)容總是在表的最后面。劃分表格結(jié)構(gòu)

thead元素用于對HTML表格中的表頭內(nèi)容進行分組，tfoot元素用于對HTML表格中的總計行（頁腳）內(nèi)容進行分組，tbody元素用于對HTML表格中的數(shù)據(jù)主體內(nèi)容進行分組?；菊Z法：<table><thead></thead><tfoot></tfoot><tbody></tbody></table>例2-3.HTML<table>標簽的常用屬性如表所示。屬性說明align設(shè)置表格水平對齊方式bgcolor設(shè)置表格背景色border表格的邊框的寬度，一般由CSS實現(xiàn)width以百分比或像素指定表格的寬度height以百分比或像素指定表格的高度cellspacing表格中相鄰單元格的間距以及單元格外邊沿與表格邊沿之間的間距，一般由CSS實現(xiàn)cellpadding單元格的邊沿和它的內(nèi)容的間距，一般由CSS實現(xiàn)<table>標記屬性1．設(shè)置表格水平對齊屬性

在水平方向上，可以設(shè)置表格的對齊方式為：居左、居中、居右。如果沒特別進行設(shè)置，則默認為居左排列?；菊Z法： <tablealign=””>語法解釋：

屬性可選的值有l(wèi)eft、center和right，代表表格出現(xiàn)在窗口的左側(cè)、中間和右側(cè)位置。例2-4.HTML<table>標記屬性2．設(shè)置表格背景色屬性 表格背景默認為白色，根據(jù)網(wǎng)頁設(shè)計要求，設(shè)置bgcolor屬性，可以設(shè)定表格背景顏色，以增加視覺效果?；菊Z法：<tablebgcolor=””>語法解釋：

bgcolor屬性規(guī)定表格的背景顏色。顏色描述方式為rgb(x,x,x)、#xxxxxx或colorname。 例如，如果設(shè)置表格背景色為紅色，可以使用的值為rgb(255,0,0)或#FF0000或red。設(shè)置形式如下。<tablebgcolor="rgb(255,0,0)"><table>標記屬性3．設(shè)置表格邊框?qū)挾葘傩?默認情況下表格邊框為0，可以通過給表格添加border屬性及屬性值，實現(xiàn)為表格設(shè)置邊框線寬度的目的?；菊Z法：<tableborder=””>語法解釋：border的值為像素數(shù)，數(shù)字越大邊框越寬。例如，設(shè)置表格的邊框?qū)挾葹?個像素，設(shè)置形式如下。<tableborder=”5”><table>標記屬性4．設(shè)置單元格間距和單元格邊距屬性 通過cellspacing屬性可以調(diào)整表格的單元格和單元格之間的間距，使得表格布局不會顯得過于緊湊。單元格邊距是指單元格中的內(nèi)容與單元格邊框的距離，通過設(shè)置cellpadding屬性來調(diào)整?；菊Z法：<tablecellspacing=""cellpadding="">語法解釋：

cellspacing屬性設(shè)置單元格和單元格之間的間距，cellpadding屬性設(shè)置文本與邊框之間的距離，值為像素數(shù)，值越大間距越大。 例如，設(shè)置表格的單元格間距為5，單元格邊距為10，設(shè)置形式如下。<tablecellspacing="5"cellpadding="10"><table>標記屬性5．設(shè)置表格寬度屬性默認情況下，表格的寬度會根據(jù)內(nèi)容自動調(diào)整。基本語法：<tablewidth=””>語法解釋：表格的寬度可以是像素數(shù)也可以是百分比。例如，設(shè)置表格的寬度為600像素，設(shè)置形式如下。<tablewidth=”600”>table1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表格使用示例1-規(guī)則表格</title></head><body><tableborder="1"align="center"> <caption>學(xué)生信息表</caption> <thead> <tr> <th>學(xué)號</th> <th>姓名</th> <th>性別</th> </tr> </thead> <tfoot> <tr> <tdcolspan="3"align="center">這里是表尾</td> </tr> </tfoot> <tbody> <tr> <td>0001</td> <td>王明明</td> <td>男</td> </tr> … </tbody></table></body></html>table1.html的顯示結(jié)果如圖所示。<tr>標記屬性 <tr>標記定義HTML表格中的行。通過<tr>標記屬性值可以控制表格中行的顯示效果，<tr>標記常用的屬性及其含義如下表所示。屬性描述align定義表格行的內(nèi)容對齊方式。bgcolor規(guī)定表格行的背景顏色。valign規(guī)定表格行中內(nèi)容的垂直對齊方式。<tr>標記屬性1．設(shè)置行水平對齊方式屬性基本語法：<tralign="">語法解釋：

align屬性規(guī)定表格行中內(nèi)容的水平對齊方式。屬性可選的值及其含義如下所述。left，左對齊內(nèi)容（默認值）。right，右對齊內(nèi)容。center，居中對齊內(nèi)容（th元素的默認值）。justify，對行進行伸展，這樣每行都可以有相等的長度。char，將內(nèi)容對準指定字符。例2-5.HTML<tr>標記屬性2．設(shè)置行背景顏色屬性

bgcolor屬性用來設(shè)置表格中該行單元格的背景顏色，默認為白色?；菊Z法：<trbgcolor="">語法解釋： 把個color屬性規(guī)定表格行中單元格背景顏色。屬性可選的值及其含義如下所述。顏色描述方式為rgb(x,x,x)、#xxxxxx或colorname。例如，如果設(shè)置行背景色為紅色，可以使用的值為rgb(255,0,0)或#FF0000或red。例2-6.HTML<tr>標記屬性3．設(shè)置行垂直對齊方式屬性本屬性用于設(shè)置表格行中內(nèi)容的垂直對齊方式?；菊Z法：<trvalign="">語法解釋：valign的值可以設(shè)置的值有top（居上）、botton（居下）和middle（居中），默認情況下是居中。例2-7.HTML

<td>標記屬性

<td>標記中的屬性用于設(shè)置表格中的標準單元格的一些特性。常見的屬性設(shè)置如下表所示。

屬性描述align規(guī)定單元格內(nèi)容的水平對齊方式。bgcolor規(guī)定單元格的背景顏色。colspan規(guī)定單元格可橫跨的列數(shù)。height規(guī)定表格單元格的高度。rowspan規(guī)定單元格可橫跨的行數(shù)。valign規(guī)定單元格內(nèi)容的垂直對齊方式。width規(guī)定表格單元格的寬度。<td>標記屬性1．設(shè)置單元格跨列本屬性用于設(shè)置表格中某一單元格跨幾個列進行合并（橫向合并）基本語法：<tdcolspan="">語法解釋：colspan的值就是單元格進行橫向合并時所跨的列數(shù)，例如某一個單元格和它右面兩個單元格合并，colspan的值設(shè)為3。例2-8.HTML<td>標記屬性2．設(shè)置單元格跨行本屬性用于設(shè)置表格中某一單元格跨幾個行進行合并（縱向合并）基本語法：<tdrowspan="">語法解釋：

rowlspan的值就是單元格進行縱向合并時所跨的行數(shù)，例如某一個單元格和它下面兩個單元格合并（若已經(jīng)是最下面一格，則不能合并。數(shù)字是幾就一共合并了幾行），rowspan的值設(shè)為3。例2-9.HTMLtable3.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表格使用示例3-不規(guī)則表格</title></head><body><tableborder="2"width="300"bordercolorlight="#FF9600" bordercolordark="#FF00EE"cellpadding="0"cellspacing="0"> <tr> <td>1</td> <tdrowspan="3">此單元格跨三行</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <tdcolspan="2">此單元格跨兩列</td> </tr></table></body></html>table3.html的顯示結(jié)果如圖所示。

網(wǎng)頁是網(wǎng)站構(gòu)成的基本元素。在設(shè)計網(wǎng)頁時，不但要考慮色彩的搭配、文字的變化和圖片的處理等，而且還要考慮另一個非常重要的因素——網(wǎng)頁的布局。使用表格布局網(wǎng)頁

網(wǎng)頁是網(wǎng)站構(gòu)成的基本元素。在設(shè)計網(wǎng)頁時，不但要考慮色彩的搭配、文字的變化和圖片的處理等，而且還要考慮另一個非常重要的因素——網(wǎng)頁的布局。網(wǎng)頁布局類型

網(wǎng)頁布局大致可分為“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型等。1．“國”字型： 也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型。網(wǎng)頁布局類型

2．拐角型 這種結(jié)構(gòu)與上一種其實只是形式上的區(qū)別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側(cè)是導(dǎo)航鏈接。3．標題正文型 這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。

網(wǎng)頁布局類型

4．左右框架型這是一種左右分別為兩頁的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時最上面會有一個小的標題或標致，右面是正文。我們見到的大部分的大型論壇都是這種結(jié)構(gòu)的，有一些企業(yè)網(wǎng)站也喜歡采用。這種類型結(jié)構(gòu)非常清晰，一目了然。5．上下框架型與上面類似，區(qū)別僅僅在于是一種上下分為兩頁的框架。網(wǎng)頁布局類型

6．綜合框架型是左右框架型和上下框架型兩種結(jié)構(gòu)的結(jié)合，相對復(fù)雜的一種框架結(jié)構(gòu)，較為常見的是類似于“拐角型”結(jié)構(gòu)的，只是采用了框架結(jié)構(gòu)。7．封面型這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計結(jié)合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個人主頁，如果處理的好，會給人帶來賞心悅目的感覺。網(wǎng)頁布局實例

程序2-10是一個利用表格嵌套進行網(wǎng)頁布局的實例<!--程序2-10-->……<body><tableborder="1"width="772"align="center"><tr><tdcolspan="2"height="70">banner圖片</td>……<tablewidth="100%"height="100%"border="1"cellspacing="0"cellpadding="0"><tr>……</table> ……</table></body>表格布局網(wǎng)頁實例<htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標題文檔</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>MainTitleofWebPage</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>Menu</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">Contentgoeshere</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">Copyright?W3CSchool.cc</td></tr></table></body></html>2.3框架使用框架技術(shù)可以將一個瀏覽器窗口劃分成多個區(qū)域，每個區(qū)域就是一個框架，每個框架可以單獨引用一個源文件，這樣可以實現(xiàn)在一個瀏覽器窗口顯示多個源文件。源文件之間是相互獨立的，互不影響。當(dāng)其中一個源文件的內(nèi)容發(fā)生變化時，其它的源文件不受影響。多個框架看成一個整體稱為框架集。利用框架集可以實現(xiàn)網(wǎng)頁的布局。使用框架既有優(yōu)點也有缺點，其優(yōu)點主要有：加載頁面時不需要加載整個頁面，只需要加載頁面中的一個框架頁，減少了數(shù)據(jù)傳輸，網(wǎng)頁下載速度較快；方便制作導(dǎo)航欄，可以在框架集中使用框架來實現(xiàn)一些分欄布局；方便實現(xiàn)頁面的重復(fù)利用；一個頁面中的各個框架之間可以互相關(guān)聯(lián)，方便實現(xiàn)局部刷新；其缺點主要有：會產(chǎn)生較多的引用頁，管理不方便；框架的滾動條不好控制；無法使用瀏覽器的后退按鈕；無法被搜索引擎搜索；多框架的頁面會增加對服務(wù)器的HTTP請求；2.3.1定義框架

框架的基本結(jié)構(gòu)主要分為框架集和框架兩個部分。它是利用<frameset>標記與<frame>標記來定義。其中<frameset>標記用于定義框架集，而<frame>標記則用于定義框架?；菊Z法：<html><frameset……><frame……/><frame……/><frame……/></frameset><noframe></noframe>

</html>2.3.1定義框架

語法解釋：<frameset>標記和<frame>標記中的省略號表示這兩個標記中的具體屬性，常用的屬性將結(jié)合具體實例進行詳細講解。<frameset>標記不可以和<body>標記一起使用，否則將出現(xiàn)顯示異常。<frameset>標記在使用時直接包含在<html>標記中即可。<frame>標記主要用來定義框架，用來控制所代表的窗口框架。<noframe></noframe>之間放置不支持Frame功能的瀏覽器顯示的文本提示。2.3.2利用框架分割窗口

常見的窗口分割方式包括：水平分割、垂直分割和嵌套分割。具體采用哪種分割方式，取決于實際需要，可用<frameset>標記中的rows（水平分割）或cols（垂直分割）屬性來進行分割。2.3.2利用框架分割窗口1．水平分割窗口rows屬性可以定義窗口的水平分割?；菊Z法：<framesetrows="高度1，高度2,…,*"><frame><frame>…</frameset>2.3.2利用框架分割窗口語法解釋：（1）rows屬性的值代表各子窗口的高度，第一個子窗口高為高度1，第二個子窗口高為高度2，依此類推，而最后一個*，則代表最后一個子窗口的高度，值為其他子窗口高度分配后所剩余的高度。（2）設(shè)置高度數(shù)值的方式有兩種：采用整數(shù)設(shè)置，單位為像素（px），語法如下：<framesetrows="100，200，*">用百分比設(shè)置，語法如下：<framesetrows="20％，50％，*">例2-11.HTML2.3.2利用框架分割窗口2．垂直分割窗口cols屬性可以定義窗口的垂直分割?；菊Z法：<framesetcols="寬度1，寬度2,…,*"><frame><frame>…</frameset>語法解釋： 窗口垂直分割的寬度設(shè)置與水平設(shè)置時高度設(shè)置方式相同。例2-12.HTML2.3.3框架的嵌套

如果進行網(wǎng)頁布局時需要創(chuàng)建同時包含橫向和縱向的框架，那么就需要利用框架的嵌套創(chuàng)建復(fù)雜的框架集。 進行框架嵌套時，就是在一個框架集中包含了另外一個框架集。也就是在一個框架集中原來應(yīng)該為<frame>標記的位置由框架集標記代替。例2-13.HTML實驗三1、用表格布局網(wǎng)頁的應(yīng)用，網(wǎng)頁布局呈“國”字形，如圖所示。2.3.4框架的初始化

框架初始化是指為各個框架指定初始顯示的頁面，也就是在<frame>標記中使用src屬性指定框架中最初顯示的頁面。指定頁面可以使用相對路徑也可以使用絕對路徑?；菊Z法：<framesetcols="寬度1，寬度2,…,*"><framesrc="url"><framesrc="url">…</frameset>語法解釋：例2-14.HTML<frame>的src屬性值設(shè)置為初始顯示頁面的路徑。2.3.5創(chuàng)建浮動框架

在瀏覽網(wǎng)頁的時候會看到在瀏覽器窗口含有孤立的子窗口，那么這就是浮動框架，插入浮動框架要使用成對的標記<iframe></iframe>，同樣，需用src屬性來設(shè)置框架中顯示文件的路徑?；菊Z法：<iframesrc="url"></iframe>語法解釋： 在<iframe>的src屬性中設(shè)置顯示頁面的路徑。與框架不同，浮動框架標記可以包含在<body>標記范圍內(nèi)。例2-15.HTML2.3.5創(chuàng)建浮動框架<iframe>標記中常見的屬性如下表所示。屬性描述align規(guī)定框架的水平對齊方式。width規(guī)定浮動框架窗口的寬度。height規(guī)定浮動框架窗口的高度。src規(guī)定顯示網(wǎng)頁文件的路徑。name規(guī)定框架的名稱。noresize規(guī)定框架尺寸是否可以調(diào)整。scrolling規(guī)定框架滾動條。frameborder規(guī)定框架邊框。2.3.6框架控制

本節(jié)將詳細介紹通過設(shè)置<frame>標記和<frameset>標記中的各種屬性，來控制框架的顯示效果。<frameset>標簽的常用屬性如表所示。屬性說明colspixels,%,*,定義框架集中列的數(shù)目和尺寸rowspixels,%,*,定義框架集中行的數(shù)目和尺寸frameborder0或1，隱藏或顯示邊框，默認值為1framespacing邊框?qū)挾?，以像素為單位bordercolor邊框顏色scrollingyes,no,auto，是否顯示滾動條noresize不需要賦值，禁止用戶調(diào)整框架大小

控制框架邊框

1．框架的隱藏基本語法：<frameframeborder=””>或<framesetframeborder=””>語法解釋：<frame>標記中的frameborder屬性可以控制框架的邊框。屬性可選的值為0或1，值為0時沒有邊框，值為1時生成3D邊框（此為默認值）。只有將所有相鄰的框架的邊框都設(shè)置為0是，才能隱藏邊框。<frameset>標記中的frameborder屬性可以控制框架集中所有子窗口的邊框。例2-16.HTML

控制框架邊框2．框架的邊框基本語法：<framesetborder=””>語法解釋：<frameset>標記中的border屬性可以控制框架邊框的寬度，單位為像素。例2-17.HTML設(shè)置框架的邊框?qū)挾?/p>

控制框架邊框3．框架滾動條和不可移動性基本語法：<framescrolling=””noresize>語法解釋：<frame>標記中的scrolling屬性值為yes、no或auto。當(dāng)值為yes時，強制為框架添加滾動條。當(dāng)值為no時，框架內(nèi)不加滾動條。當(dāng)值為auto時根據(jù)內(nèi)容的多少，需要時自動添加滾動條（默認值）。當(dāng)把鼠標滑到框架邊框時，可以通過拖動調(diào)整框架大小，noresize屬性可以固定框架的位置和大小。例2-18.HTML

控制框架子窗口

1．定義子窗口名稱基本語法：<framename=””>語法解釋：<frame>標記中的name屬性用來指定框架的名稱。指定框架名稱后可以指定超鏈接的target屬性值為框架名稱，當(dāng)單擊超鏈接時，在指定框架內(nèi)顯示超鏈接目標。例2-19.HTML

控制框架子窗口2．設(shè)置子窗口邊距基本語法：<framemarginwidth=””marginheight=””>語法解釋：

marginwidth屬性可以控制框架內(nèi)容和框架左右邊框之間的距離，marginheight屬性則控制框架內(nèi)容和框架上下邊框之間的距離。這兩屬性的取值單位都是像素。例2-20.HTML2.3.7使用框架布局網(wǎng)頁實例

程序2-21是一個利用框架布局網(wǎng)頁的實例，這個程序運用了框架嵌套實現(xiàn)了一個類似于程序2-10的網(wǎng)頁布局<!--程序2-21--><html><framesetrows="70,300,40"><framesrc=“2-21top.html"><framesetcols="172,600"><framesrc=“2-21left.html"marginheight="0"marginwidth="0"><framesrc=“2-21right.html"name="right"></frameset><framesrc=“2-21bottom.html"></frameset></html>2.3.7使用框架布局網(wǎng)頁實例

程序2-21外層框架設(shè)置了三個水平分割的子窗口，3個子窗口的高度分別是70像素、300像素和40像素，第2個子窗口又被垂直分割成兩個子窗口寬度分別為172像素和600像素。頂部初始化網(wǎng)頁為程序2-21top，程序2-21bottom和程序2-21right內(nèi)容與它內(nèi)容相似。<!--程序2-21top--><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>banner圖片</title></head><body><palign="center">banner圖片</p></body></html>2.3.7使用框架布局網(wǎng)頁實例

左側(cè)導(dǎo)航欄初始化程序為程序2-21left，注意程序中鏈接的target屬性值為右側(cè)框架名稱“right”。<!--程序2-21left--><html>……<tdheight="25%"><ahref="#"target="right">欄目1導(dǎo)航</a></td>

……<tdheight="25%"><ahref="#"target="right">欄目2導(dǎo)航</a></td>

……

……</tr></table></body></html>下面的實例為一個混合框架，先垂直劃分，然后水平劃分，當(dāng)單擊左側(cè)框架的超級鏈接時，在右側(cè)框架中顯示資源文件。frameset.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><framesetrows="20%,*"><framename="top"src="top.html"/><framesetcols="40%,*"><framename="left"src="left.html"/><framename="right"src="ch1.html"/></frameset></frameset></html>top.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>top</title></head><bodybgcolor="#FFBFFF"><h3align="center">這是TOP</h3></body></html>left.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>left</title></head><bodybgcolor="#A3D1D1"><ul><li><ahref="ch1.html"target="right">第1章</a></li><li><ahref="ch2.html"target="right">第2章</a></li><li><ahref="ch3.html"target="right">第3章</a></li></ul></body></html>ch1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>ch1</title></head><bodybgcolor="#FFDCB9"><h3>這是第1章的內(nèi)容</h3></body></html>ch2.html,ch3.html的源代碼與ch1.html類似。請求frameset.html的顯示結(jié)果如圖所示。單擊左邊框架中的“第3章”，顯示結(jié)果如圖所示。實驗32、用框架布局網(wǎng)頁的應(yīng)用，頁面顯示如下。2.2表單表單是一個容器，用來收集客戶端要提交到服務(wù)器端的信息?？蛻舳藢⑿畔⑻顚懺诒韱沃械目丶?。當(dāng)單擊表單中的提交按鈕時，表單中包含的控件的信息就會被提交給表單的action屬性所指定的處理程序。表單的使用非常廣泛，是網(wǎng)頁上用于輸入信息的區(qū)域，例如向文本框中輸入文字，在選項框里進行選擇等。從表單的設(shè)計到服務(wù)器返回處理結(jié)果的流程包括：通過表單控件來設(shè)計表單；通過瀏覽器將表單呈現(xiàn)給客戶端；客戶端填寫相關(guān)的信息，并單擊表單中的提交按鈕，將表單提交給處理程序；服務(wù)器處理完表單后，將生成的結(jié)果返回給客戶端瀏覽器；什么是表單

表單實質(zhì)上就是用于實現(xiàn)網(wǎng)頁瀏覽者和服務(wù)器端之間信息交換的一種頁面元素，在WWW上被廣泛用于各種信息的搜集和反饋。 在web應(yīng)用中，與表單工作相關(guān)的有兩個重要組成部分：一是描述表單的HTML源代碼；二是用于處理用戶在表單域中輸入信息的服務(wù)器端應(yīng)用程序，如ASP、JSP等。表單控件的類型

表單中通常包含兩類元素，一種是普通的頁面元素如文本、圖像、表格等，另一種是用于收集信息的特定頁面元素，即表單控件如按鈕、文本框、密碼框等。 表單中的每個控件都有特定的名稱，這個名稱有效范圍是所在表單。每個控件都有初始值和當(dāng)前值，初始值是由網(wǎng)頁設(shè)計者預(yù)先指定的，當(dāng)前值是由用戶與表單控件交互操作決定的，當(dāng)提交表單時，會把控件中的當(dāng)前值提交到服務(wù)器端。 表單控件對于客戶端用戶和服務(wù)器端處理程序交互起著中間數(shù)據(jù)載體的作用。1．<form>標簽在HTML中使用一對<form>標簽來設(shè)計表單，其格式如下：<formname=“…”action=“…”method=“post/get”target=“…”enctype=“…”onsubmit=“…”onreset=“…”accept=“…”accept-charset=“…”>表單中包含的控件或文字</form>其中：name指的是表單的名字。action指的是處理表單或者接收表單信息的url。method指的是表單提交的方法，默認值為get。target指的是目標窗口。enctype屬性可選，指的是提交數(shù)據(jù)的格式，可以指定客戶端提交到服務(wù)器端的數(shù)據(jù)的編碼類型。onsubmit指的是表單提交時調(diào)用的腳本語句或函數(shù)。onreset指的是表單重置時調(diào)用的腳本語句或函數(shù)。2．<input>標簽表單中可以包含很多控件，其中，用<input>標簽定義的控件有單行文本框、密碼框、提交按鈕、重置按鈕、普通按鈕、單選按鈕、復(fù)選框以及上傳文件按鈕等。這些控件是表單的核心控件，在表單設(shè)計中被頻繁地使用。（1）單行文本框單行文本框指的是表單中可以輸入一行文本的輸入框，通過設(shè)置<input>標簽的type屬性為text來指定。其格式如下：<inputtype=“text”name=“…”value=“…”size=“…”maxlength=“…”onchange=“…”onselect=“…”onfocus=“…”/>其中：name指的是單行文本框的名稱；value指的是單行文本框的默認的初始值；size指的是單行文本框的顯示寬度；maxlength指的是單行文本框允許用戶輸入的最大的字符數(shù)；onchange指的是當(dāng)文本框內(nèi)文本發(fā)行改變時調(diào)用的腳本語句或函數(shù)；onselect指的是當(dāng)文本框內(nèi)的文本被選中時調(diào)用的腳本語句或函數(shù)；onfocus指的是當(dāng)文本框獲得焦點時調(diào)用的腳本語句或函數(shù)；例2-22.HTML（2）密碼框密碼框通過指定<input>標簽的type屬性值為password來實現(xiàn)。在密碼框中輸入字符時，顯示的都是*或者實心圓點，密碼框的用法和單行文本框的用法基本相同，其格式如下：<inputtype=“password”name=“…”value=“…”size=“…”maxlength=“…”onchange=“…”onselect=“…”onfocus=“…”/>例2-23.HTML（3）隱藏域表單中的隱藏域在瀏覽器中是不可見的，因此用戶不能借助隱藏域進行交互操作。一般通過隱藏域來傳遞一些為開發(fā)者服務(wù)的信息，例如動態(tài)方法的調(diào)用、Session會話跟蹤等。隱藏域通過指定<input>標簽的type屬性值為hidden來實現(xiàn)，其格式如下：<inputtype=“hidden”value=“…”name=“…”/>（4）提交按鈕提交按鈕通過指定<input>標簽的type屬性值為submit來實現(xiàn)。單擊了提交按鈕后，提交按鈕所在的表單的內(nèi)容會被提交到表單標簽中action屬性所指的處理程序。提交按鈕的使用格式如下：<inputtype=“submit”value=“…”/>其中，value指的是提交按鈕上顯示的提示文字，一般為“Submit”或者“提交”。（5）重置按鈕重置按鈕通過指定<input>標簽的type屬性值為reset來實現(xiàn)。當(dāng)單擊重置按鈕時，重置按鈕所在的表單中的所有控件的內(nèi)容將會被清除，回到控件的默認的初始值，可以重新在控件中輸入數(shù)據(jù)。重置按鈕的使用格式如下：<inputtype=“reset”value=“…”/>其中，value指的是重置按鈕上顯示的提示文字，一般為“Reset”或者“重置”。例2-24.HTML（6）圖像按鈕有時候為了達到比較好的視覺效果，有人會使用圖片代替按鈕來提交或者重置表單數(shù)據(jù)。類型為圖片(type="image")的按鈕，其默認操作是提交表單?；菊Z法：<form><inputname=""type="image"src=""></form>語法解釋： 單擊該按鈕時，瀏覽器就會將表單的輸入信息傳送給服務(wù)器。image類型中的src屬性是必需的，它用于設(shè)置圖像文件的路徑。例2-25.HTML（7）單選按鈕單選按鈕通過指定<input>標簽的type屬性值為radio實現(xiàn)，其格式如下：<inputtype=“radio”name=“…”value=“…”onclick=“…”onfocus=“…”checked/>其中：name指的是單選按鈕的名稱，多個單選按鈕屬于同一個選項組，必須具有相同的name值；value指的是單選按鈕的值；checked屬性項可選，如果單選按鈕的默認狀態(tài)為被選中，則將checked寫在其屬性列內(nèi)；如果不將checked寫在其屬性列內(nèi)，則單選按鈕的默認狀態(tài)為未選中；onclick指的是當(dāng)單擊單選按鈕時執(zhí)行的腳本語句或腳本函數(shù)；onfocus指的是當(dāng)單選按鈕獲得焦點時執(zhí)行的腳本語句或腳本函數(shù)；（8）復(fù)選按鈕復(fù)選按鈕通過指定<input>標簽的type屬性值為checkbox來實現(xiàn)。其使用格式如下：<inputtype=“checkbox”name=“…”value=“…”onclick=“…”onfocus=“…”checked/>復(fù)選按鈕默認的選中狀態(tài)也通過checked指定，多個復(fù)選按鈕是否處于同一個選項組也通過name屬性指定。其屬性可參照單選按鈕的屬性說明。例2-26.HTML（9）普通按鈕除了以上提交按鈕和重置按鈕之外，還可以使用普通按鈕。通過設(shè)置<input>標簽的type屬性值為button來實現(xiàn)。在表單中使用普通按鈕，必須使用onclick調(diào)用處理腳本或腳本函數(shù)，使用格式如下：<inputtype=“button”name=“…”value=“…”onclick=“…”onfocus=“…”/>其中：name指的是普通按鈕的名字；value指的是普通按鈕上的提示文字；onclick指的是當(dāng)單擊普通按鈕時執(zhí)行的腳本語句或函數(shù)；onfocus指的是當(dāng)普通按鈕獲得焦點時執(zhí)行的腳本語句或函數(shù)；（10）上傳文件域上傳文件域通過指定<input>標簽的type屬性值為file來實現(xiàn)。它包括一個文本框和一個按鈕。其格式如下：<inputtype=“file”name=“…”value=“…”/>其中：name指的是上傳文件域的名稱；value指的是上傳文件域中的按鈕的提示文字，一般為“選擇文件”或“瀏覽……”。例2-27.HTML實驗四1、用表單實現(xiàn)用戶注冊的應(yīng)用，頁面顯示如圖所示。form1.html中的表單提交給form1_ok.jsp處理，form1_ok.jsp顯示用戶填寫的信息。form1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表單使用示例1</title></head><body><formname="form1"action="form1_ok.jsp"method="post"><tableborder="1"width="300"cellpadding="0"cellspacing="0"> <tr> <tdalign="left">姓名</td> <tdalign="left"><inputtype="text"name="name"size="10"/></td> </tr> <tr> <tdalign="left">密碼</td> <tdalign="left"><inputtype="password"name="password"size="10"/></td> </tr> <tr> <tdalign="left">性別</td> <tdalign="left"><inputtype="radio"name="gender"value="male" checked/>男<inputtype="radio"name="gender"value="female"/>女</td> </tr> <tr> <tdalign="left">愛好</td> <tdalign="left"><inputtype="checkbox"name="hobby" value="swimming"/>游泳<br/> <inputtype="checkbox"name="hobby"value="reading"/>讀書<br/> <inputtype="checkbox"name="hobby"value="music"/>音樂</td> </tr> <tr> <tdalign="center"colspan="2"><inputtype="submit"value="提交"/>  <inputtype="reset"value="重置"/></td> </tr></table></form></body></html>form1_ok.jsp:<%@pagelanguage="java"contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表單使用示例1-顯示表單內(nèi)控件的值</title></head><body><% Stringname=request.getParameter("name"); Stringpassword=request.getParameter("password"); Stringgender=request.getParameter("gender"); String[]hobby=request.getParameterValues("hobby"); out.print("name:"+name+"<br/>"); out.print("password:"+password+"<br/>"); out.print("gender:"+gender+"<br/>"); if(hobby!=null){ out.print("hobby:"); for(inti=0;i<hobby.length;i++){ out.print(hobby[i]+""); } }%></body></html>驗證form1.html及form1_ok.jsp的顯示結(jié)果，需要將其部署到JavaWeb服務(wù)器上，在瀏覽器的地址欄里輸入http://localhost:8080/ch02/form1.html，填寫完相應(yīng)的信息后的顯示結(jié)果如圖所示。提交以后的結(jié)果如圖所示。3．<select>標簽在表單中有時會用到下拉列表，在下拉列表中既可以實現(xiàn)單選，也可以實現(xiàn)多選。表單提交之后，服務(wù)器可以獲取下拉列表中選中的項目對應(yīng)的value值，或者收集用逗號分隔的多個選項，將其合并成一個單獨的參數(shù)列表。下拉列表使用一對<select>標簽來實現(xiàn)，其格式如下：<selectname=“…”size=“…”onfocus=“…”onblur=“…”onchange=“…”multiple><optionvalue=“…”selected=“selected”>選項1提示信息</option><optionvalue=”…”>選項2提示信息</option></select>其中：name指的是下拉列表的名稱；size指的是下拉列表中可見選項的數(shù)目；onfocus指的是當(dāng)下拉列表獲得焦點時調(diào)用的語句或腳本函數(shù)；onblur指的是當(dāng)下拉列表失去焦點時調(diào)用的語句或腳本函數(shù)；onchange指的是當(dāng)下拉列表的選中項發(fā)生變化時調(diào)用的語句或腳本函數(shù)；multiple指的是允許下拉列表選擇多項，如果沒有此屬性，則下拉列表只能選擇單項；如果設(shè)置此屬性，下拉列表會顯示成平鋪狀態(tài)。例2-28.HTML4．<textarea>標簽在HTML中，使用一對<textarea>標簽來實現(xiàn)多行文本框。其格式如下：<textareaname=“…”cols=“…”rows=“…”wrap=“off/virtual/physical”readonly=“readonly”onfocus=“…”onblur=“…”onchange=“…”>…</textarea>其中：name指的是

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論