高級(jí)HTML的運(yùn)用-老師自己整理的課件

第6章高級(jí)HTML運(yùn)用電子教案1學(xué)習(xí)目標(biāo)

熟悉表格的元素和屬性，掌握表格的使用掌握框架的使用熟練掌握表單的使用熟悉層的屬性和布局面板，掌握層的使用熟悉HTML樣式表

2本章內(nèi)容

第1節(jié)表格第2節(jié)框架

第3節(jié)表單第4節(jié)層的使用第5節(jié)HTML樣式表小結(jié)3第1節(jié)表格

6.1.1表格的元素及其屬性

6.1.2表格的創(chuàng)建

6.1.3表格的編輯46.1.1表格的元素及其屬性

第1節(jié)表格

Border：表格邊線的寬度，border=N，單位是像素width：表格整體的寬度，width=N，單位是像素，也可以是%bgcolor：表格的背景顏色，bgcolor=#Value，值是六位十六進(jìn)制數(shù)background：表格的背景圖像，background=#cellspacing：表格邊框線的厚度（單元格的間距），cellspacing=Ncellpadding：表格邊框和數(shù)據(jù)的距離（或單元格中填充文本和邊框的間距）cellpadding=N56.1.2表格的創(chuàng)建

第1節(jié)表格

一、代碼視圖

<table>

<tr><td> </td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td></tr><tr><td>1、2節(jié)</td><td>高數(shù)</td><td>數(shù)據(jù)庫(kù)</td><td>VB設(shè)計(jì)<br></td><td>英語(yǔ)</td><td>VB設(shè)計(jì)</td></tr>

<tr><td>3、4節(jié)</td><td>物理</td><td>英語(yǔ)</td><td>高數(shù)</td><td>匯編</td><td>數(shù)據(jù)庫(kù)</td></tr><tr><td>5、6節(jié)</td><td>體育</td><td>匯編</td><td>思品</td><td>體育</td><td>物理</td></tr></table>66.1.2表格的創(chuàng)建

二、菜單第1節(jié)表格

76.1.2表格的創(chuàng)建

三、插入工具第1節(jié)表格

86.1.2表格的創(chuàng)建

四、導(dǎo)入表格數(shù)據(jù)第1節(jié)表格

96.1.3表格的編輯

一、調(diào)整表格的大小第1節(jié)表格

106.1.3表格的編輯

二、添加、刪除表格的行和列第1節(jié)表格

116.1.3表格的編輯

三、單元格的操作第1節(jié)表格

設(shè)置屬性126.1.3表格的編輯

三、單元格的操作（續(xù)）第1節(jié)表格

嵌套表格136.1.3表格的編輯

三、單元格的操作（續(xù)）第1節(jié)表格

合并/拆分單元格146.1.3表格的編輯

三、單元格的操作（續(xù)）第1節(jié)表格

單元格排序15第2節(jié)框架

6.2.1框架的元素及其屬性

6.2.2框架的創(chuàng)建

6.2.3框架的編輯16框架的編輯

第2節(jié)框架

調(diào)整和拆分框架17第3節(jié)表單6.3.1表單的元素及其屬性

6.3.2插入表單域

6.3.3插入表單對(duì)象6.3.4跳轉(zhuǎn)菜單186.3.1表單的元素及其屬性

第3節(jié)表單表單實(shí)際上是一個(gè)容器，可以插入各種元素，如：文本框、復(fù)選框、單選按鈕、單選按鈕組、按鈕、列表或菜單、圖像域、跳轉(zhuǎn)菜單和文件字段等。19一、文本框

第3節(jié)表單文本框是一個(gè)空白區(qū)域，可以輸入包括數(shù)字和字符的文本信息，是網(wǎng)頁(yè)中使用最多的表單元素之一，常用作接收用戶輸入的信息，如：用戶的郵箱名、密碼以及注冊(cè)的各種信息。20二、復(fù)選框

第3節(jié)表單復(fù)選框指的是從提供的選項(xiàng)中選擇多項(xiàng)，比如：在注冊(cè)個(gè)人的興趣好愛好時(shí)，可以選擇旅游、登山、乒乓球、聽音樂(lè)等多個(gè)項(xiàng)目。21三、單選按鈕

