HTML5+CSS3+JavaScript网页设计基础与实战（微课版）教学设计教案_第1页
HTML5+CSS3+JavaScript网页设计基础与实战（微课版）教学设计教案_第2页
HTML5+CSS3+JavaScript网页设计基础与实战（微课版）教学设计教案_第3页
HTML5+CSS3+JavaScript网页设计基础与实战（微课版）教学设计教案_第4页
HTML5+CSS3+JavaScript网页设计基础与实战（微课版）教学设计教案_第5页
已阅读5页，还剩155页未读， 继续免费阅读

下载本文档

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

文档简介

学IT有疑问，就找千问千知千里寻他众百度,锋自苦寒磨砺出千锋教育HTML5+CSS3+JavaScript网页设计基础与实战教学设计课程名称：HTML5+CSS3+JavaScript网页设计基础与实战_____授课年级：_______________________授课学期：_______________________教师姓名：_______________________2022年08月22日课程名称第1章初识Web前端计划学时4学时内容分析本章介绍了Web前端的发展历程，HTML5、CSS3、JavaScript3个Web核心技术的基础知识，以及webstorm开发工具的安装与使用教学目标与教学要求【知识目标】了解web前端发展历程认识HTML5的特点、新特性、文件结构认识CSS3的特点、新特性、选择器与属性的分类认识JavaScript的语言特性、构成、变量与数据类型、运算符、常用事件【技能目标】掌握HTML5标签和元素的使用方法掌握CSS3的3种引入方式掌握JavaScript数据类型的转换方式掌握webstorm开发工具的安装熟悉webstorm开发工具的基本操作【思政育人目标】初步建立逻辑思维和软件版权意识。引导学生在学习中健全职业道德的规范。引导学生创新思维和探索的科学精神。教学重点认识CSS3的选择器与属性的分类、认识JavaScript的变量与数据类型、掌握HTML5标签与元素的使用、熟悉webstorm开发工具的基本操作教学难点创建第一个HTML5网页教学方式课堂讲解配合ppt演示1学时教学过程第一学时（web前端概述、web前端发展历程）一、提出需求，导入学习任务（1）思考HTML5+CSS3+JavaScript网页设计的学习应该从何入手。互联网中的网页大多数都是使用HTML格式展示给浏览者，CSS样式用于设计网页的排版，JavaScript语言则用于用户与网页进行交互。本节课程可从学生日常所看到的网站页面进行举例，进而引出web前端的相关概念。介绍web前端的发展历程，以便更深入地学习web前端。（2）明确学习方向。了解web前端发展历程二、知识讲解（一）前端概述1.万维网万维网的定义万维网（WorldWideWeb，亦作Web、WWW、W3），是一种基于超文本和超文本传输协议（HyperTextTransferProtocol，简称HTTP）的，全球性的，动态交互的，跨平台的分布式图形信息系统。前端开发前端开发是创建Web页面或APP等前端界面呈现给用户的过程，通过HTML（HyperTextMark-upLanguage，超文本标记语言）、CSS（CascadingStyleSheets，层叠样式表）和JavaScript以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互。前端发展总述Web1.0时代：Web前端发展初期HTML技术只能展示简单的网页。那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。Web2.0时代：涌现出大量的类似于桌面软件的Web应用，用户不仅能浏览网页，还能对网页上的内容进行操作。网站的前端因此发生变化，网页不再只是单一的承载文字和图片，各种媒体的应用使网页内容变得更丰富多彩，同时也提升了用户体验感。2.web前端发展简史静态页面阶段1990年的12月25日，伯纳斯·李在他的电脑上部署了第一套“主机-网站-浏览器”构成的Web系统，这是B/S（Browser/Server）架构网站应用软件的开端，也是前端工程的开端。1993年4月，Mosaic浏览器作为第一款正式的浏览器发布。1994年12月，W3C在伯纳斯·李的主持下成立，标志着万维网进入了标准化发展的阶段。这个阶段的网页还非常地原始，主要以HTML为主，是纯静态的只读网页，被称为Web1.0时代。JavaScript诞生1995年，网景通信公司（NetscapeCommunicationsCorporation，亦称Netscape）设计了JavaScript脚本语言，并集成到Navigator2.0版本中。随后微软公司看出JavaScript的潜力，模仿开发出Jscript和VBScript，并应用到InterentExplorer（简称IE）浏览器中，这也导致了微软和NetScape的两个浏览器之间发生产品竞争。后来Navigator在浏览器市场上落于下风，于是NetScape把JavaScript提交到欧洲计算机制造商协会（EuropeanComputerManufacturersAssociation，简称ECMA），推动制订ECMAScript标准，JavaScript主导了W3C的官方标准，成功实现JavaScript的标准走向国际。动态页面的发展JavaScript兴起以后，网页可以显示出浮动广告之类的动态效果，但这不是动态网页。以PHP、JSP和ASP为代表的后端动态页面技术的应用才实现动态交互，这些技术可以获取到服务器的数据信息，推动各种论坛以及搜索引擎的发展，加快了Web的发展进程。Ajax开启Web2.0时代2004年以前的动态页面是由后端技术驱动的，但是每一次交互数据都要刷新一次网页，频繁的页面刷新给用户带来极差的体验感，直到Ajax技术的应用才解决这个问题。Ajax技术实现了异步HTTP请求，用户不用专门去等待请求的响应，就可以继续浏览或操作网页。Ajax技术开启了web2.0的时代。前端兼容性框架的出现Firefox（火狐）浏览器和Opera（欧朋）浏览器同IE浏览器之间再次展开产品竞争，不同的浏览器之间，技术标准也会有差异，这样不利于兼容开发，于是催生了Dojo、Mooltools、YUIExtJS、JQuery等前端兼容框架，其中2006年诞生的JQuery的应用最为广泛。HTML5的出现2007年，W3C采纳了HTML5规范草案，并在2008年1月22日正式发布。在HTML5新规范的指引下，各个浏览器厂商不断改进浏览器，谷歌以JavaScript引擎V8为基础研发的Chrome浏览器发展也十分迅速。2014年10月28日，W3C正式发布HTML5.0标准。前端三大框架前端3大主流框架是Angular、Rect和Vue。2009年，以Chrome的V8引擎为基础开发的Node.js发布，随后AngularJS诞生，后来被谷歌收购。Angular是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能。2011年，React诞生，于1013年5月开源，是一个用于构建用户界面的JavaScript框架，核心思想是封装组件。2014年，尤雨溪开发出一套用于构建用户界面的渐进式框架Vue，它能减少不必要的DOM操作和提高渲染效率ECMAScript6的发布2015年6月，ECMAScript6.0发布，这个版本增加了很多新的语法，更加提升了JavaScript的开发潜力。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用第一章课后作业。第二学时（认识HTML5、认识CSS3）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。认识HTML5的特点、新特性、文件结构掌握HTML5标签和元素的使用方法认识CSS3的特点、新特性、选择器与属性的分类掌握CSS3的3种引入方式二、知识讲解（一）认识HTML51.HTML5的特点简易性。HTML版本升级采用超集方式，从而更加灵活方便。可扩展。HTML语言应用广泛，同时带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。平台无关性。HTML可以使用在多种平台上，关联性不大。通用性。HTML是基于标准通用标记语言，它允许网页开发者建立图片与文本相结合的复杂页面，页面可被网络上的任何人使用各种类型的电脑或浏览器进行浏览。2.HTML5的新特性新的语义元素。HTML5提供了新的元素来创建更好的页面结构，例如<header>、<nav>、<footer>、<article>和<section>。新的表单控件。HTML5拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证，例如，数字（number）、日期（date）、时间（time）、邮件（email）和电话（tel）。强大的图像支持。HTML5可使用<canvas>和<svg>标签通过脚本语言(通常是JavaScript)绘制图形。强大的多媒体支持。HTML5规定了在网页上嵌入视频和音频元素的标准，即使用<video>和<audio>元素。强大的新API。HTML5可通过geolocation方法配合第三方的地图API实现地理定位。HTML5可以在本地存储用户的浏览数据，Web存储需要更加的安全与快速的数据存储方式，用本地存储方式取代cookie存储方式更加安全便捷。3.HTML5的文件结构文件基本结构主要由文件声明（<!DOCTYPEhtml>）、HTML文档（<html>）、文件头部（<head>）和文件主体（<body>）4部分构成。文件声明<!DOCTYPEhtml>是HTML5标准网页声明，表示向浏览器说明当前文件使用HTML5标准规范。HTML文档<html></html>是HTML文件的文档标签，<html>是HTML文件开始标签，也被称为根标签，是指文件的最外层，</html>是HTML文件结束标签。网页的所有内容都需要写在<html></html>标签里面。文件头部<head></head>是HTML文件的头部标签，<head>是HTML文件头标签，</head>是HTML文件尾标签。它用于定义文档的头部信息，是所有头部元素的容器，描述了文件的各种属性和信息。头部元素有<meta>、<title>、<script>、<style>、<link>等标签。文件主体<body></body>是主体标签，<body>是正文内容开始标记，</body>是正文内容结束标记。它用于定义文件的内容，可包含图片、文本、视频、音频、超链接、表格、列表等各种内容。在HTML文件中，<!--注释内容-->是HTML文件的注释，用于标注网页内容的注释部分，它的主要作用是对代码进行解释，给开发人员作参考，不会被浏览器解析和执行。4.标签和元素HTML标签HTML标签分为单标签和双标签，单标签是由一个标签组成的，例如，有<meta>、<img>、<input>、<br>、<link>等。HTML标签大多数为双标签，双标签由首标签和尾标签构成，首标签格式为<标签名称>，尾标签格式为</标签名称>，其语法格式如下所示。<标签名称>内容</标签名称>HTML标签的示例代码如下所示。<p>今天也是天气晴朗的一天</p>HTML元素HTML5文件由元素和标签构成。HTML元素指的是从开始标签（StartTag）到结束标签（EndTag）的所有代码。整个HTML文件就像是一个元素集合，里面包含了许多元素。在HTML文件中某个元素的语法定义如下所示。<标签名称属性值1=”值1”属性值2=”值2”>内容</标签名称>HTML元素的示例代码如下所示。<divtitle=”spring”>春天到了</div>（二）认识CSS31.CSS3定义CSS是层叠样式表，一种用于(增强)控制网页样式并允许将样式信息与网页内容分离的标记性语言，由W3C定义和维护，使用CSS可以实现网页内容与呈现的分离，不仅可以提升网页执行效率，更方便后期管理和代码维护。CSS可以改变HTML元素的样式。改变元素样式我们得先弄清楚3件事：“改变的对象是谁”、“改什么类型的样式”和“具体改成什么样子”。“改变的对象是谁”要在HTML元素中选择要改变的对象，这需要用到CSS选择器。CSS选择器用于指定、控制CSS要作用的HTML元素。“改什么类型的样式”要选择改变HTML元素的具体样式属性，这需要使用CSS属性。CSS属性是指定选择符所具有的属性。“具体改成什么样子”就是指定这个样式属性的属性值。2.CSS3的特点丰富的样式定义易于使用和修改多页面应用层叠页面压缩3.CSS3新特性新增选择器。CSS3新增了结构伪类选择器、伪元素选择器、属性选择器等。新的边框效果。CSS3新增了圆角边框（border-radius）、边框阴影（box-shadow）和边框图像（border-image），丰富了元素的边框效果。渐变。CSS3新增了颜色的线性渐变（linear-gradient）和径向渐变（radial-gradient），使元素变得更加绚丽多变。2D转换和3D转换。CSS3增加了2D转换和3D转换，有位移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）4种转换。过渡。过渡就是把变换的过程细节放大。动画。动画通过@keyframes规则指定一个CSS3样式和动画将逐步从目前的样式更改为新的样式。弹性盒模型。CSS3弹性盒（FlexibleBox或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。4.CSS3引入方式行内样式内嵌样式外链样式样式的优先等级也有划分，行内样式优先于内嵌样式和外部样式，后两者是按照就近原则决定优先级。样式的引入方式不同，内容与样式的关联性也不同，关联性的强弱会影响后期代码的维护。5.CSS3选择器基本选择器通用选择器标签选择器类选择器ID选择器选择器优先级为：通用选择器<标签选择器<类选择器<ID选择器<行内样式<Important高级选择器后代选择器子代选择器并集选择器结构伪类选择器:first-child:last-child:nth-child():nth-last-child()结构伪类选择器可根据文档结构的关系来匹配特点的元素。伪元素选择器::first-letter::first-line::selection::before::after伪元素选择器可用于在文档中插入假象的元素，在新版本里使用“:”与“::”区分伪类和伪元素。属性选择器[属性名][属性名=”属性值”][class~=”属性名”][class^=”字符串”][class$=”字符串”][class*=”字符串”]属性选择器是根据标签的属性来匹配元素，使用中括号（[]）进行标识。6.CSS3常用属性字体属性CSS3中对字体样式的设置主要有字体风格、字体粗细、字体大小、字体名称等。font-stylefont-weightfont-sizefont-family字体属性（font）可以进行连写，连写顺序为字体风格（font-style）、字体粗细（font-weight）、字体大小（font-size）和字体名称（font-family）。背景属性CSS3中对背景样式的设置主要有背景颜色、背景图像、背景图像的重复性、背景图像位置、背景图像滚动情况等。background-colorbackground-imagebackground-repeatbackground-positionbackground-attachment背景属性（background）可以进行连写，连写顺序为背景颜色（background-color）、背景图像（background-image）、背景图像的重复性（background-repeat）、背景图像滚动情况（background-attachment）、背景图像位置（background-position）。文本属性CSS3中对文本样式的设置主要有文本颜色、文本水平对齐方式、行高、文本修饰、文本转换、文本缩进、文本阴影等。colortext-alignline-heighttext-decorationtext-transformtext-indenttext-shadow三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用第一章课后作业。第三学时（认识JavaScript）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。认识JavaScript的语言特性、构成、变量与数据类型、运算符、常用事件掌握JavaScript数据类型的转换方式二、知识讲解（一）认识JavaScript1.JavaScript定义JavaScript是一种轻量级、解释型的Web开发语言，是可与HTML文件相融合的一种脚本语言。当用户在客户端浏览该网页时，浏览器会执行JavaScript程序，用户可通过交互操作去改变网页的内容。2.JavaScript语言特性解释型弱类型动态性事件驱动跨平台3.JavaScript的构成ECMAScript（简称ES）ECMAScript描述了JavaScript语言的基本语法和数据类型等，并规范了JavaScript编码方式和语言特性DOM（DocumentObjectModel，页面文档对象模型）DOM文档对象模型是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口（API）BOM（BrowserObjectModel，浏览器对象模型）BOM浏览器对象模型是对浏览器窗口进行访问和操作的功能接口，例如，弹出新的浏览器窗口、获取浏览器信息等。4.JavaScript的变量与数据类型变量JavaScript变量是存储数据值的容器。变量是编程中最基本的单元，它会暂时引用用户需要存储的数据。JavaScript变量的语法格式如下所示。var变量名；var变量名=初始值；数据类型的分类基本数据类型字符串（String）数值(Number)布尔值(Boolean)空值（Null）未定义值（Undefined）引用数据类型对象(Object)数组(Array)函数(Function)基本数据类型和引用数据类型的区别是基本数据类型的值是不可变的，变量存放在栈里面；引用数据类型可以拥有属性和方法，且值是可变的，值是同时保存在栈内存和堆内存。数据类型的转换其他数据可以转换为字符串类型通过toString（）方法进行转换使用“+""”进行转换字符串类型转换为数字类型ParseInt()方法ParseFloat()方法Nubmber()方法5.JavaScript的运算符运算符是用来对变量或数据进行操作的符号，也称作操作符。运算符根据功能用途可分为算术运算符、比较运算符、逻辑运算符等算术运算符算数运算符用于对数值执行算数运算，包括加、减、乘、除、取余等。比较运算符比较运算符用于对变量或表达式的结果进行比较，返回值为布尔值true或false。逻辑运算符逻辑运算符用来表示数学中的“与”“或”“非”运算，其主要作用是连接条件表达式，表示各个条件之间的逻辑关系。6.JavaScript的常用事件JavaScript控制页面的行为是由事件驱动的。事件就是JavaScript监测测到用户的操作或是页面上的一些行为。onclickondblclickonmouseoveronmouseoutonmouseenteronmouseleaveonmousedownonmouseuponmousemoveonwheeloncontextmenu三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用第一章课后作业。第四学时（Webstorm开发工具）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握webstorm开发工具的安装熟悉webstorm开发工具的基本操作二、知识讲解（一）认识开发工具1.开发工具介绍常言道“工欲善其事，必先利其器”，开发工具的使用是十分重要的，一个好的开发工具能让开发者在开发过程中更加得心应手。WebStormVisualStudioCodeSublimeText（二）Webstorm的安装与使用1.Webstorm的下载（详细步骤见PPT）（1）登录Webstorm官网下载页面。（2）单击Download按钮下载最新版的WebStorm（3）下载完成后的文件名为WebStorm-2021.2.exe，双击该文件进入安装界面2.Webstorm的安装（详细步骤见PPT）（1）双击文件开始安装（2）单击Next按钮进入选择安装路径窗口，选择要安装的路径（3）单击Next按钮进入选择安装选项界面，创建桌面快捷方式（4）单击Next按钮，进入选择开始菜单文件夹界面，默认为JetBrains（5）单击Install按钮开始进行安装（6）安装进度完成之后，进入结束界面，单击Finish按钮，完成WebStorm的安装3.Webstorm的使用（详细步骤见PPT）（1）安装完成之后，在桌面单击WebStorm的快捷方式，打开WebStorm并进入开始窗口（2）单击NewProject（新工程）的图标，创建一个新工程，选择新工程文件的存储路径（3）新工程创建成功之后，可以自定义界面背景。设置背景颜色的步骤为，首先单击左上角的File菜单，单击Settings进入设置界面，单击展开Editor选项，选择ColorScheme→HTML命令，在右侧窗格的Scheme下拉列表中选择背景颜色，单击OK按钮，即可完成自定义界面背景（4）自定义背景颜色完成之后，还可以自定义字体。在图1.19的Settings设置界面上，单击Editor选项，然后单击选择Font，在右侧窗格设置自定义的字体、字号和行高，单击OK按钮即可完成设置4.创建第1个HTML5网页（详细步骤见PPT）（1）首先单击File菜单，选择New→HTMLfile命令（2）接着输入新HTML文件名“index”，生成一个新的HTML文件，然后编写一个简单的HTML文件（3）编写代码完成后，单击代码区域右上方的“Chrome”图标，即可在谷歌浏览器运行该文件三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）学生根据教材中的操作步骤和教师的演示进行练习，下载并安装Webstorm开发工具，并使用Webstorm编写第1个HTML5网页。（3）使用第一章课后作业。教材第1章习题教学后记

