Dreamweaver织梦新手如何快速上手？-织梦建站-盈思创科技

Dreamweaver 负责“前端页面的美工和布局”，织梦负责“后端内容的动态调用和管理”。

（图片来源网络，侵删）

下面我将为你详细拆解整个流程,从环境准备到最终整合，并附上关键代码示例。

第一部分：核心理念与流程概览

想象一下你在盖房子：

Dreamweaver 就像是你的 室内设计师和装修队，他们负责房子的外观、装修风格、家具摆放（即网站的视觉设计、HTML/CSS/JS代码）。
织梦CMS 则像是 物业管理公司和水电煤系统，它负责管理住户信息（文章、产品）、提供水电服务（数据库连接、动态内容生成），让你能轻松地更换住户或调整水电用量，而不用重新装修房子。

工作流程：

设计阶段 (DW)：在 Dreamweaver 中，完全不考虑织梦，像制作普通静态网站一样，设计出网站的首页、列表页、内容页的 HTML 结构和 CSS 样式，这个阶段，页面里的所有文字、图片都是“死”的、写死的。
切图/模板化阶段 (DW)：将设计好的静态页面，按照织梦的规则，改造成模板文件，这个阶段是关键，你需要用织梦的标签替换掉静态页面中需要动态显示的内容。
上传与整合阶段 (FTP)：将制作好的模板文件上传到织梦系统的指定目录中。
后台配置阶段 (织梦后台)：登录织梦后台，告诉系统你刚刚上传的模板文件分别对应哪个页面（首页、列表页等），并设置好全局变量等。
内容管理阶段 (织梦后台)：在织梦后台添加文章、产品等内容，网站就会自动调用你制作的模板，生成最终的动态网页。

第二部分：详细步骤教程

环境准备

安装织梦CMS：
（图片来源网络，侵删）
- 从织梦官网下载最新版的织梦程序。
- 在你的本地电脑（推荐使用 XAMPP, WAMP, MAMP 等集成环境）或你的服务器上，按照官方安装指南完成织梦的安装，记住你的安装目录，D:\xampp\htdocs\dedecms。
安装 Dreamweaver：

确保你已安装 Adobe Dreamweaver（推荐 CS6 或更高版本，新版本对旧版 PHP 支持可能更好）。

使用 Dreamweaver 设计静态页面

创建站点：
- 打开 Dreamweaver，点击 站点 -> 新建站点。
- 站点名称：随便起一个，我的织梦站”。
- 本地站点文件夹：选择你刚才安装织梦的目录，D:\xampp\htdocs\dedecms。
- 服务器技术：选择 PHP。
- 测试服务器：确保文件夹与本地站点文件夹一致。
- 完成创建,这样做的好处是，DW 会智能提示织梦自带的函数和标签。

设计首页 (index.html)：

（图片来源网络，侵删）

在 DW 中，像制作普通网页一样，使用 HTML 和 CSS 设计你的首页布局，一个典型的首页结构如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网站首页</title>
<link rel="stylesheet" href="templets/default/style/style.css">
</head>
<body>
<header>
    <div class="logo">我的网站 Logo</div>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">产品展示</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>
<div class="slider">
    <!-- 这里是轮播图，图片和链接是写死的 -->
    <img src="templets/default/images/banner1.jpg" alt="banner1">
</div>
<div class="main-content">
    <div class="news-list">
        <h2>最新资讯</h2>
        <!-- 这里是新闻列表，内容是写死的 -->
        <ul>
            <li><span>2025-10-27</span><a href="#">这里是新闻标题1</a></li>
            <li><span>2025-10-26</span><a href="#">这里是新闻标题2</a></li>
            <li><span>2025-10-25</span><a href="#">这里是新闻标题3</a></li>
        </ul>
    </div>
    <div class="sidebar">
        <h2>网站公告</h2>
        <!-- 这里是公告列表，内容也是写死的 -->
        <ul>
            <li><a href="#">网站正式上线啦！</a></li>
            <li><a href="#">欢迎联系我们洽谈合作。</a></li>
        </ul>
    </div>
</div>
<footer>
    <p>&copy; 2025 我的网站 版权所有</p>
</footer>
</body>
</html>

这个 index.html 就是一个完全静态的页面。

将静态页面改造为织梦模板

这是最关键的一步,我们将用织梦的 全局标签 和 内容标签 替换掉静态内容。

