網(wǎng)頁設(shè)計表格、表單及框架_第1頁
網(wǎng)頁設(shè)計表格、表單及框架_第2頁
網(wǎng)頁設(shè)計表格、表單及框架_第3頁
網(wǎng)頁設(shè)計表格、表單及框架_第4頁
網(wǎng)頁設(shè)計表格、表單及框架_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第3章表格、表單及框架

3.1

表格3.2

表單3.3

框架3.1表格

3.1.1表格的基本結(jié)構(gòu)

用表格顯示信息條理清楚，使瀏覽者一目了然。表格在網(wǎng)頁中還有協(xié)助布局的作用，可以把文字、圖像、聲音甚至視頻，或者另一個表格，組織到表格的不同行列中，以制作整齊、清晰的頁面。HTML具有強大的建立、顯示表格的功能。

HTML的表格由行和列組成，每一行的一個列就是一個單元格，如右圖所示：

創(chuàng)建HTML表格需要使用下列標簽：(1)<table>、</table>——表格標簽對，用于定義一個表格；(2)<tr>、</tr>——行標簽對，用于定義一個行，只能嵌套在表格標簽對中(3)<td>、</td>——單元格標簽對，用于定義一個單元格，只能嵌套在行標簽對中。<td>、</td>中放單元格內(nèi)容，即要顯示的數(shù)據(jù)。3.1.1表格的基本結(jié)構(gòu)

【例3-1】創(chuàng)建一個簡單表格，放一組學生信息。

<html><head><title>簡單表格示例</title></head><body><table><!--定義一個表-->

<tr><!--定義一行表格(第1行)--><td>學號</td><!--第1行的第1列--><td>姓名</td><td>性別</td><!--第1行的第3列--></tr><tr><!--定義第2行--><td>08003301</td><td>王明</td><td>男</td></tr><tr><!--定義第3行--><td>08003302</td><td>張鴻</td><td>女</td></tr> </table><!--表格結(jié)束--></body></html>

常見的表格上面往往有個標題，第一行(表頭)也常常用突出的字體(如黑體、粗體等)等來顯示，以突顯其內(nèi)容。這些在HTML表格中可以利用表格下面兩個標簽來實現(xiàn)：<caption></caption>——標題標簽對，用于定義一個表格標題，它只能放在<table>標簽對中，并在<tr>之前。<caption>的align、valign屬性用于設(shè)置標題的對齊方式，取值同<td>，默認在表的上方中間。<th></th>——要突出某個單元格內(nèi)容，只要將希望突顯內(nèi)容的單元格標簽對<td>、</td>改用表頭單元格標簽對<th>、</th>即可，甚至只需要將<td>改為<th>就可以了。3.1.2表格的常用屬性

<table>的常用屬性

2.行、單元格的常用屬性

【例3-2】<table>屬性設(shè)置示例<body>

<!--表格1-->

<tableborder=10width=90%cellspacing=10><caption>學生表</caption>

<!--定義表格標題-->

<tr><th>學號</th>

<!--表頭單元格-->

<th>姓名</td>

<!--表頭單元格-->

<th>性別</td>

<!--表頭單元格-->

</tr><tr><td>08003301</td><td>王明</td><td>男</td></tr><tr><td>08003302</td><td>張鴻</td><td>女</td></tr> </table>

<!--表格1結(jié)束--><p>

<!--表格2-->

<tableborder=1width=300cellpadding=10><tr><td>學號</td>

<!--普通單元格-->

<th>姓名</th>

<!--表頭單元格-->

<td>性別</td></tr><tr><td>08003301</td><td>王明</td><td>男</td></tr><tr><td>08003302</td><td>張鴻</td><td>女</td></tr> </table>

<!--表格2結(jié)束--></body>【例3-3】設(shè)置行及單元格的對齊方式示例<body><tableborder><captionvalign=top>行、單元格的對齊方式</caption><tr><th></th><th>表頭行單元2</th><th>表頭行單元3</th><th>表頭行單元4</th></tr><tralign=right>

<!--第1行水平右對齊-->

<th>第1行<br>水平右對齊</th><td>水平<br>右對齊</td><td>水平右對齊</td><tdalign=center>水平中對齊</td></tr><tr>

<!--第2行水平左對齊-->

<thalign=left>第2行<br>水平左對齊</TH><td>水平<br>左對齊</td><td>水平左對齊</td><tdalign=rightwidth=150>水平右對齊</td></tr><trheight=80>

<!--第3行水平左對齊-->

