《Web應用開發(fā)》課件-04 房產(chǎn)網(wǎng)頁

本章簡介：房地產(chǎn)信息網(wǎng)站是房地產(chǎn)公司為了將自己的營銷活動全部或部分建立在互聯(lián)網(wǎng)之上，從而進行網(wǎng)絡營銷而創(chuàng)建的。而消費者根據(jù)自己的需要瀏覽房地產(chǎn)企業(yè)或項目的網(wǎng)頁，了解正在營銷的房地產(chǎn)項目，同時可以在線向房地產(chǎn)營銷網(wǎng)站反饋一些重要的信息。本章以多個類型的房產(chǎn)網(wǎng)頁為例，講解房地產(chǎn)網(wǎng)頁的設計方法和制作技巧。16房產(chǎn)網(wǎng)頁課堂學習目標了解房產(chǎn)網(wǎng)頁的功能和服務了解房產(chǎn)網(wǎng)頁的類別和內容掌握房產(chǎn)網(wǎng)頁的設計流程掌握房產(chǎn)網(wǎng)頁的布局構思掌握房產(chǎn)網(wǎng)頁的制作方法16.1房產(chǎn)網(wǎng)頁概述目前，高速發(fā)展的網(wǎng)絡技術有力地促進了房地產(chǎn)產(chǎn)業(yè)網(wǎng)絡化的進程，各房地產(chǎn)公司都建立了自己的網(wǎng)站，許多專業(yè)房地產(chǎn)網(wǎng)站也應運而生。好的房地產(chǎn)網(wǎng)站不僅可以為企業(yè)帶來贏利，還可以宣傳新經(jīng)濟時代房地產(chǎn)的新形象，豐富大家對房地產(chǎn)業(yè)的直觀認識。16.2購房中心網(wǎng)頁案例分析案例設計案例制作購房中心網(wǎng)頁最大的特色即在于“足不出戶，選天下房”。不需要從一地趕到另一地選房看房，僅在家里利用互聯(lián)網(wǎng)，就可了解房地產(chǎn)樓盤項目的規(guī)模和環(huán)境，進行各種房屋的查詢和觀看。因此，在網(wǎng)頁的設計上要根據(jù)功能需求，合理進行布局和制作。在網(wǎng)頁設計制作過程中，導航欄的設計簡潔清晰，方便購房者瀏覽查找需要的項目和戶型。通過對文字和圖片的精心編排和分類設計，提供出購房者最需要了解的購房資訊、樓盤動態(tài)、購房專題等重要的信息。案例分析本例將使用頁面屬性設置頁面字體、大小、顏色、頁邊距及頁面標題。使用表格按鈕布局網(wǎng)頁，使用CSS樣式設置單元格的邊框顯示、高度、寬度及單元格的背景顏色。使用表單按鈕插入表單制作搜索欄效果。屬性面板改變文字的顏色、大小和字體。使用CSS樣式設置文字的大小、顏色、文字的行距的顯示。效果圖案例設計16.3房產(chǎn)新聞網(wǎng)頁案例分析案例設計案例制作房產(chǎn)新聞網(wǎng)頁主要提供的是房地產(chǎn)新聞資訊，內容包括房產(chǎn)要聞、熱點專題、話題聚焦、問題樓盤、選房面對面等欄目。使用戶能夠第一時間了解樓市快訊，掌握房地產(chǎn)動向，縱覽最新房地產(chǎn)政策變動、剖析行業(yè)未來發(fā)展的房產(chǎn)資訊平臺，因此在網(wǎng)頁的設計上希望表現(xiàn)出地產(chǎn)項目的高端定位和文化品位。在網(wǎng)頁設計制作過程中，導航欄的設計清晰明快，方便客戶瀏覽和查找需要的房產(chǎn)咨詢。中間的廣告部分采用兩欄的排列方式，更加簡潔。并運用了房產(chǎn)照片來展示地產(chǎn)的效果圖，使項目直觀的展現(xiàn)在客戶眼前。下方的信息區(qū)通過對文字和圖片的設計和編排，提供了精品房產(chǎn)的照片信息和搜索服務。案例分析本例將使用插入圖像按鈕添加網(wǎng)頁標志和廣告圖，使用CSS樣式命令圖像與文字的對齊方式，使用屬性面板改變單元格的寬度、高度、背景顏色及文字的大小、顏色，使用CSS樣式命令設置文字的大小、顏色及行距的顯示。效果圖案例設計16.4租房網(wǎng)頁案例分析案例設計案例制作租房網(wǎng)頁主要提供各地區(qū)最新、最全、最真實的中介/個人房源出租信息，同時包含短租房、寫字樓、商鋪等求租信息。在設計上要求能簡潔直觀的展示出信息的豐富感，能體現(xiàn)出房產(chǎn)的居住環(huán)境和優(yōu)質的服務，能更快的幫助客戶進行租賃和承租服務，讓人更加信任。在網(wǎng)頁設計制作過程中，導航欄的設計清晰明快，方便客戶瀏覽和查找需要的租房信息。中間的廣告部分運用了室內照片來展示優(yōu)質的房源信息，同時體現(xiàn)出租房網(wǎng)的主要特色，讓人一目了然。下方的信息區(qū)通過對文字和圖片的設計和編排，便捷地提供了所租房屋的信息和服務。整體設計簡潔直觀、清晰明確。案例分析本例將使用頁面屬性命令設置頁面字體大小、顏色、頁面邊距及頁面標題。使用表格按鈕布局頁面，使用圖像按鈕插入圖像添加網(wǎng)頁標志和廣告條。使用CSS樣式命令制作表格邊線和單元格背景效果。使用CSS樣式命令設置文字顏色、大小及文字行距顯示。使用屬性面板設置單元格的寬度及高度。使用CSS樣式命令設置圖像與文字的對齊方式及邊距。效果圖案例設計課堂練習—房產(chǎn)信息網(wǎng)頁使用“圖像”按鈕，添加網(wǎng)頁標志和廣告圖；使用“CSS樣式”命令，改變單元格的背景圖像和文字大小、顏色及行距；使用“屬性”面板，設置單元格的大小及背景顏色。效果圖課后習題—