《网页制作项目实训教程》 教案 项目3 使用表格排版网页；项目4 制作包含表单的网页.doc

PAGE

PAGE0

广东省×××职业技术学校

学科教案本

TeachingPlan

20年———20年学年度学期

The(1st/2na)SemesteroftheAcademicYearfrom20to20

________________________________

________________________________

网页制作项目实训教程学校（School）

网页制作项目实训教程

学科（Subject）

_______________________________年级（Grade）

_______________________________

_______________________________教师（Teacher）

_______________________________

重庆大学出版社制

《网页制作项目实训教程》目录

注意：①按住Ctrl键后单击每个任务即可跳转到对应的教案②

注意：

①按住Ctrl键后单击每个任务即可跳转到对应的教案

②单击按钮可返回目录

③页面设置参数为：

纸张：B5

页边距左：1.5

页边距右：1.5

任务1

HYPERLINK活动2使用表格制作简单新闻网页

任务2

HYPERLINK活动2制作QQ邮箱登录页

任务2

HYPERLINK\lmk03活动1制作调查问卷表单（一）

HYPERLINK\lmk04活动2制作调查问卷表单（二）

教学

课题

任务1活动1了解表单元素

课题

类型

理论+实作

课时

安排

2

上课

时间

教

学

目

标

1.了解表单及表单的属性设置

2.掌握常用表单元素的使用

教学

重点

1、2

教学

难点

2

辅助

资源

课件、多媒体、网络

复习引入

1.表格嵌套。

2.使用表格嵌套布局网页。

教学

手段

教学过程

师生互动

活动设计

课件

讨论

实作

课件

举例

讨论

课件

实作

一、教师布置活动要求

了解表单以及表单中常用的文本域、按钮等表单元素的添加、属性设置等使用方法；利用表单元素制作一个留言板页面，效果如下图所示。

二、师生讨论学习新知识

1、表单

表单在页面显示的是一个红色虚线框，我们可以把它理解成一个容器，我们可以向里面添加进各种表单元素。在实际使用中，表单有时候可以不需要单独添加，因为当我们在页面中添加第一个表单元素时，系统也会自动创建一个表单。

2、表单属性的设置

常用属性设置项目的含义是：

（1）动作：指定用来处理表单数据的文件。

（2）方法：用于设置表单数据提交给服务器的方法，两种方法有所区别。

POST：是将表单数据嵌入到HTTP请求中传输，传输的数据量没有限制，可用于长表单。

GET：将数据附加到请求页的URL中，传输的字符数量有限制，是默认的方式。

（3）编码类型：用于指定提交给服务器的数据使用的编码类型，默认使用：application/x-www-form-urlencoded，如果要创建文件上传表单，则使用：multipart/form-data。

3、文本域

文本域是表单中的一个基本元素，应用的非常广泛，用户可以利用它输入文本类的信息，如用户名、密码、留言等，输入的内容可以是字符、数字等符号。文本域包括：单行、多行、密码三种类型，以适合不同的需求，三种类型之间可以互相转换。

4、按钮

表单按钮是一个非常重要的表单元素，当用户在输入完数据后单击按钮可以将数据提交给服务器处理。

三、教师演示活动实施过程并让学生完成活动任务

1、打开DreamweaverCS6，新建一个HTML文档，点击“表单”按钮，在页面中添加一个表单。

表单域属于不可见元素，如果插入后无法显示红色虚线框，可以按如下进行设置：依次点击“编辑”-“首选参数”，在弹出的对话框中，选择“不可见元素”选项卡，勾选“表单范围”复选框即可。

2、在表单中插入一个4行2列的表格，宽度设置400，表格边框为0，将第一行与第四行的单元格进行合并，设置各行高度为30。

3、在表格第一行输入文字“留言板”，并设置居中，在第二行与第三行的左边单元格中分别输入标题内容。

4、选择表格中第二行右边单元格，点击“文本字段”按钮，在弹出的对话框中直接选择“确定”，添加一个文本域。

5、选择文本域对象，在属性栏中按要求设置参数。

6、选择表格中第三行右边单元格，单击表单项中的“文本区域”按钮，添加一个文本区域，在弹出的对话框中直接选择“确定”。

7、选中“文本区域”对象，在属性栏中按要求设置参数。

8、选择表格第四行，单击表单项中的“按钮”，添加一个按钮对象，设置居中。

9、选择“按钮”对象，在属性栏中按要求设置参数。

10、将网页保存文件为：ta