千锋教育HTML5+CSS3+JavaScript网页设计基础与实战教学设计课程名称：HTML5+CSS3+JavaScript网页设计基础与实战_____授课年级：_______________________授课学期：_______________________教师姓名：_______________________2022年08月23日课程名称第2章HTML构建基本网页计划学时4学时内容分析本章介绍了构建网页的基本标签，<hn>标题标签、<br>换行标签、<hr>水平线标签、<p>段落标签、<img>图片标签、<a>超链接和<div>块元素的使用方法教学目标与教学要求【知识目标】了解HTML常用的基本标签了解<div>块元素的特点认识超链接的4种常用伪类【技能目标】掌握<hn>标题标签、<hr>标签、<br>标签的应用掌握<a>标签的多种跳转功能熟练使用<p>标签和<img>标签【思政育人目标】培养学生健康的审美观念引导学生在学习中健全职业道德的规范。引导学生创新思维和探索的科学精神。教学重点掌握<p>段落标签、<img>图片标签、<a>超链接和<div>块元素的使用教学难点实现本章节的3个小节案例教学方式课堂讲解配合ppt演示1学时教学过程第一学时（认识<h1>至<h6>标签、<p>标签、<br>标签）一、提出需求，导入学习任务（1）思考如何构建一个基本网页。标签是构建HTML网页的重要元素，而了解并正确使用标签是十分重要的。HTML网页常用的标签有段落标签、超链接标签、图片标签、块元素等。段落标签用于显示网页中的文本内容，超链接标签可以实现网页之间的跳转，图片标签可在网页中嵌入图片，块元素能对网页内容进行分类分组处理，用于网页的布局。（2）明确学习方向。认识并掌握<h1>至<h6>标签、<p>标签、<br>标签二、知识讲解（一）标题标签1.定义标题是由<h1>至<h6>标签定义，<h1>定义最大的标题，依次递减，<h6>定义最小的标题，浏览器会自动在标题的前后添加空行。标题标签的语法格式如下所示。<h1>标题文字</h1>2.作用标题能够体现文档结构，搜索引擎通过标题能为网页的结构和内容编制索引，用户可通过标题来快速浏览网页。3.演示说明使用<h1>至<h6>标签定义标题。（二）段落标签1.定义段落是通过<p>标签来定义的，用于在网页中将文本内容有条理地显示出来。段落标签语法格式如下所示。<p>段落文字</p>2.演示说明使用<p>标签定义一个段落。（三）换行标签1.定义<br>换行标签可在文本中生成一个换行（回车）符号，它是一个空元素，也是一个单标签，不能在里面写内容。在写诗句文本和地址时，换行是十分适用的。换行的语法格式如下所示。<p>内容<br>内容</p>2.演示说明使用<br>标签设置段落中的文本换行。（四）案例讲解讲解秋天的故事案例。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第二学时（认识<img>标签）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。了解图片的绝对路径和相对路径掌握<img>标签的属性用法二、知识讲解（一）图片标签1.定义在HTML中图片是由<img>标签定义的，图片标签属于单标签，没有闭合标签，并且是一个空元素，只包含属性，不包含文本内容。图片标签表示向网页中嵌入一张图片，创建的是引用图像的占位空间。图片标签的语法格式如下所示。<imgsrc=”图片文件地址”alt=”提示文本”>2.标签属性（1）src属性src属性在<img>标签中是必须存在的，引用要嵌入的图片的路径，这个路径可以是相对路径，也可以是绝对路径。相对路径是被引入的文件相对于当前页面的路径；绝对路径是文件在网络或本地的绝对路径。相对路径绝对路径（2）alt属性alt为文本提示属性，用户可为图像定义一串预备的可替换的文本，它的值是对图片的文字进行描述，用于图片无法显示或不能被用户看到的情况。若图片正常显示，则看不到任何效果；若图片无法显示或不能被用户看到，则显示出提示文本。（3）title属性title属性是鼠标移到图片上的提示文字。设置title属性后，若鼠标移入到图片上，则会显示出title里的提示信息。（4）width属性和height属性width属性为宽度属性，height属性为高度属性，可分别用于设置图片的宽度和高度，属性值常用单位为像素（px）。3.演示说明使用<img>标签在网页中嵌入一张图片。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第三学时（<hr>标签、<div>块元素）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。了解<div>块元素的特点掌握<hr>标签的使用二、知识讲解（一）水平线标签1.定义水平线是由<hr>标签定义的，在HTML文件中使用<hr>标签创建横跨网页的水平线，将段落与段落之间分隔开，使文档结构更加层次分明。<hr>水平线标签是一个单标签，一般添加在两个段落之间，可以是一个单独的简单<hr>标签，也可以加入它的一些属性，使设计效果更美观。它的语法格式如下所示。<hralign=”对齐方式”color=”颜色值”size=”粗细值”width=”宽度值”>2.标签属性aligncolorsizewidth（二）<div>块元素1.块元素概念<div>块元素也称为内容划分元素，是一个块级元素，在HTML中独占一行，可以设置宽度和高度，支持所有全局属性。2.块元素特点HTML元素大体可分为3大类，分别为块元素、内联元素和内联块元素。（1）块元素块元素可以自定义宽度和高度，并独占一行，自上而下排列，还可以作为一个容器包含其他的块元素或内联元素。常见的块元素有<div>、<p>、<h1>、<ul>、<table>、<form>、<hr>等。（2）内联元素内联也称为行内元素，它的特点是不可以自定义宽度和高度，不独占一行，在一行逐个进行显示。内联元素设置与高度相关的一些属性，例如margin-top，margin-bottom，padding-top，padding-bottom，line-height等属性，会显示无效或显示不准确。常用的内联元素有<span>、<a>、<label>、<em>、<strong>等。（3）内联块元素内联块也称为行内块元素，它的特点是可以自定义宽度和高度，可以和其他内联元素在一行显示，既具有内联元素特点，也具有块元素特点。常用的内联块元素有<img>、<input>、<li>、<textarea>等。（三）案例讲解讲解致敬教师节案例。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第四学时（超链接）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。认识超链接的4种常用伪类掌握<a>标签的多种跳转功能二、知识讲解（一）认识超链接1.定义超链接标签可以通过href属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。超链接（UniformResourceLocator，简称URL）就是统一资源定位器，表达形式为<a>。它的效果是点击网页上的某个链接，会自动跳转到另外一个链接。超链接标签的语法格式如下所示。<ahref=”目标URL”target=”目标窗口”>内容</a>2.标签属性href（HypertextReference，链接目标地址）是指示链接的目标。target指打开新窗口的方式，主要有以下四种方式。self在同一个窗口打开（默认值）。blank新建一个窗口打开。parent在父窗口打开。top在浏览器整个窗口打开。3.超链接功能（1）外部链接超链接可实现网页跳转功能，href属性值为目标链接地址。代码如下所示。<ahref="/"target="_self">天猫</a>（2）功能链接超链接能创建邮件链接、电话链接等功能链接，邮件链接是mailto链接将用户的电子邮件程序打开，发送新邮件。电话链接是使用tel链接查看连接到手机的网络文档和笔记本电脑。代码如下所示。<ahref="mailto:abcde@">发送邮件</a><ahref="tel:+123456">+123456</a>（3）锚点链接锚点链接具有锚点功能，href属性值为锚点id，点击锚点能跳转到对应id所在的位置，可以是同一个网页内，也可以是其他网页内。代码如下所示。<ahref="#fall">秋天的故事</a><aid="fall">秋天的故事</a><p>秋天的故事</p>（4）回到顶部当href属性值为“#”时，能实现跳转返回到顶部的功能，代码如下所示。<ahref="#fall">秋天的故事</a><aid="fall">秋天的故事</a><p>秋天的故事</p><ahref=”#”>回到顶部</a>4.超链接伪类超链接有4种常用的伪类，分别是link、visited、hover和active，它们是一种动态伪类标签，使用冒号（:）可以表示4种不同的状态。:link:visited:hover:active伪类标签使用的状态顺序为link，visited，hover，active。值得注意的是，静态伪类只能使用link和visited两个状态，并且只能用于超链接。（四）案例讲解讲解技术手册导航案例。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第五、六学时（上机练习）学生根据课堂上教师对案例的讲解，进行案例上机练习，以及完成章节习题中的编程题。上机练习完成后将报告通过平台提交给老师。教师检查学生对相关知识点的掌握情况。习题教材第2章习题教学后记

