網(wǎng)頁制作案例教程HTML5+CSS3教學大綱

《網(wǎng)頁制作案例教程（HTML5+CSS3）》

課程教學大綱課程編號：學分：4學分學時：64學時（其中：講課學時：37學時上機學時：27學時）先修課程：信息技術、office綜合應用后續(xù)課程：JavaScript網(wǎng)頁特效適用專業(yè)：計算機網(wǎng)絡及相關專業(yè)一、課程的性質與目標《網(wǎng)頁制作案例教程（HTML5+CSS3）》是面向計算機相關專業(yè)的一門專業(yè)基礎課，通過案例講解來學習網(wǎng)頁制作入門、添加網(wǎng)頁內容、CSS基礎，設置文本字體樣式，盒子模型，元素的浮動和定位，多媒體元素，表單的應用，CSS高級選擇器，CSS的過渡、變形和動畫效果等內容。通過本課程的學習，要求學生熟練掌握網(wǎng)頁編輯工具的使用，具備網(wǎng)站設計與制作的能力，根據(jù)課程面對的工作任務和職業(yè)能力要求，培養(yǎng)學生良好的溝通表達、團隊協(xié)作等職業(yè)素質。二、課程設計理念與思路課程設計理念：依據(jù)“Web前端開發(fā)”1+X認證標準和近年來國家大賽選取內容，落實立德樹人的根本任務，以項目為載體，以任務實施為主線，把工作情景和教學環(huán)境有機地結合起來。將知識和技能融入任務實施的過程中。課程設計思路：基于工作過程開發(fā)課程內容，以行動為導向進行教學內容設計，以學生為主體，以案例（項目）實訓為手段，設計除理論學習與技能掌握相融合的課程內容體系。教學整體設計“以職業(yè)技能培養(yǎng)為目標，以案例（項目）任務實現(xiàn)為載體、理論學習與時間操作相結合”。三、教學條件要求開發(fā)工具：VSCode四、課程的主要內容及基本要求第一章網(wǎng)頁制作入門學習單元網(wǎng)頁制作入門學時4學時學習目標了解Web標準。理解網(wǎng)頁基本概念。熟悉HTML5頁面文檔結構。會安裝和使用Web開發(fā)工具，能夠使用VSCode工具創(chuàng)建簡單的網(wǎng)頁。學習內容知識點了解掌握重點難點網(wǎng)站和網(wǎng)頁√瀏覽器√Web標準√URL地址√HTML5發(fā)展歷程√HTML5優(yōu)勢√Web頁面的開發(fā)工具√VisualStudioCode工具√制作簡單的HTML5頁面√HTML5基本文檔結構√HTML標記√屬性√注釋√添加網(wǎng)頁內容學習單元添加網(wǎng)頁內容學時8學時學習目標掌握標題、段落等文本標記的使用。了解文本格式化標記，會輸入特殊字符。掌握圖像標記，會在網(wǎng)頁中插入圖像，設置圖像屬性。熟悉超鏈接標記，知道超鏈接分類。熟悉列表標記，能夠定義列表，了解列表嵌套。會使用標題、段落、圖像、列表標記制作簡單的網(wǎng)頁。能夠通過在頁面上面添加超鏈接元素，實現(xiàn)不同頁面之間的跳轉。學習內容知識點了解掌握重點難點標題標記√段落標記√換行和水平線標記√文本格式化標記√特殊字符√網(wǎng)頁中常用的圖像格式√圖像標記和屬性√圖像地址√超鏈接標記和屬性√超鏈接分類√無序列表√有序列表√定義列表√列表嵌套√第三章CSS基礎學習單元CSS基礎學時6學時學習目標了解CSS標準及發(fā)展歷史；掌握CSS樣式規(guī)則及引入方式；熟悉CSS基本選擇器；理解CSS的優(yōu)先級、繼承性和層疊性。學習內容知識點了解掌握重點難點CSS標準√CSS樣式規(guī)則√引入CSS樣式表√CSS基礎選擇器√CSS層疊性和繼承性√CSS優(yōu)先級√√第四章設置文本字體樣式學習單元設置文本字體樣式學時6學時學習目標熟悉CSS字體屬性，能夠運用相應的屬性定義字體樣式。熟悉CSS文本屬性，能夠運用相應的屬性定義文本樣式。會設置文字陰影效果。了解特殊字體的使用。學習內容知識點了解掌握重點難點設置字體樣式屬性√設置文本外觀屬性√設置文字陰影及模糊效果√使用服務器字體√設置超鏈接樣式√第五章盒子模型學習單元盒子模型學時8學時學習目標熟悉盒子模型及其常用的屬性；理解行內元素、塊元素和行內塊元素，能夠在各類元素間進行轉換；熟悉盒子的新增樣式，能夠使用新增樣式；熟悉表格標記，能夠創(chuàng)建簡單表格；熟悉HTML5新增文檔結構元素。學習內容知識點了解掌握重點難點認識盒子模型√<div>標記√盒子的寬與高√border屬性√margin屬性√背景屬性√√行內元素√塊元素√行內塊元素√元素的轉換√圓角邊框√盒子陰影√漸變背景√表格元素√HTML5新增文檔結構元素√第六章元素的浮動和定位學習單元元素浮動和定位學時8學時學習目標理解元素的浮動，能為元素設置浮動效果；熟悉清除浮動的方法，可以使用不同方法清除浮動；掌握元素的定位方法。學習內容知識點了解掌握重點難點設置浮動效果√√清除浮動√相對定位relative√√絕對定位absolute√√固定定位fixed√z-index屬性√第七章多媒體元素學習單元多媒體元素學時2學時學習目標了解HTML5支持的音頻和視頻格式；掌握HTML5中音頻的相關屬性，能夠在HTML5中添加音頻文件；掌握HTML5中視頻的相關屬性，能夠在HTML5頁面中添加視頻文件。學習內容知識點了解掌握重點難點audio標記√√video標記√√source標記√第八章表單的應用學習單元表單的應用學時6學時學習目標理解表單的構成，能夠根據(jù)不同情況選擇相應的表單元素；掌握表單相關標記，能夠創(chuàng)建各種表單元素。學習內容知識點了解掌握重點難點Form表單元素√Input控件√√Select控件√label控件√多行文本控件√button控件√HTML5新增控件√HTML5新增input類型√HTML5新增表單屬性√第九章CSS高級選擇器學習單元CSS高級選擇器學時4學時學習目標理解CSS關系選擇器，能夠準確判斷元素與元素間的關系；熟悉CSS屬性選擇器，能夠運用屬性選擇器為頁面中的元素添加樣式；熟悉偽類和偽對象選擇器，掌握其具體用法。學習內容知識點了解掌握重點難點屬性選擇器√關系選擇器√√子代選擇器√√兄弟選擇器√偽類選擇器√偽對象選擇器√第十章CSS3過渡、變形和動畫效果學習單元CSS3過渡、變形和動畫效果學時4學時學習目標掌握CSS3變形和過渡屬性的設置；掌握@keyframes語法規(guī)則；掌握animate動畫屬性的使用。學習內容知識點了解掌握重點難點設置變形√更改變形的中心√transition屬性√@keyframes√animation-name屬性√animation-duration屬性√animation-timing-function屬性√animation-delay屬性√animation-iteration-count屬性√animation-direction屬性√animation屬性√第十一章綜合實例

