HTML網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)教程-完整版課件(全)

1、HTML網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)教程實(shí)訓(xùn)一 制作詩詞欣賞頁面主要內(nèi)容制作詩詞欣賞頁面美化詩詞欣賞頁面實(shí)訓(xùn)目標(biāo)：了解HTML網(wǎng)頁基本語法和結(jié)構(gòu)了解HTML基本元素掌握對(duì)網(wǎng)頁中文字的格式化的方法掌握對(duì)網(wǎng)頁中段落的格式化的方法實(shí)訓(xùn)內(nèi)容 文字是網(wǎng)頁的基礎(chǔ)部分，具體內(nèi)容包括瀏覽器中要顯示的文字、空格、特殊符號(hào)以及注釋語句?？梢酝ㄟ^一些HTML標(biāo)記實(shí)現(xiàn)對(duì)文字、段落的格式化。本實(shí)訓(xùn)通過對(duì)網(wǎng)頁中的文字和段落進(jìn)行格式化制作一個(gè)詩詞欣賞頁面 實(shí)訓(xùn)效果常用工具介紹記事本EditPlusNotepad+UltraEditDreamweaver CS6Visual StudioEclipseTextMate常用瀏覽器簡介任務(wù)1：制

2、作詩詞欣賞頁面步驟1：文檔中輸入HTML文檔的基本結(jié)構(gòu) 詩詞欣賞頁面 說明： 1.一個(gè)完整的HTML文檔包含頭部和主體兩個(gè)部分的內(nèi)容，在頭部內(nèi)容里，可以定義標(biāo)題、樣式等，文檔的主體內(nèi)容就是要顯示的信息。任務(wù)1：制作詩詞欣賞頁面步驟1：文檔中輸入HTML文檔的基本結(jié)構(gòu) 詩詞欣賞頁面 說明： 2. HTML用來描述功能的符號(hào)稱為“標(biāo)記”或“標(biāo)簽”。、等都是標(biāo)記。標(biāo)記在HTML源文件中書寫不區(qū)分大小寫。任務(wù)1：制作詩詞欣賞頁面步驟1：文檔中輸入HTML文檔的基本結(jié)構(gòu) 詩詞欣賞頁面 說明： 3.標(biāo)記通常分為單標(biāo)記和雙標(biāo)記兩種類型： （1）單標(biāo)記僅單獨(dú)使用就可以表達(dá)完整的意思。 （2）雙標(biāo)記由首標(biāo)記和尾

3、標(biāo)記兩部分構(gòu)成，必須成對(duì)使用。任務(wù)1：制作詩詞欣賞頁面步驟1：文檔中輸入HTML文檔的基本結(jié)構(gòu) 詩詞欣賞頁面 說明： 4HTML標(biāo)記可以添加一些附加信息，稱之為“屬性”。屬性應(yīng)該寫在首標(biāo)記內(nèi)，并且和標(biāo)記名之間有一個(gè)空格分隔。 任務(wù)1：制作詩詞欣賞頁面步驟1：文檔中輸入HTML文檔的基本結(jié)構(gòu) 詩詞欣賞頁面 說明： 5 :告知瀏覽器或其他程序，這是一個(gè)Web文檔，應(yīng)該按照HTML語言規(guī)則對(duì)文檔內(nèi)容的標(biāo)記進(jìn)行解釋。 任務(wù)1：制作詩詞欣賞頁面步驟1：文檔中輸入HTML文檔的基本結(jié)構(gòu) 詩詞欣賞頁面 說明： 6:是HTML文檔的頭部標(biāo)記 ，在此標(biāo)記中可以插入其他用于說明文件的標(biāo)題和一些公共屬性的標(biāo)記。其中

4、可以用title元素來指定網(wǎng)頁標(biāo)題，即在之間寫上網(wǎng)頁標(biāo)題文字。任務(wù)1：制作詩詞欣賞頁面步驟1：文檔中輸入HTML文檔的基本結(jié)構(gòu) 詩詞欣賞頁面 說明： 7標(biāo)記之間的文本是在瀏覽器中要顯示的頁面內(nèi)容，如圖片、文字、表格、表單、超鏈接等元素。任務(wù)1：制作詩詞欣賞頁面步驟1：文檔中輸入HTML文檔的基本結(jié)構(gòu) 詩詞欣賞頁面 說明： 8為注釋，注釋會(huì)被瀏覽器忽略，不做解釋?？梢允褂米⑨寣?duì)程代碼進(jìn)行解釋，適當(dāng)?shù)淖⑨寣?duì)代碼的閱讀和維護(hù)產(chǎn)生很大的幫助。任務(wù)1：制作詩詞欣賞頁面步驟1：文檔中輸入HTML文檔的基本結(jié)構(gòu) 詩詞欣賞頁面 說明： 9HTML文件的擴(kuò)展名為.html。文件名可以有英文字母、數(shù)字和下劃線組成

5、，不能包含特殊符號(hào)，如空格、$等。文件名區(qū)分大小寫。網(wǎng)站首頁文件名一般是index.html或者default.html。 任務(wù)1：制作詩詞欣賞頁面步驟1：文檔中輸入HTML文檔的基本結(jié)構(gòu)（效果） 任務(wù)1：制作詩詞欣賞頁面步驟2：在標(biāo)記之間錄入詩詞內(nèi)容 任務(wù)1：制作詩詞欣賞頁面步驟2：在標(biāo)記之間錄入詩詞內(nèi)容 （效果）任務(wù)1：制作詩詞欣賞頁面步驟3：修飾文字，通過、等標(biāo)記對(duì)詩詞內(nèi)容進(jìn)行修飾 任務(wù)1：制作詩詞欣賞頁面步驟3：修飾文字，通過、等標(biāo)記對(duì)詩詞內(nèi)容進(jìn)行修飾 說明： 1標(biāo)題字，是用幾種固定字號(hào)顯示的文字，在HTML中，定義了六級(jí)標(biāo)題，從一級(jí)到六級(jí)，每級(jí)標(biāo)題的字體大小依次遞減。 標(biāo) 記描 述標(biāo)

6、 記描 述一級(jí)標(biāo)題四級(jí)標(biāo)題二級(jí)標(biāo)題五級(jí)標(biāo)題三級(jí)標(biāo)題六級(jí)標(biāo)題 align為h標(biāo)記的屬性，設(shè)置標(biāo)題字的對(duì)齊方式，align=”left|center|right” left表示左對(duì)齊，cengter為居中對(duì)齊，right為右對(duì)齊。任務(wù)1：制作詩詞欣賞頁面步驟3：修飾文字，通過、等標(biāo)記對(duì)詩詞內(nèi)容進(jìn)行修飾 說明： 2文字樣式 ，利用標(biāo)記及其屬性對(duì)網(wǎng)頁文字的字體、字號(hào)、顏色進(jìn)行定義。如： （1）face屬性用來定義字體 ，可以為face屬性一次定義多個(gè)字體，字體之間用“，”分隔開，瀏覽器在讀取字體時(shí)，如果第一種字體系統(tǒng)中不存在，就顯示第2種字體，依此類推，如果這些字體都不存在，就顯示系統(tǒng)默認(rèn)字體。 （2

