700 lines
27 KiB
HTML
700 lines
27 KiB
HTML
|
<!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>
|