學習單元綜合實例學時8學時學習目標了解網(wǎng)頁的整體結構；了解分析、規(guī)劃、設計、制作網(wǎng)頁的流程；掌握HTML5基本元素的使用；掌握文字字體樣式、基本選擇器、盒子模型、浮動、定位的使用；掌握表單、高級選擇器、過渡、變形及動畫的使用。學習內容知識點了解掌握重點難點案例分析√網(wǎng)頁布局規(guī)劃實現(xiàn)√√頭部內容制作√√內容欄目制作√√底部內容制作√…………………五、學時分配章目講課上機合計第一章網(wǎng)頁制作入門2學時2學時4學時第二章添加網(wǎng)頁內容5學時3學時8學時第三章CSS基礎4學時2學時6學時第四章設置文本字體樣式4學時2學時6學時第五章盒子模型5學時3學時8學時第六章元素的浮動和定位5學時3學時8學時第七章多媒體元素1學時1學時2學時第八章表單的應用4學時2學時6學時第九章CSS高級選擇器2學時2學時4學時第十章CSS3過渡、變形和動畫效果1學時3學時4學時第十一章制作“河南特色文化旅游”網(wǎng)頁綜合實例4學時4學時8學時合計37學時27學時64學時六、考核模式與成績評定辦法本課程為考試課程，期末考試采用百分制的閉卷考試模式。學生的考試成績由平時成績（40%）和期末考試（60%）組成，其中，平時成績包括出勤（5%）、作業(yè)（15%）、上機成績（20%）。序號考核方式考核內容成績比例（%）1平時考核包括課堂考勤10課堂互動表現(xiàn)實訓練習情況202項目模塊考核學生通過綜合實訓項目的完成對整個課程內容進行整合，考核是否能夠獨立完成網(wǎng)站作品的能力303綜合項目考核綜合課程全部內容，對學生技能掌握情況進行檢驗。主要考查學生綜合職業(yè)素質，包括耐心、細心、溝通能力、協(xié)作能力、分析問題能力等。40合計100七、選用教材和主要參考書本大綱是根據(jù)教材《網(wǎng)頁制作案例教程（HTML5+CSS3）》所設計的。參考書籍：傳智播客.《網(wǎng)頁設計與制作（HTML+CSS）》中國鐵道出版社.201408傳智播客.《HTML+CSS+JavaScript網(wǎng)頁制作案例教程》人民郵電出版社.201508八、大綱說明本課程的授課模式為：課堂授課