Discussion :

[Diezo]

Salut à tous,

Je voudrais savoir comment est-ce que l'on fait pour créer un désign de site juste avec du HTML...

Je vais m'expliquer plus clairement, je connais les langages HTML, CSS (les bases), C et un peu le PHP (apparament quand on connait le C le php est pas très compliqué...). Maintenant je n'a jamais crée de site webs et voudrais en crée un pour un artiste (mon frère) pour qu'il puisse y mettre ses différents projets.

Il va donc créer lui même le désign mais ceci avec Photoshop seulement, et comment devrai-je faire pour que, à partir ce cette image photoshop du site, je puisse l'intégrer dans mon code HTML ?
En regardant les "templates" j'ai bien l'impression que en fait une page internet est un grand tableau qui est ensuite devisé en plusieurs ligne et colonne qui contiennent des petites images du design. Devrai-je donc à partir de son image photoshop la découper en "petit-bout" et l'insérer dans des cases d'un tableau que je créerai sur HTML ?...

Enfin bref, je suis un peu perdu
En espérant que vous m'avez compris... merci de m'aider. N'hésitez pas à me demander plus d'infos

[Nemesys]

avec son image tu ne feras rien a part s'il a inséré une baniere etc.. tu pourras la recuperer et la placer dans ton code.. mais au moins tu sais que tu dois reproduire ce qu'il a fait sur son image de telle sorte que ce soit visible sur un navigateur. C'est deja un bon projet si tu es debutant ! Pour cela il faut juste un peu d'experience en html/css pour le design et aprés vient le php pour le dynamisme du site !


Voila si tu veux plus de précisions encore n'hesite pas.

[kankrelune]

avec son image tu ne feras rien a part s'il a inséré une baniere etc.. tu pourras la recuperer et la placer dans ton code.. mais au moins tu sais que tu dois reproduire ce qu'il a fait sur son image de telle sorte que ce soit visible sur un navigateur.

Non... comme il l'a décrit il va devoir passer par un découpage de son image pour ensuite la dispatché comme il faut sur sa page... .. .

@ tchaOo°

[Nemesys]

Oui s'il y a des images dessus il peut les découper (comme une banniere par exemple), mais s'il a écrit des menus a la main avec photoshop sur cette meme image globale il faudra bien qu'il le code sinon ses liens ne marcheront pas ...

[kankrelune]

Oui s'il y a des images dessus il peut les découper (comme une banniere par exemple), mais s'il a écrit des menus a la main avec photoshop sur cette meme image globale il faudra bien qu'il le code sinon ses liens ne marcheront pas ...

Oui mais c'est facilement faisable... d'autre part et c'est plus dans ce sens là que je parle de découpage il peut découper son menu pour en récupérer les contours... de même pour les bloc de contenu, etc... .. .

@ tchaOo°

[Diezo]

Oui les titres des menus etc ... seront fait pas mon frère via photoshop. Moi je dois créer les liens, lui permettre d'ajouter des news au milieu de la page ( lui il s'occupe de laisser de la place pour les news )
Et pour tout ca la meilleure solution reste donc de faire une page avec photoshop, puis de la découper encore avec photoshop puis de placer chaque bout dans les cellules du tableau de la page html ?

[kankrelune]

Et pour tout ca la meilleure solution reste donc de faire une page avec photoshop, puis de la découper encore avec photoshop puis de placer chaque bout dans les cellules du tableau de la page html ?

Tout à fait... le mieux je pense c'est que tu cherche des kits graphiques gratuits et que tu regarde comment ils sont fait... pour le reste pas de secrets... html/css... .. .

@ tchaOo°

ps : le mieux serait de ne pas mettre les titres par exemple dans les liens du menu ça te permettra une mise à jour plus facile... .. .

[marsupix]

