《Web前端开发》教案.pdfVIP

Web前端开发教案

第一讲：HTML基础与布局元素

教学目标与求：

1．了解web基本概念及HTML的发展史

2．使用HTML的基本结构创建网页

3．使用行级和块级标签组织页面内容

4．使用图像标签实现图文并茂的页面

教学主内容、时间安排及教学方法与手段：

1-1Web概述

1.1.1Web客户端技术

HTML

CSS

JavaScript

1.1.2Web服务端技术

PHP

ASP.net

JSP

1-2HTML基本结构

头部+正文

1-3HTML头部元素

head/head

title/title

link/link

meta/meta

1-4块级标签

基本块级标签

标题标签

段落标签

水平线标签

常用于布局的块级标签

有序列表标签

无序列表标签

表格

表单

分区标签div/div

1-5行级标签

img/

span

br/

a

1-6W3C标准

W3C：WorldWideWebConsortium，万维网联盟

W3C的职能：负责制定和维护web行业标准

W3C标准包括：列的标准：

HTML内容方面：XHTML

样式美化方面：CSS

结构文档访问方面：DOM

页面交互方面：ECMAScript

重点和难点：

重点：HTML基本结构、块级标签、行级标签

难点：使用div进行布局

复习思考题、作业题：

任务1基本块级元素

使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果

任务2用于布局的块级元素

编写HTML代码，实现如图所示的页面效果

任务3行级元素

编写HTML代码，实现如图所示的页面效果。

任务4超链接

编写HTML代码，实现导航菜单的链接

单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。

单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。

单击ww.html的返回链接可以返回到lj.html。

单击“联系我们”，将自动打开本机的电子邮件程序。

教研组意见：

负责人签字：年月日

教学后记（实施情况及分析）：

第二讲：第二章表格和表单

授课日期：第2天授课节次：4

课程名称：网页制作工程实训任课教师：

授课班级：软件工程163-164授课地点：软件407

授课题目（章、节）：第二章表格和表单

教材或主要参考书：Web前端开发案例教程胡军刘伯成等

教学用具：多媒体

教学目标与求：

1．掌握表格标签的结构组成及使用

2．掌握表格常用属性的设置

3．了解表格的嵌套

4．掌握表格的使用技巧

5．掌握表单的基本结构组成

6．掌握常用表单域的使用

7．掌握常用表单按钮的使用

教学主内容、时间安排及教学方法与手段：

2.1表格基础

2.1.1表格结构

表格定义：table../table

行定义：tr/tr

列定义：td/td

单元格

2.1.2表格标签

2.1.3表格属性设置

2.1.4跨行跨列

Rowspan

colspan

2.2表单

2.2.1表单标签

form/form