作者 | 楊小愛(ài)

來(lái)源 | web前端開(kāi)發(fā)（ID：web_qdkf）

在上一篇《【CMS建站】寫給大家看的網(wǎng)站制作教程02—網(wǎng)站制作的工具介紹與下載安裝》文章中，我詳細(xì)的講解了關(guān)于制作一個(gè)在線網(wǎng)站需要用的工具。

今天我再來(lái)介紹一下，在我們正式開(kāi)始制作一個(gè)網(wǎng)站時(shí)，我們需要的掌握的一些知識(shí)技能。

01、HTML/CSS/JS知識(shí)的學(xué)習(xí)

我們做一個(gè)網(wǎng)站，除了軟件工具的學(xué)習(xí)外，其次就是代碼知識(shí)的學(xué)習(xí)，對(duì)于一個(gè)網(wǎng)站，我們用到的代碼知識(shí)，最基礎(chǔ)的就是HTML、CSS、JavaScript了，而對(duì)于HTML、CSS、JavaScript的基礎(chǔ)知識(shí)的學(xué)習(xí)，你可以到 www.w3school.com.cn 上學(xué)，可以邊學(xué)邊練，每章后還有小測(cè)試。

你也可以通過(guò)碎片時(shí)間到公眾號(hào)的圖文系列教程進(jìn)行基礎(chǔ)知識(shí)的學(xué)習(xí)，同時(shí)還可以購(gòu)買一些建站的入門書籍來(lái)進(jìn)行閱讀。

因?yàn)槲乙彩亲詫W(xué)的建站知識(shí)，因此，我最開(kāi)始學(xué)習(xí)這個(gè)知識(shí)，主要是在www.w3school.com.cn 和www.51zxw.net上進(jìn)行學(xué)習(xí)，每天一邊看一邊練習(xí)，等到后來(lái)，我也購(gòu)買了一些網(wǎng)絡(luò)課程進(jìn)行學(xué)習(xí)，這個(gè)課程就會(huì)比較系統(tǒng)，特別適合進(jìn)行系統(tǒng)學(xué)習(xí)一門技能。同時(shí)，還閱讀了一些關(guān)于HTML，CSS，JavaScript方面的圖書。

直到我自己覺(jué)得練習(xí)也寫得差不多了，我就開(kāi)始去模仿寫一些網(wǎng)站靜態(tài)頁(yè)面。

而JavaScript知識(shí)的學(xué)習(xí)，如果沒(méi)有其他編程語(yǔ)言基礎(chǔ)的話，學(xué)起來(lái)可能要費(fèi)些力，但我還是建議你先在 w3school上學(xué)習(xí)。

如果自己能夠堅(jiān)持學(xué)下來(lái)，然后再考慮購(gòu)買一些網(wǎng)絡(luò)課程和圖書，如果網(wǎng)站上的知識(shí)，你都沒(méi)有辦法堅(jiān)持學(xué)下來(lái)，覺(jué)得它太枯燥了，那看書或者看課程，你也一樣會(huì)覺(jué)得無(wú)趣，畢竟，很多基礎(chǔ)理論的知識(shí)，都是比較枯燥的。

還有就是在學(xué)習(xí)JavaScript的時(shí)候，你也需要同時(shí)學(xué)點(diǎn)jQuery 的知識(shí)，這個(gè)可以幫助你提升學(xué)習(xí)信心。

jQuery 它是一個(gè) JavaScript 庫(kù)，jQuery 極大地簡(jiǎn)化了 JavaScript 編程，很容易學(xué)習(xí)。

例如，你引入庫(kù)以后，可以使用 hide() 和 show() 方法來(lái)隱藏和顯示 HTML 元素，可以實(shí)現(xiàn)元素的淡入淡出效果，可以在元素上創(chuàng)建滑動(dòng)效果等等。

當(dāng)然，如果到了后面，你的CSS知識(shí)學(xué)得比較扎實(shí)的話，建議能用CSS實(shí)現(xiàn)的，就不要用JavaScript 實(shí)現(xiàn)，這么做的目的主要是為了便于SEO優(yōu)化。像二級(jí)菜單，圖片輪播，鼠標(biāo)滑動(dòng)顯示文字，排序等等效果，只要能夠用CSS實(shí)現(xiàn)的，就盡量不要用JavaScript來(lái)寫。

但是，你在學(xué)習(xí)的過(guò)程中，要盡量嘗試用多種方式來(lái)實(shí)現(xiàn)。

另外，就是在學(xué)習(xí)中，遇到一些問(wèn)題，這個(gè)是非常正常的，但是，你要學(xué)會(huì)先自己調(diào)試解決，如果解決不了，就上百度或者谷歌（谷歌需要梯子才可以上）搜一下，看看別人寫的經(jīng)驗(yàn)方法，也可以到w3school上查文檔。

能自己解決的就自己解決，這樣你會(huì)有印象，在看別人經(jīng)驗(yàn)方法的同時(shí)，你還能增加印象，下次遇到這類問(wèn)題就能迎刃而解。

