25、使用Omega主题从设计稿到实际网站搭建

使用Omega主题从设计稿到实际网站搭建

1. 隐藏文本以优化SEO

在网页设计中，有时我们希望某些文本对搜索引擎可见，但不希望用户看到，这时可以使用负的 text-indent 值来隐藏文本。示例代码如下：

.site-name-slogan { 
  text-indent:-2000px; 
}

此代码会将 class 为 site-name-slogan 的 DIV 容器内的所有文本向左缩进2000像素。文本会在浏览器画布上渲染，但由于缩进过多，用户无法看到，而搜索引擎可以识别。 site-name-slogan 是一个包含 H1 元素（包含网站标题）和 H6 元素（包含网站标语）的容器。

2. CSS定位

接下来要对主logo和菜单栏进行定位，使其出现在设计师期望的位置。
- 添加待上移的图像 ：

#preface-container { 
  background: transparent url('../i/CDEF-logo-menu.png') no-repeat center top; 
  min-height:334px; 
  width:960px; 
}

此代码设置了背景图像，并指定了其高度和宽度。但这可能不是我们最终想要的效果。
- 将图像上移并调整位置 ：

#preface-container { 
  background: transparent url('../i/CDEF-logo-menu.png') no-repeat center top; 
  min-height:334px; 
  width:960px; 
  position:relative; 
  top:-240px;  
  z-index:100; 
}

首先，设置图像相对于其所在容器的位置，以此为锚点确定图像的顶部位置。 top 属性设为负值，会使图像在页面上向上移动240像素。最后，为避免图像覆盖上方元素，使用 z-index 参数将图像向后移动。

3. 放置主菜单

之前将主菜单放在了 Preface Second 区域，现在需要将其放在地球仪logo下方的水平栏中。相关CSS代码如下：

#region-preface_second { 
  position:relative; 
  top:276px; 
  left:10px; 
} 

#block-system-main-menu ul.menu { 
  font-weight:bold; 
  font-size:16pt; 
  margin: 0; 
  padding: 0; 
  list-style-type:none; 
  text-transform:uppercase; 
} 

#block-system-main-menu ul.menu li { 
  padding: .2em; 
  display:inline; 
} 

#block-system-main-menu ul.menu li a { 
  text-decoration: none; 
  color:#f1f1ef; 
}

region-preface_second 容器位于之前上移的 preface-container 容器内部，因此需要将菜单向下移动一点，使其出现在期望的位置。主菜单以HTML无序列表形式生成，通过设置 list-style-type 为 none 和 display 为 inline ，可以将列表展平为单行显示。

4. 格式化页眉框

接下来要对两个页眉框进行格式化，代码如下：

#region-header_first, 
#region-header_second { 
  border:3pt solid #3399cc; 
  background-color:#336666; 
  border-radius: 15px; 
  -webkit-border-radius: 15px; 
  -moz-border-radius: 15px; 
} 

#region-header_first, 
#region-header_second { 
  height: 180px; 
  margin:6px; 
  color:#f1f1ef; 
  text-align:center; 
  z-index:200; 
} 

#region-header_first a:link,  
#region-header_second a:link { 
  color:#a1f1ef; 
} 

#region-header_first h2.block-title,  
#region-header_second h2.block-title { 
  color:#f1f1ef; 
  font-size:16pt; 
  font-family:Arial; 
  text-transform:uppercase; 
}

除了 region-header_first 和 region-header_second 中的圆角参数外，其他参数都比较直观。设计师要求这两个区域为圆角矩形，在旧版浏览器中实现圆角边框比较麻烦，需要创建四个不同的圆角并在HTML中拼接。而CSS 3引入了 border-radius 参数，可以轻松创建圆角边框，但目前支持该标准语法的浏览器较少。Firefox和Google Chrome支持圆角，但需要各自的扩展，因此代码中使用了 border-radius 、 -webkit-border-radius 和 -moz-border-radius 三个参数。

5. 样式化社交网络链接块

设计师提供了四个图形，一个用于背景条，另外三个分别用于RSS、Facebook和Twitter链接。首先，通过 Structure➤Blocks➤Add block 创建一个新块，并插入所需的HTML代码。相关CSS代码如下：

#follow-block { 
  text-align:center; 
  background: url('../i/Follow-Buttons-Bar.png') no-repeat bottom center; 
  min-height:120px; 
  overflow:visible; 
} 

a.rss-image, 
a.facebook-image, 
a.twitter-image { 
  text-indent:-2000px; 
  height:96px; 
  width:90px; 
  display:inline-block; 
} 

