第3课 开篇之作——基于表格的页面布局 教案

第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.测试网页。 学生练习4：插入表格并设置表格属性，保存首页并测试网页。 三、作业提交 鼓励学生大胆尝试和创新，利用所学的内容，进行创意性发挥。 学生将完成首页的网站，提交到教师机。 作品评价 调几个优秀作业进行课堂点评，激发学生兴趣。 本课小结 1.站点目录结构要清晰，方便管理，素材要按类型分别存放。 2.文档工具栏的使用。 3.使用表格设计网页布局，可以使网页看上去更加整齐。 板书设计 第3课开篇之作———基于表格的页面布局 一、 新建站点 二、 创建网站首页 三、 对网页进行布局：添加背景色，插入表格，并进行属性设置。 四、 测试网页 ... ...