24、从入门到精通：使用Omega Starter Kit打造网站

从入门到精通：使用Omega Starter Kit打造网站

1. 区域配置

在完成区域映射后，我们要在Omega管理页面中声明每个区域的信息。具体操作是依次设置各区域的参数。
- 用户区域 ：该区域在我们的主题中不会使用，所以将其关闭。
- 品牌区域 ：这是一个简单的区域，我们仅使用一个区域。首先启用该区域，并将容器宽度设置为16列。区域类型设置为静态（默认值）。静态区域会使区域按设定堆叠，而动态区域会根据同一区域内其他区域的情况进行扩展和收缩。品牌区域有两个默认区域，但我们仅使用一个，该区域用于放置标志，宽度为16列。
- 头部区域 ：同样是16列的静态区域，我们声明两个区域来放置内容。第一个区域“Header First”为5列，无前缀和后缀；第二个区域“Header Second”为6列，也无前缀和后缀。总列数为11列，从左侧开始排版，右侧留5列空白，后续会用CSS将标志移到此处。
- 前言区域 ：也是16列，使用两个区域“Preface First”和“Preface Second”。“Preface First”用于放置标志和菜单栏背景，“Preface Second”包含由Drupal根据网站内容生成的实际菜单。两个区域宽度都设为16列，由于第一个区域会填满该区域，第二个区域会直接显示在其下方。第三个前言区域在本主题中不使用，将其所有值设为零。
- 位置区域 ：不使用该区域，清除“启用此区域”复选框。
- 内容区域 ：主要内容和侧边栏将放置在此区域。内容宽度为10列，侧边栏为6列。
- 后记区域和页脚区域 ：不使用这两个区域，清除“启用此区域”复选框。

2. 块的使用

我们可以使用块将内容放置在之前定义的每个区域中。
- Drupal创建的块 ：主页面内容放在内容区域，最近内容放在第一个侧边栏，主菜单放在第二个前言区域。主菜单默认有标题，我们不希望显示该标题，可点击主菜单旁边的“配置”，将标题设置为 <none> 。
- 创建新块 ：我们需要创建三个新块来保存静态信息，包括菜单栏上方的两个前言块和第一个侧边栏中最近内容上方的关注块。在块管理页面点击“添加块”，在“块描述”字段说明块在块管理页面的显示方式，“块标题”字段输入块顶部显示的文本，若不需要标题则输入 <none> 。在“块主体”字段输入块的简短文本并以HTML标签提供链接，若块中使用HTML，需选择合适的文本格式过滤器。最后指定块要显示的区域。

3. 内容生成

创建新网站时，一切都是空白的。若想快速看到有内容的页面效果，可以使用Devel模块。
- 启用模块 ：下载并启用Devel模块，确保Devel generate模块也已启用。
- 生成内容 ：进入“配置…生成内容”，页面上的第一部分列出了当前安装和启用的内容类型，其他参数也比较容易理解。点击操作后会看到进度条，完成后会显示生成的内容数量。生成的内容是“伪内容”，包含伪拉丁文本和随机放置的几何图形。Omega主题有调试功能，可在主题设置页面启用网格覆盖，查看主题是否符合指定布局，点击页面左下角的“关闭调试”按钮可切换开关。Devel模块和Omega主题配合，鼠标悬停在块上可查看样式特征。

4. CSS主题设置

Drupal的主题层大量使用级联样式表（CSS）。
- 创建CSS文件 ：Omega主题有一组执行特定样式任务的CSS文件，我们需要创建自己的CSS文件来增强样式。使用Visual Studio在 sites/all/themes/cdef_omega/css 目录下创建名为 cdef-custom.css 的新CSS文件。
- 让Drupal识别文件 ：在 .info 文件中添加以下内容：

name        = CDEvolution Theme
description = Sub-themed from Omega starter kit
screenshot  = screenshot.png
core        = 7.x
base theme  = omega
project     = "cdef_omega"

stylesheets[all][] = css/cdef-custom.css

stylesheets[] 数组包含我们要添加的所有样式表，路径相对于包含主题根文件的目录。可选择不同的媒体类型，若选择 [all] ，样式表将作为所有媒体输出类型的默认样式表。

5. 图像主题设置

• 设置背景图像 ：将背景图像 CDEF-background.jpg 添加到刚创建的CSS文件中，代码如下：

body {
  background: url('../i/CDEF-background-960.jpg') center top black;
  background-repeat:repeat-x;
  background-attachment:fixed;
  color:#f1f1ef;
  font-family:Arial;
  font-size:12pt;
}

