Web前端開(kāi)發(fā)（JavaScript+jQuery）課件 項(xiàng)目10 綜合信息類(lèi)網(wǎng)站首頁(yè)的實(shí)現(xiàn)

Web前端技術(shù)

綜合信息類(lèi)網(wǎng)站首頁(yè)的實(shí)現(xiàn)10.1

網(wǎng)站首頁(yè)整體布局的實(shí)現(xiàn)任務(wù)目標(biāo)：能夠畫(huà)出布局草圖實(shí)現(xiàn)頁(yè)面布局圖掌握div標(biāo)記的使用掌握CSS基本語(yǔ)法掌握J(rèn)avaScript的基本語(yǔ)法掌握jQuery基本語(yǔ)法10.1

網(wǎng)站首頁(yè)整體布局的實(shí)現(xiàn)效果圖布局圖10.1

網(wǎng)站首頁(yè)整體布局的實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)：根據(jù)布局編寫(xiě)HTML基本代碼框架；設(shè)置CSS樣式表，為整體框架添加基本修飾?；拘Ч麍D10.2頁(yè)面頭部、banner及導(dǎo)航的具體實(shí)現(xiàn)任務(wù)目標(biāo)：完成用戶(hù)登錄、注冊(cè)信息；完成網(wǎng)站banner；實(shí)現(xiàn)網(wǎng)站導(dǎo)航。10.2頁(yè)面頭部、banner及導(dǎo)航的具體實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)：添加兩個(gè)div放置Logo和表單信息；添加CSS樣式。10.3圖片輪播及最新動(dòng)態(tài)欄的實(shí)現(xiàn)任務(wù)目標(biāo)：實(shí)現(xiàn)圖片輪播效果；實(shí)現(xiàn)主題信息欄。10.3圖片輪播及最新動(dòng)態(tài)欄的實(shí)現(xiàn)構(gòu)建HTML結(jié)構(gòu)：確認(rèn)圖片瀏覽和主題列表的整體結(jié)構(gòu)；在左側(cè)和右側(cè)div中插入相應(yīng)的信息，實(shí)現(xiàn)HTML基本布局。10.3圖片輪播及最新動(dòng)態(tài)欄的實(shí)現(xiàn)添加設(shè)置CSS樣式：在style.css中定義圖片輪播的樣式在style.css中定義最新動(dòng)態(tài)列表的樣式。10.3圖片輪播及最新動(dòng)態(tài)欄的實(shí)現(xiàn)圖片輪播效果的實(shí)現(xiàn)：添加jQuery函數(shù)后，需要將style.css中#photos{visibility:hidden;}將圖片設(shè)置為不可見(jiàn)。$(document).ready(function(){ $('#photos').galleryView({ panel_width:425, panel_height:230, frame_width:50, frame_height:50 });});10.4走進(jìn)浙江、浙江歷史等信息欄的實(shí)現(xiàn)任務(wù)目標(biāo)：各類(lèi)信息欄的實(shí)現(xiàn)；圖文混排的實(shí)現(xiàn)；列表標(biāo)記的應(yīng)用。10.4走進(jìn)浙江、浙江歷史等信息欄的實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)：相同結(jié)構(gòu)與實(shí)現(xiàn)方法的模塊可使用同樣的id和class名稱(chēng)，就能之間實(shí)現(xiàn)同樣效果。10.5快速通道及頁(yè)腳信息的實(shí)現(xiàn)任務(wù)目標(biāo)：實(shí)現(xiàn)“快速通道”內(nèi)容；實(shí)現(xiàn)頁(yè)腳列表及版權(quán)信息。10.5快速通道及頁(yè)腳信息的實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)：div層與table表格一起嵌套使用；鼠標(biāo)經(jīng)過(guò)相關(guān)效果；進(jìn)行css樣式修飾，并添加超鏈接效果。代碼驗(yàn)證測(cè)試代碼驗(yàn)證測(cè)試：web標(biāo)準(zhǔn)測(cè)試主要是測(cè)試HTML結(jié)構(gòu)和CSS樣式。方法：使用瀏覽器直接驗(yàn)證，例如，火狐瀏覽器；把文件上傳到W3C提供的測(cè)試網(wǎng)址： HTML結(jié)構(gòu)驗(yàn)證網(wǎng)址：/

驗(yàn)證CSS樣式網(wǎng)址：/css-validator/本章小結(jié)本節(jié)課主要以示例的形式講解了如何實(shí)現(xiàn)一個(gè)綜合信息類(lèi)網(wǎng)站的首頁(yè)，包