大学生网页课作业包：6页可直接运行的个人主页，带FLV视频播放和简易交互

最新推荐文章于 2026-06-26 16:53:16 发布

原创最新推荐文章于 2026-06-26 16:53:16 发布 · 610 阅读

本内容遵循CC 4.0 BY-SA版权协议

简介：专为网页设计类课程期末作业准备的一套轻量级HTML个人主页资源，包含首页、关于我、灵魂展示、视频专区、新闻动态、图片画廊共6个独立页面，全部基于原生HTML+CSS编写，无框架依赖，不需服务器环境，双击index.html即可本地预览。内置FLV格式视频播放器（FLVPlayer_Progressive.swf）及Halo皮肤控件（Halo_Skin_3.swf），支持在video文件夹中替换本地视频文件实现即插即播。images文件夹提供占位图素材，Scripts文件夹含必要JS逻辑，所有页面文字、图片路径、超链接均可手动修改快速个性化。额外附带多个.url快捷方式（如主播培训、小吃培训、健康管理等），模拟真实网站外部导航扩展场景，便于演示网页结构完整性。代码结构清晰、注释简明，适合零基础学生理解与调整，兼容Chrome、Edge、Firefox等主流浏览器。

1. 项目概述：这不是模板，是“能交作业的成品”

你有没有经历过那种凌晨两点还在改网页课作业的绝望？老师说“做一个个人主页”，结果你搜了一堆“HTML模板”，下载下来发现全是乱码、路径错乱、视频播不了、图片全红叉，最后只能硬着头皮抄同学代码，还被查重系统标红三处……我带过六届网页设计选修课助教，每年期末都收到至少四十份“几乎一模一样”的作业——不是学生懒，是真找不到一个开箱即用、改三行字就能交、本地双击就跑、老师点开不皱眉的起点。这个资源包，就是我按着教室投影仪分辨率、机房IE兼容模式、学生电脑里连Node.js都没装过的现实，亲手打磨出来的“作业友好型”个人主页套件。

它不是炫技的前端作品集，也不是教科书式的教学示例，而是一套经过真实课堂验证的交付物：6个独立HTML文件（index.html、about.html、soul.html、video.html、news.html、images.html），全部基于原生HTML4.01 Transitional + CSS2.1编写，零框架、零构建工具、零后端依赖。你不需要懂Webpack，不用配VS Code Live Server，更不用折腾本地服务器——把整个文件夹拷进U盘，插进机房电脑，双击index.html，页面立刻弹出来，视频自动加载，导航栏点击跳转丝滑，连老师用老版本Edge打开都不会报错。关键词里的“FLV视频播放”不是噱头，而是刻意保留的“时代印记”：很多高校机房仍默认禁用Flash Player的自动激活，但这个包里嵌入的是FLVPlayer_Progressive.swf，它采用渐进式加载策略，配合Halo_Skin_3.swf皮肤，能在Flash Player 9+环境下稳定播放本地FLV文件，且支持暂停、拖拽、音量调节等基础交互。至于那些.url快捷方式（主播培训.url、小吃培训.url、高级健康管理.url），它们不是彩蛋，而是教学设计的一部分——网页课考核标准里明确写着“需体现网站外部链接能力”，直接放一个真实URL可能被老师质疑“是不是抄的”，而一个本地.url文件，双击就跳转到对应网页，既安全又规范，还能在答辩时自然带出一句：“这里模拟了个人品牌延伸场景，比如未来想做健康博主，就可以链接到专业课程平台”。

我试过用VuePress生成静态站，也试过用Bootstrap 5写响应式布局，最后全删了。为什么？因为学生交作业那天，他电脑里只有Chrome和一个叫“360安全浏览器”的奇怪混合体，而他的U盘里只存得下20MB。这个包压缩后不到8MB，所有资源路径全部相对化，图片用1280×720 JPEG占位图（兼顾清晰度与加载速度），CSS内联关键样式避免FOUC（内容闪现），JS逻辑控制在200行以内。它不追求“现代”，只追求“能用”；不强调“优雅”，只确保“不出错”。如果你是学生，今天下午花40分钟改完文字、换掉三张图、替换成自己拍的FLV视频，就能交一份让老师点头说“结构完整、功能齐全、有个人特色”的作业；如果你是老师，拿它当课堂演示案例，学生照着抄都能跑通，省下半小时调试时间——这才是它存在的全部意义。

