Einführung in HTML und CSS für Designer

Eine Einführung in HTML und CSS für Designer.

Als Grafikdesigner sind Sie sich wahrscheinlich der sich ständig weiterentwickelnden Beziehung zwischen Design und Technologie bewusst. Dies gilt insbesondere für diejenigen, die sich mit Webdesign befassen. In dieser Branche müssen wir ein grundlegendes Verständnis dafür haben, wie unsere sorgfältig gestalteten Layouts zu lebendigen Webseiten werden. Wenn wir die Grundlagen dieses Prozesses (und seine Einschränkungen) verstehen, können wir präzise mit Entwicklern kommunizieren und etwas erstellen Websites mit perfekt Pixel.

Das bedeutet nicht, dass Sie wissen müssen, wie man eine Website von Grund auf programmiert (obwohl das großartig wäre!), sondern nur, dass Sie die Grundlagen verstehen müssen. In diesem Beitrag beginnen wir mit einer sehr grundlegenden Einführung in HTML. Sie erfahren, wie Sie Webdesigns in Photoshop zerschneiden und HTML mit CSS formatieren. Einführung in HTML und CSS für Designer

Was ist HTML?

Fast alles, was Sie beim Surfen im Internet sehen, ist ein HTML-Dokument (Hypertext Markup Language). Hypertext ist Text, der andere Texte auf Ihrem Bildschirm referenziert und referenziert, sodass Sie mit einem einfachen Klick auf den Inhalt zugreifen können. Auszeichnungssprache ist eine Reihe von Tags, die in eckige Klammern <> eingeschlossen sind. Diese HTML-Tags kommen normalerweise paarweise vor:

<Start-Tag> : Auch als Eröffnungs-Tag bekannt.
: wird auch als schließendes Tag bezeichnet und enthält einen Schrägstrich /

Wenn Sie Inhalte zwischen diesen beiden Tags einschließen, wird das Ganze aufgerufen Element :

Das ist ein Absatz

Wenn diese Sprache ins Internet übersetzt wird, sehen die Zuschauer die Tags nicht, sondern nur den Inhalt zwischen ihnen.

HTML 5, die aktuelle Version von HTML, enthält etwa 100 Tags mit Attributen, die ihre Funktion oder ihr Aussehen ändern. Sie müssen nur 30–40 dieser Tags kennen, um HTML zu verstehen und zu erstellen. Schauen Sie sie sich an und beachten Sie, wie sie nach Funktion gruppiert sind. Sehen wir uns das in Aktion an.

Bilder in Photoshop ausschneiden.

Einführung in HTML und CSS für Designer

Vor dem Codieren müssen wir entscheiden, welche Bereiche der Website Bilder enthalten sollen und welche codiert werden können. Nutzen wir den Vorteil ein Werkzeug Photoshop Slice (versteckt im Untermenü Freistellungswerkzeug ) und markieren Sie Bereiche wie ein Foto eines Burritos und Taco Joan .

Jetzt müssen wir unsere Snippets exportieren – wählen Sie „Datei“ > „Für Web speichern“ (Alt + Umschalt + Strg + S). Wenn ein bestimmtes Snippet ausgewählt ist, können Sie seine Exportoptionen auf der rechten Seite des Fensters festlegen (JPG, PNG usw.). Wenn Sie auf ein bestimmtes Fragment doppelklicken, wird ein Popup-Fenster angezeigt. Fragmentparameter“ - Dadurch können Sie bestimmte Fragmentdateien benennen.

Standardmäßig werden alle Bilder im Unterverzeichnis /images/ abgelegt. Wenn Sie nur die von Ihnen erstellten Snippets exportieren möchten, wählen Sie „ Alle benutzerdefinierten Fragmente“ im Fenster „Speichern“. Einführung in HTML und CSS für Designer

Erstellen eines einfachen HTML-Dokuments

Wir haben unsere Slicer, erstellen wir ein einfaches HTML-Dokument. Einführung in HTML und CSS für Designer

Linie 1 : Deklariert, dass der HTML 5-Dialekt die Sprache des Dokuments ist.

Linie 2 : Element stellt den Stamm eines HTML-Dokuments dar. Dies ist ein obligatorischer Container, der die Grenzen unseres Dokuments angibt.

3 : Kapitel enthält unsichtbare Seitenelemente wie Metainformationen, Titel usw.

Linie 4 : Dies ist die Dokumentkodierungsdeklaration − UTF-8 - sichere Wahl - Sie können mehr über HTML-Zeichenkodierungen lesen hier .

