第三节制作网站首页 ppt课件+教案+视频-2023新粤教B版八年级上册《信息技术》.rar

粤教版信息技术九年级上第三节制作网站首页教学设计粤教版信息技术九年级上第三节制作网站首页教学设计课题 第三节 制作网站首页第三节 制作网站首页单元第二单元学科信息技术年级九年级学习目标知识目标：了解用表格进行版面布局及网页中的元素。技能目标：理解添加网页元素的方法；掌握为网页设置超链接。情感目标：善于上网查询资料，增强学习能力。重点理解添加网页元素的方法；难点掌握为网页设置超链接。教学过程教学环节教师活动学生活动设计意图导入新课网站需要什么样式，才能吸引更多的人浏览，要先做什么后做什么才能提高工作效率呢?观看图中网站首页，你有哪些启发？今天我们来解决这个问题。思考 激发学生学习兴趣并快速进入学习状态讲授新课 问题：(1)网页中一般有哪些元素?(2)首页要没置什么内容?(3)制作网页的一般步骤是什么?首页是网站的“脸面”，能不能吸引访问者的注意，它显得尤为重要。因而，在设计制作首页时需要特别花心思。任务在 Frontpage 中打开“班级网站”范例的首页，如图所示，仔细揣摩该网页，并制作好班级网站首页。网页中其版面可划分为标题区、主要内容区、页尾区三大区域。标题区突出网站的主题和导航条;主要内容区放置各种网页元素，可根据内容的设计划分不同的板块;页尾区一般提供网站的版权信息和制作团体的联系方式。一、用表格进行版面布局一、用表格进行版面布局网页制作中使用表格划分版面，确定各种网页元素的版面位置。如图所示。再把不同层的表格框线设置为不同的颜色，得到如图所示的表格布局结构。不难看出，我们可以通过多层嵌套的表格进行版面划分。构建方法如下：(1)在网页编辑区插入最外层的 4 行 1 列表格，单击鼠标右键，打开“表格属性”窗口(如图所示)，设定表格宽度为 760 像素。(2)从外到内分割版面，插入各层表格，再根据需要设定表格的高度和宽度。实践：查看班级网站首页的各层表格、单元格属性，说说指定表格宽度时定义像素与百分比有何不同，如何对表格的大小进行精确的定义。设置表格的宽度有两种单位：百分比是相对宽度,像素是绝对宽度。网页中对表格大小精确定义用像素。二、添加网页元素二、添加网页元素版面区域划分好以后，就可以在相应区域填充内容，如添加文字图片、动画等网页元素1.插入文字插入文字可以采用输入，或复制、粘贴从已有素材中提取文字的方法，来完成输入文字。字体设置成默认值是为了使所有的浏览环境都能够看到网页效果。同一级别的文字(如标题、正文等)的大小、颜色等一般保持致。标题文字可以做成图片格式，并以图片形式插入。视频：图片的插入及调整2.插入图片插入图片通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。学生动手实践操作，学生小组间讨论，共同完成任务。通过小组合作，加强学生组内团结、共同完成任务，培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。首先检査网页中的图片是否转换为文件较小的 jpg 或 gif 格式，利于网上传送。首页中的图片可以插入在指定的单元格位置上，或者以单元格背景图的形式插入。例如，首页中标题是一幅图片(如图所示)，它是以单元格背景图插入的。方法是:在“单元格属性”窗口，进行如图所示的设置。实践：试完成首页中的图片插入，找找看，在首页中有哪些图片被用作背景?为什么不直把这些图片插入到网页中?插入图片”后文字可以环绕在图片的旁边，“插入背景则是文字在图片上面。你可以根据你所需要的外观效果选用方法。3.添加添加 Flash 动画和滚动字幕动画和滚动字幕首页中看到的动画和滚动字幕，使网页显得富于动感。这些动态元素的添加方法与我们已学过的Powerpoint 等软件的使用方法类似。首页中“我们班”栏目的 Flash 动画的添加方法如图所示。实践：（1)首页主要内容区右上角“每周格言”是一个向左滚动的字幕，试通过插入组件的方法实现它。（2)搜集一个关于邮箱的网页小动画，把它添加到页尾处“联系我们”的位置，如图所示。视频：视频的插入探究：(1)假如要把首页的 Fash 动画换成班级活动的视频片段，该如孫究何实现?(2)怎样在网页中插入乐曲作为背景音乐?实践：通过老师演示学生动手操作，提高动手能力。小组交流、分享通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。加强学生组内团结、共同完成任务，培养学生组间合作能力，并且炼动手能力 在 QQ 空间上可以撰写日志，上传自己的图片，听音乐、写心情除此之外，用户还可以根据自己的喜爱设定空间的背景、小挂件等，从而使每个空间都有自己的特色。现在，就请大家动手打造属于自己的 QQ 空间:換背景，加音乐，写日志，传图片在互联网上展示一个精彩的自己吧。三、设置超链接三、设置超链接在班级网站首页中，有需要进行超链接设置的吗?试对它们进行设置。视频：建立超级链接方法如下方法如下:（1)把导航栏中的各栏目标题分别链接到相应的栏目网页方法:选定导航栏中的栏目文字，如“班级相册”，单击超链接按钮，打开如图所示窗口，选择对应的目标网页，如“bixc.htm”，然后按“确定”，就可以完成一个超链接的设置。设定其他栏目的方法相同。(2)在页尾区“联系我们”处超链接到班级联系邮箱。方法:先选中文字“联系我们”，打开“编辑超链接”对话框，如图所示，填入邮箱地址后按“确定”。通过预览，看看用鼠标单击这些超链接目标时，能否跳转到对应的网页或链接到电子邮件发送页面。超链接可以建立在文字、图片或图片的某个局部位置上，实现了网页的跳转，形成了精彩的网络世界。至此，我们已经基本完成了班级网站首页的制作。从首页的制作中我们可以归纳出网页的一般制学生小组间讨论，共同完成任务，并分组汇报。、培养学生独立完成练习的能力。作流程，如图所示。用表格划分版面添加各种网页元素 设置超链接修饰页面探究：深入观摩班级网站或其他网站，看看有昭些方法能使页面更美观。拓展：博客博客(B10g 或 Web log)，又译为网络日志、部落格或部落阁等，是一种通常由个人管理、不定期发布新文章的网站。因为信息更新快速灵活，对社会热点反应迅速，深受大家的欢迎，同时也影响着我们的生活方式、工作方式和学习方式。一个典型的博客结合了文字、图像、其他博客或网站的链接及其他与主题相关的媒体，能够让读者以互动的方式留下意见。很多博客都提供丰富多彩的模板等功能，这使得不同的博客各具特色。而近年兴起的微博，即微型博客，成为目前全球最受欢迎的博客形式。目前，国内优秀的中文博客网有新浪博客、搜狐博客、中国博客网、腾讯博客、博客中国等。课堂练习课堂练习1.网页其版面可划分为（）、（）、（）三大区域。2.检査要添加到网页中的图片文件是否为（）或（）格式，如果不是则要进行格式转换。3.超链接可以建立在（）、（）或图片的某个局部位置上，链接跳转的目标可以是另一个网页、另一个网站、同一网页内的其他地方、学生小组间讨论，共同完成任务，并分组汇报。一个邮件地址个文件等。培养学生组间合作能力，并且炼动手能力 课堂小结分小组总结归纳，教师补充。各组汇报总结，其他小组成员做补充。锻炼学生的总结能力，逻辑思维、语言表达能力。布置作业(1)网页中一般有哪些元素?(2)首页要没置什么内容?(3)制作网页的一般步骤是什么?板书一、用表格进行版面布局一、用表格进行版面布局 二、添加网页元素二、添加网页元素1.插入文字插入文字2.插入图片插入图片3.添加添加 Flash 动画和滚动字幕动画和滚动字幕三、设置超链接三、设置超链接信息技术粤教版信息技术粤教版 九年级九年级上上第三节 制作网站首页新知导入 网站需要什么样式，才能吸引更多的人浏览，要先做什么后做什么才能提高工作效率呢?观看图中网站首页，你有哪些启发？今天我们来解决这个问题。(1)网页中一般有哪些元素?(2)首页要没置什么内容?(3)制作网页的一般步骤是什么?新知讲解问题新知讲解 首页是网站的“脸面”，能不能吸引访问者的注意，它显得尤为重要。因而，在设计制作首页时需要特别花心思。新知讲解任务 在 Frontpage中打开“班级网站”范例的首页，如图所示，仔细揣摩该网页，并制作好班级网站首页。标题区主要内容区页尾区新知讲解 网页中其版面可划分为标题区、主要内容区、页尾区三大区域。标题区突出网站的主题和导航条;主要内容区放置各种网页元素，可根据内容的设计划分不同的板块;页尾区一般提供网站的版权信息和制作团体的联系方式。新知讲解 一、用表格进行版面布局网页制作中使用表格划分版面，确定各种网页元素的版面位置。如图所示再把不同层的表格框线设置为不同的颜色，得到如图所示的表格布局结构。不难看出，我们可以通过多层嵌套的表格进行版面划分。新知讲解(1)在网页编辑区插入最外层的4行1列表格，单击鼠标右键，打开“表格属性”窗口(如图所示)，设定表格宽度为760像素。构建方法如下新知讲解 (2)从外到内分割版面，插入各层表格，再根据需要设定表格的高度和宽度。新知讲解实践 查看班级网站首页的各层表格、单元格属性，说说指定表格宽度时定义像素与百分比有何不同，如何对表格的大小进行精确的定义。设置表格的宽度有两种单位：百分比是相对宽度,像素是绝对宽度。网页中对表格大小精确定义用像素。新知导入二、添加网页元素 版面区域划分好以后，就可以在相应区域填充内容，如添加文字图片、动画等网页元素。新知讲解1.插入文字 可以采用输入，或复制、粘贴从已有素材中提取文字的方法，来完成输入文字。字体设置成默认值是为了使所有的浏览环境都能够看到网页效果。同一级别的文字(如标题、正文等)的大小、颜色等一般保持致。标题文字可以做成图片格式，并以图片形式插入。图片的插入及调整新知讲解2.插入图片 首先检査网页中的图片是否转换为文件较小的jpg或gif格式，利于网上传送。首页中的图片可以插入在指定的单元格位置上，或者以单元格背景图的形式插入。例如，首页中标题是一幅图片(如图所示)，它是以单元格背景图插入的。方法是:在“单元格属性”窗口，进行如图所示的设置。设置单元格大小从浏览窗口中选图勾选新知讲解实践 试完成首页中的图片插入，找找看，在首页中有哪些图片被用作背景?为什么不直把这些图片插入到网页中?插入图片”后文字可以环绕在图片的旁边，“插入背景则是文字在图片上面。你可以根据你所需要的外观效果选用方法。新知讲解3.添加Flash动画和滚动字幕 首页中看到的动画和滚动字幕，使网页显得富于动感。这些动态元素的添加方法与我们已学过的Powerpoint等软件的使用方法类似。新知讲解 首页中“我们班”栏目的 Flash动画的添加方法如图所示。新知讲解实践（1)首页主要内容区右上角“每周格言”是一个向左滚动的字幕，试通过插入组件的方法实现它。单击“插入”，然后单击“web组件”双击“字幕”新知讲解实践（2)搜集一个关于邮箱的网页小动画，把它添加到页尾处“联系我们”的位置，如图所示。视频的插入新知讲解探究(1)假如要把首页的Fash动画换成班级活动的视频片段，该如何实现?新知讲解探究(2)怎样在网页中插入乐曲作为背景音乐?新知讲解实践在QQ空间上可以撰写日志，上传自己的图片，听音乐、写心情除此之外，用户还可以根据自己的喜爱设定空间的背景、小挂件等，从而使每个空间都有自己的特色。现在，就请大家动手打造属于自己的QQ空间:換背景，加音乐，写日志，传图片在互联网上展示一个精彩的自己吧新知导入三、设置超链接 在班级网站首页中，有需要进行超链接设置的吗?试对它们进行设置。建立超级链接新知讲解方法如下:（1)把导航栏中的各栏目标题分别链接到相应的栏目网页。方法:选定导航栏中的栏目文字，如“班级相册”，单击超链接按钮，打开如图所示窗口，选择对应的目标网页，如“bixc.htm”，然后按“确定”，就可以完成一个超链接的设置。直接单击要链接的目标网页自动填入该网页文件名设定其他栏目的方法相同。新知讲解方法如下:(2)在页尾区“联系我们”处超链接到班级联系邮箱。方法:先选中文字“联系我们”，打开“编辑超链接”对话框，如图所示，填入邮箱地址后按“确定”。新知导入 通过预览，看看鼠标单击超链接目标时，能否跳转到对应的网页或链接到电子邮件发送页面。新知讲解 超链接可以建立在文字、图片或图片的某个局部位置上，实现了网页的跳转，形成了精彩的网络世界。新知讲解 至此，我们已经基本完成了班级网站首页的制作。从首页的制作中我们可以归纳出网页的一般制作流程，如图所示。用表格划分版面添加各种网页元素设置超链接修饰页面新知讲解探究 深入观摩班级网站或其他网站，看看有昭些方法能使页面更美观。拓展博客 博客(B10g或 Web log)，又译为网络日志、部落格或部落阁等，是一种通常由个人管理、不定期发布新文章的网站。因为信息更新快速灵活，对社会热点反应迅速，深受大家的欢迎，同时也影响着我们的生活方式、工作方式和学习方式。一个典型的博客结合了文字、图像、其他博客或网站的链接及其他与主题相关的媒体，能够让读者以互动的方式留下意见。很多博客都提供丰富多彩的模板等功能，这使得不同的博客各具特色。而近年兴起的微博，即微型博客，成为目前全球最受欢迎的博客形式。目前，国内优秀的中文博客网有新浪博客、搜狐博客、中国博客网、腾讯博客、博客中国等。课堂练习1.网页其版面可划分为（）、（）、（）三大区域。2.检査要添加到网页中的图片文件是否为（）或（）格式，如果不是则要进行格式转换。3.超链接可以建立在（）、（）或图片的某个局部位置上，链接跳转的目标可以是另一个网页、另一个网站、同一网页内的其他地方、一个邮件地址个文件等。标题区图片文字gifjpg页尾区主要内容区课堂小结板书设计一、用表格进行版面布局一、用表格进行版面布局二、添加网页元素二、添加网页元素1.插入文字插入文字2.插入图片插入图片3.添加添加Flash动画和滚动字幕动画和滚动字幕三、设置超链接三、设置超链接(1)网页中一般有哪些元素?(2)首页要没置什么内容?(3)制作网页的一般步骤是什么?作业布置