<th>第3行<br>高80</th><tdvalign=bottom>垂直底對齊</td><tdvalign=top>垂直<br>頂對齊</td><tdvalign=middle>垂直中對齊</td></tr></table></body>3.1.3合并單元格

日常使用的表格中，常有些格子需要跨多行或多列，例如下面的學生表。

實際上，跨多列的格子就是將一行的多個格子合并到一起，也就是該格子占多列。類似地，跨多行的格子就是將一列的多個格子合并到一起，也即該格子占多行。于是，在HTML中，就是使用指定單元格占多行或多列來創(chuàng)建跨多行或多列的單元格，即合并單元格。

<th>、<td>標簽都有指定單元格占的行數(shù)或列數(shù)的屬性：colspn屬性

——設(shè)置單元格占的列數(shù)，默認值是1。例：<tdcolspan=3>…</td>，指定單元格占3列。

rowspan屬性

——設(shè)置單元格占的行數(shù)，默認值是1。例：<tdrowspan=2>…</td>，指定單元格占2行?！纠?-4】創(chuàng)建前面所示的學生表表格

<body><tablebordercellspacing=0><captionvalign=top>學生表</caption><tr><thcolspan=3>基本信息</th><thcolspan=2>成績</th></tr><tr><th>班級</th><th>學號</th><th>姓名</th><th>課程</th><th>分數(shù)</th></tr><tralign=center><tdrowspan=2>計算機<br>一班</td><td>08003301</td><td>王明</td><tdrowspan=2>計算機基礎(chǔ)</td><td>92</td></tr><tralign=center><td>08003302</td><td>張鴻</td><td>85</td></tr><tralign=center><tdrowspan=2>網(wǎng)絡(luò)<br>一班</td><td>08003331</td><td>李曉娟</td><tdrowspan=2>網(wǎng)絡(luò)編程</td><td>73</td></tr><tralign=center><td>08003332</td><td>劉剛</td><td>90</td></tr></table></body>3.1.4利用表格布局網(wǎng)頁示例使用表格設(shè)計網(wǎng)頁格局，布局比較規(guī)則、容易，也使網(wǎng)頁看上去更加整齊。表格布局中，不同的對象放在各自的單元格中，可以對它們進行不同的處理，而不用擔心不同對象之間的影響。

【例3-5】利用表格布局創(chuàng)建如圖所示網(wǎng)頁1.根據(jù)網(wǎng)頁中元素設(shè)計表格網(wǎng)頁中有以下6個元素：①網(wǎng)頁標題“網(wǎng)頁編程學習網(wǎng)站”；②帶學位帽人圖片，文件是“a1.gif”；③裝飾條圖片，文件是“a2.gif”；④竹子圖片，文件是“a3.gif”；⑤文字“如今…”；⑥文字超鏈接“點擊進入”(為簡化,并不真鏈接)。

根據(jù)6個元素的布局，劃分出網(wǎng)格如圖3-8所示。雖然網(wǎng)頁中只有6個元素，但有些元素需要占多個單元格，總共需要4行。根據(jù)6個元素的布局，劃分出網(wǎng)格如右圖所示。再根據(jù)各個元素所占位置，合并相關(guān)格子得到

6

個元素的單元格，如右圖。由上面分析可知，表格結(jié)構(gòu)應(yīng)該如下：<table><tr><th></th><th></th></tr><!--第1行有2個元素--><tr><th></th></tr><!--第2行有1個元素,占整行--><tr><td></td><th></th></tr><!--第3行第1單元格占2行--><tr><th></th></tr><!--第4行只剩1個元素--></table>2.設(shè)置表格屬性

根據(jù)各元素的特點和網(wǎng)頁的整體布局，可基本定出表格的屬性。設(shè)置屬性后的表格結(jié)構(gòu)如下：<tablewidth=100%height=100%><tr><thcolspan=2></th><thwidth=40height=40></th></tr><tr><thcolspan=3></th></tr><tr><tdrowspan=2width=25%></td><thcolspan=2></th></tr><tr><thcolspan=2></th></tr></table>

3.表格填充具體代碼

