[kajika]

salut à tous , je voudrais d'abord péciser que je connais assez de choses sur le langages html , et que j'utilise le bloc note , ensuite je me débrouille pas mal avec photoshop , de plus j'ai déja crée un site , mais en frame , et ce fut asse complexe car l'affichage diffère selon la résolution de nos surfers fous

voici le site que j'ai déja fait garo le site

ce que j'aimerais , c'est découper un webdesign que j'aurais préalablement crée sous photoshop , et en faire une page html avec photoshop ou image ready , le procéder est le mème , jusque là j'yarrive

mais ensuite , comment remplir le menu , la page qui constitue le corp , c'est a dire là ou s'afficheront les pages dont on cliquera le lien du menu gauche , sans que cela ne déforme mon tableau , et puis , que mettre en target sur les liens du menu pour que ça s'affiche au centre , donc sur le corp

j'espère que vous maurez compris car je cherche des tutos , mais c'est mal expliqué ou alors c'est moi qui ne comprend rien , pourtant je suis très patient

mon but étant de faire un site assez design , un peu beau a voir et plus pro que mon précédent

merci pour votre aide

voili voilou

[Lesrode]

kajika, le 31/05/2007 à 21:37, dit :

mais ensuite , comment remplir le menu , la page qui constitue le corp , c'est a dire là ou s'afficheront les pages dont on cliquera le lien du menu gauche , sans que cela ne déforme mon tableau , et puis , que mettre en target sur les liens du menu pour que ça s'affiche au centre , donc sur le corp

A priori il faut que tu prévoies un design dont le menu de navigation est extensible, au moins verticalement, comme ça tu n'as pas à te soucier du nombre de liens dans ton menu.

Ensuite, tu peux donner une largeur fixe à ton tableau ou à ses cellules, avec l'attribut width.
Exemple plus que de base :

<!-- tableau de 600 pixel de large -->
<table width=&#34;600&#34;>
	<tr>
		<td width=&#34;200&#34;>
			Cellule de 200 pixel de large
		</td>
		<td width=&#34;400&#34;>
			Cellule de 400 pixel de large
		</td>
	</tr>
</table>

Tu peux aussi gêrer tes dimensions (et un tas de choses) avec une feuille de stylle CSS en fait.

Sinon pour les target, il faut oublier : une page html ça ne fonctionne pas comme des frames. La technique de base : tu cliques sur un lien, ça charge une nouvelle page, aucun target la dedans.
En fait, une fois que tu as ton template de page, tu peux en faire autant que tu veux sur ce modèle et tout simplement mettre tes différents contenus pour chaque page.

Le gros désavantage de cette technique, c'est que tu vas copier/coller ton menu dans chaque page, et qu'à chaque modification, tu vas te taper des chercher/remplacer dans toutes tes pages...
Pour éviter ça, tu peux faire tes pages en .php. D'un coté tu fait "menu.php" que tu peut ensuite inclure dans tes pages gràce à la fonction include().

Bon, je suis pas forcément très clair, mais c'est pas évident sans savoir du tout à quoi ressemble ton template ni comment ta page est déformée, etc. Si tu as une url où l'on peut voir ton "brouillon", ça aiderait sans doute

Edit : J'avais pas vu

Citation

j'utilise le bloc note

T'es fou toi ! Il existe des milliards d'éditeurs bien plus efficaces. jette un oeil sur Framasoft ;)

[Zéphiroth]

Je pense qu'avant toutes choses, du doit commencer par apprendre les bases du html, c'est à dire faire des tableaux, faire des tableaux dans des tableaux, fusionner des cellules.

Une fois que tu sera à l'aise avec sa, tu pourra commencer a faire ton design, et je pense que tu réussira plus facilement à l'adapter à tes compétences de programmation. Parceque faire une créa qui pête ,c'est une chose, mais en faire une qui puisse se faire intégrer dans un site facilement, et au vu de ces compétences, c'est autre chose.

Et c'est comme photoshop, plus tu fais de HTML (CSS...), plus sa te semblera facile, plus tu connaitra les contraintes...


Sinon, utilise au moins notepad++ pour avoir une coloration des balises html, sa changera ta vie


