Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Créer un site web avec Dreamweaver CC

Ajouter les CSS de l'en-tête

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
À cette étape, définissez les styles associés avec CSS Designer ou avec du code. Par la suite, vous pourrez aller plus vite et vous vous focaliserez sur l'approche de construction.
05:44

Transcription

Coté feuille de style, on va pouvoir adapter au global directement. Alors ici on a la possibilité de venir continuer à enrichir avec les flèches du haut ou du bas notre élément. Rappelez-vous tout à l'heure ce que nous avions dit c'était le conteneur il fallait placer au moins un supérieur devant le header pour être sûr de cibler ces éléments-là. Au niveau du lien ici, ce qu'on va faire c'est demander au niveau du texte d'avoir aucune décoration. Donc ça va supprimer instantanément l'élément de soulignement et puis on va passer comme couleur directement la couleur repérée donc un RGB 255 « RGB 255,128,0 » qui va nous correspondre à ce orange. On peut continuer à donner des informations au « a », mais on peut également venir donner des informations cette fois-ci au « li ». On va reprendre la même structure ici et cette fois-ci, on va venir placer sur le « li » directement. Et là, on va pouvoir définir tout ce qui va être typo. Donc la font-family on va utiliser un Gotham par exemple, voilà. Font-style on va placer en font-style Normal, un font-weight on va le passer en 400 par exemple et le font-size on va utiliser une typo proportionnelle proportionnelle à l'écran, on va utiliser « 2vw » qui va faire la largeur du device ici, et au niveau du display on va pouvoir utiliser un inline-block donc il suffit de venir dans la partie affichage ici, voilà. Disposition, display, inline block. Voilà, de façon à pouvoir positionner tous nos éléments en ligne. Il nous est toujours possible de réordonner le CSS en fonction d'une certaine granularité. C'est à vous de voir comment vous voulez imbriquer ou éditer ces imbrications. Vous pouvez également venir directement taper dans le code. L'éditeur de code va nous proposer de pouvoir placer par exemple si je veux taper le line-height on a la possibilité d'avoir de l'information ici par l'éditeur de code. Mais une fois que je vais avoir validé mon line height je peux revenir avec le raccourci clavier Ctrl+K et d'avoir toutes les informations nécessaires ici aux remplissages de cette propriété. Ctrl+K, Commande+K sur Macintosh et là on va pouvoir utiliser par exemple un « 5vw » ici pour avoir une hauteur forte de ligne et pouvoir centrer notre texte. Alors ce qu'on peut faire également, ça c'est assez sympa c'est un peu dupliquer cette règle. On peut la dupliquer par exemple deux fois. Et donc une fois qu'on a dupliqué la règle, on va pouvoir supprimer, on aurait pu la dupliquer avant de remplir du contenu ici. Et ça nous permet de pouvoir venir préparer nos règles de manière assez rapide, assez simple vous voyez pour pouvoir définir le contenu de chacune. Alors là on va les remplir rapidement, on va dire qu'on va placer un margin-left sur la partie du « ul » ici. Donc on va utiliser une partie de 14 pour pouvoir bien le dégager sur la partie gauche ici. Pour le titre il suffit de mettre une image d'arrière-plan donc cette image on l'a préparé déjà. On verra après comment extraire les images mais pour l'instant on va mettre simplement un header. Puisqu'on va s'assurer toujours dans le H1 ici c'est de ne pas avoir de repeat donc que l'image ne soit pas répétée. Et puis on va s'assurer que le background size va pouvoir faire un contain ici directement de façon à contenir le petit logo. Vous avez vu qu'il s'est adapté. Alors le souci c'est que pour l'instant le texte nous gêne donc si on met un text-indent ici, et ici on pourrait mettre « -9999 » pixels. Pourquoi « 9999 » pixels? Parce que c'est une valeur qui n'est pas du tout entière. On comprend bien que quand on voit ça c'est pour faire une indentation qui va se sortir de l'écran. Et maintenant ce qu'on va demander c'est au niveau du positionnement, c'est d'avoir un positionnement absolu déjà pour le faire sortir du flux. Alors on va venir chercher position ici absolue, on va le faire sortir du flux et là on va le dimensionner, on va aller mesurer les valeurs dans la maquette et on va la faire correspondre à « 12vw » et au niveau de la hauteur ça va faire « 8.9vw » le Window device va pouvoir s'adapter à ce niveau-là. Le souci c'est qu'ici dans le mode de rendu, on se retrouve directement dans un mode de rendu propre à un smartphone. On verra les smartphone par la suite. Pour l'instant on va rester dans un développement à peu près classique on va dire et s'assurer que l'on soit dans un rendu d'écran à peu près normal. Donc on va le positionner en Top et en Left, donc on va pouvoir venir ici, on va dire en Top. On va le mettre par exemple à « 0.84vw » et puis en Left on va le placer à « 1.68vw ». On pourra dire maintenant que tout est bon. On n'a plus qu'à indenter notre code, c'est le même indenteur ici qu'on va utiliser et ce qu'on peut faire aussi c'est regrouper les catégories c'est-à-dire mettre les background ici sur la fin, le text-indent le mettre au milieu par exemple ici et puis réorganiser en fonction de tout ce qui doit être positionnement, le texte et les arrière-plans d'image de façon d'avoir une meilleure lisibilité. Et on va se contenter pour l'instant de rester à ce niveau-là. On reviendra par la suite dessus pour faire des marges si besoin y était ou des effets. Ce que je vous propose c'est qu'on passe maintenant à la partie slider.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !