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

Créer un site web avec Dreamweaver CC

Appréhender HTML, JavaScript et les CSS

Testez gratuitement nos 1343 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour une bonne prise en main des étapes à venir, prenez le temps d'assimiler les trois principaux langages du web. Ainsi, dans Dreamweaver, vous serez amené à utiliser les langages HTML, CSS et JavaScript.
08:06

Transcription

Prenons quelques instants pour venir définir un peu la nature des trois langages à utiliser lors de la création d'un site Web qui sont le HTML, les CSS et le JavaScript. Donc pour cela je vous propose de créer un dossier étape que l'on va instantanément voiler qui va nous servir un peu à chaque fois qu'on aurait besoin d'une petite aparté on va créer un dossier qui va contenir ici le numéro de l'étape et du chapitre afin de venir travailler de manière indépendante de la création de notre site. Donc ici on va créer un dossier 1369_01_04 et ici maintenant on va venir aborder HTML, CSS et JavaScript. Pour mettre en exergue ce genre d'approche, regardons simplement ce titre ici avec ici « La musique dans tous ses états pendant cinq jours » du 05 Octobre la date de présentation de ce festival. Donc si on se retrouve du côté HTML, on va devoir structurer notre document. Alors pour une question de lisibilité, je vais passer en mode d'affichage fractionner verticalement de façon à avoir un peu plus de souplesse et de visibilité dans le travail. Ici ce que l'on va faire, on va enregistrer ce document et on va venir l'enregistrer dans les étapes dans ce chapitre ici directement on va enregistrer sur ce numéro d'étape et au niveau du code HTML c'est du texte. Donc ici à la partie body on va pouvoir venir copier ce texte. Alors je vais donner un peu plus d'espace au niveau code ici. Ne vous inquiétez pas, on ne fera pas de code de manière trop abruti, l'idée c'est de vraiment pouvoir découvrir Dreamweaver l'interface et voir comment on va pouvoir créer un site Web très rapidement que l'on tape dans le code ou que l'on tape dans l'interface. Donc ici on a une phrase qui devient une phrase extrêmement longue. On n'a pas de coupure, pas de rupture. Donc le HTML c'est pas simplement que du contenu c'est aussi de la structure et ce qui est très important de comprendre est que cette structure ne doit pas être exclusivement découpante mais elle doit être aussi sémantique c'est-à-dire on doit donner un sens à chacune des phrases. Ici « La musique dans tous ses états pendant cinq jours » c'est un titre. Le « Festival des tracteurs rouillés » c'est encore un titre. « du 5 au 10 octobre » alors là c'est une information complémentaire, ce n'est pas forcément que du titre. Donc ici si on va utiliser du titre il va falloir récupérer cette partie-là. Et si je viens dans l'inspecteur des propriétés je vais venir chercher « Propriétés ». Voilà l'inspecteur de propriétés qui est là. Je vais pouvoir venir l'ancrer dans la partie basse ici. Et ici dans cette partie basse je vais venir utiliser les outils qui sont propres au formatage de ce texte. Et ici voyez j'ai un En-tête 1 et je vais pouvoir dire qu'il s'agit d'un titre, sauf que le titre s'est placé sur l'intégralité ici de ces éléments. Et je regarde bien après cinq jours c'est pas forcément encore du titre donc je vais venir mettre en retour chariot pour dire que c'est une seconde phrase, et je vais même pouvoir supprimer ce petit espace qui est devant. Et là maintenant j'ai quoi ? J'ai deux titres de niveau 1. Alors on ne peut pas mettre de titre de niveau 1 dans une même page. En fait c'est faux. On peut mettre deux titres de niveau 1 dans une même page à condition qu'il ne décrive pas le même bloc. Or là ils décrivent tous les deux le même bloc qui est le bloc body. Ils ne peuvent pas cohabiter sur ce même niveau. Alors ce que je vais faire si je vais prendre cette phrase-là je vais dire ce n'est pas un en-tête de niveau 1, c'est un en-tête de niveau 2. Donc là je crée un second titre. Donc ici si je regarde je vais avoir la même problématique que ce que j'ai eu tout à l'heure. Il va falloir que je revienne découper ici avec les tracteurs rouillés. Je me repasse un double clic dans le code et je remet en retour chariot. Je supprime l'espace et là encore une fois j'ai deux titres. Non ce n'est pas un titre, ça va être un paragraphe cette fois-ci j'ai de l'informations. Là je viens de commencer à découper cette information. Donc le travail que l'on va avoir à faire chaque fois en HTML c'est avoir vraiment cette démarche-là de découpe de structure et de sémantique à la fois. Mais si je vais un peu plus loin ici je vais avoir besoin d'englober tout ça avec une balise division, je vais diviser tout ça. Est-ce que c'est une division ? Est-ce que c'est un en-tête ? Quelle va être la nature vraiment de cet élément là ? Mais là pour l'instant on va dire que je vais faire une division. Je vais venir dans la palette d'insertion et je vais utiliser une division ici. Là la division me dit est-ce que tu veux envelopper la sélection ? Oui, je souhaite envelopper toute cette sélection. Et je vais lui donner une classe et je vais l'appeler slider puisque c'est là où il va y avoir une sorte de galerie d'images qui va défiler. Je dis OK. Et là je viens de créer une division tout autour de cet élément, en lui donnant la classe slider. Je peux venir dans le menu Édition Code Appliquer le format source et là j'ai pu structurer mon information de manière propre. Que va faire le CSS maintenant ? On va arrêter là pour le HTML. Le CSS va faire en gros la même chose, mais cette fois-ci va mettre en forme visuellement le contenu. Le CSS lui-même est un langage de description c'est-à-dire qu'on va pointer vers des sélecteurs ici c'est un sélecteur universel c'est-à-dire quelque soit la balise, ici je n'affecte que la classe slider, que l'on vient de créer, et ici vous rappelez classe slider ? Je vais dire je veux le titre tous les h1 qui est dans la classe slider, tous les h2 qui est dans la classe slider, etcétéra. Voyez que c'est simple à comprendre et ensuite ce sont des descriptions propriétés valeurs donc la font-family ça va être un Berlin Sans FB Demi Bold. La position relative, le width 100%, le height 52, etcétéra etcétéra. On va venir décrire les éléments et leur approche visuelle. Là il va suffire maintenant que je fasse « link » et dès que je fais une balise link vous avez vu simplement une balise link de cette nature-là je peux venir soit dans le code dire je veux parcourir et je veux ce document CSS, soit si je veux je peux repasser par le CSS Designer ici et dire je veux jouer avec un fichier CSS existant et je vais venir parcourir mon document et dire c'est ce fichier-là. Et je vais dire OK. Si on regarde maintenant du côté JavaScript, qu'est-ce que le JavaScript ? Le JavaScript c'est un langage un peu plus sophistiqué on va dire qui commence à donner des fonctionnalités et des instructions. Ici donc j'ai window.onload, on comprend que ça va être quand la fenêtre charge. C'est égal à une fonction anonyme qui dit je vais créer une variable slider. Alors ça c'est un nom purement arbitraire qui est égal à quoi ? Qui est égal à document.getElementByClassName, tu vas me chercher tous les éléments qui ont la classe qui s'appelle slider. Donc il va venir me récupérer tous les éléments de cette classe-là, slider ici et il va les classer dans un tableau. Donc ce que je lui dis c'est je veux le 0ème en informatique un code à partir de 0 jamais à partir de un. Donc je lui dis je veux le 0ème qui sera forcément donc le premier. Et je lui dis à cet élément-là, à cette variable-là je lui ajoute un écouteur « click » c'est-à-dire que chaque fois tu cliqueras, je veux que tu exécutes action. Et action qu'est ce que c'est ? C'est une fonction qui est définie ici et je lui dis que je veux que tu m'envoies un message d'alerte et qui me dit « Coucou, vous avez cliqué ! » Donc ce document JavaScript comment je vais l'intégrer ici ? Et bien je vais utiliser la palette d'insertion. Pour ça cette palette d'insertion je vais la déplacer, je vais la mettre dans la partie haute de mon document ici voyez jusqu'au trait bleu, je le lâche et là j'ai tous mes icônes HTML c'est un peu plus simple à voir et j'ai mon icône de script ici. Et là sur cette icône de script je pointe vers JavaScript et je lui dis ici c'est ça. J'aurais très bien pu faire une balise script et puis valider et puis taper mon attribut src. En fait c'est autant pratique l'un que l'autre. Il suffit que j'enregistre maintenant mon document chaque fois que je vais cliquer là-dessus, si ça ne marche pas dans un premier temps vous faites F5 pour actualiser votre page. Et chaque fois que je vais cliquer vous avez un petit message qui vous dit « Coucou vous avez cliqué ! » Voilà donc on vient de voir les rôles du HTML et du CSS et du JavaScript. Les bonnes questions vont se poser à chaque fois pour pouvoir bien appréhender l'écriture et la conception de ces documents. Je vous invite à fermer ces documents, et si vous regardez ici vous avez un document HTML, son code source, le document CSS qui lui est lié et le JavaScript qui lui est lié tout ça au sein de la même fenêtre. Et maintenant qu'on a pris en main HTML, CSS et JavaScript on va pouvoir commencer à travailler sur notre projet de site.

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 !