第三章让图片“飞”进我的网页(3.2)教学内容

1、精品文档第三章简单网页的形成课题：让图片“飞”进我的网页（3.2）教学分析与准备1教学任务背景的设置图片的插入图片的简单修改2. 教学重点图片的插入3. 教学难点图片的简单修改4. 教学策略任务驱动学习和协作学习、探究学习相结合5. 教学环境多媒体网络教室6 建议课时数4节三、学习过程教学环节及手段教学内容备注组织课堂：导入新课： 在掌握制作简单的 网页基础上，让网 页效果更个性化， 更漂亮，需要对图 片进行特殊设置， 让它“飞“起来。讲述新课：讲授法师生问好整顿课堂纪律，检查书本情况，准备进入教学。任务让图片“飞”进我的网页一、改变背景【操作步骤】STEP 1鼠标左键单击“格式”菜单，再单击

2、“背 景”，贝U出现“网页属性”窗口的“格式”选项卡。STEP 2在“网页属性”窗口的“格式”选项卡 中修改“背景”的相应选项之后选择“确定”。举例操作讲解演示提示举例操作：例8建立网页Internet应用第3章例题3-8.htm ，练习背景设置方法。具体操作：1单击“新建”按钮，在第一行输入“背景练习 一，保存在文件夹Internet应用第3章例题下，文件名为3-8.htm。在空页面的状态下保存文件，网页文件名默认为“new_page_1，网页标题默认为是“新建网页1”；先输入第一行文字再保存文件，则网页标题默认为是 第一行文字。2 单击“格式”菜单，单击“背景”，选择“格 式”选项卡，“颜

3、色”中“背景”改为蓝色， “文本” 改为黄色，单击“确定”。此时网页背景为蓝色，已输入的文字由原来默认 的黑色变为黄色，再输入新的文字，文字颜色默认为 是黄色。此设置只对本网页起作用。3 将第一行文字设为“居中”、“加粗”，7号字； 在第二行输入文字：练习改变背景颜色和文本颜色。4.保存文件。例9建立网页“Internet应用第3章例题3-9.htm ,练习背景的设置方法。具体操作：1 将3-8.htm另存为“Internet应用第3章例题 3-9.htm”。2. 单击“格式”，单击“背景”，将出现“网页属 性”窗口，选择“格式”选项卡，选择“背景图片”（出 现对勾），单击“浏览”，选择要作为

4、背景的图片 Snoopy.jpg，单击“确定”。3. 键入十二个数112，每个数占一行。4. 将全部文字设置成红色。5. 保存文件。6. 在预览中利用滚动条查看网页效果7. 调出“网页属性”窗口（方法同2）,选择“水 印”（出现对勾），单击“确定”。&在预览中利用滚动条再次查看网页效果。9.保存文件。【注意事项】学生模仿操作学生模仿操作讲授法1 选择“背景图片”后，才能选择“水印”，其作用是在使用滚动条时，文字滚动，但背景不动，在 普通视图中看不到“水印”效果。如在800x600的分辨率下制作网页，选择一幅大小为800x600象素的图片背景为，若文字较长，一屏显示不下，又不使用“水 印”效果，

5、则背景图片将被平铺，影响视觉效果，用 户可在没有“水印”和有“水印”的状态下分别观察 网页，其效果是极为明显的。2.“启用超链接翻转”，可改变链接的效果（参见 3.3） o3 “格式”选项卡的“颜色”中的“背景”可设 置背景颜色（默认背景颜色为白色）；“文本”可设置 文字的颜色（默认文字颜色为黑色）；超链接；已访过 的超链接；当前超链接。4.若插入背景图片，则背景颜色被当住；只有当 背景图片为透明图片或背景图片不能正常显示时，背 景颜色才会显示出来。【使用技巧】1右键单击页面空白处，单击快捷菜单中的“网 页属性”，再选择“格式”选项卡，同样可以对网页的 背景进行编辑设置。2.单击“文件”菜单，

