《html+css+javascript網(wǎng)頁(yè)制作案例教程》課程教學(xué)設(shè)計(jì)

1、1《HTML+CSS+JavaScript 網(wǎng)頁(yè)制作案例教程》教學(xué)設(shè)計(jì)課程名稱： 課程名稱： HTML+CSS+JavaScript HTML+CSS+JavaScript 網(wǎng)頁(yè)制作案例教 網(wǎng)頁(yè)制作案例教程授課年級(jí)： 授課年級(jí)： 2015 2015 年級(jí) 年級(jí) 授課學(xué)期： 授課學(xué)期： 2015 2015 學(xué)年第二學(xué)期 學(xué)年第二學(xué)期教師姓名： 教師姓名： 某某老師 某某老師 201 年 月 日14外

2、邊距之和；? 所以，盒子的總寬度= width（300px）+左內(nèi)邊距（30px）+左右邊框?qū)挾戎停?px*2） =336px；說(shuō)明 說(shuō)明：教師可根據(jù)學(xué)生對(duì)上述問(wèn)題的回答情況，對(duì)以上問(wèn)題進(jìn)行簡(jiǎn)單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。本課時(shí)內(nèi)容學(xué)習(xí) 本課時(shí)內(nèi)容學(xué)習(xí)? 分組討論 分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題 分組討論以下問(wèn)題：為了使網(wǎng)頁(yè)更易讀，經(jīng)常將網(wǎng)頁(yè)信息以列表的形式呈現(xiàn)，例如，淘寶商城首頁(yè)的商品服務(wù)分類、排列有序，呈

3、現(xiàn)為列表的形式。其實(shí)，在 HTML 中，提供了 3 種常用的列表，分別為無(wú)序列表、有序列表和定義列表。那么，請(qǐng)舉例說(shuō)明什么是“無(wú)序列表”和“有序列表”？它們之間有什么區(qū)別？請(qǐng)小組代表 小組代表對(duì)以上問(wèn)題發(fā)表見解 發(fā)表見解。教師 教師對(duì)上述問(wèn)題進(jìn)行解釋 解釋：? 無(wú)序列表是網(wǎng)頁(yè)中最常用的列表，之所以稱為“無(wú)序列表”，是因?yàn)槠涓鱾€(gè)列表項(xiàng)之間為并列關(guān)系，沒(méi)有順序級(jí)別之分。例如傳智播客官網(wǎng)的導(dǎo)航欄結(jié)構(gòu)清晰，各列表項(xiàng)之間（如“網(wǎng)頁(yè)平面”與“jav

4、a 培訓(xùn)”）排序不分先后，這個(gè)導(dǎo)航欄就可以看做一個(gè)無(wú)序列表。? 有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)會(huì)按照一定的順序排列，例如網(wǎng)頁(yè)中常見的歌曲排行榜、游戲排行榜等都可以通過(guò)有序列表來(lái)定義。? 無(wú)序列表使用標(biāo)記定義，為具體的列表項(xiàng)。有序列表使用標(biāo)記定義，為具體的列表項(xiàng)。? 案例描述 案例描述在制作電商網(wǎng)站時(shí)，通常需要使用一些精美的懸浮框?qū)ι唐沸畔⑦M(jìn)行簡(jiǎn)單的分類，這樣即可以方便消費(fèi)者搜索商品，也可以使網(wǎng)頁(yè)結(jié)構(gòu)變得清晰美觀。本節(jié)將運(yùn)用無(wú)