a.rss-image { 
  background: url('../i/rss.png') no-repeat bottom center; 
} 

a.facebook-image { 
  background: url('../i/facebook.png') no-repeat bottom center; 
} 

a.twitter-image { 
  background: url('../i/twitter.png') no-repeat bottom center; 
} 

#region-sidebar_first { 
  position:relative;   
  top:-240px; 
}

四个图像被设置为各个对象的背景，并设置了其他参数以确保显示效果。同时，为了使 follow-block 与之前上移的logo位置匹配，需要对 region-sidebar_first 块进行上移操作。

graph LR
    A[开始] --> B[隐藏文本优化SEO]
    B --> C[CSS定位主logo和菜单栏]
    C --> D[放置主菜单]
    D --> E[格式化页眉框]
    E --> F[样式化社交网络链接块]
    F --> G[微调主内容区域文本样式]
    G --> H[创建模板文件改变侧边栏显示格式]
    H --> I[结束]

6. 微调主内容区域文本样式

对主内容区域的文本进行一些小的样式调整，代码如下：

#region-content { 
  color:#f1f1ef; 
  position:relative; 
  top:-240px; 
}

7. 创建模板文件改变侧边栏显示格式

当大部分内容格式化完成后，发现主内容右侧第一个侧边栏的内容以表格形式显示，这与设计师的设想不符。为了改变这种显示方式，需要深入主题层并创建一个新的模板文件。
- 声明主题函数 ：

function cdef_omega_theme(&$existing, $type, $theme, $path) { 
  $hooks = array( 
    'recent_list' => array( 
        'arguments' => array( 
          'node-title' => NULL, 
          'node-id' => NULL, 
          ) 
        ) 
      ); 
  return $hooks; 
}

主题钩子返回一个数组，包含要注册的主题名称，这里只有 recent_list 。该结构还声明了要传递的两个参数的名称和默认值。
- 编写主题函数 ：

function cdef_omega_recent_list($variables) { 
  $title = $variables['node_title']; 
  $id = $variables['node_id']; 
  $content = '<div class="recent-title">' . l($title, 'node/' . $id) . '</div>'; 
  return $content; 
}

该函数构建一个带有可样式化类的 DIV 元素和一个指向文章页面的链接。可以通过 theme() 函数调用此函数。
- 创建预处理钩子 ：

function cdef_omega_preprocess_node_recent_block(&$vars) { 
  $content = ''; 
  foreach ($vars['nodes'] as $recent_node) { 
    $variables['node_title'] = $recent_node->title; 
    $variables['node_id'] = $recent_node->nid; 
    $content .= theme('recent_list', $variables); 
  } 
  $vars['content'] = $content;
}

该函数接收一个包含相关信息的数组引用，通过遍历列表，提取所需的两个变量，并调用主题函数生成内容。
- 创建模板文件 ：
模板文件的名称是主题函数名中的下划线替换为连字符，并以 tpl.php 为扩展名，这里是 node-recent-block.tpl.php ，应放在子主题的 templates 文件夹中。模板文件结构如下：

<div id="recent-block"> 
  <?php print $content; ?>
</div>

变量 $content 是 $vars 数组中同名成员的值，这就是为什么在预处理钩子中要将 $vars['content'] 设置为 recent_list 主题调用返回的HTML内容。

8. Drupal 7核心模板变量

Drupal 7核心提供了多个模板，每个模板都有可用的变量，这些变量需要在模块中生成并作为全局变量提供给Drupal的页面创建逻辑进行渲染。以下是部分核心模板及其可用变量的列表：
| 模板 | 可用变量 |
| — | — |
| block.tpl.php | $block->subject （块标题）、 $content （块内容）、 $block->module （生成块的模块）等 |
| comment-wrapper.tpl.php | $content （节点的内容相关元素数组）、 $classes （可用于CSS样式的类字符串）等 |
| comment.tpl.php | $author （评论作者）、 $content （评论项数组）、 $created （评论创建时间）等 |
| field.tpl.php | $items （字段值数组）、 $label （项标签）、 $label_hidden （标签显示是否隐藏）等 |
| html.tpl.php | $css （当前页面的CSS文件数组）、 $language （网站显示语言对象）、 $head_title （用于TITLE标签的修改后的页面标题）等 |
| node.tpl.php | $title （节点标题）、 $content （节点项数组）、 $user_picture （节点作者的图片）等 |
| page.tpl.php | $base_path （Drupal安装的基本URL路径）、 $directory （模板所在目录）、 $is_front （是否为首页标志）等 |
| region.tpl.php | $content （该区域的内容，通常是块）、 $classes （可用于CSS样式的类字符串）、 $region （区域变量名）等 |

