2013-06-29 分類: 網站制作
網站制作的一般流程,大概是這樣的。
①策劃階段(確定需求)
②交互設計(完善功能點)
③視覺設計(實錘網頁最終效果)
④前端制作(編碼重構)
⑤后端制作(優(yōu)化數(shù)據(jù))
⑥測試上線(封裝到CMS中)
⑦維護運營(添加內容或推廣)
詳見我的這篇文章:《自學網頁設計,需要了解的網站開發(fā)流程》
以「平面設計學習日記網」為例
①策劃階段
我在準備制作這個網站時,其核心就是以“平面設計自學者的福音”為宗旨,希望解決初學者自學平面設計時需要的資源難題。所以就策劃了職業(yè)路徑、設計教程、設計書籍幾個主要欄目,這是學習平面設計補給知識最為迫切的三個需求。以及學習日記欄目,可以用來寫寫自己的學習心得,滿足自己的同時,幫助他人。
用A4紙記下網站的大體框架。
②交互設計
網站的交互設計,整體結構相對簡潔明了,層級結構最多三級。沒有什么華麗的特效,但是唯一定要確保:鼠標滑過時一定要有明確的反饋,以告訴讀者你正在經歷什么。
設計書籍欄目
③視覺設計階段——這是由網頁設計師為主導的環(huán)節(jié)。
【A色彩】
我在設計這個網站時,主題色選用了純度和亮度都比較高的藍色(#0f88eb),希望用藍色寓意設計知識的理性,同時藍色也是我個人比較喜歡的色彩,所以選用了它作為主色調。
另外,平面設計學習日記網的其他標準色,是在主題色的基礎上,通過降低明度、飽和度得到的,分別運用在hover色塊、陰影、線框色等場景。
【B字體】
全局字體選用的是最常見的微軟雅黑(備選:宋體),因為大家電腦都有,選用這兩款字體不會出太大差錯。
*{font: 16px/1.5 Microsoft YaHei,宋體;}
不同字號的預設,主要用以拉開頁面的層級結構。字重有Blod、normal、light三種狀態(tài),在加上色彩的變化,就可以制作出很多種對比變化來,并足夠用來表達頁面內容的主次關系。
字號預設
【C完善設計稿】
在確定了色彩、字體的規(guī)范后,接下來最重要的就是,沿用這樣的規(guī)范重復執(zhí)行下去。并逐步細化到字體的行間距(line-height)、字間距(letter-spacing)的調整上。期間有不妥的預設可以適當修改,但是類似的頁面之間一定要有相同的規(guī)范,確保視覺的統(tǒng)一。
完善后的設計標注稿。
將所有頁面設計完畢過后,按照類似上面的方式標注好,交給工程師用以前端重構制作。如果你想要工程師99.9%的還原你的設計稿,那么你標注得越細致越好。
【D關于動效】
動效這玩意,主要是用作優(yōu)化頁面閱讀體驗的,適可而止、越簡單越好。一些個性化的頁面可以適當炫酷一點,但主要的內容呈現(xiàn)頁面還是越樸素越好。
關于動效
雖然炫酷的動效能夠讓你眼前一亮,但刻意、反復、過多的動效容易低閱讀效率,加重心理負擔。而且,工程師的制作成本也會更高。
④前端制作
我敲起代碼來,可真是龜速那種,我用一周的時間,完成了前面的策劃設計工作,用了兩周敲完所有頁面的代碼。這個過程就是反復輸入、測試,然后IE、Google、火狐這三個主流的瀏覽器,也要測試一遍,確保沒太大差異就可放心了。
前端制作。
⑤后端制作
我這個網站幾乎沒有后端制作部分,一是我對后端語言這塊完全懵逼,二是這個網站主要是用來發(fā)布內容,不會涉及到瀏覽者自定義的數(shù)據(jù)與服務器交換。
⑥測試上線(封裝到CMS中)
通過前端制作,一個個的頁面倒是能夠在瀏覽器中打開了,但是它們相對是獨立的,不便于統(tǒng)一管理組織。所以必須得想辦法,把它們封裝在一個建站程序里,也就是CMS(Content Management System的簡稱,譯為內容管理系統(tǒng)。)
目前開源的CMS系統(tǒng)有很多,主流的有WordPress、PHPCMS、以及Dede CMS等,由于我早前自學習過Dede CMS對這個系統(tǒng)比較熟悉,所以就選用了它。
DEDE CMS后臺登錄界面
這個環(huán)節(jié)主要做的工作就是,修改Dede CMS里面的內容模板,將我們在「④前端制作」階段重構好的頁面,按照Dede CMS模板中的語法規(guī)則套用進去,然后登錄網站管理后臺,在對應的網站欄目中調用。
所有內容封裝完畢后,用FTP工具或遠程桌面的方式,將整個CMS程序上傳服務器,此時你需要購買一個域名,并將域名解析到你的服務器ip地址。
接下來你就可以在瀏覽器中輸入域名,訪問到你的網站了。
⑦維護運營(添加內容或推廣)
后續(xù)工作就是運營推廣,讓更多的人知道你的網站;做SEO優(yōu)化,讓你的網站對搜索引擎友好;并不斷地給網站更新添加內容,傳遞你的價值。
一個網站的建設,前前后后要做的工作、要學的知識還真是挺多的。不過只要你感興趣,原意去折騰,制作一個網站也不是什么難事,一點時間和耐心足矣。
新聞名稱:成都網站制作是如何制作一個網站的?
文章來源:http://m.newbst.com/news49/15899.html
網站建設、網絡推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有網站制作等
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容