千锋教育HTML5+CSS3+JavaScript网页设计基础与实战教学设计课程名称：HTML5+CSS3+JavaScript网页设计基础与实战_____授课年级：_______________________授课学期：_______________________教师姓名：_______________________2022年08月24日课程名称第3章使用列表与表格布局计划学时6学时内容分析本章介绍了有序列表、无序列表和自定义列表的使用、表格的基本标签、语义化标签、rowspan属性和colspan属性、cellpadding属性和cellspacing属性、以及其他表格属性教学目标与教学要求【知识目标】了解有序列表、无序列表和自定义列表的特点认识表格的基本标签认识表格的标签属性【技能目标】掌握有序列表、无序列表和自定义列表的应用掌握语义化标签的用法熟练使用rowspan属性和colspan属性合并行与列熟练使用cellpadding属性和cellspacing属性控制单元格边距与间距熟练使用表格标签和属性设计表格【思政育人目标】培养学生健康的审美观念引导学生在学习中健全职业道德的规范。引导学生创新思维和探索的科学精神。教学重点掌握无序列表的使用、掌握表格基本标签教学难点实现本章节的2个小节案例教学方式课堂讲解配合ppt演示1学时教学过程第一学时（有序列表、无序列表）一、提出需求，导入学习任务（1）思考如何创建一个列表和表格。在一个网页中经常能看到列表与表格的应用，网页中漂亮的导航、整齐规范的文章标题列表和图片列表等都是利用列表实现的。表格是由行和列组成的结构化数据集（表格数据），用于呈现数据或统计信息，可以让数据的显示变得十分规整有条理，可读性好。列表与表格的应用可以使图片和文字变得整洁有序，数据也变得“有模有样”，整个网页更加规整。（2）明确学习方向。了解有序列表、无序列表的特点掌握有序列表、无序列表的使用二、知识讲解（一）有序列表1.定义有序列表（ordered-list）是有排列顺序的列表，其各个列表项按照一定的顺序排列。有序列表使用<ol>标签定义，包含一个或多个<li>列表项目，其语法格式如下所示。<ol><li>列表项目1</li><li>列表项目2</li><li>列表项目3</li></ol>2.标签属性typestartreversed3.演示说明使用<ol>标签定义一个有序列表。（二）无序列表1.定义无序列表（unordered-listt）各个列表项之间没有顺序级别之分，是并列的。无序列表使用<ul>标签定义，包含一个或多个<li>列表项目，其语法格式如下所示。<ul><li>列表项目1</li><li>列表项目2</li><li>列表项目3</li></ul>2.type属性<ul>无序列表标签通常使用type属性修改其显示效果。disccirclesquare3.演示说明使用<ul>标签定义一个无序列表。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第二学时（自定义列表、案例讲解）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。了解自定义列表的特点掌握自定义列表的使用二、知识讲解（一）自定义列表1.定义自定义列表（definition-list）常用于对术语或名词进行解释和描述，列表项的前面没有任何项目符号。自定义列表使用<dl>标签定义，列表中并列嵌套<dt>标签和<dd>标签，<dt>标签用于定义名词，<dd>标签用于定义名词的解释和描述。一对<dt></dt>里可以对应多对<dd></dd>，即一个名词可有多个解释和描述。自定义列表的语法格式如下所示。<dl><dt>名词1</dt><dd>名词1描述一</dd><dd>名词1描述二</dd><dt>名词2</dt><dd>名词2描述一</dd><dd>名词2描述二</dd></dl>2.演示说明使用<ol>标签定义一个自定义列表。（二）案例讲解讲解新闻列表案例。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第三学时（表格）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。认识表格的基本标签认识表格的标签属性掌握语义化标签的使用二、知识讲解（一）表格基本标签1.三个基本标签<table>标签用于定义一个表格，<tr>标签用于定义表格中的行，可以有一行或多行，嵌套在<table>标签中，<td>标签用于定义表格中的单元格（列），一行里可以有一个或多个单元格（列），嵌套在<tr>标签中。一个最基本的表格由<table>、<tr>和<td>这3个标签构成，其语法格式如下。<table><tr><td>单元格内容1</td><td>单元格内容2</td></tr></table>2.其他标签除了以上3个主要标签之外，表格的基本标签有<caption>、<th>等。<caption>标签用于定义表格的标题，标签必须紧随<table>标签之后，每个表格只能定义一个标题，通常这个标题会被居中于表格之上。<th>标签用于定义表格内的表头单元格，在<tr>标签内部使用。<th>和<td>是两种类型的单元格，<th>是表头单元格，里面包含表头信息，元素内部的文本通常为居中的粗体文本。<td>是标准单元格，里面包含数据，元素内部的文本通常为左对齐的普通文本。（二）语义化标签1.概述HTML中引入了<thead>、<tbody>和<tfoot>这3个语义化标签，将表格划分为头部、主体和页脚3部分。用这3个部分来定义网页中不同的内容，让表格语义更加良好，结构更加清晰，代码更加有逻辑性，也更具有可读性和可维护性。<thead><tbody><tfoot>2.演示说明使用表格基本标签与语义化标签创建一个表格。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第四学时（表格）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。熟练使用rowspan属性和colspan属性合并行与列熟练使用cellpadding属性和cellspacing属性控制单元格边距与间距熟练使用表格标签和属性设计表格二、知识讲解（一）合并行与列rowspan属性colspan属性（二）单元格边距与间距cellpadding属性cellspacing属性。（三）其他属性borderbordercoloralignvalignwidthheightbgcolorbackground（四）案例讲解讲解个人简历表案例。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第五、六学时（上机练习）学生根据课堂上教师对案例的讲解，进行案例上机练习，以及完成章节习题中的编程题。上机练习完成后将报告通过平台提交给老师。教师检查学生对相关知识点的掌握情况。习题教材第3章习题教学后记

