Cours de fanabeyonce-yamapi

Pour la colonne de gauche , je l'ai appelé gauche.html
Alors j'ai pas trop compris , je sais pas trop j'aimerais que le header soit centré mais dans index pour le header j'ai mis ça :

et ça c'est mon fond :

et je sais pas je n'arrive pas a trouver les bonnes mesures pour "home.html" je vais encore chercher

Ce que je fais pour avoir les bonnes mesures moi, c'est que je code le layout (sans position les i-frames), et après je fais une capture d'écran du layout codé, comme ça tu vois à combien de pixel du bord tu dois positionner ton i-frame (avec tofiltre).

Pour le header, il faut en fait ajouter un bout du fond à gauche. Avant de le faire, j'ai une petite question. Sur ton fond, tu as une ligne. Tu veux que le header (donc le "cadre" qui contient la texture" commence pile à cette ligne, ou tu veux un espace en la ligne et le début du header ?

Okk je vais essayer de faire une capture puis je vais voir .
Pour le header j'aimerais qu'il y est un espace entre la ligne et le debut du header c'est pour ça que quand j'ai "decoupé" le header j'ai mis en bas du "marron" je sais pas si j'ai bien expliqué lol

Ok. Donc sur tofiltre, tu vas ouvrir ton fond et tu vas "mesurer" le nombre de pixels que tu as entre la gauche du fond et la ligne brune (la ligne étant dans la sélection). Puis tu vas créer une nouvelle image qui fait en hauteur : la hauteur de ton header ; en largeur, la largeur de ton header + ce que tu as mesurer avant.

Puis, sur cette nouvelle image, tu la colores de la couleur de ton fond, puis tu colles ton header dessus, tout à droite.

Ce sera cette nouvelle image qui sera ton header.

Okk donc je te redis ce que j'ai fait au cas ou lol , j'ai pris mon fond et j'ai donc mesuré le nombre de pixels que j'ai entre la gauche du fond et jusqu'a la ligne .
j'ai crée une image , la hauteur est donc de 800 comme le header et la largeur j'ai pris celle du header puis celle du "fond" et donc j'ai collé mon header .. bref voilà ce que ça donne :

Spoiler:

Tu as tout bon jusqu'à ce que tu as collé le header. Il fallait le collé tout à droite. Sinon, ça joue.

Okii c'est bon comme ça ??

Spoiler:

