搭建網(wǎng)站的一般流程，大概是這樣的。

①策劃階段（確定需求）

②交互設(shè)計(jì)（完善功能點(diǎn)）

③視覺(jué)設(shè)計(jì)（實(shí)錘網(wǎng)頁(yè)最終效果）

④前端制作（編碼重構(gòu)）

⑤后端制作（優(yōu)化數(shù)據(jù)）

⑥測(cè)試上線(xiàn)（封裝到CMS中）

⑦維護(hù)運(yùn)營(yíng)（添加內(nèi)容或推廣）

詳見(jiàn)我的這篇文章：《自學(xué)網(wǎng)頁(yè)設(shè)計(jì)，需要了解的網(wǎng)站開(kāi)發(fā)流程》

以「平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)」為例①策劃階段我在準(zhǔn)備制作這個(gè)網(wǎng)站時(shí)，其核心就是以“平面設(shè)計(jì)自學(xué)者的福音”為宗旨，希望解決初學(xué)者自學(xué)平面設(shè)計(jì)時(shí)需要的資源難題。所以就策劃了職業(yè)路徑、設(shè)計(jì)教程、設(shè)計(jì)書(shū)籍幾個(gè)主要欄目，這是學(xué)習(xí)平面設(shè)計(jì)補(bǔ)給知識(shí)最為迫切的三個(gè)需求。以及學(xué)習(xí)日記

欄目，可以用來(lái)寫(xiě)寫(xiě)自己的學(xué)習(xí)心得，滿(mǎn)足自己的同時(shí)，幫助他人。

用A4紙記下網(wǎng)站的大體框架。②交互設(shè)計(jì)網(wǎng)站的交互設(shè)計(jì)，整體結(jié)構(gòu)相對(duì)簡(jiǎn)潔明了，層級(jí)結(jié)構(gòu)最多三級(jí)。沒(méi)有什么華麗的特效，但是唯一定要確保：鼠標(biāo)滑過(guò)時(shí)一定要有明確的反饋

，以告訴讀者你正在經(jīng)歷什么。設(shè)計(jì)書(shū)籍欄目③視覺(jué)設(shè)計(jì)階段

——這是由網(wǎng)頁(yè)設(shè)計(jì)師為主導(dǎo)的環(huán)節(jié)。

【A色彩】

我在設(shè)計(jì)這個(gè)網(wǎng)站時(shí)，主題色選用了純度和亮度都比較高的藍(lán)色（#0f88eb），希望用藍(lán)色寓意設(shè)計(jì)知識(shí)的理性，同時(shí)藍(lán)色也是我個(gè)人比較喜歡的色彩，所以選用了它作為主色調(diào)。

另外，平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)的其他標(biāo)準(zhǔn)色，是在主題色的基礎(chǔ)上，通過(guò)降低明度、飽和度得到的，分別運(yùn)用在hover色塊、陰影、線(xiàn)框色等場(chǎng)景。

【B字體】

*{font: 16px/1.5 Microsoft YaHei,宋體;}

不同字號(hào)的預(yù)設(shè)，主要用以拉開(kāi)頁(yè)面的層級(jí)結(jié)構(gòu)。字重有Blod、normal、light三種狀態(tài)，在加上色彩的變化，就可以制作出很多種對(duì)比變化來(lái)，并足夠用來(lái)表達(dá)頁(yè)面內(nèi)容的主次關(guān)系。

字號(hào)預(yù)設(shè)

【C完善設(shè)計(jì)稿】在確定了色彩、字體的規(guī)范后，接下來(lái)最重要的就是，沿用這樣的規(guī)范重復(fù)執(zhí)行下去

。并逐步細(xì)化到字體的行間距（line-height）、字間距（letter-spacing）的調(diào)整上。期間有不妥的預(yù)設(shè)可以適當(dāng)修改，但是類(lèi)似的頁(yè)面之間一定要有相同的規(guī)范，確保視覺(jué)的統(tǒng)一。

完善后的設(shè)計(jì)標(biāo)注稿。

將所有頁(yè)面設(shè)計(jì)完畢過(guò)后，按照類(lèi)似上面的方式標(biāo)注好，交給工程師用以前端重構(gòu)制作。如果你想要工程師99.9%的還原你的設(shè)計(jì)稿，那么你標(biāo)注得越細(xì)致越好。

【D關(guān)于動(dòng)效】

動(dòng)效這玩意，主要是用作優(yōu)化頁(yè)面閱讀體驗(yàn)的，適可而止、越簡(jiǎn)單越好。一些個(gè)性化的頁(yè)面可以適當(dāng)炫酷一點(diǎn)，但主要的內(nèi)容呈現(xiàn)頁(yè)面還是越樸素越好。