7、）size屬性用來定義字號(hào)，取值范圍17。 （3）color屬性用來定義顏色，其值為該顏色的英文單詞或十六進(jìn)制數(shù)值。任務(wù)1：制作詩詞欣賞頁面步驟3：修飾文字，通過、等標(biāo)記對(duì)詩詞內(nèi)容進(jìn)行修飾 說明： 3文字修飾標(biāo) 記描 述標(biāo) 記描 述加粗文字顯示上標(biāo)斜體文字顯示下標(biāo)文字添加下劃線以斜體顯示地址信息文字添加刪除線其中標(biāo)記用來表示HTML文檔的特定信息，如E-mail、地址、簽名、作者、文檔信息等，這些內(nèi)容通常為斜體，大多數(shù)瀏覽器會(huì)在address元素前后添加一個(gè)換行符。任務(wù)1：制作詩詞欣賞頁面步驟3：修飾文字，通過、等標(biāo)記對(duì)詩詞內(nèi)容進(jìn)行修飾 說明： 4段落標(biāo)記，可以對(duì)文字進(jìn)行段落定義，段落間會(huì)有默

8、認(rèn)間距。它可以單獨(dú)使用，也可以成對(duì)使用。單獨(dú)使用時(shí)，下一個(gè)的開始就意味著上一個(gè)的結(jié)束，良好的習(xí)慣是成對(duì)使用。 align為p標(biāo)記的屬性，設(shè)置標(biāo)題字的對(duì)齊方式，align=”left|center|right” left表示左對(duì)齊，cengter為居中對(duì)齊，right為右對(duì)齊。任務(wù)1：制作詩詞欣賞頁面步驟3：修飾文字，通過、等標(biāo)記對(duì)詩詞內(nèi)容進(jìn)行修飾 說明： 5水平分割線。標(biāo)記在瀏覽器顯示為水平線，可以作為段落之間的分割線，使得文檔結(jié)構(gòu)清晰，層次分明?？梢酝ㄟ^屬性來修飾水平線的樣式。如。 屬 性說 明屬 性說 明align水平線對(duì)齊方式color水平線顏色width水平線寬度noshade水平線不

9、出現(xiàn)陰影size水平線高度任務(wù)1：制作詩詞欣賞頁面步驟3：修飾文字，通過、等標(biāo)記對(duì)詩詞內(nèi)容進(jìn)行修飾 說明： 6換行標(biāo)記，用于文字的換行。 是個(gè)單標(biāo)記，一般，瀏覽器會(huì)根據(jù)窗口的寬度自動(dòng)將文本進(jìn)行換行顯示，如果想強(qiáng)制瀏覽器不換行顯示，可以使用標(biāo)記，但是在標(biāo)記中被包含的內(nèi)容將被強(qiáng)制換行。 7添加空格。代碼中“”表示輸入一個(gè)空格。通常，HTML會(huì)自動(dòng)刪除文字內(nèi)容中的多余空格，不管文字中有多少空格，都被視為一個(gè)空格。為了在網(wǎng)頁中增加空格，可以明確使用“”表示空格。 任務(wù)1：制作詩詞欣賞頁面步驟3：修飾文字，通過、等標(biāo)記對(duì)詩詞內(nèi)容進(jìn)行修飾 說明： 8添加特殊符號(hào)。代碼中“”表示特殊符號(hào)“”。特殊符號(hào)和空格

10、一樣，也是通過在HTML文件中輸入符號(hào)代碼添加的。使用特殊符號(hào)可以輸出鍵盤上沒有的字符。特殊符號(hào)符號(hào)代碼特殊符號(hào)符號(hào)代碼&“￥任務(wù)1：制作詩詞欣賞頁面步驟3：修飾文字，通過、等標(biāo)記對(duì)詩詞內(nèi)容進(jìn)行修飾 （效果）任務(wù)2：美化詩詞欣賞頁面步驟:通過HTML標(biāo)記的屬性來實(shí)現(xiàn)對(duì)頁面中的各個(gè)內(nèi)容進(jìn)行排版、布局、顏色、大小等的控制 任務(wù)2：美化詩詞欣賞頁面步驟:通過HTML標(biāo)記的屬性來實(shí)現(xiàn)對(duì)頁面中的各個(gè)內(nèi)容進(jìn)行排版、布局、顏色、大小等的控制 （效果）HTML網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)教程實(shí)訓(xùn)二 制作新聞列表頁面主要內(nèi)容制作新聞列表頁面美化新聞列表頁面實(shí)訓(xùn)目標(biāo)：掌握無序列表的應(yīng)用掌握有序列表的應(yīng)用掌握嵌套列表的應(yīng)用實(shí)訓(xùn)內(nèi)容

11、 在制作網(wǎng)頁時(shí)，列表是一種常用的格式控制方法，它可以把相關(guān)聯(lián)的內(nèi)容以簡潔易于閱讀的方式呈現(xiàn)出來。本實(shí)訓(xùn)將通過使用無序列表、有序列表以及列表的嵌套制作一個(gè)新聞列表和通知的頁面。 實(shí)訓(xùn)效果任務(wù)1：制作新聞列表頁面步驟1：文檔中輸入HTML文檔的基本結(jié)構(gòu) 新聞列表頁面 任務(wù)1：制作新聞列表頁面步驟2：無序列表應(yīng)用。在標(biāo)記之間添加無序列表標(biāo)記以及列表項(xiàng)標(biāo)記。根據(jù)實(shí)訓(xùn)要求，制作班級(jí)新聞列表。 班級(jí)新聞 最新課程表 關(guān)于普通話考試的通知 鋼琴名曲音樂欣賞-獻(xiàn)給愛麗絲 中國奧運(yùn)屈辱史 div+CSS高級(jí)應(yīng)用學(xué)習(xí) 說明： 1.列表(List)，顧名思義就是在網(wǎng)頁中將相關(guān)資料以條目的形式有序或無序排列而形成的表

12、。常用的列表有無序列表（ul）、有序列表（ol）和定義列表（dl）三種。 任務(wù)1：制作新聞列表頁面步驟2：無序列表應(yīng)用。在標(biāo)記之間添加無序列表標(biāo)記以及列表項(xiàng)標(biāo)記。根據(jù)實(shí)訓(xùn)要求，制作班級(jí)新聞列表。 班級(jí)新聞 最新課程表 關(guān)于普通話考試的通知 鋼琴名曲音樂欣賞-獻(xiàn)給愛麗絲 中國奧運(yùn)屈辱史 div+CSS高級(jí)應(yīng)用學(xué)習(xí) 說明： 2.無序列表ul ，是一個(gè)沒有特定順序的相關(guān)條目（也稱為列表項(xiàng)）的集合。type屬性 ，disc：指定項(xiàng)目符號(hào)為一個(gè)實(shí)心圓點(diǎn)；circle：定項(xiàng)目符號(hào)為一個(gè)空心圓；square：指定項(xiàng)目符號(hào)為一個(gè)實(shí)心方塊。 任務(wù)1：制作新聞列表頁面步驟2：無序列表應(yīng)用。在標(biāo)記之間添加無序列表標(biāo)

