Cours de Yume-chan

Coucou !

Je te souhaite la bienvenue dans ma classe !

Bonjour,

Alors, voilà, je ne m'y connais pas beaucoup et je ne connais que les bases...
J'aimerais bien que tu m'apprennes ce qu'il y'a à savoir... (très original ><)

Oki

Donc déjà, est-ce que tu as une idée de site précise que tu veux faire, ou c'est simplement pour apprendre

J'aimerais plutôt me concentrer sur les frames ^^ en tout cas, pas les sites en pop-up, ça me tape sur le système (mais de toute façon, tout cela n'est qu'une affaire de design na ?)

Mais c'est pour apprendre.

Oki. Les sites en popup, j'ai jamais essayé. Mais bon, c'est simplement un bout de code qui change ^^

Donc on va faire en frame

Déjà, il faut un design pour commencer Est-ce que tu sais comment faire ?

Sinon, je te laisse télécharger un logiciel qui s'appelle Nvu (gratuit).
Et deuxièmement, Notepad++ (aussi gratuit). Si tu as ole bloc-note sur ton ordi, ça peut servir à la place de Notepad++.

J'avais déjà Note pad ++. Par contre, je sais juste insérer un design déjà tout prêt, mais pas en coder un (et il me semble qu'il faut en préparer un avec photoshop, puis avec dreamweaver le découper ?).

Enfin bref, je ne sais pas ^^

=>En fait, je viens de voir Nvu remplaçait dreamweaver x)

Dreamweaver, j'ai jamais utilisé, donc je connais pas du tout. Mais Nvu remplace, effectivement.

Par contre, on fait le découpage avec un logiciel de graphisme, tout simplement Photoshop dans ton cas

Et pour coder le design, on écrit tout le code à la main. C'est beaucoup plus simple, et le code est d'autant plus "propre" (donc rien qui ne serve à rien).

Je t'explique comment t'y prendre pour faire le design

Donc déjà, un design, à la base, c'est une grande créa ^^ Par contre, on la "coupe" souvent en plusieurs partie afin que ce soit plus facile à coder.

Donc on va faire ça en deux parties. Je te poste un exemple qu'une de mes élèves avait fait pour son site.

D'abord ce qu'on appelle le fond :
http://apu.mabul.org/up/apu/2008/07/10/img-215033v45rf.png
En fait, tu as un petite partie à gauche, où tu mets comme couleur la couleur que tu voudras pour le fond de page de ton site. Ensuite, sur l'exemple, il y a une partie noir (c'est à l'endroit où il y aura le texte sur ton site). Puis de nouveau la couleur de fond de page à droite. Tu peux reprendre les mêmes tailles que l'exemples que je t'ai donné ou changer, c'est comme tu veux.

Deuxièmement, il y a le "header". C'est en fait un blend.
Exemple qui va avec le fond :
http://apu.mabul.org/up/apu/2008/07/10/img-214951qia8n.png

Ca, tu fais la hauteur que tu veux. Pour la largeur, le header doit avoir la même largeur que la colonne "du milieu" qu'il y a dans ton fond. Sur l'exemple que je t'ai donné, tu as la partie noir qui fait xxx pixels. La largeur du header est aussi la taille xxx pixels. La hauteur du header, c'est comme tu veux

Voilà la bannière : ce n'est pas terrible, mais bon ><




Ai-je bien compris ?



Au fait, si j'ai mis tant de temps, c'est que je graphe peu ^^'

Je vérifie demain si ça joue.

je crois qu'il y'a un décalage de 1mm... donc je suppose que ça va me décaler tout non ?


EDIT : au fait, je préférerais faire en table, mais on était en train de le faire donc aucun problème ^^

Je ne sais pas coder les layouts en table. Je sais les code en i-frame et en PHP, mais en table, je n'y connais pas grand chose.

Il manquait quelques pixels en largeur dans ton fond. Je t'ai donc ajouter ça, et puis tu avais un petit pixel blanc au milieu de ta partie noire, que j'ai mis en noir Ca peut paraitre rien du tout un petit pixel, mais comme on utilisera l'image en fond, l'image sera répétée dans toutes la fenêtre. Du coup, un point blanc, ça donne des centaines de points blancs ^^

Ton header : https://2img.net/h/oi36.tinypic.com/2zqh1jc.png

Ton fond : https://2img.net/h/oi33.tinypic.com/b9buoj.jpg

