網(wǎng)站建設(shè)的整體流程.ppt

1、網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作,子項(xiàng)目一 第一講 網(wǎng)站建設(shè)的整體流程,引言,要想制作一個(gè)好的網(wǎng)站一定不能隨心所欲，要有明確的設(shè)計(jì)思路。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來說，在動(dòng)手制作網(wǎng)頁(yè)之前，應(yīng)對(duì)網(wǎng)頁(yè)設(shè)計(jì)的整體工作流程有一個(gè)清晰的認(rèn)識(shí)，即站點(diǎn)主題要明確，網(wǎng)頁(yè)素材準(zhǔn)備要充分，站點(diǎn)內(nèi)容和目錄結(jié)構(gòu)要規(guī)劃好，要本著由面到點(diǎn)、由宏觀到細(xì)節(jié)的原則進(jìn)行設(shè)計(jì)。,網(wǎng)站制作流程,確定網(wǎng)站的名稱 整理客戶提交的資料 網(wǎng)站邏輯結(jié)構(gòu)圖 網(wǎng)站形象設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 在PhotoShop中裁切設(shè)計(jì)稿 站點(diǎn)規(guī)劃,創(chuàng)建站點(diǎn) 制作網(wǎng)頁(yè) 測(cè)試站點(diǎn) 申請(qǐng)域名、空間 上傳 宣傳 后期維護(hù),確定網(wǎng)站的名稱,討論主題：你能列舉出一些你所喜歡的網(wǎng)站名字并說明你喜歡它們的理由

2、嗎？ 網(wǎng)站的名稱很重要，它決定著你的網(wǎng)站是否更容易被人接受。 【舉例】：“網(wǎng)上書店”這個(gè)網(wǎng)站，名字讀起來瑯瑯上口、能反映出網(wǎng)站的題材、且易記。,網(wǎng)站的名稱應(yīng)該簡(jiǎn)短、有特色、容易記，最重要的，它應(yīng)該能夠很好地概括你的網(wǎng)站主題。,網(wǎng)站命名應(yīng)遵循的原則,（1）要有很強(qiáng)的概括性，從網(wǎng)站的名稱就能反映出網(wǎng)站的題材。 （2）要合理、合法、易記，最好讀起來瑯瑯上口。 （3）名稱不宜過長(zhǎng)，要方便其它網(wǎng)站鏈接。 （4）有個(gè)性，體現(xiàn)出一定的內(nèi)涵，能給瀏覽者以更多的想像力和沖擊力。,整理客戶提交的資料,在做網(wǎng)頁(yè)之前，我們要盡可能多地收集與網(wǎng)站主題相關(guān)的素材（文字、圖像、多媒體等素材），再去蕪存菁，取其精華為我所用。

3、 【舉例】：,網(wǎng)站邏輯結(jié)構(gòu)圖,網(wǎng)站邏輯結(jié)構(gòu)圖也就是網(wǎng)站導(dǎo)航設(shè)計(jì) 【舉例：三層】：,網(wǎng)站形象設(shè)計(jì),網(wǎng)站的標(biāo)志 網(wǎng)站的標(biāo)準(zhǔn)色彩 網(wǎng)站的標(biāo)準(zhǔn)字體 網(wǎng)站的宣傳標(biāo)語(yǔ),網(wǎng)站的標(biāo)志,【舉例】： 【賞析】：,網(wǎng)站的標(biāo)準(zhǔn)色彩,【舉例】： 主色調(diào)：藍(lán)+白+黑 輔助色：綠+橙+黃+灰 【賞析】：,一般來說，適合于網(wǎng)頁(yè)標(biāo)準(zhǔn)色的顏色主要有藍(lán)色、黃/橙色、黑/灰/白色3大系。在對(duì)網(wǎng)頁(yè)進(jìn)行色彩規(guī)劃時(shí)我們要注意以下幾點(diǎn)： 網(wǎng)站的標(biāo)準(zhǔn)色彩不宜過多，太多會(huì)讓人眼花繚亂。標(biāo)準(zhǔn)色彩應(yīng)該用于網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊，以給人整體統(tǒng)一的感覺，其他的色彩只作為點(diǎn)綴和襯托，絕不可以喧賓奪主。 不同的顏色會(huì)給瀏覽者不同的心理感受。因此，

4、在確定主頁(yè)的題材后，要了解哪些顏色適合哪些站點(diǎn)。比如影視題材的站點(diǎn)，基本上適用任何顏色，但用黑色或其他深的顏色為主可能會(huì)更好，因?yàn)槿藗兛措娨?、電影一般是在比較暗的環(huán)境下觀看，網(wǎng)頁(yè)上使用深色符合人們的習(xí)慣；反之，如果醫(yī)院的網(wǎng)站采用黑色的背景就可能會(huì)造成比較恐怖的效果，患者避之唯恐不及，哪還敢去就醫(yī)？ 在色彩的運(yùn)用中還要注意一個(gè)問題：由于國(guó)家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對(duì)色彩的喜惡程度有著很大的差異。如：兒童喜歡對(duì)比強(qiáng)烈、個(gè)性鮮明的純顏色；生活在草原上的人喜歡紅色；生活在鬧市中的人喜歡淡雅的顏色；生活在“沙漠”中的人喜歡綠色。在設(shè)計(jì)中要考慮主要讀者群的

