模块1任务1.2和1.3：HTML与CSS初体验、编码工具实战（课件）-《网页设计与制作》（电子工业出版社）上好课

《网页设计与制作》 任务1.2和1.3：HTML与CSS初体验、编码工具实战 网页设计与制作 电子工业出版社 1.7.2013 同学们好！欢迎来到《网页设计与制作》的课堂。今天我们将进入一个全新的阶段，正式揭开网页制作的神秘面纱。本节课我们将一起完成任务1.2和1.3，初次体验HTML与CSS的魅力，并掌握一款强大的编码工具。准备好了吗？让我们一起开始这段精彩的代码之旅吧！ ‹#› 教学目标 【知识目标】记忆 · 理解 ① 理解HTML与CSS的作用，掌握Web标准的结构、表现与行为核心 ② 熟悉HTML5基础文档结构，了解网站开发流程与常用开发工具 【能力目标】应用 ① 运用浏览器工具查看源码，编写并预览基础HTML网页文件 ② 完成VS Code配置与插件安装，搭建规范的网站项目文件夹结构 【素养目标】内化 ① 建立规范编码意识，理解结构与表现分离的前端开发思想 ② 养成严谨的文件目录管理习惯，培养自主调试排错的实操素养 1.7.2013 在开始今天的学习之前，我们先明确一下本节课的目标。通过本节课的学习，大家需要掌握三方面的目标。首先是知识目标，我们要理解HTML和CSS是什么，它们各自的作用，以及Web标准的核心思想。其次是能力目标，这也是我们的重点，大家要学会动手操作，包括查看网页源码、用记事本写代码，以及安装配置专业的开发工具VS Code。最后是素养目标，希望大家在学习过程中，能够养成规范的编码习惯和严谨的项目管理意识。 ‹#› 学习重点与难点 学习重点 1. 掌握HTML与CSS的核心作用，熟悉HTML5基础文档结构规范，构建网页开发的底层认知； 2. 熟练安装VS Code前端开发必备插件，掌握精品课程网站项目目录的标准化搭建流程与文件管理规范； 学习难点 1. 深度理解Web标准中“结构、表现、行为”三者分离的核心设计思想，理解其对前端工程化与可维护性的关键价值； 2. 清晰界定HTML与CSS的职责边界，理解代码文件、编辑器、浏览器三者之间的协作与解析运行机制； 1.7.2013 本节课的内容有两个重点和两个难点。重点在于掌握HTML和CSS的基本概念和作用，以及熟练安装配置VS Code并搭建项目目录。这是我们后续所有网页制作的基础。难点则在于理解一些抽象的概念，比如Web标准中结构、表现、行为的分离思想，以及分清HTML和CSS各自的职责。希望大家在学习过程中多思考，多动手，我们一起攻克这些难点。 ‹#› 新课导入 · 你每天都在用，但你了解它吗？ 中国天气网 https://www.weather.com.cn 点击链接即可访问 国家中小学智慧教育平台 https://basic.smartedu.cn 点击链接即可访问 故宫博物院官网 https://www.dpm.org.cn 点击链接即可访问 ❓ 思考时刻：这些网页是怎么编写出来的？他们用什么工具进行编写的？ 💬 课堂互动：你最喜欢逛哪个网站？你以后想编写出这样的网站吗？ 1.7.2013 同学们，我们每天都在浏览各种各样的网页，比如查天气、学习知识、欣赏国宝。大家有没有想过，这些丰富多彩的页面是从哪里来的？为什么我们在浏览器地址栏输入一个网址，就能看到它们？网页的本质到底是什么？带着这些问题，我们开始今天的新课。首先，大家可以讨论一下，你最喜欢逛哪个网站？是什么吸引了你？ ‹#› 知识点1 · 什么是HTML & CSS 基础 核心定义：骨架与外衣 HTML (超文本标记语言)：负责搭建网页的“骨架”，定义页面的结构与内容（如标题、段落、图片）。 CSS (层叠样式表)：负责设计网页的“外衣”，控制视觉表现（如颜色、字体、布局、动画）。 关键分工：各司其职 HTML 构建基础元素：标题(h1)、段落(p)、图片(img)、链接(a)、列表等；CSS 赋予视觉美感：配色方案、字体样式、边距间距、背景效果等。 💡 冷知识 它们并非编程语言，而是标记语言和样式表语言。无需编译，由浏览器直接解析渲染，是 Web 前端开发的基石。 代码示例：极简结构 <!DOCTYPE html> <html> <style> h1 { color: #2E75B6; } </style> <body> <h1> Hello, Web!</h1> </body> </html> 🚀 动手实践 打开任意网站，右键 → 查看网页源代码 即可看到 HTML 与 CSS 的真实协作形态！ 1.7.2013 好，现在我们来正式认识今天的两位主角：HTML和CSS。HTML，全称是超文本标记语言，它的主要工作是搭建网页的骨架，决定了网页里有什么内容，比如标题、文字、图片。而CSS，层叠样式表，则负责给这个骨架穿上漂亮的衣服，决定了网页的外观，比如颜色、字体和布局。简单来说，HTML负责结构，CSS负责样式。大家可以现在就打开一个网站，右键点击页面，选择“查看网页源代码”，你就能看到它们的真实面貌了。 ‹#› 知识点1 · 什么是HTML & CSS 基础 代码示例：极简结构 <!DOCTYPE html> <html> <style> h1 { color: #2E75B6; } </style> <body> <h1> Hello, Web!</h1> </body> </html> 演示过程 1.7.2013 好，现在我们来正式认识今天的两位主角：HTML和CSS。HTML，全称是超文本标记语言，它的主要工作是搭建网页的骨架，决定了网页里有什么内容，比如标题、文字、图片。而CSS，层叠样式表，则负责给这个骨架穿上漂亮的衣服，决定了网页的外观，比如颜色、字体和布局。简单来说，HTML负责结构，CSS负责样式。大家可以现在就打开一个网站，右键点击页面，选择“查看网页源代码”，你就能看到它们的真实面貌了。 ‹#› 知识点2 · 什么是Web标准 理解+记忆 核心定义 Web标准是由W3C组织制定的技术规范，确保网页在不同浏览器中一致呈现。它包含三大核心支柱： 1. 结构 (HTML)：搭建内容骨架，决定“有什么”； 2. 表现 (CSS)：定义视觉样式，决定“长什么样”； 3. 行为 (JS)：实现交互逻辑，决定“能做什么”。 趣味类比 🏠 HTML = 房子的钢筋水泥（基础结构） 🎨 CSS = 房子的装修风格（颜值担当） ⚡ JS = 智能家居系统（交互灵魂） ⭐ 辨一辨：为什么要遵循Web标准？ 遵循标准可实现结构、表现、行为分离，提升开发效率与代码可维护性，确保网页在不同浏览器、设备上的兼容性，是现代Web开发的通用准则。 💬 课堂互动：观察你正在浏览的网页，试着找出它的HTML结构、CSS样式和JS交互分别体现在哪里？ 1.7.2013 为了让网页在不同浏览器上都能正常显示，并且便于开发和维护，就有了Web标准。大家可以把它想象成盖房子的规范。HTML负责搭建房子的结构，也就是钢筋水泥部分；CSS负责装修，决定房子的风格和颜色；而JavaScript则负责安装电器和智能系统，让房子变得可交互。这三者分离的思想非常重要，它让我们的代码更清晰，修改起来也更方便。 ‹#› 实操任务一 · 查看网页源代码 理实一体 思考：自己写的代码和渲染的网页有哪些相同的地方，不同的标签内的内容都出现在了什么位置？ 自己试一试 1.7.2013 理论知识我们先了解到这里，现在进入实操环节。首先，我们来学习如何查看网页的源代码。请大家打开Edge浏览器，访问一个你喜欢的网站，比如百度。然后，在页面空白处点击鼠标右键，选择“查看页面源代码”。这时会弹出一个新窗口，里面密密麻麻的就是这个网页的HTML代码。大家可以尝试在代码中寻找一些熟悉的文字，看看它们在HTML标签中的位置，这有助于我们理解HTML是如何组织内容的。 ‹#› 实操任务一 · 记事本编写test.html 理实一体 Step 1-2：新建文档与编写代码 1. 右键桌面/文件夹 → 新建 → 文本文档，打开记事本。 2. 输入HTML5基础代码，包含文档声明、根标签及页面结构，定义标题与基础样式。 ✅ 任务成功标志 浏览器打开test.html后：标签页显示“我的第一个网页”，页面背景呈浅灰色，蓝色大标题“Hello World!”清晰展示，下方配有说明文字。 关键操作细节与核心解析 Step 3：正确保存文件 点击“文件→另存为”，文件名输入“test.html”，保存类型选择“所有文件” Step 4：预览网页效果 双击保存好的test.html文件，系统将自动调用默认浏览器打开并渲染页面。 核心代码作用 • <title>：决定浏览器标签页显示的标题 • <body>:显示网页所有内容：图片、文字、视频等 ✅ 步骤总结 1.7.2013 接下来，我们要亲手创建一个最简单的网页。我们先不用专业工具，就用Windows自带的记事本。请大家跟着我一起操作：首先，新建一个文本文档，然后把屏幕上的这段代码完整地输入进去。注意，代码的拼写和符号一定要准确。输入完成后，选择“另存为”，文件名一定要是test.html，保存类型要选择“所有文件”。保存好后，双击这个文件，你就能在浏览器中看到自己亲手制作的第一个网页了！ ‹#› 知识点3 · 网站开发流程 概览 ① 规划与分析 明确网站目标与受众 确定功能需求与技术方案 ② 设计与原型 设计视觉风格与UI界面 制作交互原型图预览效果 ③ 开发与实现 编写前端代码实现功能 搭建网站后端架构与逻辑 ④ 测试与部署 测试兼容性、性能与Bug 上传服务器正式发布上线 ⑤ 维护与迭代 收集反馈并修复问题 持续更新内容与优化功能 对应快递类比：查地址 → 找仓库 → 下单 → 发货 → 拆包裹 💬 课堂互动：分组讨论，列举出网站开发中每个阶段容易踩的坑，并分享你的想法 1.7.2013 制作一个完整的网站，就像完成一个项目，需要遵循一定的流程。通常分为五个阶段：首先是规划分析，明确我们要做什么；然后是设计原型，画出网站的样子；接着是开发实现，也就是我们接下来要学习的写代码；之后是测试部署，确保网站能正常运行并发布到网上；最后是维护迭代，持续优化网站。这个流程就像我们寄快递一样，从确定地址到最终收到包裹，每一步都不可或缺。 ‹#› 知识点4 · 开发工具介绍 工具推荐 核心定义 专业的代码编辑器是提升开发效率的核心工具，它不仅提供代码高亮、智能语法提示，还支持代码格式化、插件扩展等功能，让编码过程更高效、规范。 主流编辑器推荐 VS Code（微软）：免费开源，插件生态丰富，前端开发首选； HBuilderX（国产）：对中文友好，内置小程序与UniApp开发套件。 必备实用插件 🚀 Chinese：中文语言包，轻松切换界面； Live Server：保存即刷新，实时预览效果； Prettier：自动格式化，统一代码风格。 为什么选择专业编辑器？ 1. 效率倍增：智能补全与语法检查，减少拼写错误与调试时间。 2. 高度定制：通过插件自由扩展功能，适配不同技术栈（如Vue/React）。 3. 生态丰富：海量插件满足代码管理、版本控制、终端集成等需求。 💡 提示：工欲善其事，必先利其器，选择合适的编辑器是开启高效开发的第一步。 1.7.2013 刚才我们用记事本来写代码，虽然可以，但效率很低。在实际开发中，我们会使用专业的代码编辑器。目前最主流的就是VS Code，它功能非常强大，而且免费。还有一款国产的HBuilderX也很不错。这些编辑器之所以强大，很大程度上得益于它们的插件系统。比如，我们可以安装中文语言包让界面变成中文，安装Live Server插件实现代码保存后浏览器自动刷新，安装Prettier插件自动帮我们格式化代码。这些插件能让我们的开发工作事半功倍。 ‹#› 实操任务二 · VS Code安装与配置 理实一体 思考：如何在VS Code中安装插件？安装完成后需要重启软件吗？ 安装步骤 vs code下载地址：https://code.visualstudio.com/ 1.7.2013 现在，我们来安装和配置这款强大的工具——VS Code。首先，大家需要运行课前准备好的VS Code安装包，按照提示一步步完成安装。安装完成后，我们要做的第一件事就是安装中文语言包。请大家点击左侧边栏的扩展图标，在搜索框中输入“Chinese”，找到“Chinese (Simplified) Language Pack”插件并安装。安装完成后，VS Code会提示你重启软件，重启后界面就会变成中文了。接下来，我们再安装Live Server和Prettier插件。 ‹#› 实操任务二 · VS Code安装与配置 理实一体 思考：如何在VS Code中安装插件？安装完成后需要重启软件吗？ 安装步骤 vs code下载地址：https://code.visualstudio.com/ 1.7.2013 现在，我们来安装和配置这款强大的工具——VS Code。首先，大家需要运行课前准备好的VS Code安装包，按照提示一步步完成安装。安装完成后，我们要做的第一件事就是安装中文语言包。请大家点击左侧边栏的扩展图标，在搜索框中输入“Chinese”，找到“Chinese (Simplified) Language Pack”插件并安装。安装完成后，VS Code会提示你重启软件，重启后界面就会变成中文了。接下来，我们再安装Live Server和Prettier插件。 ‹#› 实操任务二 · VS Code安装与配置 理实一体 特殊说明 安装步骤 vs code下载地址：https://code.visualstudio.com/ 对于常用选项，我们只需要勾选后两项就够用了 1.7.2013 现在，我们来安装和配置这款强大的工具——VS Code。首先，大家需要运行课前准备好的VS Code安装包，按照提示一步步完成安装。安装完成后，我们要做的第一件事就是安装中文语言包。请大家点击左侧边栏的扩展图标，在搜索框中输入“Chinese”，找到“Chinese (Simplified) Language Pack”插件并安装。安装完成后，VS Code会提示你重启软件，重启后界面就会变成中文了。接下来，我们再安装Live Server和Prettier插件。 ‹#› 实操任务二 · 搭建精品课程网站项目 理实一体 Step 1-3 · 创建项目与目录 1. 在D盘根目录新建名为「website」的文件夹； 2. 用VS Code打开该文件夹作为工作区； 3. 右键创建css、images、pages子文件夹及main.html。 ✅ 成功标志 VS Code资源管理器中呈现清晰结构： website/ 根目录下可见 css、images、pages 三个文件夹，以及 main.html 首页文件，层级分明无冗余。 📂 目录结构与分工说明 /css 文件夹： 存放样式表文件（.css），专门负责网页的视觉美化，如颜色、字体、布局排版等，实现结构与样式分离。 /images 文件夹： 集中管理网站所需的图片、图标、背景素材等静态资源，方便统一调用与维护。 /pages 文件夹： 存放网站的子页面文件，让页面文件分类更清晰。 main.html 文件： 网站的首页入口，是用户访问网站时打开的第一个页面，承载核心引导与内容展示。 1.7.2013 安装好工具后，我们就要开始搭建一个真实项目的目录结构了。一个规范的项目结构非常重要，它能让我们的文件管理井井有条。请大家跟着我一起操作：首先在D盘创建一个名为website的文件夹作为项目根目录。然后用VS Code打开这个文件夹。在VS Code的左侧资源管理器中，我们右键点击website，创建css、images、pages三个子文件夹，分别用来存放样式、图片和其他网页。最后，再创建一个main.html文件作为我们的首页。这样，一个清晰的项目结构就搭建好了。 ‹#› 一体 实操任务二 · 搭建精品课程网站项目 实操 1.7.2013 安装好工具后，我们就要开始搭建一个真实项目的目录结构了。一个规范的项目结构非常重要，它能让我们的文件管理井井有条。请大家跟着我一起操作：首先在D盘创建一个名为website的文件夹作为项目根目录。然后用VS Code打开这个文件夹。在VS Code的左侧资源管理器中，我们右键点击website，创建css、images、pages三个子文件夹，分别用来存放样式、图片和其他网页。最后，再创建一个main.html文件作为我们的首页。这样，一个清晰的项目结构就搭建好了。 ‹#› 背诵记忆 · 核心概念一网打尽 记忆 HTML 建立网页文件的语言 📦 网页骨架 web标准 统一互联网网页的开发与呈现方式 📚 标准 网页组成 结构、表现和行为 🏠 组成 CSS 用于控制网页样式和布局的语言 🏷装修网页 ⏱ 5分钟限时背诵，随后随机抽查5人 · 记不牢的课后巩固 【配图建议】表格已含"类比"列帮助记忆，无需额外配图；可打印此表发学生当速记卡。 【教师讲课备注】限时3分钟自背→同桌互查→教师抽查。抽查用"击鼓传花"式随机点名增加趣味。未过关学生登记，课后找课代表复背。 课堂问答 · 快问快答 理解 Q1：HTML是什么？ 答：超级本文标记语言 Q2：css的核心特点是？ 答：层叠性 Q3：网页由哪3部分构成？ 答：结构、表现和行为 Q4：负责定义网页的内容和结构的是？ 答：HTML 【配图建议】无配图；建议放映时用矩形遮挡右侧答案，点击后显现（本页答案栏可用动画做"点击出现"）。 【教师讲课备注】快问快答节奏要快，每题不超过30秒。可分男女队PK或小组PK积分。答错不批评，请同组补充——团队作战降低零基础学生的回答压力。 课堂小结 总结 知识收获 ✓ 掌握HTML、CSS与Web标准的核心概念 ✓ 理解HTML5基础文档结构与语义化标签 ✓ 熟悉网站开发完整流程：需求→设计→开发 ✓ 认识开发工具生态：VS Code配置与必备插件 技能收获 ✓ 实操：用浏览器开发者工具查看与调试源码 ✓ 基础：记事本编写HTML并实现本地预览 ✓ 环境：VS Code安装、汉化及插件配置 ✓ 规范：搭建标准的网站项目目录结构 今天回收导入三问：页面怎么编写的？网址的结构有哪几部分？网页是什么？——你都答上来了吗？ 1.7.2013 好了，同学们，我们今天的课程内容就到这里。让我们一起回顾一下本节课的收获。在知识层面，我们了解了HTML、CSS和Web标准的概念，认识了HTML5的基础结构和网站开发流程。在技能层面，我们学会了查看网页源码，用记事本写了第一个网页，并且成功安装配置了VS Code，搭建了项目目录。现在，大家可以回答课前提出的三个问题了吗？相信通过今天的学习，大家已经对网页制作有了更清晰的认识。 ‹#› 课后任务 作业 必做① 预习下一节“HTML基础标签”相关内容 重点了解段落、标题、链接等常用标签的语义与书写格式，标记出疑问点。 必做② 实战查看网页源代码结构 打开任意网页，按F12打开开发者工具，找到`<!DOCTYPE html>`声明，并观察`<head>`和`<body>`标签内包含的具体元素。 选做③ 动手修改HTML样式并检查结构 打开test.html文件，尝试添加CSS样式修改背景色或字体大小，保存后刷新浏览器预览；同时确认本地website项目文件夹结构是否规范。 提交方式：下节课前，将修改后的test.html文件发送至班级作业群，或上传至在线学习平台。 注意：请保留修改过程的截图或文件，课上会选取典型案例进行展示。 1.7.2013 为了巩固今天所学的知识，我给大家布置几个课后任务。首先是必做任务，请大家预习下一节课关于HTML基础标签的内容。第二个必做任务是，再次打开浏览器开发者工具，仔细观察一个网页的HTML结构，找到`<!DOCTYPE html>`声明，并看看`<head>`和`<body>`里都放了些什么。有余力的同学可以完成选做任务，修改你之前创建的test.html文件的样式，看看能不能做出更漂亮的效果。希望大家认真完成作业，为下节课做好准备。 ‹#› 每一行规范的代码，都是通往未来的基石 —— 下节课：HTML基础标签 —— 谢谢！ 1.7.2013 同学们，今天的课程到此结束。请记住，每一行规范的代码，都是我们通往未来的基石。希望大家能保持这份热情，不断学习和实践。下节课我们将学习HTML的基础标签，继续深入网页制作的世界。谢谢大家！ ‹#› EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn $