Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de Dreamweaver CC 2017

Structurer avec la palette d'insertion

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Lorsque vous créez un document, le plus important n'est pas l'aspect fonctionnel ou visuel, mais bel et bien l'aspect structurel et sémantique. Dans cette séquence, vous verrez l'une des manières d'employer la palette d'insertion.
06:10

Transcription

Que l'on travaille en mode code ou que l'on travaille en mode rendu, l'étape fondamentale lors de la mise en place d'un site web reste la structure HTML de base que l'on va utiliser, sur laquelle on va s'appuyer. Donc il est primordial de commencer par mettre cette structure de base en place. On peut commencer par les gros blocs, comme l'en-tête par exemple, le contenu principal le contenu complémentaire, le pied de page eccetera, et puis rentrer dans les détails au fur et à mesure qu'on avance. Pour cela, la palette insertion va largement nous y aider. Alors soit vous travaillez avec la palette d'insertion comme c'est le cas ici dans la partie haute de la page, afin de vous permettre d'avoir tous les icônes rapidement sous les yeux. Soit vous pouvez également décrocher cette palette et la placer de manière verticale ici. Vous pouvez venir créer un espace de travail que vous invoquerez par exemple structuration de site, mise en place de structure, architecture, comme vous le souhaitez. Là l'intérêt que vous allez avoir c'est déjà de gagner de la place dans la partie haute du document. Mais surtout, d'avoir un peu des noms ici qui vont vous aider à vous familiariser avec les icônes. Donc si vous cherchez par exemple la balise header ou aside, c'est beaucoup plus rapide de venir la voir ici et une fois que vous aurez pris en compte l'élément, visuellement vous pourrez l'utiliser d'une autre manière sur la partie horizontale par exemple. Donc libre à vous de pouvoir venir utiliser cette palette. Soit sous forme de palette, soit sous forme de barre d'insertion sur la partie haute là-haut. Alors, il va falloir définir comment structurer et architecturer ce document. Alors commencçons par la structure interne on va essayer de garder un sens sémantique, de garder par exemple une balise header pour l'en-tête, navigation pour la partie de navigation. ET je vous invite fortement à vous rapprocher de deux sites. Le premier c'est sur le W3C ici avec l'intégralité des balises que l'on peut avoir à disposition. Donc si je prends la balise header ici je vais chercher header alors des fois il peut être très rapide de faire un CTRL F dans la page et de faire header ici de cette façon vous arrivez plus rapidement à la balise en question et donc si vous cliquez sur cette partie-là, on a vous dire d'une part, le contenu qu'elle peut avoir, les attributs qu'elle peut avoir, les contraintes s'il y en a eccetera eccetera. Vous avez toutes les informations nécessaires sur la balise elle-même. Ensuite, le second site que je vous invite, vers lequel je vous oriente, c'est ce qu'on appelle le flowchart le HTML5 Element Flowchart qui va permettre de définir la nature et l'entité de la balise. Ici au démarrage. Est-ce que c'est une balise de navigation. Oui, ça va être la balise Nav. Non, est-ce que ça met un sens dans son propre propos. Article, est-ce que ? eccetera eccetera. Vous voyez que là vous allez pouvoir définir le type de balise que vous allez utiliser et donc ce document est assez intéressant. Vous pouvez l'imprimer et le garder à proximité de votre bureau lorsque vous structurez le contenu d'une page. Alors revenons à Dreamweaver maintenant, sur cette utilisation de palettes d'insertion ici. Si vous utilisez ici le curseur dans le mode code, que vous cliquez sur header, ça vous donne une boite de dialogue qui vous dit est-ce que vous voulez l'insérer au point d'insertion, est-ce que vous voulez le faire après le début de la balise, ou juste avant la fin de la balise. D'accord. Donc ça vous donnera une précision supplémentaire sur l'intégration, est-ce que vous avez une classe, alors là y'a pas de feuilles de style qui sont liées donc automatiquement vous ne pourrez pas attribuer de classe mais vous pouvez très bien attribuer un identifiant si nécessaire. Ensuite vous pouvez régler une nouvelle règle de CSS à partir de ce point et valider lorsque vous aurez fait tous vos choix pour pouvoir intégrer cette balise-là. Vous allez avoir un contenu factice qui va vous permettre d'une part déjà d'être sélectionné pour pouvoir soit le supprimer, soit le modifier mais surtout avoir un point d'encrage, un point visuel de cette page. PErsonnellement, ce que je préfère faire, c'est écrire directement tout en majuscule, c'est plus simple à visualiser et de mettre le mot header à l'intérieur. Ensuite, je vais faire un retour chariot et je vais venir me positionner maintenant, non plus dans l'interface ici mais je vais me placer à l'intérieur du header, vous voyez si je joue avec la flèche de navigation je suis bien à l'intérieur du header ici et si je fais maintenant une insertion qui va être dans la balise main alors je vais chercher main ici. Je clique main Il v ame dire cette fois-ci la même chose à peu près que ce qu'on avait tout à l'heure ici avec avant le point d'insertion, avant la balise, après la balise ou ici il va vous dire mais de manière visuelle. Donc est-ce que vous voulez la mettre avant. Alors c'est la petite croix qui va être insérée donc est-ce que vous voulez la mettre avant la balise header? après la balise header? Enveloppée la balise header ou imbriquée dans la balise header. Donc ce que je veux c'est le mettre après la balise header et vous voyez que mon main ici est bien placé après. Donc je vais pouvoir, comme ça, venir remplacer directement et taper par main. Ici on va pouvoir sélectionner cet élément-là et je vais faire, alors je suis à l'intérieur du body et je vais faire maintenant ma balise aside. Alors la balise aside complémentaire, est-ce que je la veux avant ? Oui je la veux avant le header et là, si je suis dans cette partie-là, je vais pouvoir faire aside. Et enfin le dernier ça va être le footer. Donc on va placer ici footer et ici au point d'insertion je veux pas de classe je veux simplement placer footer et là ce qui est bien c'est que je peux directement taper puisque ce n'est pas la balise qui est sélectionnée mais que le neud contenu de texte qui est sélectionné, auto-sélectionné donc je peux directement taper et le modifier. Donc voilà, vous avez la possibilité de manière très rapide de pouvoir intégrer des balises soit dans la partie code soit dans la partie document. C'est à vous de voir, vous pouvez le faire que ce soit en mode en direct ou en mode de création. Vous avez toute liberté d'action de ce côté-là. Toute souplesse et toute l'attitude d'adaptation à votre propre flux de travail et que vous travaillez en mode palette ou en mode de barre dockable à la partie haute du document.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 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 !