2. 整体架构与设计逻辑：为什么是这6个页面？为什么坚持用FLV？

2.1 页面功能划分：紧扣教学大纲的“最小可行网站”

网页设计类选修课的教学大纲通常包含五个核心能力维度：HTML结构语义化、CSS布局与美化、多媒体嵌入、超链接体系构建、基础交互实现。这个6页结构，就是对这五维能力的精准映射，没有一个页面是冗余的：

index.html（首页）：承担“网站门面”功能。它必须包含清晰的导航栏（ul+li+CSS定位）、轮播式Banner区（用CSS background-image+opacity动画模拟）、核心信息摘要（h1+h2+p结构）。这里刻意避开JavaScript轮播插件，全部用纯CSS3 keyframes实现，既满足动态效果要求，又规避了学生因JS语法错误导致整页崩溃的风险。
about.html（关于我）：训练“个人信息结构化表达”。页面采用两栏布局（左侧头像+右侧文字），头像使用<img>标签而非CSS背景，强制学生理解alt属性的可访问性意义；文字部分用<dl><dt><dd>定义列表组织教育背景、技能标签、兴趣爱好，比单纯用<p>更符合语义化要求。
soul.html（灵魂展示）：这是最容易被忽略却最体现设计思维的页面。它不放照片，只放一段手写体风格的CSS文字（@font-face引入本地woff字体），配合淡入动画和鼠标悬停变色效果。目的很明确：让学生动手修改font-family、color、transition三个属性，就能直观看到设计变化，建立“代码即视觉”的直觉。
video.html（视频专区）：直击“多媒体嵌入”考核点。页面仅保留一个居中视频播放器容器（<div id="flvPlayer">），下方用<ul class="video-list">列出可切换的视频标题。所有交互逻辑由Scripts/flv_control.js驱动：点击标题触发SWF播放器的loadVideo()方法，同时高亮当前项。这里没用iframe嵌入YouTube，因为机房网络策略常屏蔽外部视频源，本地FLV才是唯一可控方案。
news.html（新闻动态）：训练“信息流组织能力”。采用时间倒序排列的卡片式布局（每个<article>含<time>标签），每条新闻包含标题、摘要、发布日期。特别加入一个“添加新闻”按钮（<button onclick="addNews()">），点击后弹出表单，提交后动态插入新<article>——这是全包里唯一的JavaScript DOM操作实例，代码注释详细到每一行，确保学生能看懂createElement、appendChild的调用链。
images.html（图片画廊）：解决“响应式图片展示”痛点。使用<figure>+<figcaption>语义化包裹每张图，缩略图网格用CSS Grid实现（display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))），点击缩略图弹出大图模态框（纯CSS :target伪类实现，无需JS）。这样既满足“多图展示”要求，又避免学生陷入jQuery Lightbox的配置地狱。

提示：所有页面的<head>区域都包含相同的<meta charset="gb2312">声明。这不是过时，而是机房电脑的Windows系统默认编码。曾有学生用UTF-8保存，结果在机房IE里显示乱码，被扣2分——这种细节，只有踩过坑的人才记得住。

2.2 FLV播放器的技术选型：在淘汰边缘守住最后一道兼容性防线

为什么坚持用FLV格式和SWF播放器？2024年还在用Flash，听起来像行为艺术。但回到教学现场：高校机房的Windows 7/10系统，管理员为安全起见，普遍禁用Chrome的Flash自动运行，却允许用户手动点击启用；而IE11和Edge Legacy（IE模式）对Flash的支持反而更稳定。FLVPlayer_Progressive.swf正是为此场景定制的——它不依赖RTMP流媒体服务器，采用HTTP渐进式下载，只要视频文件放在video文件夹里，播放器就能通过相对路径video/demo.flv直接读取。

对比其他方案，它的优势非常实际：
- vs HTML5 <video>标签：需要转码MP4/WebM格式，学生用手机拍的视频导出为FLV只需10秒（用格式工厂），转MP4却要3分钟且常失败；更重要的是，HTML5视频在IE11里需额外配置<source>多格式兜底，学生极易漏写type="video/mp4"导致黑屏。
- vs 第三方JS播放器（如Video.js）：需CDN引入或本地存放大量JS/CSS文件，学生解压后常误删dist目录，或把video-js.css路径写成绝对路径，导致样式丢失。
- vs 自研Canvas播放器：超出课程要求，且涉及音视频解码，对学生是灾难。

