《html+css+javascript網頁制作案例教程》課程教學設計

1、1《HTML+CSS+JavaScript 網頁制作案例教程》教學設計課程名稱： 課程名稱： HTML+CSS+JavaScript HTML+CSS+JavaScript 網頁制作案例教 網頁制作案例教程授課年級： 授課年級： 2015 2015 年級 年級 授課學期： 授課學期： 2015 2015 學年第二學期 學年第二學期教師姓名： 教師姓名： 某某老師 某某老師 201 年 月 日14外

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

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

4、a 培訓”）排序不分先后，這個導航欄就可以看做一個無序列表。? 有序列表即為有排列順序的列表，其各個列表項會按照一定的順序排列，例如網頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。? 無序列表使用標記定義，為具體的列表項。有序列表使用標記定義，為具體的列表項。? 案例描述 案例描述在制作電商網站時，通常需要使用一些精美的懸浮框對商品信息進行簡單的分類，這樣即可以方便消費者搜索商品，也可以使網頁結構變得清晰美觀。本節(jié)將運用無