6、单击“属性”，再选择“格 式”选项卡，同样可以对网页的背景进行编辑设置。【学习提示】若想改变网页某段的背景，可利用“格式”菜单 中的“边框与底纹” 。二、插入图片【操作步骤】STEP 1鼠标左键单击“插入”菜单。STEP 2鼠标左键单击“图片”菜单，出现下一 级菜单。STEP 3若选择“剪贴画”，则出现“剪贴画”对 话框，挑选要插入的图片，单击该图片即可；若选择“来自文件”，则出现“图片”对话框，挑 选要插入的图片，单击图片文件名后单击 确疋 按 钮（或双击图片文件名）；若选择“来自扫描仪或照相机”，则要事先连接好 扫描仪或照相机，再根据选项卡选择图片；讲解演示讲解演示若选择“新建图片库”，则

7、出现“图片库属性”对 话框，选择“图片”选项卡，单击“添加”，选择图片 来源，挑选要插入的图片（可以预览缩略图，修改图 片的尺寸），单击图片文件名后单击 确疋 按钮（或 双击图片文件名）；若选择“ Flash影片”，则出现“图片”对话框， 挑选要插入的Flash影片，单击乂件名后单击确定 按钮（或双击文件名）；若选择“绘制新图形”，则出现“绘制画布”窗口， 可以调整画布尺寸，在画布上绘制图形；若选择“自选图形”，则出现“自选图形”窗口， 挑选要插入的图形，在网页上直接绘制；若选择“艺术字”，则出现“艺术字库”对话框， 挑选要插入的艺术字样式， 单击“确定”按钮，在“编 辑艺术字文字”对话框中输

8、入文本文字，单击“确认 按钮”；若选择“视频”，则出现“视频”对话框，挑选要 插入的视频文件，单击视频文件名后单击“确定”按 钮（或双击视频文件名）。例10建立网页“Internet应用第3章例题3-10.htm”，练习插入图片。具体操作：1 单击“新建”按钮，在第一行输入“插入图片练习，保存在文件夹Internet应用第3章例题”下，文件名为3-10.htm。2 单击“格式”，单击“背景”，将“格式”选项 卡中“背景”改为蓝色，“文本”改为黄色，单击“确。3.在第二行单击“插入”，单击“图片”，单击“剪 贴画”，选择某图片，单击该图片插入。4 在第二行继续从“来自文件”中插入图片comput

9、er3.gif。5 将第二行设为“居中”。6.保存文件。例11建立网页“Internet应用第3章例题3-11.htm”，练习图片的定位。具体操作：1.将“Internet应用第3章例题3-10.htm”另存为3-11.htm。学生模仿操作学生模仿操作提示讲授法2将原来的两幅图片删除（单击图片，按键盘的 删除键Delete）。3. 依次插入图片 c1.jpg、c2.jpg、c3.gif。4. 单击图片c1.jpg,鼠标放在图片左上角，按住 左键拖动鼠标，将图片放大到比第二章图片略大一点。5. 单击图片c1.jpg,两次单击图片工具栏中的“下移一层”按钮，再将鼠标放在图片c1.jpg上，则鼠标的

10、图标变成十字形，此时按住左键拖动鼠标，使该图 片放在图片c2.jpg的正后方，保存文件。6. 单击图片c3.gif,单击图片工具栏中的“上移 一层”按钮，调整该图片的位置。7. 保存文件【注意事项】1.例11中的具体操作5中，要两次单击“下移 一层”按钮，是因为它要放在两张图片的下层，也可 通过修改其他图片的层次来实现例11的效果。2 .“插入图片的大小为原图大小，如需修改图片 大小，方法参见3.2.3;3.图片所占容量应尽量小，否则网页在下载时速度会很慢。【使用技巧】1. 插入来自文件的图片时， 可以直接单击图片工 具栏中的“插入文件中的图片”按钮。2. 插入的图片可以是静态的，也可以是动态

