《使用背景图片和音乐美化网页》教学设计

2024-06-21

《使用背景图片和音乐美化网页》教学设计（精选3篇）

1.《使用背景图片和音乐美化网页》教学设计篇一

第4课网页的美化

一、教材分析

1、本课的作用和地位

本课是青岛版《初中信息技术》八年级上册第1单元网站设计与制作的第4课。

2、本课主要内容

本课主要是内容是介绍了美化网页的常用方法，以及如何设置网页的背景、音乐、如何插入Flash动画和滚动字幕。

3、教学目标知识目标：

了解美化网页的常用方法，理解美化网页对提高网站质量的作用。技能目标：

学会在网页中设置背景、音乐、Flash动画和滚动字幕。情感、态度与价值观目标：

提高审美意识，善于发现美，美化生活从自身做起。重点、难点：

重点：设置背景、音乐、Flash动画和滚动字幕

难点：网页和表格的背景设置、Flash动画的插入及保存

二、学情分析

本课内容为八年级上册，在此之前学生已学过有关Windows、Word等软件的操作，学生对计算机的基本操作有了一定的感性认识，对进一步学习FrontPage有一定的操作基础。再加上FrontPage2000采用了与Word等其他Office软件相类似的界面，因此对FrontPage2000的操作会有一种似曾相识的感觉，这种知识迁移对后续的学习非常有利。

三、教学策略

通过恰当的情境导入新课，将本课内容分解成若干个任务，通过学生分组合作、自主探究，来掌握网页美化的方法、学会如何在网页中设置背景、音乐、Flash动画和滚动字幕，并通过对优秀学生作品的展示、点评来增强学生的成功意识，调动学生的学习积极性。

四、学时安排本节课用1课时

五、教学准备

多媒体教学课件、投影机、网络课室

六、教学过程

１、情景导入，激发兴趣

前面我们学习了制作网页的一些基本方法，请同学们仔细观察下面这两个页面哪一个更漂亮呢？„„。

展示两个网页，让学生观察第二个网页同第一个网页相比有哪些不同？生回答。

教师小结引出新课内容：这第一个网页是我们上一节课同学们提交的作业，第二个网页是经过修饰过的网页，刚才同学们都把这些修饰过的地方找了出来，并且也看到了它们的效果，那同学们想不想知道这些修饰是如何来实现的吗？

生答（想）

那好，今天我们就来学习第4课网页的美化。

[设计意图：通过展示、对比这两个网页，让学生感到原来网页还可以做的更好！不仅可以吸引学生的注意力，激发学生的学习兴趣,而且更能使学生看后跃跃欲试，期待能创作出更好的网页来展示自己的才华。] ２、摄入新知，培养能力这一课的教学内容和操作与我们以前学过的word、excel的相关内容基本相同，因此，我们采用由同学们自主探究来完成任务的方法来学习。我们把全班同学按座次分为五个学习小组，A、B、C、D、E组，每个小组探讨一个任务，看哪个小组的任务完成的又快又好。

（课件展示）

任务1：如何设置网页的背景？任务2：如何设置表格的背景？任务3：如何插入背景音乐？任务4：如何插入Flash动画？任务5：如何插入滚动字幕？

请同学们启动FrontPage2000，打开Ｄ:情感小屋站点，打开“我就是我.htm”网页，按照“本课任务”里面的具体要求，对照课本，合作学习，探究完成任务的方法。然后每个小组派代表为同学们做示范。

教师巡视，个别辅导。

每小组的学生代表为同学作示范。教师讲评，学生评价。学生自主操作完成任务。

[设计意图：通过“提出任务——合作探究——完成任务——学生示范——老师指导——学生练习——展示作品——学生评价”的学习方法，强调自主探索与合作学习，调动学生的学习积极性，增强学生的成功意识，并让学生学会评价作品。]

3、练习提高，拓展延伸

拓展任务：发挥你的想象力，进一步对“我就是我.htm”网页进行美化，完成后提交作业。

[设计意图：通过拓展任务，可以使学生运用所学的知识，充分发挥自己的想像力，创作出更多、更好的作品。]

4、巩固提高、归纳总结

通过课件一起回顾本节课学到的知识点。

