第3课 开篇之作——基于表格的页面布局 教案
文档属性
| 名称 | 第3课 开篇之作——基于表格的页面布局 教案 |  | |
| 格式 | zip | ||
| 文件大小 | 117.9KB | ||
| 资源类型 | 教案 | ||
| 版本资源 | 清华大学版 | ||
| 科目 | 信息技术（信息科技） | ||
| 更新时间 | 2017-06-01 20:15:04 | ||
图片预览
文档简介
第3课
开篇之作——基于表格的页面布局
教案
教学目标
【知识与技能：】
(1)、通过学习，能够创建和打开站点，学会有效的整理和利用素材；
(2)、通过操作练习，能够创建网页和合理的选择页面类型；并对表格属性的相关设置；
(3)、学会测试网页。
【过程与方法：】
能通过教师引导、动脑思考、交流与实践操作学习过程，感悟表格对网页布局的重要作用。
【情感态度与价值观：】
通过本课学习设计网页布局，体验成功的喜悦，肯定自己的价值。
教学重点：
能够对表格属性进行熟练的设置。
教学难点：
使能够对表格属性进行熟练的设置。
教学课时：
一课时
教具准备：
多媒体网络教室，Dreamweaver8.0软件和相关的素材。
教法与学法：
示范讲解，任务驱动，学生操作练习。
教学过程：
一、课程导入
一个网站的规划设计完毕了，接下来的工作就是网页设计。我们知道一个网站的首页就像一本书的目录一样，我们做网站也一样，要先把首页确定下来。这节课我们就来学学怎样对页面布局进行控制。
二、新课讲授
（一）复习创建站点的步骤。
1.在桌面新建一个以自己姓名为命名的文件夹，作为站点文件夹，并打开这个文件夹，在里面新建两个文件夹，分别命名为“images”和“other”。
2.打开Dreamweaver8,单击“站点”菜单下的“新建站点”命令。 3.新建站点——“高级”选项卡，输入站点名称，选择站点根文件夹和默认图像文件夹。
(二)创建网站首页
1．整理素材
(1)返回到桌面，打开站点文件夹
(2)将桌面上“老师文件”中的首页素材图片index.gif，复制粘贴到images文件夹中。
(3)将桌面上“老师文件”中的首页影片素材index.swf，复制粘贴到other文件夹中。 学生练习1：
1在桌面新建一个以自己姓名为命名的文件夹，并在里面新建两个文件夹，分别命名为“images”和“other”,并整理素材。 2启动Dreamweaver8.0，新建站点。
2.创建并保存首页
(1)在“文件面板”，右击“站点”，在弹出的快捷菜单中选择“新建文件”命令，建立了一个空白页，并命名为index.html。
学生练习
2：在站点根目录下新建首页index.html
(三)对首页进行初步布局
1.为页面添加背景颜色
（1）单击文档窗口，使插入点在编辑区内闪烁，然后单击“属性”栏的“页面属性”按钮。
（2）找到“背景颜色”选项，输入浅黄色的颜色数值#FFFF94，单击“确定”按钮，背景色设置完成。
2.设置网页标题并预览网页效果。
学生练习
3：在首页中，设置背景颜色，选自己喜欢的一种颜色，并输入网页标题。
3.使用表格初步布局网页。
（1）在文档窗口中单击，在页面左上角放置插入点。
（2）执行“插入”->“表格”命令。
（3）在弹出的“表格”对话框中设置一个2行1列的表格，宽度600像素。
（4）单击“标签选择器”中的标签，选中此表格，在属性栏中完成表格的相关设置。具体参数如下：行数：2，列数：1，高度：600像素，宽度600像素，对齐：居中对齐，背景图片：index.gif。 4.测试网页。
开篇之作——基于表格的页面布局
教案
教学目标
【知识与技能：】
(1)、通过学习，能够创建和打开站点，学会有效的整理和利用素材；
(2)、通过操作练习，能够创建网页和合理的选择页面类型；并对表格属性的相关设置；
(3)、学会测试网页。
【过程与方法：】
能通过教师引导、动脑思考、交流与实践操作学习过程，感悟表格对网页布局的重要作用。
【情感态度与价值观：】
通过本课学习设计网页布局，体验成功的喜悦，肯定自己的价值。
教学重点：
能够对表格属性进行熟练的设置。
教学难点：
使能够对表格属性进行熟练的设置。
教学课时：
一课时
教具准备：
多媒体网络教室，Dreamweaver8.0软件和相关的素材。
教法与学法：
示范讲解，任务驱动，学生操作练习。
教学过程：
一、课程导入
一个网站的规划设计完毕了，接下来的工作就是网页设计。我们知道一个网站的首页就像一本书的目录一样，我们做网站也一样，要先把首页确定下来。这节课我们就来学学怎样对页面布局进行控制。
二、新课讲授
（一）复习创建站点的步骤。
1.在桌面新建一个以自己姓名为命名的文件夹，作为站点文件夹，并打开这个文件夹，在里面新建两个文件夹，分别命名为“images”和“other”。
2.打开Dreamweaver8,单击“站点”菜单下的“新建站点”命令。 3.新建站点——“高级”选项卡，输入站点名称，选择站点根文件夹和默认图像文件夹。
(二)创建网站首页
1．整理素材
(1)返回到桌面，打开站点文件夹
(2)将桌面上“老师文件”中的首页素材图片index.gif，复制粘贴到images文件夹中。
(3)将桌面上“老师文件”中的首页影片素材index.swf，复制粘贴到other文件夹中。 学生练习1：
1在桌面新建一个以自己姓名为命名的文件夹，并在里面新建两个文件夹，分别命名为“images”和“other”,并整理素材。 2启动Dreamweaver8.0，新建站点。
2.创建并保存首页
(1)在“文件面板”，右击“站点”，在弹出的快捷菜单中选择“新建文件”命令，建立了一个空白页，并命名为index.html。
学生练习
2：在站点根目录下新建首页index.html
(三)对首页进行初步布局
1.为页面添加背景颜色
（1）单击文档窗口，使插入点在编辑区内闪烁，然后单击“属性”栏的“页面属性”按钮。
（2）找到“背景颜色”选项，输入浅黄色的颜色数值#FFFF94，单击“确定”按钮，背景色设置完成。
2.设置网页标题并预览网页效果。
学生练习
3：在首页中，设置背景颜色，选自己喜欢的一种颜色，并输入网页标题。
3.使用表格初步布局网页。
（1）在文档窗口中单击，在页面左上角放置插入点。
（2）执行“插入”->“表格”命令。
（3）在弹出的“表格”对话框中设置一个2行1列的表格，宽度600像素。
（4）单击“标签选择器”中的