11、的。【学习提示】1. 用“插入”菜单中的“图片”“艺术字”来 书与文字，保存网页时，该艺术字会被自动保存为图片文件。利用这种方法，可以打破网页中字号最大为 7 号的限制，可以增加处理文字的效果。2. 插入的“视频”通常会比较大，将大大降低网 页下载的速度，要慎重使用。三、修改图片【操作步骤】STEP 1鼠标右键单击图片，出现快捷菜单。STEP 2鼠标左键单击“图片属性”，则出现含有 三个选项卡的“图片属性”对话框。STEP 3根据需要改变“图片属性”对话框中的 参数，单击“确定”，即可得到想要的效果。讲解演示常规选项卡（1 ）图片源：确定被插入图片的位置和文件名称。（2）图片文件类型：确定图片

12、的属性。（3）可选外观：低分辨率时用另一幅图片替代该 图片显示，鼠标悬停时显示文本内容。（4）默认超链接：该图片可设置链接。 视频选项卡（1）视频源：确定被插入视频的位置和文件名称。（2）重复：可以控制视频是否循环播放、循环播 放几次、循环延迟的时间。（3）开始：可以确定视频被播放的方式（打开文 件时即自动播放、鼠标悬停时播放）。外观选项卡（1）环绕样式：可以设置图片与文字网页中的位护方 .置丿C糸。（2）布局：可以设置对齐方式、边框粗细（数字 越小边框越细，0为不显示边框）、水平间距、垂直间 距。（3）大小：指定大小时可以以象素为单位，也可 以指定占屏幕的百分比；如不选择保持纵横比，则可 随

13、意修改图片的宽度和高度，但容易失真。例12建立网页Internet应用第3章例题3-12.htm”，练习图片的修改。具体操作：1. 将“ Internet应用第3章例题3-10.htm” 另存为3-13.htm，网页标题改为修改图片”。2. 将原来第一行的“插入图片练习”改为“修改 图片练习”，并将字体颜色改为蓝色。3. 插入背景图片：单击“格式”菜单，单击“背 景”,选择“背景图片”为 snoopy.gif，单击“确定”。4背景的冲蚀效果：鼠标单击页面的空白处，单 击图片工具栏上的“颜色”按钮，选择“冲蚀”效果。5将左边图片的背景设为透明：单击左边图片， 单击图片工具栏上的“设置透明色”按钮

14、，单击左边 图片中的白色部分。6. 翻转图片：单击左边图片，单击图片工具栏上 的“水平翻转”按钮。7. 给右边的图片加一些文字：单击右边图片，单 击图片工具栏上的“文本”按钮，在出现的文本框中学生模仿操作提示输入“ hello”，利用鼠标的拖动，调整文本框的位置， 选择输入的文字，设置为红色。8.保存文件【注意事项】1.若想对背景图片进行修改，必须将光标放在页 面的空白处；若想对插入的图片进行修改，必须先选 定(单击)该图片。2对于插入的静态图片，可修改的属性较多；对 于插入的动态图片，图片的很多属性是不能在此更改 的(图片工具栏中的按钮为灰色，不能使用)。【使用技巧】1. 改变图片大小的快捷

15、方式：鼠标左键单击图片， 则图片上出现八个点(左上，上，右上，右，右下，下，左下，左)，鼠标左键按住某点拖动，就可以改变 图片的大小，松开鼠标左键，图片大小即可固定。2. 改变图片位置的快捷方式：鼠标左键单击图片， 点击“上移一层”或“下移一层”按钮，然后用鼠标左键拖动图片至理想的位置。【学习提示】1.对于静态图片，在 Fron tPage 2003中提供的修 改方式比较有限，若想得到更好的效果，应使用专门 的图片处理软件制作或修改好图片后，再插入到网页 中。2 .对于动态图片，在 Fron tPage 2003中提供的修 改方式非常少，若想得到良好的效果，通常需要制作 动画软件的大力支持。向学生总结课堂重难点知识，总结学习任务的完 成情况。鼓励学生总结课下任务拓展：【修改任务一】1基本要求：(1) 给各网页设置背景颜色。(2) 在各网页中插入图片。相关例题请查阅“任务一样例”文件夹中的样例1-1。2.一般要求：(