Bref, y'a pas de solutions miracles, mais bonne chance quand même...

[Vashu-San]

J'ai fait le site du groupe de mon frere => ICI <= donc je vais te dire deja ce que j'ai du penser et les "soucis" que j'ai rencontrés.

- Deja definir une resolution pour laquelle le site sera optimisé, la gestion graphique dynamique en fonction de l'affichage est pas specialement facil a gerer si ce site est tres disigné (enfin je trouve).

- Ensuite tu peus faire ton site en fond d'ecran apres il te restera plus qu'a decouper proprement tout tes menus et fenetre et faire comme Lersode a dit plus haut.

- Pour ce qui est de l'affichage dans une fenetre perso je passe par des iframes. Un petit coup d'oeil au code source de certaines pages permet de comprendre en 3.2 comment ca marche ^^

- Pense a tester ton site au fur et a mesure sous IE et Firefox en parallel car ces deux navigateurs (les plus usités) ne gerent pas parfaitement tout pareil (les scroll barres et .css par exemple)

- Pense a optimiser tes images, si une section de ton site est de couleur unis pense plutot a passer l'image en .gif de 4 ko plutot qu'un .png de 150 ko, ton site sera plus rapide a charger et mine de rien c'est important pour ceux qui le visitent.

- Et surtout reflechis bien ton site avant de te lancer dans le codage, il existe toujour des trucs a la Mac Gyver pour realiser ce que tu souhaites mais si c'est "mal" pensé a la base ca te demandera reelement une masse enormes d'heures de taff pourrefaire des modifs et regler les soucis qui arriveront au fur et a mesure.

Si t'as des question specifiques hesites pas a les poser, je pense qu'il y a pas mal de gens competents ici qui seront pres a te file un coup de patte (ou du moins pres a t'expliquer ^^)

[kajika]

merci pour vos réponse , je n'ai pas répondu de suite , car pour que vous puissiez m'aider , je me suis concocté un design cet après midi , pour que vous m'expliquiez un peu comment je dois procéder



une fois que je me suis fait mon webdesign , et que je l'ai coupé avec photoshop ou image ready , que ça me donne ce code html

<HTML>
<HEAD>
<TITLE>Sans titre-1</TITLE>
<META HTTP-EQUIV=&#34;Content-Type&#34; CONTENT=&#34;text/html; charset=iso-8859-1&#34;>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices &#40;Sans titre-1&#41; -->
<TABLE WIDTH=757 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=2>
			<IMG SRC=&#34;images/Sans-titre-1_01.jpg&#34; WIDTH=757 HEIGHT=166 ALT=&#34;&#34;></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC=&#34;images/Sans-titre-1_02.jpg&#34; WIDTH=194 HEIGHT=345 ALT=&#34;&#34;></TD>
		<TD ROWSPAN=2>
			<IMG SRC=&#34;images/Sans-titre-1_03.jpg&#34; WIDTH=563 HEIGHT=389 ALT=&#34;&#34;></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC=&#34;images/Sans-titre-1_04.jpg&#34; WIDTH=194 HEIGHT=44 ALT=&#34;&#34;></TD>
	</TR>
	<TR>
		<TD COLSPAN=2>
			<IMG SRC=&#34;images/Sans-titre-1_05.jpg&#34; WIDTH=757 HEIGHT=46 ALT=&#34;&#34;></TD>
	</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

que puis je faire pour ajouter les liens du menu gauche , pour que cela s'affiche sur le tableau jaune a droite voilà

voili voilou

[Lesrode]

Un premier conseil : ne prends jamais le code html que te fourni Photoshop ou ImageReady : ils découpent sans réfléchir, et si tu veux ensuite t'adapter, c'est l'horreur.
Sur ton exemple, regarde la tranche 4... Elle sert à rien puisque c'est juste de la couleur de fond... Sauf que ton soft, lui il le sait pas et il te met

 <TD>
			<IMG SRC=&#34;images/Sans-titre-1_04.jpg&#34; WIDTH=194 HEIGHT=44 ALT=&#34;&#34;></TD>

En gros, il te crée une cellule de tableau qui sert à rien, et pire : qui pourrit tout ton code... Tu peux le voir avec le

<TD ROWSPAN=2>

Le rowspan n'est là que pour compenser la cellule avec l'image grise inutile...
Bref, fais toi même tes découpes, ce sera toujours bien plus propre que celles générés par Adobe ;) Quand tu exportes ton psd découpé pour le web, tu choisis "Tranches sélectionnées" et "images uniquement" (ou ce qui ressemble à ça )