Linie 5 : Beispielseite Dies ist der Seitentitel, der in der Titelleiste des Browsers angezeigt wird.

6 : schließt das Tag ab Zeile 3.

Linie 7 : Dieses Body-Element enthält den gesamten sichtbaren Inhalt der Seite.

Linie 8 : schließt das Tag ab Zeile 2. Dieses Element markiert das Ende des Dokuments. Einführung in HTML und CSS für Designer

Es gibt andere Möglichkeiten, dasselbe Design zu codieren. Wir werden semantische HTML 5-Tags (Kopfzeile, Navigation, Artikel, Fußzeile) verwenden, um die Grundstruktur des Dokuments zu erstellen:

Dies ist das in HTML übersetzte Layout:

Ein paar Anmerkungen:

Zeilen 11 und 12 : Elemente sind die Essenz des Internets, da sie zur Erstellung verwendet werden Hyperlinks . Sie sind an das HREF-Attribut gebunden und müssen das Ziel binden URL .

Zeilen 18–20 : Dies sind einige Textformatierungs-Tags: bezeichnet eine Überschrift der ersten Ebene; bezeichnet einen Absatz; bedeutet Zeilenumbruch.

Formatierung mit Cascading Style Sheets (CSS).

Einführung in HTML und CSS für Designer

Wenn Sie nur die HTML-Datei in einem Webbrowser öffnen, werden Sie feststellen, dass sie nicht wie unser vorheriges Design formatiert ist. Das liegt daran, dass HTML-Code nicht ausreicht – wir müssen ihn formatieren Cascading Style Sheets (CSS) . CSS ist eine Stylesheet-Sprache, die zur Formatierung von HTML-Elementen verwendet wird.

Aber warum genau müssen wir HTML mit CCS kombinieren? Vor einiger Zeit wurde die Formatierung durch das Hinzufügen von Attributen zu HTML-Tags erreicht. Dies führte jedoch zu unlesbarem und nicht wartbarem Code. Die Lösung bestand darin, den Dokumentinhalt (HTML) von der Dokumentformatierung (CSS) zu trennen.

Lassen Sie uns einfach aufschlüsseln CSS-Regel :.

Wähler : Dies ist das HTML-Element, das Sie formatieren möchten. Beispiel: <Artikel>

Anzeige : Eine CSS-Regel kann eine oder mehrere Deklarationen haben. Jede Deklaration besteht aus einer Eigenschaft und einem Wert und wird durch ein Semikolon getrennt. Deklarationen setzen Sie in geschweifte Klammern {}. Einführung in HTML und CSS für Designer

Immobilien : Das Stilmerkmal, was Sie ändern möchten. Zum Beispiel: Hintergrundfarbe, Größe Schriftart usw.

Wert : Jeder Eigenschaft ist ein Wert zugeordnet. Zum Beispiel: #ffcc11 (für Hintergrundfarbe), 16px (für Schriftgröße) usw.

Es gibt viele CSS-Eigenschaften, die für jedes HTML-Element festgelegt werden können, es ist jedoch nicht erforderlich, sie alle selbst zu schreiben. Sie können sich auf die Standardeinstellungen Ihres Browsers verlassen oder ein einfaches Stylesheet verwenden, das Ihren Browser auf angemessene Einstellungen zurücksetzt. Tatsächlich, um Selektoren schreiben Es erfordert viel Wissen und Erfahrung, es selbst zu tun.

Schauen wir uns einige CSS-Regeln an, die zum Formatieren unseres einfachen Designs erforderlich sind.

CSS-Positionierungseigenschaften : existiert 4 verschiedene Methoden (statisch, fest, relativ und absolut), die es uns ermöglichen, bestimmte Elemente in unserem Design zu positionieren. Nachdem Sie eine dieser Methoden festgelegt haben, können Sie Elemente mithilfe der Eigenschaften „oben“, „rechts“, „unten“ und „links“ positionieren. Die Funktionsweise hängt davon ab, welche der vier Methoden Sie verwenden. In diesem Fall möchten wir uns positionieren Plate_image, mit absolut Positionierung.

CSS-Box-Modell : dieses Model ist ein Rahmen, der alle HTML-Elemente einschließt, einschließlich Ränder, Rahmen, Abstand und Inhalt. Der Rand ist der unsichtbare Bereich um den Rand und der Abstand zwischen Rand und Inhalt.

Wenn Sie WIRKLICH mehr über das Codieren erfahren möchten, Schau mal zu dieser coolen Seite: Codecademy .