《Web前端實戰高級教程》從Web開發實際應用的角度,結合響應式web網頁和手機端實戰項目實例的演示,講解HTML5、CSS3、響應式設計等新技術,并通過Bootstrap工具開發來整合HTML5、CSS3和響應式開發的知識,進行快捷開發。通過本套課程的學習,讓你快速了解響應式布局的原理與概念,并能獨立完成一個整站的搭建到上線的具體流程與操作。
響應式布局:用戶瀏覽網頁的設備越來越復雜,以前我們做設計只針對大屏幕電腦,現在已經不太合適了,因為移動端智能設備的普及與發展。響應式Web設計就是隨著移動互聯網的發展孕育而生的重要技術,其核心思想是制作一個網站可供多種不同終端同時使用。
Bootstrap開發工具: Bootstrap是一種簡潔、直觀、強悍的Web前端開發框架,它包含了HTML、CSS、Javascript以及jQuery的,各種元素、組件和插件,主要用于開發響應式布局頁面和移動設備優先的Web項目。
第一章 HTML5+CSS3新技能
|
本節課主要介紹HTML5的概念和新增特性,以及通過HTML5+CSS3到底能做什么。 |
本節課主要介紹HTML5新增的常用布局標簽,了解HTML5的語法和格式,以及在結構上有哪些優化。 |
本小節主要介紹audio和video標簽的用法,教你如何通過視頻和音頻向頁面中插入信息。 |
本小節了解視頻標簽和音頻標簽的用法,能夠通過視頻和音頻向頁面中插入信息。 |
本小節結合上節知識,教你掌握如何引入視頻并將其作為背景圖的應用方法。 |
本節課主要介紹html5新增的表單控件和屬性。 |
本小節主要介紹canvas畫布的用法,通過本節課的學習,了解canvas的用于以及應用場景。 |
本節課介紹SVG圖形的使用和運用場景,了解SVG圖形能實現哪些效果。 |
第二章 CSS3新特性
|
本小節主要教大家認識CSS3,了解CSS3可以完成哪些工作,哪些是CSS3最擅長的方面。 |
本小節主要介紹border-radius圓角屬性的用法,以及圓角屬性的應用場景。 |
本小節主要介紹Box-shadow屬性,并通過實際的小案例,來介紹陰影的用法,通過陰影能完成哪些效果。 |
本小節主要介紹常規邊框和邊框圖片的對比,及邊框圖片的應用,通過實際小案例了解邊框圖片在項目中的重要意義。 |
本小節主要了解background在CSS3中新增了哪些應用,background的新增值能夠完成哪些應用。 |
本節課主要教你認識網頁中常見的十六進制顏色表示方式、英文表示方式、三原色表示方式以及三原色配合透明度的概念。 |
本小節主要介紹CSS3字體陰影的用法,了解CSS3新增字體的意義,通過實際案例在項目中插入自定義字體。 |
本節課主要基于自定義字體的基礎上講解圖標字體的概念和具體操作。 |
第三章 CSS3的高級應用
|
本小節主要介紹子集選擇器的用法,以及各種不同類型的子集選擇器的作用,通過實際的小案例了解子集選擇器的優勢。 |
本小節主要介紹常用偽類選擇器的用法,包括::selection選擇器、::before和::after偽類選擇器的使用。 |
本小節主要介紹transition的作用與用途,了解transition在項目中存在的重要意義。 |
本小節主要介紹.translate位移、rotate選擇、scale縮放、skew傾斜、transform-origin命令,學習CSS3的2D轉換的各種不同類型的操作,能通過2D轉換操作復雜的結果。 |
本小節主要介紹3D場景搭建與應用,常見的幾種3D功能函數,了解最新項目中3D轉換的作用,并且可以通過3D轉換操作項目案例。 |
本小節主要介紹animation動畫屬性和用法,了解animation的作用與用途。通過CSS3,我們能夠創建動畫,并且在許多網頁中取代動畫圖片、Flash動畫以及JavaScript。 |
本節課主要綜合本章所學知識,模擬360瀏覽器雷達動畫實例,加強對定位和JS事件的使用。 |
CSS3漸變可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡,本節課主要介紹CSS3漸變色及多重動畫的應用,掌握線性漸變的屬性和參數。 |
第四章 響應式布局
|
本章主要講解響應式布局的意義,了解響應式布局的重要作用,能夠通過媒體查詢原生的做出一套響應式網站,本小節主要介紹響應式布局的概念。 |
本小節主要講解響應式布局原理,了解如果通過bootstrap全局CSS樣式,在less文件中使用媒體查詢來創建關鍵的分界點閾值。 |
本小節主要介紹響應式圖片的使用,用戶代理根據輸出設備的分辨率不同加載不同類型的圖片,同時在改變輸出設備類型或分辨率時,能及時加載對應類型的圖片。 |
從本節課開始主要演示Bootstrap中文網的開發,本小節主要完成該網頁頭部的創建與布局。 |
本節課繼續演示Bootstrap中文網的開發,本節課主要完成PC端主體內容模塊的布局。 |
本節課主要完成Bootstrap網頁在手機端、平板、不同媒介下的響應式布局。 |
本小節主要講解響應式布局下,不同分辨率和設備下,折疊菜單按鈕特效的實現。 |
第五章 力豪斯健身網站開發
|
本章主要對以上所學知識進行鞏固,從項目前期規劃,到網站響應式調試,了解整站開發流程,本小節主要完成項目分析及頁面頭部的搭建。 |
本小節主要教大家使用Swiper插件完成海報輪播區的制作。 |
本小節主要介紹功能劃分模塊的CSS3特效的應用。 |
本小節主要講解關于我們模塊的搭建及公共樣式的修改技巧。 |
本小節主要運用CSS3知識和Swiper插件完成熱門課程的網絡輪播特效。 |
本節課主要對頭部和輪播海波部分進行檢查和細節調整,并完成新聞模塊的制作。 |
本小節主要詳細演示力豪斯網站廣告模塊和底部區域布局的搭建。 |
本小節主要講解手機端頭部導航特效的響應式布局。 |
本小節主要講解網頁首頁輪播海報響應式布局的搭建,解決圖片顯示不全的問題,完成手機端的完整調試。 |
本小節主要調整首頁在不同設備下的相應布局,完成網頁在pc端和移動端下的響應。 |
本小節繼續完成網站內頁的搭建與響應式布局,以及內頁與首頁公共樣式的互通。 |
本節課主要詳細講解內頁在不同設備下的響應,以及上線調試。 |
第六章 勤學網手機端網站項目
|
本章主要完整的介紹一個手機端項目的完全制作過程,從效果圖的分析到拆分到最后上線調試。本小節主要講解彈性盒模型及rem單位的應用。 |
本節課主要講解網站布局如何通過JS取得不同設備下的響應的相關知識,并完成勤學網手機端頭部的搭建。 |
本小節主要演示首頁輪播海報以及課程分類彈性盒模型的布局。 |
本小節主要講解網頁列表的布局,介紹如何通過創建公共樣式來搭建網頁布局。 |
本小節主要講解如何實現當前網頁高亮顯示的固定導航的創建。 |
本節課主要詳細講解如何通過選項卡完成課程分類頁面展示 |
本小節主要分析個人中心頁面,并完成個人中心的頁面網頁布局。 |
本小節重點介紹如何通過Ajax實時調取mysql數據庫中的動態數據。 |
本節課主要介紹如何把我們制作的企業站、響應式布局網站、手機端上線的具體流程,包括域名的挑選與購買,選擇合適的主機,域名解析與主機綁定,以及源碼上傳調試的相關知識。 |