## 動機與目的 在開始接觸完全陌生的領域之前，我認為要先清楚了解自己學習的原因及目的是非常重要的，這有助於維持我不斷學習的動力。 以下是我思考了一些問題後所得到的回答 :::info 為何要學習網頁設計 ::: 首先，網站最明顯的特性就是 **「低瀏覽門檻」**，只要能上網基本上就可瀏覽網站，無須另外註冊或下載程式，並且能夠突破跨時間與空間的限制，也就是說，在現在科技發達與網路普及的時代，網站即為**最基本的網路應用**，來自世界各地的人能輕易地檢視網站以查看其中內容，讓更多人有認識自己的機會。 然而，除了網站外，其實還有許多能向外傳遞訊息的方式，其中社群媒體亦為常見的管道之一，因此我更進一步思考網站的重要性 ---**「形象建立」及「凸顯個人專業能力」**，它可以更完整地呈現「我是誰」、「我在做甚麼」。 相比之下，雖然我們也能藉由社群以文字說明欲向外傳達之訊息，但在資訊氾濫的時代，要讓他人花時間閱讀大量文字實在是不太可能，而網站除了文字外，我們還可加入圖片、影片並營造獨特風格與使用者互動，能夠創造出更加活潑與有趣的體驗，同時具備易於閱讀的特性，整體來說，可以讓人**更容易對個人或品牌留下深刻印象**。 而網站內容包含哪些呢？可以是品牌介紹、企業訊息、商品行銷、個人檔案與作品集等，網站就等同於**自己的行銷基地**，學會網頁設計後，能夠有彈性地掌控網站建置。 此外，由於我**喜歡視覺上的設計**，因此選擇學習前端，透過網頁設計能夠**發揮自己的創意和展現獨有風格**。 :::info 我能如何應用所學 ::: 了解網頁設計的基本常識、架構與應用後，我期許自己未來能夠建置一個 **「個人作品集網站」** 記錄我的學習作品，除了與電機領域相關的成果外，也可以包含自己的日常興趣。 ## 教學資源 起初想以免費資源為主，但在蒐集網路資料後，發現大部分網頁設計的免費資源有限，衡量能力與需求後，決定使用hahow網站的付費課程學習網頁設計，對我來說，它的課程可能較為完整且適合新手入門，而JavaScript的學習資源相對較多，因此在ewant上找了免費課程來上上看。 - 課程 1. [hahow - 動畫互動網頁程式入門 (HTML/CSS/JS)](https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions) 2. [hahow - 使用 HTML、CSS 開發一個網站](https://hahow.in/courses/5f0eba11f6768b72b22b0dc9/discussions) 3. [ewant - FM-Java程式開發](https://cou07.ewant.org/blocks/course_menu/information.php?id=346) - 參考資料 1. [程式新手想入門網頁設計？網頁前端 4 大精選線上課，快速找到自學路！](https://hahow.in/contents/articles/60d5c078638ed0a3488fabe9?mts_s=google-ads&mts_m=dynamic-search-summersale&mts_c=pfg_summersale&mts_t=gad&gclid=CjwKCAjwkeqkBhAnEiwA5U-uMx3DQsKgUfHNx6CyPo6_ZUsMU5QZLSVAvy2M1SCHM3vsZlIxEPFL_hoCP3kQAvD_BwE&rc=2) 2. [告訴你5個理由，為什麼需要建置網站。](https://mymkc.com/article/content/22549) 3. [網頁設計教學課程推薦，完整前端自學資源分享](https://deanlife.blog/web-design-learning-resources/) ## 基本認識 :::success 架設網站的三大要素：HTML、CSS、JavaScript ::: - HTML (HyperText Markup Language，超文本標記語言) 1. 一種網頁語言/標記語言 2. 建構網站的主要基石 3. 與XML同樣衍生於SGML(Standard Generalized Markup Language，標準通用標記式語言) > XML可以被認為是它的一個子集，而HTML是它的一個應用。 > ([SGML維基百科](https://zh.wikipedia.org/zh-tw/SGML)) - CSS (Cascading Style Sheets，階層式樣式表) 1. 一種電腦語言/樣式規則的語言 2. 指定結構化文件（HTML、XML、SVG...）的呈現方式，例如添加樣式、定義它們的布局等 3. 由W3C(World Wide Web Consortium，全球資訊網協會，全球資訊網的主要國際標準組織)定義與維護 - JavaScript 1. 一種程式語言/腳本語言 2. 能為網站實現較為複雜的動態功能 3. 與Java在名字和語法上很相似，但其實從設計之初就有頗大的差異 4. 和C語言的語法結構相似（if條件語句、switch語句、while迴圈等） > 簡單來說，HTML 決定了網頁的『架構』、CSS 形成網頁『樣式』，最後 JavaScript 讓網頁動起來(像是畫面淡入、文字淡出等)、讓網頁與使用者互動(例如，點擊按鈕跳出視窗、輸入文字等)。 ([網站開發新手必知 - 什麼是 HTML / CSS / JavaScript](https://5xruby.tw/posts/what-is-html-css-javascript) ) ## 其他參考資料 1. [認識網頁設計 - 網頁設計基礎文章](https://www.newscan.com.tw/all-faq/faq-detail-3.htm) 2. [CSS 是什麼？](https://developer.mozilla.org/zh-TW/docs/Learn/CSS/First_steps/What_is_CSS) 3. [HTML維基百科](https://zh.wikipedia.org/zh-tw/HTML) 4. [CSS維基百科](https://zh.wikipedia.org/zh-tw/CSS) 5. [JavaScript維基百科](https://zh.wikipedia.org/zh-tw/JavaScript) 6. [JavaScript 是什麼?](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript)