CSS: Formulare und Bildergalerien

Name: CSS: Formulare und Bildergalerien
Author: Cliff Brozo

Wie Sie das Interesse der Benutzer und die Benutzerfreundlichkeit maximieren.

Preview the first lesson free — get full access to all 4 lessons.

Kurs: On-Demand

(flotte Musik) Willkommen zurück zum Kurs von KnowledgeCity auf Cascading Style Sheets. Ich bin Cliff Brozo, ich bin Ihr Professor. Heute werden wir uns Formulare ansehen und wie man CSS-Stile für eine ganze Reihe von Dingen anwendet dass Sie in Ihrer durchschnittlichen Form finden. Zuerst betrachten wir die Standardtexteingabe. Jetzt könnte es eine normale Box sein, oder es könnte mit einigen 3D-Effekten stilisiert werden. Wir werden in Dropdown-Listenfelder schauen, wo noch einmal Es könnte sich um eine direkte Liste von Elementen handeln oder es könnte stilisiert werden. Wir werden versuchen, einen Kalender auf unseren Bildschirm zu bringen. und wie wir die Kalender stilisieren können damit sie viel schöner aussehen. Wir machen etwas anderes mit Ihrem durchschnittlichen Kontrollkästchen. Vielleicht verwandeln Sie es in Sterne statt in Kisten. Wir werden untersuchen, was passiert, wenn Sie mit der Maus über einen Gegenstand fahren. wie es Farben ändern kann, und wir werden uns mit dem Opazitätsfaktor befassen. Wir werden uns einige Funktionen der Benutzeroberfläche ansehen. Wenn ich über einen Gegenstand schwebe, wird er möglicherweise größer. Es könnte die Farbe ändern. Es könnte mir einige Informationen geben, oder es lässt mich sogar nichts eingeben. Schließlich werden wir uns ein ansprechendes Design ansehen. wo wir untersuchen, welches Gerät auf unserer Seite schaut und entsprechend handeln. Ich kann das mit mehreren Stylesheets machen, oder ich kann es mit einer Medienbildschirmabfrage tun, und ändern Sie das, was Sie sehen, basierend auf der Breite Ihres Geräts. Schauen wir uns diese Formulare an. Wie wir es in der Vergangenheit getan haben, Atom ist unsere Design-Software der Wahl. und was Sie sehen, ist eine stilisierte Form mit einigen der Dinge, die wir gerade angeschaut haben. Der HTML-Code enthält einen Link zu meiner Forms-CSS-Seite. Ich habe nur ein kleines Logo. und offensichtlich erinnern Sie sich an Ihre HTML-Kenntnisse Diese Formen brauchen irgendeine Aktion um etwas mit den Daten geschehen zu lassen, sobald sie eingegeben wurden. Ich habe eine Tabelle erstellt, in der alle meine Elemente angeordnet sind und sie ordentlicher aussehen lassen, und für jede der Tabellendaten Ich habe eine Klasse namens größer angewendet. Und wenn Sie mit der Maus über einen Gegenstand fahren, Ich habe diesen Gegenstand ein bisschen wachsen lassen, und ich habe diese Klasse angewendet, die größer genannt wird auf jeder einzelnen Tabellenzelle. Lassen Sie uns unseren HTML-Code nach unten verschieben. Um Staaten einzugeben, haben wir ein Dropdown-Listenfeld, das hat jeden Staat zur Verfügung. Wenn ich auf den Artikel klicke, Alle Zustände werden zusammen mit einer Bildlaufleiste aufgelistet. Diese sind im Internet leicht verfügbar, Sie müssen also nicht alles tippen. Es ist besonders praktisch wenn Sie Ländercodes eingeben. Wenn Sie unsere Liste der Formularelemente nach unten verschieben, Ich habe eine Datumsfunktion, wo ich ein Datum auswählen kann. Wenn ich im Kalender anrufe, werden die Elemente angezeigt. Sie werden jedoch feststellen, dass auf dem Bildschirm ein roter Kreis angezeigt wird. und das sagt mir, dass ich nicht erlaubt bin in das tippen. Ich habe den gleichen Artikel für State. Ich möchte nicht, dass Leute in diesem Bereich tippen. und wir werden sehen, wie wir das in unserem CSS-Code steuern können. Der eigentliche Kalender ist direkt in HTML integriert. Ich habe normale Kontrollkästchen für eine Tierart dass Sie bevorzugen, und eine Schaltfläche zum Senden, die wachsen würde wenn du darüber schwebst. Die Seite nach unten bewegen, Ich habe einen Bereich, in dem Sie einige Kommentare eingeben können. und Ihre Kommentare werden in diesem Textbereich gespeichert. zusammen mit Bildlaufleisten, die Ihnen ermöglicht nach links und rechts sowie nach oben und unten bewegen. Eine andere Art, Leute um Input zu bitten ist Sterne zu wählen. Ich liebe diese Klasse. Ja, es ist okay, ich mag es, und hoffentlich wirst du wählen Es ist fantastisch. Und alles, was ich getan habe, ist in CSS, Ich habe die Sterne geändert, die erscheinen. Eines der Probleme, die ich benutze, ist die Deckkraft. wo, wenn ich über einen Knopf schwebe, und ich habe diesen Knopf wirklich groß gemacht, Die Farbe ändert sich zu einem dunkleren Grün. Schließlich um einen Knopf, und ich hätte dies um jedes der Objekte legen können, Ich habe einige Schatten, die wir in der Vergangenheit gemacht haben.

