《Web前端设计》教案正文

1、教案课程名称Web前端开发授课时间第1周第1次授课章节第一章Web前端开发概述，第二章HTML5基础教学目的知识目标1. 理解web前端概念，2. 了解主要浏览器产品，3. 理解web标准,4. 掌握组成web前端的三大语言，5. 掌握web前端开发工具，6. 掌握HTML的基础语法7. 掌握文本控制标签技能目标1 会下载安装开发工具，2. 会使用浏览器浏览HTML文件，3. 会编写简单的网页教学重点Web标准，web前端的三大语言，HTML的基础语法教学难点如何创建页面，页面中基本标签的使用方法教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计（含时间分配）（2学时）l. Web前端开

2、发相关概念1.1浏览器的介绍1. 1. 1浏览器的概念；1.1.2浏览器的发展；1.1.3浏览器内核；1.1.4常用的浏览器。1.2 URL、WWW、网站的概念1江西工业职业技术学院教案结构 (HTML)1.3 Web标准表现 (CSS)行为(Javascrip t)2. Web前端开发相关技术2. 1 HTML概念及版本2.2 CSS概念及版本2. 3 Javascript 介绍3. Web前端开发工具3. 1 NotePad3. 2 Text Pad3. 3 web Storm3.1 Dreamweaver4. HTML语法基础4. 1 HTML文档结构标题段落标签1.2文本控制标签文本格

3、式化标签特殊字符标签心得作业1. 在浏览器中查看常用网站的页面效果和源文件2. 下载安装试用相关软件备注课程名称Web前端开发授课时间第1周第2次授课章节实验一使用文本控制标签制作简单的网页教学目的知识目标1. 掌握HTML的基础语法2. 掌握文本控制标签技能目标1. 熟悉开发工具- Dreamweaver_CC,2. 能够熟练使用文本控制标签制作简单的网页教学重点HTML的基础语法，文本控制标签的使用教学难点教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计 （含时间分配） 实验内容1 ：熟悉Dreamweaver_CC 实验内容2：编写第一个网页 代码：我的第一个页面实验内容3：使用

4、标题段落标签3. 1使用标题标签Chi显示各级标题 语法格式：hi标题 部分代码：这是第一级标题 这是第二级标题23h6这是第六级标题 注：可使用align属性控制文本的对齐方式3.2使用段落标签5控制文本的位置 语法格式：p段落内容/p 代码略实验内容4：使用文本格式化标签美化网页换行标签Cbr 水平线标签hr常用文本格式化标签：一=字形标签（课本Pg表2-3）标签 标签 代码略心得作业练习本次实验内容，综合运用文本控制标签编写网页备注课程名称Web前端开发授课时间第2周第1次授课章节第二章HTML5基础教学目的知识目标熟悉掌握常用的标签及属性技能目标熟练使用常用标签编写网页教学重点HTML

5、常用标签及属性教学难点路径的表示方法教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计（含时间分配）1. 1图片标签1.1.1图片的格式与分辨率GIF1. 1.2网页中使用最广泛的图片格式- JPEG L PNG1.2嵌入图片1.2. 1规范的图片标签语法格式：1.图片的源文件stc标签的常用属性 +2.设置图片的提示文字altL 3设置图片的宽度width和高度height1.3路径的表示方法：绝对路径和相对路径创建超链接创建图片链接1. 4超链接标签创建电子邮件链接创建下载链接一链接到同一页面的不同位置1.5表格标签1.5. 1创建表格1.5.2设置属性1. 6元标签语法格式： 1.

6、 7 link 标签语法格式：/head心得作业1熟悉标签，并应用到网页制作中备注课程名称Web前端开发授课时间第2周第2次授课章节实验二 使用常用标签制作页面教学目的知识目标熟悉掌握常用的标签及属性技能目标熟练使用常用标签编写网页教学重点标签及属性的使用教学难点路径的表示方法教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计（含时间分配）实验内容1:制作一个包含文字和图片的简单页面，要求使用表格实现效果部分代码：名茶欣赏tr align二center绿茶红茶tr align二center乌龙茶绿茶白茶实验内容2：制作三个页面，其中主页面带导航，并将其他两个页面链接到主页面上，要求能够正

