HTML5 + CSS3

WEB前端工程師就業班課程綱要

初學者必須了解的

什么是html與css? html是一種超文本標記語言,所謂超文本,即頁面中不僅包含文字,還有圖片、視頻等諸多元素,一個網頁結構類似人體,有頭(Head),身體(Body),腳(Footer),才構成完整的頁面。
css是一種樣式表,用來表現修飾頁面的各種元素,類似人的外貌和衣著。

什么是html5與css3? html5是html語言的第五次重大修改,加入了很多新的標簽和特性。同樣,css3是css的最新升級版本,在很多樣式方面有了新的特性,現在html5+css3再配合js腳本語言,可以制作出不屬于Flash的漂亮頁面動畫效果,并且在版式的布局設計上也更加便利。

什么是js腳本與jquery? JS全程javascript腳本語言,是一種廣泛應用于網頁中的開發語言,其可以讀取網頁的元素,對瀏覽器事件作出響應,還可以提交各種數據給服務器,比如我們頁面中經常用到的用戶注冊等內容大都是通過js腳本來控制傳輸數據的。
jquery是一種基于jsd的運行庫,其特點就是快速,簡潔,可以更加靈活的開發很多響應事件,并且與Css3結合更加緊密,是當今運用最為廣泛的js開發運行庫。

什么是php與Mysql? PHP是一種開源的動態開發語言,開源預示著免費,并且跨平臺,通用性強,相比于其他后臺開發語言,php更加易學,快捷,擴展性強。所以目前很多網站的后臺開發都是基于PHP,比如百度。Mysql是一種數據庫管理系統,使用sql語言進行編譯管理,一個網站的網站,既要有好看的前端頁面,同時也需要具備一定的后臺數據功能,比如具備會員功能的網站,那么這些龐大的數據就需要數據庫進行管理和調用,mysql配合php,再搭配專用的apache服務器,就是一種標準的后臺開發環境,也是當今企業網站應用最多的,我們需要學習掌握。

先鋒科WEB前端工程師就業班課程大綱

模塊A. 網頁基礎課程
節點學習內容 節點項目范例 最終學習目標描述

節點1
認識網站:學習網站相關知識
掌握DW界面和其功能

HTML是網頁制作必備技能,主要介紹HTML概念、語法及常用基礎標簽

節點2
代碼入門:HTML代碼基礎及CSS層疊樣式表概述

css的盒子模型,更好的排版,進行頁面布局。 介紹CSS語法、選擇器、繼承、層疊及優先級基礎內容。

節點3
知識進階:表單制作、JavaScript、html5+css3

表單標簽的編寫規范、嵌套規范以及相關屬性的用法講解
了解JavaScript語言,掌握它的語法、數據類型、基本算數和邏輯運算操作,方便我們開發中直接調用,進而實現更多功能 常見的html5標簽
講解css3的圓角、陰影、旋轉、縮放、以及速率等屬性值

節點4
實戰應用:入門網站制作
進階網站制作
多平臺網站設計戰略

搭建一個網頁HTML結構,并掌握網布局相應知識與技巧。
針對CSS中的基礎布局以及經典的布局展開詳細的講解。
對前面知識的綜合應用,通過項目實戰,更加熟練掌握基礎知識,在實踐中復習、鞏固知識,提高綜合能力。

本模塊完成后學員具備完成簡單靜態頁面能力,可以從事網頁前臺制作的工作,但是因為更深入的技術缺乏,無法勝任更高級的設計與開發工作,屬于網頁設計最底層的工作能力要求程度

模塊B. 網頁UI課程
節點學習內容 節點項目范例 最終學習目標描述

節點1
熟悉代碼:網站頁面基礎制作

認識HTML的最新版本HTML5,主要包括HTML5的標簽變化、屬性變化、音視頻、以及表單驗證。

節點2
設計的可用性原則:用戶心理引導與運用

色彩與體驗
色彩與注意力集中
AIDA(注意力、興趣、期望、行動)
網站UI設計流程:需求分析、整理需求、產品思維解析、原型設計、產品立項。

節點3
網站響應式布局:HTML5+CSS3

詳細講解CSS3的變化,新的概念和理念,及其CSS3新增加的選擇器
深入講解元素如何扭曲、移位或旋轉,讓我們可以更自由得裝飾和變形HTML組件
在 CSS3 中,新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等

節點4
用戶體驗優化(UEO+SEO):項目設計流程
進階網站制作
多平臺網站設計戰略

在IMG標簽中表明正確的圖片尺寸
服務器和內容分發網絡
合并CSS和JavaScript
驗證頁面
如何探測長時間跳轉鏈
頁面內容、功能布局優化
頁面元素配色優化
需求分析、用戶場景模擬、競品分析
根據產品的用戶定位進行設計, UI設計師交出產品設計圖時,更多的配合開發人員、測試人員進行截圖配合。
UI設計師需對產品的效果進行驗證,是否可用,用戶是否接受,以及與需求是否一致。

