上海web課程通過而系統(tǒng)的課程，讓學(xué)員深入了解HTML5，從Web頁面制作基礎(chǔ)入手，以典型案例為切入點，進行八個階段的學(xué)習(xí)并結(jié)合理論與實戰(zhàn)模式，讓學(xué)員親身感受所學(xué)技能在日常工作與生活中的便捷之處；對學(xué)員全天開放機房，由教學(xué)經(jīng)驗豐富的IT指導(dǎo)老師手把手傳授學(xué)生成為一名專業(yè)的HTML5人才的必備素質(zhì)和技能

WEB前端布局與交互開發(fā)培訓(xùn)

一、WEB前端HTML5/CSS3布局與樣式

1、HTML標簽：HTMl5簡介與入門、文本、圖像、鏈接、表格、列表、智能表單、結(jié)構(gòu)化標簽等內(nèi)容

隨堂項目：

1.文章頁面的結(jié)構(gòu)化布局。包括文章標題、正文、圖片、頁面背景、作者、發(fā)表時間等信息

2.利用table標簽課程表的實現(xiàn)

3.利用form、input表單標簽實現(xiàn)簡單登錄注冊頁面

2、CSS基礎(chǔ)語法

常見樣式：CSS3簡介、css3引入方式、常見樣式、文字與文本、顏色、背景色、精靈圖片等

隨堂項目：首頁導(dǎo)航欄的制作

3、CSS選擇器：css選擇器:標簽選擇器、類選擇器、ID選擇器、后代選擇器、群組選擇器、偽類選擇器、結(jié)構(gòu)化偽類選擇器、屬性選擇器、兄弟選擇器、子元素選擇器

4、CSS盒子模型：盒模型簡介、盒模型組成部分、盒模型常用場景、彈性盒模型

隨堂項目：導(dǎo)航欄的制作，利用盒子模型拉開間距、hover效果添加后的內(nèi)邊距設(shè)定

5、浮動與定位：浮動：float、clear、恢復(fù)塌陷的父容器高度。定位：一動不動的(static)，跟著別人跑的(absolute)，以自己為中心的(relative)，固定的(fixed)

隨堂項目：導(dǎo)航欄左右布局的定位、二級菜單的實現(xiàn)、回到頂部的按鈕

6、響應(yīng)式布局與頁面優(yōu)化處理：移動頁面與PC端頁面布局時候需要注意點、媒體查詢在響應(yīng)式布局中的應(yīng)用、響應(yīng)式布局中彈性盒模型的設(shè)計技巧、各種瀏覽器對于CSS樣式的支持情況、頁面優(yōu)化需要注意的地方、解決跨瀏覽器兼容性問題

隨堂項目：移動端的用戶注冊頁面、PC端的用戶注冊頁面。

7、靜態(tài)頁面切圖項目實戰(zhàn)：

1）企業(yè)站實訓(xùn)：1.首頁導(dǎo)航、二級菜單 2.banner輪播圖 3.產(chǎn)品展示 4.成功案例 5.新聞中心 7.友情鏈接 8.版權(quán)申明 9.總結(jié)

2）商城實訓(xùn)：1.首頁（頭部導(dǎo)航、分類搜索、產(chǎn)品、猜你喜歡、推薦商品）2.用戶中心（訂單、個人信息、收貨地址、賬單）3.商品詳情頁（展示圖、描述信息、促銷價格、細節(jié)展示、產(chǎn)品詳情） 4.登錄&注冊頁面

二、WEB前端JavaScript 交互

1、核心語法：JavaScript的前世今生、javascript語法、介紹html5認識JavaScript、javascript中的對象、數(shù)組、變量、.流程控制（if…else switch…case while for）

隨堂項目：九九乘法表、閏年計算、誰是高富帥（if…else.. Switch…case）

2、BOM與DOM操作：DOM操作：讓一成不變的網(wǎng)頁動起來；BOM操作：瀏覽器也有話要說

隨堂項目：網(wǎng)頁時鐘的制作、回到頂部

3、事件編程：javascript的事件機制：讓網(wǎng)頁回應(yīng)你的問候；常見的JS事件：單擊、雙擊、移動、懸停、焦點的獲取與失去、瀏覽器的關(guān)閉與加載

隨堂項目：1.選不中的按鈕的實現(xiàn) 2.做一個計算器怎樣？3.商品圖片放大鏡效果

4、正則表達式：正則表達式的語法、利用正則表達式做字符匹配、面向?qū)ο缶幊蹋好撾x過程走向?qū)ο?

隨堂項目：郵箱格式的驗證、編寫一個獲取常見輸入數(shù)據(jù)的格式驗證類。

5、面向?qū)ο缶幊蹋好嫦驅(qū)ο缶幊毯喗?、對象的?chuàng)建、繼承的實現(xiàn)、原型與原型鏈。

隨堂項目：仿windows屏保氣泡

6、JQuery：JQuery基礎(chǔ)語法、JQuery選擇器、JQuery的BOM與DOM操作、事件編程、常見動畫與自定義動畫編程、常見Jquery插件使用。

隨堂項目：打地鼠游戲、抽獎輪盤制作

7、JQuery項目實戰(zhàn)：圖片輪播、利用jQuery制作拼圖、貪吃蛇等項目實訓(xùn)

8、Ajax技術(shù)：Ajax技術(shù)介紹、json格式與XML格式詳解、Ajax的post與get兩種提交方式詳解、服務(wù)器端的數(shù)據(jù)反饋機制說明、如何利用jQuery實現(xiàn)Ajax提交、 跨域訪問的實現(xiàn)

隨堂項目：用戶注冊、登錄的Ajax無刷新實現(xiàn)、淘寶收貨地址中省市級聯(lián)的實現(xiàn)

8、Bootstrap：bootstrap介紹、bootstrap的柵格系統(tǒng)、CSS樣式、組件、bootstrap的javascript插件

隨堂項目：利用bootstrap構(gòu)建移動商城首頁、用戶注冊、登錄等頁面

9、ECMAScript6：1.webpack介紹 2.webpackg管用配置 3.模塊處理module6，3種加載器loaders的使用 4.編譯器babel 5.插件plugins 6.熱更新次操作 7.打項目終包

隨堂練習(xí)：新前端開發(fā)環(huán)境搭建

課程特色

1、隨堂提問：每堂課上課之前提出相關(guān)上節(jié)課難點、重點問題，幫助學(xué)員加深理解

2、單元測試：每一單元、章節(jié)上完，進行單元測試。

3、模擬考試：以模擬考試的形式回顧全部內(nèi)容，加深理解。

4、應(yīng)用實訓(xùn)：讓學(xué)員通過實際項目訓(xùn)練。

5、推薦就業(yè)（入學(xué)簽訂就業(yè)協(xié)議）(非就業(yè)班除外)。