《网页制作项目实训教程》 教案 项目1 网页设计制作入门；项目2 制作包含图片与超链接的网页.doc

PAGE

PAGE0

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

学科教案本

TeachingPlan

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

The(1st/2na)SemesteroftheAcademicYearfrom20to20

________________________________

________________________________

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

网页制作项目实训教程

学科（Subject）

_______________________________年级（Grade）

_______________________________

_______________________________教师（Teacher）

_______________________________

重庆大学出版社制

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

注意：①

注意：

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

②单击按钮可返回目录

③页面设置参数为：

纸张：B5

页边距左：1.5

页边距右：1.5

任务1

HYPERLINK活动2制作第一个网页文档

任务2

HYPERLINK活动1制作树形菜单

HYPERLINK活动2制作在线考试试卷

教学

课题

任务1活动1创建与修改站点

课题

类型

理论+实作

课时

安排

2

上课

时间

教

学

目

标

1.了解DreamweaverCS6的工作界面

2.掌握站点的创建与编辑操作

教学

重点

1、2

教学

难点

2

辅助

资源

课件、多媒体、网络

复习引入

1.你上网浏览过网页吗？

2.你觉得网页由哪些元素构成？

3.你知道的网页制作工具有哪些？

教学

手段

教学过程

师生互动

活动设计

课件

讨论

实作

课件

举例

讨论

课件

实作

一、教师布置活动要求

1、创建一个名称为“项目1”的本地站点，站点文件夹为D盘。

2、修改“项目1”站点文件夹为桌面上的“Task1-1”文件夹。

二、师生讨论学习新知识

1、启动DreamweaverCS6软件

双击桌面上的DreamweaverCS6图标，启动软件，如下图所示。

2、DreamweaverCS6工作界面介绍

在“欢迎界面”中单击“新建”栏下的“HTML”按钮，新建一个HTML网页文件，进入新的窗口界面。

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

1、新建站点

（1）依次单击“站点”-“新建站点”菜单命令，打开“站点设置对象”对话框。

（2）在打开的“站点设置对象”对话框中设置站点名称为“项目1”，点击“本地站点文件夹”文本框后面的“浏览文件夹”按钮，在打开的对话框中选择D盘，如下图所示。

（3）单击“保存”按钮，完成站点的创建操作。

2、管理站点

（1）依次单击“站点”-“管理站点”菜单命令，打开“管理站点”对话框。

（2）在“管理站点”对话框中选择“项目1”站点，单击“编辑”按钮，打开“站点设置对象项目1”对话框，点击“本地站点文件夹”文本框后面的“浏览文件夹”按钮，在打开的对话框中选择桌面上的“Task1-1”文件夹。

（3）单击“保存”按钮，完成站点的编辑操作。

布置任务：让学生明确本次课的内容

提问或讨论：DW的工作界面与PS有何异同

网络搜索：站点有什么作用

演示：教师演示活动实施过程

实训活动：学生练习及点评

作业

布置

填写提交实训报告和实训表格

预习作业：预习下一节内容

教学

后记

教学

课题

任务1活动2制作第一个网页文档

课题

类型

理论+实作

课时

安排

2

上课

时间

教

学

目

标

1.了解网页的基本结构

2.掌握如何新建与保存网页

3.掌握如何在浏览器中浏览网页

教学

重点

1、2

教学

难点

3

辅助

资源

课件、多媒体、网络

复习引入

1.如何创建站点？

2.如何编辑站点？

教学

手段

教学过程

师生互动

活动设计

课件

讨论

实作

课件

举例

讨论

课件

实作

一、教师布置活动要求

新建一个网页文件，输入两行文字，并将网页文件以“task1-1-2.html”为文件名保存到“项目1”站点根目录下。如下图所示。

二、师生讨论学习新知识

1、DreamweaverCS6的三种编辑模式，分别是：代码、拆分、设计。

2、网页的基本结构由三部分组成：声明、头部、主体。

（1）网页文档类型声明

使用!doctypehtml来声明网页的文档类型，用来告诉浏览器使用什么样的HTML或XHTML规范来解析网页，它存在于页面的第一行，不区分大小写。

（2）网页的头部

head/head：定义文档的头部。标签内包含meta、title等标签。

meta/：提供有关