dede单页面视频教程-DEDE建站-盈思创科技

第一部分：核心概念理解

在开始之前,你必须明白几个关键点：

（图片来源网络，侵删）

单页面 ≠ 文章：很多人习惯用发布文章的方式来制作单页面，但这不利于SEO（搜索引擎优化），因为标题、关键词、描述等都是固定的，单页面应该是一个独立的、有自己独立标题和描述的HTML文件。
两种实现方式：
- 修改首页法：将你的单页面内容替换掉网站默认的首页 index.html，这是最简单直接的方法。
- 创建独立页面法：创建一个新的HTML文件，然后通过修改栏目或自定义的方式，让它像普通页面一样可以访问，这种方法更灵活，不影响首页。
文件路径：你的所有自定义HTML文件通常都存放在 /templets/default/ 目录下，这是DedeCMS默认的模板目录。

第二部分：图文教程（修改首页法）

这种方法最适合制作“关于我们”、“首页大图展示”等直接替换首页内容的需求。

步骤 1：制作你的HTML页面

使用你熟悉的网页编辑器（如 Dreamweaver, VS Code, Sublime Text, 甚至记事本）制作一个完整的HTML页面。

重要提示：

保留DedeCMS的头部和尾部标签：为了让页面能正常调用网站的风格（如CSS、JS、底部信息），你的HTML页面必须包含DedeCMS的模板标签。
头部标签：在 <head> 标签内加入 {dede:include filename="head.htm"/}，这会自动引入 head.htm 文件，包含网站标题、CSS链接等。
：你的所有自定义内容（图片、文字、视频等）放在这里。
底部标签：在页面最底部加入 {dede:include filename="footer.htm"/}，这会引入 footer.htm 文件，包含网站的版权信息、JS脚本等。

