织梦页头位置如何修改？

第一步：理解织梦的模板结构

在修改之前,你需要先了解织梦的模板文件是如何组织的，织梦的模板文件存放在 /templets/ 目录下，并且通常会以你当前使用的模板目录名作为文件夹名。

如果你使用的是 default 模板，那么模板文件就在 /templets/default/ 目录下。

打开这个目录,你会看到几个关键的PHP文件，它们构成了网站的基本框架：

• index.php: 首页模板文件。
• article_article.php: 文章内容页模板。
• list_article.php: 文章列表页模板。
• head.htm: 网站头部模板，通常包含 logo、主导航菜单、搜索框等。
• footer.htm: 网站底部模板，通常包含版权信息、友情链接等。
• channel/: 频道页面模板目录。

最关键的是 head.htm，它定义了整个网站的头部结构，并且被其他所有页面（首页、列表页、内容页等）通过 include 标签引用，修改头部的大部分操作都在 head.htm 中进行。

第二步：如何修改页头位置（分场景说明）

修改“网站Logo”的位置

Logo通常位于 <div class="header"> 或 <div class="logo"> 这样的容器内。

1. 定位文件：打开 /templets/你的模板目录/head.htm 文件。
2. 找到Logo代码：在文件中搜索类似 <img src="{dede:global.cfg_cmsurl/}/templets/你的模板目录/images/logo.png" alt="{dede:global.cfg_webname/}" /> 的代码。
3. 移动代码：
   • 想在头部左右移动：直接移动这段 <img> 标签在 <div class="header"> 容器中的位置即可。
   • 想在上下移动：将整个包含Logo的 <div class="logo"> 容器，在 <div class="header"> 容器中进行上下移动。

示例： 假设你的头部结构是这样的：

<div class="header">
    <div class="logo"> <!-- Logo区域 -->
        <img src="..." />
    </div>
    <div class="nav"> <!-- 导航区域 -->
        <!-- 导航菜单代码 -->
    </div>
</div>

如果你想将Logo放到导航栏的右边,保持现在的上下结构，无需修改，如果你想将Logo放到导航栏的下方，你需要将 <div class="logo"> 整个移动到 <div class="nav"> 的后面。

修改“主导航菜单”的位置

导航菜单通常位于 <div class="nav"> 或 <ul class="menu"> 等容器内。

1. 定位文件：同样打开 /templets/你的模板目录/head.htm。
2. 找到导航代码：导航菜单通常是由织梦的 {dede:channelartlist} 或 {dede:global.cfg_menu/} 等标签生成的，被包裹在一个 <ul> 列表里。
3. 移动代码：将包含导航菜单的整个 <div class="nav"> 容器，移动到 head.htm 文件中你想要的位置。

示例： 假设你的头部结构是 Logo 在上，导航在下：

<div class="header">
    <div class="logo">...</div>
    <div class="nav">...</div>
</div>

如果你想让导航栏在Logo的右边,你需要修改CSS，将它们变成横向排列，如果只是想在 head.htm 文件中调整顺序，直接交换 <div class="logo"> 和 <div class="nav"> 的位置即可。

修改“顶部通栏”（Banner、广告位）的位置

这个“页头”可能不是指 head.htm，而是指首页顶部的一个全宽Banner或广告区域。

1. 定位文件：打开 /templets/你的模板目录/index.php（首页模板）。
2. 找到Banner代码：在 index.php 文件中，你会看到类似 {dede:include filename="head.htm"/} 的代码，这引入了头部，在这行代码之后，通常会有一个专门放置Banner的区块，代码可能如下：

   <div class="banner">
       <!-- 这里可能是调用广告位 {dede:myad name='topbanner'/} 或者一个固定的图片 -->
       <img src="..." />
   </div>

3. 移动代码：将这个包含Banner的 <div class="banner"> 整个块，移动到 index.php 文件中你想要的位置，你可以把它移到 {dede:include filename="head.htm"/} 的上面，这样Banner就会在Logo和导航栏的上方。

第三步：修改CSS以调整最终样式

仅仅移动HTML代码是不够的,你还需要修改CSS文件来控制元素的具体位置、大小和样式，以达到最终的视觉效果。

1. 定位CSS文件：CSS文件通常位于 /templets/你的模板目录/style/ 目录下，文件名可能是 style.css、main.css 等。
2. 修改样式：
   • 调整位置：使用 margin（外边距）和 padding（内边距）属性来控制元素之间的间距。
   • 调整布局：使用 float（浮动）或 display 属性（如 display: flex）来控制元素的排列方式（横向或纵向）。
   • 调整尺寸：使用 width（宽度）和 height（高度）属性来控制元素的大小。

示例： 假设你把Logo和导航换了个位置，但它们还是上下排列，而你想要它们左右排列，你可以在CSS中这样修改：

.header {
    display: flex; /* 使用弹性布局 */
    justify-content: space-between; /* 让子元素两端对齐 */
}
.logo {
    /* 可以给logo一个固定宽度 */
    width: 200px;
}
.nav {
    /* 导航栏可以自适应宽度 */
    flex-grow: 1;
}

第四步：清除缓存

完成所有修改后,一定要清除织梦的缓存，否则你可能看不到效果。

1. 后台清除：登录织梦后台 -> 系统 -> 站点清理 -> 清除所有HTML缓存。
2. 浏览器清除：按 Ctrl + F5 强制刷新浏览器页面。

总结与注意事项

重要提示：

• 备份！备份！备份！ 在修改任何模板文件之前，请务必备份原始文件，这样可以避免修改出错时无法恢复。
• 使用FTP或文件管理器：推荐使用FTP软件（如FileZilla）或主机面板中的文件管理器来修改文件，比直接在后台编辑更方便、更安全。
• 从简单开始：如果不确定，先从修改Logo位置这种简单的操作开始，熟悉流程后再进行更复杂的布局调整。

通过以上步骤,你就可以灵活地修改织梦CMS网站页头的位置了。