《Web 前端开发》教案.docx

《《Web 前端开发》教案.docx》由会员分享，可在线阅读，更多相关《《Web 前端开发》教案.docx（46页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教如备课教案课程名称：Web前端开发教学单位:工程科技学院教研室:计算机应用教研室HTML5的DOCTYPE声明下使用了 HTML的过期元素，网页可能无法正常显示预期的 效果。2 .根标签html是IITML5文档的根元素标签,除顶部VDOCTYPE html文档类型声明以外,所有的 HTML5文档都是以标签开始，以标签结束。在htnil和标签内包含了两个重 要的元素标签：head首部标签和body主体标签，分别用于标记文档的首部和主体局部。3 .首部标签headHTML5文档的首部以head标签开始，以/head标签结束。head标签中的内容不会显示 在网页的页面中。head标签中可包含和等

2、标签，用于声明页面标题、字符集和关 键词等。标签标记网页标题，该标题会显示在浏览器窗口的标题栏中，假设省略title标签 那么网页标题会显示为“无标题文档二标签用于提供当前HTML文档的元数据，这些数据不会直接显示在网页上，但是对 于机器是可读的，适用于搜索引擎索引。通常nieta标签可用于定义网页的字符集、关键词、描 述、作者等信息。4 .主体标签bodyHTML5文档的主体局部以body标签开始，以/body标签结束。body标签中的内容将全 部显示在网页的页面中。body标签中可直接添加文本内容，也可继续嵌套其他元素标签，形成 多样化的显示效果。5 .HTML5文档注释为增加HTML5文

3、档的可读性，可为其添加注释局部。注释是文档中的说明文字，不会被浏览 器执行。HTML5使用。一一标签为文档进行注释，注释标签以“! 一”开头，以“一”结束, 中间的”替换为注释文字内容即可。标签支持单行和多行注释。三、HTML5保存的常用标签10HTML5保存的常用标签标签HTML5新增标mi文本格式标签si列表标签2广1我用槌vp2 .标题标签- 3 .水平线标筌4 .换行标签5.ff56.7. 标签8. 标筌“.醵标 vimg)L科体学标签V2.粗体字标筌和3-上演签和下标标签4 .小号字体文本5 . 5tlq6 .哪格式标箜vpre1 .有序5表标签2 .无序表标签Vul3 列表工程Vl

4、i4 .定义列表标签Vdl5 .定义标题歹俵项Vdt6 ,定义列表工程Vdd超德接标签Vd表格标签C表格标签;table、2 .行标签Vtr3 .单元格标签Vtd4 .表格页眉标签Vth5 .表题Vcaption6 .表格主体Vtbody7 .表格表头Vthead8 .表格页脚Vtfoot9 .歹够且合VcolgroupQcl列属性定义y页眉标签header)导航标签vnav节标签section文章标签article侧栏标签vaside页脚标签footer页眉标签header)导航标签vnav节标签section文章标签article侧栏标签vaside页脚标签footerHTML5新增文档结

5、构标签HTML5新增格式标签记号标签v markA日期时间标签vtime进度标签progress度量标签vmeter音频标签vaudi。视频标签vvideo1、HTML5新增标签-新增文档结构标签1 .header标签header标签定义文档的页眉，通常是一些引导和导航信息。例如：网站标题h2网站副标题11header标签不局限于写在网页头部，也可以写在网页内容里面。2 . 标签 nav标签代表页面的一个局部，是一个可以作为页面导航的链接组，是navigator的缩 写。例如：首页liahref=学院简介/aX/li学院新闻li院系设置/aX/linav标签可以应用于传统导航条、侧边栏导航、页

6、内导航、翻页操作等场合。3. 标签.section标签用于对网页的内容进行分区、分块，定义文档中的节。比方章节、页眉、页脚 或文档中的其他局部。一般情况下，section标签通常由标题和内容组成。例如：hlsection 是什么？ p用于对网页的内容进行分区、分块/p section标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用 section标签定义。 根据实际情况，如果article标签、aside标签或nav标签更符合使用条件，那么不要 使用section标签。 当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div标签而非 sectiorio标签arti

7、cle标签是一个特殊的section标签，它比section具有更明确的语义，它代表12 一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如：一篇文章、一篇博客、一个用户评价等。这是一篇新闻稿件5 .aside标签aside标签用来装载非正文的内容，被视为页面里面一个单独的局部。例如：文章标题/hlP文章内容/pa$1（附属信息局部Aside标签可以被包含在article标签内作为主要内容的附属信息。 也可以在article标签之外使用，作为页面或站点全局的附属信息局部。例如广告、友 情链接、侧边栏、导航条等等。6 .footer标签 footer标签定义section或docume