Bah alors, on fait comme tu veux ^^

pour les pixels, je m'en suis rendue compte au dernier moment ><
que fait-on ensuite ? je me suis inscrite sur l'hébergeur que tu conseillais pendant les cours, olympe-net etc... je fais quoi après ?

Alors déjà tu me donnes l'adresse que tu as crées pour ton site (lorsque tu as crée un compte chez olympe-net...)

Ensuite, on avait décider si on codait en php ou en i-frames ?

en fait je comprends la différence, mais je connais pas du tout le php, et l'iframe, ils me semblent que je connais mieux mais je n'en suis pas sûre... donc non, on avait pas décidé.

http://www.innocentdelight.o-n.fr ^^

Oki. Donc c'est toi qui voit ce que tu préfères

on peut commencer par le moins compliqué, comme ça pour aborder le plus difficile, je connaîtrais plus de notions... ^^'

Ok. Alors on va prendre en i-frame. C'est pas que ce soit le moins compliqué, mais surtout, c'est tout en HTML, et pas besoin de comprendre le php en plus

Alors attention le roman ^^

Juste avant ça, je pense à quelque chose. Tu sais te servir d'un logiciel FTP ?

Donc je t'explique comment coder ton design.

Ton header : https://2img.net/h/oi36.tinypic.com/2zqh1jc.png
et ton fond : https://2img.net/h/oi33.tinypic.com/b9buoj.jpg

Pour coder :

Je te préviens tout de suite. Ca parait vraiment pas facile au premier abord, ce qui est tout à fait vrai. Mais avec un petit peu d'habitude, ça devient vite très clair. Donc surtout, pas de soucis si tu ne comprends pas tout.

Dernière petite recommendation ^^ Quand on fait du html, tu risques dans 90% des cas d'avoir fait une petite boulette dans ton code. Et en html, il suffit que tu oublies un > pour que toute la page ne fonctionne pas. Donc surtout ne pas s'en faire si ça ne marche pas du premier coup ^^

Tu vas ouvrir un nouveau document dans Notepad++, que tu vas enregistrez sous le nom : index.html