最后，填入各單元格的具體內(nèi)容，根據(jù)需要修正屬性并完善代碼。Cha3-5.htm文檔最后內(nèi)容如下：<body><tablecellspacing=3width=100%height=100%><tr><thcolspan=2><fontface="隸書"size=6color=green><i>網(wǎng)頁編程學習網(wǎng)站</i></font></th><thbackground=a1.gifwidth=40height=40></th></tr><tr><thcolspan=3background=a2.gifheight=8></th></tr><tr><tdrowspan=2background=a3.gifwidth=25%></td><thcolspan=2>   如今，公司、企業(yè)和個人都在建設(shè)自己的Web站點，編寫自己的Web網(wǎng)頁。HTML正是創(chuàng)建網(wǎng)頁的基礎(chǔ)語言。</th></tr><tr><thcolspan=2><ahref="">點擊進入</a></th></tr></table></body>3.1.5習題1.設(shè)計一個表格網(wǎng)頁如下圖所示，表格寬度占窗口100%，表頭行背景色為橙色(orange)。2.使用表格布局給自己設(shè)計一個主頁，結(jié)構(gòu)如下圖所示，表格寬、高占窗口100%。表格的第2行是個裝飾條圖片，表格的第3行是三個超鏈接(不必真鏈接)。3.2表單

3.2.1表單的基本結(jié)構(gòu)

在網(wǎng)頁中，除了要向瀏覽者顯示信息外，還常常需要接受瀏覽者輸入的信息，例如需要用戶注冊時，就要收集用戶的姓名、地址、電話號碼等信息。表格是用于顯示信息的，而表單正是用來接受用戶輸入信息的。

一個表單要放在表單標簽對<form>、</form>之間，中間放置表單輸入控件元素或其他內(nèi)容。表單的一般格式如下：<formmethod=“方法”action=“處理表單的程序”>表單輸入控件元素或其他內(nèi)容</form>表單控件元素是用于接受輸入的控件，如文本框、提交按鈕等。屬性說明：

method——設(shè)置傳送表單數(shù)據(jù)的方式。取值為get（默認方式）或post。

action——設(shè)置處理表單數(shù)據(jù)的處理程序。

post和get是兩種不同的傳送表單數(shù)據(jù)的方式。get方法把表單數(shù)據(jù)附加到瀏覽器地址欄地址的后面（信息被顯示，不安全）向服務(wù)器傳送，其長度不能超過2K字節(jié)。post方法把表單數(shù)據(jù)郵寄，在瀏覽器地址欄不會顯示，其長度不受限制。3.2.1表單的基本結(jié)構(gòu)

【例3-6】一個簡單的表單示例(Cha3-6.htm)。<body><form><h3align="center">登錄<p>用戶名：<inputtype="Text"></p><!--單行文本框--><p>密碼：<inputtype="Password"></p><!--密碼框--><p><inputtype="Submit"value="確定"><!--提交按鈕--></form></body>3.2.2表單輸入控件元素<input>

cha3-6.htm文檔中有三行代碼都是“<input…>”格式，這就是用于接受輸入的輸入標簽，而在顯示后的頁面中看到的是文本框、按鈕等不同式樣的控件，所以稱之為“控件”元素。

表單常用的輸入控件元素大部分由輸入標簽<input>實現(xiàn)，由<input>的“type”屬性具體確定是哪一種控件，所以該屬性是必須有的。<input>標簽必須放在<form>標簽對中，其常用屬性見下表。<input>的常用屬性3.2.3單行文本框、密碼框、按鈕

文本框、密碼框、按鈕的相關(guān)屬性【例3-7】單行文本框、密碼框和按鈕示例(Cha3-7.htm)：在Cha3-6.htm文檔中加入重置按鈕、普通按鈕和處理表單數(shù)據(jù)的處理程序。<body><h3align="center">登錄

<formmethod="post"action="cha3-7-formAction.htm"><p>用戶名：<inputtype="Text"></p><!--單行文本框--><p>密碼：<inputtype="Password"></p><!--密碼框-->

<p><inputtype="Reset"value="重填">

<!--重置按鈕--><p><inputtype="Submit"value="確定"><!--提交按鈕--><inputtype="Button"value="取消">

<!--普通按鈕--></form></body>右圖是頁面顯示后輸入了用戶名“wang”和密碼“123456”后的情形：“cha3-7-formAction.htm”代碼：<html><head><title>簡單表單</title></head><body><h1>登錄成功！</h1></body></html>表單處理網(wǎng)頁cha3-7-formAction.htm實際對表單數(shù)據(jù)沒有做實質(zhì)性的處理，它僅僅顯示一個提示信息。如果單擊前面網(wǎng)頁中的“確定”,表單數(shù)據(jù)就提交給action屬性的值“cha3-7-formAction.htm”處理,即打開一個新的網(wǎng)頁,打開的網(wǎng)頁如右圖所示。3.2.4單選鈕、復選框、文件選擇框

