项目1：网页设计概述
黑龙江旅游职业技术学院 · 《网页设计与制作》
授课教师：刘继峰
授课教师：刘继峰
🎯 教学目标
知识目标
掌握 Web 前端结构、HTML5/CSS3 特性、网站开发全流程。
能力目标
能独立书写 HTML 骨架，配置 CSS 样式，搭建本地测试环境。
素质目标
培养大国工匠精神、团队协作意识及爱国主义情怀。
🚩 任务1：制作“中国力量中国加油”页面
💡 思政融入点： 通过编写爱国主题页面，将技术学习与爱国主义教育结合，增强民族自豪感。
🛠️ 实施步骤
- 使用 HBuilderX 或 VS Code 新建 HTML5 文件。
- 构建基础结构：
<head>(元信息/样式) +<body>(内容)。 - 在
<style>标签中编写 CSS，实现结构与样式分离。 - 插入图片资源，设置
alt属性以提升无障碍体验。
⚙️ 核心技术：HTML5 & CSS3
HTML5 (超文本标记语言)： 网页的“骨架”。负责定义标题、段落、图片、链接等内容结构。
CSS3 (层叠样式表)： 网页的“皮肤”。负责控制颜色、字体、布局、动画等视觉效果。
<!DOCTYPE html>
<html>
<head>
<style> h1 { color: red; } </style>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
<html>
<head>
<style> h1 { color: red; } </style>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
🚩 任务2：搭建站点
一个规范的网站需要清晰的文件夹结构，便于资源管理。
- 根目录 (Root)： 存放主页 index.html。
- css 文件夹： 存放所有 .css 样式文件。
- images 文件夹： 存放 .jpg, .png 等图片素材。
- js 文件夹： 存放 .js 交互脚本文件。
🧰 开发工具推荐
HBuilderX
国产高效IDE，对HTML/CSS/JS支持佳，内置预览功能。
VS Code
微软出品，插件生态强大，轻量级且高度可定制。
💻 动手实践
请同学们根据任务要求，在本地计算机上完成以下操作：
- 安装并熟悉一款开发工具（HBuilderX 或 VS Code）。
- 创建一个新的项目文件夹 “MyFirstWebsite”。
- 在文件夹内新建一个名为
index.html的文件。 - 将课堂上的示例代码复制到文件中并保存。
- 双击
index.html文件，在浏览器中预览效果。
📝 随堂测试
请完成以下两道单选题，检验本节课的学习成果：
1. 在 HTML 文件中，网页的可见内容（如文字、图片）应该写在哪个标签内？
2. 如果想要改变网页中文字的颜色为红色，应该使用哪种技术？
📌 课堂总结
本节课我们初步认识了网页开发的“三剑客”——HTML、CSS 和 JavaScript。我们学会了如何搭建一个最简单的网页骨架，并理解了它们各自的作用。课后请同学们尝试修改代码中的文字内容，观察浏览器的变化，加深理解。