5、背景和構(gòu)成。,特殊字體欣賞,網(wǎng)站的宣傳標(biāo)語(yǔ),討論主題：請(qǐng)大家列舉出生活中給你留下深刻印象的宣傳標(biāo)語(yǔ)，并分析標(biāo)語(yǔ)的優(yōu)劣。 【舉例】：李寧 一切皆有可能,網(wǎng)頁(yè)布局圖,網(wǎng)頁(yè)布局元素一般包括：網(wǎng)站名稱（logo）、廣告區(qū)（banner）、導(dǎo)航區(qū)（menu）、新聞（whats new）、搜索（search）、友情鏈接（links）、版權(quán)（copyright）等。 網(wǎng)頁(yè)版式：我們常見的布局結(jié)構(gòu)有“國(guó)”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、標(biāo)題文本型布局、框架型布局和變化型布局等。(書P10),網(wǎng)頁(yè)布局圖舉例,首頁(yè) 子頁(yè)新書展示,Logo 圖片 導(dǎo)航條 用戶登

6、錄 新書上架（一本） 站長(zhǎng)推薦 熱門圖書（一本） flash(banner) 網(wǎng)上調(diào)查 專業(yè)圖書（一本） 友情鏈接 天天特價(jià) （滾動(dòng)字幕） 申明 銷售排行榜 文字鏈接導(dǎo)航 版權(quán)區(qū),網(wǎng)頁(yè)設(shè)計(jì),頁(yè)面設(shè)計(jì)主要包括創(chuàng)意、色彩和版式三個(gè)方面。創(chuàng)意會(huì)使網(wǎng)頁(yè)在眾多的競(jìng)爭(zhēng)對(duì)手中脫穎而出；色彩可以使網(wǎng)頁(yè)獲得生命的力量；版式則是和用戶溝通的核心，所以這三者缺一不可。 使用Photoshop設(shè)計(jì)首頁(yè)效果圖，首頁(yè)設(shè)計(jì)完之后，其他頁(yè)面的設(shè)計(jì)就沒有主頁(yè)那么復(fù)雜了。主要是和主頁(yè)風(fēng)格保持一致，頁(yè)面設(shè)計(jì)美觀，要有返回主頁(yè)的鏈接等。,網(wǎng)頁(yè)設(shè)計(jì)舉例,首頁(yè) 子頁(yè),在PhotoShop中裁切設(shè)計(jì)稿,首頁(yè)裁切圖：,站點(diǎn)的規(guī)劃與建立,在網(wǎng)

7、頁(yè)編輯軟件中制作網(wǎng)頁(yè),用Dreamweaver來完成。 設(shè)計(jì)（重點(diǎn)、保障）制作（任務(wù)）,測(cè)試站點(diǎn),網(wǎng)站創(chuàng)建好了。在上傳到網(wǎng)上之前要測(cè)試它的兼容性和鏈接的有效性。兼容性可以使用Dreamweaver的“檢查瀏覽器”功能測(cè)試，鏈接可以使用Dreamweaver的“檢查整個(gè)站點(diǎn)的鏈接”功能進(jìn)行測(cè)試。這種方法我們將在后續(xù)項(xiàng)目中學(xué)習(xí)，在此亦不做贅述。 還有一種測(cè)試，是把網(wǎng)頁(yè)上傳到Internet服務(wù)器上去測(cè)試鏈接的有效性、網(wǎng)頁(yè)的下載速度等。這種測(cè)試，只是你將網(wǎng)頁(yè)上傳到網(wǎng)上申請(qǐng)的個(gè)人空間后，以一名普通瀏覽者瀏覽的方式去檢驗(yàn)即可。,上傳,方法一：使用Dreamweaver的FTP功能上傳。 方法二：使用一些

8、FTP工具上傳。,宣傳,像產(chǎn)品一樣，再優(yōu)秀的主頁(yè)、網(wǎng)站如果不宣傳，很難有較大訪問量。那么，如何使網(wǎng)站增大訪問量呢？ 【討論主題】 討論主題1：常見的宣傳方式有哪些？請(qǐng)大家盡可能多地列舉。 討論主題2：在各種媒體上，給你印象深刻的廣告有哪些？ 你為什么對(duì)它們印象深刻？ 討論主題3：請(qǐng)列舉一些你所熟悉或認(rèn)可的優(yōu)秀網(wǎng)絡(luò)廣告。,后期維護(hù),網(wǎng)站做好之后必須要有專人維護(hù)，網(wǎng)站才具有生命力，才會(huì)有點(diǎn)擊率。對(duì)于一個(gè)網(wǎng)站來說，它的更新與管理是極其重要的。一個(gè)再好的網(wǎng)站如果不進(jìn)行內(nèi)容更新與管理，都會(huì)出現(xiàn)許多這樣或那樣的問題。例如，網(wǎng)站內(nèi)容陳舊，超級(jí)鏈接斷開等。,* *溫馨提示* *,在實(shí)際設(shè)計(jì)中我們也不要局限于以上幾種布局格式，有時(shí)候稍作適當(dāng)?shù)淖兓瘯?huì)收到意想不到的效果。另外，平時(shí)在瀏覽網(wǎng)頁(yè)時(shí)要多留心