復選框、單選鈕、文件選擇框的相關(guān)屬性【例3-8】復選框、單選鈕、文件選擇框示例(Cha3-8.htm)。<body><h2>   網(wǎng)頁作品交流</h2>

<formmethod="post">姓名：<inputtype="TEXT"name="xm"><BR>性別：<inputtype="RADIO"name="xb"checked>男<!—單選鈕--><inputtype="RADIO"name="xb">女<br><!—單選鈕-->制作經(jīng)驗：<inputtype="CHECKBOX"checkedname="c1">個人網(wǎng)頁

<inputtype="CHECKBOX"name="c2">娛樂網(wǎng)頁<!--復選框--><p>作品名稱：<inputtype="TEXT"name="mc"><br>提交作品：<inputtype="file"name="zp">

</form></body>文檔說明:

單選鈕中name屬性值相同，表示它們是同一組，它們之中只能選擇一項。復選框中name屬性值必須互不相同。3.2.5多行文本框

多行文本框（如下圖）用于接受大量的文字。

多行文本框不是用<input>標簽創(chuàng)建，其標簽對是<textarea>、</textarea>，同樣必須放在<form>標簽對中。

<textarea>的常用屬性：name——設(shè)置多行文本框的名字；rows——文本框的行數(shù)（高度）；cols——文本框的列數(shù)（寬度）；readonly——是否是只讀，取值為“true”時只能讀，為“false”時可以編輯。

用戶輸入行數(shù)超過rows時會出現(xiàn)垂直滾動條；任何一行字符個數(shù)超過cols時會出現(xiàn)水平滾動條。【例3-9】多行文本框示例(Cha3-9.htm)。<body><formmethod="post">

<h2align="center">留言簿

<!--多行文本框-->

<textareaname="LiuYyanBan"rows="5"cols="40">在這里留言！</textarea>

<inputtype="Submit"value="提交"><inputtype="Reset"value="清空">

</form></body>輸入一些文字：

3.2.6列表（菜單）

這里的列表指的是表單中的列表，也稱為菜單，它主要是方便用戶快速、正確地選擇一些選項。列表也不是用<input>標簽創(chuàng)建，而是由列表標簽對<select></select>創(chuàng)建，并且一樣地要放在<form>標簽對中。<select>的常用屬性：name——設(shè)置列表的名字；size——設(shè)置列表的高度(可顯示的行數(shù))。值為1時是下拉列表(也稱為下拉菜單)；值大于1時是列表框，列表中的列表項超過高度則出現(xiàn)垂直滾動條。創(chuàng)建列表還需要一個列表項標簽<option>、</option>，用來創(chuàng)建列表中的列表項，它主要的屬性是selected（不需賦值），指定初始狀態(tài)被選中?！纠?-10】列表示例(Cha3-10.htm)。<body>

<formmethod="post">選擇課程:<selectsize=1> <option>計算機基礎(chǔ)</option> <optionselected>網(wǎng)頁編程</option> <option>Java語言</option></select>選擇上課時間:<selectsize=2> <option>周六</option> <optionselected>周日</option></select>

</form></body>3.2.7習題

1.用來創(chuàng)建表單的標簽是（）。a．<input>b.<form>c.<table>d.<option>2.回答下列問題：表格與表單在功能上主要不同之處是什么？

<input>的“type”屬性可以沒有嗎？復選框和單選鈕之間主要不同之點是什么？文件選擇框的功能？菜單和單選鈕有什么類似之處？。3.使用表單設(shè)計如右邊所示頁面：4.使用表單中的列表、多行文本框等標簽設(shè)計如下網(wǎng)頁。要求頁面布局不隨窗口大小改變而變動。

3.3框架

3.3.1框架的基本結(jié)構(gòu)

框架就是把瀏覽器窗口劃分為多個子窗口，每個子窗口顯示一個頁面，從而實現(xiàn)在一個網(wǎng)頁中同時顯示多個頁面的效果。下面的頁面同時顯示了三個網(wǎng)頁。3.3.1框架的基本結(jié)構(gòu)

框架與表格類似，也是以行和列的形式分割頁面，稱之為水平分割（橫向分割、行）和垂直分割（縱向分割、列）。但是框架和表格不同，其根本區(qū)別是：框架網(wǎng)頁中的每一塊里面包含的又是一個網(wǎng)頁?？蚣芤部梢郧短?，即在一個框架內(nèi)還可以分割成若干個框架。

框架由框架集標簽對<frameset>、</frameset>實現(xiàn)，這時，網(wǎng)頁的主體<body>被<frameset>標簽代替。注意，包含<frameset>的網(wǎng)頁就不能有body部分，否則，將使框架完全被瀏覽器忽略，看到的只是body部分包含的內(nèi)容。<frameset>的基本結(jié)構(gòu)如下：

