Key Takeaways

Mit
• Visual Studio Community 2015 k?nnen Benutzer ein E -Mail -Anmeldeformular, einen Kontakt und über Seiten auf ihre Website implementieren. Das E -Mail -Anmeldeformular kann mit einem Formular von MailChimp auf der Homepage platziert werden.
• Die Benutzeroberfl?che kann mit Bootstrap poliert werden, um die Form zu formatieren und alles richtig ausrichten zu lassen. Benutzerdefinierte Klassen wie nicht-billig, transparent-background und Soft-Border-Radius k?nnen in Site.CSS erstellt werden, um das Erscheinungsbild des Formulars zu ?ndern.
• Zus?tzliche Seiten wie eine Dankeseite "Danke" und "Kontakt" k?nnen für eine bessere Benutzerinteraktion erstellt werden. Diese Seiten k?nnen so konzipiert werden, dass sie dem Farbschema und dem Thema der Startseite entspricht und eine einheitliche Benutzererfahrung auf der gesamten Website bietet.

Dieser Artikel wurde von Microsoft gesponsert. Vielen Dank, dass Sie die Sponsoren unterstützt haben, die SitePoint erm?glichen.

Willkommen in unserer Artikelserie mit der modernen IDE von Microsoft: Visual Studio Community 2015, um eine attraktive, funktionale Website für einen Kunden schnell zu entwerfen und zu erstellen. Wenn Sie die letzte Rate verpasst haben, lesen Sie sie hier.

Jetzt, da Andy die Website -Startseite zur Verfügung hat, kann er die Website ein wenig mehr erstellen. Dies beinhaltet die Implementierung eines E -Mail -Anmeldeformulars sowie Kontakte und über Seiten.

Wir beginnen mit einem E -Mail -Anmeldeformular und erstellen Sie einige zus?tzliche Seiten. Das E -Mail -Anmeldeformular befindet sich vorne und zentriert auf der Homepage. Es wird auf der rechten Seite des Jumbotron platziert, wo ein leerer Raum verfügbar ist.

Für das E -Mail -Anmeldeformular verwenden wir ein Formular von MailChimp. Andy verwendet das MailChimp -Konto seines Kunden und wird eine vorhandene Liste für die Homepage verwenden. Jeder, der sich auf der Homepage anmeldet, wird in diese Liste gehen.

Unser Anmeldeformular wird so gestaltet, dass er wie folgt aussieht:

Code von MailChimp

erhalten

W?hlen Sie nach der Anmeldung in MailChimp die Liste aus, zu der die Personen hinzugefügt werden sollen. Klicken Sie auf Anmeldeformulare. Klicken Sie auf eingebettete Formulare. Klassischer Stil ist in Ordnung. Der Kunde m?chte den Vornamen und die E -Mail -Adresse erfassen. Mailchimp hat diese tats?chlich als Standard, damit wir die Dinge so lassen k?nnen, wie sie sind.

Ihr Bildschirm in MailChimp sollte wie folgt aussehen:

Kopieren Sie die HTML. Das werden wir in den Jumbotron einfügen. Im Jumbotron unter dieser Zeile:

<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>

Fügen Sie den MailChimp -Formularcode hinzu. Wenn Sie die App ausführen, sollte sie wie folgt aussehen:

Offensichtlich ist es nicht so, wie es aussieht, aber so ist ein Ausgangspunkt gut. Von hier aus formatieren wir das Formular mit Bootstrap und lassen alles richtig ausgerichtet.

Anmeldeformular mit Bootstrap

?ndern

Mit der aktuellen Formatierung haben wir unser reaktionsschnelles Design verloren. Der Titel -Titel muss übrig bleiben, w?hrend das Anmeldeformular nach rechts geht. Sie sollten auch in derselben Reihe sein. Bootstrap hilft uns, die Dinge wieder in Ordnung zu bringen.

Wir k?nnen ein paar Spalten hinzufügen. Umgeben Sie den Jumbotron mit einem

und dem MailChimp -Code mit a. Diese Formatierung bedeutet, dass der Site -Titel -Text 2/3 des Jumbotron aufnimmt, w?hrend das Anmeldeformat 1/3 aufnimmt.

Ihr Code sollte wie folgt aussehen:

Denken Sie daran, Bootstrap verwendet ein 12 -Gitter -System. 8 4 = 12 und Sie k?nnen aus diesen Zahlen sehen, wie wir 2/3 und 1/3 erhalten.

Wenn Sie die Website ausführen, sehen Sie, dass wir zwei Spalten haben und unser reaktionsschnelles Webdesign zurück ist.

Als n?chstes beginnen wir mit dem Polieren der UI der Anmeldeformulare, damit sie sich besser mit der Website einfügt.

