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 une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Créer l'arborescence du site web et le fichier HTML5

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Préparez la création de votre page HTML5. Mettez en place les dossiers et les fichiers de base de votre site.

Transcription

Me voici dans mon éditeur de code, dans Brackets, c'est donc la première chose que je vais faire pour démarrer mon nouveau projet. Eh bien, c'est tout simplement d'aller créer un dossier sur mon disque dur, qui me servira de dossier racine pour mon nouveau site, et puis d'aller dire à Brackets ce que c'est, dans ce dossier là, que je désire travailler. Donc, pour faire ça dans Brackets, c'est très, très simple. Fichier, ouvrir un dossier. Et puis, je vais aller créer un nouveau dossier sur mon disque dur, je vais appeler ça, par exemple, Blog_DidaXo, c'est le nom de mon projet. Voilà, je crée ce dossier. Je le sélectionne et je vais cliquer sur ouvrir, simplement, pour dire à Brackets ce que c'est, là dedans, que je désire travailler. Voilà qui est fait. Alors ce dossier, il est pour le moment complètement vide. Il ne va pas rester vide très longtemps, vous devez bien vous en douter. Donc ici, dans la colonne de gauche de Brackets, je vais faire un clique droit pour créer un nouveau dossier, que je vais appeler CSS, je vais y stocker mes feuilles de styles. Je vais également créer un autre dossier que je vais appeler images. Je vais y stocker les images dont j'aurai besoin dans mon site. Je vais créer un dossier js, pour y placer le code Javascript. Et puis encore un nouveau dossier que je vais appeler Fonts, pour y placer les polices de caractères. Alors, je vais maintenant créer un premier fichier dans ce site. Donc, clique droit, nouveau fichier, ce fichier s'appellera index.html, ce sera la page d'accueil de mon site. Alors, vous le savez, toutes les pages HTML du monde, commencent par cette instruction DOCTYP. DOCTYP HTML dans ce cas-ci. Ça, ça indique au navigateur qu'on utilise du HTML 5. Alors, ensuite j'ai besoin de ce qu'on appelle le code minimum, c'est-à-dire de la balise racine HTML qui s'ouvre et qui se ferme. Et puis, dans cette balise HTML je défini deux zones. La zone head de mon code, comme ceci, qui s'ouvre et qui se ferme. Et puis la zone body. Qui s'ouvre et qui se ferme également. Et dans l'en-tête de mon code, dans le head, eh bien, je vais déjà indiquer une première balise meta, qui va me permettre de spécifier le jeu de caractère que je vais utiliser. Ce sera le jeu de caractère UTF8, donc le jeu de caractère standard, classique de tout site web. Et puis, je vais déjà défnir un title, un titre. Pour ma part, je vais l'appeler Blog_DidaXo par exemple, comme ceci. Voilà, je sauvegarde cette page HTML, et vous voyez que mon dossier racine n'est plus vide, il y a déjà pas mal de choses dedans. Et nous avons commencé en douceur, le développement de notre nouveau projet web.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

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 !