個(gè)人對(duì)網(wǎng)頁(yè)設(shè)計(jì)以及網(wǎng)站建設(shè)感興趣想學(xué)習(xí)，請(qǐng)各位知道從哪里入手，推薦看什

時(shí)間：2024-02-12 09:05:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-12 09:05:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

個(gè)人對(duì)網(wǎng)頁(yè)設(shè)計(jì)以及網(wǎng)站建設(shè)感興趣想學(xué)習(xí)，請(qǐng)各位知道從哪里入手，推薦看什么書或者教程？謝謝。：

寫在前面：學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)/網(wǎng)站建設(shè)，你必學(xué)知道的幾件事！

以下內(nèi)容分享，將教會(huì)你系統(tǒng)學(xué)習(xí)網(wǎng)站建設(shè)，及網(wǎng)頁(yè)設(shè)計(jì)，并附帶相應(yīng)的視頻、書籍教程推薦，請(qǐng)不要錯(cuò)過每一個(gè)可點(diǎn)擊的鏈接。

1.基礎(chǔ)概念及邏輯

①網(wǎng)站建設(shè)＞網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)頁(yè)∈網(wǎng)站。網(wǎng)頁(yè)是網(wǎng)站的子集，一個(gè)網(wǎng)站里面有一個(gè)或多個(gè)網(wǎng)頁(yè)。

②互聯(lián)網(wǎng)的核心就是網(wǎng)頁(yè)（Web Page）+超級(jí)鏈接（hyperlink）。

③超級(jí)鏈接，屬于一個(gè)網(wǎng)頁(yè)的一部分，它允許我們同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行連接。

④網(wǎng)頁(yè)中呈現(xiàn)出的圖片、文字、音頻、視頻等元素，我們稱之為“超文本”。創(chuàng)建網(wǎng)頁(yè)的語(yǔ)言，我們稱之為超文本標(biāo)記語(yǔ)言。（英文：HyperText Markup Language，簡(jiǎn)稱：HTML）

⑤為了便于網(wǎng)站的開發(fā)，人們創(chuàng)建出了很多快速搭建網(wǎng)站的內(nèi)容管理系統(tǒng)（英文：Content Manage System，簡(jiǎn)稱：CMS），比如常見的開源系統(tǒng)有：WordPress 、Dede CMS、PHP CMS等。

⑥存放網(wǎng)站程序源代碼、圖像、視頻、音頻等資源的計(jì)算機(jī)，我們“通俗的”稱之為服務(wù)器。（請(qǐng)注意：這里的叫法并不嚴(yán)謹(jǐn)，不過初學(xué)者這么理解，完全足夠了。較真的朋友，請(qǐng)參考：服務(wù)器維基百科。）

2.網(wǎng)頁(yè)設(shè)計(jì)的制作流程

①通常情況下，任何一網(wǎng)站的建立，都會(huì)經(jīng)過“分析策劃—交互設(shè)計(jì)—視覺設(shè)計(jì)—前端制作—后端制作—測(cè)試上線”6個(gè)環(huán)節(jié)。

②請(qǐng)閱讀這篇文章，將解答你初學(xué)網(wǎng)頁(yè)設(shè)計(jì)時(shí)的諸多疑問。

講完上面的基礎(chǔ)概念和邏輯，如果你還有興趣往下看，那說(shuō)明你真的很適合去學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)，因?yàn)槟愫驮?jīng)的我一樣，具有專研、較真、愛探索的精神。那么以下內(nèi)容，將帶你開啟真正的學(xué)習(xí)之旅。

一、視頻教程推薦

網(wǎng)頁(yè)設(shè)計(jì)通常包括兩個(gè)部分，一是以設(shè)計(jì)師為主導(dǎo)的視覺、交互設(shè)計(jì)部分，二是以工程師為主導(dǎo)的web前端重構(gòu)部分。所以，要學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)，也可從這兩方面入手。

視覺美感的構(gòu)建來(lái)源于：色彩、排版、字體、主視覺元素等；交互的實(shí)現(xiàn)，來(lái)源于對(duì)用戶行為習(xí)慣的洞察、幫助其減少獲取信息的成本、并作出決策。

市面上的教程，對(duì)于這兩部分內(nèi)容通常都是分科教學(xué)的，所以很難找到一套完整的教程。不過，在勤學(xué)網(wǎng)的平面設(shè)計(jì)學(xué)院，有幾套比較對(duì)口的教程，我將簡(jiǎn)要羅列其知識(shí)點(diǎn)，大家可參考一番。

1.講解網(wǎng)頁(yè)布局、切圖、制作流程、排版、以及常用HTML元素，非常基礎(chǔ)的網(wǎng)頁(yè)設(shè)計(jì)入門教程。

2.由騰訊設(shè)計(jì)師錄制，講解色彩、構(gòu)圖、文字、圖像處理、交互等知識(shí)，涉及案例非常的高大上。

3.帶你全面掌握HTML和CSS知識(shí)、語(yǔ)法格式、網(wǎng)頁(yè)布局、及交互效果制作，等網(wǎng)頁(yè)前端代碼知識(shí)。

4.學(xué)習(xí)JavaScript+JQuery知識(shí)，能讓你的網(wǎng)頁(yè)動(dòng)起來(lái)，幫你創(chuàng)作出更佳的網(wǎng)頁(yè)交互體驗(yàn)。

