Erstellen einer Website mit Visual Studio (HTML, CSS, JQUERY)

Erstellen einer Website mit Visual Studio (HTML, CSS, JQUERY) in nur 8 Schritten

Hallo alle miteinander!

Dies ist meine erste Anleitung, und in dieser Anleitung zeige ich Ihnen, wie Sie mit Visual Studio Ihre eigene Website erstellen können!

Hier ist ein Download-Link für Visual Studio:

Visual Studio´s Home Link

Direkter Download-Link

Dies könnte bei der Veröffentlichung einer neuen Version kaputt gehen. Aber im Moment funktioniert es immer noch und ich versuche es auf dem neuesten Stand zu halten.

Viel Glück und ich hoffe, Sie werden etwas über das Codieren lernen. Wenn Ihnen meine instructables gefallen haben, vergessen Sie bitte nicht, für meine instructables abzustimmen. Ich habe ein Video darüber beigefügt, was Sie machen werden.

Zubehör:

Schritt 1: Erstellen Sie Ihr Projekt

Klicken Sie auf Datei, neu, Website. Wählen Sie dann "ASP.NET Web Forms Site"

Jetzt haben Sie Ihr Projekt erstellt. Sie werden sehr viel Code sehen. Unten links befindet sich ein Button namens Design. Wenn Sie darauf klicken, gibt es eine Webseite, die Sie bearbeiten können! Im nächsten Schritt lernen Sie, wie Sie es tatsächlich bearbeiten.

Schritt 2: Sehen Sie, welche Werkzeuge Sie haben!

Wenn Sie nun auf den Text klicken, können Sie ihn bearbeiten. Sie können Schaltflächen und Text auch hinzufügen, indem Sie links auf Toolbox klicken. Wenn Sie darauf geklickt haben, öffnet sich ein Bildschirm. Es gibt alle anderen Optionen, die Sie mit einem einfachen Drag & Drop-System einfügen können. Ziehen Sie zum Beispiel eine Liste mit Aufzählungszeichen an die gewünschte Stelle. Wenn Sie dies getan haben, können Sie es bearbeiten, indem Sie auf die Registerkarte Eigenschaften schauen, die sich standardmäßig ganz rechts unten befindet. Wenn Sie nach unten in Verschiedenes scrollen. Es gibt eine Eigenschaft namens Items. Wenn Sie darüber fahren, sehen Sie einen kleinen Knopf mit einigen Punkten. Klick es an. Es erscheint ein Bildschirm. Und unter der Registerkarte Mitglieder klicken Sie auf die Schaltfläche Hinzufügen. Jetzt fügen Sie Listenelemente hinzu. Sie sehen einige Optionen wie aktiviert und ausgewählt. Bearbeiten Sie sie einfach so, wie Sie es möchten. Und fügen Sie so viele Elemente hinzu, wie Sie möchten. Wenn Sie sich die Toolbox noch einmal ansehen, werden Sie feststellen, dass Sie auch HTML-Schaltflächen oder Ajax-Erweiterungen auswählen können.

Schritt 3: Erstellen einer Website rund um Sie!

Jetzt erstellen wir eine Website rund um Sie. Sie können dies tun, indem Sie die Toolbox und dann die HTML-Formulare verwenden oder alles per Code erledigen.Ich werde es jetzt im Code machen, weil das etwas fortgeschrittener ist. Gehen Sie jetzt zu Ihrem Solution Explorer. Und klicken Sie mit der rechten Maustaste auf Ihren Projektnamen. Wählen Sie die Option Hinzufügen und klicken Sie auf Neues Element hinzufügen. Danach wählen Sie HtmlPage. Hinweis: Es gibt keine Design-Schaltfläche für eine HTML-Seite, aber Sie können die Toolbox weiterhin dafür verwenden.

Beginnen wir also mit dem Hinzufügen der Style-Tags

Innerhalb dieser Tags können Sie CSS-Code hinzufügen. Sie müssen noch nichts hinzufügen. Innerhalb des Titel-Tags können Sie Ihren eigenen Titel wie hinzufügen

Meine eigene Website!

Meine eigene Website!