千锋教育HTML5+CSS3+JavaScript网页设计基础与实战教学设计课程名称：HTML5+CSS3+JavaScript网页设计基础与实战_____授课年级：_______________________授课学期：_______________________教师姓名：_______________________2022年08月24日课程名称第4章设计网页页面计划学时6学时内容分析本章介绍了盒模型结构，padding、border和margin属性的应用，怪异盒模型的特征，cursor属性的应用，CSS浮动的float属性，清除浮动的4种方式，相对定位、绝对定位和固定定位的应用，z-index属性的应用，以及display属性、visibility属性、overflow属性、opacity属性和rgba()函数的应用教学目标与教学要求【知识目标】了解盒模型结构认识怪异盒模型掌握cursor属性和z-index属性的应用掌握CSS浮动的float属性【技能目标】掌握padding、border和margin属性的应用掌握清除浮动的4种方式熟练运用相对定位、绝对定位和固定定位掌握display属性、visibility属性、overflow属性的应用熟练运用opacity属性和rgba()函数控制元素的不透明度【思政育人目标】培养学生健康的审美观念引导学生在学习中健全职业道德的规范。引导学生创新思维和探索的科学精神。教学重点掌握padding、border和margin属性的应用，掌握清除浮动的4种方式，掌握相对定位、绝对定位和固定定位的应用，熟练使用display属性和overflow属性教学难点实现本章节的3个小节案例教学方式课堂讲解配合ppt演示1学时教学过程第一学时（盒模型结构，padding、border和margin属性，怪异盒模型）一、提出需求，导入学习任务（1）思考如何使用CSS样式提升对网页的设计。一个完整美观的静态网页，主要是由HTML标签与具有美化功能的CSS构成，HTML标签创建网页的基本布局，而CSS相当于为网页“换上美丽大方的衣服”。CSS可以提高网页的美观度和速度，能更好地控制页面布局。（2）明确学习方向。了解盒模型结构认识怪异盒模型掌握padding、border和margin属性的应用掌握cursor属性的应用二、知识讲解（一）盒模型结构1.概述盒模型（BoxModel）主要用于CSS设计页面布局，它规定网页元素如何显示以及元素间的相互关系。盒模型结构主要由content、padding、border和margin4个部分构成。2.content属性盒模型的content内容指块元素（“盒子”）里面的包含的文字、图片、超链接、音频、视频等，由CSS的宽和高两个属性决定。3.padding属性（1）定义padding属性也称为填充属性，控制元素所有四条边的内边距区域，一个元素的内边距区域指的是其内容与其边框之间的空间。相关属性padding属性是其相关属性padding-top、padding-bottom、padding-left和padding-right的简写。padding-top属性padding-bottom属性padding-left属性padding-right属性语法格式padding属性的值可以通过复合写法有多种设置方式，其基本语法格式如下所示。padding:上内边距右内边距下内边距左内边距padding:上内边距左右内边距下内边距padding:上下内边距左右内边距padding:上下左右内边距（4）padding属性的注意事项padding属性不会出现撑开父元素“盒子”的情况padding属性的值只对内容产生效果，而不会对背景图有任何效果4.border属性（1）定义border属性可定义一个元素的边框宽度、样式和颜色。相关属性border属性是其3个相关属性border-width、border-style和border-color的简写。border-widthborder-styleborder-color语法格式3个边框属性可连写，连写顺序为边框宽度（border-width）、边框线样式（border-style）和边框颜色（border-color），在进行边框样式的设置时，使用连写格式可使开发者编写代码更快捷，代码可读性也更好，其语法格式的具体代码如下所示。border:1pxsolid#aaa;5.margin属性（1）定义margin属性定义元素周围的空间，即元素与元素之间的距离。相关属性margin属性是其相关属性margin-top、margin-bottom、margin-left和margin-right的简写。margin-topmargin-bottommargin-leftmargin-right（3）语法格式margin属性的值可以通过复合写法有多种设置方式，其基本语法格式如下所示。margin:上外边距右外边距下外边距左外边距margin:上外边距左右外边距下外边距margin:上下外边距左右外边距margin:上下左右外边距（4）margin属性上下重叠问题两个相邻块元素同时添加上下外边距时，会出现外边距重叠的问题。例如前一个块元素div.box1添加margin-bottom:50px，后一个块元素div.box2添加margin-top:10px，则这两个块元素之间的距离为50px。发生这类情况时，结果取决于哪个元素设置的margin值比较大，就显示哪个元素的margin值。（5）margin属性外边距塌陷问题当父元素没有边框时，子元素添加margin-top属性之后，会带着父元素一起下沉，这便是margin属性外边距塌陷问题，它只会出现在嵌套结构中，且只有margin-top会有这类问题，其他三个方向是没有外边距塌陷问题的。有以下3种方式可解决这个问题。为父元素添加overflow属性。将overflow属性值设置为hidden，即可解决外边距塌陷问题，推荐使用。示例代码如下所示。overflow:hidden;为父元素添加一个边框。边框颜色推荐使用透明色，这样不会影响之前的整体效果，示例代码如下所示。border:1pxsolidtransparent;为父元素添加padding-top属性。这种方式需要重新计算高度值，从而保证父元素“盒子”大小，不推荐使用。（6）演示说明结合盒模型的content属性、padding属性、border属性和margin属性，演示盒模型的结构。（二）怪异盒模型1.概述怪异盒模型（也称为IE6盒模型），是由content内容、padding内边距、border边框和margin外边距4个部分构成。2.区别在标准盒模型的情况下，盒子总宽高的值为“width/height（内容宽度）+padding（内边距）+border（边框）+margin（外边距）”，其中内容宽高为content部分的width/height。在怪异盒模型的情况下，盒子的总宽高的值为“width/height（内容宽度）+margin（外边距）”，其中内容宽高为content部分的width/height+padding（内边距）+border（边框）。3.模型间的转换可采用CSS3的box-sizing属性对标准盒模型和怪异盒模型进行转换，box-sizing属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距（padding）和边框（border）等。content-boxborder-box4.cursor属性cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。defaultpointertexthelpwaitmovegrabgrabbingcrosshairzoom-inzoom-out（三）案例讲解讲解图书促销活动案例。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第二学时（CSS浮动，清除浮动）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握CSS浮动的float属性掌握清除浮动的4种方式二、知识讲解（一）CSS浮动1.定义浮动的本质是让块级元素在同一行显示，脱离文档流，不占用原来的位置。文档流是元素在页面中出现的先后顺序，即元素在窗体中自上而下按行排列，并在每行中按从左到右的顺序排放。2.float属性块元素的浮动是在CSS中使用float属性进行设置的，设置浮动之后，元素会按一个指定的方向移动，直至到达父容器的边界或另一个浮动元素才停止。float属性有none、left和right三个属性值。noneleftright3.演示说明使用float属性将6个带有文字内容的块元素分别实现左右浮动。（二）清除浮动1.浮动带来的影响float属性对元素进行浮动操作时，不会对之前的元素造成任何影响，但元素浮动脱离正常文档流会影响到后面元素的布局，导致发生错位。2.clear属性clear属性用于清除浮动，有both、left和right这3个属性值。bothleftright3.清除浮动的4种方式为父容器设置一个固定高度。为父容器添加一个overflow属性。父容器添加一个空标签。使用伪元素（::after）清除浮动。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第三学时（相对定位、绝对定位、固定定位）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。熟练运用相对定位、绝对定位和固定定位掌握z-index属性的运用二、知识讲解（一）CSS定位1.概述在CSS中，通过CSS定位可以实现网页元素的精确定位。定位可设置元素所处的位置，使其脱离标准流，改变当前位置。2.定位模式在CSS中，position属性用来定义元素的定位模式，有4个常用属性值为static、relative、absolute和fixed，分别对应4种定位方式，即静态定位、相对定位、绝对定位和固定定位。3.位置属性在网页中定义了元素的定位方式之后，并不能确定元素的具体位置，需要配合位置属性来精确设置定位元素的具体位置。位置属性共有4个，包括top、bottom、left和right。topbottomleftright（二）相对定位1.定义relative相对定位的元素是相对于其正常位置进行定位，position属性值为relative。相对定位的元素会以自身位置为基准设置位置，即根据left、right、top、bottom等位置属性在标准文档流中进行位置偏移。2.特征相对于自身的初始位置来定位。元素位置发生偏移后，会占用原来的位置，之前的空间会被保留下来。层级提高，可以覆盖标准文档流中的元素及浮动元素。3.使用场景相对定位一般情况下很少单独使用，可以配合绝对定位使用，通常作为绝对定位的元素的父元素，而又不设置偏移量，也就是所谓的“子绝父相”。4.演示说明使用相对定位设置元素的位置。（三）绝对定位1.定义absolute绝对定位的元素是相对于最近的已定位的祖先元素进行定位，若祖先元素都没有定位，会按照文档主体（body）的左上角进行定位，并随页面滚动一起移动。绝对定位的position属性值为absolute。绝对定位的元素会以最近的已定位的祖先元素为基准设置位置，即根据left、right、top、bottom等位置属性相对于祖先元素进行位置偏移，类似于坐标值定位。2.特征绝对定位是相对于最近的已定位的祖先元素位置进行定位，如果祖先元素没有设置定位，则相对文档主体（body）的左上角来定位。元素位置发生偏移后，不会占用原来的位置。层级提高，可以覆盖标准文档流中的元素及浮动元素。设置绝对定位的元素脱离文档标准流。3.使用场景绝对定位一般情况下，可用于下拉菜单、弹出数字气泡、焦点图轮播、信息内容显示等场景。绝对定位可将元素定位到网页的正中心。4.演示说明使用绝对定位设置元素的位置。（四）固定定位1.定义fixed固定定位的元素是相对于浏览器窗口进行定位的，使用固定定位的元素不会因为浏览器窗口的滚动而移动。固定定位的position属性值为fixed。固定定位的元素会以浏览器窗口为基准设置位置，即根据left、right、top、bottom等位置属性相对于浏览器窗口进行位置偏移，即使滚动页面，它也始终位于同一位置。2.特征相对浏览器窗口来定位。偏移量不会随滚动条的滚动而移动。不占用原来的位置空间。3.使用场景固定定位一般情况下，在网页中可用于窗口左右两边的固定广告、返回顶部图标、固定顶部导航栏等。4.演示说明使用固定定位设置元素的位置。（五）z-index属性1.定义z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index属性适用于具有定位元素的模式。2.属性值autonumber（数值）（六）案例讲解讲解祖国风光推荐案例。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第四学时（display属性、visibility属性、overflow属性、opacity属性、rgba()函数）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握display属性、visibility属性、overflow属性的应用熟练运用opacity属性和rgba()函数控制元素的不透明度二、知识讲解（一）display属性1.定义display属性设置元素如何被显示。2.属性值noneblock3.其他属性值inlineinline-blocklist-itemrun-intableinline-tabletable-columnflex（二）visibility属性1.定义visibility属性规定元素是否可见，不论元素是显示或隐藏，都会占据其本来的空间。visibility属性可应用于商品的提示信息方面，光标移入或移出时，会显示提示信息。visibility属性的值有visibile、hidden、collapse等，其语法格式如下所示。visibility:visibile|hidden|collapse|inherit;2.属性值visiblehiddencollapse（三）overflow属性1.定义overflow属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。overflow属性的值有visibile、hidden、scroll、auto等，其语法格式如下所示。overflow:visibile|hidden|scroll|auto|inherit;2.属性值visiblehiddenscrollauto（四）opacity属性1.定义opacity属性指定元素的不透明度，取值范围为0.0~1.0，opacity的值越低，越透明。它的最小值为0，元素完全透明；最大值为1，元素不透明。opacity属性语法格式如下所示。opacity:value|inherit;2.演示说明使用opacity属性实现元素的透明悬停效果。（五）rgba()函数1.定义rgba是代表red（红色）、green（绿色）、blue（蓝色）和alpha的色彩空间。rgba()函数需要搭配颜色属性使用，语法格式如下所示。color:rgba(red,green,blue,alpha);2.各值的用法红色（r）0到255间的整数，代表颜色中的红色成分。绿色（g）0到255间的整数，代表颜色中的绿色成分。蓝色（b）0到255间的整数，代表颜色中的蓝色成分。不透明度（a）取值0~1之间，代表不透明度。3.opacity属性与rgba()函数的透明区别opacity属性作用于元素和元素的内容，内容会继承元素的透明度，取值0~1。它会使元素以及内部所有内容一起变透明。rgba()函数一般作为背景色background-color或者颜色color的属性值，透明度由其中的alpha值生效，取值0~1。它只会对当前设置的元素进行透明变换，不会使其他内容变透明。（六）显示与隐藏的总结1.显示与隐藏4个属性的区分displayvisibilityoverflowopacity2.演示说明依次使用display属性、visibility属性、overflow属性和opacity属性隐藏中间的元素块。（七）案例讲解讲解喜迎中秋佳节案例。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第五、六学时（上机练习）学生根据课堂上教师对案例的讲解，进行案例上机练习，以及完成章节习题中的编程题。上机练习完成后将报告通过平台提交给老师。教师检查学生对相关知识点的掌握情况。习题教材第4章习题教学后记

