中职《网页制作项目实训教程》教案-项目1 网页设计制作入门
- 格式：doc
- 大小：847.50 KB
- 文档页数：15
1 ________________________________
网页制作项目实训教程
_______________________________
_______________________________ 广东省×××职业技术学校
学科教案本
Teaching Plan
20 年———20 年学年度 学期
The (1st/2na)Semester of the Academic Year from 20 to 20
学校（School）
学科（Subject）
年级（Grade）
教师（Teacher）
1 注意：
①按住Ctrl键后单击每个任务即可跳转到对应的教案
②单击按钮可返回目录
③页面设置参数为：
纸张：B5
页边距左：1.5
页边距右：1.5 《网页制作项目实训教程》目录
项目1 网页设计制作入门
任务1
活动1 创建与修改站点
活动2 制作第一个网页文档
任务2
活动1 制作诗词赏析页面
活动2 对诗词赏析页面进行简单排版
任务3
活动1 制作树形菜单
活动2 制作在线考试试卷
1 教学
课题 任务1 活动1 创建与修改站点
课题
类型 理论+实作 课时
安排 2 上课
时间
教
学
目
标 1.了解Dreamweaver CS6的工作界面
2.掌握站点的创建与编辑操作
教学
重点 1、2 教学
难点 2
辅助
资源 课件、多媒体、网络
复习引入 1.你上网浏览过网页吗？
2.你觉得网页由哪些元素构成？
3.你知道的网页制作工具有哪些？
教学
手段 教学过程 师生互动
活动设计
课件
讨论
实作
一、教师布置活动要求
1、创建一个名称为“项目1”的本地站点，站点文件夹为D盘。
2、修改“项目1”站点文件夹为桌面上的“Task1-1”文件夹。
二、师生讨论学习新知识
1、启动Dreamweaver CS6软件
双击桌面上的Dreamweaver CS6图标，启动软件，如下图所示。
布置任务：让学生明确本次课的内容
提问或讨论：DW的工作界面与PS有何异同
1
课件
举例
讨论
课件
实作
2、Dreamweaver CS6工作界面介绍
在“欢迎界面”中单击“新建”栏下的“HTML”按钮，新建一个HTML网页文件，进入新的窗口界面。
三、教师演示活动实施过程并让学生完成活动任务
1、新建站点
（1）依次单击“站点”->“新建站点”菜单命令，打开“站点设置对象”对话框。
（2）在打开的“站点设置对象”对话框中设置站点名称为“项目1”，点击“本地站点文件夹”文本框后面的“浏览文件夹”按钮，在打开的对话框中选择D盘，如下图所示。
（3）单击“保存”按钮，完成站点的创建操作。
2、管理站点
（1）依次单击“站点”-> “管理站点”菜单命令，打开“管理站点”对话框。
（2）在“管理站点”对话框中选择“项目1”站点，单击“编辑”按钮，打开“站点设置对象 项目1”对话框，点击“本地站点文件夹”文本框后面的“浏览文件夹”按钮，在打开的对话框中选择桌面上的“Task1-1”文件夹。
（3）单击“保存”按钮，完成站点的编辑操作。
网络搜索：站点有什么作用
演示：教师演示活动实施过程
实训活动：学生练习及点评
作业
布置 填写提交实训报告和实训表格
预习作业：预习下一节内容
教学
后记
1 教学
课题 任务1 活动2 制作第一个网页文档
课题
类型 理论+实作 课时
安排 2 上课
时间
教
学
目
标 1.了解网页的基本结构
2.掌握如何新建与保存网页
3.掌握如何在浏览器中浏览网页
教学
重点 1、2 教学
难点 3
辅助
资源 课件、多媒体、网络
复习引入 1.如何创建站点？
2.如何编辑站点？
教学
手段 教学过程 师生互动
活动设计
课件
讨论
实作
一、教师布置活动要求
新建一个网页文件，输入两行文字，并将网页文件以“task1-1-2.html”为文件名保存到“项目1”站点根目录下。如下图所示。
布置任务：让学生明确本次课的内容
讨论：如何实现该案例效果
1
课件
举例
讨论
课件
实作
二、师生讨论学习新知识
1、Dreamweaver CS6的三种编辑模式，分别是：代码、拆分、设计。
2、网页的基本结构由三部分组成：声明、头部、主体。
（1）网页文档类型声明
使用来声明网页的文档类型，用来告诉浏览器使用什么样的HTML或XHTML规范来解析网页，它存在于页面的第一行，不区分大小写。
（2）网页的头部
：定义文档的头部。标签内包含、（3）网页的主体
：定义网页文档的主体。三、教师演示活动实施过程并让学生完成活动任务
1、依次单击“文件”->“新建”命令，打开“新建文档”对话框，在打开的“新建文档”对话框中选择“空白页”选项卡，在“页面类型”中选择“HTML”，然后单击“创建”按钮，新建一个HTML网页文件。
2、在“文档工具栏”中的“标题”文本框中，将“无标题文档”更改为“我的第一个网页”。
3、在“文档工具栏”中单击“设计”按钮，切换到设计视图模式，在文档窗口中输入“Hello，World！”，然后按回车键，再输入“欢迎光临，这是我的第一个网页！”。
4、依次单击“文件”-> “保存”命令，打开“另存为”对话框，在“文件名”文本框中输入“task1-1-2”，单击“保存”按钮保存网页文件，最后点击“task1-1-2.html”文档标签中的关闭按钮关闭网页文件。
5、在Dreamweaver CS6软件的“欢迎界面”中单击“打开”按钮，打开“打开”对话框，选择“task1-1-2.html”文件，单击“打开”按钮打开该网页文件。（在“文件”面板中展开“站点 – 项目1”，双击“task1-1-2.html”文件名也可以打开该文件。）
6、在“文档工具栏”中单击“在浏览器中预览/调试”工具按钮，在弹出的快
阅读知识窗：DW的三种编辑模式；网页的基本结构
演示：教师演示活动实施过程
实训活动：学生练习及点评