le mieux est:
- créer le design sous photoshop (ce que ton frère a fait) en séparant bien chaque élément graphique de la page sur différents calques (ce que j'espère que ton frère a fait)
- enregistrer les "bouts d'images" qui t'interressent.
Pour le faire, par exemple tu as des boutons de menus sur un calque:
tu ne va pas enregistrer 10 images si tu as 10 boutons. une seule suffit. donc, tu affiche seulement le calque ou il y a le bouton tu fais image > rogner et laisse coché "rogner pixels transparents" et valide. l'image se réduit au bouton affiché.
Tu va alors dans fichier > enregistrer pour le web (là tu règle comme il faut pour optimiser le rapport poids/qualité, et tu enregistre ton image. Ensuite tu annule le rognage pour retrouver ton design complet et continuer avec la suite.
Pour les fonds de "cadres de news" par exemple, selon le design, tu peut les faire soir tout en css, soit séparé en 3 DIV avec une image pour la bordure du haut, une pour celle du bas, et une autre de 1pixel (ou plus si besoin selon le graphisme) répétée verticlament, pour le contenu de la DIV.

Une fois que tu as toutes tes images, fait ta page html, d'abbord sans css, en respectant la sémentique des balises etc...
Puis fait ton css en incorporant les images exportées, les couleurs etc...

Rappel toi aussi que par rapport au design de base, tu peut faire beaucoup en css en général (couleurs de fond, bordures de cadres, etc...)

[Diezo]

Merci pour toutes ces infos.
Sinon je pensais faire le design de base avec HTML et CSS sans aucune image. Je créer des blocs par ci par la dans ma page en utilisant la balise <div> ( pour le menu à gauche, la banniere, le corps au milieu) et ensuite j'injecte en fond les images de mon frère. Ce serait pas la meilleure solution ?

[ner0lph]

Si !
Et c'est même la plus souple : le jour où ton frère veut changer le design, il n'aura qu'a refaire les images et les enregistrer en lieu et place de celles existantes.
Et du coup, il peut même prévoir plusieurs graphismes (suivant les saisons par exemple, ).

[jadey]

bon dsl les amis chui pas un pro non plus mais bon je SAIS que ça n'est pas de cette façon que l'on procede pour creer un site web même si c'est un truc basique.
Pour la methode de "decoupage" c tres efficace pour faire un site proffesionnel (on creer generalement un ou deux design sous potoshop en metant sur differents calques les differents elements, ce qui permets a la foi d'etablir une charte graphique et d'avoir des elements de debut (bannieres, logo etc) pour debuter)

le code de tes pages il faudra le faire avec un outil de developpement web genre DreamWeaver ou encore FrontPage (sinon tu as le bloc-note mais ça n'est pas reelement ce que l'on peut appeler un logiciel WYSWYG lol)

pour faire de l'animation y'a pas de secret fo apprendre a bricoler o moins avec Flash...

moi ce que je te conseille de faire puisque ton frere semble se debrouiller ac Photoshop c que tu essaye de trouver un tuto pour DreamWeaver qui n'est reellement pas difficile a utiliser pr faire un site, ça te prendra pas une semaine pour apprendre a t'en servir assez pour creer un site basique...

bonne continuation

[Seb06]

ça te prendra pas une semaine pour apprendre a t'en servir assez pour creer un site basique...

1/2 journée en s'y mettant bien....

[caro17]

Salut !

Je voudrais moi aussi proceder à un decoupage pour mon design.
Mais j'ai quelques questions :
Les 'bouts' de graphisme quel'on obtiendra après, il suffira juste de les mettre en fond de bloc, et d'ajouter un hyperlien pour le menu ?
Et aussi, avec dreamweaver, comment cree t'on d'autre bloc a part le menu, l'en tête, et le corp ?

Merci

[K-Kaï]

Bon, je ne suis pas un expert en design web mais j'ai réalisé mon premier design complet recemment (un truc somme toute basique). Pas la peine de vous prendre la tête à comprendre le fonctionnement de dreamweaver pour faire ensuite la mise en page à votre place. Autant apprendre directement à faire la mise en page.

Il y a de très bons sites qui te permettrons d'apprendre les bases de la mise en page avec XHTML et CSS. Puis il y a des forums aussi pour quand tu coinces.

Sinon franchement si toute les images pour ton site sont faites (si tu doits les decouper il y a même un tutoriel sur le net -> Google). Le reste c'est juste passé un peu de tps sur le CSS pour tout mettre en place mais rien de franchement trop sorcier.