本模塊是更深入的頁面設計學習,會初步接觸最新的html5標準與css3,學員完成后可以完成響應式的頁面布局與網站優化等進階工作,但是受模塊內容時長限制,在前端設計工作的深入學習上仍舊不足,還需要更深入的學習

模塊C. H5前端設計課程
節點學習內容 節點項目范例 最終學習目標描述

節點1
H5前端開發環境介紹:傳統網站知識布局總結


前端開發環境介紹:DreamWeaver、 Notepad++、HBuilder
HTML基礎,CSS基礎,CSS核心屬性
CSS樣式層疊繼承,盒模型

節點2
HTML5基礎及案例練習

HTML5提供了新的元素來創建更好的頁面結構,告別傳統代碼不能更好語義化說明及頁面新功能增加。
新增標簽介紹:
<article>、<aside>、<figure>、<header>、<mark>、<nav>、<section> ... ...
移除標簽介紹: <acronym>、<basefont>、<frame>、<strike> ... ...

節點3
CSS3基礎及案例練習

CSS3基礎屬性介紹,做到用代碼大量替換PS作圖的工作,符合市場需求。
邊框屬性:box-shadow、border-image;
圓角:
border-radius;
背景:background-size、background-origin、background-clip;
漸變:
線性漸變、徑向漸變;
文本效果:text-shadow、box-shadow、text-overflow、word-wrap、word-break;
字體:@font-face;
... ...

節點4
定位布局及CSS3特效應用:動畫特效交互事件
響應式設計

CSS3的特效使用,制作交互動畫,讓網站活起來。
2D/3D轉換:
translate()、rotate();
過渡/動畫屬性:
transition、animation;
... ...
三種定位布局方式,
定位在交互上的應用。
響應式設計: 就是我們日常說的手機網站或三屏合一網站。
通過使用的設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相對應的布局。最終達到網站的不同尺寸布局。

節點5
實戰應用:入門網站制作
進階網站制作

對前面知識的綜合應用,通過項目實戰,更加熟練掌握基礎知識,在實踐中復習、鞏固知識,提高綜合能力。

本模塊會深入系統的學習H5+CSS3,學員完成后可以獨立制作響應式網頁設計,已經具備應對H5前端設計相應的工作,畢業后可以從事任何網頁設計相關的工作

模塊D. 網頁高級特效與框架開發
節點學習內容 節點項目范例 最終學習目標描述

節點1
HTML5新標簽:
1.?檔頭和編碼聲明
2.基礎標簽
3.文本類標簽
4.列表標簽
5.語義化標簽的應?
6.字符實體
7.表格標簽
8.HTML5標簽的兼容處理
9.HTML5標簽SEO的作?
10.HTML5表單新特性
多媒體標簽


掌握HTML代碼的規范編寫,掌握HTML5新標簽的特性,掌握多媒體在??中的應?

節點2
CSS3新特性:
1.CSS的定義
2.CSS引?
3.CSS選擇器
4.CSS3與CSS2的區別
5.長度單位
6.顏?單位
7.常用屬性
8.CSS3屬性
a) 尺?
b) 邊框
c) 背景
d) 內補?
e) 外補?
f) 布局
g) 定位
h) 字體
i) 文本
j) 列表
k) 表格
l) 用戶界?
m) 多欄
n) 2D變換
o) 過渡動畫

CSS3:圓?邊框、邊框九宮格特效、多圖背景、動畫、漸變和倒影、多列屬性布局、服務器端字體,可以實現基礎網頁布局,??樣式定義及CSS,樣式特效

節點3
1.W3C盒子模型
2.div+css?頁布局
3.彈性盒?
4.HTML5兼容性處理
5.使? HTML5布局元素的布局
6.Media Query響應式布局
百分比??布局

掌握使?媒體查詢技術及百分比布局,實現響應式頁?,自動適應多種分辨率設備

節點4
1.PS切圖
2.精靈圖
3.CSS重制樣式表reset
CSS、Normalize.css
4.CSS命名規范,CSS常用名

掌握和設計人員對接,把一張PSD圖?切成自?需要的圖片樣式,按照效果圖實現網站

節點5
JS的DOM操作
a)DOM 節點
b)DOM 方法
c)DOM 屬性
d)DOM 訪問
e)DOM 修改
f)DOM 內容
g)DOM 元素
h)DOM 事件
JS的BOM操作
a)Window
b)Screen
c)Location
d)History
e)Navigator
f)PopupAlert
g)Timing
h)Cookies
AJAX

