小学信息技术五年级下册《初识网页工坊》核心知识清单

小学信息技术五年级下册《初识网页工坊》核心知识清单

一、网页制作基础概念与站点管理

（一）认识网页与网站

1、网页与网站的定义及关系：网站是一个存储在计算机上的、由多个相互关联的网页通过超链接组成的整体。网页则是构成网站的基本元素，是使用超文本标记语言（HTML，HyperMarkupLanguage）编写的文档，通常以.htm、.html、.asp、.php等为扩展名。一个网站至少包含一个网页，我们通过浏览器看到的每一个画面就是一个网页。★【基础】【概念理解】

2、网页的实质：虽然我们在浏览器中看到丰富多彩的图文并茂的页面，但网页的本质上是一个包含特定标签的纯文本文件。浏览器的作用是解释这些标签，并以我们设定的方式将文字、图片、声音、动画等多媒体元素展示出来。★【基础】【核心原理】

3、网页三要素：文字、图形图像、超链接是构成网页的三大核心要素。文字是传递信息的主体；图形图像用于美化页面、直观展示内容；超链接则是网页的灵魂，它使全球网络中的无数网页相互连接，形成一个庞大的信息系统。▲【高频考点】【基础】

4、认识Frontpage窗口：Frontpage是一款所见即所得的网页编辑软件。其工作界面主要由标题栏、菜单栏（包含文件、编辑、查看、插入、格式、工具、表格等常用菜单）、常用工具栏、格式工具栏、视图栏（网页、文件夹、报表、导航、超链接、任务）、编辑区（工作区）以及状态栏组成。需要特别注意的是编辑区左下角的“设计”、“拆分”、“代码”、“预览”四个切换选项卡，这分别是设计视图、代码视图、拆分视图和预览视图。【基础】【操作界面】

（二）站点的创建与管理

5、为什么要建立站点：在进行网页制作前，必须先建立一个站点。站点是一个用于存放和管理网站所有相关文件（包括网页文件、图片文件、音频文件、视频文件等）的文件夹。建立站点可以确保文件路径的正确性，便于组织和管理网站资源，是网站发布和正常浏览的基础。如果不建立站点而直接创建网页，当插入图片或建立超链接时，Frontpage会自动使用绝对路径，这会导致文件移动或上传后链接失效。▲【非常重要】【操作前提】

6、新建站点的步骤：启动Frontpage后，点击“文件”菜单，选择“新建”，在右侧的任务窗格中选择“由一个网页组成的网站...”，然后在弹出的“网站模板”对话框中选择“空白网站”，并在右侧“指定新网站的位置”框中输入或浏览选择本地硬盘上的一个文件夹（例如：D：\我的网站）。点击“确定”后，一个空的站点即创建完成。★【基础】【操作技能】

7、站点的打开与关闭：如需修改已存在的站点，需在Frontpage中点击“文件”菜单，选择“打开网站”，找到站点文件夹并选中，点击“打开”。关闭站点可直接关闭程序或打开其他站点。【基础操作】

8、站点中的文件管理：在“文件夹”视图下，可以清晰地看到站点的目录结构。通常，我们会将所有的网页文件存放在站点根目录下，并创建独立的文件夹来分类存放资源。例如，创建一个名为“images”的文件夹专门存放图片，创建一个名为“sound”或“media”的文件夹存放音频视频文件。对站点内的文件进行重命名、移动、删除等操作，都应在Frontpage的“文件夹”视图下进行，以保证超链接的自动更新和维护。▲【重要】【操作规范】

9、默认主页（首页）：每个网站都有一个默认的主页，当访问者输入网址而不指定具体文件名时，服务器会自动显示这个页面。在Frontpage中，新建的空白网站的默认主页文件名通常是index.htm或index.html。这个文件必须存放在站点的根目录下。▲【高频考点】【重要概念】

二、网页文本编辑与基础修饰

（一）网页中的文本操作

10、创建与保存网页：在站点打开的情况下，点击常用工具栏的“新建普通网页”按钮或使用快捷键Ctrl+N，即可创建一个空白网页。保存时点击“保存”按钮或使用快捷键Ctrl+S，在弹出的“另存为”对话框中，需要设置网页文件的“文件名”（如：aboutme.htm）和“网页标题”（即在浏览器标题栏显示的文本，可通过“更改标题”按钮进行设置）。▲【高频考点】【操作技能】

11、输入与编辑文本：在编辑区直接输入文字即可。文字的选中、、粘贴、剪切、删除等操作与Word等文字处理软件完全相同，可通过菜单、工具栏按钮或快捷键（Ctrl+C、Ctrl+V、Ctrl+X）完成。【基础技能】

