标签用于定义段落标签用于插入图片,标签用于创建链接。HTML文档的基本结构包括“头部”(head)和“主体”(body)两部分头部提供了关于网页的信息,如标题、字符编码、样式表链接等;而主体则包含了网页的具体内容,如文本、图片、链接等。通过学习HTML,我们可以尝试制作简单的网页,展示自己的想法和创意。05活动过程—自主探究与合作找到网页源代码中的标签,将与之间的内容填写在下方的横线上。在网页中找一找,看看这一内容出现在网页的哪个部分想一想标签代表的含义。 这一内容出现在网页的什么位置:它代表的含义是:低碳生活的记录浏览器的标签页上。定义网页的标题。05活动过程—自主探究与合作3.利用记事本编写“我的低碳生活”网页(1)在文件夹中新建一个“文本文档”,双击并打开“记事本”程序。(2)在记事本中输入以下基本的HTML代码:节能减排,从我做起我眼中的节能减排05活动过程—自主探究与合作这是一个关于个人如何进行节能减排的简单网页。(3)保存文件并关闭。(4)修改文件的扩展名为.html,如“节能减排.html”。(5)双击该文件,在默认浏览器中打开该网页,则可看到网页的显示效果。请借助搜索引擎,查找其他常用的HTML标签,学习它们的功能及用法,进一步丰富、完善你制作的网页。活动过程—自主探究与合作05知识拓展05活动过程—自主探究与合作 活动4:探究普通网页和移动端网页的主要差异普通网页(通常是为桌面浏览器设计的)与移动端网页在设计、功能和技术实现上有明显的差异,主要体现在以下几个方面:(1)屏幕尺寸与分辨率:(2)触摸交互:移动端网页依赖于触摸屏操作,如滑动、捏合缩放和点击。这要求设计时要考虑:普通网页针对高分辨率的大型显示器,常见的分辨率有1920x1080(全高清)。而移动端网页则针对智能手机和平板电脑设计,常见的分辨率范围从320x480(低端手机)到2560x1440(高端手机)。屏幕宽度和高度调整布局、字体大小和元素位置,还有图像和元素的清晰度。05活动过程—自主探究与合作与普通网页不同的原因:(3)加载速度:(4)内容呈现:普通网页与移动端网页的不同源自于它们所面对的设备、用户行为、网络条件以及技术能力等多个方面。移动端网页:加载速度缓慢。普通网页:通常连接到更快速和稳定的宽带网络,加载速度快。普通网页:可以包含复杂的交互元素,如下拉菜单、悬停效果等,这些在桌面环境中表现良好。移动端网页:需要考虑触摸操作,因此按钮和链接要足够大以便于点击,并避免重叠。此外,一些复杂的交互效果可能被简化或去除。05活动过程—自主探究与合作普通网页:常用顶部导航栏或侧边栏,提供多个选项供用户选择。移动端网页:通常使用汉堡菜单( )或底部导航栏,简化了导航结构,以节省空间并提升易用性。普通网页:字体大小相对较小,可以容纳更多文字,同时也允许使用较复杂的排版风格。移动端网页:为了提高可读性,字体通常会更大且间距更宽,以确保在小屏幕上阅读舒适。普通网页:通常采用多列布局,可以同时展示更多信息。用户能够快速浏览不同部分。移动端网页:一般采用单列或垂直滚动布局,以适应小屏幕。用户可以更方便地上下滑动查看内容。(5)导航设计:(6)输入方式:(7)布局设计:05活动过程—自主探究与合作普通网页:可以展示高分辨率的大型图像和视频,因为桌面设备的处理能力和带宽通常较高。移动端网页:往往使用压缩过的小图像,并可能采取延迟加载策略,仅在需要时加载媒体内容,以减少数据消耗和提高加载速度。在移动端,由于空间有限,开发者通常会优先展示最重要的信息。例如,关键功能和主要内容会被放置在页面的显眼位置,而次要信息则可能被隐藏在折叠菜单中。通过理解和应用这些差异,设计师和开发者可以创建出既美观又实用的移动网页,提供优质的用户体验。(8)图像和媒体内容:(9)优先级与重要性:活动过程—自主探究与合作05知识拓展05活动过程—自主探究与合作 活动5:完成移动端网页制作1.在原有基础上,增加要收集的信息--关于“碳排放量”计算内容提到环保,很多人都会想到节能减排、低碳出行、减少浪费等。其实每天上网、浏览视频、下载学习资料等这样的数字行为也会耗能,也会产生二氧化碳。通过相关知识学习,计算一下常见的数字行为耗能是多少。(1)数字行为和CO,如何关联到一起?数字行为会耗电,就会产生碳排放。如在线游戏。在线多人游戏不仅依赖于用户的设备,还需通过服务器进行数据交换。这种实时的数据传输和处理也会增加能耗。05活动过程—自主探究与合作(2)消耗的电能如何量化为碳排放?可以借助网络搜索查找相关的计算方法。二氧化碳排放(kg)=数字行为耗能(kWh)×碳排放因子(kg/kWh) ①2022年度全国电网平均排放因子为0.5703tCO2/kWh。(数据来源:中华人民共和国生态环境部)你能给大家讲清楚碳排放因子吗?排放因子是一个重要的环境科学和气候变化研究概念,用于量化特定活动或过程所产生的温室气体或其他污染物的排放量。通常以单位活动量为基础,如每千克燃料、每千米行驶距离、每吨产品等,来表示排放的数量。05活动过程—自主探究与合作②不同数字行为的平均耗能如表6-10所示。(数据来源:数字行动和服务的能源足迹评估)得到相应的计算结果,可以通过图表等形式呈现出来。如果想了解更多的碳排放知识,可以查看中国产品全生命周期温室气体排放数据库,下载“中国产品全生命周期温室气体排放系数集”进行深入的研究。(3)如果每天步行往返学校,我们可以减少多少碳排放?图6-10 不同数字行为的平均耗能答:4km×150g/km=600g05活动过程—自主探究与合作2. HTML5页面的制作与发布步骤(1)什么是HTML5。HTML5,简称H5,中文称为“超文本标记语言第5版”。H5不仅仅是一种语言,它还代表了一系列与网页开发相关的新技术和标准,因此H5也是指“基于HTML5的网页”或“使用HTML5技术开发的网站”。H5技术让网页变得更加丰富、互动性强,并且能够在各种设备(如计算机、平板电脑和手机等)上良好地显示。05活动过程—自主探究与合作应用了H5技术的网页通常具有以下特点:包含复杂的动画效果、动态图像及图表、视频播放或交互元素,能根据你的屏幕大小自动调整布局,保持内容和功能在不同设备上的可访问性。(2)选择开发平台。搜索有哪些可以帮助我们制作HTML5网页的平台并与小组同学合作,选择一款合适的完成制作任务。(3)制作与发布HTML5网页。05活动过程—自主探究与合作第一步,选择模板。登录后,平台通常会提供许多精美的H5模板。为了制作“低碳环保进校园”的H5页面,可以如图6-21所示在搜索框输入“环保”或“校园”等关键词,从搜索结果中选择一个合适的模板,单击“立即编辑”按钮即可以它作为起点进行编辑。图6-21 选择模板05活动过程—自主探究与合作第二步,添加并修饰标题。输入标题文字后,选择“标题”选项卡,可以根据需要对字体及排版进行修改,并在页面左侧实时观看预览效果(如图6-22所示)。图6-22 设置标题05活动过程—自主探究与合作第三步,编辑正文。选择“正文”选项卡,根据需要对字体及排版进行修改。你也可以选择“边框样式”给正文添加更加丰富的边框(如图6-23所示)。同样在页面左侧实时观看预览效果。图6-23 设置正文文字05活动过程—自主探究与合作第四步,添加其他元素。除此以外,还可以单击“十”按钮,添加图片、音频、视频等其他元素(如图6-24所示),使不同特点的内容以不同的形式进行展示,让页面效果更加丰富。图6-24 添加其他元素05活动过程—自主探究与合作第五步,添加互动功能。为了让H5页面更加生动有趣,可以添加一些互动功能。例如,添加一个问卷调查,了解同学们通过学习收获了哪些低碳环保新知识;还可以添加一个抽奖游戏,鼓励同学们积极参与环保行动。这些功能都可以通过诸如“组件”或“互动”等模块轻松实现。第六步,预览和发布。编辑完成后,可以单击“预览”按钮,查看H5页面的整体效果。如果满意,就可以单击“发布”按钮。06展示与分享将H5页面分享给同学们。一般的平台都会提供多种分享方式,如链接分享、二维码分享等,可以根据自己的需求选择合适的分享方式。参考表6-11,对本组工作进行评价。06展示与分享表6-11 工作评价表评价内容 评价标准 评价结果学习成果 完整展示团队的设计过程、支撑材料和结果 成果质量:H5网页质量是否达到预期 用户反馈:用户对H5网页的评价和反馈如何 ☆☆☆☆☆☆☆☆☆☆项目过程 展示团队在完成项目过程不同阶段的目标、遇到的问题和收获 1.项目计划 完整性:项目计划是否完整,是否考虑了所有关键步骤 合理性:计划是否合理,时间分配是否恰当 2.时间管理 准时性:是否按计划时间完成各阶段任务 灵活性:在遇到困难时是否能灵活调整计划 ☆☆☆☆☆☆☆☆☆☆06展示与分享续表:最终作品 准确且有创意的作品 1.创意性 主题创意:主题是否新颖、有吸引力 设计元素:是否使用了独特、有趣的设计元素 2.用户体验 导航设计:导航是否清晰、易于使用 布局合理性:页面布局是否合理、易于浏览 交互设计:页面交互是否流畅,用户操作是否便捷 3.内容完整性 信息呈现:是否全面呈现了所需信息 内容准确性:信息是否准确、无错误 ☆☆☆☆☆☆☆☆☆☆06展示与分享续表:最终作品 4.页面质量 视觉效果:页面视觉效果是否美观、符合主题 响应速度:页面加载速度是否快、无明显延迟 兼容性:是否能在不同设备和浏览器上正常显示 ☆☆☆☆☆☆☆☆☆☆07反思与评估1.信息发布方式的分类对比在线电子书、在线短视频、网页、HTML5网页都可以帮助我们实现在互联网上发布信息,它们各有特点。在一些场景下,几种信息发布方式都可以胜任;但在另一些场景下,只有选择其中的某种方式才是最为合适的。请你从实时性、交互性、传递范围和信息类型这几个方面对这四种信息传递方式进行分类比较,将结果补充在如图6-25所示的思维导图中。你可以借助思维导图软件完成,也可以直接填写在页面的空白处上。07反思与评估图6-25 互联网信息传递方式比较07反思与评估互联网信息传递实时性在线电子书:实时性相对较弱。电子书的内容一般在发布后不会频繁更新,除非有新版本推出。在线短视频:实时性较强。短视频平台上的内容创作者可以随时上传新的视频,你能够迅速观看到最新的内容。网页:实时性一般。一些新闻网站、资讯类网页会及时更新内容,但普通的网页可能更新不那么频繁。HTML5 网页:与普通网页类似,实时性一般。07反思与评估交互性在线电子书:交互性较弱。一般来说,你主要是进行翻页、标注等基本操作,与其他用户或内容的交互有限。在线短视频:交互性较强。你可以点赞、评论、分享视频,与创作者和其他观众进行互动。网页:交互性因网页类型而异。一些网站提供丰富的交互功能,如在线购物、论坛讨论、在线游戏等,你可以与网站进行较为复杂的交互。HTML5 网页:通常具有较强的交互性。HTML5 技术支持更多的多媒体元素和交互效果,可以为你提供更丰富的交互体验。07反思与评估传递范围在线电子书:传递范围较广。可以通过各种电子书平台在全球范围内传播,只要有网络连接,你就可以下载和阅读。在线短视频:传递范围非常广。短视频平台拥有庞大的用户群体,内容可以迅速传播到世界各地。网页:传递范围广。几乎任何有网络连接的地方都可以访问网页,不同类型的网页可以满足不同地区、不同人群的需求。HTML5 网页:传递范围与普通网页类似,也很广。由于 HTML5 具有更好的兼容性和跨平台性,可以在多种设备上访问,扩大了传递范围。07反思与评估信息类型在线电子书:主要以文字内容为主,可能会有一些插图。信息类型较为单一,通常是文学作品、专业书籍、小说等。在线短视频:信息类型丰富多样,包括娱乐、搞笑、美食、旅游、知识科普、新闻资讯等。可以通过图像和文字的结合,生动地传达各种信息。网页:信息类型广泛,包括新闻、资讯、购物、娱乐、学术研究等。可以以文字、图片、视频等多种形式呈现信息。HTML5 网页:同样可以包含多种信息类型,并且由于其技术优势,可以实现更复杂的多媒体展示和交互效果,为你提供更加丰富的信息体验。07反思与评估需要说明的是,每项所填写的内容并不是绝对的。例如,对交互性高低的判断,有人认为共享文档的交互性很高,也有人认为共享文档的交互性并不强,因此把它放在了“低交互”中。不同的分类方式依据具体的使用场景及个人的主观感受可能会有所不同,你只需尽量全面地考虑各种可能的情况并依据自己的判断进行补充即可,并没有标准的答案。填写完成后,与同学相互分享各自完成的思维导图,针对不同的部分阐述自己的观点。07反思与评估2.信息发布方式问题研讨学校即将举行一次“低碳环保”主题宣传的活动,同学们需要选择最合适的互联网信息传递方式通知参与者,针对活动的筹备进行实时沟通、收集反馈信息、制作并共享活动资料等。你认为上述活动分别采用哪种信息传递方式最为合适,并从实时性、交互性、传递范围和信息类型等方面给出理由填写在表6-12中。07反思与评估表6-12 选择恰当的信息传递方式活动环节 最合适的方式 理由通知参与者 电子邮件 具有很强的实时性,消息能够即时送达,确保参与者第一时间收到活动通知。针对活动的筹备进行实时沟通 即时通讯软件 群组成员可以随时发言、讨论,在线协作平台还可以共同编辑文档、表格等,交互性强。收集反馈信息 在线问卷 可以通过链接或二维码广泛分享问卷,收集来自不同人群的反馈,传递范围大。制作并共享活动资料 共享文档平台 可以存储和共享各种类型的活动资料,如文档、图片、视频等。07反思与评估3.信息发布方式的比较在线电子书、在线短视频、网页、HTML5网页这几种信息发布方式都依赖于互联网进行信息的发布和传播,可以通过互联网平台、网站、应用等渠道被用户访问和获取;它们都支持多媒体内容,如文本、图像、视频、音频等,能够提供丰富的视觉和听觉体验,让信息传达更加生动和直观;它们都设计为可跨不同设备和操作系统平台访问,这意味着用户可以使用各种终端(如台式计算机、手机、平板电脑等)来浏览和获取信息;07反思与评估它们都具有较强的用户互动性,虽然互动程度各不相同,但这些信息发布方式都支持一定程度的用户互动,如评论、分享、点赞、收藏等,有助于提升用户的参与度等特点。同时,它们又有各自的特点和适用范围,如表6-13所示。07反思与评估信息发布方式 优势 劣势 适用场景 限制条件在线电子书 内容详尽,适合深度阐述;可配合丰富的图文排版,提升阅读体验。 交互性相对较低。 篇幅较长、内容详尽的信息。 对于不擅长使用电子设备的受众有门槛;内容更新速度可能较慢。在线短视频 信息传达直观、快速易于吸引用户注意力;高度交互性和娱乐性易于在社交媒体中传播。 内容简短,可能无法深入探讨;制作成本可能较高,需要专业设备和技能。 快速传达信息吸引各年龄段的人群。 需要稳定的网络环境和媒体支持;对网络带宽和设备性能有一定要求。表6-13 信息发布平台比较表续表:网页 结构化布局,信息层次清晰,易于导航;可集成多种媒体元素,丰富展示形式。 交互性取决于网页设计和功能实现;更新内容需要一定的技术支持和时间成本。 官方网站、新闻下门户网站;提供在线服务、资源下载功能。 需要关注网页的安 全性和隐私保护。HTML5网页 兼容性好,适配不同设备;支持更丰富的多媒体内容和交互元素。 某些高级功能可能需要额外的技术支持和开发成本。 创建互动性强、功能丰富的宣传。 某些浏览器版本可能不支持HTML5的全部功能;需要关注网页的安全性和跨平台兼容性。07反思与评估4.畅想未来的信息发布方式随着物联网、人工智能、虚拟现实技术的出现与高速发展,未来的信息发布形式将比现在更加丰富,效果更加逼真。请结合这些新技术,畅想并描述一种未来可能的创新信息发布方式。这种新方式应如何利用这些技术的特点?它将给人们的生活带来哪些便利或新奇体验?分析其对未来社会可能产生的影响。07反思与评估未来的信息发布方式可以设想为一种“沉浸式信息体验平台”,结合物联网、人工智能和虚拟现实技术,创造出一个全新的信息传播环境。这种新方式可以利用这些物联网环境感知的特点、人工智能自然语言处理的特点、虚拟现实沉浸式体验的特点。请结合这些新技术,畅想并描述一种未来可能的创新信息发布方式。这种新方式应如何利用这些技术的特点?07反思与评估它将给人们的生活带来哪些便利或新奇体验?便利与新奇体验:1.个性化信息推送:用户可以根据自己的兴趣和需求,定制信息内容,避免信息过载。2.身临其境的学习与体验:通过VR技术,用户可以在家中体验到博物馆、自然景观、历史遗址等场所的虚拟游览,提升学习的趣味性和效果。3.即时互动:用户可以与信息内容进行实时互动,提出问题并获得即时反馈,提升信息获取的效率。07反思与评估分析其对未来社会可能产生的影响。1.信息获取的民主化:每个人都可以根据自己的需求和兴趣获取信息,减少信息不对称,促进社会公平。2.教育方式的变革:沉浸式学习将成为主流,传统教育模式将被打破,学习变得更加灵活和个性化。3.社交方式的演变:人们的社交活动将更加依赖于虚拟环境,可能导致现实社交的减少,但也可能促进全球范围内的联系。4.心理健康的关注:虚拟环境的沉浸式体验可能对心理健康产生影响,需关注其对用户心理状态的潜在影响。07反思与评估可以从智能家居、智能交通、智能教育、智能医疗等领域入手,想象在这些领域中信息是如何通过物联网、人工智能等技术进行发布和接收的。也可以考虑虚拟现实技术如何让我们以全新的方式体验和分享信息。不要忘记思考这些新技术如何相互融合,共同推动信息发布方式的革新。07反思与评估可以从智能家居、智能交通、智能教育、智能医疗等领域入手,想象在这些领域中信息是如何通过物联网、人工智能等技术进行发布和接收的。1.智能家居:发布:智能家居设备通过物联网连接,将家中的各种信息实时发送到中央控制系统。中央控制系统可以将这些信息显示在智能显示屏上。接收:用户可以通过手机 APP 远程控制智能家居设备,发送指令调整灯光亮度、温度设置、开启电器等。2.智能交通发布:道路上的物联网传感器可以实时监测交通流量、车速、路况等信息。07反思与评估息,并将这些信息发送到交通管理中心。交通管理中心通过电子路牌、广播、手机导航软件等渠道发布交通信息,提醒司机选择最佳路线,避免拥堵。接收:智能交通系统可以接收用户的出行需求信息,然后为用户提供个性化的出行方案,包括最佳的交通方式、路线和换乘信息。3.智能教育发布:智能教育平台可以将课程内容、作业、考试安排等信息发布给学生和教师。学生可以通过电脑、平板或手机登录教育平台,查看课程资料、完成作业和参加考试。接收:学生可以通过智能教育设备向教师提问、提交作业和考试答案。07反思与评估教师可以在教育平台上接收学生的问题和作业,进行批改和回复。4.智能医疗发布:医院的医疗信息系统可以将患者的病历、检查报告、诊断结果等信息发布给医生和患者。医生可以通过电脑或移动设备查看患者的病历资料,制定治疗方案。患者可以通过手机 APP 或自助终端查询自己的检查报告和诊断结果。接收:智能医疗系统可以接收来自医学研究机构和制药公司的最新医疗技术和药物信息,为医生提供治疗参考和选择。同时,系统也可以接收患者的反馈和评价,不断改进医疗服务质量。07反思与评估虚拟现实技术如何让我们以全新的方式体验和分享信息?1.虚拟社交分享:虚拟现实为社交带来了全新的维度。可以与朋友和家人在虚拟世界中相聚,共同体验各种活动。通过虚拟现实社交平台,可以分享自己的虚拟体验和创作。这种分享方式更加生动、直观,能够让朋友们更好地了解你的经历和感受。2.实时直播分享:虚拟现实技术可以实现实时直播,让观众身临其境地感受现场的氛围。企业也可以利用虚拟现实直播进行产品发布会、培训课程等活动的分享。参与者可以通过虚拟现实设备远程参与,与现场的演讲者和其他参与者进行互动,提高活动的参与度和效果。07反思与评估3.创意内容分享:虚拟现实激发了人们的创造力,让用户可以创作各种虚拟内容并进行分享。这些创意内容可以展示你的想象力和才华,同时也为其他用户带来了新的娱乐和学习资源。艺术家和设计师可以利用虚拟现实技术进行艺术创作和展示。可以在虚拟空间中创作绘画、雕塑、建筑等作品,并通过虚拟现实展览与观众分享。这种创新的艺术展示方式打破了传统展览的空间限制,让更多的人能够欣赏到优秀的艺术作品。08拓展延伸1、日常生活中如何践行低碳生活?1. 能源使用:节约用电,如使用节能电器,随手关灯,减少空调使用时长或适当调高、降低温度设定。节约用水,如缩短洗澡时间,采用节水器具,一水多用。2. 家居物品选择:购买环保家具,其生产过程中碳排放较低,且使用的材料较为环保。08拓展延伸2、低碳生活是否意味着生活质量下降?并非如此。比如乘坐公共交通时,可以阅读、听音乐,也是一种惬意的体验。减少肉类摄入而增加素食比例,有利于身体健康。而且低碳生活中的节能措施,如使用节能电器,还能降低生活成本。选择步行或骑自行车出行,在锻炼身体的同时,还能让人们更细致地感受周围环境,发现城市中的美好角落,增加生活乐趣。08拓展延伸3、实施低碳生活的实际操作方面我们该如何做?1.如何确保家庭装修符合低碳要求?选择环保型的建筑材料,如低挥发性有机化合物(VOC)的涂料;采用节能灯具和节水器具;合理设计室内空间,充分利用自然通风和采光等。2.在城市中推广低碳出行有哪些难点?基础设施不足是一个难点,比如部分地区自行车道规划不完善,影响骑行安全;公共交通的便利性和舒适性有待提高,如高峰时期过于拥挤;人们的出行习惯也较难改变,很多人习惯以私家车为主要出行方式。09课堂练习在城市中推行低碳生活有哪些难点?部分城市的公共交通网络覆盖不足,公交线路和站点设置不合理,导致居民出行不便,降低了他们选择公共交通的意愿。例如,一些新建小区周边缺乏公交线路,居民不得不依赖私家车出行。垃圾分类设施配备不足,很多地方垃圾桶没有按照垃圾分类要求设置,缺乏明确的标识和分类投放指引,居民难以进行准确的垃圾分类。很多居民对低碳生活的概念和意义了解不够深入,不知道自己的日常行为与碳排放之间的关系,缺乏主动践行低碳生活的意识。10课堂小结通过记录我们的低碳生活的课程,我们规划设计了“我的低碳生活”网页内容;了解了身边同学、朋友及其家人对“低碳生活”的认识;了解了什么是HTML;探究了普通网页和移动端网页的主要差异;最后完成移动端网页制作。因此在以后的生活中我们可以自己选择合适的移动端网页编辑工具,制作成网页的方式来记录我们的低碳生活。11板书设计记录我们的低碳生活一、规划设计“我的低碳生活”网页内容二、了解身边同学、朋友及其家人对“低碳生活”的认识三、了解网页背后的HTML四、探究普通网页和移动端网页的主要差异五、完成移动端网页制作课后作业1、回家后根据自己的生活方式设计一个自己的低碳生活。https://www.21cnjy.com/recruitment/home/fine
这是一个关于个人如何进行节能减排的简单网页。