Web前端開(kāi)發(fā)應(yīng)用課程教學(xué)大綱

1、精選優(yōu)質(zhì)文檔-傾情為你奉上Web前端基礎(chǔ)應(yīng)用課程教學(xué)大綱（一）課程性質(zhì)與任務(wù)Web前端基礎(chǔ)應(yīng)用是高等?？圃盒W(xué)生必修的一門專業(yè)課。本課程的任務(wù)是：本書(shū)將從HTML文件的基本結(jié)構(gòu)是什么，到使用HTML標(biāo)簽制作簡(jiǎn)單的網(wǎng)頁(yè)，一直到最后使用DIV+CSS制作精美的商業(yè)網(wǎng)站，以這樣一個(gè)循序漸進(jìn)的講解過(guò)程，幫助大家完成不會(huì)會(huì)熟練精通網(wǎng)頁(yè)制作的蛻變。學(xué)習(xí)完本門課程后，大家都能夠掌握網(wǎng)頁(yè)制作的精髓，快速而熟練地制作網(wǎng)頁(yè)。（二）課程教學(xué)目標(biāo)本課程是Web前端基礎(chǔ)應(yīng)用，其最主要的目標(biāo)是激發(fā)學(xué)生的學(xué)習(xí)興趣，培養(yǎng)學(xué)生自我約束、自我學(xué)習(xí)的能力，最終使學(xué)生養(yǎng)成良好的學(xué)習(xí)習(xí)慣，為其今后的職業(yè)生活、繼續(xù)學(xué)習(xí)和終生發(fā)展奠定堅(jiān)實(shí)

2、的基礎(chǔ)。本課程介紹了HTML和W3C標(biāo)準(zhǔn)以及HTML文件基本結(jié)構(gòu)，主要講述了網(wǎng)頁(yè)制作的基礎(chǔ)知識(shí)，重點(diǎn)學(xué)習(xí)了制作網(wǎng)頁(yè)的基本標(biāo)簽，如鏈接、表格、表單、列表，框架等。通過(guò)這3章基礎(chǔ)知識(shí)的學(xué)習(xí)，讀者對(duì)網(wǎng)頁(yè)可以有一定的了解，知道如何在網(wǎng)頁(yè)中添加基本的元素，結(jié)合教學(xué)案例，讓讀者學(xué)以致用，最后使讀者制作出簡(jiǎn)單的網(wǎng)頁(yè)。本書(shū)深入淺出地講解了網(wǎng)頁(yè)的概念和制作網(wǎng)頁(yè)的方法以及目前流行的各種制作網(wǎng)頁(yè)的技術(shù)和常用的網(wǎng)頁(yè)制作工具。每章針對(duì)技能點(diǎn)都設(shè)計(jì)了相應(yīng)的案例，而且每個(gè)案例都考慮了這項(xiàng)技術(shù)的實(shí)用性、趣味性，并將這種特色融于例子中，這些例子都具備關(guān)鍵代碼，以方便讀者邊學(xué)邊練。（三）教學(xué)內(nèi)容與要求1HTML基礎(chǔ)在網(wǎng)絡(luò)如此發(fā)達(dá)

3、的今天，大家的生活、學(xué)習(xí)和工作基本上都離不開(kāi)網(wǎng)絡(luò)。大家經(jīng)常瀏覽的新聞頁(yè)面、微博和微信等各種從網(wǎng)上獲得信息的途徑，不論是PC終端，還是移動(dòng)客戶端，基本上都是以Web為基礎(chǔ)來(lái)呈現(xiàn)的，因此Web頁(yè)面呈現(xiàn)信息已成為各種信息共享和發(fā)布的主要形式。而HTML（Hyper Text Markup Language，超文本標(biāo)記語(yǔ)言，在有些書(shū)籍中也翻譯為超文本標(biāo)簽語(yǔ)言）則是創(chuàng)建Web頁(yè)面的基礎(chǔ)。本書(shū)將從HTML文件的基本結(jié)構(gòu)是什么，到使用HTML標(biāo)簽制作簡(jiǎn)單的網(wǎng)頁(yè)，一直到最后使用DIV+CSS制作精美的商業(yè)網(wǎng)站，以這樣一個(gè)循序漸進(jìn)的講解過(guò)程，幫助大家完成不會(huì)會(huì)熟練精通網(wǎng)頁(yè)制作的蛻變。學(xué)習(xí)完本門課程后，大家都能夠

