创建主页模板

Objective

After completing this lesson, you will be able to 创建主页模板。

主页

您可以为每个活动区域设置和品牌配置主页。首先配置默认品牌。

要将组件添加到主页，请选择添加组件按钮。
使用向上和向下按钮控制组件在页面上的位置。
如果不希望组件显示在所有设备（台式机、平板电脑、移动设备）上，请清除该设备的复选框。
选择组件本身以调整样式、外观和内容。

创建主页

此视频演示如何创建主页。

业务示例

通过添加和配置组件并为页面添加元数据，开始为 Best Run 缺省品牌构建主页。在稍后的练习中，您将向页面添加附加功能并复制红色品牌页面。

上载图像时引用此表。

组件	图像文件	备选文本	图像类型	图像位置
订阅表单	Subscribe.jpg	一位女士在繁忙的办公室里	未修改	中上
三列	3-1_engineering.jpg	头部碰撞
三列	3-2_sales.jpg	三个人在桌前交谈
三列	3-3_management.jpg	2 人正在做笔记
文本：梦想工作	green_background.jpg	绿色背景	未修改	中中
大图像	work_remotely.jpg	一位男士在厨房	未修改	中上

* 图像位置始终设置为图像中的焦点，因此对于所有断点（台式机、平板电脑和手机），图像位置都保留在屏幕上。

任务 1: 添加和配置组件

步骤