13、記以及列表項(xiàng)標(biāo)記。根據(jù)實(shí)訓(xùn)要求，制作班級(jí)新聞列表。（效果） 任務(wù)1：制作新聞列表頁面步驟3：有序列表應(yīng)用。在標(biāo)記之間繼續(xù)添加標(biāo)記以及列表項(xiàng)標(biāo)記。制作普通話考試報(bào)名通知列表。 報(bào)名時(shí)間：3月1621日，逾期不予受理。 報(bào)名地點(diǎn)：所在院系辦公室。 報(bào)名費(fèi)用：按物價(jià)局規(guī)定85元/人/次（含培訓(xùn)費(fèi)用），報(bào)名時(shí)交齊。 提交資料及注意事項(xiàng)： 說明： 1.有序列表(Ordered List)是一個(gè)有特定順序的相關(guān)條目（也稱為列表項(xiàng)）的集合。type屬性 ，1：指定項(xiàng)目編號(hào)為阿拉伯?dāng)?shù)字 ；a：指定項(xiàng)目編號(hào)為小寫英文字母。A：指定項(xiàng)目編號(hào)為大寫英文字母； i：指定項(xiàng)目編號(hào)為小寫羅馬數(shù)字；I：指定項(xiàng)目編號(hào)為大寫羅

14、馬數(shù)字。 任務(wù)1：制作新聞列表頁面步驟3：有序列表應(yīng)用。在標(biāo)記之間繼續(xù)添加標(biāo)記以及列表項(xiàng)標(biāo)記。制作普通話考試報(bào)名通知列表。 報(bào)名時(shí)間：3月1621日，逾期不予受理。 報(bào)名地點(diǎn)：所在院系辦公室。 報(bào)名費(fèi)用：按物價(jià)局規(guī)定85元/人/次（含培訓(xùn)費(fèi)用），報(bào)名時(shí)交齊。 提交資料及注意事項(xiàng)： 說明： 2.編號(hào)起始值。通常，在指定列表的編號(hào)樣式后，瀏覽器會(huì)從1、a、A、i或I開始自動(dòng)編號(hào)。有序列表標(biāo)記的start屬性，可改變編號(hào)的起始值。start屬性值是一個(gè)整數(shù)，表示從哪一個(gè)數(shù)字或字母開始編號(hào)。例如，設(shè)置start=3，則有序列表的列表項(xiàng)編號(hào)將從3、c、C、iii或III開始編號(hào)。任務(wù)1：制作新聞列表頁面

15、步驟3：有序列表應(yīng)用。在標(biāo)記之間繼續(xù)添加標(biāo)記以及列表項(xiàng)標(biāo)記。制作普通話考試報(bào)名通知列表。 報(bào)名時(shí)間：3月1621日，逾期不予受理。 報(bào)名地點(diǎn)：所在院系辦公室。 報(bào)名費(fèi)用：按物價(jià)局規(guī)定85元/人/次（含培訓(xùn)費(fèi)用），報(bào)名時(shí)交齊。 提交資料及注意事項(xiàng)： 說明： 3.列表項(xiàng)樣式。使用列表項(xiàng)標(biāo)記的type屬性，可以指定單個(gè)列表項(xiàng)的編號(hào)。 4.列表項(xiàng)編號(hào)。列表項(xiàng)標(biāo)記的value屬性，可以改變當(dāng)前列表項(xiàng)的編號(hào)大小，并會(huì)影響其后所有列表項(xiàng)的編號(hào)大小。但該屬性只適用于有序列表。任務(wù)1：制作新聞列表頁面步驟3：有序列表應(yīng)用。在標(biāo)記之間繼續(xù)添加標(biāo)記以及列表項(xiàng)標(biāo)記。制作普通話考試報(bào)名通知列表。（效果）任務(wù)1：制作新聞

16、列表頁面步驟4：制作列表嵌套。在之前的有序列表標(biāo)記內(nèi)嵌套一無序列表，并設(shè)置無序列表標(biāo)記的type屬性值為square。 提交資料及注意事項(xiàng)： 填寫準(zhǔn)考證一份（編號(hào)不用填寫），所填姓名和出生年月等須與身份證一致； 提交小一寸彩色證件照3張（照片不能是打印版、不能是生活照， 3張照片必須統(tǒng)一底片），其中兩張照片貼在報(bào)名表和準(zhǔn)考證上，另一張用鋼筆在背面寫上校名、系別和姓名，與表格一起上交。 說明：列表還可以嵌套使用，也就是一個(gè)列表中還可以包含多層子列表。嵌套的列表可以是無序列表的嵌套，也可以是有序列表的嵌套 。 任務(wù)1：制作新聞列表頁面步驟4：制作列表嵌套。在之前的有序列表標(biāo)記內(nèi)嵌套一無序列表，并設(shè)

17、置無序列表標(biāo)記的type屬性值為square。（效果） 任務(wù)2：美化新聞列表頁面步驟：設(shè)置“班級(jí)新聞”、“普通話考試報(bào)名通知”文字內(nèi)容為三級(jí)標(biāo)題大小，并以粗體的形式顯示，在兩部分內(nèi)容之間加一水平分隔線。 班級(jí)新聞普通話考試報(bào)名通知 任務(wù)2：美化新聞列表頁面步驟：設(shè)置“班級(jí)新聞”、“普通話考試報(bào)名通知”文字內(nèi)容為三級(jí)標(biāo)題大小，并以粗體的形式顯示，在兩部分內(nèi)容之間加一水平分隔線。（效果） HTML網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)教程實(shí)訓(xùn)三 制作導(dǎo)航菜單主要內(nèi)容編輯導(dǎo)航菜單美化導(dǎo)航菜單實(shí)訓(xùn)目標(biāo)：掌握超鏈接的使用理解鏈接路徑的相關(guān)概念掌握下載鏈接和郵件鏈接的使用掌握CSS樣式的定義和使用掌握CSS樣式對(duì)文字、鏈接、列表樣

18、式控制的屬性實(shí)訓(xùn)內(nèi)容 網(wǎng)頁文件的最大魅力是超于各個(gè)文件的空間，通過超鏈接相互連接構(gòu)成一個(gè)紛繁復(fù)雜的互聯(lián)網(wǎng)世界。超鏈接（Hyperlink）是一個(gè)網(wǎng)站的精髓，是一種允許一個(gè)網(wǎng)頁同其他網(wǎng)頁或站點(diǎn)之間進(jìn)行連接的元素。本次實(shí)訓(xùn)內(nèi)容主要利用超鏈接制作導(dǎo)航菜單，為了使導(dǎo)航菜單效果更加美觀、適用，結(jié)合無序列表和CSS樣式表進(jìn)行樣式控制，達(dá)到精美的效果。實(shí)訓(xùn)效果任務(wù)1：編輯導(dǎo)航菜單步驟1：準(zhǔn)備素材圖片，圖片寬度為107px,高度為39px，需要兩張，分別表示超鏈接正常狀態(tài)下的背景和鼠標(biāo)經(jīng)過超鏈接時(shí)的背景。 步驟2：創(chuàng)建站點(diǎn)文件夾“實(shí)訓(xùn)3”。站點(diǎn)的主要作用是用于組織管理整個(gè)網(wǎng)站中所包含網(wǎng)頁文件、樣式表、js腳本