Il manque la bordure à droite (si tu colles ton header tout à droite, tu dois avoir le "bord" de la même couleur de fond que tu avais déjà sur le header (le précédent).

Tiens :

Spoiler:

Jusqu'à la mesure de la largeur sur le fond, tu as compris. Puis tu as créé ton image qui fait la largeur du header + ce que tu as mesurer. Jusque-là, on est bon. Ensuite, tu va sur ton fond, et tu fais Edition -> utiliser comme motif ; puis tu vas sur la nouvelle image que tu as créée et tu fais Edition -> remplir avec le motif. Puis tu vas sur ton header, tu le copies ; tu retournes sur l'image que tu as créé et tu la colles l'image. Avant de valider, tu fais Clique-droit -> paramétrage manuel. En haut tu coches "automatique" et tu cliques sur un des carrés de la colonne de DROITE. Puis Ok. Et tu valides le collage.

Okk j'ai fait ce que tu m'a dit voilà ce que ça donne , mais je crois qu'il va y avoir un probleme avec le bord si j'ai bien compris :

Spoiler:

Oui, il y a toujours un problème avec le bord. Prends celle que je t'ai faite :

Spoiler:

Merci , j'ai donc changé le header dans index.html

Ok. Ca joue

Maintenant il faut que tu positionnes les i-frames. Par contre, dans la version rose, tu en avais trois. Il va donc falloir en supprimer une si tu ne veux plus que deux colonnes.

Euh les i-frames c'est dans index.html ? je l'ai fait enfin j'ai enlevé la 3eme colonne donc il reste home.html et gauche.html et j'ai modifié les mesures mais j'ai l'impression que c'est pas ça ..
voici le code :

Code:

<div id="droite" style="position: absolute; left: 227px; top: 280px;"><iframe src="home.html" name="home" align="middle" frameborder="0" height="720" width="790"></iframe></div>

<div id="gauche" style="position: absolute; left: 0px; top: 280px;"><iframe src="gauche.html" name="gauche" align="middle" frameborder="0" height="720" width="227"></iframe></div>

Déjà, il faut que je sache ce que tu veux faire Tu veux que les deux colonnes soient entre les deux lignes brunes ?

Ben en fait , ce que j'ai là c'est bon , je veux que les colonnes soient comme ça c'est à dire La colonne gauche puis il y la ligne brune puis la colonne "home"

Ok. J'ai pensé que c'était ce que tu voulais, mais j'en étais pas sûre et certaine

Alors il faudrait juste que tu diminues un peu la largeur de la colonne de gauche (quelques pixels, pour que la barre de défilement ne passe pas sur la ligne brune ) -> 2 pixels minimum en moins.

Voilà c'est fait , j'ai hebergé mes modifications , tu sais pas par hasard lol si c'est possible de ne plus avoir ces barres de defilement dans la colonne de gauche au moins .. aussinon c'est pas grave . Je pense que maintenant le menu peut etre fait non ??

Si tu veux qu'il n'y ait plus de barre de défilement, il faut que tu rallonges tes i-frames, donc qu'elles soient plus longues (les deux i-frames). Ca marche comme ça sur internet, plus tu as de texte, images... dans ta page, plus elle sera longue.

C'est le :

Code:

height="720"

qu'il faut changer. Tu mets plus que 720. Attention, il y est DEUX FOIS dans ton code, puisque tu as deux i-frames.

Je viens de le faire . Merci beaucoup !

Ok. Donc on a fait la grosse partie du boulot déjà Pour le menu, est-ce que tu as une idée de ce que tu voudrais faire ? (avec un exemple si tu as)

Oui . Alors oui j'ai une idée pour le menu : http://graphix-illusion.fr/tutos_web/?1 . J'aimerais bien faire le menu comme ça

Ah oui, tu m'avais déjà dit. Ca me revient

Je te prépare un petit tuto demain alors, concernant le CSS.

Tu peux déjà faire le menu en HTML. Pous ça, tu ouvres ta page (gauche.html) dans Notepad++, pour qu'on puisse modifier plus facilement le code. Tu copies le code que je t'ai mis ci-dessous.

Code:

<div id="menu">
<a href="lien1.html">LIEN 1</a>
<a href="lien2.html">LIEN 2</a>
<a href="lien3.html">LIEN 3</a>
</div>

Tu peux changer le menu si tu veux, mais ça n'a pas vraiment d'importance. C'est juste pour qu'on sache à quoi doit s'appliquer ce que tu auras préciser dans le CSS.

Il te faut changer les lien1.html, lien2.html... Ce sont les liens des pages auquel tu veux que le lien amène. Puis le LIEN 1, c'est ce qui sera écrit dans ton menu (genre Accueil, Tutoriels...) Si tu veux mettre plus de lien, tu copies la ligne d'un des liens, et ça t'en donne plus

En fait, pour faire court, on définit un "div" (qui a un nom particulier, d'où le id="menu"), et dans le CSS, on va définir des trucs qui doivent s'appliquer à CE div. Tout simplement.

Par contre, je te rappelle qu'il faut ajouter un bout de code à tes liens pour qu'ils s'ouvrent dans l'i-frame de droite.
A ajouter :

Code:

target="droite"

(droite est le nom de ton i-frame de la grande colonne si jamais)

Ca te donne (qu'un bout) :

Code:

<a href="lien1.html" target="droite">LIEN 1</a>

(à faire de même pour les autres liens du menu)

Bien sûr, pour le moment, ça ne ressemble absolument pas à ce que tu m'as montré, ce qui est normal vu qu'on a encore rien défini dans le CSS. On a fait que préparer le terrain

J'ai tout fait , pour le "target" j'ai du changer "droite" par "home" bref

Ok Tu changes ce que tu veux après tout, c'est ton site

Alors on passe au CSS maintenant

Je te poste le code de "base", et après on mettra différentes propriétés dedans. Tu te rendras vite compte que ces menus ont l'air super sophisitqués, alors qu'en fait c'est simple comme bonjour à faire

Tu peux me dire ce que tu voudrais précisément (exactement comme dans l'exemple... ; ou une bordure à droite et pas à gauche...)

Code de base : (il y en a plusieurs, comme chaque fois : lien qui s'affiche, lien quand la souris passe dessus, lien visité...)

Code:

#menu a:link{
display: block;
font-family : arial;
font-size : 15px;
color: #000000;
line-height: 40px;
background-color: #FFFFFF;
}

Ci-dessus, tu as ce qui concernet le lien qui s'affiche. Le menu, c'est le fameux nom qu'on a donné au div dans le code HTML. Le #, c'est juste pour dire que ça fait référence au div (ce sont des conventions).
-> display: block = c'est pour dire que c'est en block. Cherche pas à comprendre, tu laisses comme ça
-> font-family ; font-size = police et taille de la police
-> color = couleur de la police
-> line-height = c'est la hauteur de ton "fond" qu'il y aura derrière la police.
-> background-color = la couleur du fond (qu'il y aura derrière la police).
Pour le moment, il n'y a pas de bordure. Tu me diras précisément ce que tu veux faire pour ça

Code:

#menu a:visited{
display: block;
font-family : arial;
font-size : 15px;
color: #EEEEEE;
line-height: 40px;
background-color: #333333;
}

Il n'y a rien de nouveau dans les proprités. Ici, c'est ce qui s'affichera quand les liens auront été visités.

Code:

#menu a:hover{
color: #BBBBBB;
line-height: 40px;
background-color: #222222;
}

Là, il s'agit des liens lorsque la souris passe dessus. Pas de nouvelles propriétés non plus.



Voilà. Si tu as des questions, tu n'hésites pas

Pour le menu j'aimerais bien qu'il soit "exactement" comme dans l'exemple . J'ai modifié les couleurs , taille etc .. mais par contre ces codes je dois les mettre ou ?? Car je les ai mis dans style.css et ça ne change rien