當前位置︰平面設計學院 > WEB前端實戰高級教程
 

1870次 1條 6次
講師︰韓文強
課級︰高級拓展
時長︰23.7小時
單價︰¥650元 助學價︰¥320元
年會員︰¥1800元/年 今日促銷:¥399元 平面設計學院所有教程免費學
分享到︰

《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數據庫中的動態數據。

本節課主要介紹如何把我們制作的企業站、響應式布局網站、手機端上線的具體流程,包括域名的挑選與購買,選擇合適的主機,域名解析與主機綁定,以及源碼上傳調試的相關知識。

 
主攻︰網頁設計/電商/web前端 簡介︰資深WEB前端工程師,站酷推薦設計師,是一名永不止步的學習者和分享者。擅長的行業包括WEB前端開發、電商設計及裝修、UI設計等,多年從業經驗和實戰項目經驗,共累計參與制作網站超過80個,原創設計文章超過二十幾篇,點擊量逾80萬,被許多平台轉載。開發的web前端開發課程,以通俗易懂的特點,幫助了很多菜鳥轉變成了前端開發人才。
 
  • 1-1 概念介紹
  • 1-2 H5新增的常用標簽
  • 1-3 更多類型的布局標簽
  • 1-4 音頻和視頻標簽的應用
  • 1-5 視頻背景的做法
  • 1-6 表單的新功能
  • 1-7 canvas畫布
  • 1-8 SVG圖形
  • 2-1 認識強大的CSS3
  • 2-2 CSS3圓角的用法
  • 2-3 陰影的用法
  • 2-4 邊框圖片的使用
  • 2-5 背景的新功能
  • 2-6 網頁中常見的顏色表示方式
  • 2-7 文字陰影和自定義字體
  • 2-8 圖標字體的用法
  • 3-1 種類多樣的選擇器
  • 3-2 最常用的偽類選擇器
  • 3-3 transition過渡屬性
  • 3-4 CSS3的2D轉換
  • 3-5 CSS3的3D轉換
  • 3-6 animation動畫
  • 3-7 模擬360瀏覽器雷達動畫實例
  • 3-8 漸變色及多重動畫應用
  • 4-1 響應式布局介紹
  • 4-2 布局原理實例
  • 4-3 響應式圖片使用方法
  • 4-4 Bootstrap中文網開發實例
  • 4-5 PC端主體內容模塊布局
  • 4-6 其他媒介的響應式布局
  • 4-7折疊菜單的按鈕特效實現
  • 5-1 項目分析及頁面頭部搭建
  • 5-2 海報輪播區的搭建
  • 5-3 功能劃分模塊的CSS3特效應用
  • 5-4 關于我們模塊搭建
  • 5-5 熱門課程的網格輪播特效
  • 5-6 新聞模塊的搭建
  • 5-7 廣告模塊和底部區域布局
  • 5-8 手機端頭部導航特效
  • 5-9 網站首頁手機端完整調試
  • 5-10 首頁不同設備下的相應布局
  • 5-11 網站內頁與首頁公共樣式的互通
  • 5-12 上線調試
  • 6-1 彈性盒模型及rem單位的應用
  • 6-2 通過JS取得不同設備下的響應
  • 6-3 課程分類彈性盒模型布局
  • 6-4 不同分類模塊的布局樣式
  • 6-5 底部固定導航的制作
  • 6-6 分類頁面制作
  • 6-7 個人中心頁面搭建
  • 6-8通過Ajax實時調取mysql數據庫中的數據
  • 6-9 網站上線流程
  • 本套教程單價︰¥650元 助學價︰¥320元 
  • 平面設計學院年會員︰¥1800元/年 今日促銷︰¥399元 可學習所有教程+新增教程 
  • 本學院已有106 套教程 總計 1208 個小時 查看詳情