7、确使用0标签部分代码：心得作业完成课后练习题备注课程名称Web前端开发授课时间第3周第1次授课章节第三章页面元素和属性教学目的知识目标掌握IITML5新增的元素和属性技能目标会创建简单的IITML5页面教学重点HTML5新增的元素和属性教学难点HTML5新增的元素和属性教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计 （含时间分配）1.1结构元素1. 1. 1 header 元素header元素的介绍，应用举例1. 1. 2 article 元素article元素的介绍，应用举例1. 1. 3 aside 元素aside元素的介绍，应用举例1. 1. 4 footer 元素footer

8、元素的介绍，应用举例1. 1. 5 figure 和 figcaption 元素figure和figcaption元素的介绍，应用举例1. 2页面结点1. 2. 1 section 元素section元素的介绍，应用举例1. 2. 2 nav 元素nav元素的介绍，应用举例1. 2. 3 address 元素address元素的介绍，应用举例1. 3交互元素1. 3. 1 progress 元素 progress元素的介绍，应用举例1. 3. 2 meter 元素meter元素的介绍，应用举例1. 3. 3 details 和 summary 元素 details元素的介绍，应用举例1. 3.

9、 4 menu 元素menu元素的介绍，应用举例1. 3. 5 comma nd 元素command元素的介绍，应用举例心得作业课后练习备注课程名称Web前端开发授课时间第3周第2次授课章节实验三 使用结构元素、页面节点和交互元素编写网页教学目的知识目标熟悉结构元素、页面节点和交互元素技能目标能够使用结构元素、页面节点和交互元素编写网页教学重点教学难点教学方法案例讲解法，演示法教具计算机教学过程设计 （含时间分配）实验内容1:使用结构元素编写网页1.1创建步骤如下 将光标放置在需要创建元素的位置上； 输入相应的标签，如：； 输入相应的内容； 输入对应的关闭，如:/header。简单的结构的页面

10、代码如下：（部分代码）header导航/header 菜单/nav 内容 次要内容 底部说明 实验内容厶 使用页面节点元素编写网页2. 1使用section元素定义文档中的节，语法结构如下：- -2. 2使用nav元素创建页面导航链接组，语法结构如下：5 avSX/li 实验内容3：使用交互元素制作网页3. 1 progress元素制作进度，语法格式如下： 3. 2 progress元素实例，部分代码： 下载进度： 3. 3 meter元素语法格式：meter value二当前度量值” min二”最小值max=n 最大值” -3. 4 meter元素实例，部分代码：p显示度量值：35/100/

11、iiieterbr60%Internet Explorer 不支持 meter 标签。 课程名称Web前端开发授课时间第4周第1次授课章节第三章页面元素和属性教学目的知识目标掌握IITML5新增的元素和属性技能目标会创建简单的IITML5页面教学重点HTML5新增的元素和属性教学难点HTML5新增的元素和属性教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计 （含时间分配）1.1文本层次语义元素1. 1. 1 cite 元素cite元素的介绍1. 1. 2 mark 元素mark元素的介绍，应用举例1. 1. 3 time 元素time元素的介绍，常用属性，应用举例1.2分组元素1. 2

12、. 1 ul 元素U1元素的介绍，应用举例1. 2. 2 ol 元素01元素的介绍，应用举例1.2.3 dl 元素dl元素的介绍，应用举例1.3全局属性1.3. 1 hidden 属性hidden属性的介绍，应用举例1. 3. 2 spellcheck 属性spellcheck属性的介绍，应用举例1. 3. 3 contenditable 属性contenditable属性的介绍，应用举例1. 3. 4 contextrnenu 属性contextmenu属性的介绍，应用举例心得作业课后练习备注课程名称Web前端开发授课时间第4周第2次授课章节实验四使用文本层次元素、分组元素和全局属性编写网页

