Cours de Yume-chan

Bonjour,
cela faisait longtemps ^^ pardonnes moi pour le retard...
peut-on reprendre depuis le début s'il te plaît ? en fait il faut que j'ai fait un site d'ici à dans deux semaines... >< désolée et joyeux anniv' ^^

Administratrice Nombre de messages : 11442 Age : 32

Oui, mais je ne vais pas être très présente cette semaine, dû à mes études Wink

Mais après, on verra tout ça.

Pas de problème. Si tu veux, je créais mon header et mon fond.

Administratrice Nombre de messages : 11442 Age : 32

Oui, tu peux déjà faire ça. J'avais dû te mettre les explications dans le début du cours je pense Wink

Bonjour,
voici le header et le fond :

https://2img.net/h/oi33.tinypic.com/b9buoj.jpg // https://2img.net/h/oi42.tinypic.com/20l4b8.jpg

alors j'ai gardé ce qu'on avait fait, j'ai juste changé de bannière.
J'ai regardé les cours des autres, et j'ai fait sur la page de gauche le menu

(c'est un essai,donc les parties ne seront pas forcément celle-là)

Code:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>

<body>
Menu
<a href="index.html">Index</a> 
<a href="team.html">Team</a> 
Site 

Partie 1 
L'homme 
La femme 
L'enfant
</body>
</html>

Et j'ai un problème parce que mon message de page de milieu (home.html) s'affiche sur toutes les pages...

https://2img.net/h/oi42.tinypic.com/2im2ba1.jpg (index)

https://2img.net/h/oi41.tinypic.com/2hx6ogg.jpg (team)

Donc voilà où j'en suis ><

http://innocentdelight.olympe-network.com/

Administratrice Nombre de messages : 11442 Age : 32

Juste un truc, quand tu mets du code sur le forum, tu mets entre les balises (code) (/code)

!!!!!!!!!! Il faut remplacer les () par [] !!!!!!!!!!!!

Je vais aller voir ton code alors.

EDIT : alors déjà, pour ton lien "home" dans ta page gauche.html : il faut mettre le lien vers home.html, et non pas vers index.html, sinon ça t'affichera deux fois le design dans la même fenêtre Wink

Ensuite, tu remarqueras que quand tu cliques sur "team" dans ta colonne de gauche, la page s'ouvre justement la la petite colonne de gauche. On va ajouter un bout de code afin que les pages s'ouvrent dans la grande colonne de droite. A faire avec Notepad++.

Ca, c'est le code de ta page gauche.html :

Code:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>

<body>
Menu
<a href="index.html">Index</a> 
<a href="team.html">Team</a> 
Site 

Partie 1 

L'homme 
La femme 
L'enfant
</body>
</html>

Le bout de code à ajouter est :

Code:: target="home"

Tu vas mettre ça après les liens, c'est à dire (je prends en exemple un petit bout de code de ta page gauche.html (le bout de code fait référence au lien vers la page team.html) :

Code:: <a href="team.html">Team</a>

comme maintenant

Après ajout du bout de code :

Code:: <a href="team.html" target="home">Team</a>

Et tu fais de même avec les autres liens. Tu devras faire ça dans tous les liens de ta page gauche.html (SEULEMENT la page gauche.html)

c'est fait !

Code:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>

<body>

Menu

<a href="home.html" target="home">Home</a> 

<a href="team.html" target="home">Team</a>  

<a href="site.html" target="home">Site</a> 



Partie 1 

<a href="homme.html" target="home">L'homme</a> 

<a href="femme.html" target="home">La femme</a> 

<a href="enfant.html" target="home">L'enfant</a>
</body>
</html>

J'espère que tout est bon...

Administratrice Nombre de messages : 11442 Age : 32

Tu n'as pas besoin de me poster le code quand tu fais des changements dans tes pages Wink

Tu héberges tout de suite. C'est plus simple à voir s'il y a des erreurs : on le verra tout simplement si c'est hébergé.

EDIT : pour qu'on voit si ça marche bien, il faudrait que tu crées la page team.html, et que tu marques juste un petit truc pour qu'on reconnaisse la page Wink

Et tu héberges.

Voilà, j'ai hebergé, normalement ça marche =)

Administratrice Nombre de messages : 11442 Age : 32

Ok. Alors ça marche bien Wink

Donc maintenant, en fait, il faut commencer les pages. Donc le plus simple, c'est que tu me demandes ce que tu voudrais faire plus particulièrement, parce que je ne peux pas deviner ce que tu souhaites faire Wink

commencer les pages, c'est à dire ?

excuses moi pour le double-post, mais j'ai commencé une mise en page...

Administratrice Nombre de messages : 11442 Age : 32

Qu'entends-tu par mise en page ?

Et pour "commencer les pages", et bien ça veut dire ouvrir ta page home.html, et écrire le texte que tu voudras dessus. Idem pour les autres pages (team.html ...)

j'ai crée une page de css

Code:: html, body {
margin: 0;
padding: 0;
}
body {
background-color: AliceBlue;
font-family: Verdana, sans-serif;
font-size: 90%;

}
h1 {
font-size: 170%;
color: SteelBlue;
text-align: center;
font-weight: bold;
line-height: 200%

}
h2 {
font-size: 150%;
color: red;
padding-left: 15px;
}
p,ul,li,td {
color: black;
}
a {
color: green;
text-decoration: none;
}
a:visited {
font-family: Verdana, sans-serif;
color: SteelBlue;
text-decoration: none;
}
a:hover {
color:SteelBlue;
text-decoration: none;
background-color:Plum;
}

par contre je n'arrive pas à insérer du texte sur team.html... pourtant, chez moi, le tout marche bien... Sad

Administratrice Nombre de messages : 11442 Age : 32

Alors pour le CSS, j'ai vu hier en allant sur le site. Ca donne très bien d'ailleurs !

Qu'entends-tu par "je n'arrive pas à insérer du texte" ? Tu n'arrives pas à "ouvrir" la page dans ton logiciel pour faire des changements, ou bien tu ne vois pas la différence sur le serveur ? Si c'est la deuxième solution, il faut parfois réactualiser la page pour voir les différences.

Pour réacuatliser la page, si jamais, tu vas sur ton lien team, et tu fais un truc du genre : clique-droit -> ouvrir la page dans une nouvelle fenêtre/onglet. Puis tu réacualises cette page.

J'ai essayé et en fait ça marche ^^ par contre pour les images, je n'arrivais pas à les mettre avec NVU alors du coup j'ai tout fait à la main... je crois que c'est à cause de mes noms de fichiers qui mettent des signes bizzarres partout ><

Alors en fait j'aimerais bien faire un peu comme ce site niveau déco... http://trashylovely.e3b.org/

en tout cas avoir une séparation entre le menu et la partie du milieu.. je suppose que ce n'est qu'une question de couleur, mais...

et pour la partie du milieu, j'aimerais faire un peu comme ce site
http://www.fleurcerisier.net/ pour l'entête des menus, parce que le bleu que j'ai mis n'est pas terrible, ainsi que la taille...

J'espère que c'est compréhensible ^^

Administratrice Nombre de messages : 11442 Age : 32

Alors juste un truc, pour tes noms de fichier : tu ne mets ni majusucle, ni caractères spéciaux comme les accents ou encore les / (, et tu ne mets surtout pas d'espaces dans tes noms de fichiers. Sur l'ordi, ça peut encore jouer, mais sur internet, ça devient une vrai cata, et ça fait planter la plupart des choses.

Sinon, pour le niveau "déco" du premier site, c'est faisable.

Et pour le deuxième exemple aussi je pense.

Je vais aller voir.

Ouki, pas de problème ^^ je vais chercher aussi.

Sinon, ce n'est pas très grave =)

Administratrice Nombre de messages : 11442 Age : 32

Est-ce que tu pourrais me dire un peu plus précisément ce que tu cherches à faire par rapport aux deux sites que tu m'as donnés en exemple ?

Je voulais avoir une vraie séparation, entre le menu de gauche et ce qu'il y'a écrit au milieu. Que le texte du milieu soit dans un cadre si tu veux

comme là : http://trashylovely.e3b.org/

Sinon j'aimerais faire comme sur ce site : http://himitsu.no.nihon.free.fr/entrer.php c'est à dire souligner toute la ligne où il y'aurait mon texte.

Administratrice Nombre de messages : 11442 Age : 32

Alors pour la "vraie séparation", j'ai fait une capture d'écran, parce que je ne suis pas totalement sûre que ce soit de ça que tu parles (ce que j'ai encadré en vert).

Spoiler:

Sinon, pour souligner les titres, comme dans le deuxième exemple, il ta faut ajouter ça (comme propriétés) dans ta page css :

Code:: border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00FF00;

Tu peux bien sûre changer la couleur ainsi que le 1px qui est l'épaisseur du trait. Le solid est à laisser par contre.

chez moi le code ne marche pas ><
sinon oui c'est bien ça =)

EDIT : si si, il marche !!

Administratrice Nombre de messages : 11442 Age : 32

Sinon, pour mettre le fond en couleur (comme ce que j'ai encadré en vert), en général, j'utilise un div. Je ne sais pas si tu sais ce que c'est. En gros, ça te permet de créer "des blocs" dans ta page. Et ensuite, tu peux définir que le fond du bloc soit d'une couleur.

Je viens de réessayer le code qui me servait à faire ça, et ça ne fonctionne pas. J'arrive pas à trouver par contre.

Je continue à chercher. Tu peux chercher aussi sur google, en recherchant "background div" ou des trucs du style...

je ne trouve pas, je suis désolée ><

» Cours de Yume-Chan
» Evaluation Yume-chan [fini]
» Yume.
» Kei ['chan] 10/10/08 / Photofiltre
» Mi'Chan - 07/03/08 - Photoshop