导航到 CSB→页面→主页→英语→缺省品牌→主页。
选择添加组件按钮。
选择订阅表单、搜索栏、含标题的三列图像、文本、大图像、Google 职位地图和视频。
在组件列表外选择。如果需要重新排序任何组件，请使用向上和向下按钮。
选择表示订阅表单的灰色框。
1. 在详细信息标签上，单击抬头文本旁的 T 图标，将颜色更改为 #FFFFFF，然后单击关闭。如果需要，您还可以更改文本。
2. 选择"样式"选项卡。
3. 选择正文背景，然后单击 +添加。
4. 对于标签，输入半透明蓝色。
5. 在十六进制框中，输入 004990。
6. 要为框创建新的半透明颜色，请在标记为 A 的框中输入 0.68。
7. 选择"调色板"框外部的。然后，要选择新颜色，请再次选择"正文背景"，然后选择新颜色。
8. 选择正文，然后选择 #FFFFFF。
9. 选择背景图像并上载上表中列出的图像。有关上载图像的步骤，请参阅 招聘网站设计领先实践 单元中的 添加新图像 说明。
10. 发布和预览。
11. 在窗口顶部，选择订阅表单旁的返回箭头返回到主页顶部。
向下滚动并选择含标题的三列图像的灰色框。
1. 选择列 1 标签。
2. 对于 显示链接 ，点击是。我们稍后将添加链接。
3. 选择选择图像并上载上表中列出的此组件的第一个图像。
4. 选择列 2 标签。
5. 对于 显示链接 ，选择是。
6. 选择选择图像并上载上表中列出的此组件的第二个图像。
7. 选择列 3 标签。
8. 对于 显示链接 ，选择是。
9. 选择选择图像并上载上表中列出的此组件的第三个图像。
10. 选择发布并预览。
11. 在窗口顶部，选择含标题的三列图像旁边的后退箭头。
要区分两个文本部件，请滚动到第一个"文本"部件，然后单击"文本"一词对其进行重命名。
1. 在"名称"框中，输入 Dream Job，然后选择"关闭"。
2. 要编辑第一个"文本"部件，请选择灰色框。
3. 在详细信息标签上，为抬头文本输入在最佳运行中查找梦想的作业。
4. 选择抬头文本旁边的 T 图标，然后将大小更改为 18，将颜色更改为 #FFFFFF。
5. 对于正文，输入 查找您的下一个大冒险？探索面向专业人员的 Best Run 职业发展机会，找到令人振奋、奖励和灵活的工作机会。你甚至会改变世界。
6. 选择正文上方的 T 图标，然后将大小更改为 16。
7. 对于 显示按钮 ，点击是。稍后，我们将添加按钮链接。
8. 选择"样式"选项卡。
9. 选择正文，然后选择 #FFFFFF。
10. 选择背景图像并上载上表中列出的图像。
11. 选择发布并预览。
12. 在窗口顶部，选择文本旁边的后退箭头。
滚动到第二个"文本"部件，然后单击"文本"以对其重命名。
1. 在"名称"框中，输入"远程工作"，然后选择"关闭"。
2. 要编辑第二个"文本"部件，请选择灰色框。
3. 在 详细信息 标签上，为 抬头文本 输入 查找远程作业？
4. 选择抬头文本旁的 T 图标。将大小更改为 24，然后将颜色更改为最佳运行蓝色。选择关闭。
5. 对于 显示按钮 ，选择是。稍后，我们将为远程作业添加类别页面的链接。
6. 选择发布并预览。
7. 在窗口顶部，选择文本旁边的后退箭头。
向下滚动并选择大图像的灰色框。
1. 选择选择图像并上载上表中列出的图像。
2. 上传后，将鼠标悬停在背景图像上，注意高度为 485 像素。
3. 要防止上方和下方的部件之间有额外的间距，请为"图像的最大高度"输入 485。
4. 对于"启用间距"，选择"是"。保留默认（无）设置。
5. 选择发布并预览。
6. 在窗口顶部，选择大图像旁边的后退箭头。
向下滚动并选择 Google 职位地图的灰色框。
1. 在详细信息标签上，为预定义地图中心选项选择美国。
2. 选择"样式"选项卡，并为"水体"选择站点背景颜色。
3. 对于"启用间距"，选择"是"，并保留默认（无）设置。
4. 选择发布并预览。
5. 在窗口顶部，选择 Google Job Map 旁边的后退箭头。
向下滚动并选择视频的灰色框。
1. 对于 视频 URL 或标识，输入 https://www.youtube.com/watch?v=l4v33pLEpe0 。请注意， 视频类型 已定义。
2. 对于"布局"，选择"文本右对齐"。
3. 对于抬头文本，输入您是否准备好为业务咨询服务的领导者工作？
4. 选择抬头文本旁的 T 图标。将字体更改为 Arial Black、Gadget、sans-serif，将大小更改为 24，然后将颜色更改为 Best Run Blue。单击"关闭"。
5. 对于正文文本，输入您将不会优于 Best Run！
6. 选择正文上方的 T 图标，然后将大小更改为 24。
7. 选择"样式"选项卡。
8. 对于正文，选择 最佳运行蓝色 。
9. 对于"启用间距"，选择"是"。要防止文本太接近左边距，对于"左"，请选择"中"。
10. 选择发布并预览。
11. 在窗口顶部，选择视频旁边的后退箭头返回到主页顶部。

任务 2: 将元标签添加到主页

最好为 CSB 中的每个页面填充元数据。对于主页，我们将使用与全球相同的元数据。

步骤

导航到页面→主页→en_US→缺省品牌→主页。
选择左上角附近的齿轮按钮，然后选择标签。
输入以下信息：
- 页面和元标题：Best Run 职位
- Meta Keywords:工程、销售、人力资源、管理工作
- Meta Description:在线申请在 Best Run 的工作: 工程工作, 销售工作, 人力资源工作, 等等
选择确认。
发布。
注意
未来练习并不特别指示您添加 Meta Tags 或 Image Alt Text，但会习惯这样做。

摘要

按区域语言设置/品牌配置主页（以默认品牌开头），添加多个组件，使用向上/向下控件对其进行重新排序，并设置每个组件应显示的设备（台式机/平板电脑/手机）。
自定义组件样式和内容：调整文本大小/颜色/字体，创建和应用半透明颜色，设置正文/背景图像，并在更新后发布/预览。
通过添加主页元标签（标题、关键字、描述）来应用 SEO 最佳实践，然后确认和发布 - 并养成在未来的页面上添加元标签和图像替代文本的习惯。

Next lesson