WEBSITE

WEBSIDE的架構

網站是現代人傳播與了解資訊的重要管道,其中有超過40%的網頁都是由wordpress做的

精選圖 min 8 1000x625

網域的結構

thumb e881b43c213a770abac2fae852ff2b66

website的結構圖

different website structure example

網站的前端程式

1. HTML

網站的支架、主幹

2. CSS

網站的美編、裝飾

3. JavaScript

掛載在元素上的腳本,負責與使用者互動,處理使用者的輸入並按照設定的程式邏輯來改變元素狀態

LAMP

1. Linux

網站的基底與運作環境

2. Apache

這是網站的接待員。當訪客在瀏覽器輸入網址時,Apache 負責接收這個請求,然後去主機裡把對應的網頁檔案找出來,打包送回給訪客的瀏覽器顯示。

3. MySQL

這是網站的記憶庫、資料庫。網站的元素、排版、設定、程式碼、文字全都記錄在這裡

3. PHP

網站的後端程式,是網站的運作核心,整個網站的系統就是由PHP寫成的

WordPress

介紹

Gemini 說了 WordPress 簡單來說,是目前全世界最普及的網站內容管理系統(CMS, Content Management System),全球有超過 40% 的網站都是用它架設的。

套版

wordpress裡有無數的網頁模板可以供使用者套用,做網站可以是直接套用既有的wordpress模板來做網站,也可以把wordpress模板再繼續優化成更適合專案的模板,甚至也有人自己製作模板

Elementor

wordpress附有無數的外掛功能幫助使用者更方便製作網站,其中最常用的外掛功能是Elementor,Elementor是wordpress中最主流的頁面編輯器,可以讓使用者快速編輯網站的頁面與插入各種網頁元素,還提供了比wordpress更加細緻的模板選擇

QA一問一答

每個國家的網站都會使用自己國家專有的網域名稱,只有美國沒有,為什麼呢?

美國是網際網路的創造者,剛被發明出來時,網路上幾乎只有美國的機構,其他國家是之後才陸續開始使用網際網路的,為了區分不同國家的網址,才開始有國家專屬網域名稱,而此時美國早已有無數個沒有國家專屬網域名稱的網址了,且轉換網址需要極大的成本和重新適應。

  • 完全擁有主控權: 相比於痞客邦或 Wix 這種租用平台,WordPress 的網站檔案和資料庫(也就是你剛才認識的 LAMP 環境)完全掌握在你手裡。

  • 無程式碼(No-Code)到高度客製化: 新手可以只靠拖拉點拽(像 Elementor)完成精美網頁;而有程式基礎的人,也能直接進去改寫 CSS、JavaScript 或 PHP,彈性極大。

  • SEO 非常友善: 它的底層架構非常符合搜尋引擎的爬蟲規則,這也是為什麼很多做數位行銷或內容 SEO 的人都指定用它。

1. 拖曳式排版 (Drag & Drop)

左側面板提供了幾十種現成的 UI 元件(類似預製物件 Prefabs),包含標題、圖片、按鈕、影片、輪播圖,甚至是進度條。你只需要把它們「拖拉」到右邊的畫布上就能完成排版,不需要寫任何 HTML 語法。

2. 所見即所得 (WYSIWYG)

你在後台編輯器裡看到的排版長相、間距大小,就是網頁發布後訪客看到的實際模樣。不需要反覆存檔、編譯或切換到前台預覽。

3. 參數化的樣式微調

當你點擊畫布上的任何一個元件,左側面板就會變成它的「屬性控制器」。在這裡你可以:

  • 內容 (Content):改文字、換圖片、設定超連結(例如我們前面提到的錨點網址)。

  • 樣式 (Style):調顏色、改字體大小、設定邊框與陰影。

  • 進階 (Advanced):設定元件的內外間距(Padding/Margin)、進場動畫,或是設定專屬的 CSS ID。

4. 響應式裝置編輯 (Responsive Editing)

現在大家都在用手機上網,Elementor 內建了裝置切換功能。你可以一鍵切換成「手機視角」,並單獨為手機版調整字體大小、UI 縮放比例,或甚至設定某些區塊「只在電腦版顯示,手機版隱藏」。

5. 主題建構器 (Theme Builder – Pro 版進階功能)

如果你升級到付費版,它就不只能做單一頁面了。你可以用它來設計全站共用的「公版UI」,例如網站頂部的導覽列(Header)、底部的頁尾(Footer),或是自訂部落格文章的統一排版格式。

返回頂端