UI -Polieren

Anstatt viele kleine Schritte durchzuführen, ist es einfacher, anzuzeigen, wie die fertigen MailChimp -?nderungen aussehen sollten. Dann k?nnen wir durchtreten. Ersetzen Sie Ihren aktuellen MailChimp -Code durch Folgendes:

<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>

Ich habe ein paar Speicherlinien im Code hinzugefügt, um das Formular für die Diskussion besser aufzubrechen.

Es gibt einige benutzerdefinierte Klassen, die wir erstellen werden, darunter nicht billig, transparent-background und Soft-Border-Radius. Wir definieren diese Klassen in Site.css.

Da der gr??te Teil des MailChimp -Codes das gleich ist wie das, was wir von MailChimp kopiert haben, lassen Sie uns diskutieren, was mit diesen benutzerdefinierten Klassen los ist.

nicht bill ist wie folgt:

<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>

Es entfernt einfach fett gedruckte Buchstaben. Dies wird verwendet, um die Formfeldetiketten des Formulars zu betonen. Unser Aufruf zum Handeln ist mutig. Wenn auch das Formularfeldetiketten mutig sind, wird das Auge ein wenig Schwierigkeiten haben, herauszufinden, wo man sich konzentrieren soll. Schlimmeres Fall Szenario: Die Leute geben einfach auf und umgehen unser Anmeldeformular.

Das Screenshot unten zeigt die Verwendung von .not-Bold

transparentes Background bietet halbtransparente Transparenz für die Felderformular- und Eingabefelder und sorgt für etwas mehr Tiefe für unser Design. Es ist definiert als:

<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>

rgba bedeutet einfach rot, grün, blau und alpha. Alpha setzt Deckkraft. Je niedriger dieser Wert ist, desto transparenter. Die Werte k?nnen von 0 bis 1.

reichen

Soft-Border-Radius macht unsere Form und Eingabefelder mit abgerundeten Ecken ein wenig elegantes Detail aus. Diese Klasse ist definiert als:

<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>

Schlie?lich haben wir einen blauen Button mit voller Breite. .Max-Breite hilft uns hier. Das Blau bietet nicht nur einen gro?en Kontrast und bringt das Auge rechts, sondern die gro?e Gr??e macht es unwiderstehlich zum Klicken. .Max-Breite ist definiert als:

<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>

Hinzufügen der oben genannten Klassen zu Site.css und Einfügen im obigen Formularcode sollte zu demselben Anmeldeformular führen, wie oben gezeigt.

Danke Seite

Wenn sich Benutzer anmelden, ist es normalerweise sch?n, eine Best?tigungsseite bereitzustellen, damit sie wissen, dass alles gut l?uft. Wie oft haben Sie sich für die Liste einer jemandem angemeldet, nur um von einer ?u?erst unvorstellbaren Dankeseite begrü?t zu werden?

Andy wei?, dass sein Kunde ein wahrer Künstler ist und die Extrameile gehen m?chte. Dies bedeutet, dass Sie nicht mit einer Aktien -Dankeseite überfliegen. Wir werden die Dinge jedoch konsistent halten, indem wir das gleiche Farbschema und das gleiche Thema von der Startseite verwenden.

Um die Dankeseite zu erstellen, ?ffnen Sie Controller/homecontroller.cs. Fügen Sie Folgendes hinzu:

<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>

Da dies eine MVC -App ist, wird die obige Methode getroffen, wenn jemand in /home /danke tippt. Natürlich erwarten wir nicht, dass jemand die Dankesseite eingeben, da dies als Best?tigung von der Anmeldung auf die E -Mail -Liste unseres Kunden erstellt wird.

Wir brauchen eine Ansicht für diese Methode, um zu dienen. ?ffnen Sie den Ordner "Ansichten/Home" und erstellen Sie eine Kopie von contact.cshtml. Benennen Sie die kopierte Datei um dankyou.cshtml.

um.

Unsere Dankeseite ist im Grunde genommen der Jumbotron von der Startseite. L?schen Sie den Code in thungendyou.cshtml und lassen Sie nur den Viewbag -Code oben. Einfügen in Folgendes:

<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>

Erstellen einer Kopie der Kontaktseite erm?glicht es uns, die vorhandene Seitenstruktur voll auszunutzen. Wir werden unsere vertraute Navigation und Fu?zeile haben, ohne etwas zu tun.

Sie haben wahrscheinlich die Klasse Jumbotron-tall bemerkt. Dies ist eine neue Klasse, die der Dankesseite eine zus?tzliche H?he verleiht. Andernfalls würden wir einen ziemlich kurzen Streifen über die Oberseite leiten. Es w?re nicht zu beeindruckend gewesen.

