Files
dsProject/dsLightRag/static/Menhu/teacher-ai-video-tutorials.html
2025-09-03 10:00:02 +08:00

700 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>教师AI资源制作视频教程 - 东师理想AI教育云平台</title>
<!-- 引入外部资源 -->
<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/layui@2.9.12/dist/css/layui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- 引入自定义样式 -->
<link rel="stylesheet" href="../css/style.css">
<style>
/* 页面标题区样式 */
.page-header {
padding: 80px 0 60px;
background: linear-gradient(135deg, #0066FF, #00C389);
color: white;
text-align: center;
margin-top: 70px;
}
.page-header h1 {
font-size: 36px;
margin-bottom: 15px;
}
.page-header p {
font-size: 18px;
max-width: 800px;
margin: 0 auto;
}
/* 内容区域样式 */
.tutorials-content {
padding: 40px 0;
background-color: #f5f7fa;
}
.tutorials-section,
.awarded-courses,
.ai-methods,
.learning-path {
background-color: white;
border-radius: 10px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 4px 20px rgba(0, 102, 255, 0.1);
}
.section-title {
font-size: 24px;
font-weight: bold;
color: #0066FF;
margin-bottom: 25px;
position: relative;
padding-bottom: 10px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: #00C389;
}
/* 视频教程分类样式 */
.tutorial-categories {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 30px;
}
.category-item {
padding: 10px 20px;
background-color: #f5f7fa;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.category-item:hover,
.category-item.active {
background-color: #0066FF;
color: white;
}
/* 视频卡片样式 */
.videos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-top: 20px;
}
.video-card {
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
background-color: white;
}
.video-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.video-thumbnail {
height: 180px;
background-color: #f0f2f5;
display: flex;
align-items: center;
justify-content: center;
color: #999;
position: relative;
}
.video-badge {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 10px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
.video-badge.awarded {
background-color: #ff9800;
color: white;
}
.video-badge.new {
background-color: #4caf50;
color: white;
}
.video-duration {
position: absolute;
bottom: 10px;
right: 10px;
padding: 3px 8px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 4px;
font-size: 12px;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background-color: rgba(0, 102, 255, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
cursor: pointer;
transition: all 0.3s ease;
}
.play-button:hover {
background-color: rgba(0, 102, 255, 1);
transform: translate(-50%, -50%) scale(1.1);
}
.video-content {
padding: 20px;
}
.video-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.video-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
font-size: 14px;
color: #666;
}
.video-meta span {
display: flex;
align-items: center;
}
.video-meta i {
margin-right: 5px;
}
.video-instructor {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.instructor-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #e6f7ff;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
color: #0066FF;
}
.instructor-name {
font-weight: 500;
}
.video-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.video-tags span {
padding: 3px 8px;
background-color: #f5f7fa;
border-radius: 4px;
font-size: 12px;
color: #666;
}
/* AI制作方法样式 */
.methods-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 25px;
margin-top: 20px;
}
.method-card {
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
background-color: white;
text-align: center;
padding: 25px 20px;
}
.method-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.method-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #e6f7ff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
color: #0066FF;
font-size: 24px;
}
.method-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.method-description {
font-size: 14px;
color: #666;
margin-bottom: 15px;
}
/* 学习路径样式 */
.learning-steps {
margin-top: 20px;
}
.step-item {
display: flex;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dashed #eee;
}
.step-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #0066FF;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 20px;
flex-shrink: 0;
}
.step-content {
flex: 1;
}
.step-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.step-description {
font-size: 14px;
color: #666;
margin-bottom: 10px;
}
.step-videos {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.step-video-item {
padding: 5px 10px;
background-color: #f5f7fa;
border-radius: 4px;
font-size: 12px;
color: #0066FF;
cursor: pointer;
transition: all 0.3s ease;
}
.step-video-item:hover {
background-color: #e6f7ff;
}
/* 分页样式 */
.pagination {
display: flex;
justify-content: center;
margin-top: 30px;
}
/* 页脚样式 */
.footer {
background-color: #333;
color: white;
padding: 60px 0 20px;
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<header class="header">
<div class="logo">
<i class="fas fa-graduation-cap"></i>
<span>东师理想</span>
</div>
<nav class="nav-menu">
<div class="nav-item"><a href="index.html" style="text-decoration: none; color: inherit;">首页</a></div>
<div class="nav-item"><a href="ai-resource-workshop.html" style="text-decoration: none; color: inherit;">AI资源工坊</a></div>
<div class="nav-item"><a href="ai-resource-library.html" style="text-decoration: none; color: inherit;">AI资源库</a></div>
<div class="nav-item"><a href="cloud-classroom.html" style="text-decoration: none; color: inherit;">名师云课</a></div>
<div class="nav-item"><a href="student-learning-center.html" style="text-decoration: none; color: inherit;">学情中心</a></div>
<div class="nav-item"><a href="ai-education-alliance.html" style="text-decoration: none; color: inherit;">AI教育创新联盟</a></div>
<div class="nav-item active"><a href="teacher-ai-video-tutorials.html" style="text-decoration: none; color: inherit;">教师AI视频教程</a></div>
</nav>
<div class="header-actions">
<button class="btn btn-outline">登录</button>
</div>
</header>
<!-- 页面标题区 -->
<section class="page-header">
<h1>教师AI资源制作视频教程</h1>
<p>平方录制精美的最新最火获奖课件、流程AI制作方法拆解教程手把手帮助教师学习AI技术</p>
</section>
<!-- 内容区域 -->
<section class="tutorials-content">
<div class="container">
<!-- 视频教程分类 -->
<div class="tutorials-section">
<h2 class="section-title">教程分类</h2>
<div class="tutorial-categories">
<div class="category-item active">全部教程</div>
<div class="category-item">获奖课件制作</div>
<div class="category-item">AI教案生成</div>
<div class="category-item">智能课件设计</div>
<div class="category-item">AI习题创作</div>
<div class="category-item">教学资源优化</div>
</div>
</div>
<!-- 获奖课件展示 -->
<div class="awarded-courses">
<h2 class="section-title">获奖课件展示</h2>
<div class="videos-grid">
<div class="video-card">
<div class="video-thumbnail">
<img src="https://picsum.photos/id/1015/400/300" alt="获奖课件1" style="width: 100%; height: 100%; object-fit: cover;">
<div class="video-badge awarded">获奖作品</div>
<div class="video-duration">15:32</div>
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-content">
<h3 class="video-title">全国中小学教师信息技术与教学融合优质课大赛一等奖作品</h3>
<div class="video-meta">
<span><i class="fas fa-eye"></i> 12,458次观看</span>
<span><i class="fas fa-clock"></i> 2023-10-15</span>
</div>
<div class="video-instructor">
<div class="instructor-avatar">
<i class="fas fa-user"></i>
</div>
<div class="instructor-name">张老师</div>
</div>
<div class="video-tags">
<span>高中数学</span>
<span>函数图像</span>
<span>互动课件</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-thumbnail">
<img src="https://picsum.photos/id/1018/400/300" alt="获奖课件2" style="width: 100%; height: 100%; object-fit: cover;">
<div class="video-badge awarded">获奖作品</div>
<div class="video-duration">22:18</div>
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-content">
<h3 class="video-title">省级教育信息化大赛特等奖AI辅助物理实验教学</h3>
<div class="video-meta">
<span><i class="fas fa-eye"></i> 9,876次观看</span>
<span><i class="fas fa-clock"></i> 2023-09-28</span>
</div>
<div class="video-instructor">
<div class="instructor-avatar">
<i class="fas fa-user"></i>
</div>
<div class="instructor-name">李老师</div>
</div>
<div class="video-tags">
<span>初中物理</span>
<span>力学实验</span>
<span>AI模拟</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-thumbnail">
<img src="https://picsum.photos/id/1039/400/300" alt="获奖课件3" style="width: 100%; height: 100%; object-fit: cover;">
<div class="video-badge awarded">获奖作品</div>
<div class="video-duration">18:45</div>
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="video-content">
<h3 class="video-title">全国多媒体课件大赛一等奖:历史时空穿越教学设计</h3>
<div class="video-meta">
<span><i class="fas fa-eye"></i> 15,324次观看</span>
<span><i class="fas fa-clock"></i> 2023-11-05</span>
</div>
<div class="video-instructor">
<div class="instructor-avatar">
<i class="fas fa-user"></i>
</div>
<div class="instructor-name">王老师</div>
</div>
<div class="video-tags">
<span>初中历史</span>
<span>时空观念</span>
<span>VR体验</span>
</div>
</div>
</div>
</div>
<div class="pagination">
<div class="layui-btn-group">
<button class="layui-btn layui-btn-sm layui-btn-primary">上一页</button>
<button class="layui-btn layui-btn-sm">1</button>
<button class="layui-btn layui-btn-sm layui-btn-primary">2</button>
<button class="layui-btn layui-btn-sm layui-btn-primary">3</button>
<button class="layui-btn layui-btn-sm layui-btn-primary">下一页</button>
</div>
</div>
</div>
<!-- AI制作方法拆解 -->
<div class="ai-methods">
<h2 class="section-title">AI制作方法拆解</h2>
<div class="methods-grid">
<div class="method-card">
<div class="method-icon">
<i class="fas fa-file-alt"></i>
</div>
<h3 class="method-title">AI教案生成</h3>
<p class="method-description">利用AI技术快速生成高质量教案包含教学目标、重难点分析和教学过程设计</p>
<button class="btn btn-primary" style="width: 100%;">查看教程</button>
</div>
<div class="method-card">
<div class="method-icon">
<i class="fas fa-desktop"></i>
</div>
<h3 class="method-title">智能课件设计</h3>
<p class="method-description">使用AI工具设计互动性强、视觉效果佳的课件提升课堂吸引力和教学效果</p>
<button class="btn btn-primary" style="width: 100%;">查看教程</button>
</div>
<div class="method-card">
<div class="method-icon">
<i class="fas fa-tasks"></i>
</div>
<h3 class="method-title">AI习题创作</h3>
<p class="method-description">借助AI技术快速生成多样化、个性化的习题满足不同层次学生的学习需求</p>
<button class="btn btn-primary" style="width: 100%;">查看教程</button>
</div>
<div class="method-card">
<div class="method-icon">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="method-title">教学资源优化</h3>
<p class="method-description">运用AI分析工具优化现有教学资源提升资源质量和教学适用性</p>
<button class="btn btn-primary" style="width: 100%;">查看教程</button>
</div>
</div>
</div>
<!-- 学习路径 -->
<div class="learning-path">
<h2 class="section-title">AI技术学习路径</h2>
<div class="learning-steps">
<div class="step-item">
<div class="step-number">1</div>
<div class="step-content">
<h3 class="step-title">AI基础入门</h3>
<p class="step-description">了解AI基本概念、教育领域应用场景和常用工具为后续学习打下基础</p>
<div class="step-videos">
<div class="step-video-item">AI教育应用概述</div>
<div class="step-video-item">教育AI工具介绍</div>
<div class="step-video-item">AI教学案例分享</div>
</div>
</div>
</div>
<div class="step-item">
<div class="step-number">2</div>
<div class="step-content">
<h3 class="step-title">AI工具实操</h3>
<p class="step-description">学习使用各类AI教育工具掌握基本操作方法和技巧能够独立完成简单任务</p>
<div class="step-videos">
<div class="step-video-item">AI教案生成工具实操</div>
<div class="step-video-item">智能课件设计工具实操</div>
<div class="step-video-item">AI习题创作工具实操</div>
</div>
</div>
</div>
<div class="step-item">
<div class="step-number">3</div>
<div class="step-content">
<h3 class="step-title">高级应用与创新</h3>
<p class="step-description">深入学习AI高级应用技巧探索创新教学方法打造个性化教学资源</p>
<div class="step-videos">
<div class="step-video-item">AI个性化教学设计</div>
<div class="step-video-item">跨学科AI融合应用</div>
<div class="step-video-item">AI教学创新案例</div>
</div>
</div>
</div>
<div class="step-item">
<div class="step-number">4</div>
<div class="step-content">
<h3 class="step-title">教学实践与反思</h3>
<p class="step-description">将AI技术应用于实际教学收集反馈并持续改进形成个人AI教学风格</p>
<div class="step-videos">
<div class="step-video-item">AI教学实践案例</div>
<div class="step-video-item">教学效果评估方法</div>
<div class="step-video-item">AI教学反思与改进</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-container">
<div class="footer-column">
<div class="footer-logo">东师理想</div>
<p class="footer-description">让AI成为教育新基建推动教育数字化、智能化发展。</p>
</div>
<div class="footer-column">
<h4 class="footer-title">平台服务</h4>
<ul class="footer-links">
<li><a href="ai-resource-workshop.html">AI资源工坊</a></li>
<li><a href="ai-resource-library.html">AI资源库</a></li>
<li><a href="cloud-classroom.html">名师云课</a></li>
<li><a href="student-learning-center.html">学情中心</a></li>
<li><a href="ai-education-alliance.html">AI教育创新联盟</a></li>
<li><a href="teacher-ai-video-tutorials.html">教师AI视频教程</a></li>
</ul>
</div>
<div class="footer-column">
<h4 class="footer-title">关于我们</h4>
<ul class="footer-links">
<li><a href="#">公司简介</a></li>
<li><a href="#">发展历程</a></li>
<li><a href="#">荣誉资质</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</div>
<div class="footer-column">
<h4 class="footer-title">法律合规</h4>
<ul class="footer-links">
<li><a href="#">用户协议</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">未成年人保护</a></li>
<li><a href="#">版权声明</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 东师理想AI教育云平台 版权所有</p>
</div>
</footer>
<!-- 引入外部JS -->
<script src="https://gcore.jsdelivr.net/npm/layui@2.9.12/dist/layui.min.js"></script>
<script>
// 页面专属JS代码
layui.use(['layer', 'element'], function(){
var layer = layui.layer;
var element = layui.element;
// 教程分类点击事件
$('.category-item').on('click', function(){
$('.category-item').removeClass('active');
$(this).addClass('active');
// 这里可以添加加载对应分类视频的逻辑
layer.msg('切换到分类:' + $(this).text());
});
// 播放按钮点击事件
$('.play-button').on('click', function(){
layer.msg('视频播放功能开发中');
});
// 查看教程按钮点击事件
$('.method-card .btn-primary').on('click', function(){
layer.msg('正在加载教程内容...');
});
// 学习路径视频点击事件
$('.step-video-item').on('click', function(){
layer.msg('正在加载视频:' + $(this).text());
});
});
</script>
</body>
</html>