| Bienvenue sur HaKwArA - Forum Maroc. |
![]() |
| LinkBack (1) | Outils de la discussion | ![]() | Modes d'affichage | ![]() |
| |
#1 (permalink)
| ||||
| Bonjour à tous, Je voulais juste vous faire part d'une méthode assez simple pour créer son propre site web, gratuitement, quand on à les outils b3da ^^ Intro Vous aurez besoin de Photoshop, [vous ne pouvez pas voir le lien].[enregistrez vous ici] ou un éditeur du style (Dreamweaver), un log de transfert FTP ([vous ne pouvez pas voir le lien].[enregistrez vous ici]->serial facile à trouver, pourquoi s'en priver ^^, [vous ne pouvez pas voir le lien].[enregistrez vous ici]), et un espace d'hébergement of course ![]() Création du webdiz' Déjà, commencez par créer votre webdesign grâce à Photoshop. Vous trouverez pas mal de tutos sur Internet (de très bons sur [vous ne pouvez pas voir le lien].[enregistrez vous ici], mais bon les meilleurs sont ceux qui sont personnalisés). Vous devriez donc avoir votre .psd avec tout en place. Généralement un site est composé des éléments suivants : Header (la bannière), le Menu, le corps ou seront les infos genre texte etc, et éventuellement un footer (copyright ou autre...). Prenez l'outil Slice (ca doit être Trancher en français je pense) et découpez votre design (header, boutons, footer, corps, etc...). Allez maintenant dans File -> Save for web and devices (fichier -> sauver pour le web), choisissez votre format d'image préféré, et enregistrez dans le dossier de votre choix. Vous avez donc votre une page web toute faite :D Version Light Mais on peut pas s'arrêter là, en effet la page est uniquement constituée d'images, c'est donc trèèès lourd à charger réélement sur internet, et il y a forcément pas de lien ^^". C'est là qu'entre en jeu votre éditeur (NVu pour ma part). Ouvre votre page html avec le log. Généralement, Photoshop génère des images sans interêts genre les carrés noirs qui servent à rien. Supprimez-les grâce à Nvu, c'est déjà quelques ko de gagnés :D Pour créer les liens, clic droit sur le bouton de votre choix et créer un lien. Vous aurez donc le choix entre lien relatif ou absolu, cad vers une page dans le même dossier que la page actuelle (dossier/page.html) ou bien vers le réseau internet ([vous ne pouvez pas voir le lien].[enregistrez vous ici]). Bref, créez votre lien. Deuxième astuce pour optimiser le temps d'affichage, Photoshop génère pour chaque page ses boutons etc même si c'est le même ! On va donc remplacer tout ca par une seule image. En clair, voilà le truc : on a 2 pages Il ya donc le double de chaque image. Gardons-en une quoi ^^ Pour ce faire, allez sur la deuxième page, séléctionnez l'image et remplacez son lien par celui utilisé par la première (les images sont dans le dossier /images, créé par Ps). Voilà, encore un peu de vitesse gagnée ^^. Pour le texte je pense que c'est assez basique, donc je vous laisse faire ![]() Les titres des pages, le fond de la page sont dans le menu Format. L'alignement, c'est comme sous Word. Voilà, ce sont les principales actions je pense ^^ Très bon outil open source pour votre site ;) Rendez-le publique ! Créez-vous un espace d'hébergement gratuit (ifrance, Zymic, communautaire) ou payant (... xD), récupérez les infos FTP (adresse du serveur, username, pass), ouvrez votre gestionnaire FTP (voir début de page) et rentrez ces infos. Connectez-vous, et envoyez les pages html et le dossier images. Voilà ! C'est tout ![]() N.B : La page d'accueil doit bien être renommée en index.html Conclusion Bon perso, j'utilise cette méthode quand faut vraiment faire vite quoi, rien ne vaut un codage xhtml/css, mais faut le temps d'apprendre et coder, mais je vous y invite vivement (tutos sur le site du zero, alsa créations...). La page sera pas mal niveau graphique mais assez lente à charger (bon pas mal quand même faut avouer), et non conforme ![]() ![]() Si vous voulez un tuto imagé et plus détaillé, faites-le moi savoir ![]()
| |||||
|
| | |
| ------------------ HaKwArA.CoM ... | |
| | #3 (permalink) | ||||||||||||||
![]()
Points : 58
|
Pouvoir: 12 Reputation: ![]() | Meme si c'est un peu long ton tuto , mais merci quand meme ![]()
| ||||||||||||||
|
| | #4 (permalink) | ||||||||
Points : 0
|
Pouvoir: 0 Reputation: ![]() | nvu ou dremower fond un sale codage : -- soluce : utiliser le block note avec le [vous ne pouvez pas voir le lien].[enregistrez vous ici] | ||||||||
|
| | #5 (permalink) | ||||||||||||||
Points : 16
|
Pouvoir: 4 Reputation: ![]() | c'est cool ton tuto merci ;D
| ||||||||||||||
|
| | #6 (permalink) | ||||||||||
Points : 0
|
Pouvoir: 0 Reputation: ![]() | merci pour l info
| ||||||||||
|
| | #7 (permalink) | ||||||||||
Points : 1
|
Pouvoir: 1 Reputation: ![]() | s il te plait si tu as le temps met un tuto pour sites avec xhtml / css etc merci d avance ![]()
Dernière modification par neXus' ; 13/08/2008 à 11h33. | ||||||||||
|
| | #8 (permalink) | ||||
| | merci pour ce tuto
| ||||
|
| | #9 (permalink) | ||||||||||||||
Points : 16
|
Pouvoir: 4 Reputation: ![]() | Je vous deconseille cette metode si vous utiliser l'hebergement de FREE car il est deja lent si vous faite avec sa sautez par la fenetre ![]()
| ||||||||||||||
|
![]() |
LinkBacks (?)
LinkBack to this Thread: http://www.hakwara.com/web-mastering/creer-un-site-web-avec-photoshop-6379.html | ||||
| Envoyé par | For | Type | Date | |
| HaKwArA - Forum Maroc | This thread | Refback | 15/06/2008 12h26 | |
| Utilisateurs regardant la discussion actuelle : 1 (0 membre(s) et 1 invité(s)) | |
| Outils de la discussion | |
| Modes d'affichage | |
|
|
Discussions similaires | ||||
| Discussion | Auteur | Forum | Réponses | Dernier message |
| Creér Votre Site ! | BinX | Web-mastering | 2 | 06/08/2008 15h43 |
| Créer un site e-commerce avec Dreamweaver 8 et PHP/MySQL (1Cédérom) | mouhandou | Vos besoins | 0 | 01/05/2008 15h20 |