网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例26美丽山东网站

教案31案例26美丽山东网站（3）计划学时2学时知识目标掌握网站开发的一般流程，了解Web发展历史及其未来方向；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握CSS3的高级应用，实现过渡、变形、翻转效果；掌握CSS3动画属性实现图片轮播设计。能力目标具有根据企业的需求撰写企业网站建设、规划的能力；具有运用所学知识与技能进行Web前端开发与制作的能力。素质目标培养和提高学生感受美、表现美和创造美的能力；培养学生严谨的科学态度，提高分析和解决实际问题的能力；树立学生自主学习和终生学习的观念。教学重点图片切片工具；CSS3过渡、变形、翻转及动画属性应用。教学难点CSS3属性高级应用。教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（制作文化遗产内容部分）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述内容部分（文化遗产）分为标题和图片组两部分，当鼠标指针悬停于任意一张图片上时，图片翻转，出现该图片的相关介绍，该效果是通过3D变形来实现的。第2张图片是其中一张图片翻转后的效果。二、案例分析与实现1．案例分析图中所示的网页内容由2部分构成，分别为标题和内容块。标题使用<header><h1>标记定义，内容块使用无序列表<ul>和<li>标记定义，并且在<li>标记内嵌套1个<img>和1个<div>标记，<div>标记用于定义图片的相关介绍块。2．案例实现学生同步操作，做学教一体（1）搭建内容部分（文化遗产）结构代码略。（2）定义内容部分（文化遗产）CSS样式代码略。三、制作版权信息学生同步操作，做学教一体（1）搭建版权信息结构（2）定义版权信息CSS样式第2学时（制作初识山东页面头部及文旅资讯部分）一、制作头部和导航条此处同网站主页，略。二、制作视频宣传部分1．案例分析网页视频宣传部分为左（图片）、右（视频）2个部分。2．案例实现学生同步操作，做学教一体（1）搭建视频宣传部分结构（2）定义视频宣传部分CSS样式三、制作文旅资讯部分1．案例分析网页文旅部分为标题和图文资讯2个部分，图文资讯又分为左（图片）、右（资讯）2个部分。当鼠标滑过图片有不透明度的变化，鼠标经过文字，文字变化颜色。左侧部分又分成左右2个块，用<div>定义，右边<div>中放3张图片，两个盒子水平排列；右侧资讯部分用5个<div>定义每条资讯条目，资讯条目再分为左右2个块，左侧为日期，右侧为文本信息。由于不同文本样式各不相同，因此单独为不同样式的文本用类选择器区分定义。2．案例实现学生同步操作，做学教一体（1）搭建文旅资讯部分结构（2）定义文旅资讯部分CSS样式四、小结本案例综合利用HTML5+CSS3最新网站开发技术，制作了美丽山东网站主页文化遗产内容部分、初识山东页面的文旅资讯部分。实现图片翻转、视频播放等效果，是重点掌握的内容。作业1：课本课后习题与实训。作业2：扫码观看案例26中初识山东页面景点攻略部分及景点详情页的微课，学习制作过程。课前小组讨论培养学生团队合作，共同探讨的