Créer un site web avec Dreamweaver CC

Structurer sa page selon la maquette

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans cette étape très importante, définissez la découpe principale de la page selon la maquette de départ. Cela vous aidera à déterminer les secteurs de la page. Dans cette séquence, vous utiliserez un modèle classique.
08:24

Transcription

Reprenons la maquette de travail où on a l'ensemble des parties qui vont composer notre page. On voit que dans Fireworks on a un calque qui s'appelle Grille. Si vous êtes dans Photoshop c'est exactement la même chose ici. Et là le site a été construit sur une grille 12 colonnes qui permet donc de répartir de manière plus proportionnelle l'ensemble des contenus. Vous voyez ici par exemple ça fait trois quart ici un quart, un quart pour chacun, la moitié pour chacune des images, ici un quart pour chacun des éléments, voilà donc c'est assez succint, assez basique pour pouvoir s'y retrouver. Donc cette structure comment va-t-on pouvoir là découper ? Et si on regarde on a une partie de navigation ici dans la partie haute qui pourrait être la navigation avec le logo, et on pourrait dire le header ici. Est-ce que maintenant cette partie-là on la place dans le header ? Est-ce qu'on la place à part ? Ça peut être un choix qui est discutable. Pour ma part, je préfère le placer à part ici donc on va créer une division slider. Ensuite on a une partie pour les réseaux sociaux. Alors, est-ce qu'on pourrait l'appeler d'une certaine manière ? On va créer une division également pour social ici. Ici on a une partie d'information complémentaire donc si c'est complémentaire on pourrait appeler ça une balise aside HTML 5 Classique. Ensuite on va avoir la balise « main » qui va contenir le sujet de la page ici avec une série d'article eux-même composés de plusieurs éléments d'image, de titre, sous-titre, paragraphe. On a un élément de formulaire qui fait également partie de la partie « main », et puis ici dans la partie basse on aura le footer avec le pied-de-page. Si on regarde le zoning correspondant, on va obtenir avec un , , < div class=social, , , . On n'a plus qu'à reporter ça directement dans notre structure de page. Pour cela on va retourner dans Dreamweaver et on va Enregistrer sous notre document. Alors avant d'Enregistrer sous ici un document HTML puisqu'on va s'adresser à un festival qui peut être international, l'intérêt c'est de placer un « lang » ici et de placer un « fr ». Alors on va placer un « lang=fr-FR » de cette manière-là. Parce qu'on peut avoir du français Belge, français Suisse, donc on peut définir ce genre d'information-là. Alors là on va rester sur soit « fr » soit « -FR » c'est à vous de voir de rester sur cette convention. On va enregistrer ce document et maintenant on va faire un Enregistrer sous directement. Et cet Enregistrer sous on va lui dire ici qu'on va partir d'un « 02-structure » et on enregistre tout simplement. Donc ce document structure maintenant, on va placer à l'intérieur de notre structure, de notre body la structure que l'on a optée. C'est-à-dire un header. Alors soit on utilise du « emmet » pour écrire et on fait de cette manière-là, soit on va retourner du côté de la palette d'insertion et on va venir chercher le header. Alors si la palette d'insertion ne vous parle pas dans ce sens-là parce que les icones ne sont pas expressifs vous pouvez la glisser dans la palette ici sur le côté et une fois qu'elle va être sur le côté bien entendu vous allez avoir beaucoup plus de facilité pour pouvoir lire le header, la navigation, le main, l'aside, etcetera. Donc ici ce qu'on va faire, on va ajouter un header, ce header il va être au point d'insertion. On va rajouter ensuite un élément de type div classique qui lui aura une classe slider. On va rajouter un autre div qui aura pour classe social. On va pouvoir rajouter un « main » et vous avez vu qu'il n'y aura pas de classe, vous avez vu qu'à chaque fois je déplace le curseur à la fin de l'élément pour être plus pertinent et ne pas placer la suite d'intégration qui se placerait dans le contenu par défaut. Et enfin on va placer un footer qui n'aura pas de classe non plus. Par contre je m'aperçois que j'ai oublié le aside ici qu'on va pouvoir placer à cet endroit-là. Donc maintenant on va pouvoir faire un Edition Code Appliquer le format source et là on se retrouve avec nos éléments propre à la structure. Il ne nous reste plus qu'à ajouter une feuille de style de base donc pour cela on va se placer sur le CSS Designer, on va venir joindre ou créer un nouveau fichier, tout va dépendre du contexte. Ici on n'en a pas donc on va le créer. Et on va créer dans le dossier CSS une feuille de style qui s'appellera cette fois-ci « 02-structure.css ». On va l'Enregistrer et on va la lier à notre document ici. Donc tout est prêt pour être completé. Passons dans le mode code tout simplement ici et au niveau de notre CSS Designer, prenons un tantinet plus d'espace ici, on n'a pas besoin du fragment de code. Donc qu'a-t-on besoin de faire ? On a besoin de placer des sélecteurs pour le header, le slider, etcetera. Ce que je vous propose de faire, c'est de manière globale. placer les sélecteurs un par un. Sauf que si on place le sélecteur directement au niveau de header ici, on peut d'un certain vieux navigateur avoir quelque problématique de positionnement si on décide de placer des marges sur le côté. Donc je vous propose qu'on insère ici directement une balise div tout autour de la sélection et qu'on lui donne la classe conteneur juste avant le départ. Donc ici dans cette classe conteneur, si je place dans la partie header et que j'ajoute un conteneur je vais avoir header. Sauf qu'écrit dans la manière qui suit on va se dire attention tous les header qui seront à l'intérieur de conteneur y compris s'il s'agit d'un header qui serait dans un article ou autre. Alors ce qu'on va faire c'est placer le signe supérieur entre les deux pour dire le header immédiatement en fin de conteneur et donc ici on sait qu'on va avoir cet élément-là. Donc sur cet élément-là on va prendre l'ensemble des propriétés ici. On va donner une largeur de 100%. Soit vous cliquez soit moi je préfère double cliquer comme ça on peut écrire directement et avec la touche Tabulation on passe à la suite. On va donner une couleur. Alors pour ça on va passer dans les fichiers. Ici on a quelques références. Dans les documents ici on a des références et dans les références notre designer nous a donné des couleurs. Donc le gris ou ce gris-là. C'est à vous de voir celui que vous allez prendre soit la hexadécimale, soit du RGB. Et donc on va pouvoir venir rajouter au niveau du CSS Designer une couleur d'arrière-plan qui sera ce gris ici pour avoir cet arrière-plan. Ce qu'on va faire c'est faire la même chose pour chacun des éléments. On va venir prendre le Div Class Slider, on va rajouter un sélecteur. Ici on n'a pas besoin de cet élément-là, on va utiliser les flèches du haut ou du bas pour pouvoir réduire la règle ici. Et ce qu'on va donner c'est ici une largeur de 100% puisque tous nos éléments font 100% de large. Et comme couleur d'arrière-plan, là on peut mettre un light gray, on n'est pas obligé de venir travailler avec des couleurs définies. Le header c'était autre chose, ici sur la partie du slider on peut mettre une couleur d'arrière-plan lightgray comme ça. Et donc ce que je vous propose c'est de coder l'ensemble de ces éléments directement au niveau de la structure CSS. Donc soit vous passez par le code, soit vous passez par le CSS Designer pour pouvoir coder tous ces éléments-là. La seule chose qu'on va devoir faire mais ça c'est une règle que l'on doit s'imposer au départ dans le développement, c'est de sélectionner directement on va dire le sélecteur universel c'est-à-dire ce petit élément étoile et puis on va demander que le box-sizing, alors ici on va le valider avec la touche Entrée. On va dire que c'est un border-box on valide avec la touche Entrée également afin de s'assurer que la dimension inclut les bordures plus les paddings à l'intérieur de la largeur. C'est-à-dire que quand je demande 100% ça inclut à la fois le contenu de texte, plus la bordure, plus le padding et tous les navigateurs vont pouvoir le prendre. Et si maintenant on passe directement en mode en direct pour voir notre rendu ici, on s'aperçoit qu'on a nos colorations qui sont faites. La seule coloration qui a été donné de couleur définie, ça va être un peu le header et notre « main » qui est orange qui sont les deux couleurs proposées par notre designer.

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 !