アンディがウェブサイトのフロントページを利用できるようになったので、彼はもう少しサイトを構築し始めることができます。これには、電子メールサインアップフォームの実装、連絡先、およびページについてです。 電子メールサインアップフォームから始めて、追加のページを作成するようになります。電子メールサインアップフォームは、ホームページの前面と中心になります。ジャンボトロンの右側に配置され、空のスペースがあります。 メールサインアップフォームの場合、MailChimpのフォームを使用します。 AndyはクライアントのMailChimpアカウントを使用しており、ホームページに既存のリストを使用します。ホームページでサインアップするすべての人がこのリストに入ります。
サインアップフォームは、次のようになるように設計されています:
MailChimpからコードを取得
>
MailChimpにログインしたら、追加するリストを選択します。 [サインアップ]フォームをクリックします。埋め込みフォームをクリックします。クラシックスタイルは大丈夫です。クライアントは、名とメールアドレスをキャプチャしたいと考えています。 MailChimpは実際にこれらをデフォルトとして持っているので、物事をそのまま残すことができます。 MailChimpの画面は次のように見えるはずですHTMLをコピーします。これがジャンボトロンに貼り付けるものです。この線の下のジャンボトロンで:
いくつかの列を追加できます。 Jumbotronを
で、MailChimpコードをで囲みます。このフォーマットは、サイトのタイトルテキストがジャンボトロンの2/3を占めることを意味し、サインアップ形式は1/3を占めます。
あなたのコードは次のように見えるはずです:
覚えておいてください、ブートストラップは12グリッドシステムを使用しています。 8 4 = 12そして、これらの数字から2/3と1/3を取得する方法を見ることができます。
次に、サインアップフォームUIの研磨を開始して、サイトとより良く融合します。
ui研磨
ディスカッションのためにフォームを分割するのに役立つために、コードに数行のスペースを追加しました。
で定義します
MailChimpコードのほとんどはMailChimpからコピーしたものと同じであるため、これらのカスタムクラスで何が起こっているのかを話し合いましょう。<span title="&">&lt;p&gt;&lt;a class=&quot;btn btn-primary btn-lg&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;</span>
大胆な文字を削除するだけです。これは、フォームフィールドラベルの強調を非強調するために使用されます。 私たちの行動への呼びかけは太字です。フォームフィールドラベルも太字である場合、目はどこに焦点を合わせるかを少し把握するのに少し苦労します。さらに悪いケースシナリオ:人々は単に私たちのサインアップフォームをあきらめてバイパスします。
以下のスクリーンショットは、.not-bold
の使用を示しています透明バックグラウンドは、フォームのバックグラウンドと入力フィールドに半透明性を提供し、デザインにもう少し深みを帯びます。次のように定義されています
rgbaは、単に赤、緑、青、アルファを意味します。アルファは不透明度を設定します。この値が低いほど、透明性が高くなります。値は0〜1の範囲です
<span title="&">&lt;!-- Begin MailChimp Signup Form --&gt; </span><span title="&">&lt;link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; </span><span title="&">&lt;div id=&quot;mc_embed_signup&quot; class=&quot;transparent-background soft-border-radius&quot;&gt; </span><span title="&">&lt;form action=&quot;#&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate&gt; </span> <span title="&">&lt;div id=&quot;mc_embed_signup_scroll&quot;&gt; </span> <span title="&">&lt;h3&gt;Enter your name and email for&lt;br /&gt; your first FREE lesson!&lt;/h3&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-FNAME&quot; class=&quot;not-bold&quot;&gt;First Name &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;transparent-background soft-border-radius&quot; id=&quot;mce-FNAME&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-EMAIL&quot; class=&quot;not-bold&quot;&gt;Email &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email transparent-background soft-border-radius&quot; id=&quot;mce-EMAIL&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div id=&quot;mce-responses&quot; class=&quot;clear&quot;&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt; </span> <span title="&">&lt;div style=&quot;position: absolute; left: -5000px;&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&quot; tabindex=&quot;-1&quot; value=&quot;&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; /&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;/form&gt; </span><span title="&">&lt;/div&gt; </span><span title="&">&lt;!--End mc_embed_signup--&gt;</span>
最後に、全幅の青色のボタンがあります。 .max-widthはここで私たちを助けます。青は素晴らしいコントラストを提供し、目を右にもたらすだけでなく、大きいサイズがクリックするのに魅力的になります。 .max-widthは次のように定義されています
<span title="&">&lt;p&gt;&lt;a class=&quot;btn btn-primary btn-lg&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;</span>
>
ありがとうページアンディは、彼のクライアントが真のアーティストであり、余分な距離を作りたいと思っています。これは、Stock You Pageを使用してスキップしないことを意味します。ただし、ホームページの同じ配色とテーマを使用することにより、物事を一貫性を保ちます。
ありがとうページを作成するには、Open Controllers/homeController.csを作成します。以下を追加します:
これはMVCアプリであるため、誰かが /home /thankyouに入力すると、上記の方法にヒットします。もちろん、これはクライアントのメールリストにサインアップすることからの確認として作成されるため、誰もが感謝のページに入力することを期待していません。
<span title="&">&lt;!-- Begin MailChimp Signup Form --&gt; </span><span title="&">&lt;link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; </span><span title="&">&lt;div id=&quot;mc_embed_signup&quot; class=&quot;transparent-background soft-border-radius&quot;&gt; </span><span title="&">&lt;form action=&quot;#&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate&gt; </span> <span title="&">&lt;div id=&quot;mc_embed_signup_scroll&quot;&gt; </span> <span title="&">&lt;h3&gt;Enter your name and email for&lt;br /&gt; your first FREE lesson!&lt;/h3&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-FNAME&quot; class=&quot;not-bold&quot;&gt;First Name &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;transparent-background soft-border-radius&quot; id=&quot;mce-FNAME&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-EMAIL&quot; class=&quot;not-bold&quot;&gt;Email &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email transparent-background soft-border-radius&quot; id=&quot;mce-EMAIL&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div id=&quot;mce-responses&quot; class=&quot;clear&quot;&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt; </span> <span title="&">&lt;div style=&quot;position: absolute; left: -5000px;&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&quot; tabindex=&quot;-1&quot; value=&quot;&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; /&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;/form&gt; </span><span title="&">&lt;/div&gt; </span><span title="&">&lt;!--End mc_embed_signup--&gt;</span>
私たちのありがとうページは基本的にホームページのジャンボトロンになります。 Thankyou.cshtmlのコードをクリアし、上部にViewBagコードのみを残します。以下に貼り付けます:
連絡先ページのコピーを作成すると、既存のページ構造を最大限に活用できます。何もする必要なく、おなじみのナビゲーションとフッターがあります。
おそらく、クラスのジャンボトロントールに気づいたでしょう。これは新しいクラスであり、感謝のページに余分な高さを追加します。それ以外の場合は、トップを横切ってかなり短いストリップが走ることになります。それほど印象的ではなかったでしょう。<span><span>.not-bold</span> { </span> <span>font-weight:normal; </span><span>}</span>
大きな画像は見栄えが良く、アーティスト(クライアント)に追加の放送時間を与えます。
Jumbotron-tallは次のように定義されていますあなたの最後のありがとうページは次のようになります:
ページに連絡します
<span><span>.transparent-background</span> { </span> <span>background-color: <span>rgba(0, 0, 0, 0.25)</span> </span><span>}</span>
<span title="&">&lt;p&gt;&lt;a class=&quot;btn btn-primary btn-lg&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;</span>
これは、フォームの下部にある青いボタン用に特別です。このクラスを追加すると、より広いボタンが作成され、ボタンの上部とコメントボックスの下部の間に小さなスペースが追加されます。このクラスをホームページボタンに適用することもできます。
次は、既存のクラスの変更です:このフォームの場合、MailChimpフォームコードに似た構造を使用します。しかし、サインアップフォームを使用していないため、MailChimpのCSSを使用することはありません。
<span title="&">&lt;!-- Begin MailChimp Signup Form --&gt; </span><span title="&">&lt;link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; </span><span title="&">&lt;div id=&quot;mc_embed_signup&quot; class=&quot;transparent-background soft-border-radius&quot;&gt; </span><span title="&">&lt;form action=&quot;#&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate&gt; </span> <span title="&">&lt;div id=&quot;mc_embed_signup_scroll&quot;&gt; </span> <span title="&">&lt;h3&gt;Enter your name and email for&lt;br /&gt; your first FREE lesson!&lt;/h3&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-FNAME&quot; class=&quot;not-bold&quot;&gt;First Name &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;transparent-background soft-border-radius&quot; id=&quot;mce-FNAME&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-EMAIL&quot; class=&quot;not-bold&quot;&gt;Email &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email transparent-background soft-border-radius&quot; id=&quot;mce-EMAIL&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div id=&quot;mce-responses&quot; class=&quot;clear&quot;&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt; </span> <span title="&">&lt;div style=&quot;position: absolute; left: -5000px;&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&quot; tabindex=&quot;-1&quot; value=&quot;&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; /&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;/form&gt; </span><span title="&">&lt;/div&gt; </span><span title="&">&lt;!--End mc_embed_signup--&gt;</span>
連絡先フォームに、コメントTextareaボックスを追加しました。このボックスにはスクロールバーがありますが、デフォルトではかなり白くなります。この明るい色は、私たちの暗い色と大きなコントラストを生み出します。スクロールバーがより良く溶け込むのを助けるには、Textareaを変更する必要があります。
FFFAD5の色に注目してください。これにより、コメントフィールドテキストが黒から明るい黄色に変更されます。入力フィールドについても同じことをしています:
上記のすべてのCSSクラスはすべてsite.css。
に移動します<span><span>.not-bold</span> { </span> <span>font-weight:normal; </span><span>}</span>
<span><span>.transparent-background</span> { </span> <span>background-color: <span>rgba(0, 0, 0, 0.25)</span> </span><span>}</span>
要約
Andyのクライアントには、サインアップを引き付けることができる素晴らしい見た目のサインアップフォームがあります。彼はまた、サイトの全体的なテーマとよく溶け込む連絡フォームを追加しました。この時点で、アンディのクライアントは素晴らしいスタートを切っています。
次に来ると、顧客がレッスンを購入する方法を追加します。 Andyのクライアントは、モバイルが現在Webの大部分であることを認識しています。彼は、モバイルサイトが優れたユーザーエクスペリエンスを提供するようにしたいと考えています。これの一部は、新しいレッスンが利用可能になったら通知を送信することです。<span><span>.soft-border-radius</span> { </span> <span>border-radius: 10px; </span><span>}</span>
以上がVisual Studio Community 2015:電子メールと連絡先ページの追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。