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:
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="&">&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>
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.
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.
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="&">&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>
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="&">&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>
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.
reichenSoft-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="&">&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>
Hinzufügen der oben genannten Klassen zu Site.css und Einfügen im obigen Formularcode sollte zu demselben Anmeldeformular führen, wie oben gezeigt.
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="&">&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>
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:
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="&">&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>
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="&">&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>
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.
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!
Attributverwendung
Welche Methoden gibt es, Crawler zu verhindern?
Es kann keine Verbindung zum Internet hergestellt werden
Verwendung von Instanceof in Java
Der Unterschied zwischen PHP und JS
nvidia geforce 940mx
So verwenden Sie die Groupby-Funktion
Webstorm wurde auf chinesische Version geändert
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