8、nt的页脚，包含了与页面、文章或是局部内容有关 的信息，比方文章的作者或者日期。例如：footer版权所有阜阳职业技术学院/footer作为页面的页脚时，一般包含了版权、相关文件和链接。 Footer标签和header标签使用基本一样，可以在一个页面中屡次使用，也可以在 article标签或者section标签中添加footer标签，那么它就相当于该区段的页脚了。下面来看一个HTML5新增文档结构标签的综合应用：header width: lOOOpx;height: 300px;margin: 0 auto;border: solid Ipx blue;）13navwidth: lOOOpx

9、;height: 30px;margin: 0 auto;border: solid Ipx blue;)#containerwidth: lOOOpx;height: 500px;margin: 0 auto;border: solid Ipx blue;)aside width:30%;height:98%;border: dashed Ipx red; float: left;)section(width: 39%;height: 98%;border: dashed Ipx green;float: left;margin-left: 2px;margin-right: 2px;art

10、icle width:99%;height: 49%;border: solid Ipx black;float: left;margin-top: 2px;footer width: lOOOpx;height: lOOpx;margin: 0 auto;border: solid Ipx blue;)header页眉标签/header导航标签v/nav14aside,侧边栏 v/aside 文章标签/articlearticle文章标签/article 侧边栏 v/asidefooter,页脚标签/footer2、HTML5新增标签.新增格式标签L 标签记号标签mark用于突出显示指定区域

11、的文本内容，通常在指定的文本前后分别加上mark和/mark标签标记，可以为文字添加黄色底色例如：这是一段文字/mark内容2. progress）标签A进度标签（progress用于显示任务的进度状态，可配合Javascript使用以显示任务进度 的动态进行效果。例如：文件正在下载中：3. 标签度量标签meter用于显示标量测量结果，通常用于显示磁盘使用量、投票数据统计等。例如：C 盘空间剩余大小:300/1000GB 4. 标签audio元素用于播放音频。src例如：audio元素的常用属性如下：15 Src：设置音频的路径。 Controls：设置是否使用播放控制，如果在标签中编写con

12、trols=controls”,那么网页会显示audio自带的播放控件。5. 标签元素用于播放视频。 例如：video元素的常用属性如下： Src：设置视频的路径。 Controls：设置是否使用播放控制，如果在标签中编写controls=controls”,那么网页会显示video自带的播放控件。三：CSS基础【教学目的与要求】1 .知识目标：使学生了解css的历史，精通css的语法和两个特性，精通css的选择器 和属性。2 .能力目标：使学生掌握CSS的基础知识，并能够运用CSS进行页面美化。【重点与难点】重点：CSS的语法和两个特性难点：CSS的选择器和属性。【教学方法及手段】媒体演示法

13、、案例教学法【教学时数】20课时【教学内容与教学过程】一、CSS入门a) CSS基础语法16展性 值屋性hl color:red; font-size: 14px;1千/J一叶-1选择器声明声明选择器属性：值；属性：值；选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成，每个属性有一个值。属性和值用冒号分开，分号结束b)CSS基础选择器分类标签名选择器、类选择器、ID选择器、子代选择器、结构选择器c)标签名选择器语法优先级与ID选择器与class选择器相比最低P ( border:lpx black solid;d) cssAnCSS 选择第 V/spanCSS 优先级

14、v/p优先级奴的类名，.后跟类名 text |border:lpx red solid;p ulass=textCSS入 |JCSS选择器 e) ID选择器语法TD选择器的优先级最高，页面中不能有同名的ID#后跟ID名CSSAnCSS选择器 17f）后代选择器语法使用多个选择器的组合来找到具体要控制的标签。.#warp p（border:lpx red solid;CSSAf Jg）使FCSS选择器、 准确L/bdy推码量代码美观，易读、利用样式优先级的区别实现样式的覆盖二、盒模型百度链接间的距离怎么实现？百度一下a）盒模型概念新同 网页 贴里 虬道 MP3 图LK.视频/地图百科文虎hao1

15、23 |鸣这里的距离怎么实现？两百成诗为自贡慵入百成椎广食案风云椁关千百唐 A8ut fiaiflu2012 Baidu使用百席前必谈京0030173芸 9盒模型指css布局中html中的每个元素在浏览器中的解析都可以被看 作一个盒子，拥有盒子一样的外形和平面空间。b）盒模型组成元素I8超市中两个月饼盒子之间的距离就是咱们要介绍的margin （外边距）,每个月饼都要有最外层的包装盒，而这个包装盒的厚 度,就是咱们的一 border （边框）.月饼不可能都是直接挨在一起的，对吧，那每个月饼 之间的间距,咱们就叫做- padding （内边距）.那咱们介绍了月饼盒，咱们的月饼总应该有吧。对的，咱