重命名文件：
- 将你刚刚做好的 index.html 重命名为 index.htm，织梦默认的模板后缀是 .htm。
添加织梦模板头部和尾部：
- 在 <head> 标签内部，织梦需要一些特定信息来识别模板，在 <title> 标签后面添加：
```
{dede:global.cfg_webname/}
{dede:global.cfg_description/}
{dede:global.cfg_keyword/}
```
- 在 </head> 标签之前，添加CSS和JS的调用标签（替换掉原来的 <link> 和 <script>）：
```
<link rel="stylesheet" href="{dede:global.cfg_templeturl/}/style/style.css">
<script src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script>
```

替换动态内容区域：

替换网站标题：

<!-- 原来的 -->
<title>我的网站首页</title>
<!-- 改为 -->
<title>{dede:global.cfg_webname/}</title>

替换导航菜单：织梦有专门的栏目调用标签，织梦的栏目分为“顶级栏目”和“下级栏目”，我们需要用嵌套循环来实现。

<!-- 原来的 -->
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>
<!-- 改为 -->
<nav>
    <ul>
        {dede:channel type='top' row='8'}
        <li><a href="[field:typelink/]">[field:typename/]</a></li>
        {/dede:channel}
    </ul>
</nav>

{dede:channel type='top' row='8'}：调用顶级栏目，最多8个。
[field:typelink/]：栏目链接。
[field:typename/]：栏目名称。

替换首页焦点图/轮播图：这通常需要调用推荐或头条的文章，可以使用 arclist

<!-- 原来的 -->
<div class="slider">
    <img src="templets/default/images/banner1.jpg" alt="banner1">
</div>
<!-- 改为 (假设你有一个名为“焦点图”的栏目，或者调用所有推荐的文章) -->
<div class="slider">
    {dede:arclist flag='c' row='5'}
    <a href="[field:arcurl/]"><img src="[field:litpic/]" alt="[field:title/]"></a>
    {/dede:arclist}
</div>



flag='c'：调用推荐属性为“c”的文章（你可以在发布文章时设置）。
row='5'：调用5条。
[field:arcurl/]：文章链接。
[field:litpic/]：文章缩略图。
[field:title/]。



替换新闻列表：
同样使用 arclist
<!-- 原来的 -->
<div class="news-list">
    <h2>最新资讯</h2>
    <ul>
        <li><span>2025-10-27</span><a href="#">这里是新闻标题1</a></li>
        ...
    </ul>
</div>
<!-- 改为 (假设新闻在ID为1的栏目下) -->
<div class="news-list">
    <h2>最新资讯</h2>
    <ul>
        {dede:arclist typeid='1' row='10' titlelen='30'}
        <li>
            <span>[field:pubdate function="MyDate('Y-m-d', @me)"/]</span>
            <a href="[field:arcurl/]">[field:title/]</a>
        </li>
        {/dede:arclist}
    </ul>
</div>


typeid='1'：指定调用栏目ID为1下的文章。
titlelen='30'长度限制为30个字符。
[field:pubdate function="MyDate('Y-m-d', @me)"/]：调用发布时间，并用 MyDate 函数格式化为年-月-日。



替换页脚版权：
<!-- 原来的 -->
<footer>
    <p>&copy; 2025 我的网站 版权所有</p>
</footer>
<!-- 改为 -->
<footer>
    <p>&copy; {dede:global.cfg_powerby/} All Rights Reserved.</p>
</footer>

{dede:global.cfg_powerby/} 会自动替换为织梦的版权信息，如 Power by DedeCMS。



CSS/JS 文件路径：

确保你的 CSS、JS、图片等静态资源放在 templets/你的默认模板文件夹/ (templets/default/) 目录下。
在模板中调用这些文件时,务必使用织梦的全局变量：
CSS路径：{dede:global.cfg_templeturl/}/style/style.css
图片路径：<img src="{dede:global.cfg_templeturl/}/images/logo.png">
{dede:global.cfg_templeturl/} 会自动指向你当前模板的目录，避免路径错误。


上传模板文件

使用 FTP 工具（如 FileZilla）连接到你的服务器。
将你修改好的模板文件（如 index.htm）以及相关的 CSS、JS、图片文件夹，上传到织梦安装目录下的 templets/你的默认模板文件夹/ 中（templets/default/）。

在织梦后台设置模板


登录你的织梦后台。


进入 系统 -> 系统基本参数 -> 核心设置。

确认 站点根网址 和 CMS根目录 是否正确。



进入 模板 -> 默认模板管理。