19、、flash、網(wǎng)頁素材等文件。在該站點(diǎn)文件夾下面創(chuàng)建“images”文件夾，用來組織管理該網(wǎng)站所使用的圖片素材，將前面準(zhǔn)備好的圖片素材復(fù)制到images文件夾下。 步驟3：打開編輯環(huán)境，創(chuàng)建HTML文檔3-1.html，并保存到指定站點(diǎn)文件夾下面。 任務(wù)1：編輯導(dǎo)航菜單步驟4：在3-1.html文檔中輸入HTML文檔的基本結(jié)構(gòu)，并修改標(biāo)題為“導(dǎo)航菜單 。 導(dǎo)航菜單 任務(wù)1：編輯導(dǎo)航菜單步驟5：創(chuàng)建導(dǎo)航菜單，通過無序列表和超鏈接完成導(dǎo)航菜單的制作，每個(gè)超鏈接都是無序列表的列表項(xiàng)。 .首頁網(wǎng)頁版式布局div+CSS教程div+CSS實(shí)例常用代碼站長雜談技術(shù)文檔資源下載聯(lián)系我們. 任務(wù)1：編輯導(dǎo)航菜

20、單步驟5：創(chuàng)建導(dǎo)航菜單，通過無序列表和超鏈接完成導(dǎo)航菜單的制作，每個(gè)超鏈接都是無序列表的列表項(xiàng)。 說明： 1.超鏈接由標(biāo)記開始，結(jié)束，它們之間的文字為超鏈接文字。 2.超鏈接標(biāo)記的href屬性為鏈接屬性，和URL結(jié)合，定義鏈接所指定的目標(biāo)地址。通常的取值有如下形式： （1）“#”，表示為空鏈接，即形成鏈接效果，但不跳轉(zhuǎn)到任何網(wǎng)頁。由于本次實(shí)訓(xùn)只是做出導(dǎo)航菜單效果，故只使用空鏈接即可。 （2）news.html，表示當(dāng)單擊鏈接文字時(shí)跳轉(zhuǎn)到news.html網(wǎng)頁。 （3）res/10day_DIV+CSS.rar，表示下載鏈接，單擊鏈接文字時(shí)，彈出下載窗口，可以將該目錄下的文件保存到用戶指定的位置

21、。 （4）href=mailto:?subject=聯(lián)系我們，表示郵件鏈接，其格式一般為：，其中subject為郵件主題，其它參數(shù)有cc為抄送，bcc為暗送，body為郵件內(nèi)容，多個(gè)參數(shù)之間使用&進(jìn)行分隔。單擊該郵件鏈接時(shí)會(huì)打開outlook來編輯發(fā)送郵件。任務(wù)1：編輯導(dǎo)航菜單步驟5：創(chuàng)建導(dǎo)航菜單，通過無序列表和超鏈接完成導(dǎo)航菜單的制作，每個(gè)超鏈接都是無序列表的列表項(xiàng)。 說明： 3超鏈接標(biāo)記的其他常用屬性： （1）target屬性：用于指定打開鏈接的目標(biāo)窗口，其默認(rèn)方式是原窗口，其具體的屬性值及描述如下： 1）_parent：在上一級(jí)窗口中打開，一般是用分幀的框架頁會(huì)經(jīng)常使用。 2）_blan

22、k：在新窗口打開。 3）_self：在同一幀或窗口中打開，是target的默認(rèn)值。 4）_top：在瀏覽器的整個(gè)窗口中打開，忽略任何框架。 （2）title屬性：用戶指定當(dāng)鼠標(biāo)指向鏈接時(shí)所顯示的提示信息。 （3）name屬性：定義一個(gè)鏈接位置名稱，如“a”，當(dāng)href屬性值為“#a”時(shí)，可以跳轉(zhuǎn)到當(dāng)前位置，實(shí)現(xiàn)頁內(nèi)跳轉(zhuǎn)即目錄鏈接。任務(wù)1：編輯導(dǎo)航菜單步驟5：創(chuàng)建導(dǎo)航菜單，通過無序列表和超鏈接完成導(dǎo)航菜單的制作，每個(gè)超鏈接都是無序列表的列表項(xiàng)。（效果） 任務(wù)2：美化導(dǎo)航菜單步驟1：在html文檔開頭添加文檔類型說明 說明： 這句話標(biāo)明本HTML文檔是過渡類型，另外還有框架類型和嚴(yán)格類型，目前一般

23、都采用過渡類型，因?yàn)闉g覽器對(duì)XHTML的解析比較寬松，允許使用HTML4.01中的標(biāo)簽，但必須符合XHTML的語法。HTML文檔類型說明能提供對(duì)CSS樣式的支持。 任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 1CSS（Cascading Style Sheet）稱為層疊樣式表，是對(duì)頁面內(nèi)容和顯示風(fēng)格分離思想的一種體現(xiàn)，通過給一個(gè)普通網(wǎng)頁文件添加CSS規(guī)則，就可以得到十分美觀

24、的網(wǎng)頁。樣式表的每個(gè)規(guī)則都有兩個(gè)主要部分：選擇符和聲明。選擇符用來決定哪些元素受到影響，聲明由一個(gè)或多個(gè)屬性值對(duì)組，用來成定義樣式。 任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 基本語法如下： 選擇符屬性1:屬性值;屬性2:屬性值可以為一個(gè)選擇符定義多個(gè)屬性，屬性名與屬性值之間用冒號(hào)（:）分開，每個(gè)屬性值對(duì)之間用分號(hào)（;）分開。任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和

25、標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 2CSS的設(shè)置方式： （1）內(nèi)聯(lián)樣式表（inline style sheets），也稱行內(nèi)樣式表，是在 HTML標(biāo)記內(nèi)直接添加style屬性，style屬性值就是樣式的聲明。如： 任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-t

26、ype:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 2CSS的設(shè)置方式： （2）嵌入樣式表（embedded style sheets），也稱內(nèi)部樣式表，是在標(biāo)記對(duì)中添加的標(biāo)記對(duì)，在該標(biāo)記對(duì)中添加各種網(wǎng)頁元素的樣式規(guī)則定義。 如：p font-size:12pt; color:#f00;任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 2CSS的設(shè)置方式： （3

27、）外部樣式表（linked style sheets）。將樣式規(guī)則定義語句放置在一個(gè)單獨(dú)的外部文件中，這就是外部樣式表文件，其擴(kuò)展名為.css。一個(gè)外部樣式表文件可以通過在標(biāo)記對(duì)中添加標(biāo)記鏈接到HTML文檔中。 如：任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 2CSS的設(shè)置方式： （4）導(dǎo)入樣式表（imported style sheets），通過import url(/c

28、ss/global.css);語句將外部樣式表文件導(dǎo)入到另一個(gè)CSS文件中，或?qū)氲紿TML文件的標(biāo)記對(duì)中。該語句必須放在標(biāo)記對(duì)中的開始部分，并以分號(hào)（;）結(jié)束。任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 3.HTML的選擇符 （1） HTML選擇符，就是HTML標(biāo)記名稱，如果在CSS中將某個(gè)HTML標(biāo)記名定義成了選擇符，那么在CSS應(yīng)用的網(wǎng)頁中，所有的這個(gè)HTML標(biāo)記內(nèi)的

