前端2022/02響應式Web設計開學第一課

01.認識前端03.課程目標02.教材簡介CONTENTSTopic.01認識前端前端的工作內容決定了它在用戶體驗日漸重要的互聯(lián)網+時代不可或缺的位置。1.1前端的發(fā)展歷程互聯(lián)網發(fā)展早期，尚無前端工程師概念；2005年，前端工程師被行業(yè)認可；2010年，移動時代，前端工程師地位越發(fā)重要；新思想、新設計、新模式、新工具、新平臺。1.2前端涉及的內容看得見的，能感知的；界面布局、交互效果、頁面加載速度等；用戶在客戶端上瀏覽web；瀏覽器解析、處理、渲染相關文件呈現(xiàn)。1.3前端的工作職責Web前端開發(fā)主要針對的是PC端開發(fā)任務；而Android開發(fā)、iOS開發(fā)和各種小程序主要針對的是移動端開發(fā)?，F(xiàn)在的前端不完全就是網頁設計，早年的網頁設計主要是以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。而現(xiàn)在的前端開發(fā)使得現(xiàn)代網頁更加美觀，交互效果顯著，功能更加強大。所以現(xiàn)在的前端開發(fā)，運用到的知識面更加廣泛，難度也更大?？偟膩碇v，前端就是要創(chuàng)造上面提到的網站面向用戶的部分背后的代碼，并通過建立框架，構建沉浸性的用戶體驗。1.4前端的技能要求在前端的開發(fā)的頁面布局中，HTML定義元素，CSS對其修飾，再通過JS實現(xiàn)相應的效果和交互。尤其是作為前端最重要的編程語言JS，在最近幾年里不論是代碼量還是關注數(shù)都穩(wěn)居Github平臺熱門編程語言榜。目前互聯(lián)網行業(yè)對前端需求量持續(xù)增加，前端程序員薪水在行業(yè)里面處于較領先的位置。前端領域發(fā)展很快，各種新技術新思想不斷涌現(xiàn)，這是一個好現(xiàn)象。但是前端發(fā)展太快也帶來一些問題，比如有人會感到困惑技術迭代這么快，剛剛學會某種新技術就過時了怎么辦？其實還是那句話，前端工程師首先是軟件工程師，基礎是最重要的，如果基礎不扎實，一切應用技能就都是“浮云”。而HTML、CSS、JS就是前端的基本功，數(shù)學、算法、數(shù)據(jù)結構、操作系統(tǒng)和編譯原理也是前端必備的。前端工程師使用HTML、CSS、JS等專業(yè)技能和工具將產品UI設計稿實現(xiàn)成網站產品，涵蓋用戶PC端、移動端網頁，處理視覺和交互問題。隨著互聯(lián)網行業(yè)的持續(xù)發(fā)展，移動互聯(lián)網業(yè)務不斷發(fā)展壯大，海量的平臺開發(fā)工作形成了巨大的人才缺口，尤其是Web前端、移動端HTML5開發(fā)人才尤為緊缺。隨著互聯(lián)網行業(yè)競爭的不斷加劇，企業(yè)平臺開始做界面友好性和操作方便性方面加大開發(fā)力度，Web開發(fā)人員的地位在業(yè)內也開始迅速提高。1.5當前形勢Topic.02教材簡介2.1什么是響應式Web早年設計Web時，頁面是以適配特定的屏幕大小為考量創(chuàng)建的。如果用戶正在使用比設計者考慮到的更小或者更大的屏幕，那么結果從多余的滾動條，到過長的行和沒有被合理利用的空間，不一而足。隨著人們使用的屏幕尺寸的種類越來越多，出現(xiàn)了響應式網頁設計的概念（responsivewebdesign，RWD），RWD指的是允許Web頁面適應不同屏幕寬度因素等，進行布局和外觀的調整的一系列實踐。這是改變我們設計多設備網頁的方式的思想。2.2為什么要學習響應式Web一名合格的Web開發(fā)工程師需要具備一定的綜合素質才能勝任企業(yè)日益負責、多變的工作要求。這些素質包括：熟知頁面布局、熟練樣式美化、掌握JavaScript基礎、屬性bootstrap響應式布局設計，以及能用HTML5+CSS3開發(fā)出絢麗多彩的移動端交互效果和界面適應不同屏幕的功能。2.3章節(jié)簡介這一階段學習完，你們能初步掌握HTML5和CSS3的基本開發(fā)技術，也就是能照著設計開發(fā)靜態(tài)網頁。第一章，主要認識HTML5和CSS3。要求很簡單，就是照著代碼出項目，看看這倆東西都能干點啥。第二章，主打文字主題。要求同學們能夠解讀關鍵性代碼。第三章，圖文主題，技術上包括CSS3陰影、圓角和動畫效果等。2.3章節(jié)簡介本階段的學習，你們應該能夠使用HTML5中提供的API快速開發(fā)Web頁面。第四章，學習H5的表單。這個東西的存在幫助了開發(fā)人員省去大段的js驗證代碼，要好好學習喲。第五章，畫布。這個是H5的新加的元素。第六章，音頻和視頻。如果你是一個音樂發(fā)燒友或者愛看電影的年輕人，可以認真研究，爭取來個私人訂制播放器。2.3章節(jié)簡介本章的學習，主要是進一步了解響應式Web設計的特點。第七章，響應式Web設計。這個是我們里程碑式的內容。實現(xiàn)自己制作的網頁在各種設備的屏幕上任意切換，怎么樣，是不是很有成就感呢？2.3章節(jié)簡介Bootstrap開發(fā)神器第八章與第九章，bootstrap。Bootstrap是響應式Web開發(fā)神器，它能夠幫助我們快速搭建響應式網站。（非常重要、非常實用，一定一定要搞定它?。。。㏕opic.03課程目標3.1章節(jié)知識目標第一章HTML5+CSS3初體驗1.了解HTML5和CSS3優(yōu)勢2.掌握HTML5的基本語法和語義化標簽3.熟悉CSS的基礎知識4.掌握CSS3邊框、背景、陰影和漸變的設置3.1章節(jié)知識目標第二章CSS3文本與圖標1.熟悉HTML5中常用文本標簽的含義2.掌握CSS3文本樣式屬性的使用3.了解CSS3中的@font-face屬性4.掌握font-awesome字體圖標庫的使用5.掌握CSS3用戶界面屬性的使用6.掌握軟文推廣頁面的制作過程3.1章節(jié)知識目標第三章CSS3過渡、變形與動畫1.掌握CSS3過渡2.掌握transition的子屬性3.掌握CSS3變形以及CSS3動畫4.掌握搖晃的桃子的實現(xiàn)過程3.1章節(jié)知識目標第四章HTML5表單的應用1.掌握form表單的使用2.掌握<input>標簽的使用3.掌握HTML5表單新特性4.掌握調查問卷頁面的實現(xiàn)過程5.掌握登錄注冊頁面的實現(xiàn)過程3.1章節(jié)知識目標第五章HTML5畫布1.掌握JavaScript的基礎知識2.掌握Canvas繪圖的基本步驟3.掌握Canvas常用方法的使用3.1章節(jié)知識目標第六章視頻和音頻1.了解JavaScript運算符、分支結構和循環(huán)結構的使用2.掌握視頻和音頻的基本使用3.掌握音頻、視頻對象常用的方法、屬性和事件3.1章節(jié)知識目標第七章響應式Web設計1.了解視口的概念2.掌握媒體查詢的實現(xiàn)3.掌握百分比布局的使用4.了解柵格系統(tǒng)的概念5.掌握使用媒體查詢實現(xiàn)響應式布局6.掌握彈性盒布局及其常用屬性的使用3.1章節(jié)知識目標第八章Bootstrap（上）1.了解Bootstrap的概念2.掌握Bootstrap的下載和環(huán)境安裝3.掌握Bootstrap布局容器的使用4.掌握Flex彈性布局的使用5.掌握Bootstrap表單、按鈕和分頁組件的使用6.熟悉Bootstrap輔助樣式的使用3.1章節(jié)知識目標第九章Bootstrap（下）1.掌握Bootstrap導航、導航欄和卡片組件的使用2.了解后臺管理系統(tǒng)的整體結構3.掌握后臺管理系統(tǒng)具體代碼的實現(xiàn)3.2技能目標1.能夠熟練使用CSS3結合HTML5實現(xiàn)網頁布局；2.熟練使用文檔對象模型和事件驅動，能夠很好地實現(xiàn)交互操作；3.熟練使用bootstrap中的對象，實現(xiàn)網頁的動態(tài)效果；4.熟練使用bootstrap對表單、表格和事件進行操作；5.熟練使用bootstrap與JavaScript進行網頁異步交互；6.學會事件驅動的程序設計思想，熟練使用JavaScript中的對象實現(xiàn)網頁特效；7.熟練使用JavaScript第三方插件；8.網頁設計布局合理，色彩搭配合理，網頁操作便捷；9.設計過程中充分考慮瀏覽器的兼容性等問題，并能給予適當處理。3.3學習要點HTML5的語義化結構標簽；@font-face規(guī)則多列布局模塊（Multi-columnLayoutModule）Web字體圖標CSS3圓角邊框、過渡和變形CSS3動畫HTML5新增