Pour coder le design, on ne peut pas utiliser Nvu (c'est un logiciel qui facilite grandement la vie des personnes qui font un site ^^) Mais après on pourra l'utiliser.

Je te mets le code source de la page index.html, en t'expliquant à quoi sert chaque élément. Tu vas donc copier ce code et le copier sur ta page index.html (sur Notepad++)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title>TITRE DE TON SITE</title>

<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body leftmargin="0" topmargin="0" style="background-image: url(FOND.PNG);" marginheight="0" marginwidth="0">


<img src="HEADER.PNG" alt="" border="0" height="120" width="785">

<div id="droite" style="position: absolute; left: 254px; top: 350px;"><iframe src="home.html" name="home" align="middle" frameborder="0" height="1650" width="526"></iframe></div>

<div id="gauche" style="position: absolute; left: 30px; top: 350px;"><iframe src="gauche.html" name="gauche" align="middle" frameborder="0" height="1650" width="220"></iframe></div>

</body>
</html>

Le Doctype et tout le tralala en haut, c'est simplement pour indiquer plusieurs informations au navigateur, comme la langue dans laquelle la page est écrite, les caractères spéciaux utilisés à cause de cette langue, comme le "è", le "é"...

Ensuite, on ouvre la balise <head>. Dans cette balise, on mettra d'autres informations, comme le titre de la page et le fichier CSS. Où il y a écrit "TITRE DE TON SITE", tu changes en fonction de ce que tu veux mettre. La balise <head> est refermée après le fichier CSS. On verra le CSS plus tard, donc c'est pas grave si tu ne sais pas ce que c'est pour le moment

On ouvre ensuite la balise <body>. Dans cette balise, on définit l'image de fond. Dans le code, c'est écrit FOND.PNG, tu le remplaces par ton fond. (donc ça : https://2img.net/h/oi33.tinypic.com/b9buoj.jpg )

Toujours dans le body, il va falloir régler marginheight="0" marginwidth="0" -> heightmargin, tu laisse à zéro (distance entre le haut de la ta page et le header). Le widthmargin, c'est la distance entre la gauche de la fenêtre et ton header. Laisse à zéro aussi.

Ensuite, on insère une image avec la balise <img>. Ce sera le header. A la place de HEADER.PNG, tu vas metter le lien vers ton header. Dans la même ligne, tu changes le "height" et le "width". Height est la hauteur de ton header, et width est la largeur de ton header. (le lien de ton header est : https://2img.net/h/oi36.tinypic.com/2zqh1jc.png )

-----------------

Ensuite, les <div> servent à mettre en place les i-frames. Le "id", c'est en fait un nom que tu donnes aux deux i-frames. En général, j'appelle la colonne de gauche "gauche" et celle de droite "droite". Ca évite de se perdre Il faut régler également le left (distance entre la gauche de ta page et l'i-frame) et le top (distance entre le haut de ta page et le début de l'i-frame). Ensuite, dans la balise <div>, on ouvre celle de l'i-frame. Là tu règles la hauteur et la largeur de tes i-frames et tu leur donnes un nom -> name="NOM".

Dans la balise <i-frame>, il y a écrit src ="PAGE.HTML". Entre les ", tu vas mettre le nom de la page qui doit s'ouvrir dans l'i-frame.

Et tu fais de même avec la deuxième

Puis on referme la balise <body> et la balise <html>

Tout ce que j'ai écrit en majuscule, tu l'écris en minuscule

A partir de l'endroit où j'ai mis ---------------, tu ne fais pas si tu ne comprends pas les histoire de coordonnées. Je regarderais à ce moment-là moi, parce qu'en général, ça prend une semaine à comprendre autrement ^^ Ca viendra à force de faire, t'inqiète pas

Dernier petit truc, tout ce que tu fais pour ton site, tu l'enregistres dans un dossier (qu'un seul)


(à faire que si tu sais ce qu'est un logiciel FTP). Si tu ne sais pas, dis-le et je t'explique

Quand tu as fait ça, tu vas héberger les pages. C'est à dire que tu vas sur Filezilla (ou l'autre, je sais pas avec lequel tu as réussi à te connecter ^^). Tu te connectes. Avec filezilla, dans la colonne de gauche, tu vas chercher ta page index.html, et tu la glisses dans la colonne de droite.

J'ai essayé de mettre mon fichier sur le site Oo mais le problème c'est qu'il charge très très lentement, mais quand je fais : aperçu, ça me donne bien le site, avec l'image et tout et tout... mais quand je vais sur l'adresse, ça me met
Index of /index.html

• Parent Directory
  

Apache Server at innocentdelight.olympe-network.com Port 80

Donc je comprends pas ^^' j'ai dû rater un bout.. ah oui, et j'ai cherché ton code pour la police en noir, mais j'ai pas trouvé, parce que j'aimerais la changer.

Autre chose : je n'ai rien mis dans la partie "home.html", c'est normal ?

Alors pour l'hébergeur, je n'ai jamais créé de compte dessus. Faudrait que je le fasse, parce que je ne suis pas d'une grande aidre sinon Mais pour le moment, pas le temps. En tout cas pas en semaine.

Deuxièmement, pour la police en noir, tu entends quoi ? Faire que la police soit écrite en noir ? Si c'est ça, on fait ça avec le CSS, et ça viendra un peu plus tard.

Pour finir, tu n'as pas de "partie" home.html. C'est une nouvelle page, que l'on créera d'ici peu.

Je viens de faire ce que tu as dis, mais il y'a un problème, je te laisse voir...

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

Alors il y a un petit décalage entre l'image de fond et le header. Je regarderai ce qui provoque ça dès que j'ai un peu de temps.

Sinon, pour le fait que où c'est écrit "gauche", ça ne s'affiche pas au bon endroit, c'est parce qu'on a pas encore réglé l'affichage. Sinon, est-ce que tu pourrais me mettre le code source de ta page index.html stp

Absolument insupportable ><
je n'arrive pas à t'envoyer le code ><

Code:

Innocent delight







[img(984,325)]http://i36.tinypic.com/2zqh1jc.png[/img]

Euh, c'est pas possible que ce soit le code de ta page index.html.

Ca doit plutôt ressembler à ce que je t'avais donné avant.

Tu ouvres ta page index.html sur notepad++, tu le copies, et tu le colles ici entre les balises pour le code.

Non, ça bugue dès que je l'envoie.

http://x-better-days-x.skyrock.com/2135781987-Code-pour-Innocent-Delight.html

sur le lien j'ai mis l'index ^^