资源简介

中小学教育资源及组卷应用平台
第8.2课《网页页面美化》教学设计
课题 网页页面美化 单元 第八单元 学科 信息技术 年级 七年级上
核心素养目标 1、信息意识：了解网站建设的重要性和基本流程，意识到合理规划和设计网站对于信息传播和交流的重要性。2、计算思维：掌握基本的HTML和CSS知识，能够使用这些技能进行简单的网页设计和布局，培养解决问题的能力。3、数字化学习与创新：学会利用互联网资源和工具进行网站的制作与发布，提升数字化学习能力，激发创新思维和创造力。4、信息社会责任：认识遵守网络道德和法律的重要性，了解在网站建设过程中应注意版权和隐私保护，培养社会责任感。
教学重点 了解网站建设步骤认识规划的重要性
教学难点 掌握基础设计技能理解申请域名空间
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 视频导入：《域名和虚拟主机有什么区别》 观看视频，了解域名和虚拟主机的区别。 培养学生的观察力和创造力。
讲授新课 一、想一想网站建设1、网站建设经过前面的学习，同学们已经能够初步使用记事本进行网页的设计，下面我们将来学习网站建设的基本流程。2、网站规划在网站开始制作前，我们必须对网站的功能和界面风格进行定位。依据需求来确定网站要实现的功能，网站的界面包括网页的配色和网页的版式设计等。不同的网站应该具备不同的特色，例如百度网主要提供强大的搜索功能，所以百度网站简化了界面而突出搜索功能。央视网提供各种新闻视频服务的功能，用很大的图片模块来突出新闻，吸引游客点击浏览。那么，如果建设班级网站，应该以方便班级成员的沟通交流以及学习发展为主要目标，所以班级网站应该具备“动态”“风采”“学习”“资源”“联系”“交流”等内容模块。并且在色调上，可以用一些比较青春活力的颜色，如绿色等。二、议一议1、班级网站需要实现哪些功能？（1）动态：发布最新的班级活动新闻和通知，使同学们及时了解重要事项。（2）风采：展示班级成员的照片和介绍，并分享活动照片和视频。（3）学习：提供下载学习资料和在线作业提交平台，支持同学们的学习需要。（4）资源：集合并分享各类学习资源和应用工具链接，方便同学们使用。（5）联系：显示班级和老师的联系方式，为同学们提供便捷的联系渠道。（6）交流：设立留言板和在线聊天功能，促进同学间的讨论和沟通。2、班级网站的主色调应该选择什么颜色，为什么？（1）绿色：班级网站的主色调可以选择绿色，因为绿色象征着青春和活力，有助于营造积极向上的氛围。（2）蓝色：蓝色能给人一种冷静和理性的感觉，适合作为学习网站的主色调，促进学生冷静思考。（3）黄色：黄色通常代表阳光和快乐，作为主色调可以让网站显得更加明亮和愉快，吸引同学们的注意。（4）橙色：橙色充满活力和温暖，适合作为班级网站的主色调，能够激发同学们的热情和动力。三、想一想网站建设3、网页制作网站制作一般有两种方式，一种是自己建设，另一种是请专业网站公司制作。在网站制作前，还需要根据网站的规划设计，提前准备好相关素材，一般素材可以是图片、视频音频、文字材料等。网站制作的专业软件有很多，功能各有千秋，大家可以选择任意一款软件进行练习。四、议一议1、自己建设网站和请专业网站公司制作各有什么优缺点？（1）成本：自己建设网站成本较低；请专业公司制作费用较高。（2）技术要求：自己建设需要技术知识；请专业公司无需具备这些技术。（3）时间：自己建设网站可能需要较长时间；专业公司通常能更快完成。（4）定制化：自己建设网站可以完全按自己想法和需求定制；请专业公司需要更详细的沟通。（5）维护：自己建设网站需要自己进行维护和更新；请专业公司通常提供维护和支持服务。2、网站需要哪些类型的素材，如何收集和整理？（1）图片：需要清晰且吸引人的图片。可以拍照、网上搜索或用同学的图片，按主题整理。（2）文字内容：需要简洁准确的文字说明。课本、笔记或网上资料，整理成段落和标题。（3）视频：需要有趣和清晰的视频。用手机录制班级活动或从网上下载。（4）音频：需要背景音乐或声音文件。可录制歌曲或从网上下载。（5）图标和按钮：需要多彩的图标和按钮。免费图标网站下载，按用途整理存档。五、想一想网站建设4、申请空间和域名在网站做好之后，要使别人能在自己的计算机上通过网络访问你做的网站，需要将其上传到服务器上，并且有一个专属于你的网站域名。所以需要申请虚拟空间和域名。扩展阅读虚拟空间模式虚拟空间模式有三种：主机托管、主机租用和虚拟主机。大多数网站使用虚拟主机，不仅能节省购买主机和租用专线的费用，而且还省去了处理在使用和维护服务器中产生的技术问题。网站建设5、申请虚拟空间要申请虚拟空间，需要登录提供虚拟空间服务的网站进行操作，有一些网站是收费的也有一些网站是免费的。在申请空间时，要记住自己的用户名、密码和FTP上传地址。六、议一议1、什么是虚拟主机，为什么多数网站选择它？（1）虚拟主机定义：虚拟主机是在一台服务器上分出多个小部分，每个部分都可以放一个网站。（2）成本低：使用虚拟主机比自己买服务器便宜很多。（3）操作简便：虚拟主机已经配置好基础设施，用户只需上传网站内容即可，使用方便。（4）维护省心：虚拟主机服务商会负责维护服务器，无需担心技术问题。（5）资源共享：虚拟主机共享服务器资源，但每个网站都有独立的空间，不会影响彼此的运行。2、为什么有时候网站访问会很慢？（1）网络拥堵：当有很多人同时访问网站时，服务器会变得很忙，处理请求的速度就会变慢，导致访问速度变慢。（2）服务器问题：如果网站服务器出现故障或者正在维护，处理能力会下降，这时候访问网站的速度就会变慢或者无法访问。（3）网络连接：如果你的网络连接不稳定，如Wi-Fi信号弱或数据流量不足，会导致数据传输缓慢，从而影响网站的访问速度。（4）网站内容过多：网站上的图片、视频和动画等多媒体内容太多，会增加网页加载时间，尤其是在网络速度不快的情况下更加明显。七、想一想网站建设6、申请域名申请好虚拟空间后，申请域名也就简单了，一般提供虚拟空间服务的网站，同时也提供申请域名服务，根据提示输入各项信息提交显示，申请成功后，网页上会显示你的域名和密码。域名分为顶级域名(一级域名)、二级域名、三级域名等。顶级域名由一个合法字符串加后缀名组成，如；二级域名是在顶级域名前再加一个主机名，如moe.；三级域名是在二级域名前再加字符串，如zwfw.moe.。除了顶级域名外，其他域名一般可以免费申请到。空间和域名申请成功后，要将两者进行绑定，这样在网站上传之后，别人才能通过域名访问你的网站。扩展阅读域名的相关知识点补充以 com、net、gov、edu为后缀名的域名表示国际域名的不同机构，com表示商业机构、net表示网络服务机构、gov表示政府机构、edu表示教育机构。域名可以分为顶级域名、二级域名、三级域名、四级域名，每个等级的域名表现形式和适用范围都各有不同。八、议一议1、申请域名过程中的常见问题有哪些？（1）名被占用：你想注册的域名已经被别人使用了，需要重新选一个新的域名。（2）输入信息错误：申请时填写的名字、邮箱或其他信息有误，导致申请失败。（3）忘记密码：你设置的域名账号密码忘记了，需要通过邮箱或其它方式找回。（4）后缀选择不当：选择了不合适的域名后缀（如.等），可能不符合网站类型。2、为什么申请域名后需要与虚拟空间绑定？（1）让网站上线：绑定域名和虚拟空间后，才能让别人通过域名访问你的网站，否则网站无法被看见。（2）统一访问地址：绑定域名后，网站有一个固定的网址，方便别人记住和访问，不需要记忆复杂的IP地址。（3）提高信任度：一个独立的域名让网站看起来更专业和可信，特别是对新的访问者。（4）便于管理：绑定后，域名和网站内容可以更方便地管理，同时也可以使用域名提供的邮箱服务等额外功能。九、想一想网站建设7、网站的测试与发布在网站页面制作好、申请好空间和域名后，建站的最后一步就是发布站点。但是，为确保网页在浏览器上不出问题，在网站上传前，还需要对网站进行本地测试，主要是对内容、形式以及网页链接的检查与修改等。在网页数量较多，使用较多的超链接时，可采用网站制作软件检查超链接功能。完成站点测试后，就可以将其上传到虚拟空间了，上传网站一般使用FTP协议，用文件远程方式上传。上传也可以用专门的FTP软件，使用专业网站制作软件直接上传。十、议一议1、为什么需要在本地测试网站？（1）发现错误：在本地测试可以提前发现网站中的错误和问题，比如图片无法显示或链接失效。（2）节省时间：本地测试可以快速修改问题，而不需要每次都重新上传网页到服务器，大大节省时间。（3）确保兼容性：可以在不同浏览器上测试，确保网站在不同浏览器上都能正常显示和使用。（4）验证功能：测试所有按钮、表单和互动功能是否正常工作，确保用户体验良好。2、本地测试时应该检查哪些内容？（1）页面显示：确认所有网页正常打开，文字、图片、视频正常显示。（2）链接有效性：检查所有链接是否能跳转到正确的页面。（3）浏览器兼容性：在不同浏览器上测试，确保正常显示。（4）功能测试：测试所有按钮、表单等功能是否正常工作。（5）排版和布局：确认网页排版美观一致，没有错位问题。（6）加载速度：测试网页加载速度是否合理。十一、想一想网站建设8、网站推广与维护网站发布后，为了避免网站被淹没在网络的海洋世界，我们还需要对网站进行推广，推广方式可以是交换广告条、网络广告、注册搜索引擎等。为了维持网站不被他人遗忘，我们还需要保持对网站的内容的更新，经常更新网站内容和添加新内容。十二、议一议1、哪些推广方式最适合初学者使用？（1）社交媒体分享：在社交媒体平台（如微信、微博）上分享网站链接，邀请朋友和同学访问。（2）口口相传：向家人、朋友和同学介绍你的网站，请他们帮忙传播。（3）邮件邀请：给熟悉的人发送电子邮件，介绍你的网站并邀请访问。（4）论坛和社区：在你感兴趣的论坛和社区发帖，分享你的网站，并参与讨论，吸引更多人访问。（4）搜索引擎注册：将你的网站提交给搜索引擎（如百度、搜狗），让更多人通过搜索找到你的网站。2、为什么要将网站注册到搜索引擎上？（1）增加曝光：注册到搜索引擎后，人们在网上搜索时更容易找到你的网站，增加网站的曝光度。（2）吸引访问者：通过搜索引擎，更多的访问者可以发现你的网站，从而提高访问量和人气。（3）便捷搜索：注册后，别人只需在搜索引擎输入关键词，就能轻松找到你的网站，而不用记住复杂的地址。（4）提高可信度：出现在搜索引擎结果中的网站通常更有可信度，能让更多人信任你的网站内容。十三、做一做1、对CSS的基本操作进行体验，在浏览器中查看效果，并与同学们交流哪种网页好看。

