下载文档原格式
![JavaScript前端开发程序设计教程(微课版)(第2版)-实训指导 (6)[2页]](https://img.taocdn.com/s1/m/393665294a73f242336c1eb91a37f111f1850d1d.png)
实训案例名称：按钮的说明性文字
一、实训目的
1. 掌握事件、事件驱动以及事件绑定的概念及方法
2. 掌握Event事件对象的属性和方法
3. 掌握键盘事件和鼠标事件的用法
二、实训内容
1. 在页面上创建按钮
2. 数组和函数在实际中的综合应用
3. 鼠标事件onmouseover和onmouseout功能的实现
三、实训仪器、设备
装有Dreamweaver、HBuilder等软件的电脑，网络畅通。
四、实训步骤
1. 在<body>标签内建立两个按钮“本书宗旨”“关于本书”，用于鼠标指向的测试按钮。
2. 分别创建函数，实现当鼠标经过按钮和离开按钮实现的效果。
3. 在按钮上设置事件属性onmouseover和onmouseout，分别实现显示文字和隐藏文字的功能。
4.代码演示
六、实训效果
七、实训报告要求
按照要求写出本项目的实训报告，规范、完整、表述科学，知识点和技能点以及实训结果都应该具备。
传智播客《HTML+CSS+JavaScript网页制作案例教程》教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级：2015年级授课学期：2015学年第二学期教师姓名：某某老师1201 年月日课题名称第5章列表与超链接计划课时6课时内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。
但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。
教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；●掌握超链接标记的使用，能够使用超链接定义网页元素；●掌握CSS伪类，会使用CSS伪类实现超链接特效；重点及措施教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：有序列表、定义列表、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（制作“精美电商悬浮框”，讲解无序列表、有序列表）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2） =336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
电子商务网页设计与制作
授课教案
学年第学期
课前：
【教师布置调研任务】
调研主题：《了解JavaScrip的语法规则》
要求：以小组为单位，通过网络查找的方式了解JaVaSeriP的语法规则。
制作汇报PPT,提交到“微信群”。
【学生调研，教师线上指导】
学生采用线上调研的方式，开展调研。
教师使用“微信群”对学生进行指导。
（教师对各组调研成果进行评价】
教师查阅学生调研结果PPT,对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。
课后：
【学生使用JaVaSCriP代码设计一个根据分数评价等级的程序】
小组成员团结协作，练习使用JaVaSCriP代码的相关内容；使学生掌握使用JaVaSCriP 代码编程的能力。
教师使用“微信群”对学生进行指导。
填表说明：1本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等;
3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。
第一章习题1．HTML指的是（ A ）。
A超文本标记语言（Hyper Text Markup Language）B家庭工具标记语言（Home Tool Markup Language）C超链接和文本标记语言（Hyperlinks and Text Markup Language）2．web标准的制定者是（ B ）。
A 微软B万维网联盟（W3C）C网景公司（Netscape）3．用HTML标记语言编写一个简单的网页，网页最基本的结构是（ D ）。
A <html> <head>…</head> <frame>…</frame> </html>B <html> <title>…</title> <body>…</body> </html>C <html> <title>…</title> <frame>…</frame> </html>D <html> <head>…</head> <body>…</body> </html>4．从IE浏览器菜单中选择____查看 源文件______命令，可以在打开的记事本中查看到网页的源代码。
5．实现网页交互性的核心技术是_______ JavaScript _______________。
6．CSS的全称是________ Cascading Style Sheet __________ ______。
7．写出你了解的专业网页编辑制作工具_____Dreamweaver_，_ EditPlus ___________。
8．URL的全称是____Uniform Resource Locator _____________________________。
XXX职业技术学院202X级《WEB开发基础》课程标准课程代码XXXXXX课程性质专业平台课课程学分4总学时64适用专业软件技术专业制（修）订日期202X-X-XX执笔审核一、课程定位本课程是软件技术专业群的平台课，是培养学生B/S架构项目开发的基础必修课程。
本课程主要培养学生的网站设计和开发能力，通过“教、学、做”一体化教学，使学生能熟练掌握PC端网页、WebApp自适应网站、响应式网站的开发规范和制作技巧，培养学生的创新能力、审美能力、自学能力、沟通能力、解决问题能力、自我管理能力、团队协作能力，为后续课程及其他程序设计课程的学习和应用打下基础。
先修课程：《计算机应用基础》《程序设计基础》。
后续课程：《Java Web应用开发》《Vue前端应用开发》《微信平台应用开发》等。
二、课程目标（-）总体目标通过本课程的学习，学生能了解WWW、HTTP、HTML5、CSS3的定义、概念和作用；了解服务器、客户端、浏览器的概念和作用，熟悉web项目规划和需求分析的基本方法，具备web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。
熟练掌握HTML5语言中的各种文本格式、字符格式、段落设置、列表、标记的使用方法；熟练CSS3样式表制作方法和技巧；熟悉PC端网站、WebApp自适应网站、响应式网站的排版技巧，根据前端设计师的任职要求，参照计算机程序员职业标准和网站开发和网页制作的职业资格标准，改革课程体系和教学内容。
课程内容突出职业能力培养，体现基于职业岗位分析和能力为导向的课程设计理念，以真实工作任务或社会产品为载体组织教学内容，在真实工作情境中采用新的教学方法和手段进行实施。
（二）具体目标课程教学目标具体体现为专业知识、专业技能和专业素质三方面的目标。
（1）专业知识目标①掌握HTML5与CSS3基础知识及最新技术。
②熟悉企业网站制作具体流程。
③掌握不同类型静态网站的开发技巧。
《JavaScript 程序设计基础教程(第2版)》习题答案第一章Web 技术概述一、单选题1）D2）D3）D4）A5）C6）D7）C8）C9）D10）D11）A12）D13）D14）D15）A二、综合题（略）第二章HTML/XHTML 制作一、判断题1）对2）错3）对4）错5）对6）错7）错8）错9）错10）对11）对12）对13）错14）错15）对16）错17）对18）错19）错20）对21）错22）错二、单选题1）D2）C3）C4）B5）A6）B7）B8）B9）C10）C11）B12）C13）C14）C15）C16）C17）A三、综合题1)ex020301.htm2)ex020302.htm3)ex020303.htm4)ex020304.htm5)ex020305.htm6)ex020306.htm7)ex020307.htm8)ex020308.htm9)ex020309.htm10)ex020310.htm11)略第三章CSS 技术一、判断题1）错2）对3）错4）对5）错6）错7）对8）错9）对10）错11）对12）错13）错14）错15）错16）错17）错18）对19）对20）错21）错二、单选题1）B2）B3）A4）C5）B6）C7）A8）B9）D10）B11）D12）B13）A14）B15）D16）A17）B18）C19）B20）D21）B22）A23）D24）A三、综合题1)ex030301.htm2)ex030302.htm3)ex030303.htm4)ex030304.htm5)ex030305.htm6)ex030306.htm7)ex030307.htm8)ex030308.htm9)ex030309.htm10)ex030310.htm11)ex030311.htm12)ex030312.htm13)ex030313.htm14)ex030314.htm15)ex030315.htm16)略第四章JavaScript 编程基础一、判断题1）错JavaScript 是Microsoft公司设计的脚本语言。
