CSS : formulaires et galeries d'images

Name: CSS : formulaires et galeries d'images
Author: Cliff Brozo

Comment optimiser l'intérêt des utilisateurs et la facilité d'utilisation.

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

Cours : à la demande

(musique entraînante) Bienvenue de nouveau au cours de KnowledgeCity sur les feuilles de style en cascade. Je suis Cliff Brozo, je suis votre professeur. Aujourd'hui, nous allons regarder les formulaires et comment appliquer des styles CSS pour un tas de choses que vous trouvez dans votre forme moyenne. Tout d'abord, nous allons examiner la saisie de texte standard. Maintenant, ça pourrait être une boîte ordinaire, ou il pourrait être stylisé avec des effets 3D. Nous examinerons les listes déroulantes, où, encore une fois, ça pourrait être une simple liste d'articles ou il pourrait être stylisé. Nous allons essayer de mettre un calendrier sur notre écran, et comment nous pouvons styliser les calendriers pour les rendre beaucoup plus jolis. Nous ferons quelque chose de différent avec votre case à cocher moyenne, peut-être le transformer en étoiles au lieu de boîtes. Nous examinerons ce qui se passe lorsque vous survolez un élément, comment il peut changer les couleurs, et nous traiterons du facteur d'opacité. Nous examinerons certaines fonctionnalités de l'interface utilisateur, où si je survole un élément, il peut s'agrandir. Cela pourrait changer de couleur. Cela pourrait me donner des informations, ou il pourrait même ne pas me laisser taper quoi que ce soit. Enfin, nous examinerons un design réactif, où nous examinons quel appareil regarde notre page et agissez en conséquence. Je peux le faire avec plusieurs feuilles de style, ou je peux le faire avec une requête d'écran multimédia, et modifiez ce que vous voyez en fonction de la largeur de votre appareil. Jetons un coup d'œil à ces formulaires. Comme nous l'avons fait dans le passé, Atom est notre logiciel de conception de choix, et ce que vous voyez est une forme stylisée mettant en vedette certaines des choses que nous venons de regarder. Le HTML a un lien vers ma page CSS Forms. Je n'ai qu'un, un petit logo, et évidemment vous vous souvenez de vos connaissances HTML que les formulaires nécessitent une sorte d'action pour que quelque chose arrive aux données une fois qu'elles ont été saisies. J'ai créé un tableau pour aligner tous mes articles et leur donner un aspect plus ordonné, et pour chacune des données du tableau, J'ai appliqué une classe appelée plus grande. Et ce que cela fait, c'est lorsque vous survolez un élément, J'ai cet article grandir un peu, et j'ai appliqué cette classe appelée plus grand sur chaque cellule du tableau. Descendons notre HTML. Pour entrer dans les états, nous avons une zone de liste déroulante, qui a tous les états à sa disposition. Lorsque je clique sur l'article, tous les états sont répertoriés avec une barre de défilement. Ceux-ci sont facilement disponibles sur le Web, pour que vous n'ayez pas à faire toute cette saisie. Il est particulièrement utile si vous insérez des codes de pays. En descendant notre liste d'éléments de formulaire, J'ai une fonction de date, où je peux sélectionner une date. Lorsque j'appelle sur le calendrier, les éléments apparaissent, mais vous remarquerez qu'il y a un cercle rouge sur l'écran, et ça me dit que je ne suis pas autorisé pour taper là-dedans. J'ai le même article pour l'État. Je ne veux pas que les gens tapent dans cette zone, et nous verrons comment nous pouvons contrôler cela dans notre code CSS. Le calendrier actuel est directement intégré au HTML. J'ai des cases à cocher normales pour un type d'animal que vous préférez, et un bouton d'envoi qui grandirait quand vous le survolez. En descendant la page, J'ai une zone où vous pouvez taper quelques commentaires, et vos commentaires sont stockés dans cette zone de texte, ainsi que des barres de défilement qui vous permettent pour se déplacer à gauche et à droite ainsi que de haut en bas. Une manière différente de demander aux gens leur avis c'est choisir les étoiles. J'adore cette classe. Oui, ça va, j'aime ça, et j'espère que vous choisirez C'est génial. Et tout ce que j'ai fait est en CSS, J'ai changé les étoiles qui apparaissent. L'un des problèmes que j'utilise est l'opacité, où quand je survole un bouton, et j'ai fait ce bouton vraiment gros, la couleur passe à un vert plus foncé. Enfin, autour d'un bouton, et j'aurais pu mettre ça autour de n'importe lequel des objets, J'ai des ombres, ce que nous avons fait dans le passé.

Intermédiaire Fournisseur : Cliff Brozo 4 leçons · 25m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Dans ce cours, vous apprendrez à créer des formulaires et à les styliser pour susciter l'intérêt des utilisateurs et faciliter leur utilisation. Vous examinerez également différentes barres de progression et comment les curseurs peuvent montrer aux utilisateurs où ils se trouvent sur une page. Vous apprendrez également à créer une galerie d'images pour afficher des photographies dans un format visuellement attrayant pour les utilisateurs, qu'ils soient sur un ordinateur de bureau, une tablette ou un téléphone. Enfin, vous verrez comment effectuer des ajustements dans CSS sans apporter de modifications à votre site Web.

Ce que vous allez apprendre

Créer et styliser des formulaires CSS pour susciter l'intérêt de l'utilisateur et faciliter leur utilisation
Concevoir des formulaires en prêtant attention à l'accessibilité pour l'utilisateur
Créer des galeries d'images affichant des photographies sur ordinateur, tablette et téléphone
Utiliser des curseurs (sliders) et des barres de progression pour indiquer aux utilisateurs où ils se trouvent sur une page
Comprendre les composants visuels du CSS
Effectuer des ajustements en CSS sans modifier votre site web

Points clés à retenir

Le CSS peut être utilisé pour créer et styliser des formulaires qui suscitent l'intérêt des utilisateurs et sont faciles à utiliser.
Différentes barres de progression et des curseurs (sliders) peuvent indiquer aux utilisateurs où ils se trouvent sur une page.
Les galeries d'images peuvent afficher des photographies dans un format visuellement attrayant sur ordinateur, tablette et téléphone.
Le CSS vous permet d'effectuer des ajustements sans apporter de modifications à votre site web.

Foire aux questions

Que vais-je apprendre dans ce cours ?

Vous apprendrez à créer et à styliser des formulaires pour susciter l'intérêt de l'utilisateur et en faciliter l'utilisation, à examiner les barres de progression et les curseurs (sliders) indiquant aux utilisateurs où ils se trouvent sur une page, à créer des galeries d'images pour afficher des photos sur ordinateur, tablette ou téléphone, et à effectuer des ajustements en CSS sans modifier votre site web.

Quels sujets ce cours couvre-t-il ?

Le cours couvre les formulaires dans deux leçons (Formulaires Partie 1 et Formulaires Partie 2) et les galeries d'images dans deux leçons (Galeries d'images Partie 1 et Galeries d'images Partie 2).

Quelles compétences ce cours m'aide-t-il à développer ?

Ce cours développe des compétences en codes CSS, frameworks CSS, conception de format web (Design Web Format), mise en page de formulaires, CSS orienté objet et conception d'interface utilisateur web (Web UI Design).

Les galeries d'images fonctionneront-elles sur différents appareils ?

Oui. Vous apprendrez à créer une galerie d'images qui affiche les photographies dans un format visuellement attrayant, que les utilisateurs soient sur un ordinateur de bureau, une tablette ou un téléphone.