红色字体

下划线字体

2、使用绘制工具，与同学们一起对班级主页网站进行设计。3、使用网站制作相关软件，与同学们合作制作出班级的主页并发布。十四、知识拓展在我们学习了基本的网页设计和网站建设之后，让我们来快速了解一下现代网页设计中非常重要的技术：DIV+CSS。1、什么是DIV：DIV是HTML中的一种容器标签，用来把网页内容分成不同的块，便于布局管理。2、什么是CSS：CSS（层叠样式表）是用来控制网页样式和布局的工具，可以定义字体、颜色、边距等。3、分离内容与样式：通过DIV和CSS，内容和样式可以分开管理，使得代码更加清晰和整洁。4、灵活布局：使用DIV+CSS，可以轻松实现复杂的网页布局，而不用依赖传统的表格布局。5、提高页面加载速度：由于CSS样式表可以被外部引用，网页加载速度会更快，因为同一个样式表可以被多个页面共享。6、响应式设计：结合使用DIV和CSS，还可以创建适应不同设备屏幕大小的响应式网页，提升用户体验。总的来说，DIV+CSS让我们能够更方便地设计和管理网页的布局和样式，使网站既好看又实用。十五、议一议1、什么是响应式设计，如何用DIV和CSS实现？（1）响应式设计定义：响应式设计是一种网页设计方法，使网页可以自动适应不同设备的屏幕大小，如手机、平板、电脑等。（2）灵活的版面布局：通过使用DIV和CSS，可以设置不同设备上显示的内容和布局，比如在小屏设备上隐藏某些内容或调整排列顺序。（3）使用百分比宽度：在CSS中使用百分比而不是固定像素作为宽度，可以让网页元素根据屏幕大小自动调整。（4）调整图像大小：用CSS设置图片宽度为100%，让图片在不同设备上都能按比例缩放，不会超出屏幕边界。2、在实际做网页的过程中，DIV和CSS的应用难点在哪里？（1）复杂布局管理：创建复杂页面布局时，使用多个DIV和CSS样式可能会混淆，管理和维护较困难。（2）样式冲突和定位问题：CSS样式可能会冲突，导致显示错误；使用定位时也可能出现位置问题，需要调试。（3）浏览器兼容性：不同浏览器对CSS支持不一致，可能显示效果不同。（4）响应式设计和嵌套：设计响应式网页需要编写复杂CSS；DIV标签嵌套过多会使代码难阅读和维护。 学生进行班级网站规划，定位网站功能和界面风格。确定班级网站要实现的功能模块，如“动态”“风采”“学习”“资源”“联系”“交流”等，并选择青春活力的颜色（如绿色）作为网站的主色调。完成后，各组分享他们的规划方案。学生分组讨论并回答“班级网站需要实现哪些功能？为什么？”，从动态、风采、学习、资源、联系、交流等方面进行分析。每组选出代表在全班分享讨论结果。学生以小组为单位，为班级网站选择主色调（如绿色、蓝色、黄色或橙色），并编写CSS代码应用。完成后，在浏览器中查看效果。学生根据网站规划设计，提前准备好相关素材，如图片、视频、音频和文字材料。学生总结讨论结果，分享对两种网站制作方式的理解和见解。学生从课本、笔记或网上资料中获取简洁准确的文字说明，并整理成段落和标题。学生根据教师提供的步骤登录虚拟空间服务网站进行操作，申请虚拟空间和域名。记住并记录下用户名、密码和FTP上传地址。学生可以选择免费的虚拟空间完成练习。学生讨论“什么是虚拟主机？为什么多数网站选择它？”学生讨论“为什么当有很多人同时访问网站时，网站访问速度会变慢？”学生阅读并讨论以com、net、gov和edu为后缀的域名分别表示什么机构。学生讨论“如果你想注册的域名已经被别人使用了，你该怎么办？”并提议替代方案。学生模拟管理控制面板，进行域名和网站内容的基本设置。学生使用网站制作软件进行超链接检查，确保所有链接正常。学生讨论“为什么本地测试可以节省时间，不需要每次都上传网页到服务器？”学生检查网页的排版和布局，确保其美观一致，没有错位。学生模拟将网站注册到百度、360搜索等搜索引擎。学生讨论并实践“如何在微信、微博等社交媒体平台上分享网站链接，邀请朋友和同学访问？”学生讨论“为什么出现在搜索引擎结果中的网站通常更有可信度？”学生修改字体大小、颜色等CSS属性，然后在浏览器中查看效果。学生使用绘制工具设计班级主页页面布局，与同学们分享讨论。学生尝试将样式从HTML标签中分离出来，使用外部CSS文件管理样式。学生讨论“什么是响应式设计？为什么在现代网页设计中响应式设计非常重要？”学生逐步创建一个复杂布局，每个步骤只添加几个DIV和CSS样式。 通过实际操作，帮助学生掌握网站规划的基本步骤和方法，培养规划和设计能力。通过讨论，帮助学生理解班级网站需要实现的具体功能及其重要性，培养分析和表达能力。帮助学生掌握选择和应用主色调的方法，培养实际设计和操作能力。通过实际操作，帮助学生了解网站制作前的准备工作，培养规划和组织能力。通过总结，学生能够巩固所学知识，提升表达和自我总结能力，同时互相学习和交流心得。通过实际操作，帮助学生掌握文字内容的收集和整理方法，培养书写和组织能力。通过实际操作，帮助学生掌握申请虚拟空间和域名的具体步骤，培养实际操作和规划能力。帮助学生理解虚拟主机的定义及其优势，培养分析和表达能力。帮助学生理解网络拥堵如何影响网站访问速度，培养分析能力。帮助学生了解不同域名后缀的含义及其适用范围，培养阅读和理解能力。帮助学生理解域名被占用时的应对方法，培养他们的解决问题能力。帮助学生掌握域名和虚拟空间成功绑定后的管理和设置方法，培养实际操作和管理能力。通过实际操作，使学生掌握如何在本地测试网站的超链接，确保所有链接正常工作，培养实际操作能力。通过讨论让学生理解本地测试如何节省时间，避免频繁上传网站到服务器，培养高效工作意识。帮助学生确保网页的排版美观一致，没有错位问题，培养美学意识和细致的检查能力。通过实际操作，帮助学生了解如何将网站注册到搜索引擎中，提升网站的可见性。帮助学生理解利用社交媒体平台推广网站的低成本和高效率，培养社交媒体运营能力。帮助学生理解在搜索引擎中出现的网站更有可信度，培养可信度的重要性。帮助学生实际体验修改CSS属性对网页外观的影响。培养学生的页面设计能力和创意表达能力。帮助学生理解通过DIV和CSS实现内容与样式分离的重要性，使代码更加清晰。帮助学生理解响应式设计的概念及其重要性。帮助学生理解分步创建复杂页面布局的重要性，避免混淆。
课堂小结 网页页面美化1、了解网站建设步骤2、认识规划的重要性3、掌握基础设计技能4、理解申请域名空间 总结回顾 对本节课内容进行总结概括。
课后作业 班级网站需要哪些主要功能？请列举至少三个。 布置作业 拓展学生的学习能力
板书 观看板书 强调教学重点内容
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)(共59张PPT)
第8课
网页页面美化
第2课时
（赣科技版）七年级
上
01
学习目标
内容总览
02
新知导入
03
探究新知
04
课堂练习
05
课堂总结
课后作业
06
教学目标
了解网站建设的重要性和基本流程，意识到合理规划和设计网站对于信息传播和交流的重要性。
01
02
03
04
计算思维
信息社会责任
数字化学习与创新
信息意识
掌握基本的HTML和CSS知识，能够使用这些技能进行简单的网页设计和布局，培养解决问题的能力。
学会利用互联网资源和工具进行网站的制作与发布，提升数字化学习能力，激发创新思维和创造力。
认识遵守网络道德和法律的重要性，了解在网站建设过程中应注意版权和隐私保护，培养社会责任感。
新知导入
新知讲解
想一想
网站建设
1、网站建设
经过前面的学习，同学们已经能够初步使用记事本进行网页的设计，下面我们将来学习网站建设的基本流程。
新知讲解
想一想
网站建设
2、网站规划
在网站开始制作前，我们必须对网站的功能和界面风格进行定位。
新知讲解
想一想
网站建设
2、网站规划
依据需求来确定网站要实现的功能，网站的界面包括网页的配色和网页的版式设计等。
新知讲解
想一想
网站建设
2、网站规划
不同的网站应该具备不同的特色，例如百度网主要提供强大的搜索功能，所以百度网站简化了界面而突出搜索功能。
新知讲解
想一想
网站建设
2、网站规划
央视网提供各种新闻视频服务的功能，用很大的图片模块来突出新闻，吸引游客点击浏览。
新知讲解
想一想
网站建设
2、网站规划
那么，如果建设班级网站，应该以方便班级成员的沟通交流以及学习发展为主要目标，所以班级网站应该具备“动态”“风采”“学习”“资源”“联系”“交流”等内容模块。并且在色调上，可以用一些比较青春活力的颜色，如绿色等。
新知讲解
议一议
1、班级网站需要实现哪些功能？
（1）动态：发布最新的班级活动新闻和通知，使同学们及时了解重要事项。
（2）风采：展示班级成员的照片和介绍，并分享活动照片和视频。
（3）学习：提供下载学习资料和在线作业提交平台，支持同学们的学习需要。
（4）资源：集合并分享各类学习资源和应用工具链接，方便同学们使用。
（5）联系：显示班级和老师的联系方式，为同学们提供便捷的联系渠道。
（6）交流：设立留言板和在线聊天功能，促进同学间的讨论和沟通。
新知讲解
议一议
2、班级网站的主色调应该选择什么颜色，为什么？
（1）绿色：班级网站的主色调可以选择绿色，因为绿色象征着青春和活力，有助于营造积极向上的氛围。
（2）蓝色：蓝色能给人一种冷静和理性的感觉，适合作为学习网站的主色调，促进学生冷静思考。
（3）黄色：黄色通常代表阳光和快乐，作为主色调可以让网站显得更加明亮和愉快，吸引同学们的注意。
（4）橙色：橙色充满活力和温暖，适合作为班级网站的主色调，能够激发同学们的热情和动力。
新知讲解
想一想
网站建设
3、网页制作
网站制作一般有两种方式，一种是自己建设，另一种是请专业网站公司制作。
新知讲解
想一想
网站建设
3、网页制作
在网站制作前，还需要根据网站的规划设计，提前准备好相关素材，一般素材可以是图片、视频音频、文字材料等。
新知讲解
想一想
网站建设
3、网页制作
网站制作的专业软件有很多，功能各有千秋，大家可以选择任意一款软件进行练习。
新知讲解
议一议
1、自己建设网站和请专业网站公司制作各有什么优缺点？
（1）成本：自己建设网站成本较低；请专业公司制作费用较高。
（2）技术要求：自己建设需要技术知识；请专业公司无需具备这些技术。
（3）时间：自己建设网站可能需要较长时间；专业公司通常能更快完成。
（4）定制化：自己建设网站可以完全按自己想法和需求定制；请专业公司需要更详细的沟通。
（5）维护：自己建设网站需要自己进行维护和更新；请专业公司通常提供维护和支持服务。
新知讲解
议一议
2、网站需要哪些类型的素材，如何收集和整理？
（1）图片：需要清晰且吸引人的图片。可以拍照、网上搜索或用同学的图片，按主题整理。
（2）文字内容：需要简洁准确的文字说明。课本、笔记或网上资料，整理成段落和标题。
（3）视频：需要有趣和清晰的视频。用手机录制班级活动或从网上下载。
（4）音频：需要背景音乐或声音文件。可录制歌曲或从网上下载。
（5）图标和按钮：需要多彩的图标和按钮。免费图标网站下载，按用途整理存档。
新知讲解
想一想
网站建设
4、申请空间和域名
在网站做好之后，要使别人能在自己的计算机上通过网络访问你做的网站，需要将其上传到服务器上，并且有一个专属于你的网站域名。所以需要申请虚拟空间和域名。
新知讲解
想一想
扩展阅读
虚拟空间模式
虚拟空间模式有三种：主机托管、主机租用和虚拟主机。大多数网站使用虚拟主机，不仅能节省购买主机和租用专线的费用，而且还省去了处理在使用和维护服务器中产生的技术问题。
新知讲解
想一想
网站建设
5、申请虚拟空间
要申请虚拟空间，需要登录提供虚拟空间服务的网站进行操作，有一些网站是收费的也有一些网站是免费的。在申请空间时，要记住自己的用户名、密码和FTP上传地址。
新知讲解
议一议
1、什么是虚拟主机，为什么多数网站选择它？
（1）虚拟主机定义：虚拟主机是在一台服务器上分出多个小部分，每个部分都可以放一个网站。
（2）成本低：使用虚拟主机比自己买服务器便宜很多。
（3）操作简便：虚拟主机已经配置好基础设施，用户只需上传网站内容即可，使用方便。
（4）维护省心：虚拟主机服务商会负责维护服务器，无需担心技术问题。
（5）资源共享：虚拟主机共享服务器资源，但每个网站都有独立的空间，不会影响彼此的运行。
新知讲解
议一议
2、为什么有时候网站访问会很慢？
（1）网络拥堵：当有很多人同时访问网站时，服务器会变得很忙，处理请求的速度就会变慢，导致访问速度变慢。
（2）服务器问题：如果网站服务器出现故障或者正在维护，处理能力会下降，这时候访问网站的速度就会变慢或者无法访问。
（3）网络连接：如果你的网络连接不稳定，如Wi-Fi信号弱或数据流量不足，会导致数据传输缓慢，从而影响网站的访问速度。
（4）网站内容过多：网站上的图片、视频和动画等多媒体内容太多，会增加网页加载时间，尤其是在网络速度不快的情况下更加明显。
新知讲解
想一想
网站建设
6、申请域名
申请好虚拟空间后，申请域名也就简单了，一般提供虚拟空间服务的网站，同时也提供申请域名服务，根据提示输入各项信息提交显示，申请成功后，网页上会显示你的域名和密码。
新知讲解
想一想
网站建设
6、申请域名
域名分为顶级域名(一级域名)、二级域名、三级域名等。顶级域名由一个合法字符串加后缀名组成，如；二级域名是在顶级域名前再加一个主机名，如moe.；三级域名是在二级域名前再加字符串，如zwfw.moe.。除了顶级域名外，其他域名一般可以免费申请到。
新知讲解
想一想
网站建设
6、申请域名
空间和域名申请成功后，要将两者进行绑定，这样在网站上传之后，别人才能通过域名访问你的网站。
新知讲解
想一想
扩展阅读
域名的相关知识点补充
以com、net、gov、edu为后缀名的域名表示国际域名的不同机构，com表示商业机构、net表示网络服务机构、gov表示政府机构、edu表示教育机构。
顶级域名 说明
gov 政府部门
com 商业部门
edu 教育部门
org 民间团体组织
net 网络服务机构
新知讲解
想一想
扩展阅读
域名的相关知识点补充
域名可以分为顶级域名、二级域名、三级域名、四级域名，每个等级的域名表现形式和适用范围都各有不同。
新知讲解
议一议
1、申请域名过程中的常见问题有哪些？
（1）名被占用：你想注册的域名已经被别人使用了，需要重新选一个新的域名。
（2）输入信息错误：申请时填写的名字、邮箱或其他信息有误，导致申请失败。
（3）忘记密码：你设置的域名账号密码忘记了，需要通过邮箱或其它方式找回。
（4）后缀选择不当：选择了不合适的域名后缀（如.等），可能不符合网站类型。
新知讲解
议一议
2、为什么申请域名后需要与虚拟空间绑定？
（1）让网站上线：绑定域名和虚拟空间后，才能让别人通过域名访问你的网站，否则网站无法被看见。
（2）统一访问地址：绑定域名后，网站有一个固定的网址，方便别人记住和访问，不需要记忆复杂的IP地址。
（3）提高信任度：一个独立的域名让网站看起来更专业和可信，特别是对新的访问者。
（4）便于管理：绑定后，域名和网站内容可以更方便地管理，同时也可以使用域名提供的邮箱服务等额外功能。
新知讲解
想一想
网站建设
7、网站的测试与发布
在网站页面制作好、申请好空间和域名后，建站的最后一步就是发布站点。
新知讲解
想一想
网站建设
7、网站的测试与发布
但是，为确保网页在浏览器上不出问题，在网站上传前，还需要对网站进行本地测试，主要是对内容、形式以及网页链接的检查与修改等。
新知讲解
想一想
网站建设
7、网站的测试与发布
在网页数量较多，使用较多的超链接时，可采用网站制作软件检查超链接功能。
新知讲解
想一想
网站建设
7、网站的测试与发布
完成站点测试后，就可以将其上传到虚拟空间了，上传网站一般使用FTP协议，用文件远程方式上传。上传也可以用专门的FTP软件，使用专业网站制作软件直接上传。
新知讲解
议一议
1、为什么需要在本地测试网站？
（1）发现错误：在本地测试可以提前发现网站中的错误和问题，比如图片无法显示或链接失效。
（2）节省时间：本地测试可以快速修改问题，而不需要每次都重新上传网页到服务器，大大节省时间。
（3）确保兼容性：可以在不同浏览器上测试，确保网站在不同浏览器上都能正常显示和使用。
（4）验证功能：测试所有按钮、表单和互动功能是否正常工作，确保用户体验良好。
新知讲解
议一议
2、本地测试时应该检查哪些内容？
（1）页面显示：确认所有网页正常打开，文字、图片、视频正常显示。
（2）链接有效性：检查所有链接是否能跳转到正确的页面。
（3）浏览器兼容性：在不同浏览器上测试，确保正常显示。
（4）功能测试：测试所有按钮、表单等功能是否正常工作。
（5）排版和布局：确认网页排版美观一致，没有错位问题。
（6）加载速度：测试网页加载速度是否合理。
新知讲解
想一想
网站建设
8、网站推广与维护
网站发布后，为了避免网站被淹没在网络的海洋世界，我们还需要对网站进行推广，推广方式可以是交换广告条、网络广告、注册搜索引擎等。
新知讲解
想一想
网站建设
8、网站推广与维护
为了维持网站不被他人遗忘，我们还需要保持对网站的内容的更新，经常更新网站内容和添加新内容。
新知讲解
议一议
1、哪些推广方式最适合初学者使用？
（1）社交媒体分享：在社交媒体平台（如微信、微博）上分享网站链接，邀请朋友和同学访问。
（2）口口相传：向家人、朋友和同学介绍你的网站，请他们帮忙传播。
（3）邮件邀请：给熟悉的人发送电子邮件，介绍你的网站并邀请访问。
（4）论坛和社区：在你感兴趣的论坛和社区发帖，分享你的网站，并参与讨论，吸引更多人访问。
（4）搜索引擎注册：将你的网站提交给搜索引擎（如百度、搜狗），让更多人通过搜索找到你的网站。
新知讲解
议一议
2、为什么要将网站注册到搜索引擎上？
（1）增加曝光：注册到搜索引擎后，人们在网上搜索时更容易找到你的网站，增加网站的曝光度。
（2）吸引访问者：通过搜索引擎，更多的访问者可以发现你的网站，从而提高访问量和人气。
（3）便捷搜索：注册后，别人只需在搜索引擎输入关键词，就能轻松找到你的网站，而不用记住复杂的地址。
（4）提高可信度：出现在搜索引擎结果中的网站通常更有可信度，能让更多人信任你的网站内容。
新知讲解
做一做
1、对CSS的基本操作进行体验，在浏览器中查看效果，并与同学们交流哪种网页好看。