Halo_Skin_3.swf皮肤的选择同样务实：它提供完整的播放控制条（播放/暂停、进度条、音量、全屏），UI元素全部矢量化，缩放不失真，在1366×768分辨率的机房投影仪上依然清晰。皮肤文件体积仅124KB，比任何CSS重写的播放器UI都轻量。我在测试中发现，当学生把video文件夹里的demo.flv替换成自己录制的300MB FLV文件时，FLVPlayer_Progressive.swf会自动启用缓冲策略——先加载前5秒，边下边播，而不会像某些JS播放器那样卡死在“loading”状态。

注意：FLV文件命名必须全英文+数字，不能含中文、空格或特殊符号（如“我的视频.flv”会失败）。这是Flash Player的路径解析限制，已在Scripts/flv_control.js里加入encodeURIComponent()预处理，但学生仍需在替换文件时手动重命名——这个细节，我特意在readme.txt里用加粗字体写了三遍。

3. 核心细节解析与实操要点：从双击运行到个性化定制的全流程

3.1 目录结构与资源路径：为什么所有路径都用“./”开头？

资源包的目录树看似普通，但每个层级都藏着教学意图。我们来拆解真实操作场景：

├── index.html          # 入口文件，所有页面的导航起点
├── about.html
├── soul.html
├── video.html
├── news.html
├── images.html
├── images/             # 存放所有图片素材
│   ├── banner.jpg      # 首页Banner背景图（1920×500）
│   ├── avatar.png      # 关于我页面头像（300×300）
│   └── gallery/        # 图片画廊原始大图（1200×800）
│       ├── img1.jpg
│       └── img2.jpg
├── video/              # FLV视频存放目录
│   └── demo.flv        # 默认播放视频（时长2分17秒）
├── Scripts/            # JavaScript脚本集中地
│   ├── flv_control.js  # 视频播放控制逻辑
│   └── news_add.js     # 新闻动态添加功能
├── Halo_Skin_3.swf     # 播放器皮肤文件
├── FLVPlayer_Progressive.swf  # 核心播放器
└── 主播培训.url        # 外部链接快捷方式

关键在于所有HTML文件内的资源引用，均采用以当前文件为基准的相对路径。例如video.html中嵌入播放器的代码是：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" 
        width="800" height="480">
  <param name="movie" value="./FLVPlayer_Progressive.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="FlashVars" value="vcastr_file=./video/demo.flv&skin=./Halo_Skin_3.swf" />
  <embed src="./FLVPlayer_Progressive.swf" 
         quality="high" 
         wmode="opaque" 
         FlashVars="vcastr_file=./video/demo.flv&skin=./Halo_Skin_3.swf" 
         width="800" height="480" 
         type="application/x-shockwave-flash" 
         pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

注意value="./FLVPlayer_Progressive.swf"和FlashVars="vcastr_file=./video/demo.flv&skin=./Halo_Skin_3.swf"中的./前缀——这意味着无论你把整个文件夹放在D盘根目录，还是U盘的“作业”文件夹里，只要保持目录结构不变，路径就永远正确。我见过太多学生把播放器路径写成/FLVPlayer.swf（绝对路径），结果在机房电脑上变成file:///C:/FLVPlayer.swf，而实际文件在E:/作业/FLVPlayer.swf，直接404。

图片路径同理。about.html中头像引用是：

<img src="./images/avatar.png" alt="我的头像" width="300" height="300">

如果学生想换自己的照片，只需把手机拍的me.jpg重命名为avatar.png，覆盖images/目录下的原文件即可。不需要打开Photoshop调尺寸——所有占位图都已预设好常用尺寸：banner.jpg（1920×500适配首页横幅）、avatar.png（300×300保证圆形裁剪不拉伸）、gallery/下的图片统一1200×800（适配画廊模态框最大宽度）。