02、重點(diǎn)學(xué)習(xí)一種CMS建站程序

既然，我們是學(xué)習(xí)怎么用CMS來(lái)構(gòu)建自己的網(wǎng)站，所以在這個(gè)系列教程中，我們需要重點(diǎn)學(xué)會(huì)一種CMS建站程序。

在這個(gè)教程中，我會(huì)重點(diǎn)講解帝國(guó)CMS，當(dāng)我們學(xué)會(huì)了一種CMS后，我們?cè)偃W(xué)習(xí)其他的建站程序，我們也會(huì)感覺(jué)容易很多，對(duì)于其他CMS程序也會(huì)比較容易上手。

為啥我要在這個(gè)教程里推薦使用帝國(guó)CMS，主要是帝國(guó)CMS的安全性比較好，而且學(xué)習(xí)成本也會(huì)低很多，只要你會(huì)寫靜態(tài)頁(yè)面了，你就可以把這個(gè)靜態(tài)頁(yè)面變成你的網(wǎng)站模板。

并且，帝國(guó)CMS，也是比較流行的一種建站程序，同時(shí)，也是很多站長(zhǎng)和博主們比較喜歡使用的一種建站程序，網(wǎng)絡(luò)上有大量的模板，以及問(wèn)題的解決方案，當(dāng)你遇到問(wèn)題時(shí)，你可以通過(guò)網(wǎng)絡(luò)來(lái)需求解決辦法，而不用一個(gè)人獨(dú)自在那里苦思冥想。

當(dāng)然，除了帝國(guó)CMS外，目前比較流行的CMS也有很多，像Dedecms，WordPress，蘋果CMS，這些CMS也是各有各的優(yōu)勢(shì)與劣勢(shì)。沒(méi)有說(shuō)，那種最好，那種不好，主要還是看自己更加喜歡那種，或者說(shuō)那種程序更加能夠滿足你的需求。

當(dāng)你學(xué)會(huì)帝國(guó)CMS后，如果你還有興趣的話，你也可以自行去研究一下其他就幾種程序。

在我列舉的這幾款CMS里，我除了蘋果CMS沒(méi)有使用過(guò)外，其他幾款都體驗(yàn)過(guò)，總體使用下來(lái)，還是覺(jué)得帝國(guó)CMS比較好用，這個(gè)也是我為什么會(huì)在這個(gè)教程里推薦學(xué)習(xí)帝國(guó)CMS的原因。

除此之外，我們還需要懂點(diǎn)美學(xué)，設(shè)計(jì)的知識(shí)。因?yàn)槲?/span>們不僅要會(huì)做網(wǎng)站，我們還需要做得好看，畢竟，在這個(gè)看臉的時(shí)代里，顏值還是非常重要的，哪怕它只是一個(gè)網(wǎng)站，如果能夠讓它脫穎而出也是我們作為一個(gè)建站人需要考慮的問(wèn)題。

03、多看各種漂亮的網(wǎng)站模板和案例

當(dāng)我們學(xué)會(huì)了HTML、CSS、JavaScript 、jQuery這些技術(shù)后，我們就需要學(xué)以致用，練習(xí)寫一些靜態(tài)頁(yè)面。在刻意練習(xí)寫靜態(tài)頁(yè)面之前，我們需要多看一些漂亮的站點(diǎn)，看它的網(wǎng)頁(yè)布局與網(wǎng)頁(yè)源碼。

因?yàn)槲覀儗懙拿恳粋€(gè)網(wǎng)頁(yè)練習(xí)頁(yè)面時(shí)，它都不是我們憑空想出來(lái)的，它都是有一些參考案例或者素材來(lái)源的。

其實(shí)，在我們的實(shí)際工作中，我們的網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)一個(gè)網(wǎng)頁(yè)時(shí)，也是需要收集大量的參考案例，把他們認(rèn)為好的網(wǎng)頁(yè)收藏起來(lái)進(jìn)行參考，然后再根據(jù)需求做一些網(wǎng)頁(yè)效果圖。

而我們自己在寫頁(yè)面代碼練習(xí)的時(shí)候，也是需要遵循這樣一個(gè)過(guò)程，先做一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)效果圖，哪怕你只是把一些你認(rèn)為好看的網(wǎng)站頁(yè)面進(jìn)行截圖保存下來(lái)，然后再到PS里進(jìn)行拼接，也比你空想或者一邊寫一邊想要來(lái)得高效快捷。

如果你不知道去那里找好看的頁(yè)面進(jìn)行練習(xí)，那就多看各個(gè)大公司的官方網(wǎng)站，其次，就是到花瓣網(wǎng)，酷站，dribbble等各大設(shè)計(jì)素材類網(wǎng)站上去找靈感。

04、刻意練習(xí)，模仿別人的站點(diǎn)，將頁(yè)面實(shí)現(xiàn)還原

