HTML + CSS

先鋒科教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. 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前端設計相應的工作,畢業后可以從事任何網頁設計相關的工作

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

節點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 技術

5544444