29、元素都會(huì)按照相應(yīng)的樣式規(guī)則定義語句來顯示。 任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 3.HTML的選擇符 （2） CLASS選擇符(類選擇符)，定義類選擇符時(shí)需要在“類名”前加點(diǎn)(.)。使用類選擇符定義的樣式規(guī)則對(duì)所有HTML標(biāo)記中定義了class屬性，且屬性值為該“類名”的HTML元素起作用。 如：第一段文字.stopcolor:red; 任務(wù)2：美化導(dǎo)航菜單步驟2：

30、在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 3.HTML的選擇符 （3） ID選擇符，定義ID選擇符時(shí)需要在ID值前加#號(hào)。使用ID選擇符定義的樣式規(guī)則只對(duì)具有某一ID屬性值的HTML元素起作用。 如：一段文字#pdemocolor:red; 任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;paddi

31、ng:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 3.HTML的選擇符 （4）關(guān)聯(lián)選擇符。是指一個(gè)用空格隔開的兩個(gè)或多個(gè)單一選擇符所組成的字符串，具有包含關(guān)系。 如：p h2background:yellow; 任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 3.HTML的選擇符 （5）組合選擇符。為了減少樣式表的重復(fù)聲

32、明，可以在一條樣式規(guī)則定義語句中組合若干個(gè)選擇符，每個(gè)選擇符之間用逗號(hào)（,）隔開。如：h1,h2,h3,p,li,acolor:yellow; 任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 3.HTML的選擇符 （6）偽元素選擇符（偽類）。是指對(duì)同一HTML元素的各種狀態(tài)和其所包括的部分內(nèi)容的一種定義方式。 任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即

33、應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ 說明： 4. “margin”屬性和“padding”屬性 “margin”屬性表示塊級(jí)元素的外邊距 ， “padding”屬性表示塊級(jí)標(biāo)記的內(nèi)邊距。任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/

34、 說明： 5.列表屬性“l(fā)ist-style-type:none;”去掉列表的項(xiàng)目符號(hào)。 CSS列表屬性主要包括列表的排列方式、列表符的形式和位置。 任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則（效果） bodymargin:0px; /*去掉body的外邊距*/ 任務(wù)2：美化導(dǎo)航菜單步驟2：在程序3-3 的和標(biāo)記之間添加標(biāo)記對(duì)，即應(yīng)用嵌入樣式表（內(nèi)部樣式表），定義相應(yīng)的CSS樣式規(guī)則（效果） 任務(wù)2：美化導(dǎo)航菜單步驟3：設(shè)置超鏈接效果，在標(biāo)記對(duì)之間繼續(xù)添加“a”選擇符的樣式規(guī)則 a text-decoration:

35、none; color:#D84700; font-weight:bold; font-size:12px; display:block; width:107px; height:39px; background:url(images/nav_bg_01.jpg) 0 0 no-repeat; text-align:center; line-height:39px;任務(wù)2：美化導(dǎo)航菜單步驟3：設(shè)置超鏈接效果，在標(biāo)記對(duì)之間繼續(xù)添加“a”選擇符的樣式規(guī)則 說明： 1.樣式規(guī)則定義中使用的text-decoration、color、font-weight、font-size屬性均屬于文字樣式屬性。文

36、字樣式屬性主要包括文字的字體、大小、顏色、顯示效果等基本樣式 任務(wù)2：美化導(dǎo)航菜單步驟3：設(shè)置超鏈接效果，在標(biāo)記對(duì)之間繼續(xù)添加“a”選擇符的樣式規(guī)則 說明： 2. “display”屬性為CSS布局屬性，用于指定元素在網(wǎng)頁中將如何放置 , display屬性值為“block”，目的是將HTML元素a，轉(zhuǎn)換成塊級(jí)元素。此處必須轉(zhuǎn)換為塊級(jí)元素，否則無法設(shè)置超鏈接標(biāo)記的高度和寬度。 html中元素被分為兩類，一類是塊級(jí)元素，一類是內(nèi)聯(lián)元素。塊級(jí)元素：就是一個(gè)方塊，像段落一樣，默認(rèn)占據(jù)一行出現(xiàn)，即前后都有換行；內(nèi)聯(lián)元素：又叫行內(nèi)元素，顧名思義，只能放在行內(nèi)，就像一個(gè)單詞，不會(huì)造成前后換行，起輔助作用。

37、可以用CSS的屬性值對(duì)“display:inline”將塊級(jí)元素改變?yōu)閮?nèi)聯(lián)元素，也可以用“display:block”將內(nèi)聯(lián)元素改變?yōu)閴K級(jí)元素。 任務(wù)2：美化導(dǎo)航菜單步驟3：設(shè)置超鏈接效果，在標(biāo)記對(duì)之間繼續(xù)添加“a”選擇符的樣式規(guī)則 說明： 3. “width”屬性和“height”屬性用來設(shè)置a元素（已被轉(zhuǎn)化為塊級(jí)元素）的寬度和高度，寬度值和高度值應(yīng)該和前面提供的背景圖片大小一致。 4“background”是CSS的背景屬性，用來設(shè)置超鏈接默認(rèn)狀態(tài)下的背景圖片。其中，“url()”：指定背景圖片的相對(duì)路徑；“0 0”：表示背景圖片的位置，從左上（left,top）位置顯示；“no-repe

38、at”：表示背景圖片不平鋪。這是背景屬性的綜合屬性設(shè)置，屬性值之間必須以空格分隔。背景屬性主要包括背景顏色、背景圖像以及背景圖像的控制 。任務(wù)2：美化導(dǎo)航菜單步驟3：設(shè)置超鏈接效果，在標(biāo)記對(duì)之間繼續(xù)添加“a”選擇符的樣式規(guī)則 說明： 5. text-align:center;：設(shè)置超鏈接文本水平居中對(duì)齊；line-height:39px; ：設(shè)置行高為39像素，目的是將導(dǎo)航中的文字在垂直方向上居中對(duì)齊。通常為了實(shí)現(xiàn)文字在塊級(jí)元素中垂直居中對(duì)齊，需要將這個(gè)屬性的值與塊級(jí)元素的高度值相同，來實(shí)現(xiàn)垂直居中的效果。 任務(wù)2：美化導(dǎo)航菜單步驟3：設(shè)置超鏈接效果，在標(biāo)記對(duì)之間繼續(xù)添加“a”選擇符的樣式規(guī)則

39、 （效果）任務(wù)2：美化導(dǎo)航菜單步驟4：通過CSS偽元素選擇符設(shè)置導(dǎo)航菜單在鼠標(biāo)移動(dòng)到鏈接之上的效果。在標(biāo)記對(duì)之間繼續(xù)添加“a”標(biāo)記的偽類CSS樣式，當(dāng)鼠標(biāo)移動(dòng)超鏈接之上時(shí)更換背景圖片。 a:hoverbackground:url(images/nav_bg_02.jpg) 0 0 no-repeat; 說明： 1. “a:hover”：表示當(dāng)鼠標(biāo)經(jīng)過或移至超鏈接之上時(shí)，超鏈接所顯示的效果，通過“background”屬性為超鏈接更換背景圖片。 2偽元素選擇符使得用戶體驗(yàn)大大提高，如：我們可以設(shè)置鼠標(biāo)移上時(shí)改變顏色或下劃線等屬性來告知用戶這個(gè)是可以點(diǎn)擊的，設(shè)置已訪問過的鏈接的顏色變灰暗或加刪除線

