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

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

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

1、HTML標簽：HTMl5簡介與入門、文本、圖像、鏈接、表格、列表、智能表單、結構化標簽等內容

隨堂項目：

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

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

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

2、CSS基礎語法

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

隨堂項目：首頁導航欄的制作

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

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

隨堂項目：導航欄的制作，利用盒子模型拉開間距、hover效果添加后的內邊距設定

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

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

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

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

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

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

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

二、WEB前端JavaScript 交互

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

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

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

隨堂項目：網頁時鐘的制作、回到頂部

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

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

4、正則表達式：正則表達式的語法、利用正則表達式做字符匹配、面向對象編程：脫離過程走向對象

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

5、面向對象編程：面向對象編程簡介、對象的創(chuàng)建、繼承的實現(xiàn)、原型與原型鏈。

隨堂項目：仿windows屏保氣泡

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

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

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

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

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

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

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

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

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

課程特色

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

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

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

4、應用實訓：讓學員通過實際項目訓練。

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