13、教学目的知识目标理解文本层次元素、分组元素和全局属性技能目标能够运用文本层次元素、分组元素和全局属性编写网页教学重点教学难点教学方法案例讲解法，演示法教具计算机教学过程设计（含时间分配）实验内容1:使用文本层次语义元素制作网页1.1使用mark元素制作带有记号的文本，语法格式如下：/mark mark元素实例，代码如下：p今日日程提醒：下午三点1402开会 1.2 lime元素制作日期，语法格式如下：Y/timetime元素实例，代码如下：h3茗茶推荐祁门红茶2016 年0 月 10 0实验内容2：使用分组元素制作网页2.1使用ul元素制作项目列表，语法格式如下：di无序列表 部分代码如下：首

14、页a href二”#”博客a href二”#”设计相册a href二”#”论坛a href二”#”关于实验内容3：使用全局属性3. 1使用hidden属性实例代码如下：这是一个隐藏的段落心得作业课后练习备注课程名称Web前端开发授课时间第5周第1次授课章节第四章构建Web表单教学目的知识目标理解表单的基本组成部分 理解HTML5新曾的控件及其属性技能目标能够熟练构建表单教学重点表单控件教学难点教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计（含时间分配）1. IITML5对表单的改进1.1新增控件类型1.2新增表单属性2. 表单结构2.1表单的基本语法格式：3. 输入控件3. 1创建文

15、本框，其格式如下：3.2创建密码框，其格式如下：3.3创建单选按钮，其格式如下：input type二radio namc=value二check二checked3.4创建复选框按钮，其格式如下：input type二checkbox name二value二check二checked3. 5创建文本区域，其格式如下：3.6创建选择框，其格式如下： 心得作业制作一个关于兴趣爱好的调查表备注江西工业职业技术学院教案课程名称Web前端开发授课时间第5周第2次授课章节第四章构建Web表单教学目的知识目标理解处理表单技能目标会对表单进行验证教学重点处理表单教学难点教学方法案例讲解法，演示法教具计算机，多

16、媒体教学过程设计（含时间分配）1.1对表单进行验证，其语法格式如下：input pattern二regexp 其中regexp规定用于验证输入字段的模式 pattern验证，代码如下：略1.2为表单组件添加说明标签 使用labe描述表单字段用途1.3表单提交方式的选择在表单的结构部分已经了解到表单的提交方式method有两种可供选择，即GET或 者POST,详细见课本P65表4-31.4表单综合实例通过制作一个会员申请表页面，掌握表单的制作方法，具体代码略。心得作业课后练习备注课程名称Web前端开发授课时间第6周第1次授课章节第五章音频与视频教学目的知识目标认识audio元素和video元素理

17、解audio元素和video元素提供的方法、属性和事件技能目标会使用audio元素和video元素教学重点audio元素和video元素的语法教学难点audio元素和video元素的方法、属性和事件教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计（含时间分配）1.1关于解码器1.1.1音频编解码器1. 1.2视频编解码器1.2在IITML5中播放音频1. 2. 1认识audio元素，语法结构如下：1.2.2播放音频为网页添加音乐文件，应用举例1.3在IITML5中播放视频，其语法结构如下：video src二”视频文件路径” width二”显示宽度height二”显示高度” contr

18、ols二” controls” 1. 3. 2播放视频，在网页中播放视频文件，应用举例1.4音频与视频相关属性、方法与事件1.4. 1音频与视频相关属性271.4.2音频与视频相关方法1.4.3音频与视频相关事件例5-4利用按钮事件控制视频播放，代码略。心得作业课后练习备注#江西工业职业技术学院教案课程名称Web前端开发授课时间第6周第2次授课章节实验五HTML部分综合案例一茶文化网站的制作教学目的知识目标技能目标能够利用学过的知识制作综合网站教学重点教学难点表单的实现教学方法案例讲解法，演示法教具计算机教学过程设计（含时间分配）1.1设计分析作为一个茶文化网站，其页面应该简单明了，给人清新的