千锋教育HTML5+CSS3+JavaScript网页设计基础与实战教学设计课程名称：HTML5+CSS3+JavaScript网页设计基础与实战_____授课年级：_______________________授课学期：_______________________教师姓名：_______________________2022年08月25日课程名称第5章表单与表单设计效果计划学时6学时内容分析本章介绍了表单的<form>标签、<input>标签、<select>标签、<textarea>标签、<fieldest>标签，新增的表单控件，以及border-radius属性、box-shadow属性、background-size属性教学目标与教学要求【知识目标】了解表单的组成理解get方式与post方式的区别掌握<fieldset>标签的使用认识表单新增控件【技能目标】掌握<form>标签、<input>标签、<select>标签、<textarea>标签的应用掌握border-radius属性、box-shadow属性、background-size属性的应用【思政育人目标】培养学生健康的审美观念引导学生在学习中健全职业道德的规范。引导学生创新思维和探索的科学精神。教学重点掌握<input>标签的各个控件，掌握<select>标签、<textarea>标签的使用，掌握border-radius属性、box-shadow属性、background-size属性的应用教学难点实现本章节的3个小节案例教学方式课堂讲解配合ppt演示1学时教学过程第一学时（表单组成、<form>标签）一、提出需求，导入学习任务（1）思考如何创建表单以及对表单进行效果设计。进入一个新的网站后，用户通常需要进行注册或登录验证，这就需要使用到表单。网站中的用户登录、注册页面，以及一些收集用户反馈信息的调查表，就是通过表单制作的。表单作为用户与网页之间重要的交互工具，了解和掌握表单的应用是十分重要的。（2）明确学习方向。了解表单的组成理解get方式与post方式的区别掌握<form>标签二、知识讲解（一）表单的组成1.概述表单是网页中常用的一种展示效果，如登录页面中的用户名和密码的输入、登录按钮等都是用表单的相关标签定义的。表单是HTML中获取用户输入的手段，它的主要功能是收集用户的信息，并将这些信息传递给后台服务器，实现用户与Web服务器的交互。2.组成HTML中，一个完整的表单通常由表单元素、提示信息和表单域3个部分组成。表单元素提示信息表单域（二）<form>标签1.定义HTML中<form>标签用于定义表单域，即创建一个表单，用来实现用户信息的收集和传递，<form></form>标签中的所有内容都会提交给服务器。<form>标签的语法格式如下所示。<formaction="URL地址"method="数据提交方式">表单元素和提示信息</form>2.标签属性（1）action属性action属性可定义表单数据的提交地址，即一个URL地址。HTML表单要想和服务器进行连接，就需要在action属性上设置一个URL。例如，两个人要打电话就必须要知道对方的电话号码，URL就相当于电话号码。action属性用于指定接收并处理表单数据的服务器的URL地址。（2）method属性method属性规定如何发送表单数据（表单数据发送到action属性所规定的页面）。表单数据有常用的get（默认）和post两种提交方式，表单数据可以作为URL变量（method="get"）或者HTTPpost（method="post"）的方式来发送。get方式post方式（3）enctype属性enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。enctype属性可取值为application/x-www-form-urlencoded、multipart/form-data和text/plain。application/x-www-form-urlencodedmultipart/form-datatext/plain（4）target属性target属定义提交地址的打开方式，常用的打开方式有_self（默认）和_blank。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第二学时（<input>标签、<label>标签）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握<input>标签的各控件二、知识讲解（一）<input>标签1.定义<input>标签用于搜集用户信息，是一个单标签。网页中经常会包含有单行文本框、密码文本框、单选框、提交按钮等，要想定义这些表单元素就需要使用<input>标签，其基本语法格式如下所示。<inputtype="控件类型">2.type属性<input>标签通过type属性的取值不同，可以展现出不同的表单控件类型，如text单行文本框、password密码文本框、submit重置按钮等。textpasswordbuttonsubmitresetradiocheckboxhiddenfile3.文件域属性acceptcapturemultiplefiles4.<input>标签其他属性namevalueplaceholderreadonlydisabledcheckedrequiredsizemaxlength5.<label>标签<label>标签是定义<input>元素的标记，可用来辅助表单元素，更好地提高用户体验感。当用户选择<label>标签内的文本进行单击时，会自动将焦点转到和标签相关的表单控件上。<label>标签中的for属性指出当前文本标签与哪个元素关联，其属性值一定要与<input>标签中的id属性值相同才能找到相应控件。6.演示说明使用<form>标签和<input>标签创建一个表单。（二）案例讲解讲解用户登录表单案例。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第三学时（<select>标签、<textarea>标签、<fieldset>标签）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握<select>标签、<textarea>标签、<fieldset>标签的应用二、知识讲解（一）<select>标签1.定义<select>标签可定义表单中的下拉列表。网页中经常会看到多个选项的下拉菜单，如选择城市、日期、科目等。在<select>标签中包含一个或多个<option>标签，<option>标签可创建选择项。<select>标签需要与<option>标签配合使用，这个特点与列表一样，如无序列表是由<ul>标签和<li>标签配合使用，为了更好地理解，可将下拉列表看作一个特殊的无序列表。<select>标签的基本语法格式如下所示。<selectname="下拉列表的名称"><optionvalue="选择项1">选择项1</option><optionvalue="选择项n">选择项n</option></select>2.<select>标签属性<select>标签可通过定义属性，改变下拉列

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

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

最新文档

评论

0/150

提交评论