保存CSS文件并刷新网站，若看不到背景图像，可能是配置设置有误或主题信息被缓存，可通过“配置➤性能”点击“清除所有缓存”按钮清除缓存，也可使用Drush命令 drush cc theme 清除主题缓存，或 drush cc all 清除所有缓存。
- 放置主标志 ：在布局中，标志设置在品牌区域。使用浏览器的开发者工具（如Internet Explorer中按F12），通过点击代码窗口上方的检查箭头（或使用Ctrl - B）选择元素，查看其在源文档中的样子，找到ID为 region-branding 的DIV，使用以下CSS代码将标志图像设置为其背景：

#region-branding {
  background: transparent url('../i/CDEF-name.png') no-repeat right top;
  min-height :131px;
  float:right;
}

保存CSS文件并刷新浏览器，会看到标志图像。但此时网站的文本标题仍会显示在图像上方，可在子主题设置页面的“切换显示”部分关闭网站名称和网站口号的显示，但这会影响搜索引擎对网站名称的识别。更好的方法是使用CSS隐藏标题，代码如下：

/* 此处原文档未给出Listing B - 7的代码，可根据实际情况补充 */

以下是媒体类型的表格：
| 媒体类型 | 描述 |
| ---- | ---- |
| all | 适用于所有设备 |
| braille | 用于盲文触觉反馈设备 |
| embossed | 用于分页盲文打印机 |
| handheld | 用于手持设备（屏幕小、带宽有限） |
| print | 用于分页材料和打印预览模式下在屏幕上查看的文档 |
| projection | 用于投影演示 |
| screen | 主要用于彩色计算机屏幕 |
| speech | 用于语音合成器 |
| tty | 用于使用固定间距字符网格的媒体（如电传打字机、终端或显示能力有限的便携式设备），作者不应在此媒体类型中使用像素单位 |
| tv | 用于电视类型的设备（分辨率低、彩色、滚动有限、有屏幕和声音） |

以下是从Photoshop模拟图中提取的图形表格：
| 图形文件 |
| ---- |
| CDEF-background-960.jpg |
| CDEF-logo-menu.png |
| CDEF-name.png |
| Follow-Buttons-Bar.png |
| facebook.png |
| rss.png |
| twitter.png |

以下是配置区域和使用块、生成内容、设置CSS和图像主题的流程图：

graph LR
    A[区域配置] --> B[块的使用]
    B --> C[内容生成]
    C --> D[CSS主题设置]
    D --> E[图像主题设置]
    A --> A1[用户区域]
    A --> A2[品牌区域]
    A --> A3[头部区域]
    A --> A4[前言区域]
    A --> A5[位置区域]
    A --> A6[内容区域]
    A --> A7[后记区域和页脚区域]
    B --> B1[Drupal创建的块]
    B --> B2[创建新块]
    C --> C1[启用模块]
    C --> C2[生成内容]
    D --> D1[创建CSS文件]
    D --> D2[让Drupal识别文件]
    E --> E1[设置背景图像]
    E --> E2[放置主标志]

从入门到精通：使用Omega Starter Kit打造网站

6. 解决文本标题显示问题

在前面放置主标志时，我们遇到了文本标题显示在图像上方的问题。虽然可以在子主题设置页面关闭网站名称和网站口号的显示，但这会对搜索引擎优化产生影响。所以，我们采用CSS隐藏标题的方法。以下为具体的操作步骤：
1. 分析HTML结构 ：使用浏览器开发者工具（如IE的F12），查看包含网站标题和口号的HTML元素。通常，这些元素可能在特定的DIV或其他标签中。
2. 编写CSS代码 ：根据分析得到的HTML元素信息，编写CSS代码来隐藏标题和口号。例如，如果网站标题在一个具有特定类名或ID的DIV中，我们可以使用以下代码：

.site-title, .site-slogan {
    display: none;
}

将这段代码添加到我们之前创建的 cdef-custom.css 文件中。这样，虽然标题和口号的HTML代码仍然存在于页面中，但在浏览器中不会显示，从而不会影响布局，同时搜索引擎仍然可以识别这些重要信息。

7. 进一步优化CSS样式

在完成基本的背景和标志设置后，我们可以进一步优化网站的CSS样式，让网站更加美观和专业。以下是一些常见的优化点：
- 字体样式调整 ：除了前面设置的 font-family 和 font-size ，我们还可以调整字体的粗细、颜色、行高等。例如，为段落设置不同的行高可以提高可读性：