12、设置文本格式：选中要修饰的文字，通过“格式”工具栏或“格式”菜单中的“字体”命令，可以设置文字的字体、字形（加粗、倾斜）、字号、颜色、下划线以及各种特殊效果（如删除线、上标、下标等）。需要注意的是，网页中使用的字体必须是浏览者计算机上也安装的字体，否则浏览器会显示为默认字体（通常是宋体）。因此，不建议使用过于冷僻的字体。★【重要】【操作技能】

13、设置段落格式：将光标置于段落中或选中多个段落，通过“格式”菜单中的“段落”命令，可以设置段落的对齐方式（左对齐、居中、右对齐、两端对齐）、缩进（文本之前、文本之后、首行缩进）以及段落间距（段前、段后、行距大小）。★【重要】【操作技能】

14、首行缩进的实现技巧：在Frontpage中，要实现段落首行空两格（中文段落格式），通常不推荐使用连续按空格键的方式，因为不同浏览器对空格的解析可能存在差异。标准且有效的方法是：在“段落”设置中，找到“缩进”区域的“首行缩进”选项，并设置为“24”或“2em”（根据字号大小，24像素通常相当于两个中文字符的宽度）。或者，在输入法为全角状态下，按两次空格键也可以实现，但用段落格式设置更为规范和可控。▲【易错点】【难点】

15、换行与分段：在编辑文本时，直接按Enter（回车键）会产生一个新的段落，段落之间会有明显的行间距。如果希望只是简单地换到下一行，而不开始新的段落（即行距不变），则需要使用“Shift+Enter”组合键，这相当于插入一个HTML的换行标签

。▲【重要】【操作区别】

（二）网页整体效果美化

16、设置网页背景：通过“格式”菜单中的“背景”命令，或在网页空白处右键点击选择“网页属性”，在弹出的“网页属性”对话框中选择“格式”选项卡。在此可以设置背景颜色（可点击“其他颜色”选择更多色彩），也可以勾选“背景图片”并点击“浏览”按钮，选择站点内（通常存放在images文件夹）的一张图片作为网页的背景。需要特别注意的是，背景图片会像铺瓷砖一样平铺满整个网页。▲【高频考点】【操作技能】

17、应用网页主题：主题是一套统一的设计元素和配色方案，包括背景图案、按钮样式、标题字体、颜色搭配等。点击“格式”菜单，选择“主题”，在右侧任务窗格中可以选择预设的各种主题样式。选择一个主题后，可以将其应用于当前网页或整个站点，以快速获得风格统一的网页效果。★【重要】【操作技能】

18、插入水平线：水平线用于分隔网页内容，使页面结构更加清晰。将光标置于要插入水平线的位置，点击“插入”菜单，选择“水平线”。双击插入的水平线，可以打开“水平线属性”对话框，在此可以修改水平线的宽度（窗口宽度百分比或像素）、高度（像素）、对齐方式和颜色。★【重要】【操作技能】

三、多媒体元素的插入与设置

（一）图片的运用

19、网页支持的主要图片格式：网页中常用的图片格式有GIF（GraphicsInterchangeFormat，图形交换格式）（支持透明背景和简单动画）、JPEG（JointPhotographicExpertsGroup，联合图像专家组格式）（适用于照片等色彩丰富的图像，压缩率高）和PNG（PortableNetworkGraphics，便携式网络图形格式）（结合了GIF和JPEG的优点，支持透明和高级压缩）。GIF和PNG格式可以设置为透明背景。▲【基础】【概念理解】

20、插入图片的方法：将光标置于要插入图片的位置，点击“插入”菜单，选择“图片”，然后选择“来自文件”。在弹出的“图片”对话框中，浏览并选中站点images文件夹内的图片文件，点击“插入”即可。如果插入的图片不在站点文件夹内，Frontpage会提示“将嵌入式文件保存到当前站点”，此时应点击“是”，并将图片保存到站点的images文件夹中，以确保网页在任何计算机上都能正常显示图片。★【重要】【操作技能】【易错点】

21、设置图片属性：右键点击图片，选择“图片属性”，可以打开“图片属性”对话框。在“常规”选项卡中，可以设置图片的源文件位置、图片类型、替代文本（当图片无法显示时显示的文本，对视力障碍者使用的屏幕阅读器也至关重要）以及超链接目标。在“外观”选项卡中，可以设置图片的环绕样式（无、左环绕、右环绕）、布局（对齐方式、边框粗细、水平间距、垂直间距）和大小（勾选“指定大小”后，可输入宽度和高度值，需注意保持纵横比，防止图片变形）。▲【高频考点】【操作技能】