Mittelstufe Anbieter : Cliff Brozo 4 Lektionen · 25m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

In diesem Kurs lernen Sie, Formulare zu erstellen und sie so zu gestalten, dass sie für den Benutzer interessant und einfach zu bedienen sind. Sie werden auch verschiedene Fortschrittsbalken untersuchen und wie Schieberegler dem Benutzer zeigen können, wo er sich auf einer Seite befindet. Sie werden auch lernen, wie Sie eine Bildergalerie erstellen, um Fotos in einem visuell ansprechenden Format für Benutzer anzuzeigen, egal ob sie sich auf einem Desktop, Tablet oder Telefon befinden. Schließlich sehen Sie, wie Sie Anpassungen in CSS vornehmen können, ohne Änderungen an Ihrer Website vorzunehmen.

Was Sie lernen werden

Erstellen und gestalten Sie CSS-Formulare für Benutzerinteresse und Benutzerfreundlichkeit
Gestalten Sie Formulare mit Aufmerksamkeit auf Benutzerbarkeit
Bauen Sie Bildergalerien auf, die Fotos auf Desktop, Tablet und Handy anzeigen
Nutzen Sie Schieberegler und Fortschrittsbalken, um Benutzern zu zeigen, wo sie sich auf einer Seite befinden
Verstehen Sie die visuellen Komponenten von CSS
Nehmen Sie Anpassungen in CSS vor, ohne Ihre Website zu ändern

Wichtige Erkenntnisse

CSS kann verwendet werden, um Formulare zu erstellen und zu gestalten, die Benutzerinteresse und Benutzerfreundlichkeit erzeugen.
Verschiedene Fortschrittsbalken und Schieberegler können Benutzern zeigen, wo sie sich auf einer Seite befinden.
Bildergalerien können Fotos in einem optisch ansprechenden Format auf Desktop, Tablet und Handy anzeigen.
CSS ermöglicht es Ihnen, Anpassungen vorzunehmen, ohne Änderungen an Ihrer Website vorzunehmen.

Häufig gestellte Fragen

Was werde ich in diesem Kurs lernen?

Sie lernen, Formulare für Benutzerinteresse und Benutzerfreundlichkeit zu erstellen und zu gestalten, verschiedene Fortschrittsbalken und Schieberegler zu untersuchen, die Benutzern zeigen, wo sie sich auf einer Seite befinden, Bildergalerien zu erstellen, um Fotos auf Desktop, Tablet oder Handy anzuzeigen, und Anpassungen in CSS vorzunehmen, ohne Ihre Website zu ändern.

Welche Themen werden in diesem Kurs behandelt?

Der Kurs behandelt Formulare in zwei Lektionen (Formulare Teil 1 und Formulare Teil 2) und Bildergalerien in zwei Lektionen (Bildergalerien Teil 1 und Bildergalerien Teil 2).

Welche Fähigkeiten helfen mir dieser Kurs zu entwickeln?

Dieser Kurs entwickelt Fähigkeiten in CSS-Codes, CSS-Frameworks, Design-Webformat, Formular-Layout, objektorientiertes CSS und Web-UI-Design.

Funktionieren die Bildergalerien auf verschiedenen Geräten?

Ja. Sie lernen, eine Bildergalerie zu erstellen, die Fotos in einem optisch ansprechenden Format anzeigt, egal ob Benutzer auf einem Desktop, Tablet oder Handy sind.