第3節(jié)表單單選按鈕是指從提供的選項(xiàng)中選擇一項(xiàng)，也只能選擇一項(xiàng)，具有惟一性。比如：制作單項(xiàng)選擇題目中的答案條目。22四、按鈕

第3節(jié)表單按鈕的功能主要是控制表單的操作，包括提交和重置。提交是將表單信息提交到服務(wù)器端的處理程序，重置指的將表單中的信息重新填寫。23五、列表/菜單

第3節(jié)表單列表指的是表單元素中同時(shí)可以顯示多個(gè)項(xiàng)目，可以選擇多個(gè)項(xiàng)目，并且還提供了一個(gè)滾動(dòng)條，而菜單則只能顯示一個(gè)項(xiàng)目，并且只能選擇一個(gè)項(xiàng)目。24六、圖像域第3節(jié)表單圖像域指的是在表單域中插入圖像，和在普通頁(yè)面中插入的圖像不同，圖像域中插入的圖像可以作為提交按鈕使用。25七、文件字段第3節(jié)表單文件字段指的是表單中可以提交的文件。266.3.2插入表單域第3節(jié)表單一、菜單

276.3.2插入表單域第3節(jié)表單二、插入工具欄中的表單選項(xiàng)

選擇插入點(diǎn)，然后選擇插入欄工具“表單”表單按鈕286.3.2插入表單域第3節(jié)表單三、設(shè)置表單屬性“方法”指的是將表單數(shù)據(jù)提交到服務(wù)器的方法，有POST和GET兩種方法。POST方法傳輸數(shù)據(jù)時(shí)，先將數(shù)據(jù)轉(zhuǎn)換成為標(biāo)準(zhǔn)輸入，然后傳輸，并不附加在URL（統(tǒng)一資源定位器）后，這種方法比較安全。GET方法傳輸數(shù)據(jù)時(shí)，數(shù)據(jù)直接附加在URL后，這種方法不安全。296.3.3插入表單對(duì)象第3節(jié)表單1）選擇一個(gè)合適的插入點(diǎn)。2）利用上節(jié)的方法插入表單域。3）選擇“插入→表單對(duì)象”菜單中的一個(gè)對(duì)象，如：文本域。

30第3節(jié)表單實(shí)例：311）新建一個(gè)空白頁(yè)面。2）選擇合適的插入點(diǎn)，插入表單域，并且在表單域中輸入如上圖所示的文字信息，如：注冊(cè)信息。3）插入3個(gè)單行文本框，名稱分別是：textfield1、textfield2、textfield3。其中textfield2、textfield3的類型設(shè)置為密碼，并且在每個(gè)文本框的前面輸入文字：“用戶名：”、“密碼：”和“確認(rèn)密碼：”。4）插入菜單，列表值如圖6-33所示，先單擊加號(hào)“+”按鈕，在項(xiàng)目標(biāo)簽中輸入值，單擊“確定”按鈕，如果刪除某一項(xiàng)，則單擊減號(hào)“—”按鈕。第3節(jié)表單操作步驟：

325）插入4個(gè)復(fù)選框，名稱分別是：checkbox1、checkbox2、checkbox3和checkbox4，并且在每個(gè)復(fù)選框后輸入對(duì)應(yīng)的文字，如：行、列、單元格和標(biāo)題。6）插入一個(gè)名稱為單選按鈕組1的單選按鈕組，列表選項(xiàng)的值是：文本框、復(fù)選框、按鈕、列表和菜單。7）插入一個(gè)名稱為imageField的圖像域，選擇一個(gè)圖像文件。8）插入兩個(gè)按鈕，標(biāo)簽名稱分別是：確定和重置。9）保存文件，在瀏覽器中預(yù)覽，查看效果，以便做進(jìn)一步的修改。第3節(jié)表單操作步驟：(續(xù))

336.3.4跳轉(zhuǎn)菜單第3節(jié)表單頁(yè)面中的彈出式菜單。當(dāng)用戶選擇某一菜單項(xiàng)會(huì)鏈接到指定的位置，可以是站點(diǎn)內(nèi)的文件、其他站點(diǎn)的文件、電子郵箱、圖像等。跳轉(zhuǎn)菜單包括三部分，一是菜單選項(xiàng)信息，如圖中的“第三節(jié)