22、使用图片工具栏：选中图片后，界面下方会自动弹出“图片”工具栏。利用它可以对图片进行简单的编辑，如：调整亮度、对比度、裁剪、设置透明色（仅限于GIF和PNG格式）、冲蚀、凹凸效果以及创建自动缩略图（将大图片生成一个小版本的缩略图，并自动建立与大图之间的超链接，以加快页面加载速度）。★【重要】【操作技能】

23、图片路径问题深度解析：在网页中插入图片时，正确的做法是使用“相对路径”。例如，如果网页文件在站点根目录，而图片在images子文件夹内，那么图片的路径应为“images/风景.jpg”。如果错误地使用了“绝对路径”，如“C：\我的文档\图片\风景.jpg”，那么当网站上传到服务器后，服务器将无法在自己的文件系统中找到这个路径，从而导致图片无法显示。这是初学者最容易犯的错误之一。▲【非常重要】【难点】【高频考点】

（二）音频与视频的添加

24、插入背景音乐：在网页空白处右键选择“网页属性”，在“常规”选项卡中，找到“背景音乐”区域，点击“浏览”按钮，可以选择一个音频文件（如WAV、MID、MP3等）作为网页的背景音乐。还可以设置“循环次数”（如“不限次数”或指定播放次数）。▲【高频考点】【操作技能】

25、插入视频：点击“插入”菜单，选择“图片”，然后选择“视频”，在弹出的对话框中选择一个视频文件（如AVI、WMV、MPG等）插入。插入的视频在编辑状态下显示为一个图标，在预览状态下会自动播放。其大小调整和属性设置与图片类似。【拓展操作】

四、超链接的构建与应用

（一）超链接的基本概念

26、超链接的定义：超链接是指从一个网页指向另一个目标（可以是另一个网页、同一网页的不同位置、一个图片、一个电子邮件地址、一个文件等）的连接关系。当访问者单击超链接时，浏览器会根据链接的目标地址跳转到相应位置。▲【基础】【核心概念】

27、超链接的载体：超链接可以附着在文本上（称为“超文本链接”），也可以附着在图片上（称为“图片链接”），甚至可以是图片的一部分（称为“热点链接”）。★【重要】【概念理解】

（二）创建各类超链接

28、创建文本超链接：选中要作为链接载体的文本，点击常用工具栏的“超链接”按钮或右键选择“超链接”，弹出“插入超链接”对话框。在对话框中，可以选择链接到“原有文件或网页”、“本文档中的位置”、“新建文档”或“电子邮件地址”。最常见的操作是链接到当前站点内的其他网页文件，此时只需在文件列表中找到目标文件并选中即可。▲【高频考点】【操作技能】

29、创建图片超链接：选中图片，打开“插入超链接”对话框，操作方法与文本超链接完全相同。★【重要】【操作技能】

30、创建电子邮件超链接：在“插入超链接”对话框中，点击“电子邮件地址”，然后在右侧输入要联系的电子邮件地址，系统会自动在地址前加上“mailto：”。这样设置后，浏览者点击该链接，就会自动启动其计算机上的默认邮件程序（如Outlook），并创建一封收件人地址已填写好的新邮件。▲【高频考点】【操作技能】

31、创建书签超链接（同一页面内跳转）：当网页内容较长时，可以使用书签实现页面内的快速定位。首先，在目标位置（如页面中部的一个小标题）插入书签：将光标置于该处，点击“插入”菜单，选择“书签”，输入书签名。然后，在页面顶部创建超链接时，在“插入超链接”对话框中，点击“本文档中的位置”，在右侧的“书签”列表中选择之前创建的书签名，点击“确定”。▲【难点】【操作技能】

32、URL地址的构成：URL（UniformResourceLocator，统一资源定位符）是互联网上用来标识资源位置的标准格式。它通常由协议（如http：//、ftp：//、mailto：）、服务器地址（域名或IP）、文件路径和文件名组成。例如，在“http：///news/index.htm”中，“http：//”是协议，“”是服务器地址，“/news/”是路径，“index.htm”是文件名。★【重要】【概念拓展】

33、相对路径与绝对路径：

（1）绝对路径：提供资源的完整URL，包括协议和服务器地址，如“http：///images/pic.jpg”。通常用于链接其他网站的资源。【基础概念】

（2）相对路径：以当前文件所在位置为起点，描述目标资源的位置。如果链接到同一目录下的文件，直接写文件名；如果链接到下级目录中的文件，写“子目录名/文件名”；如果链接到上级目录中的文件，写“../文件名”。在同一个站点内创建链接，强烈建议使用相对路径。▲【非常重要】【核心原理】【易错点】

