资源简介 (共32张PPT)第一单元 第4课组建网站跟我做（桂科版）七年级下1核心素养目标3新知讲解5拓展延伸7板书设计2新知导入4课堂练习6课堂总结课后作业801核心素养目标信息意识计算思维数字化学习与创新信息社会责任不创建或传播虚假信息的链接。避免恶意链接对用户造成误导或伤害。尝试创新的超链接形式，如动态链接、多媒体链接或交互式导航菜单。提升网页的互动性和吸引力。能够将复杂的网页结构分解为多个页面和模块。通过超链接实现这些页面和模块之间的逻辑连接。理解超链接在网页设计中的作用，资源或外部网站。认识到超链接对于信息传播和用户导航的重要性。02新知导入活动背景壮壮和小伙伴们各自负责的网页已经设计得差不多了，接下来就要考虑如何将制作好的网页关联起来，形成一个完整的网站。壮壮回想起以前认识的老朋友——“超链接”。网页之间的超链接设置跟以前学习的超链接设置一样吗？网页之间的超链接是指通过一个链接将一个网页与另一个网页连接起来。这种链接可以是：站内链接或者站外链接。02新知导入活动目标1、理解网页设计超链接的跳转过程。2、了解开发着工具的用法。3、体验网页之间的跳转过程。03新知讲解一、页面的跳转03新知讲解二、开发者工具对比浏览器窗口和“开发者工具”的内容。03新知讲解点击导航栏的“制作过程”时，网页从图 1-4-1跳转到了图 1-4-2，这说明了什么？这在“开发者工具”中对应的 HTML代码是哪部分？探究实践制作过程。 03新知讲解仔细查看图 1-4-3 的“开发者工具”窗口中的代码，能实现网页跳转效果的 HTMI代码有哪些？找一找，比一比，写下它们之间的异同。探究实践制作原料制作过程制作过程。 03新知讲解超链接就像网页之间的桥梁，常见类型为文本超链接和图像超链接，对应的常见代码如下表所示。其中，的src 属性指向的是图像地址，中的 href属性指向的是网页链接地址。小贴士03新知讲解三、页面跳转的实现方式类型 代码举例文本超链接 需要显示的文字图像超链接 03新知讲解结合你之前设计的网站结构图，使用箭头来表示跳转的方向，实现网页之间的链接，完善表内的网站链接关系图。马上行动03新知讲解在设置超链接时，不可使用文件管理系统中的绝对路径来表示网页的位置，要使用相对地址。如果目标文件与当前文件在同一目录下，直接使用文件名即可；如果目标文件位于当前文件的子目录中，需要标明子目录名和文件名；如果目标文件位于当前文件的父目录或更上级目录中，可以使用“../”来表示上一级目录，如下表所示。小贴士03新知讲解小贴士层级 代码举例指向当前文件夹 显示文字指向子文件夹 显示文字指向上一层文件夹 显示文字03新知讲解四、知识讨论选择一个你喜欢的网站进行浏览，感受超链接的效果。观察这些超链接是怎么设置的，比如所处的位置是否显眼？点击后网页的跳转是否流畅？有没有遇到过点击了没反应，或者跳转到了错误页面的情况？把你的浏览体验记录在下表中和大家分享。03新知讲解四、知识讨论超链接的形式 所在位置/显示效果 主要作用 我的感受图像文本我发现设计得好的超链接具有的特点：按钮列表锚点链接导航栏，鼠标悬停时放大提供视觉吸引力，引导点击直观、吸引人，易于识别段落中，下划线并改变颜色直接引导用户到相关内容清晰、直接，易于理解页面底部，悬停时颜色变化突出重要操作明显、易点击，提高转化率侧边栏，项目符号前组织信息，方便浏览结构化、易于导航页面内不同部分实现页面内快速导航提高页面内导航效率直观、清晰、一致、易于访问、提供反馈、增强用户体验。这些特点确保了超链接不仅在视觉上吸引人，而且在功能上也能满足用户的需求，提高网站的可用性和用户满意度。04课堂练习一、选择题1、在HTML中，创建指向外部网站的超链接，应该使用哪个标签？( )A. B. C. D. 2、以下哪个属性用于在新标签页中打开超链接？（ ）A. href B. target C. src D. alt3、在HTML中，哪个属性可以为超链接提供额外的信息，当用户将鼠标悬停在链接上时显示？（ ）A. title B. altC. href D. srcBBA04课堂练习4、如果你有一个图片链接到一个网页，你应该将标签放在哪个标签内部？（ ）A. B. C. D. 5、 HTML超链接属性 。（ ）以下哪个选项正确描述了HTML中标签的href属性的作用？A. 定义链接文本的样式B. 指定链接的目标URL地址C. 控制链接在何种设备上打开D. 确定链接文本的显示语言二、判断题1、在HTML中，给超链接设置target="_blank"属性时，该链接总会在新的浏览器标签页中打开。( )ABX04课堂练习三、操作题1、改变颜色，在 标签内添加一个 style 属性，用于定义内联样式。如制作原料，将超链接文字的颜色设置为白色，效果如图所示。制作原料04课堂练习2、去掉下划线，修改style属性,如制作原料，将超链接文字的下划线效果去掉，效果如图所示。制作原料04课堂练习3、设置背景色，修改 style 属性，如制作原料，给超链接文字设置背景色效果如图所示。制作原料05拓展延伸超链接的结构和格式绝对URL：完整的网址，如 https://www.。相对URL：相对于当前页面的网址，如 /about 或 ../contact.html。协议相关：了解不同协议（如 http, https, ftp）对链接行为的影响。05拓展延伸超链接的属性hreflang：指定链接内容的语言，有助于多语言网站的SEO。type：指定链接资源的MIME类型，有助于浏览器正确处理资源。05拓展延伸链接的动态生成JavaScript：使用JavaScript动态生成链接，如在用户交互后创建链接。服务器端语言：如PHP、Python等，可以在服务器端生成动态链接。05拓展延伸链接的安全性防止链接欺骗：确保链接指向正确的地址，避免用户被误导到恶意网站。安全协议：使用HTTPS协议来保护链接的数据传输安全。06课堂总结1引入新知内容组建网站2学习超链接的使用方法3学习使用超链接的注意事项4完成课题练习5进行相关知识拓展1234507板书设计组建网站1、进行新知引入2、学习页面的跳转方式3、学习超链接的使用4、完成课堂练习5、进行知识拓展课后作业。1、完成页面跳转练习08课后作业1、在HTML中创建一个指向 "https://www." 的超链接，并且当用户点击这个链接时，它应该在新的浏览器标签页中打开。请填写以下HTML代码中的空白部分：点击访问示例网站。点击访问示例网站08课后作业2、设计一个简单的网页导航栏，包含三个超链接，分别指向“首页”、“关于我们”和“联系我们”三个页面。使用HTML编写代码。要求：链接文本应该清晰描述链接的目的。假设这三个页面的文件名分别为 index.html、about.html 和 contact.html，它们都位于网站的根目录下。08课后作业首页关于我们联系我们https://www.21cnjy.com/recruitment/home/fine 展开更多...... 收起↑ 资源列表 【桂科版】《信息科技》七年级下册第1单元第4课《组建网站跟我做》.pptx 锚点链接和图片链接.mp4
