活動花絮

日期:2019-11-27

點閱:175

參考檔案:

CSS與SCSS開發應用

SDGs:
組員們進行網站操作
組員們進行網站操作
本次課程介紹「Dom Tree」的概念,了解網站的疊層具有層級關係,然而單看程式碼難以得知,Dom Tree則可透過圖像化將每個網頁標籤的層級顯示出來,協助工程師理解標籤的父子、兄弟關係,以便在操作CSS和JS時理解瀏覽器的編譯。介紹CSS選擇器的概念,撰寫上可指定不同種類的(如奇、偶數同階層的標籤)CSS進行修改。同時教導學員們使用「偽元素」來指定該標籤下的第n個子元素,讓我們認識在撰寫網站時,不需要在html撰寫任何標籤,單純寫CSS就可以填入圖片、文字。
課堂中進行實戰演練,透過實務的測驗,讓學生更能理解選擇器與偽元素的使用。講師亦指導「SCSS」的編寫方式,能夠促使一般網站的程式碼不被輕易讀取,並介紹RWD響應式網站的寫法,讓學生認識斷點與瀏覽器寬度的關係,以符合當今網站因應行動裝置載具的演進所產生的改變。
業師教導CSS選擇器
業師教導CSS選擇器
業師解說課程
業師解說課程
業師協助組員撰寫CSS
業師協助組員撰寫CSS
組員間相互討論指導
組員間相互討論指導
組員們認真聽課
組員們認真聽課

計畫別:課程教學開創新局--課程活絡多元適性

發佈單位:資傳系

上一則:化學遊樂趣 雲林縣 林內國中
下一則:校園與社區服務學習課程地方創生專題活動:菁桐捨石山