（三）超链接的管理与维护

34、超链接的打开方式：在“插入超链接”对话框中，有一个“目标框架”按钮。点击它可以设置链接网页的打开方式。最常用的有：“新建窗口”（_blank）——在新浏览器窗口中打开链接；“当前窗口”（_self，默认值）——在当前窗口或框架中打开链接。★【重要】【操作技能】

35、超链接的修改与取消：右键点击已创建超链接的文本或图片，选择“超链接属性”，可以重新指定链接目标。若要取消超链接，只需在“插入超链接”对话框中，将“地址”栏中的内容清空即可。【基础操作】

36、超链接路径错误导致的“断链”：当移动、重命名或删除了站点内的某个文件后，所有指向它的超链接都会失效，在Frontpage中会显示为断开的链接符号。通过“视图”菜单中的“超链接”视图，可以直观地查看站点内所有超链接的状态，以便及时发现并修复断链。在Frontpage的“文件夹”视图下进行文件操作，可以有效避免此类问题。▲【易错点】【难点】

五、网页布局初步（表格与框架）

（一）表格的精髓——布局工具

37、表格在网页设计中的角色：在早期的网页设计中，表格最初是用来显示数据的。但由于CSS（层叠样式表）尚未普及，人们发现表格对于控制页面元素的对齐和定位非常有效，因此表格被广泛地用于网页布局。即使到现在，理解表格布局依然是学习网页设计基础的重要一环。它的核心思想是将网页划分为若干行和列的单元格，然后将文本、图片等内容分别放入不同的单元格中，从而实现复杂而规整的页面布局。★【重要】【核心思想】

38、插入表格：点击“表格”菜单，选择“插入”，然后选择“表格”。在弹出的“插入表格”对话框中，可以设置行数、列数、对齐方式、边框粗细（若用于布局，通常将边框粗细设为0，这样在浏览器中就看不到表格的边框）、单元格边距（单元格内内容与单元格边框的距离）、单元格间距（单元格与单元格之间的距离）以及指定表格宽度（通常以像素或百分比为单位）。▲【高频考点】【操作技能】

39、表格的基本操作：

（1）选定单元格、行、列：可以通过“表格”菜单中的“选择”子菜单，或将鼠标移至单元格左侧（选定单元格）、表格左侧外部（选定整行）、表格上方（选定整列）进行点击选择。【基础操作】

（2）合并与拆分单元格：选中多个连续的单元格，点击“表格”菜单中的“合并单元格”命令，可以将它们合并成一个大的单元格，常用于制作网页的横幅或页脚区域。反之，选中一个单元格，点击“拆分单元格”，可以将其拆分为多行或多列。【基础操作】

（3）调整行高与列宽：将鼠标移至行或列的边框线上，当鼠标指针变为双向箭头时，按住左键拖动即可调整大小。更精确的设置可以在“单元格属性”或“表格属性”中指定具体的数值。【基础操作】

40、表格属性与单元格属性：右键点击表格，选择“表格属性”，可以设置表格整体的对齐、边框、背景、间距等。右键点击单元格，选择“单元格属性”，则可以设置该特定单元格的对齐方式、行跨列跨（即合并单元格的另一种方式）、宽度、背景等。理解两者的区别和联系，是灵活运用表格进行布局的关键。★【重要】【操作技能】

41、使用表格布局的典型结构：一个典型的表格布局网页通常由顶部的“页眉（Logo和导航栏）”、中间左侧的“侧边栏（导航或栏目）”、中间右侧的“主要内容区”以及底部的“页脚（版权信息）”等部分组成，这些都可以通过嵌套表格和合并单元格来实现。【拓展应用】

（二）框架网页简介

42、框架的概念：框架是一种将浏览器窗口划分为多个区域（每个区域称为一个框架）的网页结构。每个框架都可以独立显示一个不同的网页文件。包含框架结构的网页本身称为“框架集”，它不包含显示内容，只记录每个框架的大小、位置以及每个框架中要显示的网页文件名。▲【基础】【概念理解】

43、框架的优缺点：优点在于可以实现部分区域的固定（如导航栏固定，内容区随超链接变化），更新方便。缺点在于制作复杂，不利于搜索引擎抓取，且可能在使用浏览器的“后退”功能时产生混乱。【拓展了解】

六、网站发布与综合实践

（一）网站发布流程

44、申请主页空间：要将做好的网站发布到互联网上，首先需要拥有一个网站空间。现在有很多免费或付费的主页空间服务商。申请成功后，会得到FTP（FileTransferProtocol，文件传输协议）地址、用户名和密码等信息。【拓展了解】