19、感觉。首先整体设计各 部分内容如下：（1）页头部分主要放置网站logo信息和导航菜单等，logo可以是一张图片或者文 件信息等（2）页头下面将主页分为左右两部分，左侧是网站简单介绍及名茶欣赏图片等，右 侧为茶道的图、文、视频等具体内容介绍。（3）页面底部是网站版权信息1.2模块组成在制作网站的时候，可以将整个网站划分为三大模块，即上、中、下。（1）logo与导航菜单；（2）主题内容；（3）注册页面的实现心得作业课后练习备注课程名称Web前端开发授课时间第7周第1次授课章节第六章CSS概述第七章CSS3语法教学目的知识目标理解CSS概念及其发展 掌握CSS的语法技能目标教学重点CSS语法教学难点

20、教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计（含时间分配）1. CSS概述1. 1为什么要使用CSS样式1. 1. 1什么是CSS样式1. 1.2 CSS 与 DIV 之缘1.2 CSS样式的发展1.2. 1 CSS1.0 和 2.0 概述1.2.2 CSS的出现1.3 CSS3的前景展望1.3. 1 CSS3的应用范围1.3.2当前支持CSS3的浏览器2. CSS3语法2. 1 CSS3的语法基础1. 1. 1 CSS3的基本语法规则：CSS样式由两部分组成：选择器和声明块，其中选择器和声明块之间由冒号隔 开，声明块被一对大括号括起来，即：31江西工业职业技术学院教案Select

21、or Declarationl； Declaration2； -DeclarationN； 多个声明需要使用分号隔开。1. 1.2为样式规则添加注释2.2 CSS3选择器(1) 通用选择器，语法格式如下：*属性:属性值；(2) 标签选择器，语法格式如下： 标签名属性：属性值；(3) 类选择器，语法格式如下： 类选择器名称属性：属性值；(4) id选择器，语法格式如下：#id选择器名称属性：属性值；(5) 伪类选择器CSS伪类用于向某些选择器添加特殊的效果。(6) 群组选择器当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号隔 开。如：Hl,h2,h3,h4,h5,h6Color：g

22、reen；心得作业备注71课程名称Web前端开发授课时间第7周第2次授课章节实验使用CSS布局与美化网页教学目的知识目标技能目标学会使用CSS样式美化网页教学重点教学难点教学方法案例讲解法，演示法教具计算机教学过程设计（含时间分配）实验内容：制作页面，练习使用CSS样式的选择器，对网页中的文字段落及背景颜色 进行修饰。步骤提示：（1）设置body的属性，代码如下：body width： 1200px；color： #666；font-size： 12px；line-height： 2em；text-indent： 2em； font-family：宋体;（2）添加选择器hl, h2, p并定义

23、其属性hl, h2, p margin： Opx；padding： Opx；(3)定义section的属性，ec-g和其他选择器，部分代码如下： section width： 1200px；margin-top： lOpx；ec-g width： 860px；padding： lOpx；心得作业课后练习备注课程名称Web前端开发授课时间第8周第1次授课章节第七章CSS3语法教学目的知识目标掌握在网页种应用CSS样式的方法 理解CSS样式的特性熟悉CSS常用样式的属性技能目标能够使用CSS合理美化网页教学重点在网页种应用CSS样式的方法教学难点教学方法案例讲解法，演示法教具计算机，多媒体教学过程

24、设计（含时间分配）1、在网页中应用CSS的4中方式：（1）内联CSS样式，语法结构如下：内联样式/p（2）嵌入CSS样式，其应用的代码片段如下：hl color：red；pcolor：blue；hl级标题是红色的p段落文字是蓝色的/p(3) 链入外部CSS样式，代码如下：(4) 导入外部CSS样式import (”外部样式表相对路径”)；2、CSS样式的特性(1) CSS样式的继承性(2) CSS样式的特殊性(3) CSS样式的层叠性(4) CSS样式的重要性3、CSS3常用样式属性(1) 设置网页中的字体样式(2) 背景样式(3) 边框样式(4) 列表样式心得作业备注课程名称Web前端开发授

