Grundlagen der Inhaltsgestaltung – Kurs 3.900 RUB. von Hexlet, Training 18 Stunden, Datum: 1. Dezember 2023.
Verschiedenes / / December 04, 2023
Heutzutage bieten Stylesheets großartige Möglichkeiten zur Gestaltung von Text und Blöcken auf einer Seite: Hintergrund, Farbe, Verwendung von Audio und Video. Mit all diesen Elementen können Sie farbenfrohe und für Benutzer zugängliche Websites erstellen. Es wurde viel Zeit damit verbracht, neue Selektoren, Pseudoklassen und Pseudoelemente zu lernen. Sie ermöglichen es Ihnen, Inhalte auf außergewöhnliche Weise zu stilisieren.
Tests
Dabei handelt es sich um praktische Aufgaben, deren Bearbeitung wir nach Abschluss des Kurses empfehlen. Die Aufgaben helfen Ihnen dabei, zusätzliche Erfahrungen im Programmieren zu sammeln und Ihre erworbenen Fähigkeiten zu festigen. Normalerweise empfehlen wir die Durchführung von 3-5 Tests. Aber wenn es nicht klappt, verzweifeln Sie nicht. Kommen Sie einfach später noch einmal auf sie zurück.
1. Einführung
Die Arbeit mit Inhalten ist ein grundlegender Bestandteil beim Erstellen eines Projekts. Hinter wunderschönen Animationen, Blöcken und Bildern verbergen sich Inhalte. Der Benutzer kommt auf die Website oder öffnet eine Anwendung dafür. In dieser Lektion werfen wir einen kurzen Blick auf die Themen, die im Laufe des Kurses behandelt werden.
Theorie
2. Boxmodell und CSS
Welche CSS-Eigenschaften beeinflussen die Größe von Elementen, wenn sie auf der Seite angezeigt werden? Erinnern wir uns an das Konzept des Box-Modells und untersuchen wir, wie die Eigenschaften „margin“, „padding“ und „border“ funktionieren, um den externen/internen Abstand und die sichtbaren Ränder eines Elements festzulegen. Machen wir uns mit der Box-Sizing-Eigenschaft vertraut, die das Standardverhalten des Box-Modells ändert
Theorie
3. Textstile
Beim Erstellen einer Seite geht es zunächst einmal darum, mit Text zu arbeiten. So schön das Design auch ist: Wenn die Informationen schwer oder gar nicht lesbar sind, verlässt der Nutzer die Seite schnell. In dieser Lektion machen wir uns mit den grundlegenden Eigenschaften des Textstils vertraut.
Theorie
Tests
Übung
4. Schriftarten und die Arbeit mit ihnen
Haben Sie den Satz „mit Schriftarten herumspielen“ gehört? Es ist Zeit, dies zu tun. Wir lernen, Schriftarten mithilfe von CSS zu verbinden, Textgröße und Design zu steuern und den Zeilenabstand festzulegen. Am Ende der Lektion beschäftigen wir uns mit der verallgemeinerten Schriftarteigenschaft, mit der Sie 6 verschiedene Textstile gleichzeitig festlegen können
Theorie
Tests
Übung
5. Listen
Listen sind ein integraler Bestandteil des Textes. Sie ermöglichen es Ihnen, verwandte Fragmente zu gruppieren und sie entsprechend ihrer Bedeutung zu vereinen. In dieser Lektion erkunden wir die verfügbaren Listentypen in HTML, üben das Verschachteln von Listen und gehen auf das Thema der Gestaltung von Listenmarkierungen ein
Theorie
Tests
Übung
6. Säulen
Das Erstellen eines mehrspaltigen Zeitschriftenlayouts war mit CSS problematisch. Mit dem Aufkommen des CSS3-Standards erschien ein neues Modul – CSS Multi-column Layout, das die Erstellung von Spalten mit automatischer Inhaltsübertragung ermöglichte. Schauen wir uns die Möglichkeiten des CSS-Moduls „Spalten“ und die Einschränkungen an, die mit dieser Methode der Textgestaltung einhergehen
Theorie
Tests
Übung
7. Einheiten
Genau wie in der realen Welt werden in der Layoutwelt Maßeinheiten verwendet, um Elementgrößen, Abstände, Textgröße usw. anzugeben. In dieser Lektion machen wir uns mit den grundlegenden Maßeinheiten und ihrer Beziehung zu Elementen auf der Website vertraut. Lassen Sie uns das Konzept der relativen und absoluten Einheiten untersuchen und den Unterschied zwischen em- und rem-Einheiten identifizieren
Theorie
Tests
Übung
8. Medienelemente
Website-Besucher lesen nicht nur gerne Texte, sondern nehmen Informationen auch über Medienelemente wahr: Bilder, Video, Audio. Wie füge ich sie richtig hinzu und berücksichtige Browserunterschiede? Warum hat das Bild auf der Website unten eine kleine Einkerbung? Lassen Sie uns dies und etwas mehr in der Lektion untersuchen.
Theorie
Tests
Übung
9. Tische
Tabellen sind der Albtraum eines Layouters. Bei der Erstellung werden viele Tags verwendet und kleine Fehler können die Stimmung ruinieren. In dieser Lektion lernen wir Schritt für Schritt die Erstellung einfacher und komplexer Tabellen kennen, verstehen, wo Fehler entstehen können und wie man sie verhindert. Am Ende der Lektion werden Sie in der Lage sein, selbstbewusst Tabellen zu erstellen und keine Angst mehr davor zu haben.
Theorie
Tests
Übung
10. Formen
Formulare sind ein wichtiges interaktives Element einer Webseite. Wie Links ermöglichen Formulare die Interaktion zwischen dem Benutzer und der Seite und ermöglichen Ihnen die Übermittlung von Daten. Erfahren Sie, wie Sie Formulare erstellen, Textfelder, Auswahlfelder, Listen und Schaltflächen hinzufügen. Kommen wir zum Thema Zugänglichkeit von Formularen für Menschen mit Behinderungen
Theorie
Tests
Übung
11. Selektoren
In dieser Lektion haben wir einfache Selektoren gelernt und getestet, mit denen wir Elemente nach Klasse, Bezeichner oder Tag auswählen können. Wie sonst kann man ein Element auf der Seite auswählen? In dieser Lektion analysieren wir verwandte und benachbarte Selektoren und lernen, wie man Selektoren nach Attributen verwendet
Theorie
Tests
Übung
12. Pseudoklassen
Lassen Sie uns das Thema Selektoren in CSS fortsetzen und uns mit dem Konzept einer Pseudoklasse vertraut machen. Erfahren Sie, wie Sie damit gerade oder ungerade Elemente auswählen und neue Hover-Stile hinzufügen Maus auf ein Element und warum gerade Elemente so aussehen, wenn nur ein bestimmtes verwendet wird Pseudoklasse. Lassen Sie uns Elementzustände und strukturelle Pseudoklassen verstehen
Theorie
Tests
Übung
13. Pseudoelemente
Fehlen Elemente auf der Seite? Zur Rettung kommen Pseudoelemente – mit CSS erstellte Elemente. In dieser Lektion schauen wir uns an, wie Pseudoelemente erstellt werden, warum sie benötigt werden und welche Funktionen sie haben. Sehen wir uns an, wie Listenmarkierungen in CSS gestaltet werden
Theorie
Tests
14. Überlauf
Bei einem Überlauf handelt es sich um eine Situation, in der der Inhalt eines Behälters größer ist als der Behälter selbst. Diese Situation kann selbst für einen erfahrenen Layouter das Layout ruinieren. In dieser Lektion erfahren Sie, was damit zu tun ist und wie Sie das Ausblenden von Inhalten mithilfe der Overflow-Eigenschaft verwalten. Schauen wir uns die Eigenschaft text-overflow an und erfahren Sie, wie Sie Auslassungspunkte in Texte einfügen, wenn nicht genügend Platz dafür vorhanden ist
Theorie
Tests
Übung
15. CSS-Variablen
Stellen Sie sich vor, dass es auf einer Website ein Dutzend Blöcke mit einem Hintergrund derselben Farbe gibt. Sie müssen alle diese Farben ändern. Wie das geht, ohne ständig die Farbe in jedem Selektor zu ersetzen, und wie Variablen dabei helfen können, erfahren Sie in dieser Lektion. Schauen wir uns an, wie Variablen erstellt und verwendet werden, erfahren Sie mehr über den Umfang und warum globale Variablen besser sind als Variablen pro Selektor
Theorie
Tests
16. Hintergrund
Ein Layoutdesigner steht häufig vor der Notwendigkeit, nicht nur bestimmte Elemente wie Tabellen, Listen, Text, Medienelemente und Formulare zu gestalten. Manchmal müssen Sie auch die Blöcke, in denen sie sich befinden, stilisieren. Dazu können Sie den Hintergrund für den Block mit Inhalt festlegen. Wie das geht, erfahren Sie in dieser Lektion mithilfe der Eigenschaft „Hintergrund“. Lassen Sie uns die Eigenschaften zum Festlegen von Farbe und Bild untersuchen und lernen, wie Sie den Hintergrund positionieren und seine Größe festlegen
Theorie
Tests
17. Farbverläufe
Ein einfarbiger Hintergrund oder ein einfarbiges Bild ist nicht die einzige Möglichkeit, einen Block zu gestalten. Künstler und Designer verwenden häufig Farbverläufe, um Hintergründe zu erstellen – sanfte Übergänge von einer Farbe zur anderen. In diesem Tutorial lernen wir, wie man lineare und radiale Farbverläufe erstellt. Mithilfe von Farbverläufen und Tricks untersuchen wir die Schaffung scharfer Übergänge zwischen Farben und lernen außerdem den Farbkreis kennen und wie man mit seiner Hilfe Farbkombinationen für Farbverläufe findet
Theorie
Übung
18. Selbstständige Arbeit
Zusätzliche Aufgaben, die es Ihnen ermöglichen, die erworbene Theorie zu festigen
19. Zusätzliche Materialien
Vom Hexlet-Team kuratierte Artikel und Videos. Wird Ihnen helfen, tiefer in das Thema des Kurses einzutauchen