學(xué)期授課計劃周次章節(jié)(課題)主要內(nèi)容教學(xué)安排及學(xué)時分配（單位：分鐘）課外作業(yè)及作業(yè)所需時間（單位：分鐘）講授課堂討論課堂練習(xí)實驗實訓(xùn)參觀復(fù)習(xí)/自學(xué)測驗考試小計1預(yù)備周預(yù)備周預(yù)備周2概述 HTML、CSS概念1.2網(wǎng)頁制作初學(xué)者上手工具1.HTML、CSS、容器概念。2.百度搜索引擎的使用。3.正確、高效使用特定關(guān)鍵字搜索相關(guān)網(wǎng)頁。201045005080記事本或hbuilder編寫簡單HTML頁面，需時30分鐘。1.3基礎(chǔ)練習(xí)1.網(wǎng)站常見頁面文件的命名規(guī)則。2.Hbuilder常規(guī)快捷鍵操作。201045005080創(chuàng)建網(wǎng)站項目2.1站點相關(guān)命名規(guī)范1.文件夾的組織。2.英文命名文件的規(guī)矩。201045005080抄寫該節(jié)所示表格的部分英文單詞，需時20分鐘。32.2圖像文件規(guī)范1.圖像文件的類型及特點。2.圖像文件合理的命名規(guī)則。3.Photoshop輸出透明底圖片。2010450050802.3書寫HTML代碼的習(xí)慣1.代碼縮進(jìn)。2.html及css注釋語句的添加。3.認(rèn)識標(biāo)簽的語義。2010450050802.4基礎(chǔ)練習(xí)2.5擴(kuò)展練習(xí)1.企業(yè)網(wǎng)頁的圖像命名規(guī)則。2.繪制企業(yè)網(wǎng)頁的框架容器結(jié)構(gòu)。201045005080繪制校園網(wǎng)首頁的框架容器結(jié)構(gòu)，需時20分鐘。4第3章盒子模型3.1盒子模型特點3.2標(biāo)準(zhǔn)盒模型1.理解盒子模型的概念及意義。2.了解盒子模型的分類：標(biāo)準(zhǔn)盒模型、怪異盒模型。3.標(biāo)準(zhǔn)盒模型的width屬性、height屬性201045005080完成【案例4】容器異常塌陷的解決，需時30分鐘。3.3盒子模型的相關(guān)屬性1.完成【案例2】Overflow溢出屬性，背景圖設(shè)置及X/Y值偏移。2.完成【案例3】，文本溢出顯示為省略號。2010450050803.3盒子模型的相關(guān)屬性1.margin外邊距屬性2.padding內(nèi)邊距屬性20104500508053.3盒子模型的相關(guān)屬性1.Border邊框?qū)傩?.background背景屬性及x/y偏移量。2010450050803.3盒子模型的相關(guān)屬性1.【案例7】完成精靈圖效果。2010450050803.4基礎(chǔ)練習(xí)1.【練習(xí)4】完成九宮格布局。20104500508063.4基礎(chǔ)練習(xí)1.瀑布流布局的主要容器的設(shè)計。201045005080【練習(xí)6】使用border-radius屬性為福娃添加造型，需時40分鐘。第4章常見的HTML標(biāo)簽與CSS樣式的搭配4.1塊元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊級元素的特征4.2常見CSS屬性表1.塊元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊級元素的特征。2.常見CSS屬性表2010450050804.3常見的選擇器類型1.標(biāo)簽選擇器的寫法及使用場景。2.Id選擇器的寫法與應(yīng)用。201045005080使用手機(jī)打開某個APP，直尺繪制容器包含結(jié)構(gòu)圖，并輔以箭頭和文字給各容器命名id，需時30分鐘。74.3常見的選擇器類型1.類選擇器的特點，類選擇器的使用場合2.同一對象應(yīng)用多個類的權(quán)重分析。2010450050804.3常見的選擇器類型1.通配符選擇器的用法2.后代選擇器的用法3.選擇器的優(yōu)先級別2010450050804.4結(jié)構(gòu)類標(biāo)簽1.Header、Nav標(biāo)簽的使用場景及寫法。2.橫向?qū)Ш綑?、縱向?qū)Ш綑诘脑O(shè)計。20104500508084.4結(jié)構(gòu)類標(biāo)簽1.article、section、footer標(biāo)簽的寫法。2.實際應(yīng)用article、section完成文章詳情頁。2010450050804.5文本類標(biāo)簽1.設(shè)置文本段落的首行縮進(jìn)、行高、字體大小、字體樣式、顏色等。2010450050804.5文本類標(biāo)簽4.6a標(biāo)簽1.Span、i無語義標(biāo)簽的應(yīng)用及使用場景。2.strong、em標(biāo)簽的區(qū)別。3.a標(biāo)簽的用法4.完成【案例12】錨點鏈接跳轉(zhuǎn)功能。20104500508094.7圖像、視音頻類標(biāo)簽1.相對、絕對路徑。2.img標(biāo)簽的類別3.完成一組圖片外觀的樣式定義。201045005080自學(xué)章節(jié)：Video、audio標(biāo)簽的簡單用法，需時60分鐘。4.8列表類標(biāo)簽1.列表類標(biāo)簽的種類及使用場景。2.ul標(biāo)簽的實際應(yīng)用2010450050804.8列表類標(biāo)簽1.【案例17】在案例16的基礎(chǔ)上，添加左側(cè)版面。201045005080104.8列表類標(biāo)簽1.ol標(biāo)簽的寫法及應(yīng)用。2.li中嵌入span標(biāo)簽產(chǎn)生列表圖標(biāo)201045005080完成【案例19】新聞排行榜，需時40分鐘。4.8列表類標(biāo)簽1.dl標(biāo)簽的構(gòu)成和應(yīng)用。2.頁腳部分多組dl標(biāo)簽的布局。2010450050804.9表格標(biāo)簽1.thead、tbody的使用及記憶方法。2.表頭Th與td標(biāo)簽的設(shè)置。3.Odd、even關(guān)鍵字的應(yīng)用。201045005080利用table標(biāo)簽制作個人簡歷，需時60分鐘。114.10表單類標(biāo)簽1.form標(biāo)簽及相關(guān)屬性。2.input標(biāo)簽及常見類型3.select標(biāo)簽及相關(guān)屬性。2010450050804.10表單類標(biāo)簽1.完成【練習(xí)3】校園霸凌問卷.html。201045005080第5章常見布局流5.1標(biāo)準(zhǔn)文檔流布局1.標(biāo)準(zhǔn)流布局的特點及使用場景。2.主體框架的html代碼及樣式設(shè)定。201045005080125.2浮動流布局1.浮動流應(yīng)用場景。2.浮動屬性的設(shè)置。3.浮動后產(chǎn)生異常的解決思路。4.完成【案例8】“讓中國挺起脊梁的科學(xué)家”頁面效果。2010450050805.3定位流布局1.定位流布局的種類。2.相對定位的概念及使用場景，相對定位的代碼實現(xiàn)。2010450050805.3定位流布局1.絕對定位的概念及應(yīng)用場景。2.完成【案例11】北京奧運頁面的代碼。201045005080【案例12】在案例11的基礎(chǔ)上，完成右上角的角標(biāo)效果，需時40分鐘。135.4基礎(chǔ)練習(xí)1.完成【練習(xí)1】“微光2023”，z-index屬性的設(shè)置。201045005080第六章個人網(wǎng)頁布局實戰(zhàn)6.3搭建項目并進(jìn)行頁面布局1.制作頁面時的標(biāo)準(zhǔn)要求。2.完成第一、二<section>區(qū)塊對應(yīng)的代碼和樣式。201045005080自學(xué)章節(jié)：6.1將網(wǎng)頁截圖進(jìn)行切片，6.2網(wǎng)站目錄、文件整理，需時120分鐘。6.3搭建項目并進(jìn)行頁面布局1.利用ul標(biāo)簽完成第三個版塊的結(jié)構(gòu)。2.使用nth-of-type完成版塊三的樣式。3.利用dl標(biāo)簽完成第四個版塊的結(jié)構(gòu)。201045005080146.3搭建項目并進(jìn)行頁面布局6.4代碼整理1.完成頁腳區(qū)對應(yīng)的布局和樣式。2.完成樣式轉(zhuǎn)外部樣式表。201045005080第七章CSS進(jìn)階知識7.2進(jìn)一步了解CSS樣式優(yōu)先權(quán)7.3掌握更多的CSS選擇器1.CSS樣式優(yōu)先權(quán)2.子元素選擇器、相鄰兄弟選擇器、兄弟元素選擇器的概念及應(yīng)用。2010450050807.3掌握更多的CSS選擇器1.屬性選擇器概念及應(yīng)用場景2.常見屬性選擇器的寫法201045005080157.3掌握更多的CSS選擇器1.偽類選擇器的應(yīng)用場景及種類。2.:Hover選擇器的應(yīng)用。3.:nth-of-type(n)選擇器和:nth-last-of-type()選擇器的應(yīng)用。201045005080完成【案例6】《江城子·密州出獵》的練習(xí)，需時30分鐘。7.3掌握更多的CSS選擇器1.::before偽元素選擇器、::after偽元素選擇器。2.::before偽元素選擇器完成排行榜的項目列表圖標(biāo)。2010450050807.4CSS過渡與動畫1.transition屬性的書寫格式，速度曲線過渡參數(shù)。2.@keyframes規(guī)則的創(chuàng)建與應(yīng)用。20104500508016第八章商業(yè)網(wǎng)站布局實戰(zhàn)1.確定研究目標(biāo)。2.搜集相關(guān)圖文素材。3.網(wǎng)站目錄及文件的搭建、整理。2010450050808.4制作首頁布局1.完成首頁頁頭區(qū)域容器結(jié)構(gòu)。2.編寫對應(yīng)的css樣式。2010450050808.4制作首頁布局1.編寫內(nèi)容區(qū)對應(yīng)的容器結(jié)構(gòu)。2.編寫對應(yīng)的css樣式。201045005080178.4制作首頁布局1.編寫頁腳區(qū)對應(yīng)的容器結(jié)構(gòu)。2.編寫對應(yīng)的css樣式。2010450050808.4制作首頁布局1.完成頁頭、內(nèi)容區(qū)、頁腳區(qū)域的靜態(tài)CSS代碼的優(yōu)化。2.完成頁面中具備交互效果的代碼優(yōu)化，包括：盒子陰影特效、導(dǎo)航交互特效。201045005080自行完成代碼的整理工作，刪除輔助用的線框時導(dǎo)致細(xì)微位置、尺寸的變化，要求在相關(guān)屬性進(jìn)行糾正。需時30分鐘。8.5設(shè)計一級欄目頁面1. 完成一級頁面的頁頭部分的制作。2.修改海報區(qū)代碼。201045005080188.5設(shè)計一級欄目頁面1.主體內(nèi)容的ul結(jié)構(gòu)及樣式設(shè)置。2.翻頁按鈕的ul結(jié)構(gòu)及樣式設(shè)置。201045005080自行完成代碼的整理工作，需時30分鐘。8.6設(shè)計詳情頁布局1.完成主要框架的代碼復(fù)用。2.頁頭區(qū)結(jié)構(gòu)和樣式的修改。3.定義內(nèi)容區(qū)容器結(jié)構(gòu)，并添加圖文元素。2010450050808.6設(shè)計詳情頁布局1.完成內(nèi)容區(qū)底