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

Préparer la finalisation de la page

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Préparez une page de finalisation aussi bien en HTML qu'en CSS, puis déterminez les améliorations à apporter. Partez également à la découverte d'outils de débogage incontournables.
04:40

Transcription

Notre première page de site est presque terminée. Donc, je vous propose qu'on fasse le tour ensemble pour regarder les améliorations que l'on puisse apporter. Alors déjà, on va commencer par créer un nouveau fichier qui s'appelle finalisation.html, et qui relie une feuille de style finalisation.css Alors, déjà ici la cassette passe derrière tout le monde, il faudra qu'on apporte peut être un élément de survol ici à chacun des éléments de ce titre en gérant un peu l'espace entre chaque élément. Ici, on pourrait apporter un slider qui va permuter avec l'image tout simplement, de manière automatique non-stop. Ici, on est à peu près bon il faudra rajouter les liens sur chacun des éléments de réseaux sociaux. Ici, les éléments de survol sur chacun de ces informations, ça pourrait être un petit plus. Au niveau de Trios des trois, on pourrait avoir une information avec aucun titre une animation qui apporte un titre qui va survoler au moment où la souris passe au-dessus de l'image. Ici, on pourrait avoir une transparence un peu plus forte et peut-être jongler sur une image qui devient un peu plus visible au moment de survol. On pourrait poster le formulaire, tout simplement dès qu'on clique sur Inscrivez-vous on puisse envoyer le formulaire. Et puis un petit effet de survol sur ce footer. Sinon, tout le reste est bien calé au pixel près tout est intéressant que ce passe-t-il si je réduis ma page, eh bien elle se réduit. Tout est OK. On pourrait donc apporter un petit côté responsive aussi avec une gestion des médias query et donc, tout ça va porter soit des corrections, comme par exemple la cassette ici, qu'on pourrait corriger de suite dans la partie header tout simplement. On se retrouve avec un conteneur header h1 qui prend l'image mais qui ne passe pas au premier plan. Donc, ce qu'on pourrait faire, c'est placer simplement un z-index ici, et ce z-index si vous ne le connaissez pas, on peut le valider tel quel. N'oubliez pas de faire un ctrl + K si vous avez besoin pour avoir l'information directement, et pouvoir travailler sur cette information, comprendre les propriétés que l'on peut apporter. Et ici, on pourrait dire qu'on va le placer en 1000, 1.2.3 ctrl+s. Et de ce fait, la cassette va forcément passer devant tout le monde ici, du fait, qu'on a pu juger sur ce paramètre de niveau de calque, on va dire. Pour trouver le code, on était passer directement par header ici, on aurait pu passer par d'autres endroits qui sont mis à disposition par Dreamweaver, et qui sont relativement intéressants. Regardez ici, si je prend la cassette et que j'appuie sur la touche ALT en même temps, j'ai toute une partie de code navigateur qui apparaît ici, qui me permet de pouvoir voir directement l'intégralité des feuilles de style et des éléments qui apparaissent. Maintenant le z-index a été placé ici, on le voit dans la quatrième ligne en partant du bas. Mais, j'aurais très bien pu cliquer sur cet élément et me rendre directement dans le code source à cet endroit. Regardez je remplace mon code source. Dès l'instant où ce code source ALT clic va être invoqué. conteneur h1, je bascule sur le code et j'aurais pu venir ajouter mon z-index. Alors, une autre partie intéressante, regardez c'est que si je passe en pur code ici et je suis sur ma cassette ici, les tracteurs rouillés. Et je voudrais savoir si je peux affecter des feuilles de style à cet élément-là, puisque je sais que c'est sur cet élément là précisément, que la cassette doit venir Je fais, soit un raccourcis clavier ctrl + e sur Windows commande + e sur Macintosh soit un clique droit de la souris pour arriver à Edition rapide. Et là regardez, c'est fabuleux. J'ai toute les règles qui sont appliquées à cet élément, et qui affecte cet élément. Donc, ici par exemple, la première règle qui est appliquée, elle dans la base.css puisque je réaffecte tous les h1 en propriétés initiales. Si je viens dans cette partie-là, j'ai le box-sizing qui l'affecte, Et puis là, regardez, à cet enfroit-là j'arrive sur une règle qui me permet de modifier cette règle-là. Et là, je vais pouvoir créer soit une nouvelle règle, soit affecter les règles en fonction de leur positionnement, et chaque fois qu'un élément est cité au cours d'une règle css il apparaît dans cette partie droite et je vais pouvoir sélectionner toutes les règles css que je souhaite, ajouter une nouvelle règle, modifier une règle existante. Donc, n'hésitez surtout pas vraiment si vous êtes dans le code à utiliser l'édition rapide pour voir directement tout ce qui concerne cette balise-là. Et si vous êtes dans la partie en direct, utilisez un alt + clic sur l'élément pour pouvoir venir voir toutes les règles qui lui sont affectées, ainsi que les différentes feuilles de style qui lui sont attachées et pouvoir dire de cette façon accéder directement au code, pour modifier le paramètre qui cause souci.

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 !