4、掌握網(wǎng)頁(yè)制作的精髓，快速而熟練地制作網(wǎng)頁(yè)。 本章將講解網(wǎng)頁(yè)制作中的基礎(chǔ)內(nèi)容，給大家打下一個(gè)牢固的基礎(chǔ)，即本章的重點(diǎn)內(nèi)容是HTML文件的基本結(jié)構(gòu)和W3C標(biāo)準(zhǔn)，以及制作網(wǎng)頁(yè)常用的基本標(biāo)簽。2列表、表格與框架列表在網(wǎng)頁(yè)制作中占據(jù)著重要的位置，許多精美、漂亮的網(wǎng)頁(yè)中都使用了列表。本章將向大家介紹列表的概念及相關(guān)的使用方法，通過(guò)練習(xí)掌握列表應(yīng)用的技巧，從而可以制作出精美的網(wǎng)頁(yè)。同時(shí)，在制作網(wǎng)頁(yè)時(shí)，表格是一種不可或缺的數(shù)據(jù)展示工具，使用表格可以靈活地實(shí)現(xiàn)數(shù)據(jù)展示，表格在很多頁(yè)面中還發(fā)揮著頁(yè)面排版的作用。對(duì)于頁(yè)面的排版和設(shè)計(jì)，框架也是網(wǎng)頁(yè)制作過(guò)程中一種普遍采用的方式，使用框架可以極大地提高頁(yè)面的復(fù)用程度，減

5、少重復(fù)開(kāi)發(fā)，因此掌握框架技術(shù)也是網(wǎng)頁(yè)制作人員應(yīng)該具備的基本技能。3表單表單是實(shí)現(xiàn)用戶與網(wǎng)頁(yè)之間信息交互的基礎(chǔ)，通過(guò)在網(wǎng)頁(yè)中添加表單可以實(shí)現(xiàn)諸如會(huì)員注冊(cè)、用戶登錄、提交資料等交互功能。本章將主要講解如何在網(wǎng)頁(yè)中制作表單，并使用表單元素創(chuàng)建表單。為了能夠提供對(duì)當(dāng)前互聯(lián)網(wǎng)搜索引擎的支持，還講解如何制作符合語(yǔ)義化規(guī)范要求的表單。4初識(shí)CSS本章將介紹為什么使用CSS、CSS基本語(yǔ)法、CSS的選擇器，以及如何在網(wǎng)頁(yè)中應(yīng)用CSS樣式，最后講解CSS復(fù)合選擇器和CSS的繼承特性。重點(diǎn)是掌握CSS基本語(yǔ)法、它的3種基本選擇器，以及在HTML頁(yè)面添加CSS的方式。5CSS美化網(wǎng)頁(yè)元素本章從基礎(chǔ)的文字樣式設(shè)置開(kāi)始

6、，詳細(xì)講解使用CSS設(shè)置文字的各種效果，文字與圖片的混排效果，試用CSS設(shè)置超鏈接各種方式，最后講解網(wǎng)頁(yè)中背景顏色、背景圖片的各種設(shè)置方法和列表樣式的設(shè)置方法。 通過(guò)本章的學(xué)習(xí)，可以對(duì)網(wǎng)頁(yè)的文本、圖片、列表、超鏈接設(shè)置各種各樣的效果，使網(wǎng)頁(yè)看起來(lái)美觀大方、賞心悅目。 6盒子模式會(huì)用到盒子模型的知識(shí)。所以掌握了盒子模型的屬性及用法，才能真正地控制好頁(yè)面中的各個(gè)元素。 本章主要介紹盒子模型的基本概念，盒子模型的邊框、內(nèi)邊距和外邊距，以及它們?cè)诰W(wǎng)頁(yè)中的實(shí)際應(yīng)用，最后介紹標(biāo)準(zhǔn)文檔流和display屬性在網(wǎng)頁(yè)中的用法。相信學(xué)完本章以后，大家在網(wǎng)頁(yè)制作的水平上會(huì)有一個(gè)很大的提升。7浮動(dòng)使用DIV+CSS進(jìn)

7、行網(wǎng)頁(yè)布局實(shí)際上是使用CSS定位、排版網(wǎng)頁(yè)元素，這是一種很新的排版理念，完全有別于傳統(tǒng)的排版習(xí)慣，它首先對(duì)<div>標(biāo)簽進(jìn)行分類，然后使用CSS對(duì)各個(gè)<div>進(jìn)行CSS定位，最后在各個(gè)<div>中編輯頁(yè)面內(nèi)容，這樣就實(shí)現(xiàn)了表現(xiàn)與內(nèi)容分離，在后期維護(hù)CSS十分容易，那么如何使用CSS定位網(wǎng)頁(yè)元素呢？ 這就是本章重點(diǎn)要講解的內(nèi)容浮動(dòng)，使用浮動(dòng)定位網(wǎng)頁(yè)元素，并且根據(jù)網(wǎng)頁(yè)布局需要對(duì)浮動(dòng)進(jìn)行清除或處理溢出內(nèi)容，因此本章主要學(xué)習(xí)的內(nèi)容有3點(diǎn)。 (1)使用float屬性定位網(wǎng)頁(yè)元素。(2)使用clear屬性清除浮動(dòng)。 (3)使用overflow屬性進(jìn)行溢出處理。8定位網(wǎng)

