iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 2
0
Modern Web

無所不能的前+後端技術應用,一個小菜鳥的經驗談( ・`ω・´)系列 第 2

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

  • 分享至 

  • xImage
  •  

網頁的概述

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


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

登登!答錯!/images/emoticon/emoticon10.gif

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

我舉個例子給大家看看:

這是國外素材網....吧!

http://www.wloks.com/

Yes

影片中,我的滑鼠移動他圓環處的點點,背景上會有顏色上的變化等等....
他改變的,僅只於在他前端頁面上的處理而已,並沒有像後端請求資料!

有點抽象,但我們可以開啟chrome的〔檢視→開發人員選項→開發人員工具〕來驗證是否只是前端的頁面在做變化,我錄一段影片解釋給大家聽。

Yes

(抱歉~MAC的螢幕有點小....)/images/emoticon/emoticon02.gif

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

影片在[2:00]處,我打開body並觀察HTML的樣式變化(就是CSS有無被改變),[2:15]可看到我** 滑動頁面 **時,Elements視窗有紫色色塊出現提示標籤或者樣式出現變化,但此處的變化指我只是畫面在做變化,我並沒有向後端資料庫要資料改變
會這樣說,一定要有證據的!我也一併錄了影片解釋XD

影片在[4:14]處,我打開了Network視窗來觀察他有無做請求的動作~
** 答案在影片中揭曉,在我滑動頁面時,他沒有跑任何的請求動作! **

這表示了在我滑動頁面的這個動作,他只是一個在畫面做變化的靜態頁面而已!

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

文後-

~~ 明天要早點寫網誌!!! ~~/images/emoticon/emoticon20.gif

〔PM10:26補充:我想偷偷介紹一下我師父AMOS老師,他是前端界高手!如果有興趣可到csscoke看看師父的網站!他之前受邀iT邦舉辦的Modern Web 2016主講CSS3的應用喔!〕


同步連載於blogger-"King 學習前端之人生"
[ 著作權為 Ying-chi Tzeng所有,轉載請告知~]


上一篇
[day1]-前後端小菜鳥的30天發文規劃,但世事都會有變化的~
下一篇
[day3]-你了解你自己嗎?那你了解動與靜的網頁嗎-動態網頁篇
系列文
無所不能的前+後端技術應用,一個小菜鳥的經驗談( ・`ω・´)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
King Tzeng
iT邦新手 3 級 ‧ 2016-12-03 22:33:39

為啥我都沒把法顯示出刪除線呢QQ

~~ 刪除線 ~~

我要留言

立即登入留言