《第三章 让图片“飞”进我的网页(3.2)(9页).doc》由会员分享，可在线阅读，更多相关《第三章 让图片“飞”进我的网页(3.2)(9页).doc（9页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、-第三章 让图片“飞”进我的网页(3.2)-第 9 页第三章 简单网页的形成课题：让图片“飞”进我的网页（3.2）教学分析与准备1教学任务背景的设置图片的插入图片的简单修改2. 教学重点图片的插入3. 教学难点图片的简单修改4. 教学策略任务驱动学习和协作学习、探究学习相结合5. 教学环境多媒体网络教室6建议课时数4节三、学习过程教学环节及手段教学内容备注组织课堂：导入新课：在掌握制作简单的网页基础上，让网页效果更个性化，更漂亮，需要对图片进行特殊设置，让它“飞“起来。讲述新课：讲授法举例操作讲解演示提示讲授法讲解演示讲解演示提示讲授法讲解演示提示师生问好整顿课堂纪律，检查书本情况，准备进入教
2、学。任务 让图片“飞”进我的网页一、 改变背景【操作步骤】STEP 1 鼠标左键单击“格式”菜单，再单击“背景”，则出现“网页属性”窗口的“格式”选项卡。STEP 2 在“网页属性”窗口的“格式”选项卡中修改“背景”的相应选项之后选择“确定”。举例操作：例8 建立网页“c:Internet应用第3章例题3-8.htm”，练习背景设置方法。具体操作：1单击“新建”按钮，在第一行输入“背景练习一”，保存在文件夹“c:Internet应用第3章例题”下，文件名为3-8.htm。 在空页面的状态下保存文件，网页文件名默认为“new_page_1”，网页标题默认为是“新建网页 1”；先输入第一行文字再保
3、存文件，则网页标题默认为是第一行文字。2单击“格式”菜单，单击“背景”，选择“格式”选项卡，“颜色”中“背景”改为蓝色，“文本”改为黄色，单击“确定”。此时网页背景为蓝色，已输入的文字由原来默认的黑色变为黄色，再输入新的文字，文字颜色默认为是黄色。此设置只对本网页起作用。3将第一行文字设为“居中”、“加粗”，7号字；在第二行输入文字：练习改变背景颜色和文本颜色。4保存文件。例9 建立网页“c:Internet应用第3章例题3-9.htm”，练习背景的设置方法。具体操作：1将3-8.htm另存为“c:Internet应用第3章例题3-9.htm”。2单击“格式”，单击“背景”，将出现“网页属性”
4、窗口，选择“格式”选项卡，选择“背景图片”（出现对勾），单击“浏览”，选择要作为背景的图片Snoopy.jpg，单击“确定”。3键入十二个数112，每个数占一行。4将全部文字设置成红色。5保存文件。6在预览中利用滚动条查看网页效果7调出“网页属性”窗口（方法同2），选择“水印”（出现对勾），单击“确定”。8在预览中利用滚动条再次查看网页效果。9保存文件。【注意事项】1选择“背景图片”后，才能选择“水印”，其作用是在使用滚动条时，文字滚动，但背景不动，在普通视图中看不到“水印”效果。如在800x600的分辨率下制作网页，选择一幅大小为800x600象素的图片背景为，若文字较长，一屏显示不下，又不
5、使用“水印”效果，则背景图片将被平铺，影响视觉效果，用户可在没有“水印”和有“水印”的状态下分别观察网页，其效果是极为明显的。2“启用超链接翻转”，可改变链接的效果（参见3.3）。3“格式”选项卡的“颜色”中的“背景”可设置背景颜色（默认背景颜色为白色）；“文本”可设置文字的颜色（默认文字颜色为黑色）；超链接；已访过的超链接；当前超链接。4若插入背景图片，则背景颜色被当住；只有当背景图片为透明图片或背景图片不能正常显示时，背景颜色才会显示出来。【使用技巧】1右键单击页面空白处，单击快捷菜单中的“网页属性”，再选择“格式”选项卡，同样可以对网页的背景进行编辑设置。 2单击“文件”菜单，单击“属性
6、”，再选择“格式”选项卡，同样可以对网页的背景进行编辑设置。【学习提示】若想改变网页某段的背景，可利用“格式”菜单中的“边框与底纹”。二、 插入图片【操作步骤】STEP 1 鼠标左键单击“插入”菜单。STEP 2 鼠标左键单击“图片”菜单，出现下一级菜单。STEP 3 若选择“剪贴画”，则出现“剪贴画”对话框，挑选要插入的图片，单击该图片即可；若选择“来自文件”，则出现“图片”对话框，挑选要插入的图片，单击图片文件名后单击“确定”按钮（或双击图片文件名）；若选择“来自扫描仪或照相机”，则要事先连接好扫描仪或照相机，再根据选项卡选择图片；若选择“新建图片库”，则出现“图片库属性”对话框，选择“图
7、片”选项卡，单击“添加”，选择图片来源，挑选要插入的图片（可以预览缩略图，修改图片的尺寸），单击图片文件名后单击“确定”按钮（或双击图片文件名）； 若选择“Flash影片”，则出现“图片”对话框，挑选要插入的Flash影片，单击文件名后单击“确定”按钮（或双击文件名）；若选择“绘制新图形”，则出现“绘制画布”窗口，可以调整画布尺寸，在画布上绘制图形；若选择“自选图形”，则出现“自选图形”窗口，挑选要插入的图形，在网页上直接绘制；若选择“艺术字”，则出现“艺术字库”对话框，挑选要插入的艺术字样式，单击 “确定”按钮，在“编辑艺术字文字”对话框中输入文本文字，单击“确认按钮”；若选择“视频”，则出
8、现“视频”对话框，挑选要插入的视频文件，单击视频文件名后单击“确定”按钮（或双击视频文件名）。例10 建立网页“c:Internet应用第3章例题3-10.htm”，练习插入图片。具体操作：1单击“新建”按钮，在第一行输入“插入图片练习”，保存在文件夹“c:Internet应用第3章例题”下，文件名为3-10.htm。2单击“格式”，单击“背景”，将“格式”选项卡中“背景”改为蓝色，“文本”改为黄色，单击“确定”。3在第二行单击“插入”，单击“图片”，单击“剪贴画”，选择某图片，单击该图片插入。4在第二行继续从“来自文件”中插入图片computer3.gif。5将第二行设为“居中”。6保存文件
9、。例11 建立网页“c:Internet应用第3章例题3-11.htm”，练习图片的定位。具体操作：1将“c: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上，则鼠标的图标变成十字形，此时按住左键拖动鼠标，使该图片放在图片c2.jpg的正后方，保存文件。6单击图片c
10、3.gif，单击图片工具栏中的“上移一层”按钮，调整该图片的位置。7保存文件【注意事项】1例11中的具体操作5中，要两次单击“下移一层”按钮，是因为它要放在两张图片的下层，也可通过修改其他图片的层次来实现例11的效果。2“插入图片的大小为原图大小，如需修改图片大小，方法参见3.2.3；3图片所占容量应尽量小，否则网页在下载时速度会很慢。【使用技巧】1插入来自文件的图片时，可以直接单击图片工具栏中的“插入文件中的图片”按钮。2插入的图片可以是静态的，也可以是动态的。【学习提示】1用“插入”菜单中的“图片”“艺术字”来书写文字，保存网页时，该艺术字会被自动保存为图片文件。利用这种方法，可以打破网页
11、中字号最大为7号的限制，可以增加处理文字的效果。2插入的“视频”通常会比较大，将大大降低网页下载的速度，要慎重使用。三、 修改图片【操作步骤】STEP 1 鼠标右键单击图片，出现快捷菜单。STEP 2 鼠标左键单击“图片属性”，则出现含有三个选项卡的“图片属性”对话框。STEP 3 根据需要改变“图片属性”对话框中的参数，单击“确定”，即可得到想要的效果。l 常规选项卡（1）图片源：确定被插入图片的位置和文件名称。（2）图片文件类型：确定图片的属性。（3）可选外观：低分辨率时用另一幅图片替代该图片显示，鼠标悬停时显示文本内容。（4）默认超链接：该图片可设置链接。l 视频选项卡（1）视频源：确定
12、被插入视频的位置和文件名称。（2）重复：可以控制视频是否循环播放、循环播放几次、循环延迟的时间。（3）开始：可以确定视频被播放的方式（打开文件时即自动播放、鼠标悬停时播放）。l 外观选项卡（1）环绕样式：可以设置图片与文字网页中的位置关系。（2）布局：可以设置对齐方式、边框粗细（数字越小边框越细，0为不显示边框）、水平间距、垂直间距。（3）大小：指定大小时可以以象素为单位，也可以指定占屏幕的百分比；如不选择保持纵横比，则可随意修改图片的宽度和高度，但容易失真。例12 建立网页“c:Internet应用第3章例题3-12.htm”，练习图片的修改。具体操作：1将“c:Internet应用第3章例
13、题3-10.htm”另存为3-13.htm，网页标题改为“修改图片”。2将原来第一行的“插入图片练习”改为“修改图片练习”，并将字体颜色改为蓝色。3插入背景图片：单击“格式”菜单，单击“背景”，选择“背景图片”为snoopy.gif，单击“确定”。4背景的冲蚀效果：鼠标单击页面的空白处，单击图片工具栏上的“颜色”按钮，选择“冲蚀”效果。5将左边图片的背景设为透明：单击左边图片，单击图片工具栏上的“设置透明色”按钮，单击左边图片中的白色部分。6翻转图片：单击左边图片，单击图片工具栏上的“水平翻转”按钮。7给右边的图片加一些文字：单击右边图片，单击图片工具栏上的“文本”按钮，在出现的文本框中输入“
14、hello”，利用鼠标的拖动，调整文本框的位置，选择输入的文字，设置为红色。8保存文件【注意事项】1若想对背景图片进行修改，必须将光标放在页面的空白处；若想对插入的图片进行修改，必须先选定（单击）该图片。2对于插入的静态图片，可修改的属性较多；对于插入的动态图片，图片的很多属性是不能在此更改的（图片工具栏中的按钮为灰色，不能使用）。【使用技巧】1改变图片大小的快捷方式：鼠标左键单击图片，则图片上出现八个点（左上，上，右上，右，右下，下，左下，左），鼠标左键按住某点拖动，就可以改变图片的大小，松开鼠标左键，图片大小即可固定。2改变图片位置的快捷方式：鼠标左键单击图片，点击“上移一层”或“下移一层
15、”按钮，然后用鼠标左键拖动图片至理想的位置。【学习提示】1对于静态图片，在FrontPage 2003中提供的修改方式比较有限，若想得到更好的效果，应使用专门的图片处理软件制作或修改好图片后，再插入到网页中。2对于动态图片，在FrontPage 2003中提供的修改方式非常少，若想得到良好的效果，通常需要制作动画软件的大力支持。向学生总结课堂重难点知识，总结学习任务的完成情况。学生模仿操作学生模仿操作学生模仿操作学生模仿操作学生模仿操作鼓励学生总结课下任务拓展：【修改任务一】1基本要求：（1）给各网页设置背景颜色。（2）在各网页中插入图片。相关例题请查阅“任务一样例”文件夹中的样例1-1。2一般要求：（1）给各网页设置合适的背景颜色或背景图片。（2）在各网页中插入图片，并根据需要对图片进行简单的修改（如修改图片大小、图片翻转、黑白模式、设置透明颜色等）。相关例题请查阅“任务一样例”文件夹中的样例1-2。3较高要求：（1）给各网页设置合适的背景颜色或背景图片，恰当地使用背景的各个属性。（2）在各网页中插入图片，并根据需要对图片进行较复杂的组合与修改（如图片的叠加、鼠标悬停时出现注释等）。相关例题请查阅“任务一样例”文件夹中的样例1-3。