第6课《网页制作小能手》 课件 2025-2026学年南方版初中信息科技八年级下册

该初中信息科技课件围绕网页制作核心，涵盖站点文件夹搭建、网页创建保存、属性设置、图文添加及排版优化等知识点。课堂以“从蓝图到网页”情境导入，衔接复习回顾的网站蓝图设计，通过“建仓库-建文件-设属性-添元素-做排版”的步骤支架，引导学生从抽象构思到具象制作。 其亮点在于情境化教学与实操导向，如用建筑仓库类比站点文件夹，通过互动练习、任务发布（基础与提升任务）培养信息意识（规范管理）、数字化学习与创新（工具使用）。采用同伴互助、作品点评等方法，帮助学生提升实操能力，教师可依托清晰流程高效教学。

网页制作小能手 2026年南方版（新教材）初中信息技术八年级下册（第4册） 1.7.2013 同学们好！欢迎来到今天的信息技术课。在上节课，我们已经学会了如何为网站画蓝图。今天，我们将学习如何把这些创意蓝图，变成一个真正可以浏览的网页。让我们一起变身网页制作小能手吧！ ‹#› 复习回顾：我们的网站蓝图 互动提问：一个完整的网站蓝图包含哪些核心内容？ 如同建筑需要精准的图纸，网站蓝图是网站开发的基石，它串联起视觉、结构与功能的每一个细节。 确定网站主题 明确核心定位与目标受众，锚定网站的核心价值方向。 设计栏目架构 梳理信息层级与逻辑关系，规划清晰直观的导航路径。 规划页面布局 排布核心内容模块，平衡视觉重心，优化用户浏览体验。 制定色彩方案 结合品牌调性选择主辅色与中性色，构建统一且舒适的视觉氛围。 绘制设计草图 以线稿形式呈现页面雏形，快速验证布局与交互的可行性。 手绘蓝图示例：这是一张典型的网站蓝图草图，通过线框和标注，清晰地展示了页面的模块划分、元素排布以及交互逻辑，是将抽象概念转化为具体视觉方案的关键一步。 1.7.2013 在开始动手之前，我们先来回顾一下。还记得我们上节课画的“建筑图纸”吗？一个完整的网站蓝图，需要包含主题、栏目、布局、色彩和草图这五个核心部分。 ‹#› 情境导入：从蓝图到网页 今天，我们正式“动工”！ 我们已经画好了楼房的设计图纸（网站蓝图），现在就差动手建造了！这节课，我们将学习如何使用专业工具，把脑海中的创意、纸上的草图，一步步转化为结构清晰、交互流畅，真正可以在浏览器中浏览的网页作品。 01 创意蓝图 手绘草图、结构规划、内容排布，是网页诞生的最初灵感形态。 02 成品网页 色彩丰富、动态交互、多端适配，让创意落地为可感知的数字体验。 从抽象构思到具象呈现，这是一场关于技术与美学的奇妙旅程。 1.7.2013 我们已经有了设计图纸，现在就差动手建造了！今天，我们将正式“动工”，学习如何使用专业工具，把我们的创意蓝图，变成一个真正可以浏览的网页。 ‹#› 搭建站点文件夹 网站的“专属仓库” 就像建造大楼需要规整的材料仓库，制作网站的第一步，是为代码、图片、样式等资源建立专属的文件夹结构，这是保障项目规范、提升协作效率的核心基石。 1.7.2013 建造大楼前，我们需要一个仓库来存放材料。同样，制作网站前，我们也需要一个“专属仓库”，也就是站点文件夹。这是我们第一个核心技能。 ‹#› 为什么需要站点文件夹？ 想象一下，如果你的玩具、书本、衣服都杂乱地堆在一个房间里，是不是很难找到想要的东西？网站也是如此！站点文件夹就像我们为网站资源准备的“专属仓库”，帮我们把所有素材有序收纳。 方便查找和管理 将网页、图片、文字等不同类型的文件分类存放，结构清晰，无论是修改还是查找都能快速定位，提升制作效率。 避免素材丢失 统一的存储位置能有效防止文件误删或遗漏，让每一个素材都有迹可循。 保证网页正常显示 规范的路径能确保浏览器正确读取文件，避免因路径错误导致的图片或链接失效。 杂乱无序的环境（左）让人无从下手，而井然有序的“仓库”（右）才能高效运作。站点文件夹就是网站的“收纳大师”。 1.7.2013 为什么需要站点文件夹呢？就像一个整洁的仓库，它能帮我们把所有网页、图片和文字素材都整理得井井有条，方便查找，避免丢失，保证网页正常显示。 ‹#› 如何规范搭建？ 01. 建总仓：确立项目根目录 新建一个总文件夹，命名格式为“主题+网站”，例如“班级风采网站”，作为整个项目的核心根目录，统一收纳所有相关文件。 网页文件 专门存放 .html 格式的网页文件，这是网站展示的核心内容载体。 图片素材 集中收纳 .jpg、.png 等图片资源，让视觉素材管理更有序。 文字素材 存放 .txt、.docx 等文案资料，便于内容撰写和后续引用。 清晰的文件夹树状结构，能让项目文件的查找、维护和扩展更加高效便捷。 1.7.2013 搭建方法很简单。首先建一个总文件夹，然后在里面建三个子文件夹，分别用来存放网页、图片和文字。就像这样，形成一个清晰的结构。 ‹#› 命名规则要记牢！ 不准用特殊符号 严禁使用 *、?、/、\ 等特殊字符，这类符号容易导致系统识别错误，甚至损坏文件结构，影响读取。 不准用乱码/拼音缩写 避免使用 sdfjkl、wz 这类无意义乱码或极简拼音缩写，不仅自己后续难以回忆，也不利于团队协作检索。 不准中英混排无意义 拒绝“网站file”这类无逻辑的中英混杂命名，既破坏视觉统一性，也降低了文件的可读性和管理效率。 推荐规范：使用清晰、完整的描述性命名 优先使用通顺易懂的中文全称，或语义明确的英文单词/词组，让文件名“见名知意”。例如：“2026级三年级二班合影”“project_background_images”，便于快速检索和长期维护。 1.7.2013 给文件夹命名时，一定要记住“三不准”：不准用特殊符号，不准用乱码缩写，不准中英文混排。要用清晰的中文或英文来描述，这样才能一目了然。 ‹#› 互动练习：动手创建你的站点文件夹 01. 打开工具 在电脑桌面或任务栏中，找到并打开“文件资源管理器”（或此电脑），准备开始文件夹的创建工作。 02. 新建总文件夹 在桌面空白处右键，选择“新建 > 文件夹”，并将其命名为你构思好的网站主题名称，作为站点的根目录。 03. 规划子文件夹结构 在总文件夹内，依次创建“网页文件”、“图片素材”和“文字素材”三个子文件夹，为后续内容填充做好分类准备。 温馨提示 操作过程中如果遇到问题可以举手示意，老师会在教室巡回检查大家的完成情况哦。 1.7.2013 现在，轮到你们动手了！请大家按照刚才讲的步骤，在桌面上创建好自己的站点文件夹。老师会下去检查大家的完成情况。 ‹#› 模块二：新建与保存网页 我们的“工作台” 熟悉网页制作工具的核心界面，掌握文件新建、保存与管理的关键流程，开启高效创作第一步。 1.7.2013 仓库建好了，我们就可以开始建造了。接下来，我们进入第二个模块，学习如何新建和保存网页，认识一下我们的“工作台”——网页制作工具。 ‹#› 认识网页文件 网页的“身份证号码”：.html 我们制作的网页，本质上是一种特殊的文本文件，它的后缀名是 .html。浏览器看到这个后缀，就会识别出这是一个网页文件，并按照网页的规则来解析和展示内容。 网站的默认入口：index.html 网站的第一个页面，也就是用户访问时看到的首页，通常约定俗成为 index.html。当访问一个域名时，服务器会自动寻找这个文件作为默认的展示页面。 HTML 文件结构示意图 1.7.2013 我们制作的网页文件，都有一个特殊的后缀名 .html，这就像它的身份证号码。而网站的首页，我们通常命名为 index.html，这是一个约定俗成的规矩。 ‹#› 网页制作工具界面初探 菜单栏 集成所有核心操作命令，如新建、保存、插入元素、调整格式等，是工具功能的总入口。 编辑区 核心工作区域，用于输入文字、插入图片和多媒体，并进行可视化的排版布局，所见即所得。 属性面板 展示并允许修改当前选中元素（如文本、图片）的详细参数，如颜色、大小、位置、链接等。 预览窗口 可随时切换查看网页在浏览器中的真实显示效果，帮助我们即时校验排版和功能是否符合预期。 图：Nvu 网页编辑器界面示例，直观展示了“菜单栏-编辑区-属性面板”的经典布局结构。 1.7.2013 这就是我们的“工作台”——网页制作工具。它主要分为四个区域：菜单栏、编辑区、属性面板和预览窗口。大家花一点时间熟悉一下。 ‹#› 实操：新建你的第一个网页 Hello, World Wide Web! 迈出网页制作的第一步，从创建一个空白的 HTML 文档开始，开启你的互联网探索之旅。 01 打开工具 启动你选择的网页制作工具（如 VS Code、Sublime Text 等），准备好进入代码编辑环境。 02 新建文档 点击顶部菜单栏的【文件】→【新建】，在选项中选择【HTML文档】，创建一个新的网页文件。 03 确认成功 当屏幕上出现一个干净、空白的代码编辑区时，就意味着你已经成功创建了第一个网页文档。 TIPS：此时可以将文件保存为 index.html，这是网站默认首页的通用命名，方便后续访问。 1.7.2013 现在，我们来新建第一个网页。非常简单，点击文件菜单，选择新建，然后选择HTML文档。看到一个空白的编辑区，就说明你成功了！ ‹#› 实操：保存网页到指定位置 核心原则：务必保存到专属“站点仓库”中 不要随意保存在桌面或C盘根目录，规范的文件管理是后续开发、协作和服务器部署的基础前提。 01 执行保存指令 在编辑器菜单栏中，点击【文件】→【保存】，打开系统的文件保存对话框。 02 定位站点文件夹 在对话框的导航栏中，精准找到并进入你刚才创建好的项目站点根文件夹。 03 进入子目录 在根目录下，双击进入名为“网页文件”的子文件夹，确保层级正确。 04 命名核心文件 在文件名输入框中输入“index.html”，这是网站服务器默认的首页文件名。 05 确认完成保存 再次核对路径和文件名无误后，点击对话框右下角的【保存】按钮完成操作。 红线警告：路径绝对不能出错！ 严禁直接保存在桌面、下载文件夹或C盘根目录，否则会导致项目文件分散混乱，且后续服务器部署时将无法正确识别文件路径。 1.7.2013 新建好网页后，最重要的一步就是保存。大家一定要记住，要把它保存到我们刚才创建的站点文件夹的`网页文件`子文件夹里，并命名为`index.html`。路径千万不能错！ ‹#› 模块三：设置网页属性 为网页制作专属“身份证”，并精心挑选与设计独特的视觉“外衣” 从基础的页面标题、编码格式，到整体的色彩搭配与背景样式，全方位定义网页的基础身份信息。 1.7.2013 网页文件保存好了，接下来我们要给它穿上漂亮的“外衣”，并制作一张“身份证”。这就是我们的第三个模块：设置网页属性。 ‹#› 网页的“身份证”：页面标题 01. 核心作用：用户识别的关键标识 页面标题会显示在浏览器的标签栏上，是用户在浏览网页、管理书签或查看搜索结果时，快速识别网页内容和主题的重要视觉标志。 02. 设置方法：简单直观的操作 在网页编辑工具的属性面板中，找到“页面标题”或“Title”选项，输入与网站核心主题相符的文字即可完成设置，是SEO优化的基础步骤。 03. 应用示例：清晰明确的命名 示例标题：“班级风采展示 - 初二（1）班” 清晰的页面标题就像浏览器的“指路牌”，能让用户在繁杂的标签页中，一眼找到目标内容，提升浏览体验。 1.7.2013 网页的“身份证”就是页面标题。它会显示在浏览器的标签栏上。我们可以在属性面板里找到“页面标题”选项来设置它。 ‹#› 网页的“外衣”：背景颜色 奠定基调，影响体验 背景颜色是网页的视觉基底，它不仅决定了整体的色彩氛围，更直接影响用户的阅读舒适度与视觉停留时长。 简单几步，轻松设置 在网页编辑的属性面板中找到“背景颜色”选项，点击颜色选择器，即可通过取色器、色值输入或预设色块来选定颜色。 设计小贴士：选择背景色时，建议参考你之前设计的网站蓝图配色方案，确保前景文字与背景色有足够的对比度，兼顾美观与可读性。 如同画家的调色盘，网页背景色的选择是构建视觉美感的第一步，为内容提供最适宜的展示舞台。 1.7.2013 网页的“外衣”就是背景颜色。它奠定了整个网页的基调。我们可以在属性面板里设置背景颜色，大家可以参考自己之前设计的网站蓝图来选择。 ‹#› 网页的“呼吸空间”：页面边距 核心作用：舒展留白 页面边距是内容与浏览器边缘的缓冲带。它避免了内容紧贴边缘造成的压迫感，让整体版面更透气、更美观，同时引导用户视线聚焦于核心内容区域。 设置路径：可视化配置 在网页设计工具的“页面属性”面板中，找到“页面边距”选项，即可分别对“上、下、左、右”四个方向的边距数值进行自定义设置，操作直观便捷。 起步推荐：20-30px 新手入门时，建议先将四边统一设置为 20-30 像素，这是兼顾可读性与美观性的“安全值”。后续可根据页面内容的复杂程度灵活微调。 💡 设计小贴士：合适的边距不仅是美学需求，更是提升用户阅读体验、构建清晰视觉层级的关键要素。 1.7.2013 除了背景色，我们还要给网页留一些“呼吸空间”，这就是页面边距。适当的边距能让页面看起来更美观。我们可以在属性面板里设置，推荐先统一设为20-30像素。 ‹#› 实操：为你的网页穿上“外衣” 综合练习：亲手设置页面核心属性，从标题、背景到边距，一步步为网页奠定专属基调。 01. 定义网页标题 在属性面板中找到标题设置项，输入能代表网站核心内容的名称，这是网页给用户的第一印象，也是浏览器标签页的关键标识。 02. 定制背景色彩 对照网站蓝图，在背景设置中挑选匹配主题的颜色。合适的背景色能提升页面可读性，也能传递网站的情感与风格。 03. 调整页面边距 为内容区域设置合适的页边距，让文字与边缘保持舒适的距离，避免内容紧贴边界，提升用户的视觉浏览体验。 04. 保存并预览效果 完成设置后务必保存文件，然后点击“预览”按钮，在浏览器中查看实际呈现效果，检查各项属性是否符合预期。 1.7.2013 好了，现在请大家动手，为你的网页设置好标题、背景颜色和边距。设置完成后，记得保存，然后点击预览按钮，看看你的网页是不是已经初具雏形了！ ‹#› 模块四：添加图文元素 网页的“骨架”与“颜值担当” 文本：信息的骨架 承载核心信息，构建页面逻辑，引导用户阅读。 图片：视觉的颜值 丰富视觉层次，传递情感温度，提升页面吸引力。 1.7.2013 网页的“外衣”穿好了，接下来我们要为它填充内容，也就是网页的“骨架”——文本，和“颜值担当”——图片。这是第四个模块。 ‹#› 网页的“骨架”：文本内容 01 直接编辑，即时输入 无需繁琐的前置设置，直接在网页编辑区的任意目标位置点击，即可快速激活输入光标。这种所见即所得的交互方式，让文字内容的添加与修改更加直观、流畅，降低了内容创作的操作门槛。 02 高效复用，素材导入 可直接从预先整理好的“文字素材”文件夹中复制内容，再粘贴至网页编辑区。这种方式能有效避免重复录入的时间成本，同时保证文案内容的一致性，大幅提升网页内容填充的整体效率。 核心价值：以极简的操作逻辑，让文本内容的填充既灵活又高效，为网页搭建打下坚实的内容基础。 1.7.2013 添加文本很简单，直接在编辑区点击就能输入。当然，更高效的方式是从你之前准备好的文字素材文件夹里复制粘贴过来。 ‹#› 文本排版规范 让文字“站好队”，构建清晰、专业且富有美感的视觉阅读体验 01. 标题层级突出 使用较大字号、加粗字体并配合居中或左对齐排版，强化标题的视觉焦点，让读者能快速抓取页面核心主旨。 02. 段落呼吸感 保持合适的行间距，段落之间预留一行空白，避免文字拥挤，降低读者的视觉疲劳，提升内容的易读性。 03. 列表清晰有序 善用项目符号或数字编号梳理信息点，将零散内容结构化，让重点一目了然，帮助读者快速理解逻辑关系。 04. 视觉规范统一 统一同一层级标题、正文的字体、字号与配色，形成视觉上的一致性和连贯性，增强页面的专业感与整体性。 1.7.2013 输入文字后，我们还要让它们“站好队”。标题要突出，段落要分明，列表要用符号，并且要保持格式的一致性。这样才能让你的网页看起来专业。 ‹#› 网页的“颜值担当”：图片 核心前提：规范存放 在插入图片前，务必将所有图片素材复制到站点根目录下的“图片素材” 子文件夹中。这是网页开发中约定俗成的基础规范，能从根本上管理好资源路径。 避坑指南：警惕丢失 如果图片文件不在站点文件夹内，当网站更换存储位置、上传服务器或分享给他人时，图片链接会失效，页面上将出现破损的图片占位符，严重影响网页的完整性与美观度。 关键提示：保持素材与站点文件夹的关联性，是确保网页资源稳定加载的“第一道防线”。 1.7.2013 接下来是添加图片。但在插入图片前，有一个非常重要的前提：必须先把图片复制到站点文件夹的“图片素材”子文件夹里。否则，你的图片很可能会丢失！ ‹#› 插入图片的正确步骤 01 定位光标 将鼠标光标精准定位到文档中想要插入图片的具体位置，确保后续图片插入后排版位置符合预期。 02 执行插入 在软件顶部菜单栏依次点击【插入】→【图片】→【来自文件】，唤起文件选择的弹窗对话框。 03 选择文件 在弹窗中导航至站点文件夹，进入“图片素材”子文件夹，选中目标图片后点击【确定】即可完成插入。 关键提示：务必确认文件路径的准确性，将图片统一存放在“图片素材”文件夹中，能有效避免文件丢失或链接失效。 1.7.2013 插入图片的步骤很简单，三步走：定位光标，点击插入图片，然后在文件选择框中找到你站点文件夹里的图片。记住，路径一定要正确！ ‹#› 实操：让你的网页图文并茂 图文排版大挑战：从零开始，为你的网页内容注入生动活力 01. 填充主题文本 打开 index.html 文件，输入或粘贴一段你喜欢的主题文本，这是网页内容的基础骨架，决定了页面的核心信息传递方向。 02. 基础排版美化 为文本设置合理的层级，区分主标题、副标题与正文段落，调整行间距与对齐方式，让文字阅读更舒适、结构更清晰。 03. 插入主题图片 在文本中合适的位置插入与主题匹配的图片，让视觉元素与文字内容相辅相成，增强页面的吸引力和信息传达效率。 04. 协调尺寸与布局 调整图片的大小、边框与对齐方式，使其与周围文本形成和谐的视觉关系，避免图片过大或过小破坏整体排版的平衡感。 1.7.2013 现在，挑战来了！请大家在自己的网页里，插入一段文本和一张图片，并进行简单的排版，让你的网页变得图文并茂。 ‹#› 模块五：排版优化 掌握对齐与对比的核心法则，赋予页面秩序感与视觉焦点，让设计更具专业度。 对齐 (Alignment) 将页面中的文本、图片等元素的边缘或中心线进行统一对齐，能有效建立视觉秩序，减少视觉混乱，让观众的视线流动更自然，是构建专业页面布局的基础准则。 对比 (Contrast) 通过调整字体大小、色彩明暗、线条粗细等要素形成差异，能够快速突出关键信息，引导读者视线聚焦核心内容，让页面层次分明，避免信息传达的平淡与模糊。 💡 核心技巧：用对齐构建骨架，用对比点缀细节，二者结合是提升页面专业感的“黄金组合”。 1.7.2013 图文都加上了，但感觉还不够美观？最后一个模块，我们来学习排版优化的黄金法则：对齐与对比。通过对齐元素和对比信息，可以让你的页面瞬间变得更专业。 ‹#› 图文环绕：让布局更生动 优化排版的核心作用 通过设置图文环绕布局，能让文字自然地包裹在图片周围，打破单调的行列排版，有效减少页面留白，使整体视觉层次更丰富，信息呈现更紧凑、更具呼吸感，提升内容的可读性与美观度。 简单高效的设置步骤 首先在页面中选中目标图片，随后在右侧属性面板中找到“对齐方式”或“环绕排版”选项卡，根据版面需求，点击选择“左对齐环绕”或“右对齐环绕”，文字便会自动适配图片位置重新排布。 💡 实用小技巧：图文环绕最适合搭配简洁的方形或矩形配图使用，避免复杂异形图影响文字排版的流畅性。 1.7.2013 一个让布局更生动的技巧是设置图文环绕。选中图片，在属性面板里设置左对齐或右对齐，文字就会自动围绕在图片周围，让页面看起来更紧凑美观。 ‹#› 实操：让你的网页更美观 优化首页是提升用户体验的第一步，通过精细化的布局调整，让内容呈现更具秩序感与呼吸感，还原设计蓝图的最佳效果。 01. 校准元素对齐 检查页面中的文字、图片、按钮等元素是否沿隐形网格线对齐，统一的对齐方式能为页面建立清晰的视觉秩序，减少用户的阅读干扰。 02. 尝试图文环绕排版 根据内容逻辑，将图片设置为左环绕或右环绕样式，打破单调的上下排版，让图文关系更紧密自然，提升版面的动态感和可读性。 03. 移除冗余空白区域 删除段落间、模块间多余的空行和无效留白，让页面布局更紧凑有力，同时保留必要的呼吸空间，避免信息呈现过于松散或拥挤。 04. 回归设计蓝图校验 对照最初的设计蓝图，整体检查页面的色彩、布局和核心元素呈现，确保最终效果符合设计初衷，形成统一、完整的视觉体验。 1.7.2013 最后，请大家对自己的首页进行优化。检查对齐，尝试图文环绕，删除多余空行，让你的网页更美观，更接近你最初的蓝图设计。 ‹#› 任务发布：大显身手的时候到了！ 基础任务 (人人必做) 按步骤完成站点文件夹搭建，新建并保存index.html文件。设置好页面的标题、背景色与边距，插入至少一段说明文本和一张示例图片，并完成对齐、间距等基础排版，确保页面结构清晰、完整展示。 提升任务 (挑战自我) 尝试实现图文环绕排版，运用不同的字体样式和主题色突出内容重点。结合设计蓝图，微调布局细节，让网页的视觉呈现更贴合专业设计规范，探索更多排版可能性。 1.7.2013 好了，所有技能都教给大家了！现在是大显身手的时候。这里有基础任务和提升任务，请大家根据自己的情况选择完成。 ‹#› 学生实操时间：创作进行时 回顾步骤 遇到操作卡顿？不妨快速翻阅前面的PPT页面，对照关键步骤，重新梳理制作逻辑，找到问题的突破口。 同桌互助 保持安静，小声与同桌交流探讨。分享各自的思路和技巧，在协作中排查错误，共同攻克技术难题。 举手提问 遇到无法解决的共性或疑难问题时，大胆举手示意。老师会及时关注，并提供针对性的指导与帮助。 教师行动：巡回指导与答疑 老师将在教室内巡回观察，及时捕捉大家的操作难点，集中解决共性问题；同时为进度较慢或遇到障碍的同学提供一对一的精准辅导，确保每位同学都能跟上节奏。 1.7.2013 现在，请同学们开始动手制作。遇到问题可以看PPT，问同桌，或者举手问我。老师会在教室里巡回指导。 ‹#› 常见问题答疑 (Q&A) Q1: 为什么插入的图片显示不出来？ 首先检查图片是否保存在指定的“图片素材”文件夹中，再确认文件路径是否正确，避免因路径错误或文件丢失导致加载失败。 Q2: 网页标题在浏览器里看不到？ 需要在软件的“页面属性”设置面板中填写“页面标题”内容，并且确保修改后保存了HTML文件，重新刷新浏览器页面即可显示。 Q3: 为什么排版总是乱糟糟的？ 建议多使用对齐工具规范元素位置，同时清理代码中不必要的空格、空行和冗余标签，保持代码整洁，排版自然更规整。 1.7.2013 在大家制作的过程中，我总结了几个常见问题。如果你的图片显示不出来，或者标题看不到，或者排版很乱，可以看看这里的解答。 ‹#› 作品展示与点评：分享你的创意 创意分享 · 同学展示 邀请2-3位同学上台展示个人作品，围绕创作灵感、视觉元素选取、核心设计思路展开分享，讲述作品背后的故事与巧思，让创意在表达中被看见、被理解。 专业指引 · 教师点评 针对展示作品，先肯定设计中的亮点与独特创意，再从专业视角指出可优化的细节与方向，提出切实可行的改进建议，引导同学们完善作品，深化对设计逻辑的认知。 核心目标：在展示与交流中碰撞思维火花，让每一次表达都成为设计能力进阶的契机，让反馈转化为成长的动力。 1.7.2013 时间差不多了，我们邀请几位同学来展示一下自己的作品，并分享一下设计思路。大家掌声鼓励！ ‹#› 本节课知识回顾 01. 建仓库 规范搭建站点文件夹结构，合理规划资源存放路径，为后续开发打下整洁的基础。 02. 建文件 新建并正确保存 index.html 文件，这是网页的入口文件，确保文件编码与命名规范无误。 03. 设属性 在文档中设置页面标题、背景颜色与边距等基础属性，把控网页的整体视觉基调。 04. 添元素 根据需求插入并编辑文本、图片等核心内容元素，丰富页面信息层级，让内容传递更直观高效。 05. 做排版 运用对齐、对比、图文环绕等排版原则，优化元素间的空间关系，提升页面的可读性与美观度。 1.7.2013 课程接近尾声，我们来回顾一下今天学习的五大核心技能：建仓库、建文件、设属性、添元素、做排版。希望大家都能牢牢掌握。 ‹#› 课后作业 01. 美化首页代码 打开你的 index.html 文件，调整文字排版与样式，让页面布局更合理、视觉效果更美观。 02. 尝试多图插入 在网页中尝试插入第二张、第三张不同尺寸的图片，观察浏览器的渲染效果，探索图片标签的更多属性。 03. 预习超链接知识 提前了解 HTML 中超链接标签的使用方法，思考超链接如何让独立的网页串联成一张庞大的互联网。 💡 小提示：在完成作业时如果遇到问题，可以查阅 W3C 文档或回顾本节课的核心代码片段。 1.7.2013 今天的课后作业是继续完善你的首页，尝试插入更多图片，并预习下一节课关于超链接的内容。 ‹#› 恭喜你，网页制作小能手！ 每一次练习，都是向梦想网站迈进的一步！ 下课！ 1.7.2013 恭喜大家，通过今天的学习，你们已经成为了真正的网页制作小能手！记住，每一次练习，都是向梦想网站迈进的一步。今天的课就到这里，下课！ ‹#› $