HTML5 · CSS3 · RWD 中國科大 視傳系 // 零基礎也能開始

> WEB_DESIGN.init()網頁設計

從看懂網頁,升級成 會寫 HTML 的設計師

從全無基礎開始,學會 HTML5、CSS3 的結構與樣式,用響應式設計(RWD)讓網站適應每一種螢幕,再用 jQuery 加上互動,最後做出能發布的 OnePage 網站。

0COURSE UNITS
0SEMESTER WEEKS
0LEARNING PHASES
0CORE TECH · HTML / CSS / JS
01 / About

循序漸進,從語法一路做到完整網站

《網頁設計》從全無基礎開始,逐步掌握網站開發的核心技能:先認識 HTML5 與 CSS3 的語法與結構,並透過實作練習熟悉應用。

接著延伸到響應式網頁設計(RWD),讓網站在不同裝置與螢幕尺寸都有好的體驗,再用 jQuery 強化動態效果。從 OnePage 單頁式網站到多頁專題網站,完成設計、排版、編碼到發布的完整流程。

// 拖拉看看:同一份網頁,在不同螢幕寬度的樣子 width: 760px · Desktop
MyOnePage關於作品聯絡☰

Hello, RWD.

版面會隨著螢幕寬度重新排列

card 1
card 2
card 3

@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, 1fr); } }

02 / Pipeline

五個節點,build 出你的第一個網站

點選節點,看看每個階段在學什麼。

03 / Project

同一個網站,期中提案、期末發表

整學期圍繞一個 OnePage 專題。期中交的是「想清楚要做什麼」的企劃;期末交的是「真的做出來」的網站。

web06.html

OnePage 網站企劃提案

確定主題、目標對象與版面規劃,在課堂上說清楚你要做什麼網站。

  • 主題與內容企劃網站目的、目標對象、內容架構
  • OnePage 版面規劃區塊順序、視覺風格與色彩
  • 課堂提案發表說明構想並接受回饋
HTML5CSS3OnePage
final.html

成果發表:把企劃做成真的網站

運用 RWD、jQuery 與字型處理,完成可發布的 OnePage 網站並上台發表。

  • RWD 響應式網站手機、平板、桌機都能正常瀏覽
  • 互動效果jQuery 動態效果與圖示字體
  • 期末成果發表現場展示並說明設計思考
RWDjQueryAI 輔助
04 / Course Map

《網頁設計》課程規劃

由基本語法與切版學起,到能在各種裝置良好呈現的網站。依階段篩選、搜尋,或切換成清單檢視。

05 / Homework

作業專區:兩個關鍵作業

// MIDTERM · 期中作業

期中提案

期中提案|OnePage 提案|網站企劃,在課堂上發表你的構想。

// FINAL · 期末作業

期末成果發表

[期末報告]OnePage 期末成果發表,展示完成的網站。

06 / Resources

延伸學習資源

// Ready?

先把語法學扎實,
再把網站做到能發布。

從 HTML、CSS 到 RWD 與 jQuery,一步一步做出你的第一個完整網站。git commit -m "my first site"