网页设计与制作——JavaScript+jQuery标准教程 教案 第9章 jQuery的工具函数
网页设计与制作HTML+CSS+JavaScript第9章 CSS基础知识
CSS基本语法
CSS的定义是由三个部分构成：选择符（selector），
属性（properties）和属性的取值（value）。其基本 语法格式如下： selector { property: value } 其中，属性和属性值之间用一个冒号“:”分开，以一 个分号“;”结束，并且用一对大括号“{}”括起来。CSS定义方式——行内样式
行内样式：定义在HTML标签的style属性的样式。其
应用范围只能在定义时，应用于该元素。其语法格式 如下： < tag style="properties">网页内容< /tag> 这种方法不被常用，因为这种方法无法发挥样式表 “内容结构和格式控制分别保存” 的优势。
本章学习要点：
CSS基本结构 CSS语法
CSS的发展
CSS的出现是有其自身的历史原因。HTML网页设计最初
是用HTML标签来定义页面文档及其格式的，但这些标签 数量有限而且随着标签的扩充，各个浏览器厂商对于标签 制定的标准很难统一。为此W3C协会（The World Wide Web Consortium）把动态HTML分为三个部分来实现：脚 本语言(JavaScript、Vbscript等)、支持动态效果的浏览器 Internet Explorer、Netscape Navigator等)和CSS样式表。 1996年12月，W3C协会推出HTML4.0标准的同时推出了样 式表标准CSS1.0，并于1999年1月进行了重新修订。 1998年5月，发布了CSS2.0版本，样式表得到了更多的充实， 添加了对媒介和可下载字体的支持。 2001年5月，发布了CSS3.0版本，并不断地加以完善和补充， 直到目前该版本成为目前应用最广泛的样式表标准。
网页设计与制作教程—Web前端开发(第6版)第9章 JavaScript事件处理
9.1 事件概述
<!DOCTYPE html> <html>
</head> <body>
<button id="btn">单击按钮</button> <script type="text/javascript">
window.addEventListener("load", myfun, false); //绑定window对象的load事件 var btnObj = document.getElementById("btn"); //给谁绑定事件，就要先获取谁 btnObj.addEventListener("click", myfun1, false); //绑定多个事件处理程序，第1个 btnObj.addEventListener("click", myfun2, false); //绑定多个事件处理程序，第2个 btnObj.preventDefault();
9.1 事件概述
9.1.3 事件处理程序的绑定方式 JvaScript事件处理程序有3种绑定方式。 1. HTML事件处理程序方式 语法格式如下： <标签名 事件名="JavaScript脚本" … >…</标签名> <标签名 事件名="事件处理函数名()" … >…</标签名>
网页设计与制作 第9章 在网页中使用JavaScript
onmouseover 和 onmouseout 事件，分别表示鼠标移
上去和移开时发生的事件。
（3）document对象的常用方法
document对象的常用方法有clear、write和writen
方法。 ① clear方法
clear方法一经调用将清除当前窗口中的内容。注
意，它既不改变由HTML定义的文档的实际内容， 也不清除变量值等其它内容，而只是将显示区清空。
（3）do while语句 do { 语句段； } while（条件） （4）break语句 break 语句提供无条件跳出循环结构或 switch 语句 的功能。 （5）continue语句 continue语句的作用是终止当次循环，跳转到循环 的开始处继续下一轮循环。
4．其他语句
除了以上条件语句和循环语句以外， JavaScript
（3）switch语句 如果需要对同一个表达式进行多次判断，那么 就可以使用switch语句，格式如下： switch（条件） {case value1: 语句段1; case value2：语句段2; case value3：语句段3; … default：语句段4；}
3．循环语句
（1）for语句 for（初始化；条件；增量） { 语句段； } （2）while语句 while（条件） { 语句段； }
1．document对象
document对象代表当前浏览器窗口中的文档，
使用它可以访问到文档中的所有其他对象（例如
图像、表单等），因此该对象是实现各种文档功 能的最基本对象。
（1）document对象的常用属性
document对象最常用的属性如下：
all 表示文档中所有HTML标记符的数组。
网页设计与制作课件第9章
CONTENTS PAGE
项目九 应用表单和行为
案例一 案例二
应用行为为学校网页添加弹出框——应用行为
案例说明
使用Dreamweaver可以创建带有文本字段、单 选按钮、复选框和文件域等输入类型的表单，这 些输入类型又被称为表单对象。 本案例将要制作的“欢乐购”注册页面，效果如 右图所示。该页面包含了表单中的几个主要元素： 文本框、密码框、单选按钮、复选框等。通过制 作该页面，可以掌握在网页中插入表单标签，以 及使用各种结构标签对表单元素进行布局的方法， 并了解表单标签在页面中的默认显示效果。
一的名称。
表单对象的名称不能包含空格或 特殊字符，可以使用字母、数字或下
Size（字符宽度）：用英文字符单位来指定文本字段宽度。
划线的组合。
Max Length（最多字符数）：设置文本字段中最多可输入的 字符数。
提示
Disabled（禁用）复选框：选择该项后，文本字段的边框将变 为灰色，并且整个文本框不可用。
用CSS分别设置相应元素的样式。
① logo部分：包括欢乐购logo及右侧的广告，可以用<div>标签来构造。 ② 表单部分：将无序列表标签放到这部分来进行简单的布局，大结构用<div>标签来构造。 ③ 版权层：最后一行文本所在部分，可以用HTML 5中的新标签<footer>来构造。
项目九 应用表单和行为
11
案例实施
一、网页、网站和主页
步骤 04
在Dreamweaver设计界面中定位插入点，然后单击“插入”面板“HTML”类别中的“Div” 按钮，打开“插入Div”对话框，在id编辑框中输入“logo”，然后单击“确定”按钮， 如左图所示，插入Div的效果如右图所示。
网页设计与制作教程——Web前端开发(第6版)课件第9章 JavaScript事件处理9.3
9.3 mouse事件
常用的鼠标事件见表9-5。
9.3 mouse事件
mouse事件的语法格式有下面三种： HTML中： <element on事件="myScript"> JavaScript中： object.on事件=function(){ myScript }; JavaScript中使用addEventListener()方法： object.addEventListener("事件", myScript, false);
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第9章 JavaScript事件处理
9.3 mouse事件
本章介绍JavaScrip的BOM对象和操作，DOM对象和操作。
目录
第9章 JavaScript事件处理 9.1 事件概述 9.2 window事件 9.3 mouse事件 9.4 keyboard事件 9.5 form事件 9.6 事件捕捉与事件冒泡 习题9
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一节
9.3 mouse事件
9.3.1 click事件 【例9-11】本例鼠标单击页面区域，显示鼠标在浏览器中的坐标位置；单击图片 弹出一个消息框。本例文件9-11.html在浏览器中显示如图9-8所示。
9.3 mouse事件
9.3.2 dblclick事件 【例9-12】本例代码是段落的双击事件，鼠标双击段落文字，将触发事件函数，在段 落下面显示“Hello World”。本例文件9-12.html在浏览器中显示如图9-9所示。
9.3 mouse事件
9.3.3 mouseover和mouseout事件 1. mouseover事件
网页设计与制作第9章 JavaScript
导入：为什么要学习JavaScript
前面我们已经系统学习了Html和CSS，其中Htascript 是 实现网页动态效果的的基石, 在web开发中扮演重 要的角色，被广泛的应用到各个领域：
9.1 JavaScript 简介
4. 位于网页之外的单独脚本文件 示例：先建立一个名为test.js的文件，内容如下：
9.1 JavaScript 简介
然后，再建立一个html文件，内容如下：
9.1 JavaScript 简介
优点：复用、共享。 注意： （1）外部的JavaScript程序文件中不需要使用<script>标签， 此文件的内容仅含有JavaScript程序代码。 （2）使用src属性后，那么在该script元素内部的任何内容都将 被忽略。如果需要嵌入其他的代码，可以继续在文件中添加一 对新的<script>标签。 （3）src属性指定外部文件所在的位置时，默认是在页面所在 目录下。
件的使用方法。
教学内容
9.1 JavaScript简介 9.2 JavaScript程序 9.3 标识符和变量 9.4 运算符和表达式 9.5 JavaScript程序控制结构 9.6 常用对象 9.7 事件编程 9.8 利用JS实现在线订购功能
教学重点和难点
重点：在网页中使用客户端脚本的方法、函数的定义和 调用、标识符和变量的使用、运算符和表达式的 使用、程序控制结构、常用对象、事件编程。
9.1 JavaScript 简介
JavaScript程序本身不能独立存在，它是依附于某个HTML页 面，在浏览器端运行的。 1. 位于head部分的脚本
如果把脚本放置到head部分，在页面载入的时候，就同时载 入了代码。通常这个区域的JavaScript代码是为body区域程序 代码所调用的事件处理函数。如示例。
动态网页设计与制作 第9章 JavaScript实用技巧
9.2 读取与储存数据
9.2.1 页面上数据的读取与储存
2．JavaScript用dataset读取与储存页面上的数据
JavaScript设置页面上的数据的规则如下。
格式为“元素对象.dataset.变量名 = 变量值;”。 如果JavaScript中的变量名中带有大写字母，那么HTML元素标签中的data
第9章 JavaScript实用技巧
建立函数库 读取与储存数据 检验用户输入
弹出窗口下拉菜单来自事件冒泡处理动画技术
1
9.1 建立函数库
在实际的网页设计与制作过程中，往往会重复应用一些JavaScript函数，一般应将 这些常用的函数集中在一起，放在一个外置的JavaScript文件中作为网页制作的 JavaScript函数库。函数库中的函数一般可以分为下述几种类型。
9.2.2 浏览器上数据的读取与储存
1．本地存储保存数据
localStorage.setItem（变量名, 变量值）； sessionStorage.setItem（变量名, 变量值）；
2．本地存储读取数据
localStorage.getItem（变量名）； sessionStorage.getItem（变量名）；
3．本地存储删除数据
localStorage.removeItem（变量名）； sessionStorage.removeItem（变量名）；
8
9.2 读取与储存数据
9.2.2 浏览器上数据的读取与储存
示例，让用户选择网页的语言，当用户再次打开该网页时，网页自动设置为用户 已选的语言。
9
9.3 校验用户输入
HTML5除了在表单控件中新增了一些表单校验属性，例如required、pattern等， 还提供了表单校验方法和属性，这样可以有效提高编程效率。 示例一 ，校验一个用户登录表单: （1）必须填写用户名和密码。 （2）密码不能小于6个字符。 （3）光标自动在“用户名”文本框中。 （4）必填项显示图标 。 （5）如果输入无效的数据，显示图标 。 （6）如果输入有效的数据，显示图标 。
《网页设计与制作》课程教案
《网页设计与制作》课程教案第一章：网页设计与制作概述1.1 课程介绍网页设计与制作的基本概念网页设计与制作的目的与意义网页设计与制作的应用领域1.2 网页设计原则网页设计的基本原则用户体验设计原则响应式网页设计原则1.3 网页制作工具与技术网页设计软件的选择与使用HTML与CSS的基本语法与使用方法JavaScript的基础知识与应用第二章：网页布局与排版2.1 网页布局的基本概念网页布局的定义与作用常见的网页布局方式布局元素的分类与使用2.2 排版的原则与方法排版的基本原则文本的格式化与排版图片与多媒体元素的排版2.3 响应式网页布局与排版响应式网页布局的概念与意义媒体查询的使用方法布局与排版在不同设备上的应用第三章：网页色彩与字体3.1 色彩的基本概念与应用色彩的视觉效应与心理作用色彩的搭配原则与技巧色彩在网页设计中的应用案例3.2 字体的选择与使用字体的分类与特点字体的搭配原则与技巧字体在网页设计中的应用案例3.3 网页色彩与字体的综合应用色彩与字体的协调与平衡字体大小与行距的设置与调整色彩与字体的个性化应用与创新第四章：网页图片与多媒体元素4.1 网页图片的选择与处理图片的格式与特点图片的选择标准与技巧图片的处理与优化方法4.2 多媒体元素的应用音频与视频元素的应用动画与GIF图片的应用交互式多媒体元素的应用4.3 网页图片与多媒体元素的优化图片与多媒体元素的加载优化图片与多媒体元素的响应式应用图片与多媒体元素的视觉效果与用户体验第五章：网页交互与动画5.1 网页交互的基本概念与原理交互的定义与作用交互的实现方式与技术交互的设计原则与技巧5.2 JavaScript基础与应用JavaScript的基本语法与功能事件处理与DOM操作JavaScript库与框架的选择与使用5.3 网页动画的实现与优化CSS动画的制作方法与技巧JavaScript动画的制作方法与技巧动画的加载优化与性能考虑第六章：HTML与CSS高级应用6.1 表单设计与验证表单的基本结构与属性表单元素的使用与布局表单验证的实现方法6.2 网页组件设计与实现导航栏与面包屑的制作折叠面板与标签页的制作轮播图与幻灯片的设计与实现6.3 网页动画与过渡效果CSS过渡与动画的实现JavaScript动画的实现方法动画的性能优化与调试第七章：前端框架与库7.1 前端框架的基本概念前端框架的作用与优势常见的前端框架介绍框架的选择与使用7.2 Bootstrap框架的应用Bootstrap的基本结构与组件栅格系统与布局设计Bootstrap表单与样式定制7.3 React与Vue框架的选择与应用React框架的基本概念与使用方法Vue框架的基本概念与使用方法框架项目结构与组件化开发第八章：网页兼容性与优化8.1 网页兼容性基本概念浏览器兼容性的原因与挑战兼容性测试的方法与工具兼容性解决方案与最佳实践8.2 网页性能优化网页加载速度的影响因素图片与多媒体元素的优化代码压缩与合并技巧8.3 搜索引擎优化（SEO）SEO的基本概念与原则关键词研究与内容优化代码优化与站点结构调整第九章：网页安全与维护9.1 网页安全基本概念网页安全的威胁与挑战跨站脚本攻击（XSS）的预防跨站请求伪造（CSRF）的预防9.2 数据备份与恢复数据备份的重要性与方法数据库备份与文件备份恢复策略与流程9.3 网站维护与更新网站维护的内容与流程网站更新的方法与技巧网站监控与性能调优第十章：项目实践与案例分析10.1 项目实践流程项目需求分析与规划设计阶段与实现阶段项目测试与上线流程10.2 项目案例分析案例一：个人博客网站设计与制作案例二：电子商务网站设计与制作案例三：响应式企业官网设计与制作项目过程中的问题与解决方法网页设计与制作的趋势与展望重点和难点解析1. 第一章：网页设计与制作概述难点解析：网页设计原则的理解与应用、网页制作工具与技术的熟练运用2. 第二章：网页布局与排版难点解析：响应式网页布局与排版的设计与实现3. 第三章：网页色彩与字体难点解析：色彩与字体的协调与平衡、字体大小与行距的设置与调整4. 第四章：网页图片与多媒体元素难点解析：网页图片与多媒体元素的优化方法、响应式应用5. 第五章：网页交互与动画难点解析：JavaScript事件的处理与DOM操作、动画的实现与优化6. 第六章：HTML与CSS高级应用难点解析：表单验证的实现方法、网页组件的布局与样式设计7. 第七章：前端框架与库难点解析：框架的选择与使用、React与Vue框架的选择与应用8. 第八章：网页兼容性与优化难点解析：兼容性解决方案与最佳实践、网页性能优化的实施方法9. 第九章：网页安全与维护难点解析：预防跨站脚本攻击（XSS）与跨站请求伪造（CSRF）的策略、网站维护与更新的方法10. 第十章：项目实践与案例分析难点解析：项目需求的分析与规划、项目测试与上线流程的控制本教案《网页设计与制作》涵盖了网页设计与制作的基本概念、技术应用、项目实践等各个方面。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
电子商务网页设计与制作
授课教案
学年第学期
学院(部)专业(学部)
课外学习任务及学习指导
课前：
【教师布置调研任务】
调研主题：《分析如何制作模拟用户注册和登录页面》
要求：以小组为单位，分析如何通过JQuery的工具函数实现模拟用户注册和登录页面，同时制作汇报PPT,提交到“微信群”。
【学生调研，教师线上指导】
学生采用线上调研的方式，开展调研。
教师使用“微信群”对学生进行指导。
【教师对各组调研成果进行评价】
教师查阅学生调研结果PPT,对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。
课后：
【学生实现将数组array=［1,2,3,4,5,6］的元素依次输出到页面中】
小组成员团结协作，使用jQucry工具函数将数组@门^厂［1,2,3,4,5,6］的元素依次输出到页面中的效果。
教师使用“微信群”对学生进行指导。
【学生实现清理用户输入字符串的首尾空格并将结果输出到页面】
学生通过之前所学的知识，使用JQuery工具函数实现清理用户输入字符串的首尾空格并将结果输出到页面。
教师使用“微信群”对学生进行。
填表说明：1本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等;
3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。