Page d'accueil avec images

[MelissaD]

Bonjour,

Je voudrais savoir comment on fait des pages d'accueil (messages d'accueil) comme sur ce forum svp ?
http://graph-style.forumn.biz/

Je leur ai demandé et ils m'ont dit que c'est avec un logiciel, mais il n'y a pas moyen de faire comme ça (image avec des textes, codes, etc. dessus) en css ?

Merci d'avance =)

[Horatio]

Bonjour,

Pouvez vous nous fournir un schéma de ce que vous désirez plutôt qu'une copie de co forum.

Cordialement

[MelissaD]

Voilà j'ai fais le schéma et j'ai mis ce que je voudrais.
Par-contre j'ai oublié un détail dans "nos partenaires", je voudrais que les images changent d'opacité au passage de la souris aussi. (Enfin toutes les images quoi, partenaires, staff, concours, etc.)

Voici les images avec description :

Spoiler:

Et les images sans description si besoin :

Spoiler:

Voilà donc serait-il possible de faire ça ??

Merci d'avance =)

[MelissaD]

UP ?

[tupac]

Bonjour

Dans votre deuxième SPOILER vous avez placé deux images laquelle dois-je prendre pour votre page d'accueil?

[MelissaD]

Bonjour,

Ben en faite je voudrais les deux, je voudrais des onglets et quand on passe dessus, que l'image change.

[Lixyr]

Bonjour. Pour ça Melissa, tu as plein de topiques qui parlent de PA de ce genre-là, sur ce forum. Il suffit de faire des recherches, et le tour est joué.
Tente donc par toi-même de faire cette PA, et ensuite, reviens nous voir si tu as un problème.

Cordialement,
Lixyr.

[MelissaD]

Justement j'ai déjà cherché mais je n'ai pas trouvé... Les seules que je trouve c'est des PA avec des tableaux mais ce n'est pas ce que je veux (avec des images)

[Bad_girls]

Justement j'ai déjà cherché mais je n'ai pas trouvé... Les seules que je trouve c'est des PA avec des tableaux mais ce n'est pas ce que je veux (avec des images)

hello!

Peut-être devrais-tu commander ta page auprès d'un graphiste?!?

[MelissaD]

Ben le graphiste saura rien faire vu que les images je les ai déjà, c'est le coder qu'il faudrait et je ne sais pas du tout comment m'y prendre et je n'y connais rien en codage.
Je ne sais pas non plus à qui demander pour avoir ça car on m'a dit qu'il n'y en a pas beaucoup qui savent faire ce genre de PA...

[Bad_girls]

Ben le graphiste saura rien faire vu que les images je les ai déjà, c'est le coder qu'il faudrait et je ne sais pas du tout comment m'y prendre et je n'y connais rien en codage.
Je ne sais pas non plus à qui demander pour avoir ça car on m'a dit qu'il n'y en a pas beaucoup qui savent faire ce genre de PA...

malheureusement je ne peux pas t'aider, mais cherche un forum d'aide pour les webmaster, je suis sûre que tu trouveras quelque chose de bien qui pourra te faire ton code et la mise en place

Bonne chance

[MelissaD]

J'ai déjà cherché, mais sans résultats :/
C'est pour ça que je demandais ici, je pensais qu'il y aurait des codeurs qui m'aideraient. Je ne sais même pas si c'est possible de faire la PA juste avec des codes, à la base c'était ça ma question, car on m'avait dit qu'on ne pouvait faire ça qu'avec un programme mais on ne m'a pas expliqué comment faire...
Le programme qu'on m'a dit est ImageReady mais je ne trouve pas les bons outils pour faire la PA c'est pour ça que je me suis adressée ici en demandant si on pouvait faire une PA comme ça juste avec des codes et les deux images que j'ai donné.

[Lixyr]

On peut faire ça sous Gimp, ou bien utiliser un tableau avec onglets dans lequel on mettra les images en fond, pour passer les codages par dessus.

Des demandes de PA en onglets, il y en a des dizaines voire même plus sur ce forum d'entraide. Je peux l'affirmer. ^^

Pour le reste, les tableaux sont également utiles pour ce genre de codage.


Dans un premier temps, Melissa, occupe toi de créer deux tableaux distincts avec une seule cellule pour chacun. Et mets tes images en fond de cellule. Ensuite on s'occupera des onglets, et ensuite du remplissage.

Je vais t'aider, si ce n'est que ça.

[MelissaD]

À vrai dire, je ne sais pas non plus faire des tableaux, etc. :$
Par-contre pour les onglets ça je sais faire, pour le moment sur mon forum ce sont des images cliquables avec des onglets pour changer d'images au passage de la souris.

[tupac]

Bonjour

Je vous ai fait une première ébauche dites-moi si cela vous plait et je ferais les réglages par la suite donc placer l'ensemble du code dans votre page d'accueil.

Spoiler:

[MelissaD]

Oui ça me plait beaucoup comme ça
Il reste juste à mettre le codage dedans, est-ce bien ça ? (les textes, images, etc.)

[Lixyr]

Ces onglets sont dans la Page d'Accueil ? On peut reprendre le code ?

Les tableaux c'est simple. ^^
Ça se fait ainsi :

<table> => une table pour bordure.
<tr> => une ligne
<td> => une cellule

Ces balises se ferment, et ça se fait toujours dans cet ordre :

Code:

<table>
  <tr>
      <td>
      </td>
  </tr>
</table>