40、告知用戶這個(gè)鏈接的內(nèi)容已訪問過了。 任務(wù)2：美化導(dǎo)航菜單步驟4：通過CSS偽元素選擇符設(shè)置導(dǎo)航菜單在鼠標(biāo)移動(dòng)到鏈接之上的效果。在標(biāo)記對(duì)之間繼續(xù)添加“a”標(biāo)記的偽類CSS樣式，當(dāng)鼠標(biāo)移動(dòng)超鏈接之上時(shí)更換背景圖片。（效果） HTML網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)教程實(shí)訓(xùn)四 制作個(gè)人相冊(cè)主要內(nèi)容編輯個(gè)人相冊(cè)美化個(gè)人相冊(cè)實(shí)訓(xùn)目標(biāo)：掌握標(biāo)記了解標(biāo)記及屬性理解盒子模型的概念實(shí)訓(xùn)內(nèi)容 文字是網(wǎng)頁中最重要的元素，圖像、聲音也是網(wǎng)頁中必不可少的元素。直觀、明了、絢麗多彩的圖片往往會(huì)給網(wǎng)頁帶來很大的生機(jī)，能豐富網(wǎng)頁的信息內(nèi)容，增強(qiáng)網(wǎng)頁的表現(xiàn)能力。本次實(shí)訓(xùn)內(nèi)容主要利用圖像標(biāo)記制作個(gè)人相冊(cè)，為了使個(gè)人相冊(cè)的制作效果更加美觀，結(jié)合使用了

41、DIV、無序列表、超鏈接以及CSS樣式表來制作精美的個(gè)人相冊(cè)。實(shí)訓(xùn)效果任務(wù)1：編輯個(gè)人相冊(cè)步驟1：創(chuàng)建站點(diǎn)文件夾，實(shí)訓(xùn)站點(diǎn)文件夾為“實(shí)訓(xùn)4”，并在該站點(diǎn)文件夾下面創(chuàng)建“mages”文件夾，將前面準(zhǔn)備好的圖片素材復(fù)制到“images”文件夾下。步驟2：打開編輯環(huán)境，創(chuàng)建HTML文檔4-1.html，并保存到指定站點(diǎn)文件夾下面 。 任務(wù)1：編輯個(gè)人相冊(cè)步驟3：在4-1.html文檔中輸入HTML文檔的基本結(jié)構(gòu)，并修改標(biāo)題為“個(gè)人相冊(cè) 。 個(gè)人相冊(cè) 任務(wù)1：編輯個(gè)人相冊(cè)步驟4：創(chuàng)建個(gè)人相冊(cè)內(nèi)容，即在標(biāo)記之間添加如下代碼 。 說明： 1.個(gè)人相冊(cè)最終效果為3行4列布局的12張圖片，代碼中只使用了同一張

42、圖片和描述。任務(wù)1：編輯個(gè)人相冊(cè)步驟4：創(chuàng)建個(gè)人相冊(cè)內(nèi)容，即在標(biāo)記之間添加如下代碼 。 說明： 2. 標(biāo)記，屬于塊級(jí)標(biāo)記，是網(wǎng)頁制作中常用的標(biāo)記代碼中為標(biāo)記添加了“id”屬性，目的是在樣式表中通過ID選擇符對(duì)標(biāo)記進(jìn)行位置和樣式控制。 任務(wù)1：編輯個(gè)人相冊(cè)步驟4：創(chuàng)建個(gè)人相冊(cè)內(nèi)容，即在標(biāo)記之間添加如下代碼 。 說明： 3. 標(biāo)記用來在網(wǎng)頁中添加圖片?！皊rc”屬性是必須的，用來指定所顯示圖片的路徑。除了“src”屬性，其他屬性都是可以省略的。 任務(wù)1：編輯個(gè)人相冊(cè)步驟4：創(chuàng)建個(gè)人相冊(cè)內(nèi)容，即在標(biāo)記之間添加如下代碼 。 說明： 4.定義標(biāo)記對(duì)將所有圖片設(shè)置為超鏈接，并定義無序列表，將所有的圖像鏈接

43、放置在標(biāo)記對(duì)中，作為無序列表的列表項(xiàng)。 任務(wù)1：編輯個(gè)人相冊(cè)步驟4：創(chuàng)建個(gè)人相冊(cè)內(nèi)容，即在標(biāo)記之間添加如下代碼 。 說明： 5. 標(biāo)記為網(wǎng)頁添加背景音樂， “src”屬性是必須的，指定背景音樂所在的路徑，“l(fā)oop”屬性指定該背景音樂的播放次數(shù) ，值為“-1”或“infinite”表示無限次，其值為正整數(shù)時(shí)代表播放次數(shù)。 任務(wù)1：編輯個(gè)人相冊(cè)步驟4：創(chuàng)建個(gè)人相冊(cè)內(nèi)容，即在標(biāo)記之間添加如下代碼 。（效果） 任務(wù)2：美化個(gè)人相冊(cè)步驟1：定義內(nèi)部樣式表，通過對(duì)“body”和“ul”的樣式定義，設(shè)置和的顯示效果。添加樣式規(guī)則定義。CSS代碼如下 ： /*去掉body的外邊距*/bodymargin:0

44、px; font-size:12px; font-family:Verdana; line-height:1.5;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ulmargin:0px;padding:0px; list-style-type:none; 說明： 1“body”是CSS中的HTML標(biāo)記選擇符，代表標(biāo)記，樣式規(guī)則“margin:0px;”去掉頁面的外邊距，樣式規(guī)則“font-size:12px;font-family:Verdana; line-height:1.5;”設(shè)置頁面中文字為12像素大小、Verdana字體、行高為1.5倍。任務(wù)2：美化個(gè)人相冊(cè)步驟1：定義內(nèi)部樣式表，通過對(duì)

45、“body”和“ul”的樣式定義，設(shè)置和的顯示效果。添加樣式規(guī)則定義。CSS代碼如下 ： /*去掉body的外邊距*/bodymargin:0px; font-size:12px; font-family:Verdana; line-height:1.5;/*去掉ul的外邊距、內(nèi)邊距和項(xiàng)目符號(hào)*/ulmargin:0px;padding:0px; list-style-type:none; 說明： 2.“ul”為無序列表，通過“margin”屬性和“padding”屬性去掉列表的外邊距和內(nèi)邊距，“l(fā)ist-style-type”屬性值為“none”，用于去掉列表的項(xiàng)目符號(hào)。 任務(wù)2：美化個(gè)人相