红色字体

下划线字体

新知讲解
做一做
2、使用绘制工具，与同学们一起对班级主页网站进行设计。
新知讲解
做一做
3、使用网站制作相关软件，与同学们合作制作出班级的主页并发布。
新知讲解
活动评价
单元活动评价
1、单元框架图，请同学们对照图中的内容进行总结。
新知讲解
活动评价
单元活动评价
2、根据自己的掌握情况填写下来。
学习内容 掌握情况
网络资源的类型 □不了解 □了解 □理解
网络资源的获取 □不了解 □了解 □理解
网络资源的生成与分享 □不了解 □了解 □理解
云服务模式 □不了解 □了解 □理解
云服务应用 □不了解 □了解 □理解
在线协作平台 □不了解 □了解 □理解
在线学习平台 □不了解 □了解 □理解
HTML 的概念 □不了解 □了解 □理解
HTML 的标签 □不了解 □了解 □理解
HTML 的属性 □不了解 □了解 □理解
CSS 的属性 □不了解 □了解 □理解
网站建设流程 □不了解 □了解 □理解
新知讲解
什么是DIV+CSS
知识拓展
在我们学习了基本的网页设计和网站建设之后，让我们来快速了解一下现代网页设计中非常重要的技术：DIV+CSS。
新知讲解
什么是DIV+CSS
知识拓展
1、什么是DIV：DIV是HTML中的一种容器标签，用来把网页内容分成不同的块，便于布局管理。
新知讲解
什么是DIV+CSS
知识拓展
2、什么是CSS：CSS（层叠样式表）是用来控制网页样式和布局的工具，可以定义字体、颜色、边距等。
新知讲解
什么是DIV+CSS
知识拓展
3、分离内容与样式：通过DIV和CSS，内容和样式可以分开管理，使得代码更加清晰和整洁。
新知讲解
什么是DIV+CSS
知识拓展
4、灵活布局：使用DIV+CSS，可以轻松实现复杂的网页布局，而不用依赖传统的表格布局。
新知讲解
什么是DIV+CSS
知识拓展
5、提高页面加载速度：由于CSS样式表可以被外部引用，网页加载速度会更快，因为同一个样式表可以被多个页面共享。
新知讲解
什么是DIV+CSS
知识拓展
6、响应式设计：结合使用DIV和CSS，还可以创建适应不同设备屏幕大小的响应式网页，提升用户体验。
新知讲解
什么是DIV+CSS
知识拓展
总的来说，DIV+CSS让我们能够更方便地设计和管理网页的布局和样式，使网站既好看又实用。
新知讲解
议一议
1、什么是响应式设计，如何用DIV和CSS实现？
（1）响应式设计定义：响应式设计是一种网页设计方法，使网页可以自动适应不同设备的屏幕大小，如手机、平板、电脑等。
（2）灵活的版面布局：通过使用DIV和CSS，可以设置不同设备上显示的内容和布局，比如在小屏设备上隐藏某些内容或调整排列顺序。
（3）使用百分比宽度：在CSS中使用百分比而不是固定像素作为宽度，可以让网页元素根据屏幕大小自动调整。
（4）调整图像大小：用CSS设置图片宽度为100%，让图片在不同设备上都能按比例缩放，不会超出屏幕边界。
新知讲解
议一议
2、在实际做网页的过程中，DIV和CSS的应用难点在哪里？
（1）复杂布局管理：创建复杂页面布局时，使用多个DIV和CSS样式可能会混淆，管理和维护较困难。
（2）样式冲突和定位问题：CSS样式可能会冲突，导致显示错误；使用定位时也可能出现位置问题，需要调试。
（3）浏览器兼容性：不同浏览器对CSS支持不一致，可能显示效果不同。
（4）响应式设计和嵌套：设计响应式网页需要编写复杂CSS；DIV标签嵌套过多会使代码难阅读和维护。
课堂总结
1
了解网站建设步骤
网页页面美化
2
认识规划的重要性
3
掌握基础设计技能
4
理解申请域名空间
板书设计
开展问卷调查活动
开展问卷调查活动
了解敬老爱老美德
认识需要帮助的老人
熟悉问卷调查的方法
劳动之识——设计问卷需注意问题
劳动之行——能合作完善问卷设计
网页页面美化
1、了解网站建设步骤
2、认识规划的重要性
3、掌握基础设计技能
4、理解申请域名空间
课后作业：
1、班级网站需要哪些主要功能？请列举至少三个。
课后作业
1、班级网站需要哪些主要功能？请列举至少三个。
动态发布：发布最新的班级活动新闻和通知，确保同学们及时了解重要事项。
风采展示：展示班级成员的照片和介绍，分享班级活动的照片和视频，记录班级精彩时刻。
学习资源：提供学习资料的下载和在线作业提交平台，帮助同学们获取必要的学习资源并便捷提交作业。
交流平台：设置留言板和在线聊天功能，促进同学间互动交流事。
联系方式：显示班级和老师的联系方式，提供便捷的联系渠道。
资源分享：集合并分享各类学习资源和应用工具的链接，方便同学们查找和使用，提高学习效率。
58
https://www.21cnjy.com/help/help_extract.php
让备课更有效
www.21cnjy.com
Thanks!

展开更多......

收起↑