45、网站发布（站点发布）：在Frontpage中，点击“文件”菜单，选择“发布网站”。在弹出的对话框中，输入之前申请到的FTP地址或HTTP地址，然后点击“发布”。系统会提示输入用户名和密码。发布过程中，Frontpage会将站点内的所有文件上传到服务器上。★【重要】【操作技能】

46、网站的宣传与维护：网站发布后，需要通过注册搜索引擎、交换友情链接等方式进行宣传。同时，要定期更新网站内容，检查并修复可能存在的断链，以保持网站的活力和可用性。【拓展意识】

（二）综合实践能力要点

47、项目规划能力：在动手制作前，能够根据主题（如“我的家乡”、“绿色环保”、“我们的班级”等）规划网站的结构，包括设计几个网页、每个网页的内容是什么、它们之间的链接关系如何，并画出简单的结构草图。▲【重要】【思维方法】

48、素材收集与管理能力：围绕主题，利用搜索引擎有目的地收集所需的文字、图片、动画等素材。能够对收集到的素材进行筛选、分类，并将其规范地保存到站点相应的文件夹（如images、sound）中。这是信息素养的重要体现。★【重要】【综合能力】

49、综合运用与创新能力：能够综合运用本单元所学的文本修饰、背景设置、插入图片与动画、建立超链接、使用表格进行布局等知识与技能，创作出一个主题鲜明、内容充实、色彩协调、导航清晰、布局合理的个人或主题网站。不仅要能模仿范例，更要能在页面布局、色彩搭配、内容呈现方式上尝试创新，体现出个人的审美和创意。▲【核心目标】【综合素养】

七、考点、考向与解题策略

（一）常见考查方式

50、选择题：侧重于考查基本概念、术语、软件功能、操作步骤的排序、文件命名规则、超链接类型、协议名称等。例如：“网页文件的扩展名是什么？”“下列哪项不是网页三要素？”“Frontpage中用于存放图片的常用文件夹名称是？”“要新建一个段落，应该按哪个键？”【基础题型】

51、填空题：主要考查关键步骤的名称、属性设置的具体参数、快捷键等。例如：“在Frontpage中，默认的主页文件名是______。”“要设置文本超链接，应首先______文本。”【基础题型】

52、判断题：考查对易混淆概念的辨析能力。例如：“在网页中插入图片，必须使用绝对路径。（）”“一个网站只能有一个网页。（）”“按Shift+Enter键可以实现换行并开始新段落。（）”【基础题型】

53、操作题/设计题：这是最重要的考查形式。通常会给出一张样图或一份具体要求，要求学生现场或纸上写出操作步骤，或直接上机完成一个包含指定元素的简单网页制作。例如：“请创建一个名为‘我的爱好’的站点，并制作首页index.htm。要求：网页标题为‘爱好之家’，背景颜色设置为浅蓝色，插入一张与爱好相关的图片（图片存放在images文件夹），并在图片下方输入一段介绍文字，最后为文字创建一个指向某网站的链接。”▲【核心题型】

（二）核心考点归纳

54、站点建立与文件管理：为什么要建站？如何建站？如何规范存放图片等素材？【高频考点】

55、网页属性的设置：网页标题、背景颜色/图片、背景音乐的设置。【高频考点】

56、文本与段落操作：字体、字号、颜色设置；段落对齐与缩进（特别是首行缩进）；换行与分段的区别。【高频考点】【易错点】

57、图片的插入与设置：插入图片的方法；图片属性（大小、对齐、替代文本）；图片工具栏的简单应用（如设置透明色）；图片路径问题（相对路径与绝对路径）。【高频考点】【非常重要】

58、超链接的创建：文本链接、图片链接、电子邮件链接的创建方法；链接目标的设置（本站网页、外部网址、电子邮件）；目标框架（_blank）的设置。【高频考点】【非常重要】

59、表格的基本应用：插入表格；合并/拆分单元格；设置表格/单元格属性（边框粗细、背景颜色、宽度）。【高频考点】

（三）易错点与解题指导

60、易错点一：未建立站点直接编辑网页。后果是插入图片或创建链接时使用绝对路径，导致文件移动后无法显示。★解题指导：在任何网页制作操作开始前，第一步必须是“文件”→“新建”→“由一个网页组成的网站...”，指定一个本地文件夹作为站点。【审题关键】

61、易错点二：图片无法显示。原因通常是图片未保存到站点内，或插入时使用了绝对路径，或图片文件名包含中文/特殊字符。★解题指导：所有插入的图片，如果提示“保存嵌入式文件”，必须