25、课时间第8周第2次授课章节实验使用CSS布局与美化网页教学目的知识目标技能目标学会使用CSS样式美化网页教学重点教学难点教学方法案例讲解法教具计算机教学过程设计(含时间分配)1、实验内容：制作页面，练习使用CSS样式的使用方法 例1使用外部样式表控制网页内容的样式显示，步骤如下：(1) 在磁盘上新建目录，文件夹命名为” web” ；(2) 在根目录下创建名称为“CSS”的文件夹，在该文件夹内建立外部样式表文 件“style, css”，可直接使用记事本等文本编辑器完成，也可借助于Dreamweaver等 软件完成此步骤；(3) 在“style, css样式表中分别定义p标签选择器、id选择器和

26、类选择器的 样式，具体代码略；(4) 在根目录下创建HTML文档并命名为index.html”在该文档的head区使用 1 ink标签将外部样式表“style, css”链入，注意1 ink标签的href属性取值为相 对地址链接；(5) 应用外部样式表中已定义好的样式，影响“index.html”文档中的内容的表 现形式；(6) 在浏览器中预览，观察每行文字的不同。2、练习用边框等CSS样式给一幅图片加上彩色圆角边框并设置立体阴影，3、练习使用列表样式制作新闻列表，要求使用自定义图像代替无序列表中的列表项标 志。心得作业完成课后练习备注课程名称Web前端开发授课时间第9周第1次授课章节第八章C

27、SS3页面布局教学目的知识目标理解网页布局的类型 掌握CSS盒模型 掌握网页元素的定位技能目标教学重点CSS盒模型教学难点网页元素的定位教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计（含时间分配）1、网页布局的类型：（1）固定宽度网页布局及其优缺点（2）流式网页布局及其优缺点（3）响应式网页布局2、DIV+CSS网页布局（1）创建D1Vdiv标签属性常用的只有id和class两种块容器中的内容块容器中的内容（2）CSS盒模型盒模型由margin （外边距）、border （边框）、padding （内边距）和content（内容）四部分组成的，此外还有高度和宽度两个辅助属性。3、网页

28、元素的定位CSS有三种基本的定位机制：普通流、浮动流和绝对定位，如果想要改变普通流中 元素的位置，则需要借助于CSS的浮动定位属性或绝对定位属性。(1) 浮动定位float(2) 绝对定位 position主要的取值 绝对定位的辅助属性4、CSS页面布局实例心得作业备注课程名称Web刖端开发授课时间第9周第2次授课章节实验使用DIV+CSS实现网上书店首页教学目的教学重点教学难点教学方法知识目标技能目标演示法教具 计算机，多媒体会使用DIV布局，会使用常用的CSS属性教学过程设计（含时间分配）1、实验内容：使用DIV+CSS实现网上书店首页，如图所示岂页 书籍分类会员登陆 注册 关于我们Pro

29、duct nameLorem ipsum dolor sit amet consectetur adipisicing el it, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation.详细.Product nameLorem ipsum dolor sit amet consectetur adipisicing el it, sed do eiusmod tempor incididunt ut labore

30、 et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitati on.斥销书籍书躇分类取糸抑I ）|农怖桜|瓠于殆切2019历史经典书店2、实验要求：结合HTML5的语义化标签，使用DIV+CSS网页布局技术第一行为header, 导航为nav,第二行为main,第三行为footer,通过CSS盒子模型做成如图所示的页 面。3、提示：可能用到的CSS属性有： background：url(. . /images/center_bg. gif)； width： 900px；float： left；margin-l

31、eft： lOpx；padding： lOpx；height： 130px；border： 2px WACA7A7 solid；border-radius： lOpxtcxtalign： center；clear： both；心得作业备注课程名称Web前端开发授课时间第10周第1次授课章节第八章CSS3页面布局教学目的知识目标理解多列布局和弹性盒布局掌握多列布局的基本属性、弹性盒常用的属性技能目标教学重点弹性盒布局教学难点教学方法案例讲解法，演示法教具计算机，多媒体1、设计多列布局：（1）设计多列显示样式 columns是多列布局特电columns属性的基本语法格亍 columns：colum

