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

Web前端技術(shù)

綜合信息類網(wǎng)站首頁的實現(xiàn)10.1

網(wǎng)站首頁整體布局的實現(xiàn)任務目標：能夠畫出布局草圖實現(xiàn)頁面布局圖掌握div標記的使用掌握CSS基本語法掌握JavaScript的基本語法掌握jQuery基本語法10.1

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

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

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