16、们月饼的宽度就是- width.（1） margin：高度就是 一height.语法：margin-top / right /取）混偏的第1健就叼做1箕过element （兀素），每个块元素有上、右、下、左四个方位的外边距，可以分别用四种属性来声明。margin - top： 10px；/* 设置上边距 10px*/margin-right ： 10px；/*设置右边距 10px*/margin-bottom： 10px；/*设置底边距 10px*/marginTeft： 10px；/* 设置左边距 10px*/margin的几种不同写法：.main margin： lOpx 20px lOp

17、x 20px；这四个值分别设置类名为main的模块上、 右、下、左四个方位外边距的值。2） . mainniargin： lOpx 20px；这两个值分别设定类名为main的模块的上下、左右 的外边距3） . main margin： lOpx 20px lOpx；第一个值设定上外边距，第二个值设定左右外 边距，第三个值设定下外边距4） . mainmargin： lOpx；如果就一个值的话，就设定了四个方向的外边距都lOpx5） .main margin： 20px auto；这样设值的意思是上下两个方位的外边距为20px, 左右两个方位的外边距自动适应居中竖向竖向margin的叠加marg

18、in横向上是加法，但在竖向上却会产生叠加的现象，并会取上下间 距的其大者生效。19课程教学基本信息课程名称Web前端开发胃90理论9。学时45实践 4545学时45任课教师职称讲师授课对象授课时间主要 参考 书目Web前端开发初级上、下册 工业和信息化部教育与考试中心编著中国工信出 版集团学标求 教目要目的：为积极响应国家职业教育改革实施方案，本课程以web前端开发职业 技能等级标准中的职业素养和岗位技术技能为重点培养目标，以专业技能为模块， 以工作任务为驱动进行课程教学。使学生对Web前端开发的技术体系有更系统、更清 晰的认识，能够顺利通过1+X认证Web前端开发的职业技能等级认证考试。要求

19、：掌握当前主流的HTML5网站前端设计技术，在课程的学习中，培养学生的 前台网页设计制作能力，培养学生实际岗位的职业技能，提高学生的职业素质。通过 工程化教学使学生到达“会、熟、专、美”的网站前台制作的岗位要求，具备从事网 站前台开发所必须的专业知识、专业技能和相关职业能力。为计算机技术专业学生将 来职场的前台网页制作能力打下良好基础。课程内容学时分配主要内容学时数-HTML基础知识HTML5基础CSS基础四CSS3基础-：HTML基础知识【教学目的与要求】1 .知识目标：使学生了解HTML历史，精通HTML结构、精通HTML的元素和属性2 .能力目标：使学生掌握HTML基础知识【重点与难点】

20、(3) padding相对于外边距而言，元素也应该具有内边距。padding-top / left / bottom / right ： length； padding属性定义元素边框与元素内容之间的空白区域。padding的几种写法和margin是一样的。(4) border元素的边框是围绕元素内容和内边距的一条线或多条线 语法：border-top / right / bottom / left： border-widthborder-styleborder-colorborder简写属性，用于把边框的所有属性设置到一个声明中。(5)盒模型的主要属性：marginpadding、 bord

21、er 标准模式的计算方式：margin + padding+ border+ content盒模型的使用规那么：父子关系用padding,兄弟关系用margin!10px 5px70px5 Px lOpx411IImargin: lOpxLpadding:5pxI |IIwidth :70pxlOOpx20(6) displaydisplay属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。语法：display：block / none / inline / inline-block ；*none*inline ：行标签，占一小块区域*block ：块标签，独占一

22、行，可以设置宽高*inline-block ：块标签，但是具有一些行标签的属性display： inline-block是行内的块级元素，它拥有块级元素的特点，可以设置长宽，可以设置margin和padding值，但它却不是独占一行的，它的宽带并不占满父元素，而是和行内元素一样，可以和其他行内元素排在同一行里。它集块级元素和行内元素的特点于一身。三、CSS样式表内部样式表通常位于和/head标签内部，通过使用style和 /style)标签标记各类样式规那么，其作用范围为当前整个文档。选择器属性名称1：属性值1;属性名称2：属性值2；.属性名称N：属性值N 这里的选择器可用于指定样式的元素标签

