靜態網頁&動態網頁

【靜態網頁】與【動態網頁】是什麼?靜態與動態的差異|天矽科技網頁設計

【靜態網頁】與【動態網頁】是什麼?靜態與動態的差異|天矽科技網頁設計

 

目錄
靜態網頁
動態網頁
靜態網頁與動態網頁

 

網頁分成「靜態」與「動態」兩種類型,用我們天矽的方式來說,靜態網頁就是美工頁、動態網頁就是程式頁。有人可能會認為,網站有動畫、會動就叫做動態網頁,不會動就是靜態網頁,但事實上不是這樣的。

 

靜態網頁


 靜態網頁,就是我們天矽科技說的「美工頁面」,指的「是沒有後台」的網站頁面,頁面單純使用HTML、CSS與JavaScript組成,它不必跟後端資料庫請求資料,通常這類型的頁面屬於「不太需要經常修改」的頁面,如形象頁面、公司簡介、活動頁面…等等的展示型頁面,像我們常看到的一頁式網站就屬於這種類型,若非一頁式網站也一樣會有這類型的頁面,如下方GCTF網站、關於GCTF單元中的參與國家,就屬於此類型。

 

靜態網頁

GCTF- 關於GCTF/參與國家

※ 注意,若畫面中有Gif動畫、嵌入的影片、文字效果、圖片效果…等「視覺動態效果」,它一樣不是動態頁面喔!

 

靜態網頁優點

 靜態網頁,由於它不必經常跟後端資料庫請求資料,因此它不需要太強的主機就可以運行,並且開啟速度較快,還可以在畫面上做較多的設計。

 開啟速度快可提升SEO搜尋排名的分數,而畫面設計的部分,若網站畫面擁有豐富的設計,可針對產品、服務或文字加以美化或裝飾,可提升使用者、消費者及閱讀者的興趣與注意力,更可提升企業之形象與欲傳達之意涵及概念。

 

靜態網頁缺點

 靜態網頁的缺點就是由於更新內容較為麻煩,因此它不能經常的進行更新,若有需要更改,就只能從原始碼上進行修改。

 除此之外,靜態網頁也缺乏互動性,不能在網站上留言、搜索…等互動,除非在網站內加入外掛插件,如Facebook Messenger這類型的即時聊天外掛,才能提升靜態網頁的互動性。

 

動態網頁


 動態網頁,就是我們天矽科技說的「程式頁面」,指的是「有後台」的網站頁面,你可以到後台去新增、編輯或修改前台的資料,它可允許使用者根據需求取得網站資料庫的資料內容並與網站進行互動,如線上論壇、電商網站、會員功能、購物車、搜尋、檢索…等,都屬於動態網頁的範疇,像是部落格、最新消息這類常見的單元,就是動態網頁。
 

動態網頁

GCTF- 新聞

 

 這類型的網站頁面,不論是對網站管理者還是使用者來說,都能有較佳的使用體驗。網站管理者可透過後台快速且輕鬆的新增、刪除或修改前台的內容;而使用者更可透過程式功能快速的查找自己想要尋找的資訊。

 

動態網頁

▲ 天矽官網後台

 

動態網頁

唯聖電子產品項目搜尋

 

動態網頁優點

 動態網頁,由於它屬於程式功能的頁面,因此它可以根據需求,在互動、檢索或各種功能類型上進行規劃,比如在使用端的線上訂票、購物、標籤查詢、型號檢索…等,或網站管理端的後台上架、編輯或修改資料…等,都能提升這個網站的作用性與實用性,除此之外,還能增加使用者與網站之間的互動性,讓使用者在這個網站上停留更久、降低跳出率。

 

動態網頁缺點

 動態網頁的程式與運算機制一定會比靜態網頁還要來的多,它是一個可以體現專業的頁面,而為了讓資訊正確且正常的顯示在前台畫面上,動態頁面的製作在處理、溝通與建構上,會更加的需要付出更多時間與成本

 

靜態網頁與動態網頁


 一個網站可同時存在靜態與動態頁面,兩者各有優缺點,網站可依照需求選擇適合的表現方式製作,才能讓網站為企業形象、產品或服務加分!比如靜態網頁就適合用在比較不需要經常更新的頁面,動態網站則適合用在產品較多、資料較大、需要經常且快速更新的頁面,讓網站管理者可以更好的去維護與管理網站。

 下方為靜態網頁與動態網頁的比較表,有需要可以參考。

  靜態網頁 動態網頁
後端管理系統 沒有後台 有後台
適合對象
  • 不需要經常更新的頁面
  • 需要大量美術示意的畫面
  • 單純的形象官網
  • 需要頻繁更新上資料的頁面
  • 產品數量多與資料龐大的網站
  • 提供複雜的查詢與檢索功能
頁面範例 公司簡介、形象頁面、文字頁面…等 電子商務網站、大型網站、新聞部落格、互動式平台…等

 

share FB LINE
看天矽作品集 回上一頁
ID:@323foylw