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

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

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

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

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

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