课一：导学

掌握网页、HTML/CSS概念，了解课程全貌与学习目标

一、网页基础概念

网页是网站的基本组成单元，是通过浏览器展示给用户的可视化页面，由文本、图片、音频、视频等元素组成。

实训实例：浏览主流网站，分析网页的组成元素

实现步骤：

  1. 启动Chrome浏览器，访问百度（www.baidu.com）、腾讯（www.qq.com）等主流网站
  2. 观察网页组成，记录包含的元素（文本、图片、按钮、输入框等）
  3. 思考网页的核心功能的实现方式
  4. 填写《网页元素分析表》，总结网页的共性特征
<!-- 网页元素分析表示例（可复制到记事本保存为.txt文件） -->
网站名称：百度（www.baidu.com）
核心元素：
1. 文本元素：网站名称、搜索提示文字、底部版权信息
2. 图片元素：logo图片、图标
3. 交互元素：搜索输入框、搜索按钮、导航链接
4. 其他元素：下拉菜单、底部链接区域

功能分析：
- 信息展示：呈现网站核心服务
- 交互功能：提供搜索服务、导航跳转
- 视觉设计：简洁明了，突出核心功能

二、HTML与CSS的概念及作用

HTML（超文本标记语言）是网页的骨架，用于定义网页的结构和内容；CSS（层叠样式表）是网页的美化工具，用于定义网页的布局和样式。

2.1 HTML的作用

HTML通过标签来标记网页中的不同内容，如标题、段落、图片、链接等，告诉浏览器如何组织和显示内容。

<!-- 简单HTML结构示例 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML基础示例</title>
</head>
<body>
    <h1>这是网页标题</h1>
    <p>这是网页段落内容</p>
    <img src="image.jpg" alt="示例图片">
    <a href="https://www.baidu.com">这是链接</a>
</body>
</html>

2.2 CSS的作用

CSS用于美化HTML结构，控制文本颜色、字体大小、元素布局、背景样式等，让网页更具视觉吸引力。

实训实例：对比无CSS和有CSS的网页效果

实现步骤：

  1. 启动VS Code，创建文件夹"html-css-demo"
  2. 创建"no-css.html"文件，编写基础HTML结构（无CSS样式）
  3. 创建"with-css.html"文件，在HTML中添加CSS样式
  4. 分别在浏览器中打开两个文件，对比效果差异
<!-- no-css.html 文件内容 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>无CSS样式示例</title>
</head>
<body>
    <h1>无CSS样式的标题</h1>
    <p>这是没有CSS样式的段落文本，字体、颜色、行高都是默认值。</p>
    <a href="https://www.baidu.com">无样式链接</a>
</body>
</html>

<!-- with-css.html 文件内容 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>有CSS样式示例</title>
    <style>
        h1 {
            color: #2980b9;
            text-align: center;
            font-size: 24px;
        }
        p {
            color: #333;
            font-size: 16px;
            line-height: 1.8;
            margin: 20px;
        }
        a {
            color: #e74c3c;
            text-decoration: none;
            font-weight: bold;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>有CSS样式的标题</h1>
    <p>这是添加了CSS样式的段落文本，设置了颜色、字体大小、行高和边距。</p>
    <a href="https://www.baidu.com">有样式链接（ hover时显示下划线）</a>
</body>
</html>

三、本学期课程内容全貌

本学期网页设计与制作课程将从基础到进阶，系统学习网页开发的核心技能，主要内容如下：

<!-- 课程内容大纲 -->
第1阶段：基础入门（课一至课二）
- 导学：网页、HTML/CSS概念与作用
- 认识HTML及Visual Studio Code：开发环境搭建与HTML基础结构

第2阶段：HTML核心技能（课三至课五）
- HTML基本标签（一）：头部标签、文本标签、多媒体标签、链接标签、格式标签
- HTML基本标签（二）：属性、列表标签、框架标签、表单标签、特殊字符
- 网页中的图片路径：相对路径、绝对路径、网站目录结构规划

第3阶段：CSS核心技能（课六至课九）
- 认识CSS：CSS概念、基本语法、引入方式
- CSS中的单位及应用：相对单位、绝对单位、视口单位
- CSS基本属性及应用：文本样式、背景样式、边框样式、盒模型
- CSS（添加图片、背景图）：背景图片设置、图片美化、实战应用

第4阶段：综合实战
- 静态网页开发实战：整合HTML/CSS知识，开发完整静态网站
- 网页优化与部署：性能优化、兼容性处理、发布流程

四、学习准备与目标设定

4.1 学习准备

  • 软件准备：安装VS Code、Chrome浏览器、截图工具
  • 硬件准备：确保计算机能正常联网，配置合适的显示器（便于代码编写）
  • 资料准备：创建课程文件夹，分类保存教案、代码、实训案例
  • 心态准备：保持好奇心和耐心，积极参与实操训练

4.2 学习目标设定

实训实例：制定个人学习目标表

实现步骤：

  1. 下载《个人学习目标表》模板（可创建Word文档或TXT文件）
  2. 根据课程内容，设定阶段性学习目标（如"第1个月掌握HTML基本标签"）
  3. 设定技能目标（如"能独立开发简单静态网页"）
  4. 设定考核目标（如"实训案例通过率100%"）
  5. 定期（如每周）回顾目标完成情况，及时调整学习计划
<!-- 个人学习目标表示例 -->
姓名：XXX
班级：XXX
学期：2025-2026学年第一学期
课程：网页设计与制作

一、阶段性目标
1. 第1-2周：掌握开发环境搭建，理解HTML/CSS基本概念
2. 第3-6周：熟练使用HTML各类标签，能编写完整的HTML结构
3. 第7-10周：掌握CSS基本语法和常用属性，能美化网页
4. 第11-14周：掌握图片路径和背景图应用，能开发图文并茂的网页
5. 第15-16周：综合应用所学知识，完成静态网页实战项目

二、技能目标
1. 能独立搭建HTML网页结构
2. 能使用CSS美化网页，实现基本布局
3. 能正确处理网页中的图片引用
4. 能开发兼容主流浏览器的静态网页
5. 能规范管理网站文件和目录

三、考核目标
1. 每次实训案例独立完成，通过率100%
2. 阶段性测试成绩不低于85分
3. 期末综合项目评分不低于90分
4. 形成个人作品集（至少包含3个完整网页）