《html+css+javascript網(wǎng)頁制作案例教程》_教學(xué)大綱

《《html+css+javascript網(wǎng)頁制作案例教程》_教學(xué)大綱》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效《HTML+CSS+JavaScript網(wǎng)頁制作案例教程》課程教學(xué)大綱（課程英文名稱）課程編號：201509210011學(xué)分：5學(xué)分學(xué)時：64學(xué)時（其中：講課學(xué)時：45上機學(xué)時：19）先修課程：計算機基礎(chǔ)、計算機網(wǎng)絡(luò)、計算機應(yīng)用后續(xù)課程：UI設(shè)計、JavaScript網(wǎng)頁特效適用專業(yè)：信息及其計算機相關(guān)專業(yè)開課部門：計算機系一、課程的性質(zhì)與目標(biāo)《HTML+CSS+JavaScript網(wǎng)頁制作案例教程)》是面向計算機相關(guān)專業(yè)的一門專業(yè)基礎(chǔ)課，涉及網(wǎng)頁基礎(chǔ)、HTML標(biāo)記、CSS樣式、網(wǎng)頁布局、JavaScript編程基

2、礎(chǔ)與事件處理等內(nèi)容。通過本課程的學(xué)習(xí)，學(xué)生能夠了解HTML、CSS及JavaScript語言的發(fā)展歷史及未來方向，熟悉網(wǎng)頁制作流程、掌握常見的網(wǎng)頁布局效果、學(xué)會制作各種企業(yè)、門戶、電商類網(wǎng)站。二、課程的主要內(nèi)容及基本要求第一章網(wǎng)頁那點事（2學(xué)時）[知識點]?認(rèn)識網(wǎng)頁?常見的互聯(lián)網(wǎng)專業(yè)術(shù)語?Web標(biāo)準(zhǔn)?HTML簡介?CSS簡介?JavaScript簡介?常用瀏覽器介紹?Dreamweaver工具的使用博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效?使用Dreamweaver創(chuàng)建第一個頁面[重點]?Web標(biāo)準(zhǔn)?Dreamweaver工具的使用[難點]?Web標(biāo)準(zhǔn)?

3、Dreamweaver工具創(chuàng)建第一個頁面[基本要求]?了解Web標(biāo)準(zhǔn)，明確HTML、CSS及JavaScript在其中的作用。?熟悉Dreamweaver工具的基本操作，能使用Dreamweaver創(chuàng)建簡單的網(wǎng)頁。第二章從零開始構(gòu)建HTML頁面（4學(xué)時）[相關(guān)案例]【案例1】簡單的網(wǎng)頁：【案例2】新聞頁面：【案例3】圖文混排：[知識點]?HTML文檔基本格式博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效?單標(biāo)記與雙標(biāo)記?標(biāo)題與段落標(biāo)記?HTML文檔頭部相關(guān)標(biāo)記?font標(biāo)記?標(biāo)記的屬性?文本格式化標(biāo)記?圖像標(biāo)記?相對路徑與絕對路徑?常用圖像格式?特殊字符標(biāo)記[

4、重點]?HTML文檔基本格式?標(biāo)記的屬性?圖像標(biāo)記?相對路徑與絕對路徑[難點]?相對路徑與絕對路徑[學(xué)習(xí)目標(biāo)]?掌握HTML文檔基本格式，能夠書寫規(guī)范的HTML網(wǎng)頁。?掌握標(biāo)題、段落及文字標(biāo)記，可以合理地使用它們定義網(wǎng)頁元素。?掌握圖像標(biāo)記，學(xué)會制作圖文混排頁面。第三章使用CSS技術(shù)美化網(wǎng)頁（8學(xué)時）[相關(guān)案例]【案例4】文字Logo：【案例5】專題欄目：博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效【案例6】搜索頁面：[知識點]?CSS樣式規(guī)則?引入CSS樣式表?CSS基礎(chǔ)選擇器?CSS字體樣式屬性?CSS文本外觀屬性?CSS復(fù)合選擇器?CSS層疊性與繼承性

5、?CSS優(yōu)先級[重點]?CSS樣式規(guī)則?引入CSS樣式表?CSS復(fù)合選擇器?CSS層疊性與繼承性?CSS優(yōu)先級[難點]?CSS復(fù)合選擇器?CSS優(yōu)先級[基本要求]?掌握CSS樣式規(guī)則，能夠書寫規(guī)范的CSS樣式代碼。?掌握CSS字體樣式及文本外觀屬性，能夠控制頁面中的文本樣式。博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效?掌握CSS復(fù)合選擇器，可以快捷選擇頁面中的元素。?理解CSS層疊性、繼承性與優(yōu)先級，學(xué)會高效控制網(wǎng)頁元素。第四章CSS盒子模型（8學(xué)時）[相關(guān)案例]【案例7】音樂盒：【案例8】用戶中心：【案例9】咖啡店banner：博學(xué)谷——讓IT教學(xué)更簡單

6、，讓IT學(xué)習(xí)更有效【案例10】圖標(biāo)導(dǎo)航欄：[知識點]?認(rèn)識盒子模型?div標(biāo)記?邊框?qū)傩?內(nèi)邊距屬性?外邊距屬性?背景屬性?元素的類型?span標(biāo)記?元素的轉(zhuǎn)換[重點]?div標(biāo)記?邊框?qū)傩?內(nèi)邊距屬性?外邊距屬性?背景屬性?元素的轉(zhuǎn)換[難點]?背景屬性?元素的類型?元素的轉(zhuǎn)換[基本要求]?掌握盒子模型相關(guān)屬性，能夠使用它們熟練地控制網(wǎng)頁元素。?理解塊元素與行內(nèi)元素的區(qū)別，能夠?qū)λ鼈冞M(jìn)行轉(zhuǎn)換。博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效第五章列表與超鏈接（6學(xué)時）[相關(guān)案例]【案例11】精美電商懸浮框：【案例12】二維碼名片：【案例13】電商團購懸浮框：博學(xué)

7、谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效【案例14】唱吧導(dǎo)航欄：唱吧導(dǎo)航欄默認(rèn)效果鼠標(biāo)移上歌曲分類時[知識點]?無序列表?有序列表?定義列表?定義列表實現(xiàn)圖文混排?列表嵌套?list-style復(fù)合屬性?背景圖像定義列表項目符號?超鏈接標(biāo)記?清除超鏈接圖像的邊框?鏈接偽類?錨點鏈接博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效[重點]?無序列表?定義列表?背景圖像定義列表項目符號?超鏈接標(biāo)記?鏈接偽類[難點]?背景圖像定義列表項目符號?鏈接偽類[基本要求]?掌握無序、有序及定義列表的使用，可以制作常見的網(wǎng)頁列表模塊。?掌握超鏈接標(biāo)記的使用，能夠使用

8、超鏈接定義網(wǎng)頁元素。?掌握CSS偽類，會使用CSS偽