Organisation des Fichiers pour la Création d'un Site Web

Préparer les dossiers de travail
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

L'objectif de cette vidéo est de vous montrer comment organiser efficacement vos fichiers pour la création d'un site web et optimiser votre flux de travail.

Apprenez à structurer vos dossiers pour un site web efficace.

Dans cette leçon, nous aborderons comment organiser les fichiers de votre site web de manière optimale. Vous passerez par les phases de conception, création des maquettes, récupération d'images et de médias fournis par votre client. Il est crucial d'avoir une structure claire et distincte entre les fichiers de travail et les fichiers finaux destinés au serveur.

Nous vous montrerons une méthode simple mais efficace pour structurer vos dossiers, avec un accent particulier sur l'importance de nommer correctement vos fichiers, notamment la page d'accueil du site qui doit obligatoirement être nommée index. Vous apprendrez également à organiser les répertoires pour les images, médias, feuilles de style (CSS), et fichiers JavaScript.

L'objectif est de vous éviter de perdre du temps en cherchant des fichiers et d'assurer un transfert fluide vers le serveur web une fois le site finalisé.

Voir plus
Questions réponses
Quelle est l'importance de nommer la première page d'un site web 'index' ?
La page nommée 'index' est automatiquement reconnue comme la page d'accueil par les serveurs web, facilitant l'accès à partir de l'URL du site.
Pourquoi ne doit-on pas inclure des fichiers PSD dans le dossier du site ?
Les fichiers PSD sont généralement volumineux et inutiles pour le serveur, ce qui peut causer un encombrement inutile.
Quels sont les formats d'image recommandés pour les sites web ?
Les formats d'image recommandés pour les sites web sont JPEG, GIF, et PNG.
Nous allons aborder ici l'organisation de votre travail. Vous allez effectivement suivre les différentes étapes de la création d'un site web, donc la conception par exemple, la création de vos maquettes, la récupération d'images, de photos, de différents médias qui auront été donnés par votre client. Ces éléments doivent être organisés à l'intérieur de votre disque dur, de votre ordinateur. Voici une proposition d'organisation. C'est une organisation très simple pour un site très simple. Libre à vous ensuite de vous organiser comme bon vous semble, mais il est important d'avoir au minimum un dossier général, que j'ai appelé moi organisation du dossier de travail ici, mais qui représentera l'ensemble de votre travail. Donc ce peut être le client, client X par exemple. A l'intérieur de ce dossier, vous devez avoir impérativement minimum deux dossiers. Vous pouvez également en ajouter si vous le souhaitez. Mais un dossier qui comportera tous les éléments de travail, il s'agira ici par exemple des images de base que vous aura donné votre client, de tous les logos en Illustrator, de toute votre maquette Photoshop. Donc ça, c'est votre travail, c'est ce que vous allez réaliser avec les différents logiciels à votre disposition. L'ensemble de ce travail doit être mis ensuite, doit être exporté, doit être optimisé en vue de votre site. Tout ce qui concerne votre site, donc tout ce qui sera par la suite envoyé sur le web, doit être impérativement, obligatoirement, sans quoi vous allez vous y perdre, à l'intérieur du dossier site. A l'intérieur du dossier site, vous ne pouvez pas y ajouter des éléments de travail. Par exemple, un fichier PSD n'a rien à faire ici. En effet, un fichier PSD est souvent très lourd et vous allez, à la fin de votre travail, prendre l'ensemble de ces documents et les placer sur votre serveur web. Donc vous comprenez bien que si vous avez un fichier PSD, d'abord il ne servira à rien et ensuite il va alourdir inutilement l'espace disponible de votre serveur. Alors à l'intérieur de ce dossier site, il est souvent organisé de cette manière, là encore, il s'agit d'un site relativement petit. Il y aura donc la première page du site située à la racine, donc immédiatement dans le dossier site, qui se nomme index. Alors ça c'est très important, ne la nommez pas accueil ou ne la nommez pas je ne sais quoi, bonjour. Nommez-la index car tous les serveurs du monde sont paramétrés pour pouvoir recevoir la première page d'un site qui se nomme index. Par exemple, lorsque vous faites eleform.com, en fait vous faites eleform.com slash index sous-entendu. Vous ne l'écrivez jamais, mais la première page du site eleform se nomme index. Donc ça, c'est la première notion importante à retenir, la première page du site doit s'appeler index. Les autres pages pourront s'appeler comme vont vous semble, alors on pourrait imaginer que les autres pages vont être créées à l'intérieur de ce dossier site, à côté du dossier index, ou éventuellement dans un nouveau dossier que vous nommerez comme vous voulez. Vous pouvez le nommer page si vous le souhaitez. Page, par exemple, et je le passe dans le dossier site, donc voilà, nous pourrions enregistrer toutes nos pages ici. Donc à l'intérieur du dossier site, le fichier index est le premier, les autres peuvent être soit à côté, soit à l'intérieur d'un nouveau dossier. Il y aura également un dossier médias et un dossier images. Alors dans le dossier médias, vous y incorporerez vos vidéos, vos audios, d'autres choses éventuellement, et le dossier images, toutes les images qui ont été optimisées. Je vous rappelle que les images pour un site web doivent être soit au format JPEG, GIF ou PNG. Ici, il ne s'agira que des fichiers finaux de vos images, c'est-à-dire compressés et mis à la bonne taille. Il y aura également un dossier CSS qui comportera toute votre feuille de style. Généralement, il y en a 2, 3, 4, voire un petit peu plus éventuellement. Ainsi que les fichiers JavaScript si besoin est. Dans le cas présent, il n'y en a pas, mais cela permettra d'organiser correctement votre site. Je récapitule. Dans le dossier de travail, il y a tous les éléments de travail. Tout ce qui concerne Illustrator, Photoshop ou d'autres documents premières, si vous avez des montages vidéo ou d'autres logiciels. C'est un dossier qui est souvent très lourd puisqu'il a tous les éléments natifs, les éléments de base. Il y a ensuite un dossier site qui comportera l'ensemble des éléments qui seront par la suite mis sur le serveur. La mise sur serveur étant le contenu du dossier site. Merci d'avoir regardé cette vidéo !
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5