这个模板将遵循现代网页设计原则,注重用户体验、SEO友好性和代码的可维护性，下面我将从 设计理念、文件结构、核心代码示例、以及后台使用说明 四个方面来详细阐述。

设计理念

  1. 色彩方案:

    • 主色调: 浅蓝色 (#E3F2FD, #90CAF9)，传达出专业、信任、科技和宁静的感觉，非常适合设计和技术公司。
    • 辅助色: 深蓝色 (#1976D2) 用于标题、按钮和重要链接，形成视觉焦点。
    • 中性色: 白色 (#FFFFFF) 作为背景，灰色 (#757575, #9E9E9E) 用于正文，确保良好的可读性。
    • 点缀色: 橙色 (#FF9800) 或绿色 (#4CAF50) 用于“立即咨询”、“案例展示”等行动号召按钮，增加活力。

  2. 布局结构:

    • 响应式设计: 采用 Flexbox 和 Grid 布局，确保网站在桌面、平板和手机上都有出色的显示效果。
    • 清晰导航: 顶部固定导航栏，包含 Logo、主导航菜单和联系方式。
    • 视觉焦点: 首页采用全屏大图或视频背景，搭配简短有力的 Slogan，迅速抓住访客眼球。
    • 内容模块化: 将服务、案例、关于我们、客户评价等内容清晰地划分为独立模块，方便用户浏览。
    • 页脚信息: 包含公司简介、快速链接、联系方式和版权信息。

  3. 交互体验:

    • 平滑滚动效果。
    • 鼠标悬停时的微妙变化（如按钮变色、图片放大）。
    • 使用 Intersection Observer API 实现滚动时的元素渐入动画，提升页面加载感。

文件结构

一个规范的 DedeCMS 模板目录结构如下：

templets/
└── default/              // 默认模板文件夹，可以自定义名称
    ├── index.html        // 首页模板
    ├── article_list.html // 文章列表页（如案例、新闻）
    ├── article_article.html // 文章详情页
    ├── page.html         // 自定义页面（如关于我们）
    ├── head.html         // 公共头部文件（包含导航栏）
    ├── foot.html         // 公共底部文件
    ├── style.css         // 主样式文件
    ├── script.js         // 主要的 JavaScript 文件
    ├── images/           // 存放图片的文件夹
    │   ├── logo.png
    │   └── hero-bg.jpg
    └── ...               // 其他可能需要的文件

说明:

  • 将 head.html 和 foot.html 分离出来，可以在所有页面中通过 {dede:include filename="head.html"/} 和 {dede:include filename="foot.html"/} 来调用，极大提高了代码复用性。

核心代码示例

这里提供几个关键文件的核心代码片段。

head.html (头部)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{dede:global.cfg_webname/}_专业的网站设计、品牌设计服务">
    <meta name="keywords" content="{dede:global.cfg_keywords/}">{dede:global.cfg_webname/}_{dede:field.title/}</title>
    <!-- 引入字体图标库，Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="{dede:global.cfg_cmsurl/}/templets/default/style.css">
    <!-- DedeCMS 自带的标签，用于生成特定浏览器样式 -->
    {dede:include filename="style.htm"/}
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="main-header">
        <div class="container">
            <a href="{dede:global.cfg_basehost/}" class="logo">
                <img src="{dede:global.cfg_cmsurl/}/templets/default/images/logo.png" alt="{dede:global.cfg_webname/}">
            </a>
            <nav class="main-nav">
                <ul>
                    <li><a href="{dede:global.cfg_basehost/}" {dede:field name='typeid' function='IsTop(@me)'/}>首页</a></li>
                    {dede:channelartlist typeid='top' row='10'}
                        <li><a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></li>
                    {/dede:channelartlist}
                    <li><a href="tel:13800138000"><i class="fas fa-phone"></i> 138-0013-8000</a></li>
                </ul>
            </nav>
            <!-- 移动端菜单按钮 -->
            <div class="mobile-menu-toggle">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </header>

index.html (首页)

{dede:include filename="head.html"/}
<!-- Hero Section (大图焦点区域) -->
<section class="hero-section" style="background-image: url('{dede:global.cfg_cmsurl/}/templets/default/images/hero-bg.jpg');">
    <div class="container">
        <div class="hero-content">
            <h1>我们创造卓越的数字体验</h1>
            <p class="subtitle">专注于品牌网站建设、UI/UX设计与数字营销解决方案</p>
            <a href="#services" class="btn btn-primary">了解更多</a>
        </div>
    </div>
</section>
<!-- 服务介绍 Section -->
<section id="services" class="section">
    <div class="container">
        <h2 class="section-title">我们的服务</h2>
        <div class="service-grid">
            {dede:arclist typeid='3' row='4' titlelen='24'}
            <div class="service-item">
                <div class="service-icon">
                    <i class="fas fa-laptop-code"></i>
                </div>
                <h3><a href="[field:typelink/]">[field:title/]</a></h3>
                <p>[field:description function='cn_substr(@me, 100)'/]...</p>
            </div>
            {/dede:arclist}
        </div>
    </div>
</section>
<!-- 案例展示 Section -->
<section class="section bg-light">
    <div class="container">
        <h2 class="section-title">精选案例</h2>
        <div class="case-grid">
            {dede:arclist typeid='4' row='6' titlelen='20' orderby='pubdate'}
            <div class="case-item">
                <a href="[field:arcurl/]">
                    <img src="[field:litpic/]" alt="[field:title/]">
                    <div class="case-overlay">
                        <h3>[field:title/]</h3>
                    </div>
                </a>
            </div>
            {/dede:arclist}
        </div>
        <div class="text-center">
            <a href="/cases.html" class="btn btn-outline">查看更多案例</a>
        </div>
    </div>
</section>
{dede:include filename="foot.html"/}

style.css (核心样式)

/* 全局样式和变量 */
:root {
    --primary-color: #1976D2;
    --primary-light: #90CAF9;
    --primary-lightest: #E3F2FD;
    --text-color: #333;
    --light-text: #757575;
    --white: #FFFFFF;
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
}
body {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    padding: 0;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* 头部导航 */
.main-header {
    background: var(--white);
    box-shadow: var(--shadow);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding