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

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