In den Body-Tags können Sie Schaltflächen, Text usw. hinzufügen. Fügen Sie ein Bild über sich selbst hinzu. Sie können dies tun, indem Sie das img-Tag hinzufügen oder die Toolbox verwenden. Um zu definieren, welches Bild Sie verwenden möchten, fügen Sie src = "[Ihr Link hier.]" hinzu. Sie müssen auch Höhe und Breite hinzufügen. Ihr Tag sollte ungefähr so ​​aussehen

Fügen Sie Text hinzu, indem Sie das Tag hinzufügen

P steht für Absatz. Füge einfach etwas hinzu P Tags und Sie erhalten Text auf Ihrer Seite. Nachdem wir dies getan haben, fügen Sie diesen Code hinzu

Dieser Code fügt ein Textfeld hinzu, das eine Platzhalter-E-Mail und eine Schaltfläche enthält, in der die Stände in Ihrer eigenen Sprache gesendet werden.

Wenn Sie alles richtig gemacht haben, sollten Sie diese Webseite erhalten, wenn Sie auf die grüne Wiedergabetaste klicken. (Schauen Sie sich das letzte Bild an).

Wie Sie sehen, braucht es nur etwas Stil. und dafür werden wir CSS verwenden.

Schön, das ist es für HTML. Nur CSS jetzt hinzufügen :)

Schritt 4: Hinzufügen eines Stils

CSS steht für Cascading Style Sheets. Und wird verwendet, um Ihrer Webseite mehr Stil zu verleihen.

Einige Dinge über die Syntax von CSS. Ich zeige Ihnen einen kleinen Code-Container mit CSS:

Eingabe {Hintergrundfarbe: rot; Polsterung: 12px; Schriftgröße: 18px; }

Eingabe bedeutet, dass wir diesen Stil zu jedem Element mit der Tag-Eingabe hinzufügen. Dann definieren wir in den geschweiften Klammern einige Dinge wie Hintergrund und Rahmen, die Sie auch definieren können, welche Schriftart verwendet werden soll.

Also werden wir jetzt CSS zu unserer Seite hinzufügen. Dazu fügen wir den folgenden Code in die Style-Tags ein, die wir zu Beginn von Schritt 3 erstellt haben.

body {text-align: center; Hintergrund: URL ("http://bit.ly/19naIXk"); Farbe weiß; Schriftfamilie: Helvetica; Hintergrundgröße: Cover; Hintergrundposition: Mitte Mitte; Hintergrundwiederholung: keine Wiederholung; Hintergrund-Anhang: behoben; } p {Schriftgröße: 24px; } input {border: 0; Polsterung: 12px; Schriftgröße: 18px; } input [type = "submit"] {background: limegreen; Farbe schwarz; }

Ersetzen Sie die URL nach dem Hintergrund durch Ihre eigene URL.

So sollte Ihr Code aussehen:

Eine Website über mich!

Hallo, mein Name ist ... und ich mag ... und ...

Gut gemacht! Es ist fertig!

So sehen Sie aus, wie schön Ihre Website aussieht. Sie müssen eine grüne Wiedergabetaste finden und auf den Pfeil daneben klicken. Wählen Sie dann den Seiteninspektor. Um ihn in Visual Studio anzuzeigen, wählen Sie andernfalls einen Browser, den Sie möchten. Drücken Sie danach einfach die grüne Wiedergabetaste!

Schritt 5: Machen Sie es sich selbst

Jetzt machen wir es uns zu eigen.

Schauen Sie sich alle Links an, die Sie im HTML-Code und im CSS-Code sehen (nur innerhalb des Body-Containers). Sie können leicht sehen, wo sie verwendet werden. Ändern Sie die URL für Ihre eigene Bild-URL. Das war's mit den URLs.

Sie können auch Elemente in den Containern hinzufügen. Soll der Text beispielsweise größer sein, verwenden Sie diesen Code:

p {Schriftgröße: 35px; }

Also fügst du hinzu

Schriftgröße: 35px;

zum p-Container. Sie können auch andere Dinge hinzufügen, ich zeige Ihnen eine Liste der Textanpassungen:

Text-Transformation: Kleinbuchstaben; Textdekoration: unterstrichen; Text ausrichten: rechts; Farbe blau; Textschatten: 2px 2px # ff0000; Schriftfamilie: "Times New Roman", Times, Serif; Schriftstil: kursiv; Schriftgröße: 900;

Probieren Sie sie aus, indem Sie sie in den P-Behälter geben. Suchen Sie bei Google nach CSS-Code, und Sie erhalten jede Menge Zeilen!

