PAGEPAGE0廣東省×××職業(yè)技術(shù)學(xué)校學(xué)科教案本TeachingPlan20年———20年學(xué)年度學(xué)期The(1st/2na)SemesteroftheAcademicYearfrom20to20____________________________________________網(wǎng)頁制作項目實訓(xùn)教程網(wǎng)頁制作項目實訓(xùn)教程學(xué)科（Subject）____________________________________________________________________________________________________________________________重慶大學(xué)出版社制

《網(wǎng)頁制作項目實訓(xùn)教程》目錄注意：①按住Ctrl鍵后單擊每個任務(wù)即可跳轉(zhuǎn)到對應(yīng)的教案②單擊注意：①按住Ctrl鍵后單擊每個任務(wù)即可跳轉(zhuǎn)到對應(yīng)的教案②單擊按鈕可返回目錄③頁面設(shè)置參數(shù)為：紙張：B5頁邊距左：1.5頁邊距右：1.5任務(wù)1HYPERLINK活動2使用表格制作簡單新聞網(wǎng)頁任務(wù)2HYPERLINK\l"mk03"活動1使用表格進(jìn)行整體布局HYPERLINK\l"mk04"活動2使用表格嵌套完成主頁布局

教學(xué)課題任務(wù)1活動1表格基本操作課題類型理論+實作課時安排2上課時間教學(xué)目標(biāo)1.了解表格的構(gòu)成與表格的屬性2.掌握表格的基本操作教學(xué)重點1、2教學(xué)難點2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.錨點鏈接。2.如何在網(wǎng)頁中添加錨點鏈接？教學(xué)手段教學(xué)過程師生互動活動設(shè)計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，使用表格完成比賽成績表的制作。二、師生討論學(xué)習(xí)新知識1、表格的構(gòu)成表格最基本的單位是單元格，由單元格組成行和列。單元格之間的間隔稱為單元格間距；單元格內(nèi)容與單元格邊框之間的間隔稱為單元格邊距（或填充）。表格邊框有明暗之分，可以設(shè)置粗細(xì)、顏色等屬性。單元格邊框也有明暗之分，可以設(shè)置顏色，但不可設(shè)置粗細(xì)屬性。2、表格的屬性，如下圖所示3、表格的編輯（1）選擇表格選擇整個表格，主要有以下幾種操作方法。單擊表格左上角或單擊表格中任一個單元格的邊框。將光標(biāo)移到表格內(nèi)，單擊文檔窗口左下角的標(biāo)簽“<table>”。選擇表格的行（或列）把光標(biāo)放在需要選擇的行左邊（或列上方）時，光標(biāo)變成黑色箭頭，單擊鼠標(biāo)左鍵，選中該行（或列）。（2）合并與拆分單元格合并單元格選擇要合并的幾個單元格后，可以采取以下幾種方法進(jìn)行合并單元格操作。單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“表格”欄下的“合并單元格”選項。單擊“屬性”面板左下角按鈕。拆分單元格選擇要拆分的單元格后，可以采取以下幾種方法進(jìn)行拆分操作。單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“表格”欄下的“拆分單元格”選項。單擊“屬性”面板左下角按鈕。（3）增加或刪除行（或列）增加行（或列）把光標(biāo)移到需要增加行（或列）的下面（右側(cè)）后，有以下幾種方法增加行（或列）：點擊鼠標(biāo)右鍵，在彈出的菜單中選擇“表格”欄下的“插入行（或列）”選項。選擇“修改”菜單欄下的“表格”選項，選擇“插入行（或列）”選項。刪除行（或列）把光標(biāo)移到需要刪除的行（或列）后，有以下幾種方法刪除該行（或列）：點擊鼠標(biāo)右鍵，在彈出的菜單中選擇“表格”欄下的“刪除行（或列）”選項。選擇“修改”菜單欄下的“表格”選項，選擇“刪除行（或列）”選項。三、教師演示活動實施過程并讓學(xué)生完成活動任務(wù)1、新建表格（1）打開DreamweaverCS6，在“歡迎界面”中單擊“新建”欄下的“HTML”按鈕，新建一個HTML網(wǎng)頁文件，進(jìn)入新的窗口界面。（2）選擇“插入”菜單下的“表格”選項，在打開的“表格”對話框中設(shè)置參數(shù)，然后單擊“確定”按鈕在頁面上新建一個表格。2、屬性設(shè)置及信息錄入（1）選擇該新建表格，在下方“屬性”面板中進(jìn)行修改。（2）在表中錄入比賽排名前五位選手的名字和成績。3、合并表格（1）選擇表格第一行把光標(biāo)放在第一行首左側(cè)，光標(biāo)變成黑色箭頭，單擊鼠標(biāo)左鍵，選中該行。（2）單擊“屬性”面板左下角“合并所選單元格”按鈕。4、保存文件最后將該網(wǎng)頁文件以“task3-1-1.html”為文件名保存到“項目3”站點根目錄下。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實現(xiàn)該案例效果閱讀知識窗：DW的三種編輯模式；網(wǎng)頁的基本結(jié)構(gòu)演示：教師演示活動實施過程實訓(xùn)活動：學(xué)生練習(xí)及點評作業(yè)布置填寫提交實訓(xùn)報告和實訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記

