网页设计与制作教程——Web前端开发(第6版)课件第8章 JavaScript对象模型8.1
合集下载
《网页设计与制作》课件
《网页设计与制作》PPT 课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
《网页设计与制作》PPT课件
图片边框宽度为0 (无边框)
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
网页设计与制作教程——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事件
网页设计与制作教程——Web前端开发(第6版)课件第8章 JavaScript对象模型8.2
习题8
3．使用对象的事件编程实现当用户选择下拉菜单的颜色时，文本框的字体颜色跟随改 变，如图8-19所示。
《网页设计与制作教程-Web前端开发（第6版）》 刘瑞新主编 配套资源
自由思想，独立思考
1. HTML Document对象的集合 HTML Document对象的常用集合见表8-14。
8.2 DOM的对象
8.2 DOM的对象
2. HTML Document对象的属性 HTML Document对象的常用属性，见表8-15。
Байду номын сангаас
8.2 DOM的对象
3. HTML Document对象的方法 HTML Document对象的常用方法见表8-16。
8.2 DOM的对象
8.2.3 Node对象 Node（节点）对象代表文档树中的一个节点，Node对象是整个DOM的核心对象。 1. Node对象的属性 每个节点都有其节点的属性，Node对象的常用属性见表8-10。
8.2 DOM的对象
（1）nodeName nodeName属性含有某个节点的名称，其中： 1）元素节点的nodeName值是标签名称。 2）属性节点的nodeName值是属性名称。 3）文本节点的nodeName值永远是#text。 4）文档节点的nodeName值永远是#document。 （2）nodeValue 对于文本节点，nodeValue属性包含文本内容。对于属性节点，nodeValue属 性包含属性值。对于文档节点和元素节点，nodeValue属性不可用。 （3）nodeType nodeType属性返回节点的类型，其中最重要的节点类型见表8-11。
8.2 DOM的对象
8.2.6 HTML Element对象
【完整版】网页设计与制作课程课件
探索响应式网页设计的原理和技巧，学习如何创建适应不同屏幕和设备的网 页。
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用JavaScript和CSS创建各种动态交互效果。
PHP语言基础
介绍PHP的基本语法、函数和流程控制，学习如何使用PHP开发动态网页。
MVC模式与Web应用程序框架
深入研究MVC模式的原理和应用，介绍常用的Web应用程序框架。
网站发布与维护
了解网站发布的流程和方法，学习如何进行网站的维护和更新。
网站安全和防范策略
探索网站安全的重要性和挑战，学习如何应对常见的安全威胁和攻击。
【完整版】网页设计与制 作课程课件
探索网页设计与制作的全过程，从前端开发基础到后端开发基础，通过丰富 的案例和实战项目，提升您的技能与知识。
网页设历程以及课程的主要内容和学习目标。
前端开发基础
介绍前端开发的基本概念、技术工具和流程，包括HTML、CSS和JavaScript。
网页性能和优化
深入了解网页性能优化的技术和策略，提高网页的加载速度和用户体验。
前端框架的使用
介绍常见的前端框架，如Bootstrap和Vue.js，学习如何使用框架开发快速高效的网页。
后端开发基础
探索后端开发的基本概念和技术，包括服务器端语言和数据库。
数据库设计和应用
学习数据库的基本原理和设计方法，以及如何使用SQL语言进行数据查询和操 作。
HTML语言基础
学习HTML的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用JavaScript和CSS创建各种动态交互效果。
PHP语言基础
介绍PHP的基本语法、函数和流程控制，学习如何使用PHP开发动态网页。
MVC模式与Web应用程序框架
深入研究MVC模式的原理和应用，介绍常用的Web应用程序框架。
网站发布与维护
了解网站发布的流程和方法，学习如何进行网站的维护和更新。
网站安全和防范策略
探索网站安全的重要性和挑战，学习如何应对常见的安全威胁和攻击。
【完整版】网页设计与制 作课程课件
探索网页设计与制作的全过程，从前端开发基础到后端开发基础，通过丰富 的案例和实战项目，提升您的技能与知识。
网页设历程以及课程的主要内容和学习目标。
前端开发基础
介绍前端开发的基本概念、技术工具和流程，包括HTML、CSS和JavaScript。
网页性能和优化
深入了解网页性能优化的技术和策略，提高网页的加载速度和用户体验。
前端框架的使用
介绍常见的前端框架，如Bootstrap和Vue.js，学习如何使用框架开发快速高效的网页。
后端开发基础
探索后端开发的基本概念和技术，包括服务器端语言和数据库。
数据库设计和应用
学习数据库的基本原理和设计方法，以及如何使用SQL语言进行数据查询和操 作。
HTML语言基础
学习HTML的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。
网页设计与制作整套课件完整版电子教案最全ppt整本书课件全套教学教程(最新
上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回
网页设计与制作教程——Web前端开发(第6版)课件第7章 JavaScript语法基础7.9
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一节
7.9 正则表达式
2. 限定符
例如，定义一个“/[1-9]\d{5}/”正则，然后在字符串str中匹配结果。 var str="201411"; //定义一个字符串 var reg = /[1-9]\d{5}/; //中国大陆邮政编码，含有5个数字的正则 document.write(str.search(reg)); //若符合，则返回0；若不符合，则返回-1。显示0
7.9 正则表达式
7.9.3 正则表达式使用的方法 1. 字符串方法
例如，字符范围可以组合使用，以便设计更灵活的匹配模式。 var str = "abc2 ert4 abe3 abf1 abg7"; //字符串直接量 var reg = /ab[c-g][1-7]/g; //前两个字符为ab，第三个字符为从c到g，第四个字 符为1~7的任意数字 document.write(str.match(reg)); //返回数组["abc2","abe3","abf1","abg7"]
7.9 正则表达式
7.9.2 正则表达式的组成 1. 匹配符
7.9 正则表达式
例如，在“/[^0123456789]/g”正则表达式中，将会匹配除了数字以外任意的字 符。
var str = '012abc3de45fg6'; //定义一个字符串 var reg = /[^0123456789]/g; document.write(str.match(reg)); //将所有符合正则的字符放进一个数组。显示 a,b,c,d,e,f,g 例如，定义一个“/[^0-9]/”的正则，然后在字符串str中匹配结果。 var str="01r234567x89"; //定义一个字符串 var reg=/[^0-9]/; //检查字符串中是否含有数字以外的字符 document.write(str.search(reg)); //若有数字以外的字符，则返回找到的位置； 否则返回-1。显示例如，定义一个年-月-日的正则“/[\d]{4}-[\d]{1,2}(-[\d]{1,2})/”，然后在字符串 str中匹配结果。
网页设计与制作PPT课件
1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程 序等。
超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有 gif和Flash动画两种。
第2讲 HTML语言基础
$ [知识目标]
了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法
8 [能力目标]
掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页 掌握HTML文件中表格和框架的使用
1.4 网页设计的基本流程
1.4.3网页的测试
1．浏览器兼容性测试。目前浏览器有： Internet Explorer与Netscape两大主流浏览器，二 者对HTML和CSS等语法的支持度是不同的。在 Dreamweaver中提供了可以检查网页中是否含有某版本浏 览器不能识别的语法功能，设计者可以借助其进行检查。
1.4 网页设计的基本流程
1.4.4网页上传和发布
网页设计好，必须把它发布到互联网上， 否则网站形象仍然不能展现出去。发布的服务 器可以是远程，也可以是本地。如果是发布到 互联网上，要先申请域名和主页空间，然后再 利用专用软件（如：CuteFTP）上传，FTP有很 多种软件，最著名的是 CuteFTP 和 LeapFTP， 也可以用Dreamweaver内置的FTP上传。
【培训课件】网页设计与制作教程
Photodraw Fireworks b、其它图象处理软件
Photoshop Coreldreaw FreeHand 3、动画制作软件
Flash
（三）Internet概述
1、Internet的概念
2、 Internet的起源
3、IP地址和域名
连接在Internet上的电脑，都叫做主机， 每台主机都有一个唯一的号码，这便是IP地址。
商业 com
军事 mil
教育 edu
网络机构 政府机构
net
gov
非赢利组织 org
四、连接Internet的方式
• 1、拨号连接 • 2、ISDN接入（一线通） • 传输速率：64Kbps或128Kbps • 3、企业级用户的接入技术 • 4、其他的用户级接入技术 • Cable Modem、WebTV、
二、初步认识 Dreamweaver
1、 Dreamweaver的启动 Dreamweaver的安装过程非常简单，一但
成功安装后，就可以在开始菜单找到 Dreamweaver的选项：
二、初步认识 Dreamweaver
2、编辑窗口 第一次启动Dreamweaver，首先看到的是
： 面板组（又D称工r可e具停a栏m靠浮：w动是e主面aDv板菜reea）单mr：的：wDe在编areva这em辑r4里w的e窗可a新ve以口r增还找功有到能很编多辑很窗多口其的他的的浮绝动大面部板分，功我能们可以根
完成后，回到站点窗口，就可以看到如下类似的画面：
三、制作前的准备工作——定义网站
三、制作前的准备工作——定义网站
• 可以看到，“我的网站”的名称已经出现在站点
窗口了，因为是新建的一个站点，所在在本地目录看 到的一片空白。
Photoshop Coreldreaw FreeHand 3、动画制作软件
Flash
（三）Internet概述
1、Internet的概念
2、 Internet的起源
3、IP地址和域名
连接在Internet上的电脑，都叫做主机， 每台主机都有一个唯一的号码，这便是IP地址。
商业 com
军事 mil
教育 edu
网络机构 政府机构
net
gov
非赢利组织 org
四、连接Internet的方式
• 1、拨号连接 • 2、ISDN接入（一线通） • 传输速率：64Kbps或128Kbps • 3、企业级用户的接入技术 • 4、其他的用户级接入技术 • Cable Modem、WebTV、
二、初步认识 Dreamweaver
1、 Dreamweaver的启动 Dreamweaver的安装过程非常简单，一但
成功安装后，就可以在开始菜单找到 Dreamweaver的选项：
二、初步认识 Dreamweaver
2、编辑窗口 第一次启动Dreamweaver，首先看到的是
： 面板组（又D称工r可e具停a栏m靠浮：w动是e主面aDv板菜reea）单mr：的：wDe在编areva这em辑r4里w的e窗可a新ve以口r增还找功有到能很编多辑很窗多口其的他的的浮绝动大面部板分，功我能们可以根
完成后，回到站点窗口，就可以看到如下类似的画面：
三、制作前的准备工作——定义网站
三、制作前的准备工作——定义网站
• 可以看到，“我的网站”的名称已经出现在站点
窗口了，因为是新建的一个站点，所在在本地目录看 到的一片空白。
网页设计与制作教程——Web前端开发(第6版)课件第1章 HTML 5概述1.2
2. HTML的全局事件属性 事件是针对某个元素的，可识别的动作。例如，针对“确定”按钮的单击事件， 文本框内容变化事件、复选框的选中或取消选中事件等。 HTML有使事件在浏览器中触发动作的能力，例如，当用户单击某个元素时执 行JavaScript程序。在HTML中，事件既可以通过JavaScript直接触发，也可以通 过全局事件属性触发。所谓全局事件属性是指可用于大多数HTML元素的事件属 性。有关事件编程的知识，将在第9章JavaScript事件处理中介绍。
1.2 HTML5的基本结构和语法规则
4．<meta charset>标签 <head>…</head>标签中的<meta charset>指定网页文档中的字符集， 称为HTML文档编码，HTML5文档直接使用meta元素的charset属性指定文 档编码，语法格式如下： <meta charset="UTF-8"> 为了被浏览器正确解释和通过W3C代码校验，所有的HTML文档都必须声 明它们所使用的编码语言。文档声明的编码应该与实际的编码一致，否则就 会呈现为乱码。对于中文网页的设计者来说，指定代码的字符集为“UTF8”。
1.2 HTML5的基本结构和语法规则
1.2.4 元素的分类 依据元素的作用不同，元素可以分为元信息元素和语义元素。 1．元信息元素 元信息（meta-information）或称元数据（Metadata）类元素是指用于描述文档 自身信息的一类元素，meta元素定义元信息，包含页面的描述、关键字、最后的修改 日期、作者及其它元信息，<meta>标签写在<head>…</head>标签中。元信息类元 素是提供给浏览器、搜索引擎（关键字）以及其它Web服务调用，一般不会显示给用 户。 meta元素的常用属性如下： 1）charset：定义文档的字符编码，常用的是“UTF-8”。 2）content：定义与name和http-equiv相关的元信息。 3）name：关联content的名称（常用的有keyowrd关键字、author作者名、 discriptiont页面描述）。
1.2 HTML5的基本结构和语法规则
4．<meta charset>标签 <head>…</head>标签中的<meta charset>指定网页文档中的字符集， 称为HTML文档编码，HTML5文档直接使用meta元素的charset属性指定文 档编码，语法格式如下： <meta charset="UTF-8"> 为了被浏览器正确解释和通过W3C代码校验，所有的HTML文档都必须声 明它们所使用的编码语言。文档声明的编码应该与实际的编码一致，否则就 会呈现为乱码。对于中文网页的设计者来说，指定代码的字符集为“UTF8”。
1.2 HTML5的基本结构和语法规则
1.2.4 元素的分类 依据元素的作用不同，元素可以分为元信息元素和语义元素。 1．元信息元素 元信息（meta-information）或称元数据（Metadata）类元素是指用于描述文档 自身信息的一类元素，meta元素定义元信息，包含页面的描述、关键字、最后的修改 日期、作者及其它元信息，<meta>标签写在<head>…</head>标签中。元信息类元 素是提供给浏览器、搜索引擎（关键字）以及其它Web服务调用，一般不会显示给用 户。 meta元素的常用属性如下： 1）charset：定义文档的字符编码，常用的是“UTF-8”。 2）content：定义与name和http-equiv相关的元信息。 3）name：关联content的名称（常用的有keyowrd关键字、author作者名、 discriptiont页面描述）。
网页设计与制作教程——Web前端开发(第6版)课件第7章 JavaScript语法基础7.2
7.1 JavaScript概述 7.2 在HTML文档中使用JavaScript 7.3 数据类型 7.4 标识符、变量、运算符和表达式 7.5 流程控制语句 7.6 函数 7.7 对象 7.8 内置对象 7.9 正则表达式 7.10 使用开发者工具调试JavaScript程序 7.11 习题
7.2 在HTML文档中使用JavaScript
击此按钮"> </form> <p style="font:12pt; font-family:'黑体'; color:red; text-align:center">JavaScript例子</p>
</body> </html>
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一节
7.2.1 在HTML文档中嵌入脚本程序 JavaScript的脚本程序包括在HTML中，使之成为HTML文档的一部分。其格式为： <script type="text/javascript">
JavaScript语言代码; JavaScript语言代码;
… </script>
注意，在<script language ="JavaScript">…</script>中的程序代码有大、小 写之分。
</head> <body> </body> </html>
脚本文件hello.js的内容为：
document.write("Hello World!");
7.2 在HTML文档中使用JavaScript
7.2 在HTML文档中使用JavaScript
击此按钮"> </form> <p style="font:12pt; font-family:'黑体'; color:red; text-align:center">JavaScript例子</p>
</body> </html>
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一节
7.2.1 在HTML文档中嵌入脚本程序 JavaScript的脚本程序包括在HTML中，使之成为HTML文档的一部分。其格式为： <script type="text/javascript">
JavaScript语言代码; JavaScript语言代码;
… </script>
注意，在<script language ="JavaScript">…</script>中的程序代码有大、小 写之分。
</head> <body> </body> </html>
脚本文件hello.js的内容为：
document.write("Hello World!");
7.2 在HTML文档中使用JavaScript
网页设计与制作教程——Web前端开发(第6版)课件第7章 JavaScript语法基础7.5
case 6: scoreGrade = "及格"; break;
default: scoreGrade = "不及格"; break;
} alert(scoreGrade); } </script> </head> <body> <form name="myForm" method="get"> <p>成绩:<input type="text" name="txtScore" /></p> <p><input type="button" value="确定" onclick="grade()" /> </p> </form> </body> </html>
7.5 流程控制语句
7.5.3 循环结构语句 1. for循环语句 for循环语句的格式为： for (初始化; 条件; 增量) {
被执行的语句块; }
2. for in循环语句 格式为： for (键 in 对象) {
被执行的语句块; }
7.5 流程控制语句
3. while循环语句 while循环语句的格式为： while (条件) {
<script type="text/javascript"> alert("你好！"); //输出指定内容 var msg = "你好！张三"; alert(msg); //输出变量中的内容 document.write("<strong>你好！<br />李四</strong>");
default: scoreGrade = "不及格"; break;
} alert(scoreGrade); } </script> </head> <body> <form name="myForm" method="get"> <p>成绩:<input type="text" name="txtScore" /></p> <p><input type="button" value="确定" onclick="grade()" /> </p> </form> </body> </html>
7.5 流程控制语句
7.5.3 循环结构语句 1. for循环语句 for循环语句的格式为： for (初始化; 条件; 增量) {
被执行的语句块; }
2. for in循环语句 格式为： for (键 in 对象) {
被执行的语句块; }
7.5 流程控制语句
3. while循环语句 while循环语句的格式为： while (条件) {
<script type="text/javascript"> alert("你好！"); //输出指定内容 var msg = "你好！张三"; alert(msg); //输出变量中的内容 document.write("<strong>你好！<br />李四</strong>");
网页设计与制作整套课件完整版电子教案最全ppt整本书课件全套教学教程
目的是为了提供给用户一个友好、易 于使用的网络环境，同时提高网站的 知名度和访问量。
03
网页制作的基本流程
通常包括规划、设计、开发、测试和 发布等阶段。
网页制作技术和工具
网页制作技术
包括HTML、CSS、JavaScript、PHP、等，用于构建和开发网站。
网页制作工具
常见的工具有Adobe Dreamweaver、Microsoft Visual Studio、Sublime Text等，用于提高开发效率。
通过学习，学生可以掌握网页的基本 架构、样式、交互等关键技术，能够 独立完成简单的网页设计和制作。
本课程还注重实践操作，通过大量的 案例和项目实战，培养学生的实际操 作能力和创新思维。
课程展望
随着互联网技术的不断发展，网 页设计与制作的技术也在不断更 新和升级。未来，网页设计师需 要不断学习和掌握新的技术和工 具，以适应行业的发展和变化。
熟悉并能够使用常用的网页设计工具； 提高学习者的综合素质和创新能力。
课程内容
第一章：网页设计与制作的基本概念 第三章：网页布局与色彩搭配 第五章：综合案例分析与实践操作
第二章：网页设计工具的使用
第四章：交互设计与响应式设计
每章都包含了大量的案例和实际操作，帮助学习者更好 地理解和掌握所学内容。同时，课程还提供了丰富的素 材和模板，方便学习者进行实践操作。
本课程在内容上不断更新和完善 ，将不断引入新的知识点和案例 ，以保持课程的新鲜感和实用性 。
学生可以通过进一步学习和实践 ，掌握更深入的网页设计和制作 技术，为未来的职业发展打下坚 实的基础。
THANK YOU.
元素选择器是最基本的选择器，它通过HTML元素的标签名来选择元素。例如，`p`选择器 会选择页面上的所有段落元素。
03
网页制作的基本流程
通常包括规划、设计、开发、测试和 发布等阶段。
网页制作技术和工具
网页制作技术
包括HTML、CSS、JavaScript、PHP、等，用于构建和开发网站。
网页制作工具
常见的工具有Adobe Dreamweaver、Microsoft Visual Studio、Sublime Text等，用于提高开发效率。
通过学习，学生可以掌握网页的基本 架构、样式、交互等关键技术，能够 独立完成简单的网页设计和制作。
本课程还注重实践操作，通过大量的 案例和项目实战，培养学生的实际操 作能力和创新思维。
课程展望
随着互联网技术的不断发展，网 页设计与制作的技术也在不断更 新和升级。未来，网页设计师需 要不断学习和掌握新的技术和工 具，以适应行业的发展和变化。
熟悉并能够使用常用的网页设计工具； 提高学习者的综合素质和创新能力。
课程内容
第一章：网页设计与制作的基本概念 第三章：网页布局与色彩搭配 第五章：综合案例分析与实践操作
第二章：网页设计工具的使用
第四章：交互设计与响应式设计
每章都包含了大量的案例和实际操作，帮助学习者更好 地理解和掌握所学内容。同时，课程还提供了丰富的素 材和模板，方便学习者进行实践操作。
本课程在内容上不断更新和完善 ，将不断引入新的知识点和案例 ，以保持课程的新鲜感和实用性 。
学生可以通过进一步学习和实践 ，掌握更深入的网页设计和制作 技术，为未来的职业发展打下坚 实的基础。
THANK YOU.
元素选择器是最基本的选择器，它通过HTML元素的标签名来选择元素。例如，`p`选择器 会选择页面上的所有段落元素。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
8.1 BOM的对象 8.2 DOM的对象 习题8
8.1 BOM的对象
8.1.1 BOM概述 浏览器对象关系的关系如图8-1所示。
8.1 BOM的对象
8.1.2 window对象 1. window对象的属性
8.1 BOM的对象
2. window对象的方法
8.1 BOM的对象
【例8-1】显示窗口的宽、高和设置计时器，页面初次加载时依次显示3个的提示 框，延时5000ms后再调用hello()函数，显示其对话框，本例文件8-1.html在浏览 器中显示的效果，如图8-2所示。
result += "\n标签为input的元素的个数：" + inputs.length; alert(result); } </script> </head> <body> <form name="myform"> 用户名：<input type="text" name="userName" id="userName" /><br /> 爱 好：<input type="checkbox" name="hobby" value="音乐" />音乐 <input type="checkbox" name="hobby" value="美食" />美食 <input type="checkbox" name="hobby" value="旅游" />旅游<br /> <input type="button" value="统计结果" onclick="count()" /> </form> </body> </html>
hobby的元素的个数：" + hobby.length + "\n个人爱好："; for (var i = 0; i < hobby.length; i++) { if (hobby[i].checked) { result += hobby[i].value + " "; } }
8.1 BOM的对象
</head> <body> </body> </html>
8.1 BOM的对象
8.1.3 document对象 1. document对象的属性
8.1 BOM的对象
2. document对象的方法
8.1 BOM的对象
【例8-2】使用getElementById()、getElementsByName()、 getElementsByTagName()方法操作文档中的元素。浏览者填写表单中的选项后， 单击“统计结果”按钮，弹出消息框显示统计结果，本例文件8-2.html在浏览器中的 显示效果，如图8-3所示。
8.1 BOM的对象
8.1.7 history对象
document.write(history.length + "<br />"); //初始时，该值为1 history.back(); //后退一页 //history.forward(); //前进一页 //history.go(-1); //后退一页 //history.go(1); //前进一页 //history.go(2); //前进两页
8.1 BOM的对象
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>document对象</title> <script type="text/javascript"> function count() { var userName = document.getElementById("userName"); var hobby = document.getElementsByName("hobby"); var inputs = document.getElementsByTagName("input"); var result = "ID为userName的元素的值：" + userName.value + "\nname为
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你完成了这一节的学习
8.1 BOM的对象
8.1.6 screen对象
8.1 BOM的对象
document.write(screen.availHeight + "<br />"); //返回客户端浏览器显示屏幕的高度 document.write(screen.availWidth + "<br />"); //返回浏览器显示屏幕的宽度 document.write(screen.height+ "<br />"); //返回显示器的高度 document.write(screen.width + "<br />"); //返回显示器的宽度
8.1 BOM的对象
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function hello() { window.alert("欢迎您！"); } window.setTimeout("hello()", 5000); //延时5000ms后再调用hello()函数 window.alert("窗口的宽="+window.innerWidth); //获得窗口的宽度 window.alert("窗口的高="+window.innerHeight); //获得窗口的高度 window.prompt("window.prompt()", "默认文本"); //js中的提示输入框 </script>
8.1 BOM的对象
8.1.4 location对象 1. location对象的属性
8.1 BOM的对象
2. location对象的方法
window.onload=function(){ alert(location.href); location.replace("https://");
}
8.1 BOM的对象
8.1.5 navigator对象
8.1 BOM的对象
if (erAgent.indexOf('MSIE') != -1) { alert('我是IE');
} else { alert('我不是IE');
} document.write(navigator.appName+"<br />"); //返回浏览器的名称 document.write(navigator.appVersion+"<br />"); //返回浏览器的平台和版本信息 document.write(navigator.cookieEnabled+"<br />"); //返回指明浏览器中是否启用cookie的布尔值 document.write(navigator.platform+"<br />"); //返回运行浏览器的操作系统平台
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第8章 JavaScript对象模型
8.1 BOM的对象
BOM（Browser Object Model）是指浏览器对象模型，浏览器对象模型提供 了独立于内容的、可以与浏览器窗口进行互动的对象结构。
目录
第8章 JavaScript对象模型
8.1 BOM的对象
8.1.1 BOM概述 浏览器对象关系的关系如图8-1所示。
8.1 BOM的对象
8.1.2 window对象 1. window对象的属性
8.1 BOM的对象
2. window对象的方法
8.1 BOM的对象
【例8-1】显示窗口的宽、高和设置计时器，页面初次加载时依次显示3个的提示 框，延时5000ms后再调用hello()函数，显示其对话框，本例文件8-1.html在浏览 器中显示的效果，如图8-2所示。
result += "\n标签为input的元素的个数：" + inputs.length; alert(result); } </script> </head> <body> <form name="myform"> 用户名：<input type="text" name="userName" id="userName" /><br /> 爱 好：<input type="checkbox" name="hobby" value="音乐" />音乐 <input type="checkbox" name="hobby" value="美食" />美食 <input type="checkbox" name="hobby" value="旅游" />旅游<br /> <input type="button" value="统计结果" onclick="count()" /> </form> </body> </html>
hobby的元素的个数：" + hobby.length + "\n个人爱好："; for (var i = 0; i < hobby.length; i++) { if (hobby[i].checked) { result += hobby[i].value + " "; } }
8.1 BOM的对象
</head> <body> </body> </html>
8.1 BOM的对象
8.1.3 document对象 1. document对象的属性
8.1 BOM的对象
2. document对象的方法
8.1 BOM的对象
【例8-2】使用getElementById()、getElementsByName()、 getElementsByTagName()方法操作文档中的元素。浏览者填写表单中的选项后， 单击“统计结果”按钮，弹出消息框显示统计结果，本例文件8-2.html在浏览器中的 显示效果，如图8-3所示。
8.1 BOM的对象
8.1.7 history对象
document.write(history.length + "<br />"); //初始时，该值为1 history.back(); //后退一页 //history.forward(); //前进一页 //history.go(-1); //后退一页 //history.go(1); //前进一页 //history.go(2); //前进两页
8.1 BOM的对象
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>document对象</title> <script type="text/javascript"> function count() { var userName = document.getElementById("userName"); var hobby = document.getElementsByName("hobby"); var inputs = document.getElementsByTagName("input"); var result = "ID为userName的元素的值：" + userName.value + "\nname为
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你完成了这一节的学习
8.1 BOM的对象
8.1.6 screen对象
8.1 BOM的对象
document.write(screen.availHeight + "<br />"); //返回客户端浏览器显示屏幕的高度 document.write(screen.availWidth + "<br />"); //返回浏览器显示屏幕的宽度 document.write(screen.height+ "<br />"); //返回显示器的高度 document.write(screen.width + "<br />"); //返回显示器的宽度
8.1 BOM的对象
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function hello() { window.alert("欢迎您！"); } window.setTimeout("hello()", 5000); //延时5000ms后再调用hello()函数 window.alert("窗口的宽="+window.innerWidth); //获得窗口的宽度 window.alert("窗口的高="+window.innerHeight); //获得窗口的高度 window.prompt("window.prompt()", "默认文本"); //js中的提示输入框 </script>
8.1 BOM的对象
8.1.4 location对象 1. location对象的属性
8.1 BOM的对象
2. location对象的方法
window.onload=function(){ alert(location.href); location.replace("https://");
}
8.1 BOM的对象
8.1.5 navigator对象
8.1 BOM的对象
if (erAgent.indexOf('MSIE') != -1) { alert('我是IE');
} else { alert('我不是IE');
} document.write(navigator.appName+"<br />"); //返回浏览器的名称 document.write(navigator.appVersion+"<br />"); //返回浏览器的平台和版本信息 document.write(navigator.cookieEnabled+"<br />"); //返回指明浏览器中是否启用cookie的布尔值 document.write(navigator.platform+"<br />"); //返回运行浏览器的操作系统平台
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第8章 JavaScript对象模型
8.1 BOM的对象
BOM（Browser Object Model）是指浏览器对象模型，浏览器对象模型提供 了独立于内容的、可以与浏览器窗口进行互动的对象结构。
目录
第8章 JavaScript对象模型