1、網(wǎng)頁設(shè)計與制作項目化教程,主編,凌云,魏慧,1,項目一,網(wǎng)頁設(shè)計概述,2,項目一,網(wǎng)頁設(shè)計概述,【知識目標(biāo)】,1,了解網(wǎng)站的基本概念。,2,了解網(wǎng)頁設(shè)計的基本流程。,3,了解網(wǎng)頁布局的基本知識，掌握常見的網(wǎng),頁布局類型。,3,項目一,網(wǎng)頁設(shè)計概述,【技能目標(biāo)】,1,能描述網(wǎng)頁設(shè)計的工作流程。,2,能區(qū)分不同的網(wǎng)頁布局方案。,4,1.1,網(wǎng)頁設(shè)計工作流程,1.1.1,網(wǎng)站的需求分析,1.,確定主題,（,1,）主題要小而精；,（,2,）主題不要太濫；,（,3,）對于個人網(wǎng)站來說題材最好是自己,擅長或者喜愛的內(nèi)容。,2.,確定瀏覽對象,5,1.1.2,規(guī)劃站點(diǎn)結(jié)構(gòu),1.,網(wǎng)站規(guī)劃的基本原則,（,1,

2、）明確建設(shè)網(wǎng)站的目的；,（,2,）進(jìn)行可行性分析；,（,3,）網(wǎng)站的內(nèi)容設(shè)計；,（,4,）網(wǎng)站的表現(xiàn)形式設(shè)計。,6,1.1.2,規(guī)劃站點(diǎn)結(jié)構(gòu),2.,確定網(wǎng)站的目錄結(jié)構(gòu),（,1,）不要將所有文件都存放在根目錄下,；,（,2,）按欄目內(nèi)容建立子目錄,；,（,3,）,在,每,個,主,目,錄,下,都,建,立,獨(dú),立,的,images,目錄；,（,4,）目錄的層次不要太深,。,7,1.1.3,收集素材,主要有以下,4,個途徑：,（,1,）客戶提供的資料,；,（,2,）書籍、報刊雜志等紙質(zhì)媒介,；,（,3,）網(wǎng)絡(luò),；,（,4,）自己動手設(shè)計制作,。,8,1.1.4,設(shè)計制作網(wǎng)站網(wǎng)頁,設(shè)計網(wǎng)頁就是對頁面進(jìn)行

3、布局的設(shè)計、色彩,的搭配，協(xié)調(diào)文字、圖片、音樂、動畫、視頻,等頁面內(nèi)容。,制作網(wǎng)頁比較簡單，利用,Dreamweaver,，,在網(wǎng)頁上插入文本段落、圖像、,Flash,動畫、表、,動態(tài),HTML,效果、聲音以及超級鏈接，這些都可,以在很短的時間內(nèi)完成，當(dāng)然在制作過程中需,要利用,Photoshop,等工具對一些素材進(jìn)行必要的,處理。,9,1.1.5,開發(fā)動態(tài)網(wǎng)站功能模塊,1.,搜索功能,2.,留言板,3.,新聞信息發(fā)布系統(tǒng),4.,在線購物,10,1.1.6,申請域名和服務(wù)器空間,1.,申請空間時注意的問題,（,1,）對網(wǎng)站有全面的認(rèn)識,；,（,2,）通過觀察服務(wù)商現(xiàn)有客戶的網(wǎng)站，,比較不同服務(wù)

4、商的服務(wù)質(zhì)量,；,（,3,）在簽定協(xié)議時，注意一些細(xì)節(jié)問題；,（,4,）如果企業(yè)較大，可以申請專線。,11,1.1.6,申請域名和服務(wù)器空間,2.,中小型企業(yè)的觖決之道,（,1,）虛擬主機(jī),（,2,）主機(jī)托管,12,1.1.7,設(shè)計制作網(wǎng)站網(wǎng)頁,成功申請網(wǎng)站的域名和空間后就能夠上傳,網(wǎng)站了，可以采用,Dreamweaver,自帶的站點(diǎn)管,理上傳文件，也可以采用專門的,FTP,軟件上傳。,注意在申請空間時一定要記下你所申請空間的,FTP,主機(jī)地址、你的用戶名、密碼等信息，這,些都是上傳時必須要設(shè)置的內(nèi)容。,一個好的網(wǎng)站，不是一次性制作完美就可,以了，由于周圍環(huán)境的不斷變化，網(wǎng)站的內(nèi)容,也需要隨之

5、調(diào)整，給人以常新的感覺，這就要,求我們對網(wǎng)站進(jìn)行長期的不間斷的維護(hù)和更新。,13,1.1.8,推廣網(wǎng)站,主要采用以下,4,種方法：,（,1,）在著名的搜索引擎,(,如谷歌、百度、網(wǎng)易、,新浪等,),中登記注冊自己的網(wǎng)站；,（,2,）與同類或者相關(guān)類型網(wǎng)站聯(lián)手合作，交換,網(wǎng)站的友情鏈接；,（,3,）通過其他宣傳媒體或方式推廣網(wǎng)站，如散,發(fā)廣告單，做報刊或電視廣告等,；,（,4,）通過在合作網(wǎng)站或?qū)ｉT網(wǎng)站上進(jìn)行廣告交,換的方式進(jìn)行網(wǎng)站宣傳,。,14,1.2,網(wǎng)頁的基本構(gòu)成元素,1.,頁面標(biāo)題,2.,網(wǎng)站標(biāo)志,3.,頁面尺寸,4.,導(dǎo)航欄,5.,頁眉和頁腳,15,1.3,網(wǎng)頁的布局,1.,“,國”字型布局,16,1.3,網(wǎng)頁的布局,2.,“,廠”字型布局