第1单元第4课《组建网站跟我做》课件 桂科版《信息科技》七年级下册.pptxVIP

第一单元第4课组建网站跟我做（桂科版）七年级下

1核心素养目标3新知讲解5拓展延伸7板书设计2新知导入4课堂练习6课堂总结课后作业8

01核心素养目标信息意识计算思维数字化学习与创新信息社会责任不创建或传播虚假信息的链接。避免恶意链接对用户造成误导或伤害。尝试创新的超链接形式，如动态链接、多媒体链接或交互式导航菜单。提升网页的互动性和吸引力。能够将复杂的网页结构分解为多个页面和模块。通过超链接实现这些页面和模块之间的逻辑连接。理解超链接在网页设计中的作用，资源或外部网站。认识到超链接对于信息传播和用户导航的重要性。

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制作原料/aahref=制作过程.html”class=text制作过程/aahref=制作过程.html”class=text制作过程/aahref=制作原料.html”class=textimgsrc=五色摇米饭图片-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”显示文字/a

03新知讲解四、知识讨论选择一个你喜欢的网站进行浏览，感受超链接的效果。观察这些超链接是怎么设置的，比如所处的位置是否显眼？点击后网页的跳转是否流畅？有没有遇到过点击了没反应，或者跳转到了错误页面的情况？把你的浏览体验记录在下表中和大家分享。

03新知讲解四、知识讨论超链接的形式所在位置/显示效果主要作用我的感受图像文本我发现设计得好的超链接具有的特点：按钮列表锚点链接导航栏，鼠标悬停时放大提供视觉吸引力，引导点击直观、吸引人，易于识别段落中，下划线并改变颜色直接引导用户到相关内容清晰、直接，易于理解页面底部，悬停时颜色变化突出重要操作明显、易点击，提高转化率侧边栏，项目符号前组织信息，方便浏览结构化、易于导航页面内不同部分实现页面内快速导航提高页面内导航效率直观、清晰、一致、易于访问、提供反馈、增强用户体验。这些特点确保了超链接不仅在视觉上吸引人，而且在功能上也能满足用户的需求，提高网站的可用性和用户满意度。

04课堂练习一、选择题1、在HTML中，创建指向外部网站的超链接，应该使用哪个标签？()A.imgB.aC.divD.span2、以下哪个属性用于在新标签页中打开超链接？（）A.hrefB.targetC.srcD.alt3、在HTML中，哪个属