《《Web前端开发案例教程》—教学教案》由会员分享，可在线阅读，更多相关《《Web前端开发案例教程》—教学教案（39页珍藏版）》请在金锄头文库上搜索。
1、Web前端开发案例教程教学教案第一讲： HTML基础与布局元素教学目标与要求：1 了解web基本概念及HTML的发展史2 使用HTML的基本结构创建网页3 使用行级和块级标签组织页面内容 4 使用图像标签实现图文并茂的页面教学主要内容、时间安排及教学方法与手段：1-1 Web概述1.1.1Web客户端技术l HTMLl CSSl JavaScript1.1.2 Web服务端技术l PHPl ASP.netl JSP1-2 HTML基本结构头部+正文1-3 HTML头部元素1-4 块级标签 l 基本块级标签 标题标签 段落标签水平线标签l 常用于布局的块级标签 有序列表标签 无序列表标签表格表单
2、分区标签1-5行级标签1-6 W3C标准 W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护web行业标准 W3C标准包括：列的标准： HTML内容方面：XHTML 样式美化方面：CSS 结构文档访问方面：DOM 页面交互方面：ECMAScript重点和难点：重点：HTML 基本结构、块级标签、行级标签难点：使用进行布局复习思考题、作业题： 任务1基本块级元素使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果 任务2用于布局的块级元素编写HTML代码，实现如图所示的页面效果 任务3行级元素编写HTML代码，实现如图所示的页面效果。
3、任务4超链接编写HTML代码，实现导航菜单的链接l 单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。l 单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。l 单击ww.html的返回链接可以返回到lj.html。l 单击“联系我们”，将自动打开本机的电子邮件程序。教研组意见：教学后记（实施情况及分析）：第二讲：第二章表格和表单授课日期：第2天 授课节次：4课程名称：网页制作工程实训 任课教师：龚根华授课班级：软件工程163-164 授课地点：软件407授课题目（章、节）：第二章表格和表单教材或主要参考书：Web前端开发案例教程 胡军 刘伯成等
4、教学用具：多媒体教学目标与要求：1 掌握表格标签的结构组成及使用2 掌握表格常用属性的设置3 了解表格的嵌套4 掌握表格的使用技巧5 掌握表单的基本结构组成6 掌握常用表单域的使用7 掌握常用表单按钮的使用教学主要内容、时间安排及教学方法与手段：2.1 表格基础2.1.1表格结构l 表格定义：.l 行定义：l 列定义：l 单元格2.1.2 表格标签2.1.3 表格属性设置2.1.4 跨行跨列Rowspancolspan2.2 表单2.2.1 表单标签 表单标签（）用于声明表单，定义采集数据的范围，同时包含了处理数据的应用程序及数据提交到服务器的方法。2.2.2 表单元素的基本形式 表单元素包括
5、文本框、按钮、下拉列表等。除下拉列表框、多行文本域等少数表单元素外，大部分表单元素都使用标签，只是它们的属性设置不同，它们的统一用法如下。 2.2.3 表单域 表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉列表和文本上传框等。用于采集用户的输入或选择的数据。2.3 表格布局2.3.1 应用场景 表格的图文布局是将图像和文本都看成单元格的组成内容，然后设置它们所占的行数或列数。 表单布局是把注册的各项堪称一行，每项的标题显示在同一列，而所填信息也显示在同一列的布局方式。整体看起来较为规整。2.3.2 图文布局 针对页面内容有图也有文字的场合设计布局。2.3.3 表单布局
6、针对表单设计合理的布局2.3.4 表格的嵌套布局 表格嵌套是将一个表格嵌套在另一个表格的单元格中。 多重嵌套表格多用于网页布局，构建网页的框架结构。重点和难点：重点：表格结构与特殊表格的设计、表单及表单域的应用、表格在布局中的应用难点：表单及表单域的理解与应用复习思考题、作业题：l 任务1表格嵌套和表格内的标签l 任务2 跨多行多列的表格l 任务3给表单加分类边框l 任务4注册表单布局教研组意见：教学后记（实施情况及分析）：第三讲： 第三章 框架教学目标与要求： 掌握使用框架结构实现多窗口页面 掌握使用内嵌复用页面教学主要内容、时间安排及教学方法与手段：一、框架集的使用1、创建框架网页的步骤2
7、、框架页面的基本语法1、 水平框架2、 垂直框架3、 混合框架二、 框架集中各窗口间的关联设置窗口名称设置target三、target的其他用法l 在新窗口中显示：_blankl 在自身窗口中显示：_selfl 在上级窗口显示：_topl 在父窗口显示：_parent 四、内嵌框架 常用的框架技术包括框架集和内嵌框架。 框架集结构非常清晰，适用于整个页面都用框架实现的场合；内嵌框架使用比较方便、灵活，一般用于在页面中引用站外的页面内容时。 框架集使用和标签实现，的rows和cols属性实现窗口的横向和纵分割。 配合使用标签的target属性以及标签的name属性，可以实现窗口间的关联。 标签的
8、target属性除设置为具体的框架名外，还包括_blank,_self,_top,_parent四种特殊窗口。 和框架相比，内嵌框架比较灵活，只需要一句代码即可引用站内或站外的某个网页。重点和难点：重点：框架集的使用以及窗口间关联的实现难点：嵌套框架集的使用以及窗口间关联的实现复习思考题、作业题：1 行列划分的框架2 窗口间的关联3 iframe的基本用法4 利用框架技术布局页面单击“联系我们”，将自动打开本机的电子邮件程序。教研组意见：教学后记（实施情况及分析）：第四讲： 第四章 CSS样式表基础教学目标与要求： 掌握CSS的基本语法及样式规则 掌握类选择器和ID选择器的定义方式 使用文本和
9、字体样式美化网页 使用背景样式美化网页 使用伪类样式控制超链接样式 掌握CSS样式中常用的属性设置教学主要内容、时间安排及教学方法与手段：4-1 CSS简介l 实现内容和样式的分离，利于团队开发l 实现样式复用，提高开发效率l 实现页面的精确控制l 更利于搜索引擎的搜索4-2 CSS基本语法1、页面结构2、选择器的分类标签选择器、类选择器、ID选择器4-3 常用的样式属性1、CSS的属性单位长度单位、颜色单位2、字体属性font-family、font-size、font-style、font-weight3、文本属性text-indent、text-align、line-height、wor
10、d-spacing、letter-spacing、text-transform、text-decoration4、背景属性 background-color、background-repeat、background-image、background-attachment、background-position、background5、列表的常用属性list-style、float6、超链接的伪类样式a:link、a:hover、a:visited、a:active7、CSS滤镜8、多选择器的常用符号及组合 使用CSS可以实现W3C提倡的结构和样式分离的思想。 CSS样式规则采用选择器、属性、属
11、性值进行描述 采用的选择器有三类标签选择器，直接用标签名方式定义类选择器，先为标签设置属性class=”类别名”,后用.+类别名方式定义。ID选择器，先为标签设置属性id=”id名”,后用#+类别名方式定义。 样式的两大用途是页面元素修饰和布局，采用页面元素修饰的CSS属性包括文本属性、字体属性、背景属性、列表属性、滤镜属性 超链接伪类有以下几种：a:link、a:hover、a:visited、a:active重点和难点：重点：CSS基本语法、常用的样式属性难点：常用的样式属性复习思考题、作业题： 1 任务1 ID选择器使用HTML编辑工具，编写HTML代码，实现如图所示样式的页面效果 任务
12、2 背景设置，重复背景编写HTML代码，实现如图所示样式的页面效果 任务3无序列表的修饰编写HTML代码，实现如图所示样式的页面效果。 任务4超链接编写HTML代码，实现如下图样式的链接扩展训练：实现如图所示的页面效果 CSS各类选择器应用 编写HTML代码，实现如图所示的页面效果。 列表修饰风格 超链接教研组意见：教学后记（实施情况及分析）：第五讲： 第五章 CSS样式表布局教学目标与要求：1 掌握盒子模型相关属性并实现页面布局2 掌握样式表的引用方式及优先级3 掌握常用的DIV+CSS布局方式教学主要内容、时间安排及教学方法与手段：5.1 盒子模型及应用5.1.1盒子模型l 边框：对应包装盒的纸壳，一般具有一定的厚度。l 内边距：位于边框内部，是内容与边框的距离，对应包装盒的填充部分，有的教材也称其为“填充”。l 外边距：位于边框外部，是边框外面周围的间隙，有的教材也称其为“边界”。5.1.2 盒子属性l margin外边距设置l border边框的设置l padding内边距的设置5.2 div+css布局 div元素的样式设置 div元素的嵌套：如果需要使用类似表格布局页面，则需要使用div嵌套。 div元素的浮动：布局中可以使两块并列显示，可采用float属性实现。float属性的值有left