通过使用Omega主题，我们可以从设计师的网站设计稿逐步搭建出实际的网站。Omega主题是一个高级的主题环境，只要理解一些基本概念，就不会觉得它难以使用。它允许设计师进行设计，同时让开发者将内容适配到设计的约束中。与其他Drupal主题相比，Omega主题和启动套件具有更高的灵活性，在Drupal 7的应用中值得更多关注。掌握Drupal的页面渲染引擎和主题层的使用方法，将有助于我们使用各种主题和启动套件来搭建各种类型的网站。

使用Omega主题从设计稿到实际网站搭建

9. 各步骤总结与关联

在整个网站搭建过程中，各个步骤紧密相连，形成了一个完整的流程。下面通过一个表格来总结各步骤及其作用和相互关联。
| 步骤 | 作用 | 与其他步骤的关联 |
| — | — | — |
| 隐藏文本以优化SEO | 使某些文本对搜索引擎可见但用户不可见 | 为后续整体页面的SEO优化奠定基础 |
| CSS定位主logo和菜单栏 | 将主logo和菜单栏放置在设计师期望位置 | 影响后续菜单、页眉框等元素的相对位置 |
| 放置主菜单 | 将主菜单放在地球仪logo下方水平栏 | 依赖于主logo和菜单栏的定位结果 |
| 格式化页眉框 | 对页眉框进行样式设置 | 与整体页面风格协调一致 |
| 样式化社交网络链接块 | 为社交网络链接添加样式 | 需要与页面其他元素的布局相适配 |
| 微调主内容区域文本样式 | 调整主内容区域文本样式 | 使页面整体视觉效果更协调 |
| 创建模板文件改变侧边栏显示格式 | 改变侧边栏内容显示格式 | 根据页面内容格式化后的实际情况进行调整 |

10. 实际应用中的注意事项

在实际使用上述方法进行网站搭建时，有一些注意事项需要我们关注：
- 浏览器兼容性 ：在使用CSS 3的新特性，如 border-radius 时，要考虑不同浏览器的支持情况。虽然现代浏览器大多支持，但旧版浏览器可能需要额外的前缀或替代方案。例如，Firefox需要 -moz-border-radius ，Google Chrome需要 -webkit-border-radius 。
- 代码结构和命名规范 ：保持良好的代码结构和命名规范有助于代码的维护和扩展。在编写CSS和PHP代码时，使用有意义的类名和函数名，避免使用过于随意的命名。
- 主题函数和模板文件的管理 ：随着网站功能的增加，主题函数和模板文件会越来越多。要合理组织这些文件，将相关的功能放在同一个文件夹或文件中，方便查找和修改。

11. 进一步优化建议

为了使网站更加完善和高效，我们可以考虑以下进一步的优化建议：
- 性能优化 ：对图片进行压缩，减少HTTP请求，优化CSS和JavaScript文件的加载顺序，以提高网站的加载速度。
- 响应式设计 ：使网站能够在不同设备上（如手机、平板、电脑）都能完美显示，提供更好的用户体验。
- 安全优化 ：对用户输入进行过滤和验证，防止SQL注入、XSS攻击等安全问题。

12. 总结与展望

通过使用Omega主题，我们成功地从设计师的网站设计稿搭建出了实际的网站。整个过程涉及到了CSS定位、文本隐藏、主题函数和模板文件的使用等多个方面的知识。Omega主题为我们提供了一个灵活的主题环境，让设计师和开发者能够更好地协作，将设计理念转化为实际的网站。

在未来的网站搭建中，我们可以继续深入学习Drupal的相关知识，掌握更多高级的主题开发技巧，不断优化网站的性能和用户体验。同时，随着Web技术的不断发展，我们也需要关注新的技术和趋势，及时应用到网站开发中，使网站始终保持竞争力。

graph LR
    A[网站搭建开始] --> B[基础样式设置]
    B --> C[元素定位与布局]
    C --> D[内容格式化]
    D --> E[模板文件创建与优化]
    E --> F[性能与安全优化]
    F --> G[网站完成]
    H[浏览器兼容性] --> B
    I[代码规范] --> B
    J[响应式设计] --> F

总之，使用Omega主题搭建网站是一个充满挑战和乐趣的过程。通过不断学习和实践，我们能够掌握更多的技巧，搭建出更加优秀的网站。希望本文介绍的方法和技巧能够对大家在网站搭建过程中有所帮助。