Day3-網頁前端介紹

#網頁設計

pauline0001 2025-11-12 23:51:40 ‧ 260 瀏覽

分享至

一、什麼是前端
「前端」是網站中使用者能直接看到與互動的部分，也稱為「用戶端」。它的主要工作是：將後端提供的資料與邏輯，轉換成漂亮、互動性高、易於操作的畫面。前端是「網站的外觀與互動介面」，後端是「網站的邏輯與資料管理」。

二、前端的主要負責事項

功能項目	說明
網頁結構設計	使用 HTML 建立內容框架（標題、段落、圖片、表單等）
版面與樣式設計	使用 CSS 調整排版、字型、顏色、背景與動畫
互動與邏輯控制	使用 JavaScript 讓網頁有互動效果
響應式設計 (RWD)	讓網站在桌機、平板、手機上都有良好顯示效果
效能與使用者體驗 (UX/UI)	優化載入速度與介面一致性
與後端資料溝通	透過 API（如 RESTful / JSON）取得或傳送資料

三、前端常用開發工具
常見開發工具包含文字編輯器（VS Code）、版本控制（Git）、建構工具（Webpack、Vite）與 UI 框架（Bootstrap、Tailwind CSS）等。

四、前端主要語法介紹

HTML（HyperText Markup Language）：建立網頁結構與內容
CSS（Cascading Style Sheets）：控制外觀樣式、顏色、字型、排版
JavaScript：增加互動與邏輯，如表單驗證、事件控制、資料更新等

五、前端框架與函式庫

名稱	特點	適合用途
React.js	元件化、虛擬 DOM、由 Meta 開發	單頁應用程式 (SPA)
Vue.js	輕量、學習曲線低、雙向綁定	中小型網站
Angular	結構完整、使用 TypeScript	企業級應用
Bootstrap / Tailwind	快速設計、美觀介面	前端設計模板

六、前端開發流程簡介
• 設計階段：使用 Figma 或 Canva 規劃 UI/UX。
• HTML 架構：撰寫頁面內容與骨架。
• CSS 美化：設定版面、色彩與 RWD。
• JS 加入互動：控制動畫與 API 串接。
• 除錯與優化：使用 Chrome DevTools 測試。
• 部署上線：使用 Vercel、Netlify 等平台。