想學網頁有沒有入門途徑？來看看這一片文章。
|
本文適合初次想要嘗試自己做一個網站而不知從何入手的朋友們。如果是有一定經驗和基礎的朋友建議去查閱更高級的教程。 就像當時我做第一個網站完全是因爲自己的興趣，覺得做一個網站放到互聯網上能被其他人訪問是一件非常cool的事情，於是就動手去做了，很多人也會有類似的想法。但是，如果沒有經驗的話，第一次嘗試的話在各個方面都要探索着入手。打個比方，一個工作的人想讀研究生了，那麼他應該首先確定讀哪所學校哪個方向乃至那個導師的研究生，然後按時提交網上申請，最後複習並準備參加全國研究生的選拔考試。這一套流程經歷過一次就知道很簡單，但是對一個初次接觸的人，瞭解探索的過程中難免遇到磕絆。本文就是希望幫助初次建站的朋友瞭解下一些基本流程，少浪費一些不必要的時間。 Step1: 首先，做一個網站要明確它的基本功能，也就是說網站是做什麼用的。有句俗話說的很在理，叫磨刀不誤砍柴工。做一件事情首先應該在宏觀上有所把握和了解，而後制定計劃，最後纔是落實的具體技術上的實施，效率會很高。對IT程序員可能更是如此，技術有各種各樣學不完的，學一門技術首先應該是從宏觀上了解和理解，而後纔是投入到編程細節。學會從宏觀上學習把握，才能夠真正觸類旁通。 初次嘗試不宜定位在做一個功能過於複雜的網站，簡單一些的比較好實現，比如個人介紹主頁、網絡小說、各種教程這類純展示型的網站，不需要太多複雜的動態交互。此外，有一個參考性的指導法則：“普通網站的深度不宜過深，一般不要超過5”。網站深度是指從網站首頁到其‘最內部’或者‘用戶目標’頁面需要的點擊次數。這個法則的宗旨是讓用戶到達目標儘量快捷，如果到你的網站點擊多次還到不了我想去的頁面，那麼我想沒人會願意繼續訪問了。當然，你可能會疑問，如果想網絡小說這種章節非常多的怎麼辦？這種的話就需要有可點擊的鏈接如‘上一章’、‘下一章’這種保證頁面的跳轉，更好的辦法是要加入下文提到的網站的導航欄，相信你回顧下以前瀏覽過的類似網站就會清晰了。 Step2: 第二步，需要了解做一個網站的整體技術框架應該是什麼樣的。現在的web開發一般分爲前端和後端兩大塊：前端是面向用戶的，也就是決定呈現出來的網站是什麼樣的，最基本的技術3樣--"html + javascript + css"；後端是指服務器端，主要用於處理前端提交的數據和向前端傳遞數據，基本的東西包括的也是3樣--“php + mysql + apache”。有了這前端3種和後端3種一共6種“工具”，理論上說就可以做任何你想做的網站了。此外，後端主要是建設動態網站需要與用戶進行數據交互的，如果僅僅是普通呈現型的網站的話，主要用到的僅僅是前端技術。下面來簡單拆分下前端和後端這6種“工具”，你會發現其實都是很簡單的。 前端： - html html全名超文本標記語言，其實就是各種標籤組成的解釋型語言，其解釋器就是瀏覽器。它是學做一個網站必須要瞭解的基本知識，構成的是網頁的骨架。如果你已經瞭解了html而只是想知道如何架網站的話可以快速跳過這塊；如果你不瞭解html的話，建議先去了解一下，其實很簡單。這裏鄭重推薦一個學習web開發知識的入門網站：http://www.w3school.com.cn/，我的很多入門知識都是從這裏學來的。下面是一段簡單的html代碼的例子：(隨便打開個文本編輯器copy下面代碼保存成“.html”文件，用任意瀏覽器打開看下效果吧)
前端： -javascript 如果說前端技術中什麼最重要，我想應該就屬javascript了。javascript可以幫助網站在前端呈現上產生許多動態效果，讓網站更加生動，所以javascript也被認爲網頁的血肉。入門的話javascript比較簡單的是完成一些表單的驗證，比如用戶在表單年齡欄中輸入了字母而非數字，這種明顯的錯誤可以在客戶端通過js驗證反饋個用戶令其重新輸入，而非提交給服務器端後再發現其錯誤而反饋給用戶。這樣會減少用戶的等待時間，而且減輕服務器的負荷（少做無意義的事情）。至於其它更絢麗的功能，我現在很多時候是直接用外部的庫而不是自己去重新實現，難度較大。總之，javascript深入下去的話博大精深，然後作爲入門的話瞭解些基本皮毛也就可以了，進階留待以後。 前端： - css 前端技術中，css(級聯樣式表)甚至算不上一種技術，更談不上一種語言，它只是對html元素呈現樣式的定義，被認爲是網頁的皮膚，決定着網頁的呈現樣式。如果說它哪裏比較難的話，那就得算是html元素的各種各樣的屬性了。比如你想改變<p></p>元素內的字體，你就的知道該元素有個屬性“text-font”，如果不知道那就沒辦法了。這種的話爲了方便開發，可以使用如Dreamweaver的軟件，會有自動提示可用屬性的功能。當然，最好的情況還是儘量掌握一些基本的屬性，然後在純文本下面寫更快捷一些。下面是一個簡單的css文件內的樣式定義：
前端：總結 綜上3樣前端工具便可以開發出簡單的網頁呈現了，只學這三樣便可以迅速入門。當然在進階的開發中可能需要很多更漂亮的產品化的呈現樣式和動態效果，這種情況下建議採用現有的各種模板庫，我現在用過的比較熟悉的有 jquery 和YUI。 此外，還有更加現成的框架可以直接拿來用，比如前面提到的網站的導航欄，這個東西網上有很多實現版本，很多都很漂亮，建議直接拿來用。不過，這些都是需要你對以上3樣前端技術有所瞭解爲基礎，否則你可能不會改現成的東西變成你自己的。
針對前端技術，還有一點很重要，就是在實踐過程中要逐漸養成表現與實現相分離。具體說來，就是html文件內的主題內容只含有各個標籤元素及內容，而呈現樣式儘量都放在css文件中在html開始導入，js文件也類似。總之，這樣做是爲了方便日後修改，且代碼更爲整潔。試想一下，假如一開始你在每個<p>標籤內都定義了樣式如下
那麼日後如果你想要改變字體爲微軟雅黑的話，你就不得不在每一處都做修改，非常麻煩。反之，如果統一規劃好將<p>元素的樣式定義放在css文件中，那日後改動時只需要在css文件中這一處調整即可。實踐多了，就會越來越體會到這種表現與實現相分離的好處。
後端： -php 如果你要做的是一個功能稍微複雜一點的動態網站，就需要用戶端與服務器端的數據交互了，這時就需要掌握後端的技術。現今網上的幾乎所有網站都是動態網站，所以後端的基本技術瞭解也是必要的。舉個例子，假如你的網站需要用戶註冊，那麼首次登陸的用戶需要填寫註冊信息，這個信息填寫完後提交到服務器端是需要你記錄到數據庫的。所以，首先需要服務器端有一樣工具，它能接收客戶端傳來的註冊信息（數據），再連接數據庫把這個信息保存下來（實際情況還需驗證註冊信息是否已存在），最終再把結果反饋給客戶端。而這個工具就是--服務器端腳本語言php。實現類似功能的還有asp和jsp，但是php是現如今比較流行的開源腳本語言，簡單易學，我自己是用php，所以這裏着重推薦使用php。php需要到官網下載並做一些配置，在下面後端總結時小提一下，現在給幾個php語言的樣子有個感性認識。 例如上面舉例提到用戶註冊信息驗證： 前端register.html中代碼如下
後端register.php中代碼如下
上面只是介紹了php的一個簡單例子，具體的裏面鏈接數據庫並操作的還有一些函數，建議自行去w3school網站查閱。php語言的有一個重要特點，就是可以和html混合使用，但是文件一定要是“.php”的。總之，後端的核心便是php腳本語言，不熟悉的朋友需要自行學習，這裏只是介紹入個門。
後端： - mysql 後端的數據都要保存在數據庫服務器裏，推薦比較常用的mysql數據庫服務器。這個東西入門的話沒有太多需要學的，只需要瞭解些基本的操作命令即可，如建表命令create，查找命令select，更改命令update，增加命令insert，刪除命令delete。
後端： - apache 最後，要想將電腦作爲一臺服務器，還需要服務器軟件，apache即是最爲流行的服務器軟件。有了apache，就可以將自己電腦模擬成一臺服務器，隨時通過瀏覽器訪問自己電腦上開發的網站，便於檢閱。這個也是不需要學什麼的，只需要瞭解有這麼個工具即可。當然，它的配置還是略微麻煩一點，因爲需要在apache的配置文件中爲網站根目錄、php做相應的配置。 現如今有一款集成軟件很不錯--XAMPP，它將apache + mysql + php + perl集成在一起，省去了分別安裝配置的麻煩。當然，如果想熟悉每一個軟件及其配置的話，你也可以分別安裝配置體驗下。
後端：總結 服務器端的核心是php，這個是必須要熟悉的。php裏面還有些比較有用的技術比如：通過 $_SESSION 變量使數據在瀏覽器中能夠跨域傳輸。更重要的是，通過服務器端編程及設置，你會真正熟悉服務器端究竟是個怎麼回事（本質很簡單），會真正思考爲了減少數據重複傳遞、加快網頁瀏覽速度而如何設計數據庫以及盡最大可能只傳遞用戶需要的數據。試想下，如果你做的是個網絡小說的網站，我只想查看某一章節的內容，可是一點擊你的網站你卻向我傳遞的是整篇小說的內容，這無疑會增加傳輸時間，浪費不必要的帶寬和流量。我個人覺得，關注這些東西纔是學習做網站的核心技術，讓網站更有效率的展現。至於網站的前端呈現效果，其實技術性略弱些，當然給人的視覺體驗是有用的。我的看法是，作爲技術人員，更多的關注應該放在如何提高軟件效率上，前端的話可以多用些現成的模板框架（畢竟我們不是專業的設計人員）。
Step3: 第三步，前面花了很大篇幅介紹寫網站需要的“工具”，假如已經寫好了自己的網站，那下一步就是如何讓自己的網站上線，也就是能讓所有互聯網用戶訪問。這一步非常重要，但卻也相對簡單，我想很多人都像我當時一樣，更關注這一步究竟是怎麼做的。甚至於，在你只是僅僅寫了一個helloworld版的html文件時，就會想知道怎麼能把它放到網上讓其他人訪問？回答這個問題，我先給出一個簡易版的建議（也是我推薦的），再給出個更重量級一點的解決方案。 輕量級方案：（推薦） 利用SAE（Sina App Engine）即新浪雲計算平臺，在這上面可以部署小型的web應用和移動端應用，它完全起到了雲服務器的功能。而且，它採用的是按使用量付費的收費方式，比如註冊送500個雲豆，之後按網站訪問量而扣雲豆，用光了再去買。對於入門者來說，初級網站都不會有太大的訪問量，所以說根本不費錢。而且還可以通過實名認證或開發者資質申請獲得更多的雲豆贈送，以我個人的感覺基本和免費沒有區別。對於你的每個web應用（最多可放10個），SAE會分配給一個域名，雖然你可能不太喜歡，但畢竟是免費的吧。 如果你實在不喜歡它的域名就需要自己去買個域名。推薦去萬網，買個新的.com或.net域名69元首年/129元買兩年。買完域名後綁定到這個SAE上的應用即可，SAE很容易就學會如何操作。 重量級方案：（瞭解） 說它是重量級是因爲這種方案應該更適合訪問量較大的網站，比較常用的是租用阿里雲服務器，擁有自己的操作系統、硬盤空間、服務器軟件（一般式apache）、數據庫服務器（一般式mysql）、帶寬等，雖說是按需購買，但每年需要至少花掉1000元租用雲服務器。假如你的網站訪問量很小，那你就虧了，花錢租的資源卻得不到最大利用。因此，建議入門者使用SAE部署你的網站，待網站初具規模或者你已經是建站高手後再考慮租用更重量級的雲服務器。
全文總結： 以上三大步就是初學者入門建站必然要接觸到的東西，如果熟悉了其中的某些部分後可以直接跳過。希望這篇博文能給同樣有興趣學習建站的朋友以幫助，祝願早日進階。歡迎交流，本人也同樣仍在探索學習的道路上前進中。 |