學員評價 鼠標移到評論上可暫停滾動

    • 木子茶
      對我來說,去實體培訓班的費用是比較高的,也受時間地點的限制。在勤學網學習就比較自由,費用也相對少很多,課程經過剪輯化繁為簡,學習效率更高,是工作之余提升的好網站。
      站在你左邊
      買了勤學網的課程以後,受益很大,比在學校學習的內容更貼近實際工作,有疑問的時候,老師能耐心解答,在這樣一個良好的環境下,我相信自己能越學越好。
      藍方
      在勤學網學習有段時間了,感覺確實很棒,講課的老師本身就是設計大師,傳授經驗毫無保留,好多好多的干貨啊,花這點兒錢,實在是太值了!絕對行業的良心!
      我愛機器貓
      在網上學過很多教程,免費的收費的,相比之下,勤學網的教程是最系統專業的,從完善的基礎理論到豐富的高端案例實戰,能一站式滿足我的學習需求,省心省力。
    • 大海的魚
      我本來準備辭掉工作去大城市參加培訓班的,現在有了勤學網,不用辭掉現在的工作,也免去了高昂的學費和食宿費,還學到了更尖端的課程,實在太好了!
      繁星點點
      在勤學網學習非常靈活自由,隨時登錄隨時學習,沒有觀看次數限制,課程精編高效,讓我用最少的時間學習到最有用的知識。
      黑羽
      加入勤學網後感覺就像撿了個寶,這里的教程完全勾起了我的學習欲望,吸引著我不停地學習,這種每天都在快速進步的感覺真是好!
      火烈鳥
      與網上大部分只講軟件基礎應用的教程不同,勤學網的教程延展性很強,很多教程直接深入商業案例,能學到最前沿的案例實操經驗,學起來很過癮。
    • 暗之天使
      勤學網的教程非常清晰,課程剪輯很好,知識點餃接有序,學習過程中還有問答環節,學起來生動有趣,收效甚快。
      一生何求
      比去培訓班省錢,而且還能按照自己的時間和進度去安排學習,教程也很牛,幫上我大忙了。
      秋天的風
      我是完全零基礎,但感覺勤學網的教程很合我的胃口,課程由淺入深,富有邏輯性,學起來輕松自如。感謝勤學網,讓我實現設計師夢想變得如此容易。
      與或非
      課程安排很有針對性,很多都是實戰教學,市面上是很少看到這麼實用的教學內容的,老師授課也很有經驗,非常適合設計師們自我修煉。
    • 莉莉雅
      購買之前擔心內容與宣傳不符,所以問了很多問題,客服一直非常耐心地解答。看了課程覺得內容比介紹的還豐富,老師講得好,案例多,視頻高清,音質好。對勤學網很滿意。
      棒棒糖女孩
      勤學網的教程非常實用,針對性也很強,能學到實實在在與工作相關技巧,快速提升自己的競爭力。
      Dr熊
      根據我多年工作和學習經驗推測,勤學網絕對是全網性價比最高的學習網站,學習模式、課程質量、服務態度都沒得說,大力支持!
      龍海
      在勤學網到了很多高級技法,眾多設計大師的先進設計理念和經驗給我許多啟發。現在做設計感覺思路更廣,靈感也更豐富,作品更加有feel了。

    我們都在勤學網查看更多評論>>

    136355922:

    剛發現勤學網,咨詢了老師好多天,一直很糾結,不敢相信這麼多教程幾百塊錢是不是真的。再看看網...[更多]

    羅登煒:

    我是一名在校大學生,學習的專業是室內設計,算是個過來人吧,在一次查找學習資源的時候我看到了...[更多]

    韭菜1993:

    我是一名大四的學生,我學習的專業是數字媒體藝術,範圍很廣,涉及的內容也特別的復雜!我喜歡平...[更多]

    小玲丫頭0904:

    我是一名大學生,由于高考的失誤,沒有考上室內設計專業,如今自己想好好走室內設計方向,曾經試...[更多]
    購買了該教程的同學
    aec
    liuyaqian
    小趙姑娘
    主恩
    502423609
    145615063
    sunny00
    印刷小子
    立欣
    qwe5555
    laosi
    郭大丑
    小哥007
    俞富城
    百練成仙
    3dxiongren
    cyh570
    xxw2016
     
    您可能感興趣的課程
     
    講師︰笨叔
    21637次15條29次
     
    講師︰賈斌
    94042次31條92次
     
    講師︰江遙
    240055次205條447次
     
    講師︰開心老師
    423176次197條409次
     
    講師︰Gordan
    223183次113條295次
     
    講師︰胡飛虎
    302624次207條705次
     
    講師︰陳志文
    284067次221條181次
     
    講師︰田婧
    2089931次1270條1129次
     
     
    800135999