教學(xué)課題任務(wù)1活動2使用表格制作簡單新聞網(wǎng)頁課題類型理論+實作課時安排2上課時間教學(xué)目標(biāo)1.了解單元格的屬性2.掌握如何使用表格制作簡單新聞網(wǎng)頁教學(xué)重點1、2教學(xué)難點2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.表格的屬性。2.表格的基本操作。教學(xué)手段教學(xué)過程師生互動活動設(shè)計課件討論實作課件舉例討論課件實作一、教師布置活動要求1、新建一個網(wǎng)頁文件，按要求插入表格。2、把素材中的文字、圖片合理布局到網(wǎng)頁中，并將網(wǎng)頁文件以“task3-1-2.html”為文件名保存到“項目3”站點根目錄下，最終效果如下圖所示。二、師生討論學(xué)習(xí)新知識單元格的屬性，如下圖所示，下面對單元格“屬性”面板中相關(guān)參數(shù)進(jìn)行說明：水平：設(shè)置單元格內(nèi)容在水平方向上的對齊方式。垂直：設(shè)置單元格內(nèi)容在垂直方向上的對齊方式。寬和高：設(shè)置被選擇單元格的寬和高。不換行：防止換行，從而使給定單元格中的所有文本都在一行上。標(biāo)題：將所選單元格格式設(shè)置為表格標(biāo)題單元格。背景顏色：設(shè)置單元格的背景顏色。合并（拆分）按鈕：將所選單元格、行或列合并（拆分）為一個（兩個或多個）單元格。三、教師演示活動實施過程并讓學(xué)生完成活動任務(wù)1、新建頁眉表格（1）插入一個表格，將其命名為“T1”，其他參數(shù)按要求設(shè)置。（2）將光標(biāo)置于表“T1”中，設(shè)置單元格的屬性。（3）切換到“屬性”面板中的“CSS”，選擇目標(biāo)規(guī)則“<新CSS規(guī)則>”，點擊“編輯規(guī)則”，新建一個選擇器類型為“類”，名稱為“S1”的為CSS規(guī)則。（4）設(shè)置“S1”的類型規(guī)則。（5）在表“T1”中輸入文字“電子商務(wù)系新聞”，并在屬性中應(yīng)用類“S1”。2、新建正文表格（1）在表“T1”后插入一個新表格，將其命名為“T2”，按要求設(shè)置參數(shù)。（2）將光標(biāo)置于表“T2”中，設(shè)置單元格的屬性。（3）將素材文件夾中“task3-1-2text.txt”的文本復(fù)制粘貼到表“T2”中。（4）新建“S2”、“S3”兩種CSS規(guī)則。（5）將“S2”、“S3”分別應(yīng)用到表“T2”中的標(biāo)題行和正文文字上。（6）插入素材文件夾中“3-1-2pic.jpg”的圖片文件，設(shè)置圖片屬性為“右對齊”，并調(diào)整為合適大小放入圖中位置。3、將該網(wǎng)頁文件以“task3-1-2.html”為文件名保存到“項目3”站點根目錄下。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實現(xiàn)該案例效果閱讀知識窗：單元格的屬性演示：教師演示活動實施過程實訓(xùn)活動：學(xué)生練習(xí)及點評作業(yè)布置填寫提交實訓(xùn)報告和實訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記