p {
    line-height: 1.5;
    color: #ccc; /* 调整段落文字颜色 */
}

• 链接样式优化 ：为链接设置不同的状态样式，如正常状态、悬停状态、访问过的状态等，可以增强用户体验。代码如下：

a {
    color: #007bff; /* 正常状态链接颜色 */
    text-decoration: none; /* 去除下划线 */
}

a:hover {
    color: #0056b3; /* 悬停状态链接颜色 */
    text-decoration: underline; /* 悬停时显示下划线 */
}

a:visited {
    color: #6c757d; /* 访问过的链接颜色 */
}

• 块元素样式设置 ：为之前创建的块设置统一的样式，如边框、内边距、外边距等。例如：

.block {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #fff;
}

8. 响应式设计考虑

在当今多设备浏览的时代，网站的响应式设计至关重要。Omega主题本身可能支持一定的响应式特性，我们可以通过CSS进一步增强。以下是一些基本的响应式设计步骤：
1. 使用媒体查询 ：媒体查询可以让我们根据不同的设备屏幕宽度应用不同的CSS样式。例如，当屏幕宽度小于768px时，调整布局：

@media (max-width: 768px) {
    /* 调整内容区域和侧边栏的宽度 */
   .content-region {
        width: 100%;
    }

   .sidebar {
        width: 100%;
    }
}

2. 图像响应式处理 ：确保图像在不同屏幕尺寸下都能正确显示。可以使用 max-width: 100%; height: auto; 让图像自适应容器宽度：

img {
    max-width: 100%;
    height: auto;
}

9. 调试与测试

在完成所有样式设置和优化后，需要进行充分的调试和测试，确保网站在不同浏览器和设备上都能正常显示。以下是调试和测试的步骤：
1. 使用浏览器开发者工具 ：除了前面用于查看HTML元素的功能，开发者工具还可以帮助我们调试CSS样式。例如，在Chrome浏览器中，可以实时修改CSS代码并查看效果，找出样式冲突或显示问题。
2. 跨浏览器测试 ：使用不同的浏览器（如Chrome、Firefox、Safari、IE等）打开网站，检查网站的显示效果。不同浏览器对CSS的解析可能存在差异，需要针对这些差异进行调整。
3. 设备测试 ：使用不同的设备（如手机、平板、电脑等）访问网站，确保网站在各种设备上都能提供良好的用户体验。可以使用模拟器或实际设备进行测试。

10. 总结与回顾

通过以上一系列的操作，我们使用Omega Starter Kit完成了网站的创建、内容填充、样式设置等工作。以下是整个过程的总结：
1. 区域配置 ：合理配置各个区域，包括用户区域、品牌区域、头部区域等，为网站的布局奠定基础。
2. 块的使用 ：利用Drupal的块功能，将内容放置在合适的区域，并通过配置去除不必要的标题。
3. 内容生成 ：使用Devel模块快速生成内容，方便查看网站的整体效果。
4. CSS主题设置 ：创建自定义CSS文件，让Drupal识别并应用我们的样式。
5. 图像主题设置 ：设置背景图像和主标志，解决文本标题显示问题，并进行CSS样式优化和响应式设计。
6. 调试与测试 ：通过浏览器开发者工具、跨浏览器测试和设备测试，确保网站在各种环境下都能正常显示。

以下是优化CSS样式的关键点表格：
| 优化点 | 描述 | 示例代码 |
| ---- | ---- | ---- |
| 字体样式调整 | 调整字体的粗细、颜色、行高等 | p { line-height: 1.5; color: #ccc; } |
| 链接样式优化 | 设置链接不同状态的样式 | a { color: #007bff; } a:hover { color: #0056b3; } |
| 块元素样式设置 | 为块设置边框、内边距、外边距等 | .block { border: 1px solid #ddd; padding: 10px; } |

以下是响应式设计和调试测试的流程图：

graph LR
    A[响应式设计] --> B[使用媒体查询]
    A --> C[图像响应式处理]
    D[调试与测试] --> E[使用开发者工具]
    D --> F[跨浏览器测试]
    D --> G[设备测试]
    H[总结与回顾] --> I[区域配置]
    H --> J[块的使用]
    H --> K[内容生成]
    H --> L[CSS主题设置]
    H --> M[图像主题设置]
    H --> N[调试与测试]

通过以上步骤，我们可以使用Omega Starter Kit打造出一个功能完善、样式精美、响应式的网站。在实际开发过程中，可以根据具体需求进一步扩展和优化网站的功能和样式。