Schritt 6: Hinzufügen von Social Media-Schaltflächen

Wir werden einige Social-Media-Buttons hinzufügen, damit diese Sie auch über Social Media kontaktieren können. Es gibt zwei Stile, aus denen Sie auswählen können (siehe Bilder). Ich habe GIFs hinzugefügt, damit Sie sehen können, wie sie sich voneinander unterscheiden. Bewegen Sie die Maus darüber, um zu sehen, welchen Stil es hat. Ich mag den ersten Stil am meisten, aber der zweite ist auch schön.

Fügen wir sie also hinzu. Für beide Versionen müssen Sie denselben HTML-Code hinzufügen

Fügen Sie diesen Code unter dem Eingabe-Tag mit dem Typ "submit" hinzu:


Ersetzen Sie "#" durch Ihre eigene URL.

Jetzt müssen wir eine andere CSS-Datei (eine Schriftart für die Social Media-Symbole) einfügen, indem wir die folgende Zeile zum head-Tag hinzufügen:

Im Style-Tag müssen wir den folgenden Code hinzufügen:

#social {margin: 20px 10px; Textausrichtung: Mitte; } .smGlobalBtn {/ * globale Tastenklasse * / display: inline-block; Position: relativ; Cursor: Zeiger; Breite: 50px; Höhe: 50px; Rand: 2px durchgehend #ddd; / * füge den Buttons einen Rahmen hinzu * / box-shadow: 0 3px 3px # 999; Polsterung: 0px; Textdekoration: keine; Textausrichtung: Mitte; Farbe: #fff; Schriftgröße: 25px; Schriftgröße: normal; Zeilenhöhe: 2em; Randradius: 27px; -moz-border-radius: 27px; -webkit-border-radius: 27px; } / * Facebook-Button-Klasse * / .facebookBtn {Hintergrund: # 4060A5; } .facebookBtn: before {/ * Verwenden Sie: before, um die entsprechenden Symbole hinzuzufügen. * / font-family: "FontAwesome"; Inhalt: " f09a"; / * Facebook Icon hinzufügen * /} .facebookBtn: hover {color: # 4060A5; Hintergrund: #fff; Rahmenfarbe: # 4060A5; / * Ändere die Rahmenfarbe, wenn du mit der Maus über den Bildschirm fährst * /} / * twitter button class * / .twitterBtn {background: # 00ABE3; } .twitterBtn: before {Schriftfamilie: "FontAwesome"; Inhalt: " f099"; / * Füge Twitter Icon hinzu * /} .twitterBtn: hover {color: # 00ABE3; Hintergrund: #fff; Rahmenfarbe: # 00ABE3; } / * Klasse für Google Plus-Schaltflächen * / .googleplusBtn {Hintergrund: # e64522; } .googleplusBtn: before {font-family: "FontAwesome"; Inhalt: " f0d5"; / * googleplus icon hinzufügen * /} .googleplusBtn: hover {color: # e64522; Hintergrund: #fff; Rahmenfarbe: # e64522; } / * linkedin button class * / .linkedinBtn {background: # 0094BC; } .linkedinBtn: before {Schriftfamilie: "FontAwesome"; Inhalt: " f0e1"; / * füge linkedin icon hinzu * /} .linkedinBtn: hover {color: # 0094BC; Hintergrund: #fff; Rahmenfarbe: # 0094BC; } / * pinterest button class * / .pinterestBtn {background: # cb2027; } .pinterestBtn: before {font-family: "FontAwesome"; Inhalt: " f0d2"; / * add pinterest icon * /} .pinterestBtn: hover {color: # cb2027; Hintergrund: #fff; Rahmenfarbe: # cb2027; } / * tumblr button class * / .tumblrBtn {background: # 3a5876; } .tumblrBtn: before {Schriftfamilie: "FontAwesome"; Inhalt: " f173"; / * Tumblr Icon hinzufügen * /} .tumblrBtn: hover {color: # 3a5876; Hintergrund: #fff; Rahmenfarbe: # 3a5876; } / * rss button class * / .rssBtn {background: # e88845; } .rssBtn: before {Schriftfamilie: "FontAwesome"; Inhalt: " f09e"; / * RSS-Symbol hinzufügen * /} .rssBtn: hover {color: # e88845; Hintergrund: #fff; Rahmenfarbe: # e88845; }