教學(xué)課題任務(wù)2活動1使用表格進(jìn)行整體布局課題類型理論+實作課時安排2上課時間教學(xué)目標(biāo)1.了解表格標(biāo)簽2.掌握使用表格布局網(wǎng)頁教學(xué)重點1、2教學(xué)難點2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.單元格的屬性。2.使用表格制作簡單新聞網(wǎng)頁。教學(xué)手段教學(xué)過程師生互動活動設(shè)計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，完成基本主頁布局的制作，完成后以“task3-2-1.html”為文件名保存。二、師生討論學(xué)習(xí)新知識1、網(wǎng)頁布局制作網(wǎng)頁首先要進(jìn)行基本的網(wǎng)頁布局，以下是最為常用的頁面布局類型：上下型布局：上下排列網(wǎng)頁標(biāo)題和內(nèi)容。左右型布局：左右排列網(wǎng)頁的導(dǎo)航欄和內(nèi)容。“同”字型結(jié)構(gòu)布局：布局結(jié)構(gòu)與漢字“同”相似。“國”字型布局：布局結(jié)構(gòu)與漢字“國”相似，是一些大型網(wǎng)站喜歡的布局類型。T型布局：布局結(jié)構(gòu)與英文大寫字母“T”相似，初學(xué)者容易上手。POP布局：頁面布局像一張宣傳海報，以一張精美圖片作為頁面設(shè)計中心。Flash布局：整個或大部分幅面的網(wǎng)頁是一個Flash動畫。2、表格標(biāo)簽表格和單元格分別都有很多屬性，有相同相似的，也有不同的。表格中的基本標(biāo)簽有<table>、<tr>、<td>。一般描述整個表格屬性的標(biāo)簽放在<table>中，描述單元格屬性的標(biāo)簽放在<tr>（行）、<td>中。標(biāo)簽從屬關(guān)系由左向右依次遞減。三、教師演示活動實施過程并讓學(xué)生完成活動任務(wù)1、制作頁眉（1）新建一個HTML文檔，插入表“T1”并居中對齊，按要求設(shè)置參數(shù)。（2）將光標(biāo)置于表“T1”中，設(shè)置單元格的屬性。（3）在單元格中輸入“頁眉區(qū)”。2、制作導(dǎo)航欄（1）在表“T1”后插入表“T2”并居中對齊，按要求設(shè)置參數(shù)。（2）選擇表“T2”的第一行，設(shè)置單元格的屬性。（3）分別在單元格中輸入每個欄目的名稱，并以“|”間隔。3、制作正文部分（1）在表“T2”后插入表“T3”并居中對齊，按要求設(shè)置參數(shù)。（2）選擇表“T3”第二列的兩個單元格進(jìn)行合并，設(shè)置所有單元格的水平和垂直對齊都為“居中”，并在單元格內(nèi)輸入文字。4、制作版權(quán)欄（1）在表“T3”后插入表“T4”并居中對齊，按要求設(shè)置參數(shù)。（2）將光標(biāo)置于表“T4”內(nèi)，設(shè)置單元格的屬性。（3）在表“T4”內(nèi)輸入“版權(quán)區(qū)”。5、將該網(wǎng)頁文件以“task3-2-1.html”為文件名保存到“項目3”站點根目錄下。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實現(xiàn)該案例效果閱讀知識窗：網(wǎng)頁布局；表格標(biāo)簽演示：教師演示活動實施過程實訓(xùn)活動：學(xué)生練習(xí)及點評作業(yè)布置填寫提交實訓(xùn)報告和實訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記

教學(xué)課題任務(wù)2活動2使用表格嵌套完成主頁布局課題類型理論+實作課時安排2上課時間教學(xué)目標(biāo)1.了解表格嵌套2.掌握使用表格嵌套布局網(wǎng)頁教學(xué)重點1、2教學(xué)難點2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.表格標(biāo)簽。2.使用表格布局網(wǎng)頁。教學(xué)手段教學(xué)過程師生互動活動設(shè)計課件討論實作課件舉例討論課件實作一、教師布置活動要求在已完成的“活動一”基礎(chǔ)上增加圖片、文字等對象，細(xì)化板塊結(jié)構(gòu)，最終完成整個主頁的制作，如下圖所示，并以文件名“task3-2-2.html”另存到“項目3”站點根目錄下。二、師生討論學(xué)習(xí)新知識表格的嵌套在復(fù)雜表格的布局中，一般不建議使用單元格的拆分和合并來實現(xiàn)，這樣對后期布局的修改往往會造成不利的影響。建議通過表格的嵌套或更好的Div布局來進(jìn)行。嵌套表格是指在表格的單元格中再插入表格，其寬度受所在單元格的寬度限制，可以很好地控制表格內(nèi)各個對象的位置。但嵌套層次不建議太多，否則有可能讓布局頁面過于復(fù)雜，可讀性差，還可能影響網(wǎng)頁的瀏覽速度。如下圖所示就是兩個表格的嵌套，從標(biāo)簽上很容易看出，表格2是嵌套在表格1內(nèi)的。三、教師演示活動實施過程并讓學(xué)生完成活動任務(wù)打開“活動一”已完成的“task3-2-1.html”文件。1、美化頁眉區(qū)（1）將表“T1”的邊框改為“0”。（2）新建CSS規(guī)則：類“bg”，將素材文件中名為“task3-2-1pic.jpg”的圖片設(shè)置為單元格背景（4）新建CSS規(guī)則：類“S1”，按要求設(shè)置參數(shù)。（5）將“T1”單元格水平對齊改為“左對齊”，并輸入“電子商務(wù)系新聞中心”，并應(yīng)用類“S1”。2、修改導(dǎo)航欄（1）將表“T2”的邊框改為“0”。（2）選擇“T2”的第一行，設(shè)置單元格的背景顏色為“#98B2CD”。（3）分別把單元格中的內(nèi)容改為每個欄目的具體名稱。3、細(xì)劃正文部分布局（1）修改表“T3”右新聞區(qū)（第二列）的屬性，按要求設(shè)置參數(shù)。（2）將光標(biāo)置于右新聞區(qū)（第二列）內(nèi)，插入新表格“T3-1”，按要求設(shè)置參數(shù)。（3）修改表“T3-1”單元格屬性，按要求設(shè)置參數(shù)。（4）復(fù)制3-4個表“T3-1”到左新聞區(qū)，在第一行分別輸入各欄目名稱（5）將表“T3”左上新聞區(qū)（第一列第一行）進(jìn)行拆分。（6）將單元格“1”的寬和高都設(shè)置為“400”。選擇“插入”菜單下“圖像對象”，插入圖片占位符，按要求設(shè)置參數(shù)。（7）在單元格“2”中插入新表格“T3-5”，按要求設(shè)置參數(shù)。（8）將“