[day2]-你了解你自己嗎？那你了解動與靜的網頁嗎-靜態網頁篇

[day2]-你了解你自己嗎？那你了解動與靜的網頁嗎-靜態網頁篇

  12/03/2016    King Tzeng

---

網頁的概述

在實作網頁之前，先來搞懂動態網頁和靜態網頁的差別吧！

---------------------------------------------------------------------------------------------- 

小妹我之前在資策會修行時，一開始學了Html＋CSS3，記得那時我的師父教我們寫CSS3動畫，而且是學超酷的3D動畫（沒錯！就是用CSS3寫立方體！），純真的我那時候以為網頁有動畫畫面不就是動態頁面嗎？

登登！答錯！

沒有與服務端請求資料的網頁，只能稱是靜態的頁面！
舉例說：形象網站、活動網站，這些通常需要大量的頁面效果吸引人注意，而不必與服務端請求資料做立即的回應，簡單來說就是沒有像後端資料庫要資料！

我舉個例子給大家看看：

這是國外素材網....吧！
http://www.wloks.com/

影片中，我的滑鼠移動他圓環處的點點，背景上會有顏色上的變化等等....
他改變的，僅只於在他前端頁面上的處理而已，並沒有像後端請求資料！
有點抽象，但我們可以開啟chrome的〔檢視→開發人員選項→開發人員工具〕來驗證是否只是前端的頁面在做變化，我錄一段影片解釋給大家聽。

（抱歉～MAC的螢幕有點小....）

可以看到影片中，我開啟了chrome的檢查，並點選Elements項目，這個項目可以讓你直接看到網頁吃到的HTML架構與CSS3的樣式，頁面效果的變化也可以從此看起，就像你看不到電壓訊號，要靠示波器看一樣！（好離題且更難懂的解釋XD....我讀工科的啦~）
（為啥要說吃到的，明日會解釋！）

影片在[2:00]處，我打開body並觀察HTML的樣式變化（就是CSS有無被改變），[2:15]可看到我滑動頁面時，Elements視窗有紫色色塊出現提示標籤或者樣式出現變化，但此處的變化指我只是畫面在做變化，我並沒有向後端資料庫要資料改變！會這樣說，一定要有證據的！我也一併錄了影片解釋XD
影片在[4:14]處，我打開了Network視窗來觀察他有無做請求的動作～答案在影片中揭曉，在我滑動頁面時，他沒有跑任何的請求動作！
這表示了在我滑動頁面的這個動作，他只是一個在畫面做變化的靜態頁面而已！

還是不懂嗎？或是還是很抽象，因為今天離發文時間還剩兩小時而已，所以有些東西與何謂動態頁面明日再來解釋吧！抱歉今天有點趕XD（被打.....

文後-

明天要早點寫網誌！！！

----------------------------------------------------------------------------------------同步連載於"iT邦幫忙"鐵人賽活動系列文章[ 著作權為 Ying-chi Tzeng所有，轉載請告知～]