0301--靜態(tài)網(wǎng)頁制作(dreamweaver)-以“個(gè)人-wenkub
2023-05-01 08:22:24 本頁面
【正文】 l 網(wǎng)站的設(shè)計(jì)流程包括需求分析、制作網(wǎng)頁效果圖、創(chuàng)建和設(shè)計(jì)網(wǎng)站、測試和發(fā)布等幾個(gè)環(huán)節(jié)；l 盒子模型的關(guān)鍵屬性包括content、border、padding和margin四個(gè)屬性。網(wǎng)站設(shè)計(jì)流程規(guī)劃網(wǎng)站目錄結(jié)構(gòu)利用HTML基本標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)利用浮動(dòng)或定位設(shè)計(jì)頁面布局（重點(diǎn)和難點(diǎn)）通過CSS樣式修飾（重點(diǎn)） 進(jìn)行網(wǎng)站測試本學(xué)習(xí)單元總體目標(biāo)（教師總結(jié)） 通過本項(xiàng)目單元的學(xué)習(xí)，學(xué)生對階段只是做一整體實(shí)踐和應(yīng)用，讓學(xué)生感受階段學(xué)習(xí)成果的喜悅，為后續(xù)知識的學(xué)習(xí)奠定基礎(chǔ)，并提升學(xué)習(xí)的興趣和動(dòng)力?！救蝿?wù)分析】采用藍(lán)色主色調(diào)，體現(xiàn)客戶簡潔實(shí)用的目標(biāo)?！救蝿?wù)實(shí)施】(1) 在具體布局之前，首先分析一下頁面的構(gòu)成，目的是明確所需要?jiǎng)?chuàng)建頁面的布局結(jié)構(gòu)，如下圖2所示。(5) 創(chuàng)建樣式表文件“”，將其保存在站點(diǎn)根目錄下的CSS文件夾中。【任務(wù)要求】通過CSS規(guī)則來精確控制網(wǎng)站首頁頁眉部分，從而實(shí)現(xiàn)頁面布局效果。 margin:0。 height:133px。核心思想是利用列表實(shí)現(xiàn)導(dǎo)航條內(nèi)容的添加，在通過css樣式實(shí)現(xiàn)布局的改變。 backgroundcolor:90bcff。 marginleft:15px。 lineheight:22px。 textdecoration:underline。}(4) 頁面效果如圖4所示：圖4 “個(gè)人主頁”導(dǎo)航條效果圖（五）工作任務(wù)五：制作“個(gè)人主頁”首頁主內(nèi)容區(qū)【任務(wù)要求】通過CSS規(guī)則來精確控制網(wǎng)站首頁主內(nèi)容區(qū)域，從而實(shí)現(xiàn)頁面布局效果。 height:800px。/p img src=images/ width=93 height=103 class=imgLeft / p class=leftTextTitle心情軌跡/p p class=leftTextContent董事長的一切都讓人既羨慕又忌妒，但更讓人受不了的是，有一天，上蒼忽然賜給他一個(gè)神奇的禮物………/p /div(4) 在“”樣式表中添在名稱為“divLeft”樣式，并對其樣式的具體設(shè)置。 float:left。 } .imgLeft{ border:1px solid 09C。 fontweight:bold。br 四歲時(shí)，我離家出走，在公車上睡著了，最后是太空超人送我回家。br 六點(diǎn)零五分，br 我走進(jìn)地下鐵。 height:580px。 }.rightTitle{ fontsize:5px。 } (8) 頁面效果如圖6所示：圖6 “個(gè)人主頁”主內(nèi)容區(qū)右區(qū)塊效果圖二、單元小結(jié)與項(xiàng)目單元任務(wù) l 通過“個(gè)人主頁”真實(shí)項(xiàng)目對階段知識點(diǎn)進(jìn)行回顧、強(qiáng)化和綜合應(yīng)用，再次強(qiáng)調(diào)重點(diǎn)和難點(diǎn)。三、板書設(shè)計(jì)新課講解可擦寫區(qū)域l 設(shè)計(jì)網(wǎng)站效果圖l 劃分頁面區(qū)塊（重點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁頁眉（重點(diǎn)、難點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁導(dǎo)航條（重點(diǎn)、難點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁主題部分（重點(diǎn)、難點(diǎn)）講解細(xì)節(jié)布置任務(wù)四、課后附記課程回顧：【約10分鐘】l 通過互動(dòng)的方式回顧之前的學(xué)習(xí)內(nèi)容，為階段項(xiàng)目的制作做好準(zhǔn)備。帶著目標(biāo)和任務(wù)學(xué)習(xí)。3. 任務(wù)目標(biāo)：熟練“個(gè)人主頁”首頁的設(shè)計(jì)和創(chuàng)建。提醒學(xué)生出圖的方法，注意使用切片工具對大圖進(jìn)行切割。在實(shí)際使用中，我們可以為這些需要居中的元素創(chuàng)建一個(gè)起容器作用的div。說明：a:link是超級鏈接的初始狀態(tài)。一般網(wǎng)站需要設(shè)置的是“a:link”、“a:visited”、“a:hover”三種狀態(tài)，“a:active”狀態(tài)設(shè)置較少。1）兩張圖片的樣式相同2）兩個(gè)圖片的標(biāo)題相同3）兩個(gè)圖片的文字描述相同由于此部分樣式比較繁多，強(qiáng)調(diào)學(xué)生一定
公司管理相關(guān)推薦
鄂ICP備17016276號-1