0301--靜態(tài)網(wǎng)頁(yè)制作(dreamweaver)-以“個(gè)人-資料下載頁(yè)
2025-04-16 08:22本頁(yè)面
【正文】 浮動(dòng)布局的應(yīng)用。 1) 以“個(gè)人首頁(yè)”為項(xiàng)目驅(qū)動(dòng)，自由發(fā)揮完成一個(gè)真實(shí)項(xiàng)目的設(shè)計(jì)和創(chuàng)建。2) 寫出規(guī)范完善的設(shè)計(jì)和制作文檔，便于對(duì)知識(shí)進(jìn)行梳理和整理。三、板書設(shè)計(jì)新課講解可擦寫區(qū)域l 設(shè)計(jì)網(wǎng)站效果圖l 劃分頁(yè)面區(qū)塊（重點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁(yè)頁(yè)眉（重點(diǎn)、難點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁(yè)導(dǎo)航條（重點(diǎn)、難點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁(yè)主題部分（重點(diǎn)、難點(diǎn)）講解細(xì)節(jié)布置任務(wù)四、課后附記課程回顧：【約10分鐘】l 通過互動(dòng)的方式回顧之前的學(xué)習(xí)內(nèi)容，為階段項(xiàng)目的制作做好準(zhǔn)備。l 學(xué)生通過互動(dòng)方式回答教師提出的問題。l 認(rèn)真聽取教師的總結(jié)，明確本項(xiàng)目單元的學(xué)習(xí)任務(wù)。l 明確本項(xiàng)目單元的總體學(xué)習(xí)目標(biāo)。帶著目標(biāo)和任務(wù)學(xué)習(xí)。l 對(duì)學(xué)習(xí)目標(biāo)形成一個(gè)初步地、大致地、總體的知識(shí)輪廓。新課講解：【約65分鐘】：教師利用“個(gè)人主頁(yè)”項(xiàng)目為驅(qū)動(dòng)，進(jìn)行階段知識(shí)回顧、復(fù)習(xí)和綜合應(yīng)用。：通過“個(gè)人主頁(yè)”項(xiàng)目制作，完成一個(gè)網(wǎng)站首頁(yè)的整個(gè)設(shè)計(jì)流程。3. 任務(wù)目標(biāo)：熟練“個(gè)人主頁(yè)”首頁(yè)的設(shè)計(jì)和創(chuàng)建。l 此部分由于在課前已作為課前任務(wù)做好了前期的準(zhǔn)備工作，因此，直接在ps中實(shí)現(xiàn)效果圖的制作。l 時(shí)刻保持與教師的互動(dòng)。l 思路跟教師保持一致，保證學(xué)習(xí)效果。提醒學(xué)生出圖的方法，注意使用切片工具對(duì)大圖進(jìn)行切割?；?dòng)提問，整個(gè)頁(yè)面區(qū)塊如何劃分？教師提醒：合理進(jìn)行區(qū)塊劃分將有利于后期區(qū)塊內(nèi)容得添及樣式的的設(shè)計(jì)和制作。網(wǎng)站結(jié)構(gòu)在設(shè)計(jì)過程中，一定要保證網(wǎng)頁(yè)結(jié)構(gòu)與表現(xiàn)進(jìn)行分離，便于后期網(wǎng)站的維護(hù)。CSS中首選的讓元素水平居中的方法將元素的marginleft和marginright屬性設(shè)置為auto即可。在實(shí)際使用中，我們可以為這些需要居中的元素創(chuàng)建一個(gè)起容器作用的div。需要特別注意的一點(diǎn)就是，必須為該容器指定寬度。此部分符合樣式是為了對(duì)代碼進(jìn)行優(yōu)化，避免累贅，提高代碼的執(zhí)行效率。此部分由于不涉及二級(jí)頁(yè)面的制作，將所有的導(dǎo)航目標(biāo)設(shè)置為空鏈接。說明：a:link是超級(jí)鏈接的初始狀態(tài)。a:hover是把鼠標(biāo)放上去時(shí)懸停的狀態(tài)。a:active是鼠標(biāo)點(diǎn)擊時(shí)，即鼠標(biāo)左鍵點(diǎn)擊鏈接對(duì)象與釋放鼠標(biāo)右鍵之間很短暫樣式效果。a:visited是訪問過后的狀態(tài)。一般網(wǎng)站需要設(shè)置的是“a:link”、“a:visited”、“a:hover”三種狀態(tài)，“a:active”狀態(tài)設(shè)置較少。顏色測(cè)試法是網(wǎng)頁(yè)布局中最常用的測(cè)試方法?；?dòng)提問原因？總結(jié)：不占尺寸，但是還可以看到區(qū)塊的范圍。在樣式設(shè)置過程中，注重代碼的效率，此部分注意提醒學(xué)生。1）兩張圖片的樣式相同2）兩個(gè)圖片的標(biāo)題相同3）兩個(gè)圖片的文字描述相同由于此部分樣式比較繁多，強(qiáng)調(diào)學(xué)生一定要邊做邊測(cè)試，以瀏覽器效果為準(zhǔn)。提醒學(xué)生：注意代碼的格式，要有層次感。Bacground屬性是一個(gè)符合屬性，可以同時(shí)設(shè)置背景的多個(gè)屬性，中間通過空格來連接不同屬性值。單元項(xiàng)目歸納和總結(jié)【約5分鐘】教師采用互動(dòng)提問的方式進(jìn)行知識(shí)的歸納和總結(jié)，并強(qiáng)調(diào)重點(diǎn)和難點(diǎn)知識(shí)。布置單元項(xiàng)目任務(wù)【約5分鐘】要求學(xué)生課下任務(wù)必須按質(zhì)按量按時(shí)完成，強(qiáng)調(diào)作業(yè)的重要性。
公司管理相關(guān)推薦
鄂ICP備17016276號(hào)-1