配色: 字号:
基于表格的页面布局
2022-03-22 | 阅:  转:  |  分享 
  
课题 第三课 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文件夹中。

2.创建并保存首页

(1)单击“文件”->“新建”命令,选择“常规”,在“基本页”列表框中选择HTML选项,单击“创建”按钮,即建立了一个空白页。

(2)执行“文件”->“保存”命令,保存名index.html,默认保存路径是站点的跟目录。注意保存类型选择“html文档”。

(三)对首页进行初步布局

1.为页面添加背景颜色

(1)单击文档窗口,使插入点在编辑区内闪烁,然后单击“属性”栏的“页面属性”按钮。

(2)找到“背景颜色”选项,输入浅黄色的颜色数值#FFFF94,单击“确定”按钮,背景色设置完成。

2.设置网页标题并预览网页效果。

3.使用表格初步布局网页。

(1)在文档窗口中单击,在页面左上角放置插入点。

(2)执行“插入”->“表格”命令。

(3)在弹出的“表格”对话框中设置一个2行1列的表格,宽度600像素。

(4)单击“标签选择器”中的标签,选中此表格,在属性栏中完成表格的相关设置。具体参数如下:行数:2,列数:1,高度:600像素,宽度600像素,对齐:居中对齐,背景图片:index.gif。

4.测试网页。

三、学生练习

鼓励学生大胆尝试和创新,利用所学的内容,进行创意性发挥。

学生小组合作完成制作一个首页的任务,并将任务上交到教师机。

四、作品评价

调几个优秀作业进行课堂点评,激发学生兴趣。

五、本课小结

1.站点目录结构要清晰,方便管理,素材要按类型分别存放。

2.文档工具栏的使用。

3.使用表格设计网页布局,可以使网页看上去更加整齐。

课堂小结:强调本课知识点,以加深学生的理解和记忆;总结本课学生的表现。

教学反思:







献花(0)
+1
(本文系老马和老马原创)