HTML5 + CSS3

先鋒科教H5精修課程綱要

初學者必須了解的

什么是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服務器,就是一種標準的后臺開發環境,也是當今企業網站應用最多的,我們需要學習掌握。

先鋒科H5精修課程大綱

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

5544444