在我們想要建個網(wǎng)站的時候，偶爾會問網(wǎng)站建設(shè)難不難呢?難的話，難點是什么地方，如果不難的話，自己可以搭建嗎，自己搭建的時候需要學(xué)習(xí)點什么知識，以下資料由卓趣科技quhr整理提供。

首先我們解答第一個問題，網(wǎng)站建設(shè)難不難?如果說站在專業(yè)的角度說的話，網(wǎng)站建設(shè)一點不難，但是隔行如隔山，如果說一個行外人想要搭建一個建設(shè)一個網(wǎng)站還是有點難的。對于一個行外人，網(wǎng)站建設(shè)的主要難點是各方面的，對于網(wǎng)站建設(shè)從大的選擇上可以有模板建站和自主開發(fā)，對于我們行外人就不去了解自主開發(fā)了，我們可以了解一下模板建站。

模板建站需要懂的知識有域名、空間、模板的安裝、圖片的替換、代碼的簡單修改、欄目的添加與刪除等。相對應(yīng)的我們要學(xué)習(xí)的知識有域名的備案與解析、空間的選擇、301的跳轉(zhuǎn)等。

模板的選擇方面，要根據(jù)我們的實際情況選擇適合我們的模板，如果安裝好模板，要根據(jù)所選的模板，替換相對應(yīng)的圖片，比如banner圖片、產(chǎn)品圖片、logo圖片等;文字方面的替換也要先找到相應(yīng)的靜態(tài)頁面，然后從靜態(tài)頁面中把所有的宣傳推廣語改換成自己的，另外如果所選擇的模板中有一定的案例的話，舊的案例圖片可以直接在網(wǎng)站的后臺中進行替換，然后清除緩存后重新生成所有頁面。

所以說對于我們自己建設(shè)網(wǎng)站，如果有簡單的基礎(chǔ)的話，還是不難的，如果說沒有任何的基礎(chǔ)的話，那么就要去學(xué)習(xí)一定的基礎(chǔ)了，要學(xué)的有PS的應(yīng)用，因為有的圖片替換需要的圖片大小是不可以改變的，另外一個的話就要學(xué)習(xí)簡單的代碼基礎(chǔ)了，因為好多地方的替換都是需要從代碼里才能找到相應(yīng)的圖片的。

因此如果公司想要做個網(wǎng)站的話，最好還是找專業(yè)的網(wǎng)站建設(shè)公司比較好點，因為專業(yè)的人做出來的東西才是專業(yè)的，這樣的話，我們再日后的優(yōu)化工作中也能及時的抓住重點，為公司帶來更多的客戶，自己的業(yè)績也能穩(wěn)步上升。

近幾年Web前端框架層出不窮，比如 React, Vue, AngulaJS等吸引了大量的注意力，前端技術(shù)發(fā)展勢頭迅猛，各大互聯(lián)網(wǎng)公司也越來越重視前端開發(fā)，前端開發(fā)再也不是過去那種按照設(shè)計圖做靜態(tài)網(wǎng)頁，再隨便寫點jQuery的職位了?，F(xiàn)在，市場上對于前端開發(fā)的需求越來越大，我們經(jīng)常聽說前端開發(fā)入門難度低，但學(xué)習(xí)前端開發(fā)究竟需要多長時間呢？學(xué)多長時間就能找到工作賺到錢？結(jié)合了周邊同事和自身的經(jīng)驗來談?wù)剬W(xué)習(xí)網(wǎng)頁開發(fā)到底需要花多長時間。

Note：一定要下定決心，并且要堅持。

1. 網(wǎng)頁設(shè)計的基本概念和理論知識（10天）

在學(xué)習(xí)制作網(wǎng)頁之前，必須掌握網(wǎng)頁設(shè)計的基本概念和理論知識。什么是靜態(tài)網(wǎng)頁？什么是動態(tài)網(wǎng)頁？網(wǎng)頁的整體布局是什么？網(wǎng)頁設(shè)計的原則是什么？網(wǎng)頁基本構(gòu)成要素是哪些？基礎(chǔ)的網(wǎng)頁設(shè)計概念都不了解，那么對于之后要制作網(wǎng)頁更是難上加難。我認為利用10天時間了解網(wǎng)頁設(shè)計的基本概念和理論是必不可少的，時代在不斷變化，網(wǎng)頁設(shè)計也會更新?lián)Q代。所以了解基礎(chǔ)知識是為了之后設(shè)計制作打好基礎(chǔ)。當然，還需要了解基礎(chǔ)的SEO知識。網(wǎng)上的視頻教程個人建議還是少看，一本好的書絕對讓你受益匪淺。推薦幾本好書供大家學(xué)習(xí)：

