使用PHP构建启动程序：引导您的主页

最新推荐文章于 2023-03-20 13:26:10 发布

cunjie3951

最新推荐文章于 2023-03-20 13:26:10 发布

阅读量299

点赞数

文章标签： java python css 人工智能编程语言

本教程是 Envato Tuts +上的“ 使用PHP构建启动”系列 的一部分。 在本系列文章中，我 将以我的 Meeting Planner 应用程序作为真实示例 ，指导您完成从概念到现实的启动 。 在此过程的每一步中，我都会将Meeting Planner代码作为开放源代码示例发布，您可以从中学习。 我还将解决与启动相关的业务问题。

改善首页

Web服务的主页具有许多角色。从功能上讲，它必须使人们易于注册并开始使用该应用程序。但是，它还必须在美学上触动访问者，并给他们一种专业的印象，即您的服务可以实现主页告诉他们的操作。

由于我一直专注于为Meeting Planner构建计划功能，因此我没有时间专注于完善主页-坦白说，它不够用，使首次访问者印象深刻。

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

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

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

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

当前主页

建立您的启动-并排查看Simple Planner vs Meeting Planner主页

在上一集中，我提到了与会议计划程序一起使用不同的配色方案和图像启动简单计划程序。他们看上去还不错，但是产品的销售线索和注册按钮却不重要。首次访问者将到达并主要看到照片。

仔细看一下：

计划改进

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

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

确保背景图像具有响应能力，并具有应用不透明性（透明性）的能力。
创建带有透明面板的左列以显示线索。
创建一个右侧列以显示带有注册，登录和启动通知表单的面板，并具有一定的透明度。
确保视频轮播位于背景图片下方。

让我们看看每个挑战。

重组背景图像

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

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

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace frontend\assets;

use yii\web\AssetBundle;

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @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和相关库。

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

/* 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无法做到）：

<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use frontend\assets\HomeAsset;
use frontend\widgets\Alert;

/* @var $this \yii\web\View */
/* @var $content string */

HomeAsset::register($this);
$urlPrefix = (isset(Yii::$app->params['urlPrefix'])? $urlPrefix = Yii::$app->params['urlPrefix'] : '');
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>" >
<head>
    <meta charset="<?= Yii::$app->charset ?>"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <style type="text/css">
    body {
     background: url('./img/home/home-<?= Yii::$app->params['site']['img'] ?>.jpg') no-repeat center 30px;
    }
    </style>
    <?php $this->head() ?>
</head>
<body>

这将应用在最后一集中由SiteHelper.php定义的所选背景图像：

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

网格的左侧

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

<div class="site-index ">
  <div class="row home-top">
      <div class="col-md-6 col-md-offset-1">
        <div class="jumbotron">
            <h1><?php echo Yii::t('frontend','Simpler Scheduling'); ?></h1>
                <p class="lead">Choose times and places together. Make planning easy.</p>
                <div class="centered">
                  <p><a class="btn btn-lg btn-success" href="features"><?= Yii::t('frontend','Learn more') ?></a></p>
                </div>
          </div> <!-- end jumbo -->
      </div>

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

该行中home-top使我能够为这些面板集成垂直边距。我发现home.css中有16％的用户对我来说效果很好：

.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);的黑色面板提供黑色背景色，但具有不透明性background-color: rgba(0,0,0,0.3); 。

RGBA颜色值是具有Alpha通道的RGB颜色值的扩展，该通道指定对象的不透明度。 RGBA颜色值指定为：rgba（红色，绿色，蓝色，alpha）。 alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。（ W3学校）

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

结果使背景图像得以显示，同时提升了白色引线文本。

右侧面板和表格

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

<div class="col-md-3 ">
  <div class="panel panel-default">
      <div class="panel-heading">
        <strong><?php echo Yii::t('frontend','Signup or Login to Schedule a Meeting'); ?></strong>
      </div>
      <div class="panel-body panel-auth-clients">
          <?php $authAuthChoice = AuthChoice::begin([
            'baseAuthUrl' => ['site/auth','mode'=>'signup'],
            'popupMode' => false,
        ]); ?>
        <?= Yii::t('frontend','Connect with any of the following services:'); ?><br /><br />
        <ul class="auth-clients" >
        <?php foreach ($authAuthChoice->getClients() as $client): ?>
            <li class="auth-client"><?php $authAuthChoice->clientLink($client) ?></li>
        <?php endforeach; ?>
        </ul>
        <?php AuthChoice::end(); ?>
      </div>
      <div class="panel-footer">
          Or, <?= HTML::a(Yii::t('frontend','signup using your email address'),['site/signup']); ?>
        </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <strong><?php echo Yii::t('frontend','Wait for the Official Launch'); ?></strong>
    </div>
    <div class="panel-body">
      <?= $this->render('launch');?>
    </div>
  </div>
</div>

顶部面板中的AuthClient小部件显示了Facebook，Google和LinkedIn图标，这些图标我已在本教程中介绍过。

视频轮播的垂直边距

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

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

23％的利润率适用于台式机和移动设备。这是HTML：

<div class="row video-top">
      <div class="col-md-12">
        <?= $this->render('_video_carousel.php',['urlPrefix'=>$urlPrefix]);?>
      </div>
  </div>