【正文】 第 1頁 第 2頁 任務(wù)一 表格的設(shè)計(jì) 任務(wù)二 圖片視頻的插入 任務(wù)三 超鏈接 任務(wù)四 布局 任務(wù)五 框架 任務(wù)六 表單 任務(wù)七 CSS樣式 項(xiàng)目二 Dreamweaver CS4網(wǎng)頁 設(shè)計(jì) 任務(wù)一 表格的設(shè)計(jì) 第 4頁 任務(wù)一 表格的設(shè)計(jì) ● 表格基本概念 表格是網(wǎng)頁制作中使用最多的工具之一，它不僅可以將相關(guān)數(shù)據(jù)有序的排列起來，還可以精確地定位文字、圖像等網(wǎng)頁元素在頁面中的位置，使得頁面在形式上豐富多彩又條理清楚，在組織上井然有序又不顯單調(diào)。 第 5頁 任務(wù)一 表格的設(shè)計(jì) ● 任務(wù)實(shí)施 – 案例 1 表格的設(shè)計(jì) ——主頁面 設(shè)計(jì) ? 新建頁面 ? 查看表格屬性面板進(jìn)行表格屬性設(shè)置 ? 插入或刪除行和列 ? 單元格的拆分和合并 第 6頁 任務(wù)一 表格的設(shè)計(jì) 圖片寬： 204，高： 231 圖片寬： 204，高： 263 圖片寬： 486，高： 263 圖片寬： 204，高： 263 將單元格拆分為 1列 7行 插入內(nèi)嵌表格， 1行 7列 第 7頁 任務(wù)一 表格的設(shè)計(jì) ● 表格基本概念 表格是網(wǎng)頁制作中使用最多的工具之一，它不僅可以將相關(guān)數(shù)據(jù)有序的排列起來，還可以精確地定位文字、圖像等網(wǎng)頁元素在頁面中的位置，使得頁面在形式上豐富多彩又條理清楚，在組織上井然有序又不顯單調(diào)。 表格由行、列和單元格 3部分組成，一般通過表格標(biāo)記 table、行標(biāo)記 tr、單元格標(biāo)記 td來創(chuàng)建。 第 8頁 任務(wù)一 表格的設(shè)計(jì) 行 列 列標(biāo)題 在 HTML 文檔中，廣泛使用表格來存放網(wǎng)頁上的文本和圖像 單元格 表格標(biāo)題 第 9頁 任務(wù)一 表格的設(shè)計(jì) ? table 元素：定義一個(gè)表格 。 – 每 一個(gè)表格只有一對(duì) table和 /table，一張頁面中可以有多個(gè)表格。 ? tr元素：定義表格的 行 – 一 個(gè)表格可以有多行，所以 tr /tr對(duì)于 一個(gè)表格來說不是唯一的。 ? td元素：定義表格的一個(gè)單元格 。 – 每 行可以有不同數(shù)量的單元格，在 td和 /td之間是單元格的具體內(nèi)容。 需要注意的是：上述的 三個(gè)元素必須、而且只能夠配對(duì)使用 。缺少任何一個(gè)元素，都無法定義出一個(gè) 表格。 第 10頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=utf8 / title表格的基本構(gòu)成 /title /head body table border=1 tr td第 1行第 1列單元格 /td td第 1行第 2列單元格 /td /tr tr td第 2行第 1列單元格 /td td第 2行第 2列單元格 /td /tr /table /body /html 第 11頁 任務(wù)一 表格的設(shè)計(jì) 第 12頁 任務(wù)一 表格的設(shè)計(jì) – caption設(shè)置表格標(biāo)題： ? caption 設(shè)置表格的標(biāo)題，一般位于整個(gè)表格之前，一個(gè) table表格只能有一個(gè)表格標(biāo)題 ? 語法： caption 表格標(biāo)題 / caption – th表頭： ? 表格的表頭 th 是 td單元格的一種變體，實(shí)質(zhì)上仍然是一種單元格。一般位于第一行和第一列，用來表明這一行或列的內(nèi)容類別。在一般情況下，瀏覽器會(huì)以粗體和居中的樣式顯示 th 元素中的內(nèi)容。 ? 語法： th ……./ th 第 13頁 任務(wù)一 表格的設(shè)計(jì) html head meta equiv=ContentType content=text/html。 charset=gb2312 / title表格的表頭 /title /head body table border=1 caption考試成績(jī)表 /caption th姓名 /th th語文 /th th數(shù)學(xué) /th th副科 /th tr td張三 /td td95/td td76/td td80/td /tr tr td李四 /td td88/td td90/td td85/td /tr tr td三毛 /td td80/td td89/td td90/td /tr /table /body /html 第 14頁 任務(wù)一 表格的設(shè)計(jì) ● 表格的屬性 – width屬性：指定表格或某一個(gè)表格單元格的寬度。單位可以是 %或者象素。 – height屬性：指定表格或某一個(gè)表格單元格的高度。單位可以是 %或者象素。 – align屬性：指定表格或某一個(gè)單元格里的內(nèi)容（文本、圖片等）的對(duì)齊方式 。 屬性值 含義 Left 左對(duì)齊 Center 居中對(duì)齊 right 右對(duì)齊 第 15頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=utf8 / title表格的基本屬性 /title /head body table width=500 height=130 border=1 align=center caption考試成績(jī)表 /caption th姓名 /th th語文 /th th數(shù)學(xué) /th th副科 /th tr td張三 /td td95/td td76/td td80/td /tr tr td李四 /td td88/td td90/td td85/td /tr tr td三毛 /td td80/td td89/td td90/td /tr /table /body /html 第 16頁 任務(wù)一 表格的設(shè)計(jì) – border屬性：表格邊線粗細(xì)，可以使用 border設(shè)置表格的邊框效果，包括邊框的寬度、變寬的顏色等 。 ? 語法： table border=“邊框?qū)挾?” – border屬性設(shè)置的表格邊框職能影響表格四周的邊框?qū)挾龋荒苡绊憜卧裰g的邊框尺寸。 – bordercolor表格邊框顏色 ? 默認(rèn)情況下邊框顏色是灰色，設(shè)置邊框顏色的前提是邊框的寬度不能為 0，否則無法顯示出邊框的顏色。 ? 語法： – table border=“邊框?qū)挾?” bordercolor=“邊框顏色 ” 第 17頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=utf8 / title表格的邊框顏色 /title /head body table width=200 border=5 bordercolor=66CCFF tr td單元格 1/td td單元格 2/td /tr tr td單元格 3/td td單元格 4/td /tr /table /body /html 第 18頁 任務(wù)一 表格的設(shè)計(jì) – 內(nèi)框?qū)挾?cellspacing （間距） ? 用于設(shè)置表格內(nèi)部每個(gè)單元格之間的間距，單位是像素； ? 語法： – table cellspacing=“內(nèi)框?qū)挾戎?” – 表格內(nèi)文字與邊框間距 cellpadding （填充） ? 在默認(rèn)情況下，單元里的內(nèi)容會(huì)緊貼著表格的邊框，這樣看上去非常擁擠?？梢允褂?cellpadding來設(shè)置單元格邊框與單元格里的內(nèi)容之間的距離； ? 語法： – table cellpadding=“文字與邊框距離值 ” 第 19頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=utf8 / title表格內(nèi)文字與邊框距離 /title /head body table width=200 border=1 cellpadding=10 cellspacing=5 bordercolor=66CCFF tr td單元格 1/td td單元格 2/td /tr tr td單元格 3/td td單元格 4/td /tr /table /body /html 第 20頁 第 21頁 任務(wù)一 表格的設(shè)計(jì) ● 表格的屬性 – bgcolor屬性：指定表格或某一個(gè)單元格的背景顏色。 – background屬性：指定表格或某一個(gè)單元格的背景圖片。其屬性值為一個(gè) URL地址 。 第 22頁 任務(wù)一 表格的設(shè)計(jì) ● 單元格屬性 – width屬性：指定表格或某一個(gè)表格單元格的寬度。單位可以是 %或者象素。 – height屬性：指定表格或某一個(gè)表格單元格的高度。單位可以是 %或者象素。 – bordercolordark屬性 ：?jiǎn)卧竦陌颠吙蚓褪菃卧襁吙虮彻獾牟糠?。通過 bordercolordark可以 設(shè)置單元格暗邊框的顏色。 – bordercolorlight屬性 ：?jiǎn)卧?的兩邊框就是 單元格 邊框向光的 部分。通過 bordercolorlight可以 設(shè)置 單元格亮邊框 的顏色。 第 23頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=gb2312 / title單元格的暗、亮邊框顏色 /title /head body table width=406 border=1 align=center cellpadding=5 cellspacing=2 tr td width=83 bordercolordark=FF9900白羊座 /td td width=83金牛座 /td td width=83雙子座 /td td width=92 bordercolordark=9900CC巨蟹座 /td /tr tr td射手座 /td td魔羯座 /td td水瓶座 /td td雙魚座 /td /tr tr td bordercolorlight=FF9900獅子座 /td td處女座 /td td天秤座 /td td bordercolorlight=9900CC天蝎座 /td /tr /table /body /html 第 24頁 任務(wù)一 表格的設(shè)計(jì) ● 單元格屬性 – align屬性：指定表格或某一個(gè)單元格里的內(nèi)容（文本、圖片等）的水平對(duì)齊方式。 – valign屬性：指定表格或某一個(gè)單元格里的