通过今天的学习，我们学会了FrontPage美化网页的基本方法，但网页美化的过程远远没有结束，要想做出精美的网页我们还需要认真的学习和加倍的努力。我相信只要大家用心去学、去做，一定能做出有个性的网站的！

七、教学反思

本课的教学内容和操作与我们以前学过的word、excel的相关内容基本相同，因此，我们采用了自主探究和任务驱动的方法来进行教学。老师提供“半成品”（一个还未完成的网页），分组让学生设置网页背景、表格背景，插入背景音乐、FLASH动画、滚动字幕。在学习操作技术的同时，要让学生明白网页背景、表格背景的设置区别，注意设置的背景、插入的音乐、滚动字幕要与整个网页的主题、布局和谐统一。

2.《使用背景图片和音乐美化网页》教学设计篇二

浏览网页已经是现代社会人们生活中的一个重要组成部分, 网页作为网络信息传播的主要载体, 其设计也被大家所关注。网页设计的软件有多种, Dreamweaver是著名的“所见即所得”的可视化网站开发工具, 是国内外普遍应用的专用网页设计软件。它被称为“织梦者”, 即它的英文单词所表达的意思。Dreamweaver不仅提供了强大的网页编辑功能, 而且提供了完善的站点管理机制。它是一个集网页创作和站点管理两大利器于一身的超重量级创作工具。

网页设计的重点是版面的设计, 即如何将所有的素材按照设计要求精美地罗列在页面中。所以, 如何排版成为网页设计中的关键。

2 使用表格和层排版

在Dreamweaver网页设计中, 排版的方法有很多种, 其中使用表格和层排版是基本的方法, 通过设计模式可以轻松完成, 简单易学, 是大家常用的方法, 对网页排版起到了重要的作用。

2.1 表格排版

在制作网页时, 要想将文本、图片等组织得美观, 有条理, 就需要排版人员头脑里有一个整体布局的概念。在Dreamweaver中, 安排页面内容布局主要是依靠表格来完成的。通过表格的相互嵌套和合并、拆分, 可以将自己的构思完整地表现出来。表格是网页设计制作时不可缺少的重要元素, 它以简洁明了和高效快捷的方式将数据、文本、图片、表单等元素有序地显示在页面上, 从而设计出版式漂亮的页面。使用表格排版的页面, 在不同平台、不同分辨率的浏览器里都能保持其原有的布局, 且在不同的浏览器平台有较好的兼容性, 所以表格是网页中最常用的排版方式之一。

表格排版比较规范, 整体性强, 一般的网页排版中都会使用表格进行整体的排版, 但其表现比较中规中矩, 不会有太多其他的丰富功能。

2.2 层排版

层是CSS中的定位技术, 在Dreamweaver中可对其可视化操作。文本、图像、表格等元素只能固定其位置, 不能相互叠加在一起, 使用层功能, 可以将其放置在网页文档内的任何一个位置, 还可以按顺序排放网页文档中的其他构成元素。层体现了网页技术从二维空间向三维空间的一种延伸。

层具有很多表格所不具备的特点, 比如可以重叠, 便于移动, 可设为隐藏, 还能为层添加一些行为, 使页面具有更丰富的变化等。这些特点有助于设计思维不受局限, 从而发挥更多的想象力。由于它是一种新的CSS定位技术, 层在具有上述优点的同时, 也存在着一些不可避免的缺陷, 比如兼容性、定位问题。所以, 目前比较大型的网站不会单独使用层来排版。

2.3 层转换成表格排版

前面提到, 层与表格都可以用来在页面中定位其他对象, 它们有时可以互相取代, 但两者并不完全相同, 有时就必须使用其中的一种。比如, 当需要用到表格来排版页面, 但又觉得表格的添加比较烦琐, 而层比较灵活, 这时候, 排版者可以使用层到表格的转换来实现。具体的操作步骤是: (1) 首先在层面板中勾选“防止重叠”选项, 这样绘制层的时候就不会出现叠加和嵌套的现象; (2) 在页面中绘制若干个层, 把页面中的各元素添加到层里面; (3) 把每个层自由地排列到页面中各个相应的位置; (4) 使用层排版结束之后, 要将层排版转化为表格排版, 选择“修改”—“转换”—“层到表格”命令, 在对话框中设置好相应的参数, 确定之后层就会转换成对应的表格。