掌握JS操作?面及瀏覽器元素,培養動?制作特效、表單驗證的能?,掌握AJAX??異步交互

節點6
JQuery簡介
JQuery 安裝
jQuery CSS 操作
jQuery 選擇器
jQuery 篩選
jQuery HTML文檔處理
jQuery 事件
jQuery效果
jQuery Ajax
jQuery 其他操作
jQuery 插件

掌握jQuery實現?面特效,表單驗證,及AJAX異步交互

節點7
項目實訓:
PS切圖
CSS重置樣式表
?頁規范兼容性
SASS
Compass 精靈圖代碼壓縮
常?網站效果
rem相對?小布局

能夠獨?完成網?布局,頁面效果,表單驗證的一整套網?制作

本模塊會深入學習html5+css布局和特效制作,掌握jquery使用和常用特效制作,掌握流行js框架開發項目流程,并能使?原?JS開發網站常見各類特效,熟練掌握Ajax 技術

模塊E. WEB全棧開發
節點學習內容 節點項目范例 最終學習目標描述

節點1
Node.js+MongoDB+Express:
1.VUE.JS介紹
2.安裝
3.模板/數據綁定
4.Class/Style綁定
5.事件
6.組件
7.混合
8.插件
9.服務/路路由


掌握Vue.JS使?方法,理解前端架構分層思想,掌握單?面應?實現原理及具體實現方法

節點2
1.NodeJS簡介
2.NodeJS安裝
3.npm?具使?
4.模塊、package
5.回調函數
6.buffer,事件
7.?件處理模塊
8.http,URL,querystring,path等模塊
9.POST/GET請求
10.安裝模板引擎

NodeJS作為服務端語言,接收處理響應請求,掌握NodeJS搭建服務器

節點3
1.NoSQL基礎概念
2.MongoDB 簡介
3.數據庫、集合、?文檔概念
4.數據庫操作
5.集合操作
6.?文檔CURD操作
7.條件操作符
8.Limit與Skip?方法
9.排序
10.NodeJS的mongoose模塊操作MongoDB

理解數據庫在程序開發中所起的作用,掌握 MongoDB數據庫操作,能夠獨?獲取分析數據

節點4
1.Express 簡介
2.安裝 Express
3.路由
4.中間件
5.視圖
6.模板引擎
7.AJAX
8.跨域/JSONP
9.搜索分?
10.?件上傳
11.登陸注冊

Express基于 Node.js 平臺,快速、開放、極簡的 web 開發框架。它提供一系列強大的特性,幫助你創建各種 Web 和移動設備應用。熟悉Express可以更好的掌握互聯網交互原理。

節點5
1.Web Socket
2.SSE
3.?絡爬蟲(實現多人聊天時,服務器主動推送消息)
4..常?工具使用webpack
5.壓縮混淆
6.AMD/CMD規范
7.結合Vue.JS實現單頁?應用
8.Web APP 打包

掌握常用工具,掌握聊天通訊,掌握前后端共同交互實現單頁?應用,掌握APP打包制作

節點6
h5新特性:1.?音/視頻 API
2.本地存儲localStorage/sessionStorage
3.Geolocation(地理理定位)
4.百度地圖API
5.瀏覽器多線程Web Workers
6.應?程序緩存(Application Cache)
7.Canvas 畫圖、SVG
8.拖拽事件、API
9.FileReader API
10.PAJAX
11.Bootstrap
插件:swiper、圖表、iconfont

集中講解掌握H5核?心 API,同時配合網上提供的接口服務完成需求,對于前端水平全面提升

節點7
1.接?微信公眾平臺
2.賬號申請
3.微信JSSDK使?
4.分享接?
5.圖像接?
6.?頻接?
7.智能接口
8.設備信息
9.地理位置
10.界?操作
11.WEUI框架
12.微信?程序開發
13.創建項?
14.?具
15.框架
16.WXML 、 WXSS
17.組件API

微信?程序是一種全新的連接用戶與服務的方式,它可以在微信內被便捷地獲取和傳播,同時具有出色的使用體驗。作為一個跟上趨勢的前端程序員,當今最熱門的小程序開發值得我們掌握

節點7
整站開發:
Git協作
前端項目規范化
H5新特性即時通訊
互聯網服務接口調用

培養具備整站開發能力,培養項目劃分管理協作技巧,前端后端項目規范設計,通過這個項目讓每一個學?生參與項目的規范化協作工作,模擬真實的開發環境。

本模塊從零開始逐步深入學習web前端開發的高級階段,以目前最火的微信小程序開發為模板,教授學員Web全棧開發的技巧,課程完成學員可以獨立完成相關項目,并輕松應付相關工作需求

5544444