46、冊(cè)說明： 3.盒模型的概念 ,每一個(gè)盒子都有內(nèi)容（conten）、填充（padding）、邊框（border）、邊界（margin）這四個(gè)方面?？梢酝ㄟ^CSS盒模型中的margin屬性、border屬性以及padding屬性設(shè)置元素與網(wǎng)頁之間的空白距離、元素邊框的寬度、顏色、樣式，以及元素內(nèi)容與邊框之間的空白距離等。 任務(wù)2：美化個(gè)人相冊(cè)說明： （1）設(shè)置邊界,邊界margin也稱之為：外邊距、外補(bǔ)丁或外邊界，它的4個(gè)屬性主要是控制元素邊界與網(wǎng)頁其他內(nèi)容的空白距離，4個(gè)邊界一般按順時(shí)針方向：上、右、下、左的順序分別為上邊界（margin-top）、右邊界（margin-right）、下邊界（m

47、argin-bottom）、左邊界（margin-left）四個(gè)屬性。 任務(wù)2：美化個(gè)人相冊(cè)說明： （2）設(shè)置填充 ,填充padding也稱之為：內(nèi)邊距、內(nèi)補(bǔ)丁或內(nèi)邊界，它的4個(gè)屬性主要是控制元素邊界與內(nèi)部內(nèi)容之間的空白距離，屬性及設(shè)置方法同margin。任務(wù)2：美化個(gè)人相冊(cè)說明： （3）設(shè)置邊框 ,對(duì)元素的邊框border可以進(jìn)行樣式、顏色、粗細(xì)等屬性的設(shè)置，每種屬性都包含上、右、下、左四個(gè)方向。 邊框樣式屬性border-style，用于設(shè)置元素邊框的不同顯示風(fēng)格 。 邊框?qū)挾葘傩詁order-width，用于設(shè)置元素邊框的寬度 邊框顏色屬性border-color，用于設(shè)置元素邊框的顏色

48、 邊框?qū)傩跃C合設(shè)置border，用于同時(shí)設(shè)置邊框的樣式、寬度和顏色 任務(wù)2：美化個(gè)人相冊(cè)說明： （3）設(shè)置邊框 ,對(duì)元素的邊框border可以進(jìn)行樣式、顏色、粗細(xì)等屬性的設(shè)置，每種屬性都包含上、右、下、左四個(gè)方向。 邊框樣式屬性border-style，用于設(shè)置元素邊框的不同顯示風(fēng)格 。 邊框?qū)挾葘傩詁order-width，用于設(shè)置元素邊框的寬度 邊框顏色屬性border-color，用于設(shè)置元素邊框的顏色 邊框?qū)傩跃C合設(shè)置border，用于同時(shí)設(shè)置邊框的樣式、寬度和顏色 任務(wù)2：美化個(gè)人相冊(cè)步驟1：定義內(nèi)部樣式表，通過對(duì)“body”和“ul”的樣式定義，設(shè)置和的顯示效果。添加樣式規(guī)則定義。

49、（效果）任務(wù)2：美化個(gè)人相冊(cè)步驟2：設(shè)置圖片顯示效果，當(dāng)圖片被設(shè)置為超鏈接后，會(huì)自動(dòng)顯示圖片的默認(rèn)邊框，為了不影響欣賞效果，需要將圖片的默認(rèn)邊框去掉，可以直接在標(biāo)記中添加屬性“border”，并設(shè)置值為“0”，或者通過CSS樣式將邊框去掉，CSS代碼如下所示 img border:0px; 說明： “border”屬性是邊框?qū)傩缘木C合應(yīng)用，設(shè)置圖片元素上、右、下、左四個(gè)方向的邊框?qū)挾染鶠?像素。任務(wù)2：美化個(gè)人相冊(cè)步驟2：設(shè)置圖片顯示效果，當(dāng)圖片被設(shè)置為超鏈接后，會(huì)自動(dòng)顯示圖片的默認(rèn)邊框，為了不影響欣賞效果，需要將圖片的默認(rèn)邊框去掉，可以直接在標(biāo)記中添加屬性“border”，并設(shè)置值為“0”，

50、或者通過CSS樣式將邊框去掉。（效果）任務(wù)2：美化個(gè)人相冊(cè)步驟3：設(shè)置超鏈接文字樣式，通過如下的CSS屬性設(shè)置，代碼如下所示： a color:#05a; text-decoration:none;a:hover color:#f00; 說明： 1.樣式表中的HTML選擇符“a”代表了頁面中的所有標(biāo)記，即所有的超鏈接將按此狀態(tài)進(jìn)行顯示。 2.通過“color”屬性設(shè)置超鏈接正常狀態(tài)下的文字顏色為“#05a”，通過將“text-decoration”屬性設(shè)置為“none”值，去掉超鏈接文字的下劃線。 3.通過偽元素選擇符“a:hover”設(shè)置鼠標(biāo)經(jīng)過超鏈接時(shí)文字的顏色為紅色。任務(wù)2：美化個(gè)人相冊(cè)

51、步驟3：設(shè)置超鏈接文字樣式，（效果） 任務(wù)2：美化個(gè)人相冊(cè)步驟4：設(shè)置相冊(cè)在頁面水平居中的位置顯示及邊框樣式，即標(biāo)記的位置和樣式，代碼如下所示：#layout width:390px; margin:0px auto;border:2px solid #ccc; padding-bottom:20px; 說明： 1.“l(fā)ayout”為標(biāo)記的ID屬性值，CSS樣式對(duì)標(biāo)記進(jìn)行樣式控制。 2.的寬度默認(rèn)為瀏覽器窗口的100%的寬度，寬度屬性設(shè)置寬度為390px；高度未設(shè)置，會(huì)自適應(yīng)高度; 邊框?qū)傩栽O(shè)置四面邊框均為2px，實(shí)線，灰色；填充屬性設(shè)置底部內(nèi)填充為20px； 3.“margin:0px au

52、to;”，邊界屬性設(shè)置上下邊界為0px，左右為邊界為“auto”，可以實(shí)現(xiàn)標(biāo)記在頁面水平方向上居中顯示。任務(wù)2：美化個(gè)人相冊(cè)步驟4：設(shè)置相冊(cè)在頁面水平居中的位置顯示及邊框樣式。（效果）任務(wù)2：美化個(gè)人相冊(cè)步驟5：設(shè)置個(gè)人相冊(cè)中圖片的排列效果，一行顯示四張圖片，這要通過CSS屬性對(duì)無序列表的列表項(xiàng)進(jìn)行控制，CSS代碼如下所示：#layout ul li width:72px; text-align:center; float:left; margin:20px 0px 0px 20px; display:inline; 說明： 1.樣式中使用了關(guān)聯(lián)選擇符“#layout ul li”，即由空格分

53、隔的多個(gè)選擇符，表示一種包含關(guān)系。樣式中對(duì)標(biāo)記中的中的標(biāo)記進(jìn)行也樣式設(shè)置。 2.設(shè)置的寬度為72px，上左外邊界為20px，右下邊界為0px，并設(shè)置中的文字水平居中顯示。 任務(wù)2：美化個(gè)人相冊(cè)步驟5：設(shè)置個(gè)人相冊(cè)中圖片的排列效果，一行顯示四張圖片，這要通過CSS屬性對(duì)無序列表的列表項(xiàng)進(jìn)行控制，CSS代碼如下所示：#layout ul li width:72px; text-align:center; float:left; margin:20px 0px 0px 20px; display:inline; 說明： 3“float”屬性為CSS布局屬性，見表3-4所示。屬性值為“l(fā)eft”會(huì)讓l