Testen Sie jetzt Ihre Website und Sie sollten sie direkt unter den Eingabeformularen sehen. Das ': hover', das Sie nach einem Container sehen, bedeutet, dass Sie diesen Codecontainer verwenden müssen, wenn Sie mit der Maus darüber fahren.

Schritt 7: Hinzufügen von Javascript (Jquery)

Sie können Ihre Website noch schöner machen, indem Sie sie interaktiv gestalten. Dazu fügen wir Jquery hinzu. JQuery ist keine Sprache, sondern eine in Javascript geschriebene Bibliothek. Sie können die offizielle Website von Jquery besuchen, indem Sie auf den unten stehenden Link klicken.

JQuery

Sie müssen es nicht herunterladen, da wir es mit Code verknüpfen können.

Beginnen wir mit dem Hinzufügen eines acript-Links zu jquery. Fügen Sie dies unter dem Link-Tag hinzu, das wir im letzten Schritt verwendet haben.

Innerhalb dieser Tags werden wir unser Javascript-Skript hinzufügen. Wir müssen zuerst unseren Eingabetyp aktualisieren: 'submit'. Wir müssen die Klasse 'inputMail' hinzufügen. Unser Tag sollte also so aussehen:

Jetzt fügen wir Javascript in das Skript-Tag ein. Wir beginnen damit, diesen Code in das Skript-Tag einzufügen:

$ (document) .ready (function () {});

Dies bedeutet, dass die Funktion ausgeführt wird, wenn das Dokument vollständig geladen ist. Das $ (Dokument) bedeutet, dass es nach etwas sucht, das als Dokument bezeichnet wird, und dann die Funktion verwendet, um zu prüfen, ob das Dokument bereit ist. In diese Klammern setzen wir den gesamten nächsten JQuery-Code. Deshalb fügen wir jetzt den folgenden Code in die Klammern ein:

$ ('. inputMail'). click (function () {});

Dieser Code sucht nach einer Klasse mit dem Namen inputMail (der Punkt bedeutet, dass es sich um eine Klasse handelt, nach der wir suchen). Wenn Jquery dieses Objekt gefunden hat, wird geprüft, ob darauf geklickt wird. Wenn es angeklickt wird, führt es die Funktion aus. In dieser Funktion können wir den Knopf einen kleinen Trick machen lassen. Für den Trick fügen wir diesen Code in die Funktion ein:

$ ('. inputMail'). animate ({height: '+ = 100px', opacity: '0.4'}, "slow"); $ ('. inputMail'). animate ({width: '+ = 100px', opacity: '1.0'}, "slow"); $ ('. inputMail'). animate ({height: '- = 100px', opacity: '0.4'}, "slow"); $ ('. inputMail'). animate ({width: '- = 100px', opacity: '1.0'}, "slow");

Jetzt wird auch nach der Klasse inputMail gesucht und eine benutzerdefinierte Animation ausgeführt. Also lasst es uns ausprobieren! So sollte Ihr Skript-Tag insgesamt aussehen:

Das ist es! Nett! Im nächsten Schritt werden wir schauen, wie wir die HTML-Datei bekommen.

Schritt 8: Holen Sie sich Ihre HTML-Datei

Jetzt holen wir uns die HTML-Datei (Ihre Webseite) und speichern sie irgendwo auf Ihrer Festplatte. Dies ist kein schwerer Schritt und sollte nur eine Minute dauern. Wir sehen uns zunächst unseren Solution Explorer an und klicken auf default.aspx oder irgendetwas anderes in Ihrem Projektnamen. Dann schauen Sie auf die Registerkarte "Eigenschaften" und suchen nach einer Eigenschaft namens "Vollständiger Pfad". Kopieren Sie sie mit Ausnahme des letzten Dateinamens. Fügen Sie den Pfad in einen Datei-Explorer ein und suchen Sie nach einer Datei mit dem Namen HtmlPage.html oder einem anderen Namen, wenn Sie ihm einen anderen Namen gegeben haben. Kopieren Sie die Datei und fügen Sie sie irgendwo auf Ihrer Festplatte ein. Öffnen Sie die Datei und Sie sollten Ihre Seite erhalten, die Sie gemacht haben.

Herzliche Glückwünsche!

Sie haben eine Website erstellt, die sich nur um Sie dreht!