网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案模块5、6 使用JavaScript添加动态效果、综合案例

上传人：y*** IP属地：山东上传时间：2024-01-29 格式：DOC 页数：49 大小：3.30MB 积分：30 举报 版权申诉

网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案模块5、6 使用JavaScript添加动态效果、综合案例_第2页

网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案模块5、6 使用JavaScript添加动态效果、综合案例_第3页

网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案模块5、6 使用JavaScript添加动态效果、综合案例_第4页

网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案模块5、6 使用JavaScript添加动态效果、综合案例_第5页

已阅读5页，还剩44页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

模块五使用JavaScript添加动态效果本模块通过5个案例的实现，介绍使用JavaScript添加网页动态效果的方法。这5个案例包括输出信息、表单验证、简单计算器、限时促销和轮播图等，通过这些案例的实现掌握使用JavaScript的基本使用方法。知识目标：掌握将JavaScript引入网页的方式；掌握JavaScript的基本语法；掌握JavaScript的事件与事件调用；掌握BOM对象的常用方法和属性；掌握DOM对象的常用方法和属性。能力目标：会编写简单的JavaScript程序；能阅读并理解简单的JavaScript程序；使用

JavaScript

编写代码添加网页动态效果。素质目标：在编写代码中提升逻辑思维能力；在编写代码中培养认真细致、精益求精的工匠精神。教案20案例20输出信息计划学时2学时知识目标了解JavaScript的常见应用熟悉JavaScript的语法规则掌握JavaScript的引入方式掌握JavaScript的常用的输入输出方法能力目标能说出JavaScript的常见应用会使用JavaScript编写简单的脚本程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点JavaScript的引入方式prompt、alert、write方法的使用教学难点prompt、alert、write方法的灵活使用教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建JavaScript程序，运行效果如图20-1~图20-3所示。具体要求如下。（1）弹出输入对话框，输入姓名，单击“确定”按钮后，弹出显示信息对话框，显示××您好！。（2）单击显示信息对话框中的“确定”按钮后，在网页上显示信息“欢迎学习JavaScript！”。（3）“欢迎学习JavaScript！”为一级标题、红色，在浏览器中水平居中显示。图20-1输入对话框图20-2显示信息对话框图20-3在网页上输出信息案例分析图20-1所示的用于输入姓名的输入框需要使用prompt()方法定义，图20-2所示的显示信息对话框需要使用alert()方法定义，图20-3所示的在网页上输出的信息需要使用document对象的write()方法定义。“欢迎学习JavaScript！”文字需要使用CSS定义标题的样式。案例实现学生同步操作，做学教一体<!DOCTYPE

html><html>

<head>

<meta

charset="utf-8"

<style

type="text/css">

h1{

color:#F00;

text-align:center;

}

</style>

</head>

<body>

<script

type="text/javascript">

var

name=prompt("请输入您的姓名");

//弹出输入对话框，输入姓名,存入变量name

alert(name+"您好！");

//弹出显示信息对话框

document.write("<h1>欢迎学习JavaScript!</h1>");

//在网页上输出信息

</script>

</body></html>第2学时（相关知识点）一、JavaScript的常见应用（5分钟）1．动态交互效果2．数据验证3．结合流行框架开发移动应用二、JavaScript的语法规则（5分钟）（1）JavaScript严格区分大小写，在编写代码时一定注意大小写的正确性。（2）一般在每条语句结束后加分号。（3）JavaScript的注释符号是//（单行注释）和/*

……

*/（多行注释）。三、JavaScript的引入方式（20分钟）1．直接将JavaScript代码嵌入HTML中（内嵌式）<script

type="text/javascript">

JavaScript语句</script>例20-1<!DOCTYPE

html><html>

<head>

<meta

charset="utf-8"

</head>

<body>

<script

type="text/javascript">

alert("李华，欢迎来到JavaScript的世界！");

//在弹出的对话框中显示信息

</script>

</body></html>

2．链接外部的JavaScript代码（外链式）例20-2<!DOCTYPE

html><html>

<head>

<meta

charset="utf-8">

<script

src="js/01.js"

type="text/javascript"></script>

</head>

<body>

</body></html>3．直接在HTML标记中使用（行内式）（1）使用“javascript:”调用。<a

href="javascript:alert('希望你成为前端开发的高手')">

欢迎来到JavaScript世界！</a>（2）结合事件调用。<input

type="button"

value="显示信息"

onclick="alert('Hello,

Welcome!');"