表格的編輯”，二是被鏈接文件的信息，如被鏈接的文件是third.htm，三是跳轉(zhuǎn)按鈕，如標(biāo)簽是“GO”的按鈕。34插入跳轉(zhuǎn)菜單的操作方法是：第3節(jié)表單1）選擇插入點(diǎn)。2）選擇“插入→表單對(duì)象→跳轉(zhuǎn)菜單”命令，彈出“插入跳轉(zhuǎn)菜單”對(duì)話框。353）添加菜單項(xiàng)。在上圖中，選擇加號(hào)“+”命令，可以添加一個(gè)菜單項(xiàng)目，在文本后的空白區(qū)域可以輸入菜單的提示信息，URL指的是菜單的一個(gè)項(xiàng)目鏈接的文件位置，還可以設(shè)置打開鏈接文件的類型，如：默認(rèn)的類型是主窗口。選項(xiàng)之一是菜單之后是否插入前往按鈕。4）單擊“確定”按鈕。5）如果對(duì)菜單的項(xiàng)目進(jìn)行修改，則可以選擇屬性面板中的“列表值”按鈕。

插入跳轉(zhuǎn)菜單的操作方法是：（續(xù)）

第3節(jié)表單36第4節(jié)層6.4.1創(chuàng)建層

6.4.2設(shè)置層屬性

6.4.3層的基本操作6.4.4跳轉(zhuǎn)菜單376.4.1創(chuàng)建層第4節(jié)層一、使用插入菜單386.4.1創(chuàng)建層第4節(jié)層二、使用插入欄選擇插入欄“常用”工具下的“描繪層”命令396.4.1創(chuàng)建層第4節(jié)層三、使用HTML標(biāo)記語(yǔ)言<divid="Layer1"style="position:absolute;left:99px;top:45px;width:177px;height:109px;z-index:1"></div>

406.4.2設(shè)置層的屬性第4節(jié)層416.4.3層的基本操作第4節(jié)層一、選擇層在視圖設(shè)計(jì)界面中，單擊選擇圖標(biāo)當(dāng)鼠標(biāo)出現(xiàn)黑色十字箭頭時(shí)，單擊層的邊框也可以選中層

可以使用層面板來(lái)選擇層

426.4.3層的基本操作第4節(jié)層二、層中添加信息1）選擇層。2）定位插入點(diǎn)到層中的合適位置，輸入各種信息。三、移動(dòng)層1）選擇層。2）將鼠標(biāo)移到層的邊框，當(dāng)出現(xiàn)黑色十字箭頭時(shí)，拖動(dòng)鼠標(biāo)到合適的位置后釋放鼠標(biāo)，或者修改層屬性面板中的左和上的值

四、調(diào)整層的大小1）選擇層。2）將鼠標(biāo)移到層的四角，當(dāng)出現(xiàn)與水平方向或者垂直方向成45度的箭頭時(shí)，同時(shí)向兩個(gè)方向拖動(dòng)鼠標(biāo)到合適的位置后釋放鼠標(biāo)，或者修改層屬性面板的高度和寬度的值，都能實(shí)現(xiàn)調(diào)整層的大小。43第5節(jié)HTML樣式表6.5.1樣式表的建立和使用6.5.2樣式的應(yīng)用實(shí)例446.5.1樣式表的建立和使用第5節(jié)HTML樣式表一、創(chuàng)建HTML樣式456.5.1樣式表的建立和使用第5節(jié)HTML樣式表二、應(yīng)用HTML樣式466.5.1樣式表的建立和使用第5節(jié)HTML樣式表三、編輯HTML樣式1）選擇設(shè)計(jì)面板“HTML樣式”選項(xiàng)卡中的某個(gè)樣式，如：樣式一。2）雙擊樣式一，或者使用右鍵快捷菜單中的“編輯”命令。然后就可以對(duì)樣式進(jìn)行編輯，重新修改其中的值。476.5.2樣式的應(yīng)用實(shí)例第5節(jié)HTML樣式表48經(jīng)常不斷地學(xué)習(xí),你就什么都知道。你知道得越多,你就越有力量StudyCon