8、頁(yè)元素在前面的章節(jié)中講解了浮動(dòng)的概念，以及使用浮動(dòng)布局網(wǎng)頁(yè)、定位網(wǎng)頁(yè)元素，本章將要講解網(wǎng)頁(yè)制作中另一個(gè)重要屬性position，介紹使用position定位網(wǎng)頁(yè)元素，以及設(shè)置元素堆疊順序的z-index屬性。 通過(guò)本章的學(xué)習(xí)，將能夠完成網(wǎng)頁(yè)中更為復(fù)雜的布局和元素定位。本章主要學(xué)習(xí)的內(nèi)容有以下兩點(diǎn)。(1) 使用position屬性定位網(wǎng)頁(yè)元素。 (2) 使用z-index屬性設(shè)置元素的堆疊順序。9指導(dǎo)學(xué)習(xí)：課程總復(fù)習(xí)本章將進(jìn)行復(fù)習(xí)總結(jié)，把前面章節(jié)中學(xué)習(xí)過(guò)的知識(shí)進(jìn)行綜合運(yùn)用，通過(guò)制作開(kāi)心網(wǎng)游戲頁(yè)面，使大家在鞏固HTML標(biāo)簽、CSS知識(shí)的同時(shí)，對(duì)CSS綜合運(yùn)用的能力也有一個(gè)大幅度的提高。10項(xiàng)目案例

9、：制作V+網(wǎng)站到本章為止，這門課程已接近尾聲。通過(guò)前面章節(jié)的學(xué)習(xí)和上機(jī)訓(xùn)練，相信大家已經(jīng)可以游刃有余地使用DIV+CSS布局并制作較為復(fù)雜的網(wǎng)頁(yè)了。 為了使大家能夠更好地練習(xí)使用CSS布局、美化網(wǎng)頁(yè)，熟練、快速地制作網(wǎng)頁(yè)，本次課讓大家制作凡客誠(chéng)品旗下“V+”網(wǎng)站，綜合運(yùn)用學(xué)習(xí)過(guò)的知識(shí)，鞏固使用HTML編輯網(wǎng)頁(yè)，使用CSS布局并美化網(wǎng)頁(yè)，牢固掌握學(xué)習(xí)過(guò)的知識(shí)和技能點(diǎn)。（四）教學(xué)實(shí)施1.教學(xué)時(shí)數(shù)安排建議60學(xué)時(shí)。其中：序號(hào)內(nèi)容學(xué)時(shí)數(shù)1HTML基礎(chǔ)42列表、表格與框架43表單44初識(shí)CSS45CSS美化網(wǎng)頁(yè)元素46盒子模式47浮動(dòng)48定位網(wǎng)頁(yè)元素49指導(dǎo)學(xué)習(xí)：課程總復(fù)習(xí)410指導(dǎo)學(xué)習(xí)：課程總復(fù)習(xí)41

10、1項(xiàng)目案例：制作V+網(wǎng)站412項(xiàng)目案例：制作V+網(wǎng)站413項(xiàng)目案例：制作V+網(wǎng)站414項(xiàng)目答辯415項(xiàng)目答辯42.教學(xué)建議（1）在教學(xué)方法上，應(yīng)發(fā)揮教師在教學(xué)設(shè)計(jì)、教學(xué)組織中的主導(dǎo)作用，結(jié)合現(xiàn)有的教學(xué)條件，靈活運(yùn)用各種教學(xué)方法開(kāi)展教學(xué)，注重學(xué)生實(shí)際動(dòng)手能力的培養(yǎng)，發(fā)揮學(xué)生在教學(xué)中的主體地位。（2） 在本課程中建議廣泛采用現(xiàn)代教育技術(shù)的成果豐富課堂內(nèi)容，激發(fā)學(xué)生學(xué)習(xí)興趣。（3）在本課程教學(xué)中，注重以學(xué)生為主，強(qiáng)調(diào)學(xué)做結(jié)合，可采用項(xiàng)目、案例等形式組織教學(xué)內(nèi)容。3. 教材選用建議(可多個(gè)教材)序號(hào)名稱、版本號(hào)主編出版社ISBN單價(jià)出版時(shí)間01自主編制教材（五）考核與評(píng)價(jià)1建立過(guò)程評(píng)價(jià)與目標(biāo)評(píng)價(jià)并重的評(píng)價(jià)體系，引