54、i元素向左進(jìn)行浮動(dòng)，即li元素左對(duì)齊，并且所有的li元素會(huì)水平排列，并在標(biāo)記內(nèi)自動(dòng)換行。 4樣式規(guī)則“display:inline;”是為了兼容IE6瀏覽而加的，在高版本的瀏覽器中可以不加，在IE6瀏覽器中當(dāng)浮動(dòng)元素設(shè)置外邊距時(shí)，會(huì)產(chǎn)生雙倍邊距的bug，加上此代碼即可解決。任務(wù)2：美化個(gè)人相冊(cè)步驟5：設(shè)置個(gè)人相冊(cè)中圖片的排列效果.（效果）div將不自適應(yīng)高度任務(wù)2：美化個(gè)人相冊(cè)步驟5：當(dāng)標(biāo)記（即的內(nèi)容）設(shè)置了浮動(dòng)屬性后，div元素本身將不會(huì)自適應(yīng)高度。為了解決這個(gè)問題，需要設(shè)置div元素的“overflow”屬性：“overflow:auto;”，為了兼容IE6下的顯示效果還應(yīng)加上“zoom:

55、1;”。修改后的“#layout”樣式代碼如下所示：#layoutwidth:390px; margin:0px auto;border:2px solid #ccc; padding-bottom:20px; overflow:auto; zoom:1; 任務(wù)2：美化個(gè)人相冊(cè)步驟5：設(shè)置個(gè)人相冊(cè)中圖片的排列效果.（效果）任務(wù)2：美化個(gè)人相冊(cè)步驟6：個(gè)人相冊(cè)已初具模型，最后控制相冊(cè)中的圖片的邊框樣式，以達(dá)到更好的觀賞效果，添加如下的CSS樣式，代碼如下所示：.#layout ul li a img padding:1px; border:1px solid #e1e1e1; margin-bo

56、ttom:3px;#layout ul li a:hover img padding:0px; border:2px solid #f98510;. 說明： 1樣式中為圖片添加內(nèi)邊距即設(shè)置圖片與圖片邊框四個(gè)方向的間隙為“1px”；設(shè)置圖片的下邊距，即讓圖片與文字之間產(chǎn)生“3px”的距離；在超鏈接狀態(tài)下為圖片添加外寬度為“1px”，顏色為“#e1e1e1”的實(shí)線邊框； 2當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)設(shè)置圖片內(nèi)邊距為0，同時(shí)為圖片設(shè)置了寬度為“2px”，顏色為“#f98510”的實(shí)線邊框。任務(wù)2：美化個(gè)人相冊(cè)步驟6：個(gè)人相冊(cè)已初具模型，最后控制相冊(cè)中的圖片的邊框樣式，以達(dá)到更好的觀賞效果。（效果）HTML

57、網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)教程實(shí)訓(xùn)五 制作成績登記表主要內(nèi)容制作成績登記表美化成績登記表實(shí)訓(xùn)目標(biāo)：掌握表格的各種標(biāo)記及其屬性掌握表格行標(biāo)記的屬性掌握表格單元格的屬性能靈活利用表格顯示網(wǎng)頁上的數(shù)據(jù)實(shí)訓(xùn)內(nèi)容 表格在網(wǎng)站設(shè)計(jì)中應(yīng)用非常廣泛，可以把相互關(guān)聯(lián)的信息元素集中定位，使瀏覽頁面的人一目了然。作為數(shù)據(jù)的一種組織方式，表格在網(wǎng)絡(luò)中應(yīng)用更加普遍。本實(shí)訓(xùn)要求利用表格制作成績登記表，要求成績登記表中的數(shù)據(jù)包括ID序號(hào)、學(xué)號(hào)、姓名、平時(shí)成績、期末成績及總評(píng)成績。實(shí)訓(xùn)效果任務(wù)1：制作成績登記表步驟1：打開編輯環(huán)境，創(chuàng)建HTML文檔5-1.html保存到指定位置，在文檔中輸入HTML文檔的基本結(jié)構(gòu)，代碼如下： 成績登記表

58、任務(wù)1：制作成績登記表步驟2：在標(biāo)記之間添加表格標(biāo)記。根據(jù)實(shí)訓(xùn)要求，需要制作7行6列的表格，并在單元格內(nèi)添加要求的內(nèi)容。表格代碼如下：說明： 1.在HTML文檔中，表格的建立是通過運(yùn)用、標(biāo)簽來完成的。 （1）標(biāo)記代表表格的開始，標(biāo)記代表表格的結(jié)束。 （2）標(biāo)記代表行的開始，標(biāo)記代表行的結(jié)束。 （3）標(biāo)記之間是單元格的內(nèi)容。 （4）在一個(gè)表格中的個(gè)數(shù)代表表格的行數(shù)，每對(duì).之間的個(gè)數(shù)代表該行的單元格數(shù)。 任務(wù)1：制作成績登記表步驟2：在標(biāo)記之間添加表格標(biāo)記。根據(jù)實(shí)訓(xùn)要求，需要制作7行6列的表格，并在單元格內(nèi)添加要求的內(nèi)容。表格代碼如下：說明： 2.在一個(gè)最基本的表格中，必須包含一組標(biāo)簽、一組標(biāo)簽和

59、一組標(biāo)簽。任務(wù)1：制作成績登記表步驟2：在標(biāo)記之間添加表格標(biāo)記。根據(jù)實(shí)訓(xùn)要求，需要制作7行6列的表格，并在單元格內(nèi)添加要求的內(nèi)容。（效果）任務(wù)1：制作成績登記表步驟3：添加表格標(biāo)題。表格標(biāo)題一般放在表格的外部上面，是對(duì)表格內(nèi)容的簡單說明，使用標(biāo)記實(shí)現(xiàn)。添加在標(biāo)記之后，第1行之前。 成績登記表序號(hào)學(xué)號(hào) 任務(wù)1：制作成績登記表步驟3：添加表格標(biāo)題。（效果）任務(wù)1：制作成績登記表步驟4：添加表格表頭。表頭是指表格的第一行或第一列等對(duì)表格內(nèi)容的說明，文字樣式為居中、加粗，通過使用標(biāo)記實(shí)現(xiàn)。 序號(hào)學(xué)號(hào)姓名平時(shí)成績期末成績學(xué)期總成績 任務(wù)1：制作成績登記表步驟4：添加表格表頭。表頭是指表格的第一行或第一列

60、等對(duì)表格內(nèi)容的說明，文字樣式為居中、加粗，通過使用標(biāo)記實(shí)現(xiàn)。（效果）任務(wù)2：美化成績登記表步驟1：在html文檔開頭添加文檔類型說明，代碼如下所示 ： 步驟2：設(shè)置表格中文字樣式。通過CSS樣式美化表格中的文字。在標(biāo)記之間添加CSS樣式代碼如下： 成績登記表caption font-size:28px;font-weight:bold;letter-spacing:12px;line-height:2.5;th font-size:20px;font-weight:bold;line-height:2;td font-size:18px;line-height:2; 任務(wù)2：美化成績登記表步驟