Comment Repenser Un Modèle De Site Web

Table des matières:

Comment Repenser Un Modèle De Site Web
Comment Repenser Un Modèle De Site Web

Vidéo: Comment Repenser Un Modèle De Site Web

Vidéo: Comment Repenser Un Modèle De Site Web
Vidéo: Comment créer un bon design de site web SANS être designer 2024, Décembre
Anonim

La façon la plus simple de créer un site Web est d'utiliser un modèle. Cependant, pour que la ressource se démarque, vous devez modifier la disposition par défaut. Et ici, vous ne pouvez pas vous passer de connaissances de base en html et en css.

Comment repenser un modèle de site Web
Comment repenser un modèle de site Web

Instructions

Étape 1

Trouvez le modèle de site Web qui vous convient le mieux sur Internet. Faites attention à ses capacités, à sa capacité d'adaptation à la taille du moniteur, aux fonctionnalités du menu et à la disposition des colonnes. Téléchargez la version que vous aimez sur votre ordinateur, décompressez l'archive. Vérifiez ses performances en téléchargeant les fichiers à la racine du site. Peut-être que le modèle contient des erreurs et ne s'installera pas correctement, alors il ne servira à rien de travailler avec lui à l'avenir.

Étape 2

Même si vous n'allez pas refaire complètement le modèle, remplacez la plupart des images, et surtout celles qui se trouvent sous forme de logo. Remplacez chaque image de cette manière:

- ouvrir le fichier graphique dans le programme Photoshop;

- dans le menu "Image" - "Taille de l'image" regardez ses paramètres;

- ouvrir une nouvelle feuille avec exactement les mêmes dimensions;

- créer l'image souhaitée à l'aide des outils applicatifs;

- aplatir tous les calques et enregistrer (pas pour le web) une nouvelle image sous le même nom et dans le même dossier, en définissant le format d'origine.

Ainsi, au lieu d'une image, une autre devrait apparaître.

Étape 3

Dès que vous modifiez toutes les images, compressez le dossier avec les fichiers (dans le cas de Joomla) et téléchargez-le via le panneau d'administration du site dans le menu "Extensions". Voyez si le thème s'affiche correctement avec les nouvelles illustrations.

Étape 4

Modifiez le reste des paramètres dans style.css. De plus, il est beaucoup plus pratique de le faire non pas via le panneau d'administration, mais sur un ordinateur. Il est raisonnable d'utiliser localhost (Denver) pour voir le résultat des transformations dès que possible. Cela évitera d'avoir à télécharger le résultat sur le serveur à chaque fois afin de visualiser les résultats après la prochaine édition.

Étape 5

Téléchargez le plugin FireBug gratuit pour Mozilla Firefox. Après l'installation, une icône de bogue jaune apparaîtra dans le coin supérieur droit du navigateur. Cliquez dessus ou appuyez sur la touche F12 et en bas de l'écran, le code de la page apparaîtra dans une version réduite. Il peut être ouvert en passant la souris sur les signes plus. Et si vous cliquez sur la ligne d'un élément, il sera mis en évidence en haut de l'écran. Sur le côté droit de la fenêtre avec le code, vous trouverez des styles indiquant les lignes responsables de l'apparence. Et il deviendra immédiatement clair où vous devez éditer le fichier de style pour changer la conception.

Étape 6

Ouvrez style.css dans le Bloc-notes ++. Vous pouvez utiliser d'autres programmes conçus pour éditer le code, mais à cette fin, vous ne pouvez pas utiliser le "Bloc-notes" standard, sinon il y aura des erreurs dues à l'encodage. Utilisez FireBug pour rechercher les paramètres que vous souhaitez modifier et les modifier dans Notepad ++ en même temps.

Étape 7

Enregistrez le CSS final et téléchargez le fichier sur le serveur.

Conseillé: