【正文】 題 tr.../tr 表 示 表 格 的 一 行th/th定義表頭單元格 td.../td表示表格的一個(gè)單元格 標(biāo) 記 描 述 table ... /table 表格起始標(biāo)記和結(jié)束標(biāo)記 caption.../caption 定義表格標(biāo)題 tr.../tr 表示表格的一行 th/th 定義表頭單元格 td.../td 表示表格的一個(gè)單元格 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 47 層標(biāo)記 層標(biāo)記可以把文檔分割為獨(dú)立的 、 不同的部分 。 這是一個(gè)塊兒級(jí)元素 ， 這意味著在默認(rèn)的情況下 ， 層元素將開始新的一行 。 可以這樣來理解 ， 就是瀏覽器會(huì)自動(dòng)在層元素的前后各放置一個(gè)換行符 。 層元素的的標(biāo)記是 div....../div， 可選屬性為 align， 取值如下： left：設(shè)定層內(nèi)的文本左對(duì)齊 right：設(shè)定層內(nèi)的元素右對(duì)齊 center：設(shè)定層內(nèi)的元素居中對(duì)齊 justify：允許瀏覽器自動(dòng)調(diào)整字間距 ， 實(shí)現(xiàn)兩端對(duì)齊 。 有自動(dòng)排版的效果 。 為了便于查看比較對(duì)齊效果 ， 我們?yōu)閷釉囟x了一個(gè)樣式 。 在 HTML代碼的頭部標(biāo)記內(nèi)輸入以下代碼： style type=text/css div{ border:999999 1px solid。 background:CCCCCC。 } /style 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 48 表單控件 表單標(biāo)記 form 表單輸入標(biāo)記 input 下拉列表標(biāo)記 select 選項(xiàng)標(biāo)記 option 多行文本控件標(biāo)記 textarea 實(shí)現(xiàn)登陸界面 實(shí)現(xiàn)留言板界面 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 49 表單標(biāo)記 form 表 311 表單標(biāo)記屬性 屬 性 取值 描 述 action URL 數(shù)據(jù)處理程序的 URL。 method get post 向服務(wù)器提交數(shù)據(jù)的方法，默認(rèn)為 get。 name 表單名稱 表單的 唯一標(biāo)識(shí)符， 允許腳本代碼或服務(wù)器程序按名稱訪問，進(jìn)而訪問表單控件。 target _self _blank _parent _top 在何處打開目標(biāo) URL。 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 50 表單輸入標(biāo)記 input 此標(biāo)記在表單中使用頻繁 ， 絕大部分表單內(nèi)容需要用到此標(biāo)記 。 其屬性如表 312所示： 表 312 input標(biāo)記的屬性 屬 性 取 值 描 述 name 字符串 設(shè)定控件的唯一標(biāo)識(shí)符。 type button submit text password textarea checkbox radio reset file hidden image 表單控件的類型。 type=button：表示普通按鈕； type=submit：表示提交按鈕，數(shù)據(jù)將被送到服務(wù)器； type=text：表示輸入單行文本； type=password：表示輸入數(shù)據(jù)為密碼，用星號(hào)表示； type=textarea：表示輸入多行文本； type=checkbox：表示復(fù)選框； type=radio：表示單選框； type=reset：表示清除表單數(shù)據(jù)，以便重新輸入； type=file：表示插入一個(gè)文件； type=hidden：表示隱藏按鈕； type=image：表示插入一個(gè)圖像； value 字符串 設(shè)定控件的默認(rèn)值。 maxlength 正整數(shù) 針對(duì)單行文本框，指定輸入文本長度的上限。 size 正整數(shù) 針對(duì)多行文本框，指定字符數(shù)量的上限。 checked checked 適用于單選框和復(fù)選框，此項(xiàng)被默認(rèn)選中。 src URL 針對(duì)圖片對(duì)象，指定源圖像的 URL 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 51 下拉列表標(biāo)記 select select標(biāo)記可以在表間中插入一個(gè)下拉菜單 ， 下拉列表的每個(gè)選項(xiàng)用option標(biāo)記來定義 。 select標(biāo)記的屬性如表 313所示： 表 313 select標(biāo)記的屬性 屬 性 取 值 描 述 name 字符串 設(shè)定控件的名稱，頁面內(nèi)唯一。 size 正整數(shù) 定義菜單中可見項(xiàng)目的數(shù)目 value 字符串 表示選中選項(xiàng)對(duì)應(yīng)的值 multiple multiple 當(dāng)設(shè)置此屬性時(shí)，允許同時(shí)選定多個(gè)項(xiàng)目。 disabled disabled 當(dāng)設(shè)置此屬性時(shí)，會(huì)禁用該下拉列表。 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 52 選項(xiàng)標(biāo)記 option 該標(biāo)記定義下拉菜單中一個(gè)選項(xiàng) ， 和 select標(biāo)記配合使用 。常見屬性如表 314所示： 表 314 option標(biāo)記的屬性 屬 性 取 值 描 述 value 文本串 該選項(xiàng)的值，推薦使用英文串或數(shù)字。 selected selected 指定該選項(xiàng)默認(rèn)處于選中狀態(tài)。 disabled disabled 指定該選項(xiàng)被禁用。 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 53 多行文本控件標(biāo)記 textarea 使用該標(biāo)記建立多行文本輸入框 。 常見屬性如表 315所示 表 315 textarea標(biāo)記的屬性 屬 性 取 值 描 述 name 文本串 文本框的唯一標(biāo)識(shí)符。 cols 正整數(shù) 規(guī)定文本區(qū)內(nèi)可見的列數(shù)。 rows 正整數(shù) 規(guī)定文本區(qū)內(nèi)可見的行數(shù)。 readonly readonly 設(shè)定為只讀，用戶無法修改。 disabled disabled 禁用此文本框。 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 54 實(shí)現(xiàn)登陸界面 用戶登錄是大多數(shù)網(wǎng)站需要實(shí)現(xiàn)的功能 ， 如會(huì)員管理 ， 電子信箱等等 。 最簡單的登陸界面包含三個(gè)表單控件：用戶名輸入框 、 密碼輸入框和提交按鈕 。 一般需要使用布局元素來控制表單控件的位置 。 圖 315 實(shí)現(xiàn)登陸界面 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 55 實(shí)現(xiàn)留言板界面 留言板是網(wǎng)絡(luò)上常見的功能 ， 可以用來搜集瀏覽者的留言 ， 實(shí)現(xiàn)論壇的發(fā)表功能等等 。 圖 316 留言板界面 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 56 標(biāo)簽選擇器 Dreamweaver提供了插入任意 HTML標(biāo)記的方法 ， 那就是使用標(biāo)簽選擇器 。 下面以實(shí)現(xiàn)滾動(dòng)文字為例講解標(biāo)簽選擇器的使用 。 操作步驟如下： 1. 在菜單欄選擇 “ 插入 —標(biāo)簽 ” 命令 ， 打開標(biāo)簽選擇器 。在左側(cè)選擇 “ 標(biāo)記語言標(biāo)簽 —HTML標(biāo)簽 —頁元素 ” 選項(xiàng) ，然后在右側(cè)列表選擇 “ marquee”， 如圖 317所示： 2. 選擇 marquee標(biāo)簽后 ， 單擊 “ 插入 ” 按鈕 。 然后關(guān)閉“ 標(biāo)簽選擇器 ” 。 在 marquee標(biāo)簽內(nèi)輸入文字 “ 向左滾動(dòng)字幕 ” 。 3. 在菜單欄選擇 “ 窗口 —標(biāo)簽檢查器 ” 命令 ， 將“ direction”選項(xiàng)設(shè)置為 “ left”， 如圖 318所示： 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 57 標(biāo)簽選擇器 圖 317 在標(biāo)簽選擇器中選擇 marquee標(biāo)簽 2022/3/13 網(wǎng)頁設(shè)計(jì)與制作 58 標(biāo)簽選擇器 圖 318 設(shè)置 marquee屬性