本教程是 Envato Tuts+ 上的“使用 PHP 构建您的初创公司”系列的一部分。在本系列中，我将使用我的会议规划器应用作为现实生活中的示例，指导您从概念到现实启动一家初创公司。在此过程中的每一步，我都会将 Meeting Planner 代码作为开源示例发布，您可以从中学习。我还将解决出现的与初创企业相关的业务问题。

改进主页

Web 服务的主页具有多种作用。从功能上讲，它必须使人们能够轻松注册并开始使用该应用程序。但它还必须美观地触动访问者，并给他们留下专业的印象，即您的服务提供了主页告诉他们的内容。

由于到目前为止我一直专注于为 Meeting Planner 构建日程安排功能，所以我没有时间专注于完善主页 - 坦率地说，它的表现有些不足，让首次访问者印象深刻。< /p>

虽然我是一名程序和产品经理，也有一点是 UX 设计师和 Web 开发人员，但我不是熟练的图形设计师或 HTML/CSS 专家。我还没有在该项目中投入外部资源，因此我需要自己改进。

在今天的节目中，我将向您介绍我如何增强主页以及我利用 Bootstrap 和 CSS 的哪些方面来提供更专业的外观。如果您更深入地研究，您可以自己使用 Bootstrap 做很多事情。

如果您尚未试用 Meeting Planner 或 Simple Planner，请继续安排您的第一次会议。我确实参与了下面的评论主题，所以请告诉我你的想法！您也可以通过 Twitter @reifman 联系我。如果您想为未来的教程提出新功能或主题建议，我会特别感兴趣。

提醒一下，Meeting Planner 的所有代码都是用 PHP 的 Yii2 框架编写的。如果您想了解有关 Yii2 的更多信息，请查看我们的并行系列“使用 Yii2 进行编程”。

当前主页

在上一集中，我提到启动 Simple Planner 以及具有不同配色方案和图像的 Meeting Planner。它们看起来不错，但产品线索和注册按钮位于首屏下方。首次访问者到达时首先会看到照片。

仔细看看：

规划改进

在上面，您可以看到我创建的最终版本。本质上，我想将引导以及登录和注册选项迁移到首屏，同时不完全遮挡主页背景图像。

本质上，我需要做四件事：

1. 确保背景图像具有响应能力并且能够应用不透明度（透明度）。
2. 创建一个带有透明面板的左列来显示潜在客户。
3. 创建一个右侧列来显示带有注册、登录和启动通知表单的面板，并具有一定的透明度。
4. 确保视频轮播位于背景图像下方。

让我们看看每个挑战。

重构背景图像

为了使背景响应更可靠，我重写了代码，将其作为背景图像放置在页面的 body 元素上。

首先，我创建了一个新的 home.css 样式表，该样式表将在 HomeAsset.php 文件中配置：

 * @since 2.0
 */
class HomeAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
        'css/home.css',
        'css/home-video.css',
    ];
    public $js = [
      'js/home.js',
      'js/froogaloop2.min.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

资源文件决定为每个布局加载哪些 CSS、JavaScript 和依赖库。

这是定义 body 元素的 home.css 顶部：

/* CSS used here will be applied after bootstrap.css */
body {
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

为了动态旋转背景图像，我在布局文件Home.php中添加了一个样式标签（CSS无法做到这一点）：

params['urlPrefix'])? $urlPrefix = Yii::$app->params['urlPrefix'] : '');
?>
beginPage() ?>



    
    
    
    
    
    head() ?>

这应用了 SiteHelper.php 在上一集中定义的所选背景图像：

body {
     background: url('./img/home/home-params['site']['img'] ?>.jpg') no-repeat center 30px;
    }

网格的左侧

接下来，我创建了一个 Bootstrap 网格布局来显示左侧内容面板：

  

      

        

            

                
Choose times and places together. Make planning easy.
                

                  

                
          
 
      

我使用了一个单位偏移量 col-md-offset-1 和一个六单位列 col-md-6。这里还集成了其他一些方面。

行中的 home-top 类允许我为这些面板集成垂直边距。我发现 16% 对我来说效果很好，来自 home.css：

.home-top {
  margin-top:16%;
}

通过给主页上的面板一些不透明度，opacity: 0.9;，背景图像仍然显示了一点，这在美学上令人愉悦：

.panel-default {
 opacity: 0.9;
}

.jumbotron {
    text-align: center;
    background-color: rgba(0,0,0,0.3);
    color:#fff;
    border-radius:5px;
}
.jumbotron .lead {
  color:#fff;
}

.jumbotron .btn {
    font-size: 21px;
    opacity:.8;
    margin:25px;
}

此外，我还可以使用 rgba 为左侧面板提供黑色背景色，但具有不透明度，background-color: rgba(0,0,0,0.3);。< /p>

RGBA 颜色值是 RGB 颜色值与 Alpha 通道的扩展 - 它指定对象的不透明度。 RGBA 颜色值通过以下方式指定：rgba(red, green, blue, alpha)。 alpha 参数是 0.0（完全透明）和 1.0（完全不透明）之间的数字。 （W3 学校）

我使用 border-radius:5px; 创建了圆形边框。

结果允许背景图像显示出来，同时宣传白铅文本。

右侧面板和表单

为了创建右侧，我创建了一个三单元列，col -md-3。然后，我创建了两个继承相同 0.9 不透明度的 Bootstrap 面板：

  

      

        
      
      

           ['site/auth','mode'=>'signup'],
            'popupMode' => false,
        ]); ?>
        


        

        getClients() as $client): ?>
            
clientLink($client) ?>
        
        
        
      
      

          Or, 
        
  
  

    

      
    
    

      render('launch');?>
    
  

顶部面板中的 AuthClient 小部件显示我在之前的教程中介绍的 Facebook、Google 和 LinkedIn 图标。

视频轮播的垂直边距

最后，我只需要确保首屏下方的视频轮播有足够的垂直边距，以免覆盖背景图像。我为此使用了 video-top 类：

.video-top {
  margin-top:23%;
}

23% 的利润率对于桌面和移动设备来说效果很好。这是 HTML：

      

        render('_video_carousel.php',['urlPrefix'=>$urlPrefix]);?>
      
  

改进的移动主页

以下是改进后的引导页面在移动设备上的外观：

它们更有效。现在，当用户使用移动设备时，他们会立即看到内容，而不仅仅是主图。

下一步是什么？

当然，有很多方法可以打磨和改善主页体验。但我希望您今天已经看到，您可以快速利用 Bootstrap 中的常见元素为访问者提供美观的专业体验。到目前为止，我无需聘请外部设计师和 CSS 编码员就能完成所有这些工作。我希望在项目获得资助后的某个时候能够做到这一点。

在接下来的几周内，我将监控访问者与注册者的比例，看看是否实现了改进。

展望未来，我将构建一些功能来改进 Meeting Planner，例如活动规划、更多短信以及支持移动应用的开发。还有很多事情要做。我希望你留在我们身边。

同时，请查看会议筹划器并与您的业务伙伴、家人和朋友分享。

我也即将根据 SEC 新众筹规则的实施与 WeFunder 启动实验。如果您愿意，可以关注我们的个人资料。我还将在以后的教程中详细介绍这一点。

你有自己的想法吗？有想法吗？反馈？您可以随时通过 Twitter @reifman 直接联系我。请观看“使用 PHP 构建您的初创公司”系列中即将推出的教程。

相关链接

• 简单规划器或会议规划器

• 构建您的初创公司：运行多个域 (Envato Tuts+)
• 会议策划者的 WeFunder 页面
• 使用 Yii2 编程：入门