Share
Pour créer votre site Web professionnel, il existe plusieurs façons de le faire. Vous pouvez opter pour un créateur de site, vous pouvez demander à un développeur de concevoir un site pour vous ou utiliser un CMS tel que WordPress. Bien qu'il n'y ait rien de mal avec ces options, elles peuvent être trop nombreuses si tout ce dont vous avez besoin est un simple site Web pour présenter en quoi consiste votre entreprise et permettre aux clients potentiels et aux clients de vous contacter..
Si vous n'avez pas besoin de fonctionnalités sophistiquées et que vous ne vous attendez pas à bloguer ou à vendre en ligne régulièrement, un modèle de site Web sensible au HTML est tout ce dont vous avez besoin. Ici, nous allons vous guider à travers les étapes de configuration afin que vous puissiez lancer en un rien de temps.
La beauté des modèles de sites Web commerciaux sensibles au HTML réside dans le fait qu’ils sont faciles à utiliser et qu’ils ne nécessitent aucune connaissance technique particulière pour les télécharger sur votre serveur d’hébergement. Ils sont également plus faciles à modifier que d'autres constructeurs de sites Web et systèmes de gestion de contenu..
Dans ce didacticiel, nous allons vous montrer comment modifier et télécharger un modèle de site Web HTML réactif sur votre serveur afin que vous puissiez créer facilement un site Web professionnel réactif..
Avant même de commencer avec la modification de modèle de site Web réactif, vous aurez besoin de quelques éléments. Ils comprennent un nom de domaine et un plan d'hébergement, un programme FTP et un éditeur de code, un modèle de site Web sensible au langage HTML, et enfin un contenu et des images destinés à votre site. Jetons un coup d'oeil à chacun de ceux ci-dessous.
La première chose à faire est d’acheter un nom de domaine et un plan d’hébergement afin que votre site Web soit accessible en ligne. Dans la plupart des cas, vous pourrez obtenir un nom de domaine gratuit en vous inscrivant à un plan d'hébergement avec la plupart des fournisseurs. En ce qui concerne votre nom de domaine, une bonne idée serait d’utiliser votre nom commercial actuel comme nom de domaine..
Si possible, essayez d’obtenir une extension .COM car c’est la plus populaire, mais gardez à l’esprit que trouver un bon nom de domaine avec un .COM n’est plus aussi facile aujourd’hui. Dans ce cas, vous voudrez peut-être examiner d'autres extensions telles que .CO ou un domaine local tel que .US.
En ce qui concerne les fournisseurs d’hébergement, vous pouvez trouver des offres d’hébergement à partir de 5 $ / mois. Vous aurez envie de lire leur FAQ pour voir comment ils gèrent le service clientèle et avoir une idée de leurs termes et conditions. En outre, envisagez de lire les commentaires d'un hôte en particulier sur des sites Web tiers pour voir ce que leurs clients disent à leur sujet..
Les éléments suivants de notre liste sont un client FTP tel que FileZilla et un éditeur de code tel que Sublime Text. Le but d'un client FTP est de connecter votre ordinateur au serveur d'hébergement et de télécharger facilement les fichiers de votre site Web en une seule fois, au lieu de les télécharger un par un via le panneau de configuration de l'hôte. Un éditeur de code, par contre, vous aidera à éditer les fichiers du modèle et facilitera la recherche de différentes parties du code nécessitant une édition..
Sublime Text et FileZilla sont téléchargeables gratuitement et peuvent être utilisés sur des ordinateurs Mac, Windows et Linux..
Enfin, vous aurez besoin d’un modèle HTML et du contenu que vous souhaitez ajouter à votre site Web. Vous pouvez trouver une multitude de modèles HTML réactifs conçus spécialement pour les sites Web professionnels sur des marchés comme Envato Elements. Une fois que vous en avez trouvé un, téléchargez-le simplement, décompressez le dossier et enregistrez-le dans un endroit facilement accessible..
En ce qui concerne le contenu, examinez la copie qui apparaîtra sur les pages de votre site et expliquez ce que fait votre entreprise, à qui elle sert et comment elle aide les clients avec des produits et services. Vous pouvez également ajouter des informations sur les personnes clés de votre entreprise. N'oubliez pas les éléments visuels tels que les images et les logos.
Il est maintenant temps de modifier le contenu du modèle et de remplacer les informations factices par les vôtres. Pour les besoins de ce tutoriel, je vais utiliser le modèle Moose. Ce modèle de site Web réactif présente un design plat et réactif et comprend plusieurs modèles de page adaptés aux propriétaires d'entreprise, agences de création, studios numériques, etc..
Avant de commencer à modifier le modèle, il est important de bien comprendre la structure pour savoir quels fichiers vous devez modifier. Comme vous pouvez le voir sur la capture d'écran ci-dessous, le dossier décompressé contient trois sous-dossiers..
Le modèle appelé est le sous-dossier qui contient tous les fichiers qui constituent notre modèle de site Web réactif, ainsi que quelques sous-dossiers supplémentaires. Si vous utilisez un modèle différent, vous ne verrez peut-être pas tous ces fichiers et sous-dossiers, mais généralement, vous pourrez vous attendre à trouver:
Double-cliquez sur le fichier index.html ou cliquez dessus avec le bouton droit de la souris et sélectionnez Ouvrir dans Chrome (ou quel que soit le navigateur que vous utilisez). Lorsque vous consultez le modèle dans votre navigateur, vous pouvez voir qu'il existe un curseur dans lequel vous devez remplacer les images et les légendes, une section de services dans laquelle vous devez ajouter vos propres informations, etc..
Le moyen le plus simple de trouver où modifier ces informations est de cliquer avec le bouton droit sur le texte, puis de cliquer sur le bouton Inspecter lien.
La fenêtre Inspecteur apparaîtra et vous pourrez voir le code HTML utilisé dans le modèle de site Web sensible HTML sur le côté gauche de la fenêtre et le code CSS responsable du style visuel du modèle sur le côté droit. côté de la fenêtre de l'inspecteur.
Regardez le code HTML et vous verrez que la ligne de code contenant le texte sélectionné est en surbrillance. Dans l'exemple de capture d'écran, l'en-tête que j'inspecte et qui est mis en surbrillance dans la fenêtre Inspecteur se situe entre
les balises contiennent l'élément HTML du paragraphe.
Pour modifier le modèle, vous devez savoir quelles étiquettes contiennent le texte que vous souhaitez modifier et les retrouver dans l'éditeur de code. Ensuite, vous pouvez remplacer le texte par votre propre.
Maintenant que nous savons quelles balises nous devons éditer, il est temps d'ouvrir le fichier index.html dans un éditeur de code comme Sublime Text. Cliquez avec le bouton droit sur le fichier et cliquez sur Ouvrir avec du texte sublime (ou tout autre éditeur de code).
Avec votre fichier HTML ouvert dans l'éditeur de code, faites défiler jusqu'à ce que vous trouviez le même texte que vous inspectiez dans votre navigateur. Ensuite, cliquez entre les
Ensuite, cliquez entre les balises, supprimez le texte et entrez un bref slogan ou un texte descriptif. Vous pouvez également supprimer des parties du modèle de site Web réactif dont vous n’avez plus besoin. Si vous regardez la capture d'écran ci-dessous, vous remarquerez que j'ai remplacé le texte de l'en-tête et supprimé la rangée du bas des services..
Pour modifier le reste de la page d'accueil et d'autres pages du modèle, il vous suffit de répéter ce processus encore et encore..
Maintenant, expliquons comment remplacer facilement les images factices. Tout d'abord, vous devez placer toutes vos images dans le dossier images du dossier de modèle de votre site Web sensible au HTML. Ensuite, retournez sur votre navigateur et inspectez une partie de la page avec une image..
L'inspecteur vous indiquera le nom de l'image ainsi que les balises contenant cette image. Maintenant, vous pouvez revenir à l'éditeur de code et rechercher ce morceau de code. Ensuite, remplacez le nom de l'image par le nom de votre image et enregistrez les modifications..
Maintenant que vous avez saisi votre propre contenu, voyons comment styliser le modèle. Dans mon cas, le modèle Moose inclut quelques jeux de couleurs prédéfinis situés dans le style> CSS> couleur sous-dossier. Cela signifie que je peux facilement changer les couleurs en changeant simplement la feuille de style en tête du document pour ma feuille de style de couleurs préférée..
Recherchez la ligne de code suivante dans le modèle HTML:
Changer le nom en blue.css changera la couleur rouge du modèle en une nuance bleue:
Vous pouvez également modifier la feuille de style principale appelée style.css et inclure vos polices et couleurs préférées..
Suivez simplement le principe d'édition HTML: inspectez d'abord l'élément que vous souhaitez styler, puis trouvez-le dans le fichier style.css et testez différentes valeurs..
La dernière étape pour créer un site Web réactif consiste à télécharger vos fichiers sur votre serveur d’hébergement. Votre fournisseur d'hébergement devrait vous avoir envoyé un e-mail immédiatement après votre inscription avec les informations nécessaires pour le transfert de fichiers FTP.
Vous devez lancer FileZilla (ou un autre programme FTP), puis entrer les informations requises dans la barre du haut. Cela signifie que vous devez entrer le nom du serveur, votre nom d'utilisateur et votre mot de passe, puis cliquer sur QuickConnect:
Ensuite, vous souhaiterez localiser le dossier de modèles de site Web responsive HTML sur le côté gauche du programme FTP et le développer en cliquant dessus. Dans la fenêtre ci-dessous, sélectionnez tout le contenu et faites-le glisser vers la droite de l'écran FTP. Déposez les fichiers dans le dossier racine de votre serveur d'hébergement, qui est généralement le dossier public_html..
Attendez que le processus de téléchargement se termine, puis ouvrez votre navigateur et entrez votre nom de domaine. Votre site devrait maintenant être en ligne.
Maintenant que votre site est en ligne, il est essentiel d'inclure des informations cruciales sur tous les sites Web professionnels..
Il est facile de créer un site Web réactif pour les entreprises une fois que vous avez compris les éléments qui constituent la structure du modèle et comment trouver les informations que vous devez modifier. Utilisez notre didacticiel pour configurer votre site Web professionnel et n'oubliez pas de consulter notre collection de modèles HTML réactifs pour trouver le modèle idéal pour votre site..
Accentsconagua