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

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

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

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

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

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