示例代码 (index_new.html)：

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 这里调用网站头部 -->
    {dede:include filename="head.htm"/}我的单页面 - 网站名称</title>
    <style>
        /* 在这里写你页面的专属CSS，或者链接外部CSS文件 */
        .hero-section {
            height: 500px;
            background: url('/images/your-hero-image.jpg') no-repeat center center;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 这里调用网站导航栏 (如果你的head.htm没包含的话) -->
    {dede:include filename="head.htm"/} <!-- 如果head.htm只包含meta，你可能需要单独引入一个nav.htm -->
    <!-- ====== 你的页面内容开始 ====== -->
    <div class="hero-section">
        <h1>欢迎来到我们的单页面</h1>
        <p>这是一个使用DedeCMS制作的独立页面教程</p>
        <!-- 在这里插入你的视频教程代码 -->
        <video width="800" height="450" controls>
            <source src="/uploads/video/your-tutorial.mp4" type="video/mp4">
            您的浏览器不支持 video 标签。
        </video>
    </div>
    <div class="content-section">
        <p>这里是页面的其他文字内容...</p>
    </div>
    <!-- ====== 你的页面内容结束 ====== -->
    <!-- 这里调用网站底部 -->
    {dede:include filename="footer.htm"/}
</body>
</html>

步骤 2：上传HTML文件

通过FTP工具,将你在上一步制作的 index_new.html 文件上传到你的网站根目录下。

步骤 3：替换首页

登录你的DedeCMS后台。
进入 “生成” -> “HTML更新”。
在右侧的更新选项中,找到 “更新主页HTML” 并点击。
系统会重新生成 index.html 文件，你的首页就变成了你自定义的单页面内容了。

第三部分：图文教程（创建独立页面法）

如果你想创建一个“联系我们”页面，并且通过 www.yoursite.com/contact.html 访问，请使用此方法。

步骤 1：创建栏目

进入DedeCMS后台 “栏目管理”。
点击 “添加主栏目”。
栏目名称：填写你的页面名称，如“联系我们”。
栏目目录：填写英文目录名，如 contact，系统会自动生成 contact.html。
：选择 “单页栏目”，这是最关键的一步！
列表模板：选择一个你喜欢的模板，如 list_article_default.htm。
保存。

步骤 2：在栏目中添加内容

进入刚刚创建的“联系我们”栏目。
点击 “增加普通页面”。
：填写“联系我们”。
：在这里粘贴你准备好的HTML代码（和上面方法一中的主体内容部分类似，但不需要 head 和 footer 标签，因为栏目模板会处理）。
(可选) 设置SEO：填写关键词、描述等。
点击 “保存”。

步骤 3：更新并访问

进入 “生成” -> “一键更新网站”。
勾选所有选项,点击 “开始执行”。
更新完成后,你就可以通过 www.yoursite.com/contact.html 访问你的新单页面了。

第四部分：视频教程制作思路与要点

如果你要制作一个“如何制作Dede单页面”的视频教程，可以按照以下脚本结构进行： ** DedeCMS零基础教程：5分钟快速制作一个漂亮的单页面（含视频）

视频时长： 5-8分钟

目标观众： DedeCMS新手

视频脚本大纲

(0:00 - 0:30) 开场与引入

画面：展示一个制作精美的单页面（含视频）效果，然后切换到DedeCMS后台界面。
旁白：“大家好！今天我来教大家一个DedeCMS非常实用的技巧——如何制作一个独立的单页面，关于我们’、‘在线报名’等页面，并且在这个页面里嵌入视频，这个方法非常简单，即使你完全不懂代码也能学会！”
屏幕标注“DedeCMS单页面视频教程”。

(0:30 - 1:00) 核心思路讲解

画面：使用简单的动画或图示，解释两种方法。
- 用一个 index.html 文件替换掉网站首页。
- 创建一个独立的 about.html 文件。
旁白：“我们今天主要讲第一种最直接的方法，就是自己写一个HTML文件，然后让它成为我们的新首页，第二种方法我们会在视频简介里提供图文链接，关键是要用到DedeCMS的 {dede:include} 标签来保持网站风格统一。”
屏幕标注：关键词 {dede:include filename="head.htm"/}。

(1:00 - 3:00) 实战演示：制作HTML文件

画面：屏幕录制，打开VS Code或Dreamweaver。
旁白：
1. “我们新建一个HTML文件，我把它命名为 index_new.html。”
2. “我们写上基本的HTML结构，在 <head> 里，我们引入DedeCMS的头部模板 {dede:include filename='head.htm'/}。”
3. “在 <title> 标签里，写上我们页面的标题。”
4. “在 <body> 里，我们同样引入底部模板 {dede:include filename='footer.htm'/}。”
5. “在 <body> 的中间，就是我们的‘舞台’了，我们可以写上标题，关于我们’。”
6. “接下来是重点，如何插入视频，我们使用HTML5的 <video> 标签。”
7. “<video width="800" height="450" controls>。controls 是显示播放控件。<source src="/uploads/video/your-tutorial.mp4" type="video/mp4">，这里的 src 是你视频文件的路径，请务必确保你已经把视频上传到了DedeCMS的媒体库中。”
8. “在 <body> 结束前，别忘了加上底部标签。”
屏幕标注：高亮显示 <video> 标签和 src 路径。

(3:00 - 4:00) 上传与替换

画面：切换到FTP软件（如FileZilla），将 index_new.html 拖到网站根目录，然后切换到DedeCMS后台，进入“生成”->“HTML更新”。
旁白：“HTML文件写好后，我们通过FTP把它上传到网站的根目录，登录DedeCMS后台，点击‘生成’->‘HTML更新’，再点击‘更新主页HTML’，系统就会自动生成新的首页了。”
屏幕标注：高亮显示“更新主页HTML”按钮。

(4:00 - 5:00) 效果展示与总结

画面：在新浏览器窗口中打开网站首页，展示最终效果，视频可以正常播放。
旁白：“好了，现在我们刷新一下网站首页，看！是不是已经变成我们自定义的页面了，视频也可以正常播放，是不是很简单？”
旁白（：“制作DedeCMS单页面的三步走：第一，用 {dede:include} 标签编写包含网站风格的HTML；第二，上传文件到根目录；第三，在后台生成首页，这个方法可以让你完全掌控首页的内容，非常灵活。”
屏幕标注：显示“三步走”的要点。

(5:00 - 5:30) 结尾与互动

画面：返回到讲解界面。
旁白：“以上就是本次教程的全部内容，如果这个视频对你有帮助，请别忘了点赞、投币和关注！如果遇到问题，欢迎在评论区留言，我会尽力解答，我们下期再见！”
屏幕标注：出现“点赞”、“关注”等动画图标，并显示视频简介中的相关链接（如方法二的图文教程）。

dede单页面视频教程