/>四、输入/输出方法（10分钟）1．prompt()方法2．alert()方法3．write()方法五=2\*ROMAN、小结（5分钟）重点掌握JavaScript脚本代码引入的三种方式（内嵌式、外链式、行内式）和输入输出的方法。作业1：课本课后习题与实训作业2：扫码观看案例21中的微课，自学表单验证在案例分析时培养学生分析问题解决问题的能力。在代码实现中遵循正确的代码编写规范。教案21案例21表单验证计划学时2学时知识目标掌握JavaScript中变量命名、声明和赋值熟悉JavaScript中常用的数据类型掌握JavaScript的运算符和函数使用方法了解JavaScript的DOM(文档对象模型)能力目标能使用JavaScript编写代码进行表单验证会使用开发者工具调试JavaScript的程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点JavaScript的基本语法表单验证的方法教学难点使用JavaScript获取元素教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建注册表单，编写JavaScript代码，在表单提交时进行数据验证，运行效果如图21-1和图21-2所示。具体要求如下。（1）在注册表单中添加一个文本输入框、两个密码输入框和一个命令按钮。（2）表单样式如图21-1所示。（3）如果小米ID和密码输入不符合要求或者密码输入和确认密码输入不一致，则在单击“注册”按钮时会弹出警示对话框，如图21-2所示。图21-1注册表单图21-2单击“注册”按钮时对表单进行验证案例分析创建注册表单，使用<form>标记定义表单，在表单中添加3个<input>标记用于输入小米ID和密码，添加一个“注册”按钮，定义表单和控件的样式。创建脚本文件，编写JavaScript代码，使用document对象的getElementById()方法获取输入框中的数据，判断是否满足要求。案例实现学生同步操作，做学教一体1．创建表单：<form

action=""

method="get"

class="register"

onsubmit="validate()">

<h1>小米用户注册</h1>

"required"

<p><input

type="password"

id="txtPwd1"

class="pwd"

placeholder="密码"

required="required"/></p>

<p><input

type="submit"

class="sub"

value="注册"

/></p></form>2．定义表单的CSS样式3．创建JavaScript脚本文件function

validate()

{var

userID

document.getElementById('txtID').value; //获取输入的小米IDif

(userID.length

userID.length

20)

{

//判断小米ID的长度

alert("小米ID必须为6～20个字符，请重新输入！");

//在警示对话框中显示提示信息

return

false;

}

var

password1

document.getElementById('txtPwd1').value;

//获取输入的密码

(password1.length

password1.length

10)

{

alert("密码必须为6～10个字符，请重新输入！");

//在警示对话框中显示提示信息

return

false;

}

var

password2

document.getElementById('txtPwd2').value;

//获取输入的确认密码

if(password1!==password2){

alert("两次输入密码不一致！");

return

false;

}}第2学时（相关知识点）一、变量1．变量的命名必须以字母或下画线开头，中间可以是数字、字母或下画线。变量名不能包含空格、加号、减号等字符。不能使用JavaScript的关键字，如var、int等。JavaScript的变量名是严格区分大小写的2．变量的声明和赋值var

name;

//一次声明一个变量var

name,gender,age;

//一次声明多个变量var

name="李华";

//在声明的同时初始化变量var

name="李华",gender="男",age;

//在声明的同时初始化全部或者部分变量二、数据类型分类类型说明基本数据类型数值型整型，用十进制数、八进制数和十六进制数来表示浮点型，使用普通形式和指数形式字符串型表示文本数据，主要由字母、数字、汉字和其他特殊字符组成，字符串型数据必须用单引号或者双引号引起来布尔型逻辑型，布尔型数据只有两个值，即逻辑真和逻辑假引用数据类型支持对象编程的类型对象、函数等特殊数据类型null表示空类型，当前为空值undefined未定义类型的变量，表示这个变量还没有被赋值NaNJavaScript特有的特殊数据类型，表示“非数值”，是指程序运行时由于某种原因发生计算错误，产生没有意义的数值转义字符控制字符，它是以“\”开头、不可显示的特殊字符，利用转义字符可以在字符串中添加不可显示的特殊字符或者避免引号匹配问题例21-1：

<script

type="text/javascript">

var

type_a;

100;

type_a

typeof