關(guān)于動(dòng)效

雖然炫酷的動(dòng)效能夠讓你眼前一亮，但刻意、反復(fù)、過(guò)多的動(dòng)效容易低閱讀效率，加重心理負(fù)擔(dān)。而且，工程師的制作成本也會(huì)更高。

④前端制作

我敲起代碼來(lái)，可真是龜速那種，我用一周的時(shí)間，完成了前面的策劃設(shè)計(jì)工作，用了兩周敲完所有頁(yè)面的代碼。這個(gè)過(guò)程就是反復(fù)輸入、測(cè)試，然后IE、Google、火狐這三個(gè)主流的瀏覽器，也要測(cè)試一遍，確保沒(méi)太大差異就可放心了。

前端制作。⑤后端制作

我這個(gè)網(wǎng)站幾乎沒(méi)有后端制作部分，一是我對(duì)后端語(yǔ)言這塊完全懵逼，二是這個(gè)網(wǎng)站主要是用來(lái)發(fā)布內(nèi)容，不會(huì)涉及到瀏覽者自定義的數(shù)據(jù)與服務(wù)器交換。

⑥測(cè)試上線(xiàn)（封裝到CMS中）

通過(guò)前端制作，一個(gè)個(gè)的頁(yè)面倒是能夠在瀏覽器中打開(kāi)了，但是它們相對(duì)是獨(dú)立的，不便于統(tǒng)一管理組織。所以必須得想辦法，把它們封裝在一個(gè)建站程序里，也就是CMS（Content Management System的簡(jiǎn)稱(chēng)，譯為內(nèi)容管理系統(tǒng)。）

目前開(kāi)源的CMS系統(tǒng)有很多，主流的有WordPress、PHPCMS、以及Dede CMS等，由于我早前自學(xué)習(xí)過(guò)Dede CMS對(duì)這個(gè)系統(tǒng)比較熟悉，所以就選用了它。

DEDE CMS后臺(tái)登錄界面這個(gè)環(huán)節(jié)主要做的工作就是，修改Dede CMS里面的內(nèi)容模板，將我們?cè)凇?/strong>④前端制作」

階段重構(gòu)好的頁(yè)面，按照Dede CMS模板中的語(yǔ)法規(guī)則套用進(jìn)去，然后登錄網(wǎng)站管理后臺(tái)，在對(duì)應(yīng)的網(wǎng)站欄目中調(diào)用。

所有內(nèi)容封裝完畢后，用FTP工具或遠(yuǎn)程桌面的方式，將整個(gè)CMS程序上傳服務(wù)器，此時(shí)你需要購(gòu)買(mǎi)一個(gè)域名，并將域名解析到你的服務(wù)器ip地址。

接下來(lái)你就可以在瀏覽器中輸入域名，訪(fǎng)問(wèn)到你的網(wǎng)站了。

⑦維護(hù)運(yùn)營(yíng)（添加內(nèi)容或推廣）

后續(xù)工作就是運(yùn)營(yíng)推廣，讓更多的人知道你的網(wǎng)站；做SEO優(yōu)化，讓你的網(wǎng)站對(duì)搜索引擎友好；并不斷地給網(wǎng)站更新添加內(nèi)容，傳遞你的價(jià)值。

一個(gè)網(wǎng)站的建設(shè)，前前后后要做的工作、要學(xué)的知識(shí)還真是挺多的。不過(guò)只要你感興趣，原意去折騰，制作一個(gè)網(wǎng)站也不是什么難事，一點(diǎn)時(shí)間和耐心足矣。我就這樣，從設(shè)計(jì)到代碼，陸陸續(xù)續(xù)弄了兩個(gè)月

，平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)2.0版本，終于在2016年12月25日上線(xiàn)了。。。。。

△這是1.0版本（體驗(yàn)地址：http://www.xxriji.cn/diary1.html）

△這是2.0版本。（體驗(yàn)地址：http://www.xxriji.cn）

最后

如果你是建站新手，歡迎給我私信咨詢(xún)，也許我也可以為你解答一些問(wèn)題哦。當(dāng)然你也可以去我的網(wǎng)站，去挑選一些適合自己提升學(xué)習(xí)的設(shè)計(jì)課程或書(shū)籍，比如：

本文標(biāo)題：你是如何設(shè)計(jì)一個(gè)網(wǎng)站的？
本文路徑：http://chinadenli.net/news32/210432.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)