HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第15章 网页布局综合案例BABY HOUSING网上商店.doc

PAGE19

网页设计与制作

授课教案

学年第学期

学院（部）专业（学部）

课程名称

电子商务网页设计与制作

任课教师

课内形式

理论教学□课内实践□理实一体?习题复习□考核评价□其他活动□

学习量

安排

课内：

课外形式

调查分析?小组研讨□实践任务?理论探究□考核评价□汇报展示□其他活动?

课外：

序号

11

授课日期

月日

月日

月日

月日

授课班级

课内教学内容：

第13章综合实训：开发视频网页

课外学习任务：

（1）课前：

以小组为单位，讨论网上商店的设计，交互方式等相关知识，通过查询了解当前流行的网上商店网页布局风格并以PPT的形式记录下来。

教学目标：

知识目标

掌握HTM+CSS布局。

掌握JavaScript语言滚动事件。

能力目标

能够独立实现网上商店的静态布局；

能够独立实现网上商店的各项动态交互效果。

素质目标

较强的专业知识和自学能力；

丰富知识结构，提升专业知识；

掌握HTML+CSS+JavaScript动态网页编写技能，理解并应用专业知识。

重点难点及解决方法：

（1）重点：网上商店静态网页布局

解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解通过HTML+CSS实现网上商店布局，引导学生积极思考，掌握相应知识；同时通过课堂在线展示，使学生可以更直观的了解网页编写过程中可能遇到的问题以及解决方法；培养学生的思维能力和分析问题解决问题的能力。

（2）难点：网上商店的动态交互效果

解决方法：通过代码讲解+在线演示的的方式教学，细致讲解网页中各种动态效果是如何通过JavaScript代码实现的。帮助学生掌握JavaScript代码对网页动态交互效果的实现方法和技巧。从实用的角度帮助学生提高专业知识。

课内教学授课地点：

教学媒体：微课、PPT课件、网页图片、相关教学视频等。

设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。

其它资源：与本次课相关的专业技术论文电子版。

学习效果评价方式：

对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；

对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。

课后小结：

填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。

课内教学内容及过程

时间分配

方法

及手段

1.案例分析

BABYHOUSING网站首页在垂直方向分为上、中、下3部分。其中，上、下两部分的背景会自动延伸；中间的内容区域分为左、右两列，左栏为主要内容，右栏由若干圆角框构成。网站首页效果如图15.1所示。

图15.1网站首页效果

此外，这个页面具有很好的交互提示功能。例如，页头部分的导航菜单具有鼠标指针经过时发生变化的效果，如图15.2所示。

图15.2具有鼠标指针经过时效果的导航菜单

2.内容分析

在设计网页之前，首先要明确网站的内容，即通过网页要传达给访问者什么信息，这些信息中哪些是最重要的、哪些是相对重要的，以及这些信息应该如何组织。

现以BABYHOUSING网上商店的首页为例进行说明。首先，要有明确的网站名称和标志。此外，要给访问者方便地了解网站所有者自身信息的途径，包括指向关于我们、联系方式等内容的链接。接下来，网站的根本目的是销售商品，因此必须有清晰的商品分类，以及合理的导航栏。网上商店的商品通常都是以类别组织的，首页上通常会展示最受欢迎的和重点推荐的商品，因为首页的访问量明显比其他页面大得多，这相当于做广告了。

网站首页要展示的内容大致包括以下几种：标题、标志、主导航栏、关于我们、登录账号、购物车、今日推荐、最受欢迎、分类推荐、搜索商品框、商品分类、特别提示、版权信息。

3.原型设计

分析完网页内容后，还要对网站的完整功能和内容进行全面分析。如果有条件，应该制作出线框图，这个过程专业上称为“原型设计”。例如，在具体制作网页之前，就可以先设计图15.3所示的网站首页原型线框图。

网页原型设计也是分步骤完成的。例如，首先要考虑把一个页面从上至下依次分为3部分，如图15.4所示。

然后将每个部分逐渐细化，例如，页头部分可以细化为图15.5所示的效果。

图15.4首页分成3部分的效果 图15.5页头部分结构图

中间内容部分分为左、右两栏，如图15.6所示，再进一步细化为图15.7所示的效果。

页脚部分比较简单，这里不再阐述。这时将这3部分组合起来，就形成了图15.3所示的效果。

图15.6中间内容部分结构图 图15.7对内容部分进行细化