<thead id="55bzn"></thead>
<cite id="55bzn"></cite>
<cite id="55bzn"><span id="55bzn"><var id="55bzn"></var></span></cite>
<del id="55bzn"><span id="55bzn"><ins id="55bzn"></ins></span></del>
<var id="55bzn"><video id="55bzn"></video></var>
<var id="55bzn"></var>
<var id="55bzn"></var> <cite id="55bzn"></cite><cite id="55bzn"><video id="55bzn"><menuitem id="55bzn"></menuitem></video></cite>
<var id="55bzn"><span id="55bzn"><menuitem id="55bzn"></menuitem></span></var>
<cite id="55bzn"></cite>
<var id="55bzn"><video id="55bzn"><thead id="55bzn"></thead></video></var><var id="55bzn"><video id="55bzn"><thead id="55bzn"></thead></video></var>
<var id="55bzn"></var>
<cite id="55bzn"></cite>
<cite id="55bzn"><span id="55bzn"><menuitem id="55bzn"></menuitem></span></cite>
<cite id="55bzn"></cite>
<cite id="55bzn"><video id="55bzn"><menuitem id="55bzn"></menuitem></video></cite><menuitem id="55bzn"><strike id="55bzn"></strike></menuitem><cite id="55bzn"><video id="55bzn"></video></cite>
<cite id="55bzn"><video id="55bzn"><menuitem id="55bzn"></menuitem></video></cite>
<var id="55bzn"></var>
<var id="55bzn"><video id="55bzn"><menuitem id="55bzn"></menuitem></video></var>
<var id="55bzn"></var>
<cite id="55bzn"><span id="55bzn"></span></cite><cite id="55bzn"><span id="55bzn"><var id="55bzn"></var></span></cite>
 當前位置:平面設計學院 > WEB前端實戰高級教程
 

WEB前端實戰高級教程

1094次 1條 4次
講師:韓文強
課級:高級拓展
時長: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元 可學習所有教程+新增教程 
  • 本學院已有105 套教程 總計 1203 個小時 查看詳情

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

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

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

    鼻尖的汗水:

    看過了很多網站,也看了很多視頻,最終選擇了勤學網。之所以選擇原因有好幾點。 可以自...[更多]

    恰恰小阿米:

    我曾經是復印店的小妹,設計水平簡單粗暴,慘不忍睹,設計很難入門,畢業3年了還在邊緣徘徊,現...[更多]

    杰單調:

    我是一個大三的學生,同時也是一個設計愛好者,可是學的不是設計專業,平時只是上網看帖子或一找...[更多]

    貓大王:

    之前在大學學的計算機數字多媒體專業,專業當中學了一些的影視動畫,畢業之后找工作,才知道自己...[更多]
    購買了該教程的同學
    俞富城
    xxw2016
    laosi
    145615063
    胡錢多設計
    1919206
    wlh630
    百練成仙
    sunny00
    求學女子
    3dxiongren
    阿萌546
    YXC貿易
    夏個
    kokosoku
    叫我雷鋒吧
    小哥007
    陳小鈣
     
    您可能感興趣的課程
     
    講師:笨叔
    20234次12條27次
     
    講師:賈斌
    89913次31條84次
     
    講師:江遙
    237127次203條432次
     
    講師:開心老師
    421326次197條398次
     
    講師:Gordan
    222470次113條294次
     
    講師:胡飛虎
    301790次207條698次
     
    講師:陳志文
    282844次221條181次
     
    講師:田婧
    2081467次1266條1125次
     
     
    800135999
    呼伦贝尔| 滁州| 顺德| 珠海| 灌云| 台南| 阳江| 诸城| 邳州| 雅安| 汉川| 靖江| 德州| 南京| 达州| 高密| 昭通| 喀什| 昌都| 盘锦| 郴州| 新泰| 陇南| 吴忠| 淮北| 榆林| 德阳| 海丰| 临猗| 石狮| 萍乡| 新乡| 乳山| 漯河| 泗阳| 宜昌| 铁岭| 鞍山| 朝阳| 辽源| 崇左| 湖州| 乐清| 辽源| 六安| 澄迈| 海丰| 宜都| 徐州| 改则| 营口| 濮阳| 馆陶| 聊城| 东莞| 庄河| 淮安| 红河| 邳州| 娄底| 吉林| 吉林| 娄底| 石狮| 永州| 武安| 武夷山| 柳州| 永州| 怀化| 昆山| 岳阳| 酒泉| 白山| 白城| 日喀则| 铜仁| 吉林| 图木舒克| 岳阳| 酒泉| 项城| 汉中| 红河| 天长| 辽源| 诸城| 山东青岛| 鹤壁| 庆阳| 湘西| 盐城| 忻州| 燕郊| 武威| 白银| 邯郸| 平凉| 玉树| 岳阳| 博罗| 阿拉善盟| 高雄| 阿勒泰| 威海| 荣成| 韶关| 汕头| 景德镇| 石狮| 和县| 廊坊| 三亚| 克孜勒苏| 马鞍山| 庆阳| 六安| 晋江| 和县| 内蒙古呼和浩特| 遂宁| 忻州| 日土| 甘肃兰州| 深圳| 东海| 海北| 灵宝| 盘锦| 三沙| 来宾| 定西| 山东青岛| 天门| 丹阳| 馆陶| 河北石家庄| 临汾| 台州| 保亭| 邢台| 建湖| 建湖| 榆林| 福建福州| 广安| 常州| 馆陶| 河池| 益阳| 宝应县| 三沙| 山南| 黄山| 博尔塔拉| 灵宝| 鄂州| 莒县| 清徐| 徐州| 吕梁| 博尔塔拉| 嘉善| 南平| 昌吉| 白银| 德清| 临汾| 浙江杭州| 苍南| 鄂尔多斯| 巴中| 余姚| 张家口| 雄安新区| 乌海| 延安| 大庆| 金坛| 乌兰察布| 泗阳| 本溪| 丽水| 屯昌| 濮阳| 辽宁沈阳| 安康| 黔东南| 义乌| 武夷山| 馆陶| 江门| 邹城| 淮安| 北海| 屯昌| 汕头| 安康| 潮州| 甘肃兰州| 铁岭| 嘉峪关| 如皋| 宁德| 惠州| 平潭| 和县| 宁德| 红河| 肇庆| 中卫| 阿里| 娄底| 延边| 丹阳| 十堰| 金坛| 香港香港| 海南海口| 厦门| 荆州| 保定| 天长| 阿坝| 平顶山| 娄底| 燕郊| 荣成| 延边| 天门| 丽水| 亳州| 白沙| 灵宝| 惠东| 沛县| 顺德| 澳门澳门| 通辽| 惠州| 黑龙江哈尔滨| 乐平| 东莞| 泰安| 日喀则| 茂名| 潜江| 海拉尔| 武威| 霍邱| 乳山| 鄂州| 安庆| 厦门| 内江| 淮安| 淮南| 醴陵| 临夏| 万宁| 开封| 黔东南| 肥城| 天门| 天长| 滕州| 图木舒克| 三沙| 江西南昌| 酒泉| 锦州| 兴安盟| 南安| 诸暨| 青州| 来宾| 咸阳| 益阳| 龙岩| 临猗| 泰州| 三沙| 曲靖| 长治| 乌海| 丽江| 偃师| 永新| 通辽| 定州| 鹰潭| 澳门澳门| 招远| 铁岭| 淮北| 齐齐哈尔| 黄山| 眉山| 阳江| 漯河|