第1单元第4课《组建网站跟我做》课件 桂科版《信息科技》七年级下册_第1页
第1单元第4课《组建网站跟我做》课件 桂科版《信息科技》七年级下册_第2页
第1单元第4课《组建网站跟我做》课件 桂科版《信息科技》七年级下册_第3页
第1单元第4课《组建网站跟我做》课件 桂科版《信息科技》七年级下册_第4页
第1单元第4课《组建网站跟我做》课件 桂科版《信息科技》七年级下册_第5页
已阅读5页，还剩25页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第一单元第4课组建网站跟我做（桂科版）七年级下1核心素养目标3新知讲解5拓展延伸7板书设计2新知导入4课堂练习6课堂总结课后作业801核心素养目标信息意识计算思维数字化学习与创新信息社会责任不创建或传播虚假信息的链接。避免恶意链接对用户造成误导或伤害。尝试创新的超链接形式，如动态链接、多媒体链接或交互式导航菜单。提升网页的互动性和吸引力。能够将复杂的网页结构分解为多个页面和模块。通过超链接实现这些页面和模块之间的逻辑连接。理解超链接在网页设计中的作用，资源或外部网站。认识到超链接对于信息传播和用户导航的重要性。02新知导入活动背景壮壮和小伙伴们各自负责的网页已经设计得差不多了，接下来就要考虑如何将制作好的网页关联起来，形成一个完整的网站。壮壮回想起以前认识的老朋友——“超链接”。网页之间的超链接设置跟以前学习的超链接设置一样吗？网页之间的超链接是指通过一个链接将一个网页与另一个网页连接起来。这种链接可以是：站内链接或者站外链接。02新知导入活动目标1、理解网页设计超链接的跳转过程。2、了解开发着工具的用法。3、体验网页之间的跳转过程。03新知讲解一、页面的跳转03新知讲解二、开发者工具对比浏览器窗口和“开发者工具”的内容。03新知讲解点击导航栏的“制作过程”时，网页从图1-4-1跳转到了图1-4-2，这说明了什么？这在“开发者工具”中对应的HTML代码是哪部分？探究实践<ahref="制作过程.html”class="text">制作过程</a>。​03新知讲解仔细查看图1-4-3的“开发者工具”窗口中的代码，能实现网页跳转效果的HTMI代码有哪些？找一找，比一比，写下它们之间的异同。探究实践<ahref="制作原料.html”class="text">制作原料</a><ahref="制作过程.html”class="text">制作过程</a><ahref="制作过程.html”class="text">制作过程</a><ahref="制作原料.html”class="text"<imgsrc="五色摇米饭图片-1.png”alt="五色糯米饭图”title="五色糯米饭图"</a>。​03新知讲解超链接就像网页之间的桥梁，常见类型为文本超链接和图像超链接，对应的常见代码如下表所示。其中，<img>的src属性指向的是图像地址，<a>中的href属性指向的是网页链接地址。小贴士03新知讲解三、页面跳转的实现方式类型代码举例文本超链接<ahref="链接地址">需要显示的文字</a>图像超链接<ahref="链接地址"><imgsrc="图像位置"></a)03新知讲解结合你之前设计的网站结构图，使用箭头来表示跳转的方向，实现网页之间的链接，完善表内的网站链接关系图。马上行动03新知讲解在设置超链接时，不可使用文件管理系统中的绝对路径来表示网页的位置，要使用相对地址。如果目标文件与当前文件在同一目录下，直接使用文件名即可；如果目标文件位于当前文件的子目录中，需要标明子目录名和文件名；如果目标文件位于当前文件的父目录或更上级目录中，可以使用“../”来表示上一级目录，如下表所示。小贴士03新知讲解小贴士层级代码举例指向当前文件夹<ahref=”文件名.html”>显示文字</a>指向子文件夹<ahref=”子文件夹名/文件名.html”>显示文字</a>指向上一层文件夹<ahref=”../文件名.html”>显示文字</a03新知讲解四、知识讨论选择一个你喜欢的网站进行浏览，感受超链接的效果。观察这些超链接是怎么设置的，比如所处的位置是否显眼？点击后网页的跳转是否流畅？有没有遇到过点击了没反应，或者跳转到了错误页面的情况？把你的浏览体验记录在下表中和大家分享。03新知讲解四、知识讨论超链接的形式所在位置/显示效果主要作用我的感受图像文本我发现设计得好的超链接具有的特点：按钮列表锚点链接导航栏，鼠标悬停时放大提供视觉吸引力，引导点击直观、吸引人，易于识别段落中，下划线并改变颜色直接引导用户到相关内容清晰、直接，易于理解页面底部，悬停时颜色变化突出重要操作明显、易点击，提高转化率侧边栏，项目符号前组织信息，方便浏览结构化、易于导航页面内不同部分实现页面内快速导航提高页面内导航效率直观、清晰、一致、易于访问、提供反馈、增强用户体验。这些特点确保了超链接不仅在视觉上吸引人，而且在功能上也能满足用户的需求，提高网站的可用性和用户满意度。04课堂练习一、选择题1、在HTML中，创建指向外部网站的超链接，应该使用哪个标签？()A.<img>B.<a>C.<div>D.<span>2、以下哪个属性用于在新标签页中打开超链接？（

）A.hrefB.targetC.srcD.alt3、在HTML中，哪个属性可以为超链接提供额外的信息，当用户将鼠标悬停在链接上时显示？（

）A.titleB.altC.hrefD.srcBBA04课堂练习4、如果你有一个图片链接到一个网页，你应该将<img>标签放在哪个标签内部？（

）A.<a>B.<div>C.<span>D.<p>5、HTML超链接属性

。（

）以下哪个选项正确描述了HTML中<a>标签的href属性的作用？A.定义链接文本的样式B.指定链接的目标URL地址C.控制链接在何种设备上打开D.确定链接文本的显示语言二、判断题1、在HTML中，给超链接设置target="_blank"属性时，该链接总会在新的浏览器标签页中打开。()ABX04课堂练习三、操作题1、改变颜色，在<a>标签内添加一个style属性，用于定义内联样式。如制作原料，将超链接文字的颜色设置为白色，效果如图所示。<ahref="制作原料.htmlstyle=”color:white”class="text">制作原料</a>04课堂练习2、去掉下划线，修改style属性,如制作原料，将超链接文字的下划线效果去掉，效果如图所示。<ahref="制作原料.htmlstyle=”text-decoration=none”class="text">制作原料</a>04课堂练习3、设置背景色，修改style属性，如制作原料，给超链接文字设置背景色效果如图所示。<ahref="制作原料.htmlstyle=”background-color:#E7398F”class="text">制作原料</a>05拓展延伸超链接的结构和格式绝对URL：完整的网址，如

。相对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中创建一个指向""的超链接，并且当用户点击这个链接时，它应该在新的浏览器标签页中打开。请填写以下HTML代码中的空白部分：<ahref="______"target="______">点击访问示例网站</a>。<ahref=""target="_blank">点击访问示例网站</a>08课后作业2、设计一个简单的网页导航栏，包含三个超链接，分别指向“首页”、“关于我们”和“联系我们”三个页面。使用HTML编写代码。要求：链接文本应该清晰描述链接的目的。假设这三个页面的文件名分别为index.html、about.html和contact.html，它们都位于网站的根目录下。08课后作业<body>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论