智慧物聯(lián)項目分析

《物聯(lián)網(wǎng)Web前端開發(fā)基礎(chǔ)》課程

智慧物聯(lián)項目分析【任務(wù)6-5】頁面建設(shè)準(zhǔn)備工作需求分析學(xué)習(xí)完上面的理論知識，小偉決定開始嘗試制作“智慧物聯(lián)”頁面了。在制作“智慧物聯(lián)”頁面之前，小偉需要做一些頁面建設(shè)的準(zhǔn)備工作，主要包括網(wǎng)站素材整理、頁面結(jié)構(gòu)分析、定義基礎(chǔ)樣式，具體介紹如下。【任務(wù)6-5】頁面建設(shè)準(zhǔn)備工作網(wǎng)站項目智慧物聯(lián)頁面制作該怎樣制作智慧物聯(lián)頁面呢？【任務(wù)6-5】頁面建設(shè)準(zhǔn)備工作網(wǎng)站素材整理首先打開網(wǎng)站根目錄“智慧物聯(lián)項目”，在根目錄下新建“images”文件夾，用于存放網(wǎng)站所需的圖像文件。然后使用AdobeFireworksCS6的“切片”工具進行切圖，最后將導(dǎo)出智慧物聯(lián)頁面中的素材圖片，存儲在站點中的“images”文件夾中。【任務(wù)6-5】頁面建設(shè)準(zhǔn)備工作頁面結(jié)構(gòu)分析—HTML結(jié)構(gòu)分析智慧物聯(lián)頁面結(jié)構(gòu)比較簡單，從上到下可以分為頭部模塊、導(dǎo)航模塊、banner模塊、場景選擇模塊、事件處理模塊和底部模塊六部分【任務(wù)6-5】頁面建設(shè)準(zhǔn)備工作頁面結(jié)構(gòu)分析—CSS樣式分析仔細觀察可以看出頭部、導(dǎo)航和底部模塊通欄顯示，需要設(shè)置寬度100%顯示。此外，主體模塊寬980px且居中顯示。此外，頁面中的文字為12px、微軟雅黑、灰色字體，可以通過CSS公共樣式進行定義。最后，需要設(shè)置鼠標(biāo)經(jīng)過、懸停時去除超鏈接文本的下畫線效果?！救蝿?wù)6-5】頁面建設(shè)準(zhǔn)備工作頁面結(jié)構(gòu)分析—JavaScript效果分析在該頁面中，當(dāng)鼠標(biāo)移動到“頭部”模塊中的“個人中心”時，將會產(chǎn)生下拉菜單效果。此外，“事件處理”模塊需要通過JavaScript控制表格中偶數(shù)行單元格的背景色。【任務(wù)6-5】頁面建設(shè)準(zhǔn)備工作定義基礎(chǔ)樣式——頁面布局【任務(wù)6-5】頁面建設(shè)準(zhǔn)備工作定義基礎(chǔ)樣式——公共樣式/*重置瀏覽器默認樣式*/body,ul,p,dl,dt,dd,h1,table,tr,td,th,h2,li{margin:0;padding:0;list-style:none;outline:none;border:0;}/*全局控制*/body{color:#6C6C6C;font-size:12px;font-family:"微軟雅黑";}/*定義公共樣式*/a:link,a:visited{text-decoration:none;color:#6C6C6C;}a:hover{text-decoration:none;}【任務(wù)6-5】頁面建設(shè)準(zhǔn)備工作定義基礎(chǔ)樣式——引入js文件<scripttype="text/javascript"src="j