你可以看到你上传的 index.htm 文件。
在 主页模板 的下拉菜单中选择你上传的 index.htm。
同理,如果你制作了列表页 (list_article.htm) 和内容页 (article_article.htm)，也需要在这里进行设置。



（可选）进入 模板 -> 全局标记 -> 首页调用，可以在这里设置首页各模块调用内容，但通常直接在模板文件里写死更灵活。


生成网站并查看效果

回到织梦后台首页。
点击左侧菜单的 生成 -> 一键更新网站。
勾选 更新主页、更新栏目、更新文档，然后点击 开始更新。
更新完成后,打开你的网站域名，你就能看到用 Dreamweaver 设计的、但内容由织梦动态生成的网站了！


第三部分：常用织梦标签速查




用途
示例




全局标签




{dede:global.cfg_webname/}
网站名称
<title>{dede:global.cfg_webname/}</title>


{dede:global.cfg_templeturl/}
当前模板目录
<img src="{dede:global.cfg_templeturl/}/img/logo.png">


{dede:arclist}
文章列表
{dede:arclist row='5' titlelen='20'}...{/dede:arclist}


[field:title]

<a href="[field:arcurl/]">[field:title]</a>


[field:arcurl]
文章链接
<a href="[field:arcurl/]">详情</a>


[field:litpic]
文章缩略图
<img src="[field:litpic]" alt="[field:title]">


[field:description]
文章摘要
[field:description function='cn_substr(@me, 100)']


[field:pubdate]
发布时间
[field:pubdate function="MyDate('Y-m-d', @me)"]


{dede:channel}
栏目列表
{dede:channel type='top' row='8'}...{/dede:channel}


[field:typename]
栏目名称
<a href="[field:typelink/]">[field:typename]</a>


[field:typelink]
栏目链接
<a href="[field:typelink/]">进入栏目</a>




总结与注意事项

分工明确：DW 只管“样子”，织梦只管“内容”，不要在 DW 里试图去理解织梦的逻辑，也不要在织梦后台去修改 HTML 结构。
路径是关键：模板中所有静态资源的路径（CSS, JS, 图片）必须使用 {dede:global.cfg_templeturl/} 变量，这是最容易出错的地方。
标签灵活：织梦标签非常强大，可以通过各种属性（如 typeid, row, titlelen, flag）来精确控制调用内容，多看官方手册。
现代替代方案：虽然这个方法非常经典，但现在主流的前端开发流程是：使用 VS Code、Sublime Text 等轻量级编辑器，配合 Webpack/Vite 等构建工具来开发前端项目，然后通过 API 与后端（如织梦）进行数据交互，但对于快速搭建一个传统的企业展示网站，DW + 织梦的组合依然非常高效。

希望这份详细的教程能帮助你顺利完成从 Dreamweaver 到织梦的整合！如果在操作中遇到具体问题，可以随时提出。

用途	示例
全局标签
`{dede:global.cfg_webname/}`	网站名称	`<title>{dede:global.cfg_webname/}</title>`
`{dede:global.cfg_templeturl/}`	当前模板目录	`<img src="{dede:global.cfg_templeturl/}/img/logo.png">`
`{dede:arclist}`	文章列表	`{dede:arclist row='5' titlelen='20'}...{/dede:arclist}`
`[field:title]`		`<a href="[field:arcurl/]">[field:title]</a>`
`[field:arcurl]`	文章链接	`<a href="[field:arcurl/]">详情</a>`
`[field:litpic]`	文章缩略图	`<img src="[field:litpic]" alt="[field:title]">`
`[field:description]`	文章摘要	`[field:description function='cn_substr(@me, 100)']`
`[field:pubdate]`	发布时间	`[field:pubdate function="MyDate('Y-m-d', @me)"]`
`{dede:channel}`	栏目列表	`{dede:channel type='top' row='8'}...{/dede:channel}`
`[field:typename]`	栏目名称	`<a href="[field:typelink/]">[field:typename]</a>`
`[field:typelink]`	栏目链接	`<a href="[field:typelink/]">进入栏目</a>`

Dreamweaver织梦新手如何快速上手？

第一部分：核心理念与流程概览

第二部分：详细步骤教程

环境准备

使用 Dreamweaver 设计静态页面

将静态页面改造为织梦模板

上传模板文件

在织梦后台设置模板

生成网站并查看效果

第三部分：常用织梦标签速查

总结与注意事项

相关文章

目录[+]