=> une bordure contenant une ligne.
=> une ligne contenant une cellule.
=> le contenu se met toujours entre deux balises de cellule. Pas ailleurs.

On peut avoir autant de cellules que l'on veut dans une ligne
On peut avoir autant de ligne que l'on veut dans un tableau

Ensuite, ça devient un peu plus compliqué quand on rajoute des lignes.

Un exemple d'un tableau avec deux cellules et deux lignes :

Code:


<table>
  <tr>
      <td>CONTENU CELLULE 1 LIGNE 1</td>
      <td>CONTENU CELLULE 2 LIGNE 1</td>
  </tr>
  <tr>
      <td>CONTENU CELLULE 1 LIGNE 2</td>
      <td>CONTENU CELLULE 2 LIGNE 2</td>
  </tr>
</table>

Pour mettre une image en fond dans un tableau, on rajoute le code dans la balise d"ouverture du tableau : <table>

Comme ceci :

on ajoute l'attribut style
on entre le code associé à l'attribut style entre des guillemets :

Code:

<table style="background-image:url(URL_DE_LIMAGE_DE_FOND);">

Voilà pour le tableau.


@Tupac, pourquoi tu ne mets pas les codes JavaScript dans la gestion des codes JavaScript ? Ça prendrait moins de place dans la PA.

[MelissaD]

En faite pour les tableaux, j'ai déjà lu des tuto' et tout pour les faire et je n'y comprend rien... J'ai déjà essayé mais je n'ai jamais réussi. Faut dire que je suis très nulle pour les codes, aussi :/
Tout les codes que j'utilise, c'est grâce à des tuto' et le reste je les demande sur forumactif...

[Lixyr]

Ca parait compliqué parce qu'il ne faut pas se mélanger les pinceaux. Personnellement j'utilise NotPad++ quand je dois faire le tri dans les codes de PA avec des tableaux multiples. Comme ça je peux faire mes alinéas, et ainsi je m'y retrouve mieux. Et au final ça devient simple.

[tupac]

J'allais vous proposer par la suite de vous placer textes et images donc si vous avez besoin d'aide n'hésitez pas.

[MelissaD]

Lixyr Yrna > Moi j'utilise un simple bloc note et je n'y arrive pas du tout... Il n'y a pas de programme d'aide spécial codage ?

Tupac > Justement les images et les onglets je sais mettre mais les images et les textes je ne sais pas les mettre sur les images données... Donc je voudrais coder les images en faite, mettre des textes sur les images données et des images pour le staff, etc. qui changeraient d'opacité au passage de la souris, mais je ne sais pas faire, c'est justement ça que je demandais ^^'

[Lixyr]

Le bloc note, ce n'est pas pareil. ^^ C'est juste un bloc note. C'est utile mais pas pratique du tout.
Notepad++ c'est très bien. ^^ On nous l'a conseillé en cours de programmation, et je confirme que quand on sait l'utiliser, c'est bien.

Pour les tableaux, il y a le logiciel gratuit NVU, qui aide bien. ^^ Il donne le code du tableau que l'on souhaite, en fait. Donc pour apprendre à faire des tableaux ça peut être un début. Mais bon, il ne permet qu'apprendre les tableaux simples. Pour le reste, il faut apprendre soi-même.
Mais déjà, avoir les bases, c'est pas mal.

[tupac]

Puis-je avoir les images que vous désirez placer et a quel emplacement voulez vous les placer?

[MelissaD]

Bonjour,

Désolée de ne pas avoir répondu plus tôt, j'ai eu quelques problèmes de connexion et quand ma connexion allait, c'était pendant quelques minutes...
Bref' voici les images. Pourriez-vous aussi mettre les images qui changent d'opacité et que quand on clique sur les images, qu'on atterrisse sur une autre page ? (Un lien de redirection, quoi)
Je voudrais également, si possible, qu'on mette une infobulle sur les images du staff et sur l'image du concours. Avec dedans où on mettrait le pseudo, le rang et pour le concours on mettrait le pseudo du gagnant avec un lien de redirection vers le profil quand on clique sur le pseudo dans l'infobulle, et quand on clique sur l'image du concours, qu'on atterrisse sur le lien de l'image, pour la voir en plus grand...

Si vous ne savez pas faire, ce n'est pas grave :}

Les images à placer dans la catégorie staff :
(Celles-ci en une ligne)
1 2 3 4

(Celles-ci sur une ligne en-dessous des quatre premières)
1 2 3 4 5

Ensuite l'image pour le concours :
1


Pour les images du partenariat, serait-il possible de mettre les même partout et que je change les images moi-même svp ? Car les images je ne les ai pas sous la main là ^^'



Merci d'avance :}

[tupac]

Je pense que j'ai tout ce qu'il me faut par contre pourriez vous me donner la taille des images partenaire pour que je puisse placer en attentant des images blanche.

[MelissaD]

Ce sont des images de taille 88.31px :}

[tupac]

Ok merci je m'y colle.

[tupac]

Bonjour
EDIT: message effacé

[MelissaD]

Coucou,

Voilà les images en taille réduite :
1 2 3 4

Celles à mettre en-dessous :
(S'il n'y a pas la place pour les mettre toutes sur la même ligne, mettez la 5eme en-dessous des autres ^^)
1 2 3 4 5


Merci :}

[tupac]

Bon c'est fait.
Commencez par placer le code suivant dans votre page d'accuiel.

Spoiler:

et celui-là dans votre feuille de style css

Spoiler:

si il y a des choses a fignoler n'hésitez pas a demander.