In einer Welt von Drag-and-Drop-Website-Erstellern hat Adobe Dreamweaver gut daran getan, im Wettbewerb relevant zu bleiben. Vollgepackt mit großartigen Funktionen und vielen Tools, die Ihnen das Leben erleichtern, ist diese Software eine großartige Wahl für Webdesigner und Entwickler.
Aber wie erstellt man seine erste Website mit Dreamweaver?
Erste Schritte mit Dreamweaver
Sie benötigen eine Kopie von Adobe Dreamweaver, bevor Sie damit arbeiten können, aber eine kostenlose Testversion ist verfügbar.
Gehen Sie zum Adobe Website, melden Sie sich an oder registrieren Sie ein Konto und laden Sie das Adobe Creative Cloud-Tool herunter, um loszulegen. Von hier aus können Sie Adobe Dreamweaver herunterladen und mit der vollständigen Anleitung beginnen.
Diese Anleitung zeigt Ihnen, wie Sie eine einfache Website mit Dreamweaver-Vorlagendateien als Basis erstellen. Die vollständigen Projektdateien finden Sie unter dieses GitHub-Repository.
Schritt 1: Erstellen Sie eine Dreamweaver-Site
Öffnen Sie Adobe Dreamweaver und gehen Sie zu
Seite? ˅ Menü oben auf der Seite. Auswählen Neue Seite, wählen Sie dann einen Namen für Ihre Website und einen Speicherort dafür aus.Schritt 2: Erstellen Sie eine Vorlagendatei
Als nächstes ist es an der Zeit, eine Vorlagendatei für Ihre neue Website zu erstellen. Vorlagendateien funktionieren ähnlich wie die von CMS-Systemen wie WordPress und Shopify verwendeten Themen, nur dass Sie sie selbst erstellen.
Klicke auf Erstelle neu oder gehe zu Datei > Neu und wähle HTML-Vorlage von dem Dokumentenart aufführen.
Dadurch wird eine grundlegende Vorlage mit bereits vorhandenem HTML erstellt. Sie werden dieses HTML für Ihr Projekt verwenden, es lohnt sich also, es für die nächsten Schritte beizubehalten.
Schritt 3: Erstellen Sie eine Kopfzeile in der Vorlage
Jetzt ist es an der Zeit, den Menü-/Kopfzeilenabschnitt auf der Website in der gerade erstellten Vorlage zu erstellen. Gehe zu Einfügung oben auf dem Bildschirm und wählen Sie aus Header von der Liste.
An dieser Stelle öffnet sich ein Dialog. Fügen Sie einen Namen für die Klasse Ihres neuen Headers hinzu und klicken Sie OK um den Code zu Ihrem HTML hinzuzufügen. Der neue Code sollte automatisch in die eingefügt werden Tags, aber Sie können es bei Bedarf verschieben.
Anschließend sollten Sie auch ein div-Element für das Logo der Website und ein nav-Element für das Menü der Website hinzufügen. Gehen Sie zum Einfügung Menü und auswählen Abt, dann gehen Sie zurück zu Einfügung Menü und auswählen Nav. Beide Elemente benötigen einen eigenen Klassennamen.
Als letzten Schritt in diesem Prozess haben wir unserem Navigationselement einige Menüoptionen hinzugefügt. Gehen Sie dazu zu Einfügung und auswählen Hyperlinks. Wir haben unserer Website-Kopfzeile fünf Hyperlinks hinzugefügt: Zuhause, Löwe, Tiger, Jaguar und Hauskatze.
Die Seiten mit Links in der Kopfzeile existieren noch nicht, also lassen Sie die href Eigenschaft leer, bis Sie sie erstellen.
Schritt 4: Stylesheet für CSS hinzufügen
Wie Sie sehen können, sieht diese Website in ihrer jetzigen Form nicht sehr gut aus. Ein wenig CSS löst dieses Problem, und Sie können ganz einfach ein Stylesheet in Dreamweaver hinzufügen. Gehen Sie zum CSS-Designer auf der rechten Seite des Bildschirms und klicken Sie auf Plus Symbol neben Quellen. Sie müssen nur einen Namen für Ihr Stylesheet wählen und können die restlichen Einstellungen unverändert lassen.
Das erste, was zu tun ist, ist, den Header in eine Flexbox zu verwandeln. Flexbox ist nur eine Möglichkeit, eine Webseite mit CSS zu gestalten. Daneben wird die Schriftart der Website festgelegt, ein schwarzer Hintergrund festgelegt und einige andere Änderungen vorgenommen, um die Website besser aussehen zu lassen. Den vollständigen CSS-Code finden Sie am Ende des Artikels.
Schritt 5: Fügen Sie der Vorlage bearbeitbare Bereiche hinzu
Bearbeitbare Bereiche erstellen HTML-Abschnitte, die bearbeitet werden können, wenn Sie die Vorlage zum Erstellen anderer Seiten verwenden. Der Inhalt unserer Hauptseite passt perfekt in eine Region wie diese. Gehe zu Einfügung > Schablone > Bearbeitbarer Bereich, um Ihrer Seite einen bearbeitbaren Bereich hinzuzufügen.
Schritt 6: Bild-/Textinhalt zur Vorlage hinzufügen
Der gerade hinzugefügte bearbeitbare Bereich kann ohne zusätzliches HTML verwendet werden, aber Sie können immer noch einige zum Bearbeiten hinzufügen, wenn Sie einzelne Seiten erstellen. Um zu beginnen, gehen Sie zu Einfügung und auswählen Abt um Ihrer Website ein neues div-Element hinzuzufügen.
Dies dient sowohl als Container für den Textinhalt auf der Seite als auch als Ort zum Hinzufügen eines Hintergrundbilds. Dieses Element hat eine Klasse und eine ID, sodass verschiedene Seiten unterschiedliche CSS-Eigenschaften haben. Diese einzigartige CSS-Hintergrundmuster sind großartig, wenn Sie Ihre Dreamweaver-Website auf die nächste Stufe bringen möchten.
Als nächstes gehen Sie zu Einfügung > Überschriften > H1, um eine Überschrift in das gerade hinzugefügte div-Element einzufügen. Beide Elemente benötigen etwas CSS, um richtig zu funktionieren. Das div hat Werte für background-image, background-size und height. Gehe zu Datei > Rette alle um sicherzustellen, dass Ihre Vorlage aktualisiert wird.
Sie können Bilder von überall in Ihrem lokalen Netzwerk oder dem Internet hinzufügen, aber es ist am besten, die Bilder für einen einfachen Zugriff in den eigenen Dateien der Website zu speichern.
Schritt 7: Seiten mit der Vorlage hinzufügen
Nachdem Sie nun eine Vorlage erstellt haben, können Sie damit beginnen, einige Seiten hinzuzufügen. Gehe zu Datei > Neu und auswählen HTML unter Dokumentenart. Füge hinzu ein Titel für jede Seite, die Sie vor dem Schlagen hinzufügen Schaffen.
Die neue Seite ist weiß und hat noch nicht unser Template. Sobald Ihre neue Seite in Dreamweaver geöffnet ist, gehen Sie zu Werkzeug > Vorlagen und klicken Sie auf Vorlage auf Seite anwenden. Wählen Sie Ihre Vorlage aus der Liste und klicken Sie auf Auswählen um Ihre Vorlage zu laden. Gehen Sie schließlich zu Datei > Speichern als und wählen Sie einen Namen für Ihre neue Seite, bevor Sie sie speichern.
Wiederholen Sie diesen Vorgang, bis Sie genügend Seiten haben, um Ihre Anforderungen zu erfüllen. Sie müssen sich dafür nicht an eine einzige Vorlage halten; Sie können neue für verschiedene Seitenlayouts hinzufügen.
Schritt 8: Fügen Sie der Vorlage Seitenlinks hinzu
Nachdem Sie Ihre Seiten hinzugefügt haben, können Sie die Navigationslinks in Ihrer Vorlage so ändern, dass sie auf die richtigen Seiten verweisen. Gehen Sie zurück zu Ihrer Vorlage und suchen Sie die A-Tags, die Sie zuvor hinzugefügt haben. Löschen Sie den Platzhalter-Link und klicken Sie auf den Anführungszeichen die zu öffnen Durchsuche Speisekarte. Von hier aus können Sie die richtige Seite für jeden Ihrer Links auswählen.
Schritt 9: Korrigieren Sie CSS/HTML auf neuen Seiten
Jede der Seiten wird im Moment gleich aussehen. Es sind einige Schritte zu unternehmen, um sicherzustellen, dass sie ihre eigenen Inhalte haben; Befolgen Sie die nachstehenden Schritte, um Ihre neue Website fertigzustellen.
- Ändern Sie die Inhalts-Div-Element-ID auf jeder Seite, um den Seitentitel widerzuspiegeln
- Fügen Sie CSS-Code für die neue Element-ID mit einem anderen Hintergrundbild hinzu
- Ändern Sie den Titel auf jeder Seite
Schritt 10: Testen Sie die Website in Ihrem Browser
Sie können Ihre neue Website in Ihrem bevorzugten Webbrowser direkt aus Adobe Dreamweaver heraus testen. Gehe zu Datei > Echtzeit-Vorschau und wählen Sie den Browser Ihrer Wahl aus, um Ihre Website anzuzeigen. Dies eignet sich hervorragend zum Testen von CSS oder anderem Code, der nicht mit jedem Browser kompatibel ist.
Jetzt brauchen Sie nur noch einen Ort, an dem Sie Ihre Website hosten können. Hosten einer statischen Site mit AWS S3 ist ein großartiger Ort, um anzufangen.
Der HTML- und CSS-Code
<!doctype html>
<html>
<Kopf>
<Metazeichensatz="utf-8">
<!-- TemplateBeginEditable name="Dokumenttitel" -->
<Titel>Unbenanntes Dokument</title>
<!-- TemplateEndEditable -->
<link href="../page-css.css" rel="Stylesheet" Typ="Text/css">
</head>
<Karosserie>
<Header-Klasse ="Hauptkopfzeile">
<div-Klasse="Website-Logo">MakeUseOf-Beispielseite</div>
<Navigationsklasse ="Hauptmenü">
<ein href="../Home.html">Heim</a><ein href="../Lion.html">Löwe</a><ein href="../Tiger.html">Tiger</a><ein href="../Jaguar.html">Jaguar</a><ein href="../Hauskatze.html">Hauskatze</a>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<div-Klasse="Hauptinhalt" id="Löwe">
<h1>Das ist ein Löwe!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Dieses HTML erstellt die fertige Website für unser Projekt. Sie können es auseinander nehmen, um zu sehen, wie es funktioniert, aber wir empfehlen Ihnen, Ihren eigenen HTML-Code für Ihre Website zu erstellen.
@charset "utf-8";
Karosserie {
Rand: 0;
Hintergrund: schwarz;
Schriftfamilie: Gotham, "Helvetica Neue", Helvetica, Arial, "serifenlos";
}
.main-header {
Anzeige: Flex;
Hintergrund: schwarz;
Polsterung: 20px;
}
.site-logo {
Breite: 30 %;
Farbe weiß;
Schriftdicke: fett;
Texttransformation: Großbuchstaben;
}
.Hauptmenü {
Breite: 70 %;
Textausrichtung: rechts;
}
.Hauptmenüa {
Polsterung: 10px;
Textdekoration: keine;
Farbe weiß;
}
.Hauptinhalt {
Höhe: 100vh;
Polsterung: 20px;
Hintergrundgröße: Cover;
}
.Hauptinhalth1 {
Farbe weiß;
Schriftgröße: 10rem;
Texttransformation: Großbuchstaben;
}
#Löwe {
Hintergrundbild: url("Images/largelion.png");
}
#Tiger {
Hintergrundbild: url("Bilder/tiger.png");
}
#Jaguar {
Hintergrundbild: url("Bilder/jaguar.png");
}
#Hauskatze {
Hintergrundbild: url("Bilder/Hauskatze.png");
}
#allcats {
Hintergrundbild: url("Bilder/loadsofcats.png");
}Dieses CSS ist auch Teil des fertigen Projekts. Wie bei dem HTML, das wir behandelt haben, können Sie mit diesem Code spielen, um diese Website zu Ihrer eigenen zu machen.
Erstellen von Websites mit Adobe Dreamweaver
Dreamweaver scheint nicht so einfach zu bedienen zu sein wie Tools wie WordPress oder Squarespace, aber es gibt Ihnen viel mehr Leistung. Dieser Leitfaden ist ein großartiger Ausgangspunkt, aber es gibt noch viel mehr zu lernen, und es lohnt sich, Dreamweaver selbst zu erkunden.