D'ailleurs...

Je viens de découper/coder rapidement ton design. Voila ce que ça peut donner en live (sois indulgent, j'ai vraiment fait ça vite :pinch:)

D'après ce que j'ai compris, tu veux un design aux dimensions fixes, d'où l'ascenceur dans la "boite" principale. Et en fait, il n'apparaît pas (car inutile) mais au besoin il y en a un aussi qui s'ajoute dans la navigation.

Eclate toi à regarder comment j'ai fait. Ce sera plus simple que si je t'explique ici chaque truc je pense. Je t'ai fait un beau zip pour que tu puisses rappatrier le tout.
Si tu as des questions, hésite pas

Juste un point : la découpe sous photoshop est ultra importante ! Pour ta bannière par exemple, il faudra penser à découper chaque texte de lien cliquable (accueil, forum, etc) sans le fond, et inversement, le fond sans les texte. C'est ensuite en HTML que tu vas recomposer et mettre tes images sur le fond...

[kajika]

ok , merci lesrode , je vais matter tout ça , et si y a un truc que je ne comprend pas , je reviendrais vous embeter , mais en gros c'est le résultat que j'attendais , y aura juste un truc et ça sera bon

voili voilou

edit: voilà , j'ai réussi à remanier quelques peu le code et les images que lesrode à préalablement couper pour moi ,

test kajika.rar

j'ai a peu près compris , il y a un tableau principal , avec des cellule a l'intérieur , dont on a défini certain paramètre , et la distance entre elle , jusque là ai-je bon (avec quel programme as tu défini ces cellule car photoshop c'est un peu complexe)

donc j'ai remaniè mes image , j'ai défini des zone cliquable sur la banière , et le seul truc que je ne comprend pas , c'est comment faire pour que quand je clic sur un lien , la page demandé s'affiche dans le tableau jaune , car avec les frames , il suffit de définir le nom de la frame cible , alors comment je doit procéder siou plait

re voili voilou

[Lesrode]

kajika, le 02/06/2007 à 11:17, dit :

(avec quel programme as tu défini ces cellule car photoshop c'est un peu complexe)

Aucun programme en particulier... Comme Zephiroth, j'utilise Notepad++.
La création de cellule est juste un travail intellectuel : tu regarde ton design et tu te demande comment tu peux le faire rentrer dans un tableau. A la rigueur, tu peux le dessiner sur une feuille de papier pour bien te rendre compte quand ça devient un peu complexe.
Ensuite, il reste à coder le tableau comme tu l'as imaginé : la balise < tr>< /tr> pour créer une ligne, < td>< /td> pour créer une cellule dans une ligne, et les attribut de < td> "colspan" et "rowspan" pour gêrer les fusion de plusieurs cellules, horizontalement ou verticalement.

Citation

le seul truc que je ne comprend pas , c'est comment faire pour que quand je clic sur un lien , la page demandé s'affiche dans le tableau jaune , car avec les frames , il suffit de définir le nom de la frame cible , alors comment je doit procéder siou plait

Comme je te le disais plus haut, il ne faut plus penser comme avec des frames. Il faut que tu voies chaque pages comme une entité distincte, indépendante des autres.

Donc, pour chaque lien dans ton menu de gauche tu mettras

<a href=&#34;page1.html&#34;>Lien vers page1.html</a><br />
<a href=&#34;page2.html&#34;>Lien vers page2.html</a><br />
etc

et tu devras créer autant de pages différentes que tu as besoin. (page1.html, page2.html, etc)
Et dans chacune de ces pages, tu copies/colles tout ton code (que tu as actuellement dans index.html) et tu modifie le contenu du bloc principal pour correspondre à ce que tu veux.

J'espère que c'est assez clair dit comme ça, car c'est vraiment la base de la création de site, sans quoi tu n'iras pas très loin

Si tu veux absolument rester dans une structure frame, tu as la solution de Vashu

Vashu-San, le 01/06/2007 à 11:27, dit :

- Pour ce qui est de l'affichage dans une fenetre perso je passe par des iframes. Un petit coup d'oeil au code source de certaines pages permet de comprendre en 3.2 comment ca marche ^^

Bon courage à toi, tu as déjà bien avancé je pense

PS : le must ensuite, c'est de te tourner vers la création d'un fichier feuille de style CSS pour définir toutes tes mises en page etc. Tu devrais trouver des tutos assez facilement (sinon, on est toujours là )

[kajika]

ok , je croyais qu'il y avait un attribut a donner au lien , j'ai compris le principe des iframe , mais je prefère un truc normal , car comme ça sur chaque lien du menu , genre video , je clic , je mettrais un nouveau fond pour la bulle de droite, et comme je ne sui pas un pro en tableau , meme si je comprend leur fonctionement en gros , je te demanderai un autre service

le premier design , était surtout pour me faire la main , je me suis beaucoup consacré aujourd'hui , enfin hier , et donc voilà le design que je voudrais utiliser



et je voudrais qu'avec le fond de la page , ça donne ceci



voilà , et encore merci pour vos conseils et votre aide , particulièrement lesrode

voili voilou

edit:c'est bon , je m'essaye au code tableau grace a photoshop , et je m'aide des balise d'attribut grace au travail déja effectué sur le premier découpage , je m'en sort à peu près , je vous montrerai le résultat

[kajika]

pour les curieux , j'ai enfin réussi à me débrouiller , voilàa ce que ça donne mon site, maintenant me retse plus qu'à remplir mon site enjoy

voili voilou

[Lesrode]

Bon ben c'est cool, la voie du HTML est longue et semée d'embuche

[Voir le message caché (spoiler)]

tu parles, le HTML c'est tout facile

mais c'est un bon début

Par contre

kajika, le 03/06/2007 à 01:13, dit :

edit:c'est bon , je m'essaye au code tableau grace a photoshop

Sincèrement, essaye d'oublier photoshop pour créer tes tableaux html, ça ne peut que te créer des soucis par la suite
Vas y à la mano, tu verras que comme ça tu maîtriseras beaucoup mieux ta mise en page, et avec un peu de pratique tu pourras vraiment faire pas mal de chose juste avec les tableaux...

[Voir le message caché (spoiler)]

avant de passer au niveau supérieur avec les feuilles de style ;)

[Chico008]

dans tout les cas les valeur des cellules de ton tableau doivent etre fixe pour pas que ca change de taille.
ensuite moi j'ai preferer l'utilisation d'Iframe, bien moin prise de tete.
et maintenant je passe carement en php en faisant des include des pages a voir (plus aucune frame ni iframe), l'index restant fixe (avec on menu).
exemple ici => www.freeworldsrp.power-heberg.com

[Lesrode]

Le problème avec les iframes (même si c'est vrai que c'est bien pratique) c'est qu'elles sont indéxées par google etc. en tant que pages individuelles.
Un gars peut donc arriver sur ton site directement sur "iframe.html" et non pas "page_contenant_l_iframe.html", résultat, il voit une espèce de page incomplète, qui ressemble fortement à une impasse... et ça, c'est mal
C'est la même problématique qu'avec les frames en fait...

Par contre, pour les pages en php et la fonction include(), je suis d'accord à 100%. D'ailleurs je l'avais évoqué dans mon premier message... Mais je crois qu'il faut aussi savoir s'adapter à la demande : sans dénigrer kajika, je pense qu'il avait d'abord besoin d'une aide basique, quitte à explorer d'autres pistes plus "techniques" par la suite.
M'enfin, tu as raison de le mentionner, ça excitera p'tet sa curiosité et le poussera à s'améliorer très vite ;)

[kajika]

perso , les iframes , j'avais vu ça sur un site , mais je pense que c'est comme les frmaes , c'est efficace mais beaucoup d'inconvéniant , par contre pour le souci mentionner par lesrode , il y a une soluce à ça , un scripte qui empeche l'affichae séparément des frames , en tapant l'adresse princila de la page , dans le code de chaque frames

voili voilou