实操心得：让学生养成“先改路径再改内容”的习惯。比如修改新闻动态，第一步不是动文字，而是打开news.html，找到<ul class="news-list">，确认每条<li>里的<time datetime="2024-03-15">日期格式是否正确（必须是YYYY-MM-DD），第二步再替换<h3>标题和<p>摘要。这样能避免因日期格式错误导致整个新闻列表渲染异常。

3.2 FLV视频替换全流程：从手机拍摄到本地播放的零失败指南

学生最常问的问题是：“我的手机视频怎么变成FLV？”这里给出一条不依赖专业软件的傻瓜路径：

第一步：获取原始视频
- iPhone用户：用“屏幕录制”功能拍一段30秒自我介绍，保存在相册。
- 安卓用户：用系统自带“录屏”或“相机”拍摄，确保分辨率不低于720p。

第二步：转码为FLV（三分钟搞定）
- 下载绿色版“格式工厂”（官网 direct.xunlei.com，非第三方下载站），安装时取消所有捆绑软件。
- 打开格式工厂 → 顶部菜单“视频” → “所有转到FLV” → 点击左上角“添加文件”，选择手机视频。
- 在右侧面板，关键参数设置：
- 视频编码器：Flash Video (FLV)（不是H.264！）
- 分辨率：保持原尺寸（不要勾选“调整大小”，避免变形）
- 帧率：25（匹配国内电视标准，比30帧更兼容）
- 视频比特率：800kbps（平衡清晰度与文件大小）
- 音频编码器：MP3
- 音频比特率：128kbps
- 点击“确定”，再点右上角“开始”按钮。2分钟内完成，输出文件自动保存在output/FLV/子目录。

第三步：部署到项目
- 将生成的output/FLV/xxx.flv文件，复制到资源包的video/文件夹。
- 重命名为demo.flv（覆盖原文件）——这是最保险的做法，避免修改HTML里的路径。
- 双击index.html → 点击导航栏“视频专区” → 页面加载后自动播放新视频。

第四步：验证播放（必做三步检查）
1. 打开浏览器开发者工具（F12）→ 切换到“Console”标签页 → 播放视频，观察是否有红色报错。正常应无任何输出。
2. 拖动进度条到中间位置 → 松开鼠标 → 视频应立即跳转并继续播放（测试缓冲有效性）。
3. 右键点击播放器区域 → 查看上下文菜单是否显示“关于Adobe Flash Player…”，证明Flash已激活。

踩过的坑：某次课上，12名学生中有3人播放失败，排查发现全是Windows 10系统更新后禁用了Flash。解决方案：在浏览器地址栏输入chrome://settings/content/flash → 将“询问（推荐）”改为“允许站点运行Flash” → 在下方“允许”列表中点击“添加”，输入file:///（注意三个斜杠）→ 重启浏览器。这个操作我已写进随包附赠的《机房应急手册.docx》。

4. 实操过程与核心环节实现：手把手带你改出个人主页

4.1 首页（index.html）定制：从模板到“我的门面”

首页是老师第一眼看到的页面，修改重点在于“快速建立个人识别度”。我们以真实学生案例演示：

原始首页结构：

<div id="banner">
  <h1>欢迎来到我的个人主页</h1>
  <p>一个正在学习网页设计的学生</p>
</div>
<nav>
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我</a></li>
    <li><a href="soul.html">灵魂展示</a></li>
    <li><a href="video.html">视频专区</a></li>
    <li><a href="news.html">新闻动态</a></li>
    <li><a href="images.html">图片画廊</a></li>
  </ul>
</nav>

学生A（计算机专业，想突出技术能力）修改步骤：
1. Banner文案重构：将<h1>改为<h1>张伟 | 全栈开发学习者</h1>，<p>改为<p>掌握HTML/CSS/JavaScript，正在实践Node.js与React</p>。注意：<h1>标签全年级只能出现一次，首页必须用，其他页面用<h2>。
2. 导航栏微调：在“视频专区”链接后插入新项<li><a href="https://github.com/zhangwei-dev" target="_blank">GitHub</a></li>。target="_blank"确保新标签页打开，避免学生误关主页。
3. 添加技术图标：在Banner下方新增<div class="tech-icons">，放入SVG格式的HTML5、CSS3、JS图标（已预置在images/icons/目录）。SVG代码直接内联，不引用外部文件，防止路径错误：
```html