@Akane_Lee ：不(bù)少(shǎo)做(zu✘÷±★ò)平面的(de)設計(jì)師(shī)想轉行(xíng)走網頁設計(jì)這(zhè)條≤ γ>路(lù)，做(zuò)網頁和(hé)做(zuò)平面是(shìΩπ♥↑)完全不(bù)同的(de)思維，加上(shàng)還(há✘©≈i)要(yào)熟悉或了(le)解html和(hé)CSS代碼，所以就(jiù)<∞很(hěn)考驗設計(jì)師(shī)的(de)自(zì)學€✘ 能(néng)力了(le)。而且還(hái)有(yǒu)一(≥≈λ₩yī)點，我們在設計(jì)網頁的(de)過程中，并不(bù)是≥→♣(shì)你(nǐ)想怎麽設計(jì)都(dō>§u)可(kě)以的(de)，還(hái)要(yà↓λ∏'o)考慮編碼實現(xiàn)和(hé)用(yòng)戶體(tǐ)驗。那(nà)麽今天我 ‌ ×們就(jiù)來(lái)和(hé)您聊聊，想轉型成為(wèi)≠§•網頁設計(jì)師(shī)，需要(yào)必備的(de)一↕±₽(yī)些(xiē)技(jì)能(néng)知(zhī)識點∑ ：

內(nèi)蒙古網站(zhàn)制(zhì™₹)作(zuò)，內(nèi)蒙古網站(zhàn)設計(jì)，內(nè✘₩∞♣i)蒙古網站(zhàn)建設，呼和(hé)浩特網站(zhàn)建設，呼和§∑(hé)浩特網站(zhàn)制(zhì)作(z ←uò)、呼和(hé)浩特網站(zhàn)設計(jì)首選內(nèi)蒙古呼和(hé)浩特先誠網絡$>科(kē)技(jì)公司、、、先誠官網：/ 

加分(fēn)：Bootstrap、Sass、Compass、Susy…等，會(αγ≠huì)套用(yòng)現(xiàn)成的(de) jquery 包、JS £₹包之類也(yě)就(jiù)差不(bù)多(duō)了(le)。再深入就(jiù)'★↔是(shì)F2E的(de)領域。

基本中的(de)基本，隻要(yào)是(shì)任何單位是(shì)「♠•↑>PX」、給屏幕用(yòng)的(de)圖稿我都(dōu)建議($©yì)用(yòng) Photoshop 制(z→ ₹hì)作(zuò)，Illustrato£←Ω↑r 是(shì)印刷用(yòng)軟件(jiàn)'$€♠，對(duì) PX 支持度很(hěn)差。

關于最基礎的(de)摳圖，有(yǒu)的(de)童鞋懂(dǒng)的(de)方法還(hái​‌☆)不(bù)全面，推薦從(cóng)《從(cóng)菜鳥到(dào)£®‌高(gāo)手！PHOTOSHOP摳圖全方位攻略‌ ₩↑》開(kāi)始學習(xí)。

Grid

現(xiàn)在新開(kāi)發的(de)網頁通(tōng)常會(huì)♦α要(yào)求制(zhì)作(zuò) Responsive ，為(wèi)了(le)要‌σφ¥(yào)方便套用(yòng) Bootstrap 或 Ω$©←Susy ，Grid 就(jiù)是(shì)一(yī)φΩ≠§定要(yào)懂(dǒng)的(de)觀念，《Guideguide下(xià)載及使☆÷用(yòng)說(shuō)明(míng)》能(né∞₽λ<ng)幫助你(nǐ)在 PS 裡(lǐ)快(kuài)速建立參考線。

切圖

當你(nǐ)會(huì)寫 Html、搞懂(dǒng) Div、Css 後，你(nǐε™α≥)就(jiù)知(zhī)道(dào)怎麽切圖了(le)（無誤），不(bù)會(huì)寫 Cod↑™e 的(de)視(shì)覺設計(jì)師(±σshī)切出來(lái)的(de)圖常常被退貨也(yě)隻是(shì)剛好(h☆→π×ǎo)…做(zuò)個(gè)蛋糕需要(yào)糖和(hé)巧克力粉、材料供應卻老(₩♥λlǎo)給他(tā)鹽和(hé)胡椒粉，是(shì)想逼寫 ±​₽Html 的(de)人(rén)從(cóng)種甘蔗和(hé)可(kě)可™ε(kě)樹(shù)開(kāi)始嗎(ma)？

Illustrator

既然都(dōu)是(shì)平面設計(jì)師(shī)想轉型，這(zhè)套一(yī)©‌定用(yòng)的(de)非常熟悉，可(kě)惜我對(duì)這(zhè)套的(de)定義就≤→☆(jiù)是(shì)「送印刷廠(chǎng)」用(yòng)。在我的(de)制₩ (zhì)圖過程中，所有(yǒu)能(néng)用(yòng)向量繪制(zhì)的(de)¶ ‌部份我都(dōu)會(huì)用(yòng)向量。PS 的(₹λde)向量工(gōng)具不(bù)太好(hǎo)操作(z>∑φuò)，遇到(dào)比較複雜(zá)的(de)圖型Ω®↔我會(huì)在 AI 裡(lǐ)畫(huà)好(hǎ✔δo)、貼進 PS 為(wèi)形狀圖層，再來(lái)調整圖層樣式。所∏£☆以 AI 隻會(huì)用(yòng)到(dào)畫(huà)向量的(de)功能(né®$ng)，其他(tā)全進 PS 處理(lǐ)。₽☆
HTML

不(bù)會(huì)切圖、不(bù)會₩‍☆<(huì)手寫 Code 的(de)不(bù)要(yào)說(shuō)自(zì)己是(s $≥‌hì)網頁設計(jì)師(shī)，做(z∑£uò)網頁隻靠 Dreamweaver？和(h♦δ↑αé)蒸飯箱蒸出來(lái)的(de)便當感覺差不(bù)多(duō)，勉強能(né£←ng)入口但(dàn)很(hěn)難吃(chī)。有(yǒu)的(de) RD 會<♠(huì)接受用(yòng) Dreamweaver 之類可(‍§φkě)視(shì)化(huà)軟件(jiàn)産生(sh♦₩ēng)的(de) Code，這(zhè)要(yào)看(kàn)和(hé)設計(jì)師λ‍‍σ(shī)配合的(de) RD 接受度到(dào)哪裡(lǐ)。通(tōng&≥♣♥)常平面想轉網頁設計(jì)很(hěn)大(dà)部份是•ε$(shì)薪水(shuǐ)可(kě)以喊比較高★€‌(gāo)，如(rú)果想拿(ná)更高(gāo)的(de)薪水(shuǐ)‌♠™<就(jiù)不(bù)要(yào)依賴 DW ，老(lǎo)老(lǎo)實實的(de)練英打吧‍'(ba)。

想當個(gè)網頁設計(jì)師(shī)， W3C 是(shì)一(φΩyī)定要(yào)懂(dǒng)的(de)。當然非常多(duō•γ✔)的(de)元素不(bù)會(huì)每個(gè)都(dōu)記得(de)，把這("♣'♦zhè)個(gè)網址當目錄用(yòng)吧(≤¶✔ba)，不(bù)懂(dǒng)或忘記就(j∞‍iù)跑來(lái)查一(yī)下(xià)€α←π。All Standards and Drafts – W3C

補充：

    W3Schools Online Web Tutoriε‍€★als
    W3Fools – A W3Schools•× Intervention

margin、padding 是(shì)初學者最容易搞混的(de)兩個(gè)值；Float €Ω™很(hěn)常用(yòng)但(dàn)不(bù)小(xiǎo)心就(jiù)破版；熟悉 Ba↕™ ckground 可(kě)以玩(wán)←∞ε出很(hěn)多(duō)花(huā)樣…等等。在 CSS 細節部≠™份就(jiù)可(kě)以偷懶一(yī)點± ™$用(yòng)現(xiàn)成的(de)了(le)，雖然産出的(de) Code ÷→≠↔比較醜不(bù)優雅，但(dàn) RD 比較少(shǎo)去(qù)動到(dào)這(zhè♥¥±)一(yī)塊，所以還(hái)可(kě)以接受。我自(zì)己常用(yòng∑α‍)的(de)偷懶工(gōng)具如(rú)下(↔λxià)：

圓角框：CSS Border Radius Generator
陰影(yǐng)：Box Shadow CSS Generator
按鈕：Buttons – A button li∏β>brary built with Sass and Compa≤× ss
可(kě)以看(kàn) browser 對(duì) html"'、css 等等的(de)支持度：Can I use… Support tabl§σ↑es for HTML5, CSS3, etc

當然很(hěn)有(yǒu)很(hěn)多(duō)其他(t↑☆±εā)在線生(shēng)成或是(shì)外(wài)挂包，歡迎大(dà)家(jiā)補充≤€，好(hǎo)讓我能(néng)更偷懶一(yī)點…

Responsive

先把 Html 和(hé) Css 練熟了(le)再來(lái)看(kàn) Responsive¶★ 這(zhè)個(gè)大(dà)難題。要(yào)做(zuò)好(hǎo)一(yī)個(gè) $φ♥ RWD 從(cóng) Wireframe 就(jiù)要(y§∞ >ào)規劃好(hǎo)。在 Wireframe 階段我習(xí)慣先↑≤設計(jì) Desktop 版本，功能(λ↓♠néng)最多(duō)最完善。但(dàn)在寫 Code 的(de)時(shí)候會(→φ huì)是(shì)反過來(lái)、先從(cóng) Mobile 的(de)尺寸開(kāi∏₩§β)始刻。剛接觸 RWD 的(de)先套 Bootstrap 增加成就(jiù)感和(hé)手感←‍←$，等熟悉了(le)覺得(de)不(bù)夠用(yòng)綁手綁₩βε腳的(de)時(shí)候，差不(bù)多(duō)該踏進 Sass、Compass、Susεπ₩y 的(de)領域。

别用(yòng)現(xiàn)成的(de)軟件(jiàn)做(zu₽≥≤♣ò) Responsive，除非是(shì)純靜←≠(jìng)态網頁不(bù)需要(yào)和(hé) RD 合作(zuò)，≥¥原始碼髒就(jiù)髒沒關系反正不(bù)會(huì)有(yǒu)人(rén)看(k≤§εàn)了(le)。目前我看(kàn)到(dào)「排排版就(jiù)好(★γ hǎo)」的(de)軟件(jiàn)産出的(de) Code 沒 <有(yǒu)幹淨的(de)，隻要(yào)是(shì)之後有(yǒu)人(rén)還'₽(hái)要(yào)接手的(de)産出、拜托維持它的(de)幹淨整齊。®₽有(yǒu)沒有(yǒu)打開(kāi)廁所門(mén)看(kàn)到(dào)一(₹εyī)團亂産生(shēng)暈眩感臉色發青的(de)經驗？看(kà♦φn)到(dào)惡心的(de) Code 就(jiù)是(shì)這(zhè)種感覺Ω₹。
結論

以上(shàng)寫的(de)非常粗淺，<Ω¥隻能(néng)算(suàn)是(shì)給個(gè)方向讓初學者知(z ™hī)道(dào)要(yào)怎麽學習(xí)。最好(h®≈≥₩ǎo)還(hái)是(shì)去(qù)找個(gè¥ €) F2E 拜師(shī)學藝一(yī)下(xià)，靠自(zì)己自(zì)學δ♦寫出來(lái)的(de)東(dōng)西(☆★xī)一(yī)定會(huì)被正規 RD 嫌棄，我就(jiù)被₩φ老(lǎo)公罵過「這(zhè)是(sh>×ì)什(shén)麽邪魔歪道(dào)」，邊哭邊學被他(tā)φ∑ ≤嫌棄了(le)一(yī)整年(nián)才<¥得(de)到(dào)勉強及格的(de)評語。

如(rú)果能(néng)把上(shàng)述 5 項都(dōu)∑σ≈練起來(lái)，就(jiù)能(néng)自(λα✔>zì)己接案賺外(wài)快(kuài)了(le)。隻要(yào)和(hé)程序無關的↑€(de)靜(jìng)态網頁都(dōu)難不(bù)倒你(nǐ)。網絡上(shàng)✔★有(yǒu)些(xiē)套裝的(de)特效包≈♣可(kě)以拿(ná)來(lái)改一(yī)改套用(yòng)，看(kàn)起來(lá≤↓§¶i)也(yě)很(hěn)炫。（遇到(dào)需要(yà♥γεo)套程序接後台的(de)可(kě)以兩手一(yī)攤說(shuō)✔​✘這(zhè)超出網頁設計(jì)的(de)領域要(yào)找 RD 配合。）

網頁設計(jì)和(hé) F2E 職務範圍部份重叠，都(d€∑¥ōu)要(yào)寫 Html、Css，注重使用(yòng)者體(tǐ)驗等等。最大(dà)的♠✔δ<(de)差别在于網頁設計(jì)師(shī)要(yào​$)畫(huà) Flow、Wireframe、Mockup、切圖、（标示文(wén)件(jiànε&♦)），會(huì)寫 JS 特效最好(hǎo)，不(bù)會(huì↑± )寫也(yě)沒關系。但(dàn) F2E​¶ 就(jiù)要(yào)對(duì) JS 很(hěn)熟悉了(le)。網頁設計(jì)δ♥ δ師(shī)算(suàn)是(shì)一(yī)腳踩在 UI/UX 圈、另一(yī)₹×隻腳踩在 F2E 邊在線的(de)角色。千萬小(xiǎo)心在 Code 上(shàng)不(β‍₩ bù)要(yào)和(hé) F2E 起争執，請(qǐng)謙÷÷≤&虛求教，沒事(shì)拿(ná)自(zì)己的★ (de)弱項去(qù)撞别人(rén)的(de)強項做(zuò)什(shén)麽？RD★€‌Ω 寫 Code 輸給設計(jì)師(shī)是(shì)哪門(mén)子<Ω‍​(zǐ)笑(xiào)話(huà)？設計(jì)師(shī)強的(de)當然是(shì)視(s∏λ'hì)覺啊！