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

Élaborer le pied de page

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour concevoir le pied de page (footer), vous utiliserez des éléments de liste. La mise en place de l'arrière-plan oblique complique la tâche, mais vous verrez que ce n'est pas si difficile.
04:14

Transcription

Partie structure du footer, on peut dire qu'on a un élément de liste, ici on a quatre bloques ces quatre bloques peuvent directement faire partie d'un li, li , li, on pourrait avoir un h1 ici, un h2 de ce partie là, un paragraphe. On va pouvoir styler avec un arrière plan d'image qui sera inclinée, et une image d'insertion au sein de liste tout simplement, on va pouvoir se dire que là on a un border top et ici un border bottom qui sont de cette couleur. Pas de grande complexité on a vu tout ça déjà, par les étapes précédentes. Donc,ce que je vous propose juste c'est d'intégrer les images dans une autres étapes, on va voir comment on peut manipuler le dom, comment on peut manipuler, le glisser, déposer des images, l'extract... Donc, revenant maintenant sur Dreamweaver ici, dans cette partie là, au niveau du footer, on va simplement remplacer toute cette partie là, par un élément de liste des liens extérieurs pour pouvoir pointer h1, h2, paragraphe, h1, h2, paragraphe, Voilà on peut directement enregistrer et basculer sur le CSS. Cette fois ci, on va passer sur le footer.css, ici. Donc, pas grande chose jusqu'à présent de compliquer, on va commencer comme même sur le footer de faire un clear both parce que n'oublions pas que tous les articles de float, et donc on peut y avoir un peu de débord qui peut se passerait. on va donner de typo classique, et un arrière plan donc, l'arrière plan gris, la couleur d'écriture grise, puisqu'on va avoir des fonds qui seront gris. On a la border top et le border bottom qui vont être l'ancien, reprenant ici l'élément, ici tout le fond est gris, l'écriture va être grise et puis on a ces deux bordures anciennes qui vont se passer de part et d'autre de size vertical. Ensuite, on va pouvoir demander au footer a, puisque ce sont des liens n'oublions pas, regardez la côté structure ici on a une liste dont les derniers éléments qui sont à chaque fois encadrer par des éléments de liens ici, pour pouvoir cliquer n'importe où dans l'emplacement, pour pouvoir l'item de l'article à doc. Donc ici, on va passer sur une couleur: inherite et un text-décoration: none. Le conteneur footer li, on va lui donner une float: zone gauche, donc puisqu'on a une float zone gauche de li, de suite, on va demander au ul, de faire un overflow: hidden, pour être sûr de capturer l'ensemble des infos. Et puis, on a une petite marge gauche qu'on aura qu'au li + li, c'est à dire au second li le premier li n'aura rien, mais le second, le deuxième et le troisième ont une petite marge gauche qui correspond à la marge qu'on a eu depuis le début de chacun des éléments ici, c'est à dire un dix pixels sur les 11, 90 qui correspond à cette écriture barbare de 0.8 au pourcentage. Ensuite, pour le h1, on va faire un positionnement absolu. On va lui donner un positionnement en bas à droite et la couleur d'écriture qui +va être ce orange avec un petite opacité. Alors, faites bien attention, puisqu'on donne au footer h1, un positionnement absolu. On va aller directement dans le li, puisqu'il est intégré dans le li, une position relative pour qu'il se positionne pour cet élément là. Ensuite, le h2, bas, simplement une écriture de largeur, par contre là, on va commencer à donner un arrière plan orange, et la petite astuce va être que sur le paragraphe mis maintenant ici qui va suivre, on va lui donner si vous regardez bien dans photoshop, on se retrouve dans le pied ici avec cet élément un peu décalé. Alors, l'astuce va être de ce dire, on va fabriquer alors là je vais voir fireworks volontairement l'élément qui nous va bien à l'échelle un et demi on va dire, avec cette petite largeur de deux pixel dans la partie haute, qui va venir bloquer la largeur à 25%, si on aurait mis que cette partie là on aurait toujours embêté pour le positionner. Alors, là l'astuce c'est de lui dire bas je vais décaler un peu plus, et je vais mettre ce footer cache un arrière plan de ma balise p. Donc, si je reviens dans le css de Dreamweaver ici ce que je vais faire ici, je vais donner no-repeat cover, de façon qu'ils tiennent toute la place, et je le positionner en left top. Voilà, donc, si ici j'enregistre cet élément que je passe en mode indirecte ici, pour visualiser on a bien tous nos éléments qui sont positionnés. Puis la seule chose qui nous manque , ce sont les images, mais on voit que ce n'est pas vraiment complexe à mettre en place, au niveau structurel et au niveau css.

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 !