《WEB前端程序設計》“課程思政”教學案例課程名稱WEB前端程序設計授課對象大二本科生課程類型考查課課程總學時64教材信息Web前端開發任務驅動式教程（HTML5+CSS3+JavaScript一、課程簡介本課程面向數據科學與大數據技術專業的大二學生，通過本課程的學習，可以使學生了解網站設計開發的基本方法和識記基本的概念，對網站前端開發和靜態網頁開發技術有全面深入的學習，并能夠獨立開發具有一定難度的Web網站，為學生進一步學習動態網頁設計打下良好的基礎。本課程教學注重學生團隊精神培養，能與人良好溝通交流，以團隊合作完成Web網站建設項目；注重學生自我控制素質培養，能主動深入學習最新Web開發技術，能不斷探索新知識、新領域。二、課程挖掘的思政資源分析堅持立德樹人的根本任務，注重“術道結合”，在教學設計中課程思政注重從以下面方面進行設計：（1）通過軟件行業發展前景，引發學生對未來的職業愿景，培養學生誠實、守信、堅忍不拔的性格，提高學生在溝通表達、自我學習和團隊協作能力；（2）了解計算機軟件從業人員應當具備的職業道德守則，為進軍軟件行業做準備，努力提高自己的技能，為社會和人民造福；（3）在課程內容和案例選擇、教師示范和案例分析等角度深入挖掘思政內容和課程內容的結合點，將思想教育融于知識傳授中，細化為對具體內容的要求，提升課程融合能力；（4）思政元素加在每個章節的案例設計部分，通過案例教學，充分挖掘案例中蘊含的思政元素，在潛移默化中加強學生思想政治教育，提升學生學習實效性及針對性，達到潤物無聲的效果，真正實現立德樹人的根本目的，通過案例的引入，將思政教育融入課堂教學的全過程。三、案例課信息教學目標.價值目標：系統進行法治教育、勞動教育、心理健康教育、中華優秀傳統文化教育，堅定學生理想信念，切實提升立德樹人的成效。.知識目標：盒子模型介紹；元素的浮動；元素的定位；.能力目標：培養學生發現問題、分析問題、解決問題，既注重理論又注重實踐，理實相結合的能力。教學內容課堂設計思路：以課程思政設計理念為基礎，結合積極教學法，以學生為中心，發揮學生的主觀能動性，激發學生愛國熱情，將知識點與紅色主題結合，達到潤物細無聲的效果。1.教學過程（1）知識點介紹1）盒子模型概念CSS將HTML頁面中的每一個元素看成是一個矩形盒子，占據一定的頁面空間。一個HTML頁面由很多這樣的盒子組成，這些盒子之間會相互影響，因此網頁布局主要是掌握：一個獨立的盒子的內部結構；多個盒子之間的相互關系。2）盒子模型使用標記來表示。課堂組織實施與一個獨立的盒子模型由Content（內容）、border（邊框）、padding（內邊距）和margin（外邊距）這4部分組成。（2）盒子模型一一元素的定位元素的定位：可以精確定義一個元素的準確位置1）定位模式：Position屬性static：靜態定位relative：相對定位absolute：絕對定位fixed：固定定位2）邊偏移：left：左側偏移量right：右側偏移量top：頂端偏移量bottom：底部偏移量3）靜態定位（static）：網頁元素默認的定位方式，元素按照標準流進行布局。不能通過設置邊偏移屬性left、right、top、bottom值來改變元素的位置。相對定位（relative）：網頁元素相對于其在原文檔流的位置進行定位，當元素設置為相對定位“position:relative;"該元素就會相對于其自身的默認位置進行偏移，但是它在文檔流中的位置仍然保留。絕對定位（absolute）：將元素相對于距離其最近的、已經定位（相對、絕對或固定定位）的父元素進行定位，若所有父元素都沒有定位，則依據body根元素（瀏覽器窗口）進行定位。當元素設置為絕對定位“position:absolute;"該元素就會相對于其父元素或body根元素進行偏移，脫離文檔流，它在文檔流中的位置將被其他元素占據。固定定位（fixed）：相對于瀏覽器窗口進行定位。元素設置為固定定位之后，就會脫離原來的文檔流進行定位，原有的位置將被其他元素占據。無論瀏覽器窗口大小如何改變，瀏覽器滾動條如何拖動，固定定位的元素都將顯示在瀏覽器的固定位置。）旋轉divtransform:rotate（角度）；）使用元素的定位和浮動繪制圖形；.教學方法從以上的教學理念可以看出，本課堂充分發揮學生的作用，以學生為中心，充分調動學生學習積極性，采用積極教學法為主要方法，翻轉課堂、項目式教學等方法輔助完成授課。授課過程中，突出學生學習目標，本節課完成后需要學生對照學習目標進行學習結果檢測，并使用思維導圖對本節課學習內容進行總結。.教學活動設計采用積極教學法，教學活動主要包括：有導向的點名提問、改良版的頭腦風暴、任務單的制作、多種教學評價方式共存。.課程思政理念及分析（1）通過軟件行業發展前景，引發學生對未來的職業愿景，培養學生誠實、守信、堅忍不拔的性格，提高學生在溝通表達、自我學習和團隊協作能力；（2）了解計算機軟件從業人員應當具備的職業道德守則，為進軍軟件行業做準備，努力提高自己的技能，為社會和人民造福；（3）在課程內容和案例選擇、教師示范和案例分析等角度深入挖掘思政內容和課程內容的結合點，將思想教育融于知識傳授中，細化為對具體內容的要求，提升課程融合能力；（4）思政元素加在每個章節的案例設計部分，通過案例教學，充分挖掘案例中蘊含的思政元素，在潛移默化中加強學生思想政治教育，提升學生學習實效性及針對性，達到潤物無聲的效果，真正實現立德樹人的根本目的，通過案例的引入，將思政教育融入課堂教學的全過程。在以學生為中心的OBE的教學理念引領下，課程思政設計理念和積極教學法等較成熟的教學方法的指導下，完成了對本節課程的教學。教學效果良好，也很好的調動了學生的學習積極性。但在教教學效果學過程中也發