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

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

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

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

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