以上幾個(gè)教程，涉及到的軟件主要以Photoshop、Dreamweaver為主，所以你需要有一定PS操作基礎(chǔ)，而Dreamweaver軟件則不必專門去學(xué)，因?yàn)槟阒饕獙W(xué)的是web前端代碼的語(yǔ)法結(jié)構(gòu)，DW作為一款編輯器，并沒有太多知識(shí)可學(xué)，跟著教程做一遍你就會(huì)了。

二、省錢學(xué)習(xí)攻略！

上面的教程，都來(lái)自平面設(shè)計(jì)學(xué)院，建議你注冊(cè)賬號(hào)后，不要單獨(dú)去買每個(gè)教程，因?yàn)檫@樣算下，課程費(fèi)用將高達(dá)上千元，會(huì)很貴的。

所以，小編建議你的是：花費(fèi)399開通一個(gè)年會(huì)員會(huì)更加劃算，而且能學(xué)習(xí)里面的所有課程，從此再也不用到處去拼湊教程了，學(xué)習(xí)體驗(yàn)更好。（提示：兩年會(huì)員是599，相對(duì)更加實(shí)惠，這得按你的學(xué)習(xí)需求決定，不浪費(fèi)為好。）

三、開卷有益，書籍推薦。

網(wǎng)頁(yè)設(shè)計(jì)的核心是由“視覺+交互”這兩部分知識(shí)組成，視覺負(fù)責(zé)畫面的美觀、交互負(fù)責(zé)功能的易用，設(shè)計(jì)師要在這兩者之間達(dá)到平衡。上面的教程，能夠在實(shí)踐行動(dòng)上幫助大家提高，以下書籍則能在理論上讓大家更進(jìn)一步。

(1).網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐暢銷：《界面設(shè)計(jì)模式(第2版)》

在第一版中文版在推出后“技?jí)喝悍肌倍螳@好評(píng)，一路暢銷。本書新增了社交媒體，移動(dòng)設(shè)計(jì)方面的內(nèi)容，切實(shí)地符合了當(dāng)下的技術(shù)發(fā)展潮流,作者多年觀察、實(shí)踐與智慧的升華。

(2).設(shè)計(jì)入門啟蒙書籍：《寫給大家看的設(shè)計(jì)書(第4版)》

這是一門影響了一代設(shè)計(jì)師的經(jīng)典巨著，無(wú)論是UI設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、平面設(shè)計(jì)領(lǐng)域，都被廣大設(shè)計(jì)師所推崇，是入門設(shè)計(jì)行業(yè)的必備書籍！

(3).色彩搭配實(shí)踐書籍：《互聯(lián)網(wǎng)產(chǎn)品(Web/移動(dòng)Web/APP)視覺設(shè)計(jì)·配色篇》

本書旨在介紹網(wǎng)站及移動(dòng)網(wǎng)站/APP等互聯(lián)網(wǎng)產(chǎn)品界面色彩搭配的知識(shí)與方法。內(nèi)容既涉及色彩屬性等基礎(chǔ)知識(shí)，也包括了有關(guān)互聯(lián)網(wǎng)產(chǎn)品界面色彩設(shè)計(jì)的系統(tǒng)完整的實(shí)用技巧。

(4).網(wǎng)頁(yè)交互設(shè)計(jì)經(jīng)典：《簡(jiǎn)約至上：交互式設(shè)計(jì)四策略》

書中闡釋了合理刪除、分層組織、適時(shí)隱藏和巧妙轉(zhuǎn)移這四個(gè)令交互式設(shè)計(jì)成果大程度簡(jiǎn)單易用的策略。

(5).如何制作響應(yīng)式網(wǎng)頁(yè)：《響應(yīng)式Web設(shè)計(jì)實(shí)踐》

面對(duì)不斷涌現(xiàn)的設(shè)備尺寸，Web設(shè)計(jì)的適應(yīng)性已經(jīng)成為設(shè)計(jì)師們所面臨的最為艱巨的挑戰(zhàn)。這本《響應(yīng)式Web設(shè)計(jì)實(shí)踐》書籍當(dāng)中，給出了一系列完善的解決方案。

(6).打造網(wǎng)頁(yè)形式感：《形式感+:網(wǎng)頁(yè)視覺設(shè)計(jì)創(chuàng)意拓展與快速表現(xiàn)》

這是國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)書籍中，賣地最好的書籍之一。本書可以幫助有一定基礎(chǔ)的網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者或在職者，在遇到設(shè)計(jì)創(chuàng)意瓶頸時(shí)，能夠在較短的時(shí)間內(nèi)解決設(shè)計(jì)上的創(chuàng)意和視覺形式感的問題。

上面給出的視頻教程和書籍，非常適合想要系統(tǒng)自學(xué)網(wǎng)頁(yè)設(shè)計(jì)的朋友，涉及到的內(nèi)容知識(shí)點(diǎn)豐富詳實(shí)，絕對(duì)的經(jīng)驗(yàn)之談。望以上內(nèi)容，對(duì)網(wǎng)頁(yè)設(shè)計(jì)學(xué)習(xí)者有所幫助。

原創(chuàng)分享，轉(zhuǎn)載請(qǐng)聯(lián)系授權(quán)。