Comment utiliser Photoshop pour concevoir un site Web?

Télécharger et installer photoshop

Ouvrez votre version de photoshop sur votre ordinateur personnel et créez un nouveau document avec la hauteur et la largeur que vous choisissez (la largeur normale est de 800px-900px, la hauteur normale est de 1200px-1500px). vous pouvez nommer le dossier (facultatif).

Créez un en-tête pour votre site (à partir d'une image existante ou à partir de zéro) et avec le logo de votre site Web intégré.

Créez les boutons de menu de votre site (forme et couleur, espace entre eux, sous forme de menu supérieur, menu inférieur, menu latéral droit ou gauche ou une combinaison de deux ou trois ensembles de menus, etc...)

Créez la zone de contenu, la zone de pied de page, un endroit pour mettre des bannières, un endroit pour une galerie de photos et ainsi de suite, jusqu'à ce que vous ayez terminé l'apparence générale de votre site.

Maintenant pour la partie difficile: dans Photoshop, découpez et exportez votre site fini, en donnant des noms à toutes les tranches avant d'exporter (par exemple: marquez la zone qui est l'en-tête avec l'outil de découpe et nommez-le "en-tête", marquez la zone du bouton d'accueil et nommez-le "bouton d'accueil" et ainsi de suite à chaque partie distincte du site Web).

Il est conseillé de laisser la zone de contenu vide car vous ne l'enregistrez que sous forme de tranches d'image et le texte apparaîtra comme une partie de l'image, lorsqu'elle est vide, vous pouvez ajouter le contenu de chaque page séparément.

Exportez-le dans un nouveau fichier sur votre bureau, l'exportation créera un fichier HTML (qui sera votre page Internet, pas encore centrée et sans contenu), un fichier CSS et un dossier d'images avec toutes les différentes tranches et images à l'intérieur.

Ouvrez le fichier HTML avec onenote ou le bloc-notes et apportez vos modifications en HTML (centrez toute la page, définissez une couleur d'arrière-plan sur toute la page, placez le contenu dans une balise div où se trouve l'image de contenu ou créez quelques paragraphes en utilisant la balise P à l'intérieur de la balise div, créez les métadonnées pour les mots clés, le contenu, etc.).

Copiez et collez la même page HTML autant de fois que le nombre de pages Web que vous avez, mais veillez ensuite à les renommer en pages associées (c'est-à-dire.home.html, aboutus.html, contactus.html et ainsi de suite...).

Créez des liens internes pour les pages dans les fichiers HTML (ou faites-le avant de créer d'autres pages afin de ne pas avoir à vous répéter) où le code de l'image du bouton se trouve en créant des div et en donnant les adresses de lien des boutons.