# 仿白宫网站学校主页

**Repository Path**: baijinqi2021/schoolhome

## Basic Information

- **Project Name**: 仿白宫网站学校主页
- **Description**: 软件课程作业
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-25
- **Last Updated**: 2025-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 利用大模型辅助完成软件开发的说明文档 —— 以仿白宫风格计算机学院网站开发为例

## 一、引言

随着大语言模型（如 ChatGPT、Claude、Gemini 等）能力的持续增强，它们已逐渐成为软件开发中的强大助手。无论是前期的架构设计，还是后期的代码重构与文档撰写，大模型均可在多个环节提供高效、智能的辅助支持。

本说明文档将以一个静态网站开发项目为例，系统说明如何利用大模型辅助完成“仿白宫风格的计算机学院网站”开发任务，并指导如何通过有效提示，逐步引导大模型达成构建项目、设计结构、完成前端开发、优化调试和生成说明文档等全过程目标。

---

## 二、开发目标与参考样式

### 项目目标
- 构建一个学校计算机学院的展示型网站。
- 页面风格仿照美国白宫官网（whitehouse.gov），突出庄重、对称、信息分类清晰。
- 包含以下模块：
  - 动画：图标 + 倒计时黑幕隐藏
  - 首页：轮播图 + 导航栏
  - 菜单MENU：五个菜单栏内容[关于我们、科研机构、师资队伍、通知公告、联系我们] + 绑定首页轮播图链接 + 学校的基本信息
  - 关于我们模块：主要介绍学校信息和管理机构以及我院历史上的著名专家学者
  - 科研机构模块：介绍学院的科研机构基本信息、学院科研机构、实验室  + 联系我们绑定MENU中的联系我们
  - 师资模块：介绍学院的师资力量
  - 通知公告模块：主要包括校园动态、学院公告、体育赛事
  - 联系我们模块：预留学校的联系电话和邮箱，以及发送人的邮箱和发送邮件的具体信息，并加入学校的地图坐标

### 技术要求
- 采用 HTML + CSS + JavaScript 实现静态页面。
- 响应式设计，兼容桌面与移动设备。
- 使用大模型辅助完成全部开发过程。

---

## 三、大模型辅助开发的完整流程

```mermaid
graph TD;
    A[确定需求与参考样式] --> B[准备基础框架结构]
    B --> C[首页模块构建]
    C --> D[引导大模型实现子模块]
    D --> E[样式统一与响应式优化]
    E --> F[调试、检查与打磨]
    F --> G[生成使用文档与部署说明]
```

---

## 四、逐步引导大模型实现开发目标的方法

### 步骤 1：设定明确目标

> 示例提示：
> “我想仿照 whitehouse.gov 做一个计算机学院网站首页，包含网页进入动画、五个模块的菜单MENU、介绍文字、轮播图，请帮我设计整体页面结构。”

### 步骤 2：请求页面结构与骨架

> 示例提示：
> “请用 HTML 编写页面骨架，包含 header、main、footer 三部分，并添加合适的类名以便后续设计样式。”

输出后，模型可返回初步 HTML 模板代码。

### 步骤 3：逐块构建模块

> - 添加进入页面动画：
>   “请实现一个进入页面动画的功能，进入页面动画包括学校LOGO图标、学校的名字信息、倒计时黑幕进入首页。”
> - 添加导航栏：
>   “请实现一个顶部固定MENU导航栏，包含 关于我们、科研队伍、师资队伍、通知公告、联系我们四个菜单项。”
> - 添加轮播图：
>   “请写一个首页的轮播图组件包含四张首页图，并实现3-5秒的轮流播放，图片需要有放大缩小功能，每个图中有具体的文字信息和链接方便后续添加。”

### 步骤 4：美化与仿白宫风格提示

> “请根据 whitehouse.gov 的风格优化页面排版与配色，整体色调保持白蓝灰，文字使用衬线字体。”

### 步骤 5：引导模型进行响应式优化

> “请检查并优化页面在移动端下的显示效果，折叠导航栏、调整字体与图像尺寸。”

### 步骤 6：调试与语义校验

> “请检查以下 HTML 和 CSS 是否存在语义结构或样式冗余问题，并建议优化方式。”

---

## 五、大模型协助编写项目文档

开发完成后，可以提示模型生成配套的说明文档：

> 示例提示：
> “请根据这个静态网站项目生成 README.md，包括项目介绍、功能模块、使用方法和部署方式。”

> 或者：
> “请生成一个英文版简洁使用手册，供用户阅读。”

---

## 六、实践建议与技巧

### 有效提示设计

| 开发环节     | 示例提示                                           |
|------------|--------------------------------------------------|
| 页面构建     | "请生成一个三栏布局的 HTML 页面，左中右分别放置菜单、内容、侧栏" |
| 响应式调整   | "请优化以下布局，使其在手机屏幕下显示为单列布局"           |
| 白宫风格风格参考 | "请对以下 HTML 元素设置类似 whitehouse.gov 的排版和配色风格" |
| 布局对齐问题   | "请检查以下 CSS 是否存在对齐误差或重叠问题，并提供解决方案"     |

### 多轮构建节奏
- **第一轮**：确定样式与页面结构
- **第二轮**：模块拆分开发（导航栏、轮播图、介绍区等）
- **第三轮**：响应式设计与细节优化
- **第四轮**：添加交互与页面动画（如滚动、按钮悬浮效果）
- **第五轮**：调试修复与部署支持
- **第六轮**：生成文档与交付材料

---

## 七、实际项目代码结构示例

项目结构（可请求模型协助生成或说明）：

```
schoolhome/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── banner.jpg
├── README.md
└── LICENSE
```

可逐步请求模型补全每一个部分的内容，并验证运行效果。

---

## 八、结语

通过合理的提示设计与多轮交互式指导，大语言模型可以从无到有地帮助开发出一个风格特定的网站，如仿白宫风格的计算机学院站点。其应用不仅能显著提升开发效率，更为前端设计初学者提供了低门槛、高产出的实践路径。

建议在使用过程中重视以下几点：
- 明确目标、模块化构建
- 分阶段设计提示并验证反馈
- 借助模型优势补全你不熟悉的部分（样式、布局、组件）

模型是开发助手，不是替代者。善于沟通，方能高效协作。