document.write(a

"的类型是："

type_a

"<br

/>");

true;

type_a

typeof

document.write(a

"的类型是："

type_a

"<br

/>");

"hello";

type_a

typeof

document.write(a

"的类型是："

type_a

"<br

/>");

null;

type_a

typeof

document.write(a

"的类型是："

type_a

"<br

/>");

2023

"明天会更好";

type_a

typeof(a);

document.write(a

"的类型是："

type_a

"<br

/>");

</script>三、运算符例21-2：判断输入的年份是否是闰年<script>

var

year

mpt("请输入要判断的年份");

year

parseInt(year);

var

str

year

100

year

400

var

result

str

"是闰年"

"不是闰年";

document.write(year

"年"

result);</script>四、函数1．定义函数function函数名（[参数1,参数2…]）{

函数体；

[return表达式]}2．调用函数函数名（[参数1,参数2…]）；例<script

type="text/javascript">

function

printStr()

{

//定义函数

alert("苟日新，日日新。");

}

printStr();

//调用函数

</script>五、DOM简介1．DOM文档对象模型（DocumentObjectModel，DOM）是JavaScript操作网页的接口，它的作用是将网页转换为JavaScript对象，从而可以使用JavaScript对网页进行各种操作。2．获取元素表21-2获取元素和集合的方法分类方法说明获取元素document.getElementById(id)获取指定id的页面元素对象document.querySelector(selector);获取指定选择器的页面元素对象获取元素集合documnet.getElementsByName(name)获取指定name属性值的页面元素对象集合documnet.getElementsByTagName(tag)获取指定标记的页面元素对象集合documnet.getElementsByClassName(class)获取指定类的页面元素对象集合document.querySelectorAll(selector);获取指定选择器的页面元素对象集合六=2\*ROMAN、小结重点掌握JavaScript的基本语法。作业1：课本课后习题与实训作业2：扫码观看案例22中的微课，自学简单计算器的内容。在案例分析时培养学生分析问题解决问题的能力。在代码实现中引导学生遵循正确的代码编写规范。教案22案例22简单计算器计划学时2学时知识目标掌握JavaScript的分支语句的使用语法掌握JavaScript中数据类型转换的方法熟悉JavaScript的事件及事件调用方法能力目标能使用JavaScript编写代码实现简单计算器会使用开发者工具调试JavaScript的程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点JavaScript的分支语句数据类型转换教学难点事件及事件调用教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建简单计算器，编写JavaScript代码，实现四则运算，当输入数据不合法时（输入非数值型数据或除数为0）进行提示，运行效果如图22-1所示。具体要求如下。（1）添加3个文本框，用于输入两个数和显示计算结果。（2）添加下拉列表框，用于选择运算符。（3）添加“计算”按钮，单击该按钮时进行计算，将结果显示到“结果”文本框中。（4）输入非数值型数据或者除数为0时，出现警示对话框，给予操作提示。图22-1简单计算器案例分析在页面上添加盒子，在盒子中添加标题<h2>标记和四对<p>标记，在<p>标记中放入提示信息和相应控件，输入数据和显示结果的控件使用<input>标记定义，下拉列表框使用<select>标记定义，“计算”按钮使用<input>标记定义，定义盒子和控件的样式。创建脚本文件，编写JavaScript代码，使用document对象的getElementById()方法获取输入的数据和运算符，通过多分支语句完成运算。案例实现学生同步操作，做学教一体1．创建表单：<div

id="box">

<h2>简单计算器</h2>

<p>请输入第一个数：<input

id="num1"

type="text"></p>

<p>请输入第二个数：<input

id="num2"

type="text"></p>

<p>运算符：

<select

id="opt">

<option

value="+"

selected>+</option>

<option

value="-">-</option>

<option

value="*">*</option>

<option

value="/">/</option>

</select>

<input

type="button"

value="计算"

onclick="calc()">

</p>

<p>结果：<input

id="result"

type="text"></p>

</div>2．定义表单的CSS样式3．创建JavaScript脚本文件<script

type="text/javascript">

function

calc()

{

//定义函数

var

num1

document.getElementById('num1').value; //获取第一个数

var

num2

document.getElementById('num2').value;

//获取第二个数

num1

parseFloat(num1)

Number(num1);

num2

parseFloat(num2)

Number(num2);

var

result;

//定义存放结果的变量

(isNaN(num1)

isNaN(num2))

{

//如果输入数据不是数值型

alert('请输入数字');

//显示提示信息

return

false;

//返回

}

else

{

var

opt

document.getElementById('opt').value

//获取运算符

switch

(opt)

{

//根据运算符选择不同的分支进行计算

case

'+':

result

num1

num2;

break;

case

'-':

result

num1

num2;

break;

case

'*':

result

num1

num2;

break;

case

'/':

(num2

{

//除数如果为0，则显示提示信息，不计算

alert("除数不能为0");

return;

}

else

{

result

num1

num2;

}

break;

}

}</script>第2学时（相关知识点）一、分支语句1．单分支<script

type="text/javascript">

var

score=prompt("请输入你的考试成绩："); //定义变量接收输入的数值

if(score>=90){

//如果条件成立，则弹出“你真棒！”

alert("你真棒！");

}

</script>2.双分支

<script

type="text/javascript">

var

score=prompt("请输入你的考试成绩：");

//定义变量接收输入的数值

if(score>=60){

alert("恭喜你，顺利通过！");

//条件成立，弹出“恭喜你，顺利通过！”

}

else{

alert("很不幸，你没通过！");

//条件不成立，弹出“很不幸，你没通过！”

}

</script>3．多分支<script

type="text/javascript">

var

score=prompt("请输入你的考试成绩：");

//定义变量接收输入的数值

if(score>=90){

//如果条件成立，则弹出“优秀！”

alert("优秀！");

}

else

if(score>=80){

alert("良好！");

}

else

if(score>=70){

alert("一般！");

}

else

if(score>=60){

alert("及格！");

}

else{

alert("不及格！");

}</script>4．多分支语句（switch语句）<script

type="text/javascript">

var

score=prompt("请输入你的考试成绩：");

//定义变量接收输入的数值

var

Math.floor(score/10);

//向下取整

switch(n){

case

10:case

alert("优秀！");break;

case

alert("良好！");break;

case

alert("一般！");break;

case

alert("及格！");break;

default:

alert("不及格！");

}</script>二、数据类型转换1．隐式类型转换2．显式类型转换方法说明示例parseInt()将数据转换成整型parseInt("123.567")//返回123parseInt("123abc")//返回123parseInt("abc123")//返回NaNparseFloat()将数据转换为浮点型parseFloat("123.567")//返回123.567parseFloat("123abc")//返回123parseFloat("abc123")//返回NaNNumber()将数据转换成数字Number("3.14")

//返回3.14

Number("99a88")

//返回NaNNumber(false)

//返回0

Number(true)

//返回1Boolean()将数据转换成布尔型Boolean(undefined)//falseBoolean(1)//trueBoolean(0)//falseBoolean(NaN)//falseString()将数据转换成字符串型String(123)

//返回"123"toString()将数据转换成字符串型123.toString()//返回"123"例22-5：输入两个数，计算两数之和。略。三、事件与事件调用1．事件事件事件触发时机onclick单击时触发ondblclick双击时触发onmousedown按下任意鼠标按键时触发onmouseover鼠标指针进入时触发onmouseup释放任意鼠标按键时触发onkeydown键盘按键按下时触发onkeyup键盘按键弹起时触发onsubmit提交表单时触发onfocus获得焦点时触发onblur失去焦点时触发onload页面载入完毕后触发2．事件调用（1）行内绑定（2）动态绑定四=2\*ROMAN、小结重点掌握JavaScript的分支语句的语法、数据类型转换方法，常用的事件及事件调用方法。作业1：课本课后习题与实训作业2：扫码观看案例23中的微课，自学限时促销的内容。在案例分析时培养学生分析问题解决问题的能力。在代码实现中引导学生遵循正确的代码编写规范。教案23案例23限时促销计划学时2学时知识目标了解面向对象的概念掌握内置对象Date的使用了解BOM对象的概念掌握window对象计时器的相关方法能力目标能使用JavaScript编写代码实现倒计时器会使用开发者工具调试JavaScript的程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点JavaScript的Date对象window对象的定时器功能教学难点window对象的setInterval方法教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析与实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）案例描述图23-1小米产品限时促销创建小米产品的限时促销页面，运行效果如图23-1所示。具体要求如下。（1）通过脚本代码设定限时促销结束时间，将时间以时、分、秒的形式显示到网页中。（2）倒计时的时、分、秒都用两位数显示，不足两位数时前面补0。案例分析在页面上添加盒子，在盒子中添加四对<p>标记，在<p>标记中放入文字、图像和<span>标记等，将时、分、秒数值和时、分、秒之间的分隔符放入<span>标记。定义盒子、<p>标记和<span>标记的样式。创建脚本文件，编写JavaScript代码，定义显示时、分、秒的函数，使用window对象的setInterval()方法使函数每隔1s执行一次。案例实现学生同步操作，做学教一体1．搭建结构：<div

class="seckill">

<p>小米促销专场</p>

<p><img

src="images/shandian.png"

width="49"

alt="图片"></p>

<p>距离结束还有</p>

<p></span><span

id="second"></span></p></div>2．定义CSS样式3．创建JavaScript脚本文件<script

type="text/javascript">

function

fresh()

{

//定义函数

var

endtime

new

Date("2023/01/29,23:59:59"); //促销结束时间

var

nowtime

new

Date();

//当前时间

var

leftsecond

parseInt((endtime.getTime()

nowtime.getTime())

1000); //剩余毫秒数

parseInt(leftsecond

3600);

//剩余小时数

parseInt((leftsecond

60)

60);

//剩余分钟数

parseInt(leftsecond

60);

//剩余秒数

"0"

//剩余如果不足10h，则前面补0

else

"00"

//剩余小时数为0时，显示00

"0"

//剩余如果不足10min，则前面补0

else

"00"

//剩余分钟数为0时，显示00

"0"

//剩余如果不足10s，则前面补0

else

"00"

//剩余秒数为0时，显示00

document.getElementById("hour").innerHTML

h;//显示剩余小时数

document.getElementById("minute").innerHTML

m; //显示剩余分钟数

document.getElementById("second").innerHTML

s; //显示剩余秒数

(leftsecond

{

clearInterval(sh);

//停止倒计时

}

var

setInterval("fresh()",

1000);

//每隔1s执行一次fresh()函数

</script>第2学时（相关知识点）一、面向对象简介1．对象概述2.内置对象内置对象说明Math数学对象，用于实现数学运算功能Date日期对象，用于定义日期对象String字符串对象，用于定义字符串对象和处理字符串Array数组对象，用于定义数组对象Number原始数值对象，可以在原始数值和对象之间转换Boolean布尔值对象，用于将非布尔型的值转换成布尔型的值（true或false）Object基类，所有JavaScript内置类都是从基类Object派生（继承）出来的RegExp正则表达式对象，用于完成有关正则表达式的操作和功能Date对象1．创建Date对象①创建当前时刻的Date()对象，例如，下面的代码。var

now=new

Date();②创建指定日期的Date对象，例如，下面的代码。var

date1

new

Date("2023-3-1");var

date1

new

Date("2023/3/1");var

date1

new

Date("2023,3,1");

③创建一个指定日期和时间的Date对象，例如，下面的代码。var

date1=new

Date(“2023,3,1,10:20:30:50”);var

date1=new

Date(2023,3,1,10,20,30,50);2．Date对象的方法方法说明get方法getDate()返回用本地时间表示的一个月中的日期值（1～31）getDay()返回用本地时间表示的一周中的星期值（0～6）getFullYear()返回用本地时间表示的4位数字的年份值（如2024）getHour()返回用本地时间表示的小时数（1～23）getMinutes()返回用本地时间表示的分钟数（0～59）…………例<script

type="text/javascript">

var

now

new

Date();

//创建Date对象

var

week

now.getDay();

//获取数字形式的星期几

var

result;

switch

(week)

{

case

1:result

"星期一";break;

case

2:result

"星期二";break;

case

3:result

"星期三";break;

case

4:result

"星期四";break;

case

5:result

"星期五";break;

case

6:result

"星期六";break;

default:result

"星期日";break;

}

document.write("今天是"

result);

//输出信息</script>BOM简介BOM简介浏览器对象模型（BrowserObjectModel，BOM）提供与浏览器交互的方法和接口。图23-5BOM对象模型1．window对象方法描述alert()弹出警示对话框，显示一条提示信息和一个“确定”按钮confirm()弹出确认对话框，显示一条确认信息、一个“确定”按钮、一个“取消”按钮prompt()弹出提示对话框，提示用户输入信息open()打开一个新的浏览器窗口close()关闭浏览器窗口setInterval()按照指定的毫秒数来调用函数或执行一段代码setTimeout()在指定的毫秒数后调用函数或执行一段代码clearInterval()取消由setInterval()设置的效果clearTimeout()取消由setTimeout()设置的效果例23-2：使用confirm()方法弹出确认对话框<script

type="text/javascript">

if(confirm("确定删除吗?")){

alert("确定!");

}else{

alert("不确定!");

}</script>2．定时器setInterval()方法：让操作每隔一定时间间隔反复执行setTimeout()方法：执行一次后就停止操作，因此该方法可以实现延时操作。clearInterval()方法：取消定时器clearTimeout()方法：取消定时器例代码略。四=2\*ROMAN、小结重点掌握Date对象的使用和定时器的setInterval()方法和setTimeout()方法的使用。作业1：课本课后习题与实训作业2：扫码观看案例24中的微课，提前学习轮播图的内容。在案例分析时培养学生分析问题解决问题的能力。在代码实现中引导学生遵循正确的代码编写规范。教案24案例24轮播图计划学时2学时知识目标掌握设置元素样式的语法格式掌握获取元素的尺寸和位置的语法格式掌握轮播图的实现方法能力目标能编写JavaScript代码实现轮播图效果会使用开发者工具调试JavaScript的程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点设置元素样式获取或改变元素的尺寸和位置教学难点获取或改变元素的尺寸和位置教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建小米产品广告展示轮播图，页面浏览效果如图24-1所示。具体要求如下。（1）轮流展示5张图片，每隔2s切换一次。（2）切换图片时有过渡效果。图24-1轮播图案例分析在页面上添加盒子，在盒子中添加无序列表标记<ul>，在<ul>标记中添加6对<li>标记，在每个<li>标记中放入一张图片，在最后的<li>标记中再次放入第一张图片，使图片切换时实现无缝衔接。定义盒子、<ul>标记、<li>标记和<img>标记的样式。创建脚本文件，编写JavaScript代码，定义切换图片的函数，使用window对象的setInterval()方法使函数每隔2s执行一次。案例实现学生同步操作，做学教一体1．搭建轮播图结构：<div

id="silder">

<ul

id="list">

<li><img

src="images/banner1.jpg"></li>

<li><img

src="images/banner2.jpg"></li>

<li><img

src="images/banner3.jpg"></li>

<li><img

src="images/banner4.jpg"></li>

<li><img

src="images/banner5.jpg"></li>

</ul></div>2．定义CSS样式3．创建JavaScript脚本文件<script>

//第一轮结束，切换图片时有从头开始的效果

var

slider

document.querySelector("#slider"); //获取盒子元素

var

list

document.querySelector("#list");

//获取ul元素

var

img

document.querySelector("img");

//获取图像集合

var

uli

list.children;

//获取图片列表

var

index

//图片序号

setInterval(move,

2000);

//每隔2s执行一次move()函数

function

move()

{

(index

uli.length

{

//如果不是最后一张图片

index++;//图片序号加1

list.style.left

-index

img.offsetWidth

"px";

图片向左移出，offsetWidth是图像的布局宽度

list.style.transition

'left

1s';

//移出图片时有过渡效果,用时1s

(index

uli.length

{

//如果是最后一张图片，则切换到第一张图片

setTimeout(function()

{

index

//图片变为第一张

list.style.left

-index

img.offsetWidth

"px";

list.style.transition

'left

0s';

1000);

}

}</script>

第2学时（相关知识点）设置元素样式对象.style.属性="属性值";例24-1通过脚本代码设置盒子的样式。图24-3设置元素样式<div

id="box1">学而时习之</div>

<script

type="text/javascript">

var

box

document.querySelector("#box1"); //获取元素

box.style.width="200px";

//设置宽度

box.style.height="200px";

//设置高度

box.style.backgroundColor="#1D94FC";

//设置背景颜色

box.style.color

"#fff";

//设置文字的颜色

box.style.fontSize

"24px"

//设置文字大小</script>

获取元素尺寸和位置属性说明offsetLeft获取元素相对父元素左边框的偏移量offsetTop获取元素相对父元素上边框的偏移量offsetWidth获取元素自身的宽度，包括边框和内边距offsetHeight获取元素自身的高度，包括边框和内边距例24-2实现滚动文字效果。图24-4滚动文字效果搭建结构：<div

class="box">

<ul>

<li>教育部、中央军委政治工作部、军委国防动员部定向培养士官试点院校</li>

<li>电子信息产业国家高技能人才培训基地</li>

<li>国家示范性高职单独招生试点院校</li>

<li>“3+2”对口贯通分段培养本科院校</li>

<li>国家级示范性软件职业技术学院</li>

<li>全国信息产业系统先进集体</li>

</ul>

</div>2．编写脚本代码：<script>

//实现滚动文字效果

var

speed

-1;

var

list

document.getElementsByTagName('ul')[0];

//获取ul元素

var

item

document.getElementsByTagName('li');

//获取li元素集合

list.innerHTML

list.innerHTML;

list.style.width

item[0].offsetWidth

item.length

'px';

//offsetWidth为元素的宽度（包括元素宽度、内边距和边框，不包括外边距）

function

move()

{

(list.offsetLeft

-list.offsetWidth

{

//offsetLeft元素与父元素左边的距离

list.style.left

"px";

}

list.style.left

list.offsetLeft

speed

'px';

}

setInterval(move,

30);

//每隔30ms移动一次</script>三=2\*ROMAN、小结重点掌握JavaScript的基本语法。作业1：课本课后习题与实训作业2：扫码观看案例22中的微课，自学简单计算器的内容。在案例分析时培养学生分析问题解决问题的能力。在代码实现中引导学生遵循正确的代码编写规范。模块六综合案例本模块通过小米商城网站和美丽山东网站2个综合案例的实现，介绍网站开发的完整流程。知识目标：掌握网站规划的方法；掌握使用HTML5+CSS3布局网页方法；掌握使用JavaScript添加网页动态效果的方法。能力目标：会对网站进行统筹规划，做好网站前期准备工作；会熟练使用HTML5编辑网页结构代码；会熟练使用CSS3编辑网页样式代码；会熟练使用JavaScript编辑和调试脚本代码。素质目标：培养整理规划能力，具有大局意识；培养耐心细致、精益求精的工匠精神；培养文化自信和民族自豪感。教案25案例25小米商城网站（1）计划学时2学时知识目标掌握HBuilderX软件的基本操作；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握盒子的相关属性，能够制作常见的盒子模型效果；掌握JavaScript语言的用法，能够制作网页中动态和交互效果。能力目标具有根据企业的需求进行静态页面的设计与制作能力；具有熟练地进行网站的制作、管理和维护的能力。素质目标树立学生勤于动手，独立思考的观念；培养学生严谨的科学态度，提高分析和解决实际问题的能力；在编写代码中养成正确的代码编写规范。教学重点CSS+DIV网页布局；HTML5新增页面元素应用。教学难点JavaScript动态交互效果。教学模式教学做一体化；线上+线下混合式教学。教学活动及主要环节素质培养第1学时（前期工作、搭建主页结构）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述制作小米商城网站，该网站由3个页面构成，分别为主页、登录页和注册页，从主页可以进入登录页和注册页，从登录页和注册页可以返回主页。主页有轮播图效果和限时促销效果。网站浏览效果如图25-1~图25-3所示。图25-1小米商城网站主页图25-2小米商城网站登录页图25-3小米商城网站注册页二、前期工作1.收集素材2.新建项目3.创建样式表文件三、制作网站主页1.主页结构分析主页由头部、导航条、轮播图、主体部分和版权信息等构成，主体部分从上到下又细分为图片展示、产品促销、广告图片、手机、电视、视频和售后服务部分，主页结构划分如图所示。2.编写主页布局代码学生同步操作，做学教一体略。第2学时（制作主页头部）一、制作头部1．案例分析头部分为左、右两部分，对每部分可以使用无序列表搭建结构。鼠标指针划过“下载App”时，显示二维码，如图25-7所示，对二维码可以使用<img>标记定义，通过定义样式使二维码隐藏，鼠标指针划过时再显示。购物车左侧的图标使用字体库中的图标字体。2．案例实现学生同步操作，做学教一体（1）搭建头部结构代码略。（2）定义头部CSS样式代码略。二、制作导航条部分1．案例分析该部分内容分为3部分：左侧是Logo、中间是导航条目、右侧是搜索框。对Logo使用<img>标记定义，并给图像添加超链接，链接到主页。对导航条目使用无序列表来构建。对右侧的搜索框使用<input>标记定义，按钮使用<button>标记定义，按钮上面的放大镜图像使用字体库中的图标字体。2．案例实现学生同步操作，做学教一体（1）搭建导航条结构代码略。（2）定义导航条CSS样式代码略。三=2\*ROMAN、小结本案例介绍了制作小米商城网站。在制作主页时，按照从上到下的顺序，完成头部、导航条的制作，综合利用了HTML5的各种标记搭建页面结构，使用了CSS3定义网页样式。作业1：课本课后习题与实训作业2：扫码观看案例25中的微课，学习轮播图和图片展示部分以及产品促销部分的制作。课前小组讨论培养学生共同探讨的协作意识和良好的沟通能力。通过小米商城网站的制作，增强国家认同，树立民族自信。任务完成中提高学生的空间布局能力。在编写代码中养成正确的代码编写规范。教案26案例25小米商城网站（2）计划学时2学时知识目标掌握HBuilderX软件的基本操作；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握盒子的相关属性，能够制作常见的盒子模型效果；掌握JavaScript语言的用法，能够制作网页中动态和交互效果。能力目标具有根据企业的需求进行静态页面的设计与制作能力；具有熟练地进行网站的制作、管理和维护的能力。素质目标树立学生勤于动手，独立思考的观念；培养学生严谨的科学态度，提高分析和解决实际问题的能力；在编写代码中养成正确的代码编写规范。教学重点CSS+DIV网页布局；HTML5新增页面元素应用。教学难点JavaScript动态交互效果。教学模式教学做一体化；线上+线下混合式教学。教学活动及主要环节素质培养第1学时（制作轮播图、图片展示部分）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、制作轮播图部分1．案例分析将所有内容放入一个大盒子，将两侧的箭头分别放入两个小盒子，对下面的圆点和图像都使用无序列表标记<ul>定义。对盒子中的内容采用绝对定位，定位到大盒子的指定位置。2．案例实现（1）搭建轮播图结构学生同步操作，做学教一体（2）链接轮播图部分的样式表文件css.css和脚本文件index.js学生已观看微课，略讲二、制作图片展示部分1．案例分析图片展示部分分为4个块，需要定义一个大盒子，在大盒子中再定义4个子盒子。对第一个块使用无序列表搭建结构，第一个块中的小图标使用字体库中的相应图标字体。2．案例实现学生同步操作，做学教一体（1）搭建图片展示部分结构代码略。（2）定义图片展示部分CSS样式代码略。第2学时（制作产品促销部分）一、制作产品促销部分1．案例分析对该部分需要定义一个盒子，在盒子中用无序列表构建每个块的内容。每个块中相同的样式可以同时定义，不同的样式分别定义。2．案例实现学生同步操作，做学教一体（1）搭建产品促销部分结构代码略。（2）定义产品促销部分CSS样式代码略。二=2\*ROMAN、小结本案例介绍了制作小米商城网站轮播图、图片展示部分以及产品促销部分的制作，综合利用了HTML5的各种标记搭建页面结构，使用了CSS3定义网页样式。作业1：课本课后习题与实训作业2：扫码观看案例25中的微课，学习制作广告图片和手机部分、制作广告图片和电视部分、视频以及售后服务部分的制作。课前小组讨论过程中，培养学生共同探讨的协作意识和良好的沟通能力。在编写代码中养成正确的代码编写规范。面对复杂的设计，培养学生不惧困难、迎难而上，解决问题的能力。教案27案例25小米商城网站（3）计划学时2学时知识目标掌握HBuilderX软件的基本操作；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握盒子的相关属性，能够制作常见的盒子模型效果；掌握JavaScript语言的用法，能够制作网页中动态和交互效果。能力目标具有根据企业的需求进行静态页面的设计与制作能力；具有熟练地进行网站的制作、管理和维护的能力。素质目标树立学生勤于动手，独立思考的观念；培养学生严谨的科学态度，提高分析和解决实际问题的能力；在编写代码中养成正确的代码编写规范。教学重点CSS+DIV网页布局；HTML5新增页面元素应用。教学难点JavaScript动态交互效果。教学模式教学做一体化；线上+线下混合式教学。教学活动及主要环节素质培养第1学时（制作广告图片和手机部分）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、制作广告图片和手机部分1．案例分析广告图片和手机部分由两个块构成，上面的块存放广告图片；下面的块又分为左右两部分，左边的部分存放一张图片，右边的部分存放8张手机图片，8张手机图片采用无序列表搭建结构。2．案例实现学生同步操作，做学教一体（1）搭建广告图片和手机部分结构代码略。（2）定义广告图片和手机部分CSS样式代码略。二、制作广告图片和电视部分1．案例分析广告图片和电视部分由两个块构成，上面的块存放广告图片；下面的块又分为左右两部分，左边的部分存放一张图片，右边的部分存放4张电视图片，4张电视图片采用无序列表搭建结构。2．案例实现学生同步操作，做学教一体（1）搭建广告图片和电视结构代码略。（2）定义广告图片和电视CSS样式代码略。第2学时（制作视频、售后服务部分）一、制作视频部分1．案例分析视频部分其实也是4张图片的展示，单击图片时播放视频。但这里对图片创建了空链接，不能播放视频。视频部分需要定义一个盒子，盒子中的4个块使用无序列表搭建结构，每个列表项中包含图片和文字。2．案例实现学生同步操作，做学教一体（1）搭建视频部分结构代码略。（2）定义视频部分CSS样式代码略。二、制作售后服务部分1．案例分析售后服务部分是主体部分中最下面的部分。售后服务部分需要定义一个盒子，盒子中的内容使用无序列表搭建结构，每个列表项中包含图标和文字。2．案例实现学生同步操作，做学教一体（1）搭建售后服务部分结构代码略。（2）定义售后服务部分CSS样式代码略。三、制作版权信息部分1．案例分析版权信息部分是主页最下面的部分。版权信息部分为通栏显示，也就是与浏览器一样宽，内容占的宽度是1200px。因此需要一个大盒子，里面再嵌套小盒子。小盒子中包含上、下两个块，上面的块又分为左、右两个块，左面的块存放文字内容，右面的块存放小米Logo图像；下面的块存放一行文字。2．案例实现学生同步操作，做学教一体（1）搭建版权信息部分结构代码略。（2）定义版权信息部分CSS样式代码略。四=2\*ROMAN、小结本案例介绍了制作小米商城网站广告图片和手机部分、广告图片和电视部分、视频以及售后服务、版权信息部分的制作，综合利用了HTML5的各种标记搭建页面结构，使用了CSS3定义网页样式。作业1：课本课后习题与实训作业2：扫码观看案例25中的微课，学习轮播网站登录页和网站注册页的制作。课前小组讨论培养学生共同探讨的协作意识和良好的沟通能力。在编写代码中培养耐心细致、精益求精的工匠精神。通过代码编写过程，逐步激发学生的求知欲，养成遇到问题解决问题的能力，提高抗挫折能力。教案28案例25小米商城网站（4）计划学时2学时知识目标掌握HBuilderX软件的基本操作；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握盒子的相关属性，能够制作常见的盒子模型效果；掌握JavaScript语言的用法，能够制作网页中动态和交互效果。能力目标具有根据企业的需求进行静态页面的设计与制作能力；具有熟练地进行网站的制作、管理和维护的能力。素质目标树立学生勤于动手，独立思考的观念；培养学生严谨的科学态度，提高分析和解决实际问题的能力；在编写代码中养成正确的代码编写规范。教学重点CSS+DIV网页布局；HTML5新增页面元素应用。教学难点JavaScript动态交互效果。教学模式教学做一体化；线上+线下混合式教学。教学活动及主要环节素质培养第1学时（制作网站登录页）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、制作网站登录页1．案例分析网站登录页的头部和版权信息同主页。内容部分分左、右2个部分，左侧图片使用<aside>标记定义，右侧表单使用<div>、<form>标记定义，表单内使用<h1>标记定义标题、使用<p>、<input>标记定义各表单项、表单控件。2．案例实现学生同步操作，做学教一体（1）搭建头部结构代码略。（2）定义头部CSS样式代码略。第2学时（制作网站注册页）一、制作网站注册页1．案例分析网站注册页结构和样式与登录页类似，此处略讲。2．案例实现学生同步操作，做学教一体（1）搭建头部结构代码略。（2）定义头部CSS样式代码略。二=2\*ROMAN、小结本案例介绍了制作小米商城网站登录页和注册页2个子页面。在制作过程中，综合利用了HTML5标记和CSS3样式完成了对表单的制作和样式定义。通过该案例的学习，同学们可以学会时下流行的电商网站的开发流程和制作技术。作业1：课本课后习题与实训作业2：扫码观看案例26中的微课，学习美丽山东网站的设计思路。课前小组讨论培养学生共同探讨的协作意识和良好的沟通能力。在编写代码中养成正确的代码编写规范。登录和注册页面的形式是多样的，鼓励学生独立自主，勇于创新。教案29案例26美丽山东网站（1）计划学时2学时知识目标掌握网站开发的一般流程，了解Web发展历史及其未来方向；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握CSS3的高级应用，实现过渡、变形、翻转效果；掌握CSS3动画属性实现图片轮播设计。能力目标具有根据企业的需求撰写企业网站建设、规划的能力；具有运用所学知识与技能进行Web前端开发与制作的能力。素质目标培养和提高学生感受美、表现美和创造美的能力；培养学生严谨的科学态度，提高分析和解决实际问题的能力；树立学生自主学习和终生学习的观念。教学重点图片切片工具；CSS3过渡、变形、翻转及动画属性应用。教学难点CSS3属性高级应用。教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析、网站规划）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述设计并制作美丽山东网站，该网站由3个页面构成，包括主页、初识山东页和景点详情页，从主页可以进入其他页面，从其他页面可以返回主页。其中，主页有使用CSS实现的轮播图效果，初识山东页有视频播放效果，网站浏览效果如图26-1～图26-3所示。图26-1美丽山东网站主页图26-2初识山东页图26-3景点详情页二、网站规划1．网站需求分析设计美丽山东网站，旨在让任何人在任何时间、任何地点都能借助网络快速了解和品读山东的历史文化，同时为广大游客提供详细、准确、全面的旅游信息，如文旅资讯、专题推介等。在内容组织上要做到条理清晰、简单易懂，能够让用户快速查找到相关信息。2.网站的风格定位3.规划草图4.素材准备学生同步操作，做学教一体（1）选择切片工具（2）绘制切片区域（3）导出切片（4）存储图片三、制作网站主页1.新建项目2.创建样式表文件3.主页效果图分析（1）HTML结构分析（2）CSS样式分析4.页面整体布局主页整体结构代码编写学生同步操作，做学教一体5.定义公共样式学生同步操作，做学教一体打开样式文件index.css，编写通用样式代码6.链接外部样式表第2学时（制作头部和导航条、轮播图）一、制作头部和导航条1．分析效果图网页的头部分为左（Logo）、右（导航条）2个部分，可对导航条的结构使用无序列表来搭建。当鼠标指针悬停于导航条中的各个导航条目时，改变文本颜色和边框。2．代码实现学生同步操作，做学教一体（1）搭建头部和导航条结构代码略。（2）定义头部和导航条CSS样式代码略。二、制作轮播图1．分析效果图观察效果图，可以看出只需在该盒子内再添加1个包容所有图片的盒子。每隔30s的时间

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案模块5、6 使用JavaScript添加动态效果、综合案例

文档简介

温馨提示

最新文档

评论

网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案 模块5、6 使用JavaScript添加动态效果、综合案例

文档简介

温馨提示

最新文档

评论

相关文档

网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）-教案模块5、6 使用JavaScript添加动态效果、综合案例