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

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

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

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

隨堂項(xiàng)目：

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

2.利用table標(biāo)簽課程表的實(shí)現(xiàn)

3.利用form、input表單標(biāo)簽實(shí)現(xiàn)簡(jiǎn)單登錄注冊(cè)頁(yè)面

2、CSS基礎(chǔ)語法

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

隨堂項(xiàng)目：首頁(yè)導(dǎo)航欄的制作

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

4、CSS盒子模型：盒模型簡(jiǎn)介、盒模型組成部分、盒模型常用場(chǎng)景、彈性盒模型

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

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

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

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

隨堂項(xiàng)目：移動(dòng)端的用戶注冊(cè)頁(yè)面、PC端的用戶注冊(cè)頁(yè)面。

7、靜態(tài)頁(yè)面切圖項(xiàng)目實(shí)戰(zhàn)：

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

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

二、WEB前端JavaScript 交互

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

隨堂項(xiàng)目：九九乘法表、閏年計(jì)算、誰是高富帥（if…else.. Switch…case）

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

隨堂項(xiàng)目：網(wǎng)頁(yè)時(shí)鐘的制作、回到頂部

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

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

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

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

5、面向?qū)ο缶幊蹋好嫦驅(qū)ο缶幊毯?jiǎn)介、對(duì)象的創(chuàng)建、繼承的實(shí)現(xiàn)、原型與原型鏈。

隨堂項(xiàng)目：仿windows屏保氣泡

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

隨堂項(xiàng)目：打地鼠游戲、抽獎(jiǎng)輪盤制作

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

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

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

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

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

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

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

課程特色

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

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

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

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

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