这种排版方法在排列对象时比较灵活一点, 但有时也会产生一些多余的单元格。当然, 这种方法一般适用于不太复杂的页面的排版, 对于比较复杂的图文混排页面, 最好还是采用传统的表格排版方法。

3 排版时容易出现的问题及解决方法

3.1 整体表格排版出现的问题

有很多人在网页中用表格排版时习惯使用一个大表格, 然后在大表格中嵌入一个个小表格, 认为这保持了排版的整体性, 其实这个习惯是不好的。一个大而长的表格在浏览器中打开时会加重浏览器的负担, 浏览器一般是等待整个表格的内容都接收到以后才显示这个表格的内容, 如果一个很长的页面使用一个大表格排版, 那么这个网页显示速度就会比较慢, 使得页面呈现的时间大大加长, 很多时候有些网页的访问者会失去等待的耐心而放弃浏览这个网页。

解决的方法是:拆分表格, 将大表格化整为零, 把表格打散, 并要尽可能地避免表格的层层嵌套。注意, 拆分后的表格的宽度要设置为相等, 这样表格的排版效果和拆分前相比并没有改变, 在浏览器中呈现时, 页面会从上至下一个个表格呈现出来, 明显加快了页面打开的速度。

3.2 层排版出现位置偏差

在页面中使用表格和层混合排版时, 先加入表格进行页面的整体布局, 然后在局部加入层。通常情况下, 层加入到页面中之后是游离在表格之上的, 它虽然移动方便, 但在页面中的位置是固定的, 由于表格的宽度是固定像素, 设置在窗口中居中显示, 所以当窗口变大时, 表格会产生一个相对位移, 但是层却还在原位, 没有跟着相对位移, 因而出现层与表格中其他内容位置上的偏差。所以, 层排版的灵活性同样也体现了一定的不稳定性。

要想办法使层与页面中其他元素一样, 能够随浏览器的变化而产生相对位置上的变化, 排版者可以将层嵌入到表格的单元格中, 使层成为单元格中的一个元素, 就像插入到单元格中的文本、图片一样, 层就是属于单元格中的对象, 当浏览器窗口大小变化时, 表格必然会产生相对的变化, 层也就会随着单元格的位置变化而产生相应的变化, 这样就不会出现页面中元素相对位置的偏差。整个排版会变得很规范, 就相当于是利用表格整体排版, 层只是嵌入到单元格中的一个元素, 又可以使用到层的丰富功能, 两全其美。

解决的方法是:先使用表格对整个网页的整体进行规划, 然后添加一个层到表格中的某个单元格中。添加的方法:直接将工具栏中的层拖动到单元格中, 这样该层就成为该单元格的嵌入层, 该层在单元格中默认是靠左对齐, 垂直方向居中, 而且在水平方向是不能移动的, 只要移动便会脱离该单元格, 即成为普通层, 不会是单元格的嵌入对象, 如果在水平方向一定要移动的话, 可以将该单元格的位置进行调整, 进而单元格中的嵌入层也会随之移动。而在垂直方向上的位置是可以调整的, 不过不要用鼠标拖动, 这样容易使层脱离单元格, 可以选中层通过方向箭上下移动或将该单元格垂直方向上的位置由“居中”改为“顶端”或“底端”。

采用这种方法设置层后, 无论窗口大小怎么变化, 层始终是跟着单元格位置变化而变化, 因而不会出现之前那种位置上的偏差。

这个问题解决之后, 接下来就可以在页面中利用层的一些行为来丰富页面。

4 结语

总之, 网页设计中, 内容虽然很重要, 但是如果只有好的内容而没有精美的排版以及合理的布局, 那么再好的内容也很难引起浏览者的阅读浏览兴趣。通过合理的、有新意的页面布局, 特别是主页设计, 才可以将网页的内容完美地呈现在浏览者面前。所以, 排版者在平时要多参考他人优秀的网页排版作品, 加强排版练习, 这样才可能创造更漂亮的网页排版。

参考文献

[1]李爱军.网页的排版布局[J].办公自动化:综合版, 2009 (7) :29-30.

[2]艺博, 张明真.网页设计与制作——Macromedia Dreamweaver 8[M].北京:高等教育出版社, 2007.