Créer un site web avec Dreamweaver CC

Préparer les balises main et article

Testez gratuitement nos 1252 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Cette étape sera plus longue que complexe. Soignez l'organisation des CSS et restituez correctement l'aspect droite et gauche des articles. Cela concerne aussi le premier article qui occupe la largeur complète de la page.
05:07

Transcription

Pour aborder la partie main ici. En fait,, on s'aperçoit qu'on a une première image qui est d'une largeur plaine, alors que les autres sont partagés en 50%. On pourrait dire qu'il s'agit là d'articles qui appartiennent, en fait, à la catégorie de blog, ici, puisqu'on a une partie blog dans le site. Et que dans le premier article un courbe à ce moment il fait 5% et que les articles en avançant vont pousser le premier pour continuer à monter dans l'antéchronologique. Donc ici, pas de grandes difficultés, on a un titre on pourrait dire, de typo 1 sur un article un titre de typo 2, puis un paragraphe une image, le tout sous forme de lien parce qu'il est vrai, quand on va cliquer sur une image, il faudra qu'on accède à l'article Et puis on va avoir cinq comme ça, le sixième c'est un formulaire qu'on abordera dans une étape distincte. Donc, pour cela je vous invite moi à vous rapprocher de Dreamweaver, depuis la fenêtre extraction ici. Et puis, une fois que vous allez pouvoir provenir dans le photoshop vous allez faire à votre marché un exportant image par image,en donnant des noms et en récupérant chacune des images qui vont composer une illustration de ces articles. Alors,dans la partie main, on va pouvoir parvenir récupérer le code directement on avait vu, on avait un article avec un lien globale a href une image qui pointe directement vers l'élément titre, sous-titre, paragraphe bien sûr, le premier n'a que le titre n'a pas de h2, ni de p, c'est normal, en fait, ça va être une présentation différente mais il doit procéder son h2 et son p parce que en fait, chaque fois que les articles vont poussé, forcément, il faudra penser à masquer le h2 et le p, et ne faire afficher que le h1. Donc, côté html, ce n'est pas bien compliqué côté feuille de style, après avoir importer la typo nécessaire, donc la Eras_Demi_ITC On va pouvoir créer tous les articles qui vont flotter, avec une largeur de 50% et une couleur d'écriture blanche avec aucune marge. Par contre, si on veut flotter les articles, il va falloir impérativement ajouter un overflow: hidden à main pour permettre de contenir l'ensemble des infos On va donner à a, puisque n'oublions pas comme même qu'au niveau du code source ici, si je regarde dans la partie main, les a sont englobants de l'article, donc on va faire hériter la couleur d'écriture, pour qu'il puisse devenir blanc à leur tour, et on enlève la décoration underscore ici. on va demander à tous les titres, sous-titres et paragraphe d'avoir une largeur de 100% pour tenir tout le bloque, d'avoir un padding de 1vw tout le tour,et puis surtout d'être positionner de manière absolu, par rapport forcément à l'article, donc de ce fait, on va devoir mettre une position relative au niveau de l'article. Ensuite, on va mettre sur les h1 un titre, font-size et top On va mettre sur le h2 un titre, font-size et puis un top un peu plus bas pour qu'il puisse être donc automatiquement décalé du premier, puisque son position absolu n'oublions pas qu'ils sont sortis du flux Et pour les paragraphe, pareille font, font-size et top,avec un top qui est décalé de plus. pour les images, on va mettre un width de 100% avec un display block. Et puisqu'on peut le faire aussi, c'est rajouter une opacité de 0.85 qui va automatiquement leur donner un peu de transparence légère qui donnera un petit effet subtile par rapport à la couleur de fond qui pourrait changer. regardant en partie ce que ça peut donner lors de passer en fractionner, voir si on peut arriver à faire à la fois le code et le visuel voilà ici, si on donne un peu plus d'espace on pourrais entrer aussi en préférence typographique au niveau des polices ici demander de passer à neuf, bon on va passer à dix ça devrait être bon en dix, appliquer, fermer et je vais donner plus d'espace pour avoir un visuel plus soutenu ici. Donc, nos images se positionnent bien sauf la première qui devrait être à 100% je vais le faire, on va se positionner comme même juste au niveau de l'article ici, on va dire le first of type, première article on va le mettre à 100%, comme ça il se positionner correctement. là tout est bon. Par contre, il faudrait que mes images puissent se positionner dans l'autre sens, ou d'au moins la dernière, celle de Marc Zitapolio Donc, ce que je compte faire, c'est placer au niveau de notre article, cette fois ci, c'est le last-of-type. Et on va lui demander de se positionner à droite, et de mettre le texte sur la droite on va changer la couleur aussi, puisqu'il va être écritsur orange,ce qui était un peu le cas au niveau de notre charte graphique maintenant, au niveau de l'ensemble des autres articles, on va pouvoir utiliser un nth-child un design (2n+1) on aurait pu faire aussi, un nth-of-type aussi également, un design (2n+1) pour le positionner sur la droite au niveau du text-align, on va positionner également, le texte Le trio des trois sur la partie h1 first-of-type donc on va se mettre juste ici, après la partie h1 Donc, on va pouvoir positionner ce trio des trois ici, par contre 40 ça fait trop, on le mettre à 15 pour qu'il se positionne au centre de la page ici, directement, et voilà, on peut dire que là maintenant, on a mis en place les grosses bases de cette articulation là, on va pouvoir passer à la partie du formulaire sur une étape suivante.

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 !