Das gr??ere Bild sieht gut aus und gibt unserem Künstler (d. H. Kunde) eine zus?tzliche Luftzeit.

Jumbotron-tall ist definiert als:

<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>

Ihre letzte Dankeseite sollte wie Folgendes aussehen:

Kontaktseite

Wir m?chten potenziellen Kunden die M?glichkeit geben, unseren Kunden direkt über seine Website zu kontaktieren. Hier kommt die Kontaktseite. Wir folgen der grundlegenden übersicht wie oben, um die Kontaktseite zu erstellen. Unsere letzte Seite sieht wie folgt aus:

Ansichten/Zuhause ?ffnen und Sie werden feststellen, dass es bereits einen Kontakt gibt.cshtml. Genau wie zuvor mit der Thanks -Seite, r?umen Sie alles au?er dem Top -Ansichts -Code aus. Wir werden das Jumbotron wieder benutzen. Wir werden zwei Spalten wie zuvor verwenden, au?er dass die rechte Seite leer ist. Dadurch k?nnen unser Kontaktformular mehr nach links ausrichten.

Es gibt einige neue CSS -Klassen, die wir vorstellen werden, die auch unsere Homepage beeinflussen. Die erste Klasse lautet:

<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>

Dies gilt speziell für die blaue Taste am unteren Rand des Formulars. Das Hinzufügen dieser Klasse erstellt eine breitere Taste und fügt einen kleinen Platz zwischen der Oberseite der Schaltfl?che und unten im Kommentarfeld hinzu. Wir k?nnen diese Klasse auch auf unsere Homepage -Taste anwenden.

Als n?chstes ist eine ?nderung zu einer vorhandenen Klasse:

<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>

Für dieses Formular verwenden wir eine Struktur, die dem MailChimp -Formularcode ?hnelt. Aber wir werden die CSS von MailChimp nicht verwenden, da wir ihr Anmeldeformular nicht verwenden.

Eine Sache, die das MailChimp -CSS bereitstellte, waren dunklere Grenzen um die Eingabefelder. Das ist jetzt weg. Um auszugleichen, fügen wir einen Rand in Soft-Gr-Gradius hinzu, was den gleichen Effekt hat.

Im Kontaktformular haben wir ein K?stchen "Textbereich" hinzugefügt. Diese Box kann Scrollbars haben, die standardm??ig ziemlich wei? sein wird. Diese hellere Farbe erzeugt einen gro?en Kontrast zu unseren dunkleren Farben. Um die Bildlaufleisten besser zu mischen, müssen wir den Textbereich ?ndern:

<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>

Beachten Sie die Farbe von FFFAD5, die unseren Kommentarfeld Text von Schwarz zu einem helleren Gelb ?ndert. Wir tun dasselbe für das Eingabefeld:

<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>

Alle oben genannten CSS -Klassen gehen in Site.css.

Jetzt k?nnen wir mit dem Formularcode fortfahren.

<span><span>.soft-border-radius</span> {
</span>  <span>border-radius: 10px;
</span><span>}</span>

Sie k?nnten einige ?hnlichkeiten mit dem MailChimp -Formular bemerken. Dies ist eigentlich eine modifizierte Version dieses Formulars. Das Kontaktformular befindet sich in der linken Spalte, die COL-MD-8 breit ist. Dies erzeugt eine 2/3 breite Spalte, da unsere rechte Spalte Col-MD-4 ist. Denken Sie daran, 8 4 = 12, das ist die Anzahl der Spalten, die unser 12 -Spalten -Gitter in Bootstrap ausmachen.

Zusammenfassung

Der Kunde von

Andy hat jetzt ein gro?artig aussehendes Anmeldeformular, das Anmeldungen anzieht. Er hat auch ein Kontaktformular hinzugefügt, das sich gut zum Gesamtthema der Website einfügt. Zu diesem Zeitpunkt hat Andys Kunde einen guten Start.

Als n?chstes fügen wir den Kunden eine M?glichkeit hinzu, Lektionen zu kaufen. Andys Kunde erkennt, dass Mobile jetzt ein gro?er Teil des Webs ist. Er m?chte sicherstellen, dass die mobile Website eine gro?artige Benutzererfahrung bietet. Ein Teil davon ist das Versenden von Benachrichtigungen, sobald eine neue Lektion verfügbar ist.

Andy hat einige aufregende Funktionen für die Website. Wir werden weiter folgen und über seine Schulter schauen, wenn alles zusammenkommt.

Das obige ist der detaillierte Inhalt vonVisual Studio Community 2015: Hinzufügen von E -Mail- und Kontaktseiten hinzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!