织梦手机视频教程怎么学？

织梦手机站制作图文教程

教程总览：

• 官方推荐 - 使用织梦自带的“手机门户”功能（快速、简单）
• 专业通用 - 使用响应式模板（灵活、美观、推荐）

准备工作

在开始之前,请确保你已经：

1. 拥有一套织梦CMS程序：并成功安装在您的服务器上。
2. 拥有一个域名：并已解析到您的服务器。
3. 拥有一个服务器空间：支持PHP和MySQL。
4. 准备好PC站模板：一套您希望在PC和手机上使用的网站模板。

使用织梦自带的“手机门户”功能

这是织梦官方提供的最简单快捷的方法,它通过创建一个独立的手机站点目录（如 /m/），并自动适配移动设备访问。

第一步：开启手机站点功能

1. 登录您的织梦后台。
2. 在左侧菜单栏找到并点击 【系统】 -> 【系统基本参数】。
3. 在弹出的页面中,切换到 【核心设置】 选项卡。
4. 找到 “是否开启手机站” 这一项，将其设置为 “是”。
5. 点击 【确定】 保存设置。

第二步：设置手机站点目录

1. 在后台左侧菜单栏,点击 【频道管理】 -> 【手机频道设置】。
2. 您需要设置手机站的相关信息：
   • 手机站点目录：默认是 /m/，通常保持默认即可，这意味着您的手机站将通过 您的域名/m/ 来访问。
   • 手机站点域名：如果您有专门用于手机站的域名（如 m.yourdomain.com），可以在这里填写，如果没有，可以留空。
   • 手机模板目录：选择您为手机站准备的模板文件夹，织梦默认会自带一个简单的手机模板，您也可以自己制作或下载一个。
   • 首页默认页：选择手机站的首页文件，通常是 index.html。
   • 内容页默认页：选择手机站的文章内容页文件，通常是 article_article.html。
3. 点击 【保存】。

第三步：选择并设置手机模板

1. 您需要准备一套手机模板,并将其上传到织梦的 /templets/ 目录下，例如上传到 /templets/default_mb/。
2. 在 【手机频道设置】 页面，将 “手机模板目录” 选择为您刚刚上传的模板文件夹（如 default_mb）。
3. 设置首页模板：
   • 进入 【模板】 -> 【默认模板管理】。
   • 在页面顶部的 “选择栏目” 下拉菜单中，选择 “手机主页”。
   • 找到 “主页模板” 一栏，选择您手机模板下的首页文件（如 index.htm）。
   • 点击 【更新】。
4. 页模板：
   • 同样在 【默认模板管理】 页面，将 “选择栏目” 切换到您需要适配的栏目。
   • 找到 “文章列表页模板” 和 页模板”，分别选择手机模板对应的文件（如 list_article.htm 和 article_article.htm）。
   • 点击 【更新】。

第四步：生成手机站并测试

1. 回到后台首页,点击 【生成】 -> 【更新手机主页】。
2. 系统会自动生成手机站的首页。
3. 测试方法：
   • 在浏览器地址栏输入 您的域名/m/，查看手机站是否正常显示。
   • 使用手机访问您的网站,织梦会自动跳转到 /m/ 目录下的手机站。

优点：操作简单，官方支持，快速上线。 缺点：PC端和手机端是两套独立的模板，维护起来比较麻烦，且样式可能不够统一。

使用响应式模板（强烈推荐）

这是目前最主流、最专业的方法，它只需要一套模板，通过CSS媒体查询技术，让网站能够根据不同设备（PC、平板、手机）的屏幕尺寸自动调整布局和样式。

第一步：准备一套响应式模板

1. 下载模板：在网上寻找并下载一套“织梦响应式模板”，很多模板网站都提供这类模板，通常它们会明确标注“响应式”、“自适应”或“移动端适配”。
2. 上传模板：将下载的模板文件夹上传到织梦的 /templets/ 目录下，上传到 /templets/default_responsive/。

第二步：设置PC端模板

1. 登录织梦后台。
2. 进入 【模板】 -> 【默认模板管理】。
3. 在 “选择栏目” 下拉菜单中，选择 “主页”。
4. 将 “主页模板” 设置为您刚刚上传的响应式模板的首页文件（通常是 index.htm）。
5. 同样,为各个栏目设置其对应的列表页和内容页模板。
6. 点击 【更新】 保存。

第三步：修改模板文件（核心步骤）

这是实现响应式的关键,您需要修改模板中的CSS和HTML文件。

1. 找到CSS文件：打开您的响应式模板目录，找到主要的CSS文件（如 style.css 或 main.css）。

2. 添加媒体查询代码：在CSS文件的末尾，添加类似下面的代码，这些代码定义了在不同屏幕尺寸下的样式规则。

   /* 示例：当屏幕宽度小于等于768px时（适用于平板和手机） */
   @media screen and (max-width: 768px) {
       /* 1. 隐藏PC端不需要的元素 */
       .pc-only { /* 给PC端独有元素添加这个class */
           display: none;
       }
       /* 2. 调整布局 */
       .header {
           height: auto; /* 让头部高度自适应 */
       }
       .main-content {
           width: 100%; /* 内容区宽度占满 */
           padding: 10px;
       }
       /* 3. 调整字体大小和图片 */
       body {
           font-size: 16px;
       }
       img {
           max-width: 100%; /* 图片宽度最大100%，防止溢出 */
           height: auto; /* 高度自动，保持比例 */
       }
       /* 4. 调整导航栏为移动端友好样式 */
       .nav {
           flex-direction: column; /* 导航项垂直排列 */
       }
   }
   /* 示例：当屏幕宽度小于等于480px时（适用于小屏手机） */
   @media screen and (max-width: 480px) {
       .main-content {
           padding: 5px;
           font-size: 14px;
       }
   }

3. 修改HTML结构：

   • 在需要只在PC端显示的元素上（如复杂的横幅广告、多级菜单），添加一个class，<div class="pc-only">...</div>。
   • 在需要只在移动端显示的元素上（如汉堡菜单、返回顶部按钮），添加一个class，<div class="mobile-only">...</div>，并在CSS中设置默认隐藏，在媒体查询中显示。

4. 优化图片：为了在移动端加载更快，可以在模板中调用缩略图，并确保CSS中设置了 max-width: 100% 和 height: auto。

第四步：生成网站并测试

1. 回到织梦后台,点击 【生成】 -> 【一键更新网站】，选择所有选项，生成全站。
2. 测试方法：
   • PC浏览器测试：调整浏览器窗口大小，观察网站布局是否随之变化。
   • 真机测试：使用手机、平板等不同设备访问您的网站，这是最真实的测试。
   • 开发者工具：在PC浏览器上按 F12，打开开发者工具，点击左上角的手机图标，可以模拟不同设备进行预览。

优点：一套模板适配所有设备，维护成本低，用户体验好，样式统一。 缺点：需要一定的CSS和HTML基础，对模板的选择有要求。

总结与建议

给您的建议：

• 如果您是新手,希望最快速度上线一个能用手机访问的网站，可以从 方法一 开始。
• 如果您希望建立一个专业、长期运营的网站，并且愿意花一点时间学习和配置，强烈推荐您使用方法二，这会给您和您的用户带来更好的体验。

希望这份详细的图文教程能帮助您成功制作出织梦手机站！如果在操作过程中遇到任何问题，欢迎随时提问。