23、，例如body、p、hh6等均可。如果属性内容较多，也可以分行写：例如：选择器属性名称1：属性值1;属性名称2：属性值2；21属性名称N：属性值N其中最后一个属性值后面是否添加分号为可选内容。一般来说属性之间的分号用于 间隔不同的属性声明，因此最后一个属性值无需添加分号。但是为了方便后续添加新的 属性，也可以为最后一个属性值添加分号，这种做法不影响CSS样式表的正常使用。四、CSS常用样式1.CSS背景表3-9 CSS背景与颜色属性属性名称解释background-color设置背景颜色background-image设置背景图像background-repeat设置背景图像是否重复平铺bac

24、kground-attachment背景图像是否随页面滚动background-position放置背景图像的位置background上述所有属性的综合简写方式2、CSS文本表3-19 CSS文本属性一览表属性名称解释text-indent设置文本缩进text-align设置文本对齐方式（左对齐、居中、右对齐）text-decoration设置文本装饰（下划线、删除线、上划线）text-transform设置文本大小与的转换letter-spacing设置字符间距3. CSS字体22表3-23 CSS字体属性一览表属性名称解释font-family设置字体系列font-style设置字体风格(

25、正常、斜体、倾斜三种)font-variant设置字体变化(小型尺寸的大写字母等)font-weight设置字体的粗细font-size设置字体尺寸font上述所有属性的综合简写方式4、CSS列表CSS对于HTML列表元素的样式设置主要在于规定各项列表前面的标志(marker) 类型：有序列表、无序列表和定义列表。其中有序列表默认的标记样式为标准阿拉伯数 字(1, 2, 3, 4,)；而无序列表默认的标记样式是实心圆点。属性名称解释list-style-type设置列表标志类型list-style-image设置列表标志图标list-style-position设置列表标志位置list-sty

26、le-type上述所有属性的综合简写方式5、CSS表格属性名称解释border-collapse用于设置表格的边框样式为双线或单线。border-spacing用于设置表格中双线边框的分割距离。caption-side用于设置表格中的标题位置。empty-cells用于定义表格中空单元格边框和背景的显示方式。table-layout用于规定表格的布局方式，包括固定表格布局和根据内容调整布局。除以上5种属性设置外，在CSS中一些通用属性设置同样也可以用于表格元素。例 如字体颜色(color) 背景(background)、文本对齐(text-align)、边框(border)、 内边距(padd

27、ing)、宽度(width)和高度(height)等。23四：CSS3基础【教学目的与要求】1 .知识目标：学生应了解CSS3的历史及现状2 .能力目标：熟练掌握CSS3新增的选择器【重点与难点】重点：掌握CSS3新增的选择器难点：CSS3边框与背景、变形与动画【教学方法及手段】媒体演示法、案例教学法、【教学时数】20课时【教学内容与教学过程】一、CSS3边框与背景CSS3是最新的CSS标准。我们现在所说的CSS3,指的是CSS2. 1之后发布的所有 东西，CSS3的优势是能够使网站变得非常炫酷。CSS3. 0能够代替之前需要用 Javascript JQuery才能实现的交互效果，可以为用户

28、带来更好的体验，特别是针对 移动端界面。另外，使用CSS3还能减少开发和维护本钱。CSS3新增了三种边框效果，分别是：圆角边框：自定义圆角数量和弧度的边框矩形阴影：带阴影效果的边框图片边框：用自定义图片素材做边框表11-1 CSS3新增边框效果属性一览属性名称解释border-radius为元素设置圆角边框。box-shadow为元素设置带阴影效果的边框。border-image为元素设置带有背景图片的边框。1. ) CSS3圆角边框在CSS3中，border-radius属性可用于直接创立带有圆角的边框样式，该属性 值表示圆角边框的圆角半径长度，数值越大那么圆的弧度越明显。24它的语法规那么

29、如下：border-radius： | ；border-radius属性的取值有以下两种形式：使用长度值规定圆角半径的长度，该值不可为负数。：使用百分比规定圆角半径的长度，该值不可为负数。表11-3 CSS3圆角边框属性值一览表以上4种border-*-radius属性均与border-radius属性取值方式相同，可以使用长度值或属性值解释border-radius用于定义边框四个角的弧度border-top-left-radius用于定义边框左上角的弧度border-top-right-radius用于定义边框右上角的弧度border-bottom-left-radius用于定义边框左下角

30、的弧度border-bottom-right-radius用于定义边框右下角的弧度百分比的形式表示。下面来看实例：divwidth: 600px;height: 50px;border: solid Ipx red;margin: 20px auto;padding: 20px; )div . aborder-radius: 20px;div tlborder-top-left-radius: 20px;)div tr border-top-right-radius: 20px; )div , bl border-bottom-left-radius: 20px;)div.brborder-b

