網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程 教案 項(xiàng)目6 使用CSS美化網(wǎng)頁效果

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

《網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程》目錄注意：①按住Ctrl鍵后單擊每個(gè)任務(wù)即可跳轉(zhuǎn)到對(duì)應(yīng)的教案②單擊注意：①按住Ctrl鍵后單擊每個(gè)任務(wù)即可跳轉(zhuǎn)到對(duì)應(yīng)的教案②單擊按鈕可返回目錄③頁面設(shè)置參數(shù)為：紙張：B5頁邊距左：1.5頁邊距右：1.5任務(wù)1HYPERLINK活動(dòng)2使用內(nèi)嵌樣式表美化網(wǎng)頁任務(wù)2HYPERLINK的內(nèi)容”文字刪除，插入“top.jpg”圖片，完成頂部導(dǎo)航欄的布局制作。6、依次單擊“插入”->“布局對(duì)象”->“Div標(biāo)簽”菜單命令，打開“插入Div標(biāo)簽”對(duì)話框，在“插入”項(xiàng)第1個(gè)下拉列表框中選擇“在標(biāo)簽之后”，在第2個(gè)下拉列表框中選擇“<divid=”nav”>”，在“ID”名框中輸入“banner”，然后單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中單擊“確定”按鈕，打開“#banner的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式，然后單擊“確定”按鈕，并將“此處顯示id"banner"的內(nèi)容”文字刪除，插入“banner.jpg”圖片，完成banner部分的布局制作。7、參照第6步，完成“#main”與“#bottom”兩個(gè)區(qū)域的布局操作，按要求完成相應(yīng)CSS樣式設(shè)置，并在“#bottom”中插入“bottom.jpg”圖片。8、依次單擊“插入”->“布局對(duì)象”->“Div標(biāo)簽”菜單命令，打開的“插入Div標(biāo)簽”對(duì)話框，在“插入”項(xiàng)第1個(gè)下拉列表框中選擇“在開始標(biāo)簽之后”，在第2個(gè)下拉列表框中選擇“<divid=”main”>”，在“ID”名框中輸入“l(fā)eft”，然后單擊“確定”按鈕。9、選擇“此處顯示id"left"的內(nèi)容”文字，在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中單擊“確定”按鈕，打開“#main#left的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式，將“此處顯示id"left"的內(nèi)容”文字刪除，并在其中插入圖片“con-left.jpg”。10、依次單擊“插入”->“布局對(duì)象”->“Div標(biāo)簽”菜單命令，打開的“插入Div標(biāo)簽”對(duì)話框，在“插入”項(xiàng)第1個(gè)下拉列表框中選擇“在結(jié)束標(biāo)簽之前”，在第2個(gè)下拉列表框中選擇“<divid=”main”>”，在“ID”名框中輸入“right”，然后單擊“確定”按鈕。11、選擇“此處顯示id"right"的內(nèi)容”文字，在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中單擊“確定”按鈕，打開“#main#right的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式，將“此處顯示id"right"的內(nèi)容”文字刪除，并在其中插入圖片“con-right.jpg”。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實(shí)現(xiàn)該案例效果閱讀知識(shí)窗：盒子模型的屬性；外邊距；內(nèi)邊距演示：教師演示活動(dòng)實(shí)施過程實(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ù)3活動(dòng)2使用Div+CSS制作圖片展示頁課題類型理論+實(shí)作課時(shí)安排2上課時(shí)間教學(xué)目標(biāo)1.了解什么是塊級(jí)元素，什么是行內(nèi)元素2.掌握與Div+CSS布局網(wǎng)頁相關(guān)CSS屬性：display、float、clear、overflow。教學(xué)重點(diǎn)1、2教學(xué)難點(diǎn)2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.盒子模型的相關(guān)屬性。2.外邊距（margin）與內(nèi)邊距（padding）。教學(xué)手段教學(xué)過程師生互動(dòng)活動(dòng)設(shè)計(jì)課件討論實(shí)作課件舉例討論課件實(shí)作一、教師布置活動(dòng)要求使用Div+CSS完成圖片展示頁的制作，如下圖所示，完成后以“task6-3-2.html”為文件名保存到“task6-3”文件夾。二、師生討論學(xué)習(xí)新知識(shí)1、標(biāo)準(zhǔn)文檔流標(biāo)準(zhǔn)文檔流指的是元素排版布局過程中，元素會(huì)默認(rèn)自動(dòng)從左往右，從上往下的流式排列方式。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。標(biāo)準(zhǔn)文檔流分兩類：塊級(jí)元素（blocklevel）：以一個(gè)塊的形式表現(xiàn)出來，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿，占有獨(dú)立空間，如div標(biāo)簽就是一個(gè)通用的塊級(jí)元素。行內(nèi)元素（inline）：各個(gè)元素之間橫向排列，到最右端自動(dòng)折行，標(biāo)簽本身不占有獨(dú)立的區(qū)域，僅僅在其他元素的基礎(chǔ)上指定了一定的范圍，如span標(biāo)簽就是一個(gè)通用的行內(nèi)元素。2、display屬性用于指定HTML標(biāo)簽的顯示方式，常用的屬性值有3個(gè)：block、inline、none。3、float屬性用于定義元素的浮動(dòng)方向，其屬性值有3個(gè)：left 、right、none。4、clear屬性用于規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素，常用于清除浮動(dòng)帶來的影響和擴(kuò)展盒子高度，其屬性值有4個(gè)：left、right、both 、none。5、overflow屬性用于處理盒子中的內(nèi)容溢出，overflow需要必須配合width屬性使用，其屬性值有4個(gè)：visible、hidden、scroll、auto。三、教師演示活動(dòng)實(shí)施過程并讓學(xué)生完成活動(dòng)任務(wù)1、打開DreamweaverCS6并新建一個(gè)HTML文檔，切換至“設(shè)計(jì)”視圖，更改文檔標(biāo)題為“2019最新主題樣片”，以“task6-3-2.html”為文件名保存到“task6-3”文件夾。2、依次單擊“插入”->“布局對(duì)象”->“Div標(biāo)簽”菜單命令，打開的“插入Div標(biāo)簽”對(duì)話框，在“插入”下拉列表框中選擇“在插入點(diǎn)”，在“ID”框中輸入“content”，然后單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框“規(guī)則定義”下拉列表框中選擇“僅限該文檔”，然后單擊“確定”按鈕，打開“#content的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。3、刪除“此處顯示id"content"的內(nèi)容”文字，輸入“最新主題樣片”，并將其設(shè)置為“標(biāo)題3”格式。4、將光標(biāo)定位到“最新主題樣片”文字中，然后單擊“CSS樣式”面板中的“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中單擊“確定”按鈕，打開“#contenth3的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。5、切換到“代碼”視圖，在“最新主題樣片”文字兩端添加<span>標(biāo)簽。再切換到“設(shè)計(jì)”視圖，將光標(biāo)定位到“最新主題樣片”文字中，單擊“CSS樣式”面板中的“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中單擊“確定”按鈕，打開“#contenth3span的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。6、在“最新主題樣片”文字后面單擊，然后按回車鍵另起一行，插入“pic-1.jpg”圖片，并為圖片添加空鏈接，按回車鍵另起一行，插入“pic-2.jpg”圖片，并為圖片添加空鏈接，重復(fù)上述操作，將其余10張圖片插入到頁面中。選擇剛剛插入的所有圖片，在“屬性”面板單擊“項(xiàng)目列表”按鈕將其轉(zhuǎn)換為項(xiàng)目列表。7、選擇任意一張圖片，在“標(biāo)簽選擇器”中單擊“<ul>”按鈕，在“CSS樣式面板”中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中單擊“確定”按鈕，打開“#contentul的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。8、選擇任意一張圖片，在“標(biāo)簽選擇器”中單擊“<li>”按鈕，在“CSS樣式面板”中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中單擊“確定”按鈕，打開“#contentulli的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。9、選擇任意一張圖片，在“標(biāo)簽選擇器”中單擊“<li>”按鈕，在“CSS樣式面板”中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框的“選擇器名稱”框中輸入“#contentulli.first”，然后單擊“確定”按鈕，打開“#contentulli.first的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。10、選擇第1張圖，在“標(biāo)簽選擇器”中單擊“<li>”按鈕，在“屬性”面板中“類”下拉列表框中選擇“first”。參照同樣的方法設(shè)置第5張圖與第9張圖。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實(shí)現(xiàn)該案例效果閱讀知識(shí)窗：標(biāo)準(zhǔn)文檔流；display屬性；float屬性；clear屬性；overflow屬性演示：教師演示活動(dòng)實(shí)施過程實(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ù)4活動(dòng)1使用CSS設(shè)置背景課題類型理論+實(shí)作課時(shí)安排2上課時(shí)間教學(xué)目標(biāo)1.掌握與背景與關(guān)的CSS樣式2.靈活運(yùn)用背景重復(fù)CSS屬性控制網(wǎng)頁效果教學(xué)重點(diǎn)1、2教學(xué)難點(diǎn)2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.標(biāo)準(zhǔn)文檔流：塊級(jí)元素、行內(nèi)元素。2.與Div+CSS布局網(wǎng)頁相關(guān)的CSS屬性：display、float、clear、overflow。教學(xué)手段教學(xué)過程師生互動(dòng)活動(dòng)設(shè)計(jì)課件討論實(shí)作課件舉例討論課件實(shí)作一、教師布置活動(dòng)要求結(jié)合背景相關(guān)CSS樣式，完成“支付寶-我的應(yīng)用”的制作，如下圖所示，完成后以“task6-4-1.html”為文件名保存到“task6-4”文件夾。二、師生討論學(xué)習(xí)新知識(shí)1、CSS背景CSS背景屬性用于定義HTML元素的背景，可在DreamweaverCS6的“CSS規(guī)則定義”對(duì)話框的“背景”選項(xiàng)卡中進(jìn)行CSS背景設(shè)置。CSS背景包含以下幾個(gè)常用屬性：背景顏色（background-color）：用于設(shè)置網(wǎng)頁元素的背景顏色。背景圖像（background-image）：用于設(shè)置網(wǎng)頁元素的背景圖像。背景重復(fù)（background-repeat）：用于控制圖像平鋪的方式和方向。背景定位（background-position）：用于控制圖像在背景中的位置。2、背景重復(fù)（background-repeat）用于控制圖像平鋪的方式和方向，屬性值有4個(gè)：repeat、no-repeat 、repeat-x、repeat-y 。三、教師演示活動(dòng)實(shí)施過程并讓學(xué)生完成活動(dòng)任務(wù)1、打開DreamweaverCS6并新建一個(gè)HTML文檔，切換至“設(shè)計(jì)”視圖，更改文檔標(biāo)題為“支付寶-我的應(yīng)用”，以“task6-4-1.html”為文件名保存到“task6-4”文件夾。2、依次單擊“插入”->“布局對(duì)象”->“Div標(biāo)簽”菜單命令，打開的“插入Div標(biāo)簽”對(duì)話框，在“插入”下拉列表框中選擇“在插入點(diǎn)”，在“ID”框中輸入“content”，然后單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框“規(guī)則定義”下拉列表框中選擇“僅限該文檔”，然后單擊“確定”按鈕，打開“#content的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。3、刪除“此處顯示id"content"的內(nèi)容”文字，輸入“我的應(yīng)用（8）”與“占位”文字，選擇輸入的文字并將其設(shè)置為“標(biāo)題3”格式，選擇“占位”文字并為其添加空鏈接。4、將光標(biāo)定位到“我的應(yīng)用（8）”文字中，在“標(biāo)簽選擇器”中單擊“<h3>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中單擊“確定”按鈕，打開“#contenth3的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。5、將光標(biāo)定位到“占位”文字中，在“標(biāo)簽選擇器”中單擊“<a>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中單擊“確定”按鈕，打開“#contenth3a的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。6、將光標(biāo)定位到“占位”文字中，在“標(biāo)簽選擇器”中單擊“<a>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中的“選擇器名稱”框中輸入“#contenth3a:hover”，然后單擊“確定”按鈕，打開“#contenth3a:hover的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。7、刪除“占位”兩個(gè)字。在“我的應(yīng)用（8）”文字后面單擊鼠標(biāo)，然后按回車鍵另起一行，輸入“轉(zhuǎn)賬到支付寶”并添加空鏈接。參照同樣的方法輸入其他文字并添加空鏈接。8、選擇“轉(zhuǎn)賬到支付寶”~“醫(yī)院掛號(hào)”這8行文字，在“屬性”面板中單擊“項(xiàng)目列表”將其轉(zhuǎn)換為項(xiàng)目列表。9、在“轉(zhuǎn)賬到支付寶”文字中單擊鼠標(biāo)，在“標(biāo)簽選擇器”中單擊“<ul>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中單擊“確定”按鈕，打開“#contentul的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。10、在“轉(zhuǎn)賬到支付寶”文字中單擊鼠標(biāo)，在“標(biāo)簽選擇器”中單擊“<a>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中單擊“確定”按鈕，打開“#contentullia的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。11、在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中的“選擇器名稱”框中輸入“#contentullia.list-1”，然后單擊“確定”按鈕，打開“#contentullia.list-1的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。12、在“轉(zhuǎn)賬到支付寶”文字中單擊鼠標(biāo)，在“標(biāo)簽選擇器”中單擊“<a>”按鈕，在“屬性”面板中“類”下拉列表框中選擇“l(fā)ist-1”。參照同樣的方法設(shè)置其他7個(gè)應(yīng)用列表的樣式13、在“轉(zhuǎn)賬到支付寶”文字中單擊鼠標(biāo)，在“標(biāo)簽選擇器”中單擊“<a>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對(duì)話框中的“選擇器名稱”框中輸入“#contentullia:hover”，然后單擊“確定”按鈕，打開“#contentullia:hover的CSS規(guī)則定義”對(duì)話框，按要求設(shè)置CSS樣式。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實(shí)現(xiàn)該案例效果閱讀知識(shí)窗：CSS背景；背景重復(fù)演示：教師演示活動(dòng)實(shí)施過程實(shí)訓(xùn)活動(dòng)：學(xué)生練習(xí)及點(diǎn)評(píng)作業(yè)布置填寫提交實(shí)訓(xùn)報(bào)告和實(shí)訓(xùn)表格預(yù)習(xí)作業(yè)：