你是如何設計一個網站的？

　　搭建網站的一般流程，大概是這樣的。

　　①策劃階段（確定需求）

　　②交互設計（完善功能點）

　　③視覺設計（實錘網頁最終效果）

　　④前端制作（編碼重構）

　　⑤后端制作（優化數據）

　　⑥測試上線（封裝到CMS中）

　　⑦維護運營（添加內容或推廣）

　　詳見我的這篇文章：《自學網頁設計，需要了解的網站開發流程》

　　我在準備制作這個網站時，其核心就是以“平面設計自學者的福音”為宗旨，希望解決初學者自學平面設計時需要的資源難題。所以就策劃了職業路徑、設計教程、設計書籍幾個主要欄目，這是學習平面設計補給知識最為迫切的三個需求。以及學習日記欄目，可以用來寫寫自己的學習心得，滿足自己的同時，幫助他人。

　　用A4紙記下網站的大體框架。②交互設計

　　網站的交互設計，整體結構相對簡潔明了，層級結構最多。沒有什么華麗的特效，但是唯一定要確保：鼠標滑過時一定要有明確的反饋，以告訴讀者你正在經歷什么。

　　設計書籍欄目③視覺設計階段——這是由網頁設計師為主導的環節。

　　【A色彩】

　　我在設計這個網站時，主題色選用了純度和亮度都比較高的藍色（#0f88eb），希望用藍色寓意設計知識的理性，同時藍色也是我個人比較喜歡的色彩，所以選用了它作為主色調。

　　另外，平面設計學習日記網的其他標準色，是在主題色的基礎上，通過降低明度、飽和度得到的，分別運用在hover色塊、陰影、線框色等場景。

　　【B字體】

　　全局字體選用的是最常見的微軟雅黑（備選：宋體），因為大家電腦都有，選用這兩款字體不會出太大差錯。

　　*{font：16px/

　　1.5MicrosoftYaHei，宋體;}

　　不同字號的預設，主要用以拉開頁面的層級結構。字重有Blod、normal、light三種狀態，在加上色彩的變化，就可以制作出很多種對比變化來，并足夠用來表達頁面內容的主次關系。

　　字號預設

　　【C完善設計稿】

　　在確定了色彩、字體的規范后，接下來最重要的就是，沿用這樣的規范重復執行下去。并逐步細化到字體的行間距（line-height）、字間距（letter-spacing）的調整上。期間有不妥的預設可以適當修改，但是類似的頁面之間一定要有相同的規范，確保視覺的統一。

　　完善后的設計標注稿。

　　將所有頁面設計完畢過后，按照類似上面的方式標注好，交給工程師用以前端重構制作。如果你想要工程師9

　　9.9%的還原你的設計稿，那么你標注得越細致越好。

　　【D關于動效】

　　動效這玩意，主要是用作優化頁面閱讀體驗的，適可而止、越簡單越好。一些個性化的頁面可以適當炫酷一點，但主要的內容呈現頁面還是越樸素越好。

　　關于動效

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

　　④前端制作

　　我敲起代碼來，可真是龜速那種，我用一周的時間，完成了前面的策劃設計工作，用了兩周敲完所有頁面的代碼。這個過程就是反復輸入、測試，然后IE、Google、火狐這三個主流的瀏覽器，也要測試一遍，確保沒太大差異就可放心了。

　　前端制作。⑤后端制作

　　我這個網站幾乎沒有后端制作部分，一是我對后端語言這塊完全懵逼，二是這個網站主要是用來發布內容，不會涉及到瀏覽者自定義的數據與服務器交換。

　　⑥測試上線（封裝到CMS中）

　　通過前端制作，一個個的頁面倒是能夠在瀏覽器中打開了，但是它們相對是獨立的，不便于統一管理組織。所以必須得想辦法，把它們封裝在一個建站程序里，也就是CMS（ContentManagementSystem的簡稱，譯為內容管理系統。）

　　目前開源的CMS系統有很多，主流的有WordPress、PHPCMS、以及DedeCMS等，由于我早前自學習過DedeCMS對這個系統比較熟悉，所以就選用了它。

　　DEDECMS后臺登錄界面

　　這個環節主要做的工作就是，修改DedeCMS里面的內容模板，將我們在「④前端制作」階段重構好的頁面，按照DedeCMS模板中的語法規則套用進去，然后登錄網站管理后臺，在對應的網站欄目中調用。

　　所有內容封裝完畢后，用FTP工具或遠程桌面的方式，將整個CMS程序上傳服務器，此時你需要購買一個域名，并將域名解析到你的服務器ip地址。

　　接下來你就可以在瀏覽器中輸入域名，訪問到你的網站了。

　　⑦維護運營（添加內容或推廣）

　　后續工作就是運營推廣，讓更多的人知道你的網站；做seo優化，讓你的網站對搜索引擎友好；并不斷地給網站更新添加內容，傳遞你的價值。

　　一個網站的建設，前前后后要做的工作、要學的知識還真是挺多的。不過只要你感興趣，原意去折騰，制作一個網站也不是什么難事，一點時間和耐心足矣。

　　我就這樣，從設計到代碼，陸陸續續弄了兩個月，平面設計學習日記網

　　2.0版本，終于在2023年12月25日中企動力。。。。。

　　△這是

　　1.0版本（體驗地址：http：//www.300.cn/diary

　　1.html）

　　△這是

　　2.0版本。（體驗地址：http：//www.300.cn）

　　最后

　　如果你是建站新手，歡迎給我私信咨詢，也許我也可以為你解答一些問題哦。當然你也可以去我的網站，去挑選一些適合自己提升學習的設計課程或書籍，比如：

　　網頁設計自學教程-來自BAT網頁設計師的實力巨獻！圖靈程序設計叢書：HTML5權威指南界面設計模式(第2版)