Première partie du tutoriel : création d'un menu sur un calque en responsive.
Première chose à comprendre, pour tous les débutants et confirmés. Le responsive dans OE a été introduit sur les dernières bétas et fonctionnent plutôt correctement (même s'il reste quelques petites choses à ajouter comme vous le verrez au fur et à mesure dans ce premier tuto).
Une chose importante à savoir et à faire impérativement pour bien comprendre la suite. Il vous faudra installer soit Chrome soit Firefox.
Pourquoi? Tout simplement parce qu'OE ne dispose pas (encore) d'un mode d'affichage dédié aux différents formats des navigateurs selon les supports (desktop, tablettes et mobiles).
De ce fait donc, il est impératif d'avoir un de ces deux navigateurs pour bien se rendre compte sur quoi l'on travaille.
Pour mon tutoriel, je vais partir sur Chrome. Pour certains "puristes" qui pourraient diaboliser ce navigateur (j'en connais sur le forum...), c'est uniquement parce que par rapport à Firefox, celui-ci permet en plus du choix des résolutions de spécifier le type d'appareil souhaité pour la résolution.
Pour les "nouveaux" sur le forum, en quoi consiste le responsive (le vrai terme est Responsive Web Design) ?
C'est une technique de réalisation de site web, qui peemet de faire les sites qui s'adaptent automatiquement à l'espace disponible sur l'écran.
On se base donc en général sur la largeur de l'écran pour déterminer comment les éléments du site
doivent s'afficher.
Une fois que vous aurez compris ça, la suite va commencer à devenir intéressante.
OE intègre maintenant des outils spécifique pour les gérer le responsive.
Quand vous mettez un élément sur une page ou un calque, vous pouvez accéder à un large choix de modifications en allant sur le menu de droite, onglet Styles et Personnalisation.
Pour vous familiariser avec les media queries d'OE, sur l'mage au dessus, vous pouvez voir la ligne Média.
Elle est avec Média par défaut.
Voici les différents médias intégrés dans OE (vous pouvez les voir en cliquant sur le menu déroulant.
- Média par défaut
- Tablettes, smartphones, petits bureaux
- Certaines tablettes (portrait), smartphones
- Smartphones (portrait)
Sur la droite du menu déroulant, vous avez un icone de type "bloc notes". Cliquez dessus et vous pourrez voir les résolutions de chaque média queries.
Tablettes, smartphones, petits bureaux
Comme vous pouvez le voir, le code définie une largeur maximum d'écran de 1199px (pixels).
Autrement dit, tout ce qui est dans une largeur de 1199 pixels héritera de fonctions autre que celle du media par défaut. C'est la base même des média queries. Si vous ne comprenez pas cette partie là, ce n'est pas la peine d'aller plus loin. Il vous faut impérativement l’assimiler!!
Les autres media queries :
Maintenant que vous avez vu l'ensemble des média queries disponibles, il va nous falloir commencer à travailler sur le menu de notre site web.
(PS : je sauvegarde maintenant cette partie et je continue le tutoriel
)
Un exemple suit sur l'autre page, pour que la première partie soit pleinement comprise.
Edité par Hobby001 - 07 Mai 2019 à 22:06