構(gòu)建房地產(chǎn)類網(wǎng)站設(shè)計教程

1、網(wǎng)頁設(shè)計實用教程1第 11章 構(gòu)建房地產(chǎn)類網(wǎng)站 重點提示；在Photoshop CS3中設(shè)計頁面效果在Flash CS3中編輯網(wǎng)頁動畫在Dreamweaver CS3中編輯網(wǎng)頁2 構(gòu)建房地產(chǎn)類網(wǎng)站1 實例分析主要知識點 設(shè)計流程31 實例分析興民房地產(chǎn)公司作為一家成熟的房地產(chǎn)公司，就需要一個能很好地代表公司形象的網(wǎng)站。網(wǎng)站中需要有公司介紹以及公司的最新新聞，同時該公司希望在網(wǎng)站中宣傳已經(jīng)推出與即將推出的新樓盤，還提供了一個與物業(yè)、業(yè)主共同交流的平臺，最后瀏覽者可以通過提供的聯(lián)系方式和公司進(jìn)行交流。其頁面如圖11-1所示。4主要知識點Photoshop CS3涉及到的主要知識點 Dreamwea

2、ver CS3涉及的主要知識點 5 設(shè)計流程在制作網(wǎng)站之前應(yīng)先收集要用到的文字資料、圖片資料和動畫資料等。例如要制作興民房地產(chǎn)公司的網(wǎng)站，就先要收集到該企業(yè)的介紹、新聞資訊、樓盤信息和圖片，以及其他一些相關(guān)資料等。在創(chuàng)建一個站點之前，還應(yīng)該對整個網(wǎng)站的站點結(jié)構(gòu)進(jìn)行認(rèn)真研究，以制作出一個詳細(xì)的計劃，規(guī)劃站點結(jié)構(gòu)是設(shè)計站點的必要前提，是指利用不同的文件夾將不同的網(wǎng)頁內(nèi)容分門別類地保存,在Dreamweaver CS3中規(guī)劃網(wǎng)頁結(jié)構(gòu)并完成網(wǎng)站的制作。6在Photoshop CS3中設(shè)計頁面效果1 設(shè)置背景圖片2 制作網(wǎng)站的Logo3 添加廣告語4 對圖片進(jìn)行裁剪5 制作新聞元素 7 制作網(wǎng)站的Log

3、o房地產(chǎn)公司網(wǎng)站的Logo在設(shè)計上應(yīng)該符合網(wǎng)站風(fēng)格，從而體現(xiàn)出房地產(chǎn)網(wǎng)站的宣傳性，Logo的色彩搭配和內(nèi)涵應(yīng)該能體現(xiàn)出網(wǎng)站的定位，應(yīng)具有很好的視覺觀察性。在本實例中的Logo是以一張房地產(chǎn)圖片為背景，圖中有該房地產(chǎn)公司的名字和網(wǎng)址。8 添加廣告語引人矚目的廣告語是衡量一個網(wǎng)站是否成功的重要因素，廣告語要求精煉、能夠突出網(wǎng)站主題、凸顯企業(yè)內(nèi)容，因此，本房地產(chǎn)網(wǎng)站的廣告語確定為“置業(yè)首選，信心至尊”。9 制作新聞元素 這部分是制作新聞部分的水晶圖標(biāo)和虛線等元素，由于這些元素要反復(fù)使用，所以可將其單獨(dú)作為一個文件制作并保存起來，當(dāng)在Dreamweaver CS3中編輯網(wǎng)頁時，直接插入制作好的文件即可

4、。10在Flash CS3中編輯網(wǎng)頁動畫1 制作網(wǎng)頁導(dǎo)航欄 2 設(shè)計文字滾動效果3 制作Flash動畫11導(dǎo)航欄是一組超鏈接，它是利用導(dǎo)航視圖或按鈕創(chuàng)建的，通過導(dǎo)航欄可以很快速、方便地在站點中各網(wǎng)頁之間來回跳轉(zhuǎn)。制作文字滾動效果可以使網(wǎng)站不呆板，更能吸引瀏覽者的注意力，突出公司的促銷、銷售等新聞內(nèi)容。把一組展示新樓盤的圖片做成Flash動畫不僅節(jié)約了空間，還可以給人以動態(tài)的感覺。12 在Dreamweaver CS3中編輯網(wǎng)頁 1 創(chuàng)建并設(shè)置站點2 設(shè)置頁面屬性4 添加Logo和頂部圖片3 添加Flash CS3動畫5 添加圖片和文字網(wǎng)頁底部制作創(chuàng)建超級鏈接13設(shè)置頁面屬性在制作網(wǎng)頁以前必須先

5、設(shè)置頁面屬性，主要是設(shè)置題目、作者、關(guān)鍵字等網(wǎng)頁的基本信息屬性。因此設(shè)置頁面屬性是設(shè)計網(wǎng)頁的前提條件。14 添加Flash CS3動畫Flash動畫被廣泛應(yīng)用于網(wǎng)頁頁面，無論是動畫Logo、Banner還是網(wǎng)站宣傳動畫，都需要先使用動畫制作軟件Flash完成之后，再將其插入到Dreamweaver網(wǎng)頁文檔中。15 網(wǎng)頁底部制作在網(wǎng)站設(shè)計過程中網(wǎng)頁的底部設(shè)計也是必不可少的。網(wǎng)頁的底部通常包括版權(quán)信息，聯(lián)系方式，有的頁面還有頁面導(dǎo)航功能。16創(chuàng)建超級鏈接 1為文本創(chuàng)建超鏈接 2為圖像創(chuàng)建超級鏈接 3為電子郵件創(chuàng)建超級鏈接17為圖像創(chuàng)建超級鏈接創(chuàng)建圖像超鏈接的方法與創(chuàng)建文本超鏈接的方法基本相同，只是具體圖像屬性面板上的參數(shù)設(shè)置多了一個“替換”文本框。為電子郵件創(chuàng)建超級鏈接在網(wǎng)頁上創(chuàng)建電子郵件（Email）的超級鏈接，可以方便地讓用戶反饋意見，從而實現(xiàn)商家與消費(fèi)者互動。訪問者只需單擊頁面上的電子郵件鏈接，即可啟動機(jī)器默認(rèn)的郵件發(fā)送客戶端程序。18總結(jié)與經(jīng)驗積累 本章主要通過一個典型實例來詳細(xì)介紹房地產(chǎn)類網(wǎng)站的具體制作過程，使用戶了解房地產(chǎn)類網(wǎng)