Wenn Sie neu in Webdesign und Frontend-Entwicklung (HTML, CSS, Javascript) sind, können Sie mit a WYSIWYG Editor. Dieses Akronym steht für "What you see is what you get" und bezieht sich im Wesentlichen auf Software, die es Ihnen ermöglicht, Erstellen Sie eine Webseite mit visuellen Tools, während die Software hinter den Kulissen Code schreibt, basierend auf Ihrer Identität Erstellen. Das beliebteste verfügbare WYSIWYG-Tool ist wohl Adobes Dreamweaver.
Eine gute Option für diejenigen, die gerade erst anfangen
Während viele erfahrene Webprofis mit mehr verfeinerte Fähigkeiten Schauen Sie auf Dreamweaver und seine Tendenz herab, aufgeblähtes HTML-Markup zu produzieren und CSS-Stile, die einfache Wahrheit ist, dass die Plattform eine gute Option für diejenigen ist, die gerade erst mit dem Website-Design beginnen. Wenn Sie mit der Verwendung der Option "Entwurfsansicht" von Dreamweaver zum Erstellen einer Webseite beginnen, werden Sie sich wahrscheinlich fragen, wie Sie einen einzelnen Zeilenumbruch für den Inhalt in dieser Ansicht erstellen.
Wenn Sie einer Webseite HTML-Text hinzufügen, zeigt der Webbrowser diesen Text als lange Linie an, bis er den Rand des Browserfensters oder dessen Containerelement erreicht. An diesem Punkt wird der Text in die nächste Zeile umgebrochen. Dies ist vergleichbar mit dem, was in jeder Textverarbeitungssoftware wie Microsoft Word oder Google Docs passiert. Wenn eine Textzeile keinen Platz mehr auf einer horizontalen Zeile hat, wird sie umgebrochen, um eine weitere Zeile zu beginnen. Was passiert also, wenn Sie vorgeben möchten, wo eine Zeile umbricht?
Wenn Sie in der Designansicht von Dreamweaver die EINGABETASTE drücken
Wenn du triffst EINGEBEN in der Entwurfsansicht von Dreamweaver wird der aktuelle Absatz geschlossen und ein neuer Absatz beginnt. Optisch bedeutet dies, dass diese beiden Zeilen mit etwas vertikalem Abstand voneinander getrennt sind. Dies liegt daran, dass standardmäßig HTML Absätze haben Auffüllung oder Ränder (welcher hängt vom Browser selbst ab) am unteren Rand des Absatzes angewendet, der diesen Abstand hinzufügt.
Dies kann mit CSS angepasst werden, aber die Wahrheit ist, dass Sie Abstände zwischen den Absätzen haben möchten, um die Lesbarkeit der Website zu ermöglichen. Wenn Sie eine einzelne Zeile und keinen großen vertikalen Zeilenabstand wünschen, sollten Sie die EINGABETASTE nicht verwenden, da diese Zeilen keine einzelnen Absätze sein sollen.
Wenn kein neuer Absatz beginnen soll a
Für diese Zeiten, in denen kein neuer Absatz beginnen soll, fügen Sie das
Tag in HTML. Dies wird manchmal auch geschrieben als
. speziell für Versionen von XHTML, bei denen alle Elemente geschlossen werden mussten. Das nachgestellte / in dieser Syntax schließt das Element selbst, da das
-Tag hat kein eigenes schließendes Tag. Das ist schön und gut, aber Sie arbeiten in Dreamweaver in der Entwurfsansicht. Möglicherweise möchten Sie nicht in den Code springen und diese Umbrüche hinzufügen. Das ist in Ordnung, denn Sie können in Dreamweaver tatsächlich einen Zeilenumbruch hinzufügen, ohne auf die Codeansicht zurückgreifen zu müssen.
Fügen Sie in der Designansicht von Dreamweaver einen Zeilenumbruch hinzu:
- Platzieren Sie den Cursor an der Stelle, an der die neue Zeile beginnen soll.
- Halten Sie die shift Taste und drücke Eingeben.
Das ist es! Das einfache Hinzufügen der "Shift"-Taste zusammen mit der [ENTER] fügt a
anstelle eines neuen Absatzes. Nun, da Sie wissen, wie dies ist, sollten Sie überlegen, wo Sie es verwenden und wo Sie es vermeiden können. Merken, HTML soll die Struktur einer Site erstellen, nicht das visuelle Erscheinungsbild. Sie sollten nicht mehrere verwenden
Tags, um vertikale Abstände unter Elementen in Ihrem Design zu erstellen.
Dafür gibt es die CSS-Eigenschaften für Padding und Margins. Wo würden Sie a. verwenden
tag ist, wenn Sie nur den einzelnen Zeilenumbruch benötigen. Wenn Sie beispielsweise eine Postanschrift codieren und sich für die Verwendung eines Absatzes entschieden haben, können Sie Folgendes hinzufügen:
Tags wie diese:
Name der Firma
Adresszeile
Stadt, Staat, PLZ.
Dieser Code für die Adresse ist ein einzelner Absatz, aber visuell würde er die drei Zeilen in einzelnen Zeilen mit einem kleinen Abstand dazwischen anzeigen.