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

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

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

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

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

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

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

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

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