课 题 教学目标 第三课 开篇之作——基于表格的页面布局 1、【知识与技能：】 （1)、通过学习，能够创建和打开站点，理解站点的意义； (2)、通过操作练习，学会有效的整理和利用素材； (3)、通过操作练习，能够创建网页和合理的选择页面类型； (4)、通过操作练习，掌握对表格属性的相关设置； (5)、学会测试网页。 2、【过程与方法：】 （1）、能通过教师引导、动脑思考、交流与实践操作学习过程，体验和感悟探究的一般过程； （2）、能够仔细倾听同组同学及其他的发言，体验合作学习的过程和方法； （3）、能在学习中，体会网页布局是网页设计的重点之一。 3、【情感态度与价值观：】 （1）通过学习，对比感知自己和好的网页设计者之间的差距，从而激发学习动力； （2）通过本课学习展示自己作品及学生和教师的点评，体验成功的感觉，肯定自己的价值。 教学重、难点 教 学 时 数 教法及教具 重点：能够对表格属性进行熟练的设置。 难点：使能够对表格属性进行熟练的设置。 一课时 教法：讲解，学生练习。 教具：多媒体网络教室 主教案 一、课程导入 一个网站的规划设计完毕了，接下来的工作就是网页设计。我们知道一个网站的首页就像一本书的目录一样，我们做网站也一样，要先把首页确定下来。我看了我们上一周做的网页，有些同学想发挥点创意，但发现页面布局很乱，图片文字乱七八糟堆放在一起。这节课我们就来学学怎样对页面布局进行控制。在这之前我们先来看看别人的首页是怎么做的。（查看事先准备好的示例网页，分析表格在该页的作用） 二、新课讲授 （一）复习创建站点的步骤。 1.在D盘新建一个文件夹，作为站点文件夹。 2.打开Dreamweaver8,单击“站点”菜单下的 “新建站点”命令。 3.新建站点（步骤略，参加课本p12）。 （二）创建网站首页 1．整理素材 （1）右击“文件”面板中站点名“站点-安全自护我能行D:\\safe”，在弹出的快捷菜单中执行“新建文件夹”命令，然后将文件夹命名为images。 （2）将首页素材图片index.gif，复制粘贴到images文件夹中。 （3）在safe文件夹下新建一文件夹other，将flash动画素材整理到other文件夹中。
9
副教案 2.创建并保存首页 （1）单击 “文件”->“新建”命令，选择“常规”，在“基本页”列表框中选择HTML选项，单击 “创建”按钮，即建立了一个空白页。 （2）执行“文件”-> “保存”命令，保存名index.html,默认保存路径是站点的跟目录。注意保存类型选择“html文档”。 （三）对首页进行初步布局 1.为页面添加背景颜色 （1）单击文档窗口，使插入点在编辑区内闪烁，然后单击“属性”栏的“页面属性”按钮。 （2）找到 “背景颜色”选项，输入浅黄色的颜色数值#FFFF94，单击“确定”按钮，背景色设置完成。 2.设置网页标题并预览网页效果。 3.使用表格初步布局网页。 （1）在文档窗口中单击，在页面左上角放置插入点。 （2）执行“插入”->“表格”命令。 （3）在弹出的“表格”对话框中设置一个2行1列的表格，宽度600像素。 （4）单击“标签选择器”中的
| 标签。 c) 选择某一行或某一列：将光标移动到行左侧或列上方，当鼠标指针变为向右或向下的箭头图标时，单击即可。 2) 设置第一行的属性 选中表格的第一行，将高度设为420。和flash的高度一致。 3.插入flash动画 1) 将光标定位在表格第一行中，执行“插入”——》“媒体”——》 11 副教案 Flash命令。 2) 在弹出的对话框中选择other文件夹下的index.swf，单击确定。 3) 观察插入flash的状态，在编辑视图下，flash不可见。 4) 单击选中flash文档，在属性面板设置相关属性：循环、自动播放。预览观察效果。 5) 设置Flash参数，如P23页，图4.6所示。 4.在网页中插入文本 1) 插入普通文本：光标定位在单元格内，直接输入文字。 2) 插入特殊字符：“插入”——》“HTML”——》“特殊网页”。 3) 设置文本属性：根据情况选择合适的格式或文字大小、颜色、对齐方式等。 三、学生练习 学生小组合作完成任务，并将任务上交到教师机。 四、作品评价 对于较快完成任务并且完成任务较好的同学进行表扬鼓励。 五、本课小结 1.熟练对表格的操作，能选择表格的行、列、单元格等。 2.在网页中插入flash可以很好的表现动感。设置flash的相关属性。 3.在网页中插入文本，并设置文本的属性。 课堂小结：教学反思： 强调本课知识点，以加深学生的理解和记忆；总结本课学生的表现。 12 |