網(wǎng)頁怎么開發(fā)？
時(shí)間：2022-09-04 01:45:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2022-09-04 01:45:01 來源：網(wǎng)站運(yùn)營
網(wǎng)頁開發(fā)具體要學(xué)些什么，做個(gè)網(wǎng)站有這么難嗎關(guān)注者
36被瀏覽
86,2447 個(gè)回答
酷coo豆?平面設(shè)計(jì)師/平面設(shè)計(jì)基礎(chǔ)教育，及自學(xué)方法傳播者。
一、你必需了解的網(wǎng)頁開發(fā)流程。
在學(xué)習(xí)網(wǎng)頁開發(fā)前，你首先得了解網(wǎng)站的制作流程。有了全局的概覽后，才能有計(jì)劃地合理安排時(shí)間，來學(xué)習(xí)網(wǎng)頁開發(fā)的相關(guān)知識。
1.1、網(wǎng)站的制作流程
△引用于：《自學(xué)網(wǎng)頁設(shè)計(jì)，需要了解的網(wǎng)站開發(fā)流程》@酷coo豆
通常情況下，任何一網(wǎng)站的建立，都會經(jīng)過“分析策劃—交互設(shè)計(jì)—視覺設(shè)計(jì)—前端制作—后端制作—測試上線”6個(gè)環(huán)節(jié)。
整個(gè)流程下來，也就是網(wǎng)頁開發(fā)的全過程。當(dāng)然，這個(gè)流程也就是大型互聯(lián)網(wǎng)公司產(chǎn)品開發(fā)的傳統(tǒng)流程，涉及到的人員一般有：產(chǎn)品經(jīng)理、網(wǎng)頁設(shè)計(jì)師、Web前端工程師、后端工程師等多個(gè)角色。
△@酷coo豆 和小伙伴們開發(fā)的企業(yè)網(wǎng)站
在實(shí)際的工作崗位中，一般由“網(wǎng)頁設(shè)計(jì)師”負(fù)責(zé)「視覺設(shè)計(jì)」板塊，即我們平常所說的「網(wǎng)頁設(shè)計(jì)」。而「前端制作」環(huán)節(jié)則主要有“前端工程師”來負(fù)責(zé)，即用代碼來重構(gòu)還原設(shè)計(jì)師的視覺稿，這一環(huán)節(jié)也就是我們平常所說的「網(wǎng)頁制作」。
△圖：@酷coo豆 開發(fā)的個(gè)人網(wǎng)站
而我們在開發(fā)個(gè)人網(wǎng)站或個(gè)人博客時(shí)，由于網(wǎng)站項(xiàng)目本身的功能簡易性，沒有太多的數(shù)據(jù)需要處理，有時(shí)只需一個(gè)人就足夠了。比如，我在開發(fā)平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)時(shí)，就是一人飾演了多個(gè)角色，完成了全站的搭建。
網(wǎng)站開發(fā)流程：https://zhuanlan.zhihu.com/p/25097044
背后的故事：https://zhuanlan.zhihu.com/p/26548359
1.2、網(wǎng)頁設(shè)計(jì)，是以視覺設(shè)計(jì)為主的工作。
學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的核心任務(wù)是學(xué)習(xí)“視覺設(shè)計(jì)”相關(guān)的知識點(diǎn)。用什么樣的排版，或者富有創(chuàng)意的表現(xiàn)形式，才能如何更加高效的傳達(dá)版面信息？如何規(guī)劃頁面路徑？用什么樣的顏色，以及多大的字號？這是新手學(xué)習(xí)網(wǎng)頁設(shè)計(jì)應(yīng)該畫下的重點(diǎn)。
一個(gè)網(wǎng)頁被設(shè)計(jì)出來，是給人用，給人看的。 要好看（簡潔）、要好用（高效）這才是一個(gè)設(shè)計(jì)師需要反復(fù)考慮的。視覺+交互，是網(wǎng)頁設(shè)計(jì)師的核心競爭力。
其中“視覺設(shè)計(jì)”的依據(jù)，源于前面的策劃和交互設(shè)計(jì)。最后出具的“視覺設(shè)計(jì)稿”得符合品牌定位，滿足生產(chǎn)運(yùn)營、以及用戶需求，這是網(wǎng)頁設(shè)計(jì)師必修的基本功！
1.3、網(wǎng)頁制作，是以前端代碼為主。
網(wǎng)頁制作在協(xié)作流程上，緊跟設(shè)計(jì)之后。這部分工作通常是由WEB前端工程師來完成的，工程師通常會運(yùn)用到HTML、CSS、以及JavaScript、jQuery等網(wǎng)頁前端代碼，來還原網(wǎng)頁設(shè)計(jì)師的“視覺設(shè)計(jì)稿”，以及交互動(dòng)畫等。
“前端工程師”除了要配合網(wǎng)頁設(shè)計(jì)師外，還要配合做后端工程師，做好網(wǎng)頁端的數(shù)據(jù)收集處理等工作。如果你要?jiǎng)?lì)志成為一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)師，請牢記自己的崗位職責(zé)和學(xué)習(xí)重點(diǎn)，在沒有認(rèn)清“視覺設(shè)計(jì)”前，要當(dāng)心自己是不是越位到Web前端開發(fā)這個(gè)坑里去了。
再比如優(yōu)化網(wǎng)站所需的SEO、Ajax等技術(shù)，雖無需你動(dòng)手實(shí)踐，但能做到了解一二，也是不錯(cuò)的加分項(xiàng)。在設(shè)計(jì)的時(shí)候，也可充分利用這些規(guī)則和技術(shù)來規(guī)劃你的版面，使其更加的專業(yè)友好。
二、從這里開始，系統(tǒng)學(xué)習(xí)網(wǎng)頁設(shè)計(jì)。
學(xué)習(xí)路線參考：http://www.xxriji.cn/career/7.html
(1).【基礎(chǔ)】首先要精通設(shè)計(jì)軟件，把photoshop玩轉(zhuǎn)，這是網(wǎng)頁設(shè)計(jì)的主力工具！
(2).【基礎(chǔ)】深入學(xué)習(xí)排版設(shè)計(jì)，以及三大構(gòu)成中的平面構(gòu)成、色彩構(gòu)成、立體構(gòu)成，掌握一定的素描基礎(chǔ)，以明確：光影變化、透視結(jié)構(gòu)、構(gòu)圖平衡的基本視覺規(guī)律。
(3).【核心】掌握網(wǎng)頁設(shè)計(jì)規(guī)范，學(xué)習(xí)網(wǎng)頁設(shè)計(jì)概述、網(wǎng)頁布局、制作流程、視覺元素、色彩搭配、以網(wǎng)頁布局排版、切圖、交互知識等。
(4).【核心】學(xué)習(xí)網(wǎng)頁設(shè)計(jì)創(chuàng)意表達(dá)的思路流程，如何將文案創(chuàng)意具體到視覺化呈現(xiàn)的全過程，以及畫面光影細(xì)節(jié)刻畫的技能提高。請參考：網(wǎng)頁設(shè)計(jì)高級教程。
(5).【核心】了解一點(diǎn)前端代碼HTML、CSS的運(yùn)用，學(xué)一款代碼編輯軟件，推薦網(wǎng)頁設(shè)計(jì)師用Dreamweaver。
△圖例。上圖案例中，采用左右布局的排版，頁面整體色調(diào)偏暖，采用襯線宋體使頁面顯得端莊大氣，導(dǎo)航及標(biāo)題文字采用金黃色的質(zhì)感處理，使得整個(gè)頁面穩(wěn)重而富有商業(yè)文化的氣質(zhì)。（來源：騰訊設(shè)計(jì)師郭亮，網(wǎng)頁設(shè)計(jì)高級教程）
(6).了解你設(shè)計(jì)網(wǎng)站的公司及產(chǎn)品，熟悉這個(gè)公司及其產(chǎn)品面向的人群！
(7).拓展學(xué)習(xí)網(wǎng)站優(yōu)化、開發(fā)、后臺數(shù)據(jù)處理常識（加分項(xiàng)目！）
三、推薦幾本經(jīng)典的網(wǎng)頁設(shè)計(jì)書籍。
(1).網(wǎng)頁設(shè)計(jì)實(shí)踐暢銷：《界面設(shè)計(jì)模式(第2版)》
(2).設(shè)計(jì)入門啟蒙書籍：《寫給大家看的設(shè)計(jì)書(第4版)》
(3).色彩搭配實(shí)踐書籍：《互聯(lián)網(wǎng)產(chǎn)品(Web/移動(dòng)Web/APP)視覺設(shè)計(jì)·配色篇》
(4).網(wǎng)頁交互設(shè)計(jì)經(jīng)典：《簡約至上：交互式設(shè)計(jì)四策略》
(5).如何制作響應(yīng)式網(wǎng)頁：《響應(yīng)式Web設(shè)計(jì)實(shí)踐》
(6).騰訊TGideas團(tuán)隊(duì)出品：《形式感+網(wǎng)頁視覺設(shè)計(jì)創(chuàng)意拓展與快速表現(xiàn)》
知識的學(xué)習(xí)并非一成不變，不同公司的崗位職責(zé)、業(yè)務(wù)工作內(nèi)容各不相同，以上只是從最基礎(chǔ)的層面談到了一些通識的東西，希望對初學(xué)者有所幫助！開卷有益，祝大家學(xué)有所成！
未經(jīng)許可禁止轉(zhuǎn)載，侵權(quán)必究！
關(guān)于@酷coo豆
「平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)」的站長，非科班平面設(shè)計(jì)師，樂于分享自學(xué)平面設(shè)計(jì)的書籍、教程、經(jīng)驗(yàn)等資源參考，希望和初學(xué)平面設(shè)計(jì)的你一起進(jìn)步！
優(yōu)質(zhì)學(xué)習(xí)資源推薦：網(wǎng)頁設(shè)計(jì)視頻教程
訂閱我的專欄：平面設(shè)計(jì)學(xué)習(xí)日記 - 本站專欄
（完）
在線咨詢