32、ns-widtr（2）定义列间距columns-gap属性可以员 columns-gap： normal 上的基本属性，该属性可以同时定义列数和每列的宽度。t如下：1 |column-count；呂义两栏之间的间距，该属性的基本语法格式如下：Hength寸象的列与列之间的间隙，初始值为normal,表示多列布 进行解析，一般为lem距离；也可以自定义间距，由浮点 直，不可为负值。:为列边框设计样式，能够有效区分各个栏目之间的关系， 集本语法格式如下：columns-rule：column-rule-width column-rule-style column-rule-color该属性为复合属

33、性， 相当于border属性，如column-rule： 10px solid #090；(4)定义跨列显示在报纸报刊杂志中，经常会看到文章标题跨列居中显示，columns-span属性用于 定义跨列显示，也可以设置单列显示。该属性的基本语法格式如下：columns-span：1|all；2、CSS3的弹性盒布局弹性盒子时CSS3的一种新的布局模式，CSS3弹性盒，是一种当页面需要适应不同 的屏幕大小及设备类型时，确保元素拥有恰当的行为的布局方式。CSS3弹性盒由弹性容器和弹性子元素组成。弹性盒子常用到的属性：略3、弹性盒子布局举例心得作业备注课程名称Web前端开发授课时间第10周第2次授课章

34、节实验弹性盒子布局教学目的知识目标技能目标会使用弹盒子布局教学重点教学难点教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计（含时间分配）1、实验内容利用弹性盒子实现横向布局。提示：首先设置盒容器的display属性为flex,让该容器变为弹性块，然后可以设置容 器的flex-flow属性或flex-direction属性来确定弹性盒子中子元素的布局方向，设 置为row,盒子中子元素横向布局排列，或者不需要设置任何属性，因为弹性子元素通 常在弹性盒子内一行显示，默认情况每个容器只有一行。部分代码：.flcx-containcrdisplay：-webk i tflex；display：f

35、lex； flex-flow：row； width：400px； height：200px；background-color:lightgrey；flex_item_lcftbackground-color：pink；marg in：lOpx；flex_item_centerbackground-color：yellow；margin：lOpx；flex_item_rightbackground-color:cormflowerblue；margin：lOpx；心得作业备注课程名称Web前端开发授课时间第11周第1次授课章节第九章CSS3的高级应用教学目的知识目标了解滤镜属性filter； 理

36、解渐变gradient；技能目标教学重点渐变的类型，transform教学难点教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计(含时间分配)1、滤镜属性filter(1) 首先介绍filter的语法结构：CSS 选择器f订ter： nonef订ter-functionfilter-function*；filter属性的默认值是none,且不具备继承性，这些CSS属性的属性值基本上都 是0到1之间或者大于0的数值，但有几个例外，blur属性值以像素为单位，可以是 任何整数，而huc-rotate滤镜值以“deg”为单位，表示度数。(2) 属性值filter-function可选择以下几个