制作網(wǎng)頁設(shè)計

1. HTML AND CSS: DESIGN AND BUILD WEBSITES, BY JON DUCKETT

如何讓網(wǎng)頁設(shè)計更加功能化

2. JAVASCRIPT AND JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT, BY JON DUCKETT

前端開發(fā)

3. LEARNING WEB DESIGN: A BEGINNER’S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS, BY JENNIFER NIEDERST ROBBINS

可用性：

4.DON’T MAKE ME THINK, REVISITED: A COMMON SENSE APPROACH TO WEB USABILITY, BY STEVE KRUG

2. CSS+HTML+JavaScript（1個月）

相對來說， HTML是最簡單的，只是標簽語言， 格式規(guī)范; CSS相對來說復(fù)雜一些, 有瀏覽器的兼容問題等。但二者組合就能實現(xiàn)很多頁面效果, 里面涉及的變化太多了。如果你只會基礎(chǔ)語法, 而沒有實際去寫過, 那樣是很難真正掌握的。我在這里說說我的經(jīng)驗吧，我一開始學(xué)習(xí)的Bootstrap，簡單點說，就是給現(xiàn)有電商項目套上Bootstrap做的響應(yīng)式皮膚。Bootstrap確實挺好上手，靠著官網(wǎng)的手冊，基本上遇到的問題都能自己解決。

JavaScript 也沒有那么難，你要知道Brendan Eich創(chuàng)建JavaScript語言一共就用了10天時間，所以它的語法并不復(fù)雜，相信你很快就能掌握基本語法。你可能還需要學(xué)習(xí)一些常見的庫的API，這個可以根據(jù)你的需求來安排，你要用到什么庫，就學(xué)習(xí)它的文檔。

我覺得最好的網(wǎng)頁開發(fā)學(xué)習(xí)資料就是 Mozilla Developer Network(https://developer.mozilla.org)的文檔了，涵蓋了HTML, CSS, JavaScript的方方面面，不論是初學(xué)還是老手查閱都是非常有用的，推薦給大家。

3. 開始制作網(wǎng)站（1個月）

了解了基本的知識，做了一些小練習(xí)之后，我認為最重要的是盡早參與實際項目，這樣才能得到真正的鍛煉。使用 Jekyll + GitHub Pages 為自己搭建一個靜態(tài)博客是一個很好的開始，只需要簡單的配置，不需要任何后臺開發(fā)，幾乎完全是前端開發(fā)。

建站的時間取決你自己對網(wǎng)站完成的滿意度，如果參考模板， 那么幾個小時內(nèi)就可以搞定了；如果是要獨立開發(fā)一個新的網(wǎng)站又要內(nèi)容全面好看，1個月是跑不掉的，甚至需要更長時間。

4. 工具軟件學(xué)習(xí)（半個月）

工具的掌握程度完全靠個人的領(lǐng)悟能力和學(xué)習(xí)，網(wǎng)上有很多關(guān)于以下這些工具的教學(xué)視頻，跟著學(xué)會事半功倍的。需要學(xué)習(xí)的基本軟件：

編輯器：Sublime Text

初學(xué)者我不建議立即使用強大的 IDE，先使用編輯器有利于學(xué)習(xí)。Sublime Text 是一款我個人非常喜歡的編輯器，界面優(yōu)雅，操作流暢，自動支持語法高亮，還有豐富的插件，你也可以試試。

設(shè)計出圖、切片：Photoshop

Adobe Photoshop，簡稱“PS”，是由Adobe開發(fā)和發(fā)行的圖像處理軟件，Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像，使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作，PS有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。Photoshop非常專業(yè)，也稍顯復(fù)雜，是專業(yè)的平面圖片設(shè)計人員必須掌握的一款工具。作為前端開發(fā)，你需要跟設(shè)計師緊密配合，學(xué)習(xí)一些 PS 知識會對你之后的開發(fā)更有幫助。

原型設(shè)計：Mockplus（時間成本最低）

是一款上手非常簡單的網(wǎng)頁原型設(shè)計工具，通過拖拽就你完成一個簡單的交互，項目類型諸多，有自由項目，網(wǎng)頁項目，自定義項目，當然還有APP項目。網(wǎng)頁項目最大的尺寸為3000*6000，你可以任意設(shè)計都沒問題。200個封裝組件和3000個圖標可供使用，最近新出的格子功能更是方便使用，減少了很多重復(fù)設(shè)計的時間。

掌握一些原型設(shè)計知識絕對非常有必要，這是我投入最少卻收益最多的事情之一，我強烈建議你嘗試一下Mockplus，對之后在團隊工作的溝通會非常有幫助。

5. 學(xué)習(xí)設(shè)計知識（持續(xù)）

前端開發(fā)是一個直接面向用戶的職位，跟后端開發(fā)不一樣，你的成果是用戶直接可以看到的，我認為提高自己的審美，多掌握一些設(shè)計方面的知識，把握當下流行趨勢和動向也是很有必要的。而這一過程是不能用具體時間來衡量的，需要不斷持續(xù)吸收新的東西才能設(shè)計出理想的網(wǎng)站。這里有15個最好的網(wǎng)頁設(shè)計博客資源可供大家每日閱讀，我個人還是最喜歡medium。UI設(shè)計資源網(wǎng)站相信大家都了解了，dribbble和behance等都是每日必逛，必定是受益良多。

總結(jié)：

軟件開發(fā)是一個需要持續(xù)學(xué)習(xí)的過程，盡管前端開發(fā)入門難度低，但是近幾年來前端開發(fā)的復(fù)雜度越來越高，對個人素質(zhì)的要求也越來越高。本文只是針對想要入門前端開發(fā)而找不到方向的人，經(jīng)過這個過程后，你可以找到一個初級的開發(fā)職位了。不論做什么事情，學(xué)習(xí)是根本，希望這篇文章能幫助到新手。

這是韓神公眾號第七期公開課，感謝整理筆記的童鞋@沐郁陽光

微課大綱普通人如何一小時學(xué)會搭建一個自己的網(wǎng)站1、國內(nèi)目前網(wǎng)站的一個分布情況2、如何在自己的電腦上搭建PHP環(huán)境3、如何在自己的電腦上搭建一個自己的網(wǎng)站4、如何設(shè)置和美化自己的網(wǎng)站1目前國內(nèi)網(wǎng)站的一個分布情況　　隨著這幾年互聯(lián)網(wǎng)的高速發(fā)展，據(jù)《中國互聯(lián)網(wǎng)站發(fā)展狀況及其安全報告(2016)》顯示,截至2015年12月底,我國網(wǎng)站總量已超過420萬個，建網(wǎng)站已經(jīng)不再是程序員才能干的事情了，今天，韓神就帶大家0基礎(chǔ)在本地搭建一個自己的個人博客網(wǎng)站?！　∧壳笆褂米疃嗟臑閜hp程序。諸如WordPress、discuz、帝國cms、織夢cms、phpcms等等。對于網(wǎng)站調(diào)試員或者開發(fā)者而言，需要在本地搭建一個PHP的環(huán)境來調(diào)試網(wǎng)站程序或者開發(fā)程序，而對于新手來說，也可以在自己的電腦上搭建本地PHP環(huán)境，來搭建一個自己的網(wǎng)站，那么具體需要怎么做呢？今天我就來教大家用最簡單的方法來輕松搭建本地PHP環(huán)境！2如何在自己的電腦上搭建PHP環(huán)境　　1、下載。到Phpstudy官網(wǎng)下載相應(yīng)系統(tǒng)的軟件包，由于我的電腦是win10系統(tǒng)，所以我的操作都是按照win7系統(tǒng)下進行的（XP系統(tǒng)步驟相同），強烈建議新手使用phpStudy Lite版本，簡單解壓就可以了。當然你也可以使用其他版本。　　下載地址解壓版：http://phpstudy/phpstudy/phpStudy.zip　　phpStudy Lite下載：http://phpstudy/phpstudy/phpStudyLite.zip　　2、解壓安裝。下載完之后，進行解壓，然后雙擊phpStudyLite.exe進行安裝，我這里是直接安裝在D:/phpstudy目錄下。

　　點擊確定之后，會進行解壓，解壓完成后會彈出防止重復(fù)化提示，這里我們選擇“是”即可。

　　3、運行。之后桌面會彈出軟件運行的控制面板，我們可以看到軟件已經(jīng)啟動起來了，包括它此時的啟動狀態(tài)。

　　4、測試。測試本地php環(huán)境的數(shù)據(jù)庫是否正常，在phpstudy這個軟件的控制面板，點擊啟動，然后點擊控制面板上的“Mysql管理器”，“Mysql管理器”是用來管理mysql數(shù)據(jù)庫的，點擊之后會通過瀏覽器進入MySQL管理頁（mysql管理登陸頁面的默認賬號和密碼均為root）。如果打開之后在瀏覽器出現(xiàn)404頁面等錯誤，建議改下端口，將80端口改為8080或者其它（具體操作步驟：點擊phpstudy控制面板的其他選項菜單——>PHPstudy設(shè)置——>端口常規(guī)設(shè)置，將httpd端口改成8080即可），然后返回phpstudy控制面板，看到“其他選項菜單”按鈕，它里面主要包括一些常用的參數(shù)的設(shè)定，這里我們點擊看下，我們可以看到里面包括很多設(shè)定項，如配置文件、版本切換、站點域名管理等等，具體設(shè)定大家可以看下軟件提供的詳細教程，這里不再詳細解說。到此，本地PHP環(huán)境搭建完成。（PS：如果你已經(jīng)購買了虛擬主機或者是云主機以及云服務(wù)器，那么可以直接服務(wù)器上搭建網(wǎng)站，步驟跟本地搭建網(wǎng)站差不多，具體可以對照下面第三大點的操作方式。）

3如何在自己的電腦上搭建一個自己的網(wǎng)站　　這節(jié)課主要講的是搭建一個自己的個人站點，也就是博客主頁類型的網(wǎng)站，所以我們用WordPress這個開源程序來搭建，企業(yè)站點也是一樣可以用WordPress來搭建的?！　?、下載WordPress程序。大家到百度搜索WordPress下載，進行下載即可；如果比較懶得，就直接用打開下面的鏈接下載：下載鏈接：https://cn.wordpress.org/wordpress-4.5.3-zh_CN.zip　　2、解壓。上傳下載好之后，進入安裝PHPstudy的目錄文件夾，我是安裝在D:/phpstudy目錄下的，進入目錄下看到有個“www”文件夾，打開這個文件夾，把我們剛剛下載的wordpress-4.5.3-zh_CN.zip進行解壓，解壓后把wordpress文件夾的所有文檔放到D:/phpstudy目錄下的www文件夾。  這個目錄就是我們存放PHP網(wǎng)站程序的地方，直接放置到其根目錄下即可。

　　3、建立數(shù)據(jù)庫。點擊phpstudy界面的“Mysql管理器”，輸入賬號密碼（默認都是root），登陸后我們可以數(shù)據(jù)庫管理后臺。后臺包括，數(shù)據(jù)庫，導(dǎo)入，導(dǎo)出，刪除等操作。左邊列出的是已有的數(shù)據(jù)庫，除了默認的系統(tǒng)數(shù)據(jù)庫外，還有一個test測試數(shù)據(jù)庫，不喜歡的朋友，可以直接刪掉，點擊數(shù)據(jù)庫重新建一個數(shù)據(jù)庫，也可以直接用默認的數(shù)據(jù)庫，韓神這里新建了一個叫wp的數(shù)據(jù)庫。

　　4、安裝。前面，我們已經(jīng)啟動了phpstudy軟件，而且也把WordPress程序，放置到phpstudy安裝目錄下www文件夾的根目錄下了。下面我們就打開瀏覽器看下效果吧，瀏覽器地址欄輸入http://localhost或者127.0.0.1（如果你改了端口，那么就在后面加上：端口值，變成http://localhost:8080/；如果你把PHP程序包wordpress文件夾放置到www目錄下的話，這里輸入的地址就為localhost:8080/wordpress），然后回車打開，看到出現(xiàn)wordpress的安裝界面了，證明本地php環(huán)境已經(jīng)搭建好了，那么就可以開始進行網(wǎng)站搭建。步驟如下：

4如何設(shè)置和美化自己的網(wǎng)站　　關(guān)于模板和網(wǎng)站名稱以及標題的設(shè)置，大家進入網(wǎng)站后臺，點擊自定義站點，就可以修改網(wǎng)站名稱和網(wǎng)站標題以及l(fā)ogo，至于模板，大家點擊后臺左邊的外觀，就可以選擇主題或者自己上傳主題模板的壓縮包，上傳安裝之后，直接啟用就可以了。到此一個簡潔的個人博客站點就搭建完成了，是不是很容易，很快，完全是0基礎(chǔ)建站。

wordpress網(wǎng)站后臺

修改網(wǎng)站名稱和標題

更換網(wǎng)站主題模板

上傳網(wǎng)站主題模板

安裝并啟用網(wǎng)站主題模板

網(wǎng)站搭建完成網(wǎng)站搭建完之后，由于是入門課程，其他細節(jié)的修改大家可以登陸后臺進行慢慢摸索

推薦關(guān)注韓神的公眾號閱讀以下內(nèi)容1、手把手教你一小時學(xué)會搭建網(wǎng)站2、優(yōu)秀產(chǎn)品運營人員必讀書單3、15頁SEO公開課PPT讓你輕松入門SEO4、SEO新手如何寫出一份高逼格的SEO方案書5、一個初級SEO人員應(yīng)該如何對網(wǎng)站進行優(yōu)化6、【教程】教你如何輕松下載微博上的視頻7、被動吸粉和被動添加精準粉絲的實操方法8、商打造朋友圈、加粉、賣貨、招代理的方法都在這里9、看完這篇文章，我把朋友圈刪了10、如果你想要月入上萬請背會它回復(fù)【PPT】，送你800份世界500強PPT模板回復(fù)【書籍】，免費獲取10本營銷必讀電子書回復(fù)【營銷寶典】，免費獲取50本營銷必備寶典和工具包回復(fù)【微信】，免費獲取微信公眾號運營實操手冊回復(fù)【文案】，免費獲取600份世界500強品牌推廣文案模板回復(fù)【干貨】，免費獲取新媒體運營干貨回復(fù)【李開復(fù)】，免費獲取李開復(fù)推薦的30本創(chuàng)業(yè)/管理必看電子書

在我們想要建個網(wǎng)站的時候，偶爾會問網(wǎng)站建設(shè)難不難呢?難的話，難點是什么地方，如果不難的話，自己可以搭建嗎，自己搭建的時候需要學(xué)習(xí)點什么知識，以下資料由卓趣科技quhr整理提供。

首先我們解答第一個問題，網(wǎng)站建設(shè)難不難?如果說站在專業(yè)的角度說的話，網(wǎng)站建設(shè)一點不難，但是隔行如隔山，如果說一個行外人想要搭建一個建設(shè)一個網(wǎng)站還是有點難的。對于一個行外人，網(wǎng)站建設(shè)的主要難點是各方面的，對于網(wǎng)站建設(shè)從大的選擇上可以有模板建站和自主開發(fā)，對于我們行外人就不去了解自主開發(fā)了，我們可以了解一下模板建站。

模板建站需要懂的知識有域名、空間、模板的安裝、圖片的替換、代碼的簡單修改、欄目的添加與刪除等。相對應(yīng)的我們要學(xué)習(xí)的知識有域名的備案與解析、空間的選擇、301的跳轉(zhuǎn)等。

模板的選擇方面，要根據(jù)我們的實際情況選擇適合我們的模板，如果安裝好模板，要根據(jù)所選的模板，替換相對應(yīng)的圖片，比如banner圖片、產(chǎn)品圖片、logo圖片等;文字方面的替換也要先找到相應(yīng)的靜態(tài)頁面，然后從靜態(tài)頁面中把所有的宣傳推廣語改換成自己的，另外如果所選擇的模板中有一定的案例的話，舊的案例圖片可以直接在網(wǎng)站的后臺中進行替換，然后清除緩存后重新生成所有頁面。

所以說對于我們自己建設(shè)網(wǎng)站，如果有簡單的基礎(chǔ)的話，還是不難的，如果說沒有任何的基礎(chǔ)的話，那么就要去學(xué)習(xí)一定的基礎(chǔ)了，要學(xué)的有PS的應(yīng)用，因為有的圖片替換需要的圖片大小是不可以改變的，另外一個的話就要學(xué)習(xí)簡單的代碼基礎(chǔ)了，因為好多地方的替換都是需要從代碼里才能找到相應(yīng)的圖片的。

因此如果公司想要做個網(wǎng)站的話，最好還是找專業(yè)的網(wǎng)站建設(shè)公司比較好點，因為專業(yè)的人做出來的東西才是專業(yè)的，這樣的話，我們再日后的優(yōu)化工作中也能及時的抓住重點，為公司帶來更多的客戶，自己的業(yè)績也能穩(wěn)步上升。