<html><head></head><frameset><!--框架集開始--><framesrc=“url地址1”><!--

frame是框架標簽（子窗口標簽）--><!–它定義一個框架（子窗口）-->

<framesrc="url地址2">……</frameset><!--框架集結(jié)束--></html>

<frameset>標簽最重要的屬性是rows和cols，用于分割頁面，還有一些設(shè)置邊框外觀的屬性。<frameset>的屬性

分割框架時可加入符號“*”靈活使用，非常方便。例：<framesetrows=“200,300”>——將窗口分割為上下倆子窗口，上子窗口200象素點高，下子窗口300象素點高<framesetcols=“100,220,*”>——將窗口分割為左、中、右仨子窗口,左和中為100和200象素點寬，剩余歸右<framesetrows=“30%,40%,*”>——將窗口分割為上、中、下部分,上和中占30%和40%，剩余歸下子窗口<framesetrows=“*,*”>——將窗口等分為上、下兩個子窗口<framesetcols=“*,*,*”>——將窗口等分為左、中、右三個子窗口<framesetcols=“*,2*,3*”>——將窗口等分為左、中、右仨子窗口，第1個占窗體寬的1/6，第2個占2/6，第3個占3/6分割窗口時如果計算不準確，值加起來不是100%，它們會被按比例縮小或放大成100%。

框架標簽<frame>用于定義子窗口要顯示的內(nèi)容，是一個單標簽。<frame>的屬性

3.3.2簡單框架示例

【例3-11】（Cha3-11.htm）設(shè)計一個框架網(wǎng)頁，其中包含左右兩個子窗口，分別放置Cha3-6.htm和Cha3-5.htm兩個網(wǎng)頁，左子窗口占40%。<html><head><title>簡單框架示例</title></head><framesetcols="40%,*"><framesrc="Cha3-6.htm"><framesrc="Cha3-5.htm"></frameset><html>3.3.3框架嵌套示例

【例3-12】（Cha3-12.htm）設(shè)計框架網(wǎng)頁，使顯示結(jié)果如下圖。分析：頁面首先被分割為上下兩部分，下面部分又被分割為左右兩部分。因此，該頁面需要使用框架嵌套方法才能實現(xiàn)，即下面部分還是放一個框架集，而此框架集再分割為左右兩部分就可以了。<html><head><title>框架嵌套示例</title></head><framesetrows="35%,*"><framesrc="../第1章/cha1-1.htm"scrolling="no"><framesetcols="6*,4*"><framesrc=""><framesrc=""></frameset></frameset></html>3.3.4子窗口間互操作

【例3-13】利用框架技術(shù)，設(shè)計如下圖左所示頁面。其中的“歡迎進入網(wǎng)頁世界”子窗口是可變顯示區(qū)，當單擊左欄中的章標題后，該區(qū)顯示對應(yīng)章的內(nèi)容。（如單擊“第3章表格、表單及框架”后的界面如下圖右）。（Cha3-13.htm）許多網(wǎng)頁利用框架把窗口劃分成固定顯示區(qū)和可變顯示區(qū)，固定的內(nèi)容顯示在一個框架中，如頂標題、目錄、標志、導航欄和版權(quán)聲明等。單擊固定顯示區(qū)的鏈接可以更新可變顯示區(qū)的內(nèi)容，這就是子窗口間的互操作。子窗口間互操作就是設(shè)置鏈接的顯示位置在本網(wǎng)頁內(nèi)的某個子窗口中，利用<frame>的name屬性和<a>的target屬性實現(xiàn)。

分析：頁面的框架結(jié)構(gòu)與例3-12的類似，可套用例3-12的結(jié)構(gòu)得到Cha3-13.htm；由于有三個子窗口，所以需要設(shè)計對應(yīng)的三個網(wǎng)頁：Cha3-13top.htm、Cha3-13left.htm、

Cha3-13right.htm。由于目錄中有三章標題，因而還必須有三個對應(yīng)的頁面，它們是類似的。為簡化，后面只給出第三章的文檔Cha3-13-Cha3.htm；上面窗口的界面實際就是例3-5中的一部分，簡化例3-5即可得。3.3.4子窗口間互操作

<!--1.文檔Cha3-13.htm--><html><head><title>框架及其鏈接</title></head><framesetrows="25%,*"

溫馨提示

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

最新文檔

評論

0/150

提交評論