37、值，这些值可以是一个，也可以写 多个：(DgrayscaleO灰度级(黑白效果)； sepiaO褐色(怀旧老照片效果)； saturate()色彩饱和度； hue-rotate()色相旋转(色调)； invert ()反色 2、渐变 gradientCSS3渐变可以显示在两个或多个指定的颜色之间平稳的过渡效果。CSS3定义了两 种类型的渐变效果：(1) 线性渐变(Linear Gradient) -向下/向上/向左/向右/对角方向；语法如下：background：linear-gradient(direction,color-stopl,color-stop2,) 具体例子讲解：略(2) 径向

38、渐变(Radial Gradient) -由它们的中心定义。语法如下：background： radial-gradient (center, shape size, stort-color,，last-color) 具体例子讲解：略心得作业备注课程名称Web前端开发授课时间第11周第2次授课章节第九章CSS3的高级应用教学目的知识目标理解2D转换transform； 理解过渡transition； 了 解动画 animation技能目标教学重点教学难点教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计 (含时间分配)1、介绍 2D 转换 transform(1 )CSS3的2D转换tr

39、ansform属性让Web设计师有了更多自由来装饰和变形HTML 组件，比如文字和div盒子变形，在CSS3 2D转换transform属性中主要包含的一 些基本功能有：移动、旋转、缩放、倾斜、旋转和拉伸元素。其基本语法如下：CSS 选择器transform： none transform-function*； transform属性的默认值是none,其中属性值filter-function具有以下可选值， 这些值可以是一个，也可以是多个：translateO位移元素； rotateO元素旋转； scale()元素缩放；skew()元素倾斜；matrix()多种变形2、过渡 transiti

40、on过渡transition允许CSS的属性值在一定的时间和区间内平滑的过渡，这种效果 可以在鼠标单击、获得焦点、圆滑的以动画效果改变CSS的属性值。transition属性是一个复合属性,主要包含4个子属性：transition-property 属性，transition-dumtion 属性，transition-delay 属性， transition-timing-function 属性。3、动画 animation在CSS3中，还可以使用animation属性实现更为复杂的动画效果。该属性可以创 建动画，取代许多网页动画图像、Flash动画和JavaScript脚本程序。CSS3动

41、画是使 元素从一种样式逐渐变化为另一种样式的效果。要实现CSS3动画的相关属性如下：animation：所有动画属性的简写属性，除了 animat ion-play-state属性。 animation-name：规定 keyframes 动画的名称。animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是0。animation-1iming-function:规定动画的速度曲线。默认是ease。 animation-delay：规定动画何时开始。默认是0。animat ion-iteration-count：规定动画被播放的次数。默认是10 animation-di

42、rection：规定动画是否在下一周期逆向地播放。默认是Formal。 animation-play-statc：规定动画是否正在运行或暂停。默认是Tunning。心得作业备注课程名称Web前端开发授课时间第12周第1次授课章节第10章 Javascript概述教学目的知识目标理解JavaScript的概念和特点, 了解JavaScript的发展历史， 熟悉JavaScript开发及运行环境， 掌握JavaScript基本数据类型技能目标教学重点JavaScript基本元素教学难点教学方法案例讲解法，演示法教具计算机，多媒体教学过程设计(含时间分配)1、JavaScript 概念(1) Jav

43、aScript 特点： 语法简单，易学易用 解释性语言 跨平台 基于对象和事件驱动 用于客户端(2) JavaScript 作用： 动态改变网页内容 动态改变网页外观 验证表单数据 响应事件(3) Javascript 和 Java 的关系JavaScript和Java除了在语法方面有点类似之外，几乎没有相同之处，并且由不 同的公司开发研制。JavaScript和Java之间主要存在以下几个区别。1. Java是传统的编程语言，JavaScript是脚本语言。2. Java语言多用于服务器端，JavaScript主要用户客户端。3. Java不能直接嵌入到网页中运行,JavaScript程序可

44、以直接嵌入到网页中运行。4. Java和JavaScript语法结构有差异。(4) JavaScript开发及运行环境JavaScript是一种脚本语言，代码不需要编译成二进制，而是以文本的形式存在， 因此任何文本编辑器都可以作为其开发环境。通常使用的JavaScript编辑器有记事本、 UltraEdit 和 Dreamweavero2、JavaScript语言基础(1)数据类型与变量简单数据类型：JavaScript中常用的3种基本数据类型：数值数据类型 (Number)、文本数据类型(String)和布尔数据类型(Boolean)。复合数据类型：复合数据类型主要包括用来保存一组相同或不同数据类型数据 的数组；用来保存一段程序，这段程序可以在JavaScript程序中反复被调用 的函数；用来保存一组不同类型的数据和函数等的对象。特殊数据类型：特殊数据类型主要包括没有值存在的空数据类型null；没有进 行定义的无定义数据类型undefinedo心得作业备注课程名称Web前端开发授课时间第12周第2次授课章节第11章JavaScript语言基础教学目的知识目标理解运算符掌握流程控制语句和函数技能目标教学重点掌握流程控制语句和函数教学难点教学方法案例讲解法教具计算机教学过程设计（含时间分配）1、运算符是程序