[練習課程] JavaScript 實作(一):全版面廣告與 Cookie 紀錄
本篇介紹如何在一個網站能展現出全版面視窗廣告,同時而外的進階利用 cookie 去分析多久內不再出現廣告避免用戶嫌棄。在那之前你需要準備一張任一圖片(可參考蝦皮購物)
本篇介紹如何在一個網站能展現出全版面視窗廣告,同時而外的進階利用 cookie 去分析多久內不再出現廣告避免用戶嫌棄。在那之前你需要準備一張任一圖片(可參考蝦皮購物)
本篇將深入介紹 JavaScript 中最重要的兩個概念:BOM(Browser Object Model,瀏覽器物件模型)與 DOM(Document Object Model,文件物件模型)。這兩個模型是 JavaScript 與網頁互動的基礎,掌握它們將讓您能夠動態控制網頁內容和瀏覽器行為。
本篇將整合過去基本課程 HTML, CSS, Bootstrap, JS 相關知識進行經驗整合,動手設計簡單一頁式且具備 RWD 之網站設計。由於考量部分學員尚未接觸 JS 課程進度與基礎認知,將集中最後小節於完成後補充。
本章節的 Components 元件算是資訊量很大的單元,但也不用特別去背,只要知道有哪些功能可以選(複製貼上大法)加以利用去點綴你的網頁即可。
本章節分為兩節介紹分別是 Content 內容與 Utilities 通用。這些都比較偏向基礎或常用的 class 公式使用度偏高。完整學習這些後,靜態設計 Bootstrap 就算學的七八成了(可以出門騙吃騙吃)。
本系列根據教材課程需要進行 Bootstrap 套件的教學文章,在接觸 Bootstrap 之前需要擁有一定的 HTML5/CSS3 觀念,才能理解 Bootstrap 的原理應用以及調整技巧,如果你另具備了 JS/JQ 的開發能力,那更方便進一步的使用並控制這些 Bootstrap 套件工具。筆者這裡 Boostrap 的系列文章都來自官方本身提供的 Document 教學資料重新進行重新解析與翻譯重組解釋(也包含閹割一些覺得非必要的資訊),如果你擁有有足夠的能力可直接閱讀官方手冊並動手實作就不需要特地參閱已整理過的中文 BS 教學,動手跟著官方文件做操作練習才是最佳的經驗累積。
本篇一開始會介紹基本安裝環境,接著先介紹核心的版面規劃(將牽扯到 Grid 與 flexbox)。
CSS 的最後一篇基本課程,收錄一些偏於動態或視覺效果的 CSS 屬性,也提及到 CSS 動畫與轉場的動態播放,以及跨平台十分重要的 Media Query 媒體查詢。這些都算是能讓 CSS 更生動豐富且靈活,使網頁體驗上更有感受。
本篇將深入探討現代 CSS 布局技術,從傳統的 Float 開始,重點介紹目前主流的 FlexBox 和 CSS Grid 技術。您將學會如何選擇適合的布局方法,掌握一維和二維布局的核心概念,並能夠設計出現代化的響應式網頁布局。