我們有了技能，也有了素材后，接著，我們就需要利用所學(xué)的知識(shí)技能進(jìn)行刻意練習(xí)，開(kāi)始寫網(wǎng)站靜態(tài)頁(yè)面。

與此同時(shí)，我們還需要多看別人的實(shí)現(xiàn)源碼以及網(wǎng)站布局。如果我們想做一個(gè)自己的個(gè)人博客的話，我們就需要去看各種各樣的個(gè)人博客網(wǎng)站，看他們的頁(yè)面布局，網(wǎng)站源碼，以及網(wǎng)頁(yè)色彩的搭配等等。

如果我們想寫一個(gè)企業(yè)網(wǎng)站也是一樣，先去看一下行業(yè)里其他企業(yè)的官網(wǎng)，然后根據(jù)自己的需求，進(jìn)行寫頁(yè)面布局。

另外，網(wǎng)站頁(yè)面的代碼實(shí)現(xiàn)都是根據(jù)網(wǎng)頁(yè)設(shè)計(jì)效果圖來(lái)做的，如果你實(shí)在不想學(xué)習(xí)PS的話，覺(jué)得PS拼接效果圖麻煩的話，又想節(jié)約學(xué)習(xí)時(shí)間，那我建議你就直接模仿別人的站點(diǎn)來(lái)進(jìn)行頁(yè)面布局代碼的練習(xí)。

我這里說(shuō)的模仿別人的站點(diǎn)，不是說(shuō)讓你鼠標(biāo)右鍵另存為，或者用仿站工具，直接把別人的網(wǎng)站源碼下載下來(lái)，照搬別人的代碼，而是參考他人的頁(yè)面設(shè)計(jì)效果，自己寫HTML布局，寫CSS樣式，寫JavaScript交互效果。

如果實(shí)在寫不出來(lái)，你可以查看一下別人的源碼，直接按鍵盤【F12】審查元素，看看別人怎么寫的，千萬(wàn)不要復(fù)制別人的代碼，一定要自己一行一行的敲出來(lái)，這樣你才會(huì)有印象。

特別是對(duì)于想走前端開(kāi)發(fā)路線的朋友來(lái)講，真的特別重要。

我們采用刻意練習(xí)來(lái)模仿別人站點(diǎn)頁(yè)面的目的，是為了幫助我們快速提高網(wǎng)站制作的學(xué)習(xí)效率。不是讓大家去直接復(fù)制別人的網(wǎng)站，因?yàn)槟悴挥萌プ鲰?yè)面設(shè)計(jì)圖，從而也會(huì)節(jié)約大量時(shí)間。

但是，在實(shí)際工作中，大部分企業(yè)都會(huì)有專業(yè)設(shè)計(jì)師出設(shè)計(jì)效果圖。而有的企業(yè)，就不一定了。有的時(shí)候，在某些企業(yè)，你接到了項(xiàng)目，還會(huì)要求出一個(gè)頁(yè)面實(shí)現(xiàn)效果圖。所以我建議你在學(xué)習(xí)網(wǎng)站制作的時(shí)候，一邊學(xué)習(xí)網(wǎng)站代碼的同時(shí)，也簡(jiǎn)單學(xué)習(xí)一下PS基礎(chǔ)操作，這個(gè)對(duì)你肯定是非常有用的。

總結(jié)

在今天的內(nèi)容中，我跟大家分享了學(xué)習(xí)制作網(wǎng)站這一技術(shù)的簡(jiǎn)單入門步驟以及需要學(xué)習(xí)的知識(shí)技能，因此，到這里，我們做一個(gè)網(wǎng)站的準(zhǔn)備工作，就算基本介紹完畢了。

但是，在這里，我還是想簡(jiǎn)單總結(jié)一下今天的內(nèi)容：

HTML，CSS，JavaScript以及jQuery知識(shí)的學(xué)習(xí)。
帝國(guó)CMS網(wǎng)站程序的學(xué)習(xí)。
到設(shè)計(jì)網(wǎng)站上去多看好的網(wǎng)站布局效果圖。
通過(guò)仿站進(jìn)行網(wǎng)站代碼的刻意練習(xí)。

今天的內(nèi)容就先分享到這里，希望我今天的內(nèi)容對(duì)你有所幫助，如果還有什么問(wèn)題，可以在留言區(qū)給我留言進(jìn)行交流分享。

下期內(nèi)容，我將介紹HTML代碼的基礎(chǔ)知識(shí)，不會(huì)很難，主要是為做網(wǎng)站而準(zhǔn)備的一些簡(jiǎn)單的HTML代碼知識(shí)。

如果你想跟著我一起學(xué)做網(wǎng)站的話，請(qǐng)繼續(xù)關(guān)注我。我是楊小愛(ài)，我們下期再見(jiàn)！

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

【CMS建站】寫給大家看的網(wǎng)站制作教程03—零基礎(chǔ)學(xué)網(wǎng)站制作的簡(jiǎn)單入門指南

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)