31、ottom-right-radius: 20px;25 2. CSS3矩形阴影：在CSS3中，box-shadow属性可以为边框添加阴影，该属性适用于所有元素。box-shadow的默认属性值为none,表示无阴影效果。它的语法规那么如下：box-shadow： xoffset yoffset width color参数解释如下：xoffset：表示阴影在水平方向（x轴）上的偏移距离，取值为CSS 长度值length）。.yoffset：表示阴影在垂直方向（y轴）上的偏移距离，取值为,CSS 长度值length。.width：表示阴影的宽度，取值为CSS长度值length。color：表示阴影

32、的颜色效果，取值为CSS颜色值color）。下面来看实例：由于时间关系，本例就在上个实例下面继续添加.divwidth: 600px;height: 50px;border: solid Ipx red;margin: 20px auto;padding: 20px;div . abordr一工adius: 20px;box-shadow:lOpx lOpx lOpx black;）div tlborder-top-left-radius: 20px;26div tr border-top-right-radius: 20px; )div , bl border-bottom-left-rad

33、ius: 20px;)div.brborder-bottom-right-radius: 20px; 3. CSS3背景效果CSS3新增了三种背景效果，可用于自定义背景图片或颜色的绘制区域、位置和尺寸。属性含义属性值background-clip设置背景覆盖范围Border-box/padding-box/content-boxbackground-origin设置背景覆盖的起点Border-box/padding-box/content-boxbackground-size设置背景的大小长度/百分比F面来看实例：由于时间关系，本例就在上个实例下面继续添加.27CSS3自定义背景图片绘制区域b

34、ackground-c lip属性裁剪背景图片，包含borderbackground-c 1 ip属性裁剪背景图片，包含paddingbackground-c li p属性裁剪背景图片，包含content(1) background- cl ip 属性： !DOCTYPE htmldivwidth: 200px;height: lOOpx;border: dashed lOpx blue;margin: 20px;padding: 20px; background-color: slategray;).borderbox background-clip: border-box;) paddin

35、gbox background-clip: padding-box;) contentbox background-clip: content-box;)28 (2) background-origindivwidth: 200px;height: lOOpx;border: dashed lOpx blue;margin: 20px auto;padding: 20px;background: url(img/pattern.png) no-repeat; )borderboxbackground-origin: border-box;) paddingboxbackground-origi

36、n: padding-box;)contentbox background-origin: content-box;) div class=contntbox (3) backgroundsize29重点：HTML结构、HTML的元素和属性难点：HTML的元素和属性【教学方法及手段】媒体演示法、案例教学法【教学时数】20课时【教学内容与教学过程】随着因特网的高速开展，网络已飞进寻常百姓家。据统计，我国宽带用户总数居世界首位。人 们在工作、学习和生活中越来越多地使用因特网，社会车轮的转动已经离不开因特网这个润滑油。而 说到因特网，网民们会对各种网站侃侃而谈。那么究竟什么是网站？什么是网页？它们和

37、因特网之间 存在什么关系？在这种高速开展的信息时代，拥有网站，是企业宣传的需要，是商务交易的渠道，是 个性张扬的途径。那么我们该如何创立网站呢？让我们带着这一系列的疑问进入本讲内容的学习！. 一、网页与网站，1 .网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关网页的集合就构成了一个网站。 举例：网站的种类很多，根据不同的分类方法可以分为不同的类型。新华网曾对网站按主体性质进 行分类，分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其它非盈利机构 网站以及其它类型等。2 .浏览网页的工具浏览器浏览器：用于翻开显示网页的软件。最常见的是Windows系统自带的IE

38、浏览器。还有火狐Firefox、 360平安浏览器等。1） 用于定位某个网站、某个页面的一串字符。通常格式为：2）主页：主页、首页和网页是几个容易混淆的概念。网页泛指WWW上所有的页面；而主页那么是网站的“指 挥所”，通过主页中的超链接可以到达网站中的其他页面，它是站点中所有网页的链接中心；首页特指 用户进入网站后看到的第一个页面，通过这个页面可以进入网站的主页，此时的首页只是起到欢迎访 问者的作用。因此主页和首页的本质区别就在于是否设有网站的导航栏。但很多网站的首页和主页是合为一体的，是同一个网页。用户浏览网站时，在浏览器的地址栏里 输入网站的URL地址后，浏览器就会翻开“主页”或“首页”。divwidth: 200px;height: lOOpx;bo工clr: solid Ipx blu；margin: 20px auto;padding: 20px;background: url(img/bg.jpg);background-repeat: no-repeat;) small background-size: 80px 80px;)large background-size: 240px 140px;)/st