Cours de ol_mania [Fermé]

Hello !

Je te souhaite la bienvenue dans ma classe

Merci de m'avoir prise =) !
J'aimerais créer un site mais je ne conais rien du tout .

Oki. Alors on va commencer par le tout début.

Par contre, jusque pour informations, en semaine, je n'ai pas toujours le temps de regarder de gros codes. Donc je fais ça le week-end et le mercredi pour les grosses choses

Donc la première étape va être de créer le design. Je t'explique comment t'y prendre.

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 (c'est-à-dire faire en sorte qu'on puisse écrire dessus, comme pour n'importe quelle page internet )

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'exemple 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

Sinon, je ne sais pas si tu as déjà les logiciels nécessaires. Je te laisse télécharger Nvu, ainsi qu'un logiciel qui s'appelle Notepad++. Ce sont deux logiciels gratuits.

En fait pour le header j'aimerais faire comme sur ce site : http://youknowyouloveme.org/

avoir le menu sur la créa !

edit: j'avais ça il y a longtemps:

Qu'est-ce que tu entends par "comme sur ce site" ? Parce que c'est tout simplement une créa normale.

oui mais je veux dire sur ma créa je dois mettre : home, gallery ...? comme j'ai fait sur la créa que j'ai posté avant.

Si tu le mets sur la créa, il va falloir utiliser une technique pour faire que ça devienne des liens. Le hic, c'est que ça ne marche pas toujours chez tout le monde. Donc je te dirais plutôt non.

Ok je vais enlever alors.

edit: voilà mon header:

Spoiler:

mon fond:

Spoiler:

edit: j'ai télécharger les logiciels

Ok

Est-ce que tu as déjà un hébergeur ou non ?

Non je ne sais pas quoi choisir.

Alors je te propose http://www.olympe-network.com/asso/. J'ai la plupart de mes élèves qui sont sur celui-là, et ça marche bien !

je me suis inscrite.

Oki. Donc tu vas déjà me donner l'adresse

Deuxièmement, est-ce que tu sais utiliser un logiciel FTP ? Et déjà, tu sais ce que c'est ou pas ?

Alors voici l'adresse: (c'est normal qu'ils en donnent trois différentes ?) c'est les mêmes ?

http://chace.olympe-network.com
http://chace.o-n.fr
http://www.chace.o-n.fr

Je ne sais pas ce qu'est un logiciel FTP.

Alors pour le logiciel FTP, en fait, c'est un logiciel qui te permet de transférer tes pages internet de ton ordinateur à ton hébergeur (en l'occurence, olympe-network pour toi) afin que les gens puissent visiter ton site

Par contre, il faudrait me dire quel système d'exploitation (et la version) que tu as sur ton ordi ? Parce que ça dépendra alors du logiciel à utiliser.

Ok.
Je suis sous windows vista et mon ordinateur date de l'année dernière.

Ok. Je suis aussi sous vista.

Donc comme logiciel FTP, il faut que tu télécharges Classic FTP. Les logiciels plus anciens ne marchent pas sous vista.

ton lien ne marche pas

Euh... je n'ai pas mis de lien. Si tu parles du ftp (en majuscule), ça met automatiquement un lien sur le forum, sans même que j'ai besoin d'en définir un.

Passe par google.

ok (: c'est bon

Oki. Alors il va falloir entrer quelques informations dans le logiciel maintenant. C'est pas très compliqué, je te rassure

Donc tu ouvres ton logiciel En haut à gauche, tu cliques sur le bouton "sites". Une petite fenêtre s'ouvre. Puis tu cliques sur "Add a site". Une fenêtre s'ouvre.

Sous "label", tu mets ce que tu veux. Ca n'a pas d'importance. C'est simplement un nom que tu donnes, afin que le logiciel fasse la différentes entre plusieurs site (mais tu en as qu'un toi )

Sous "FTP server", tu entres ftp.olympe-network.com (ça te mets un lien, mais ce n'est pas moi qui l'est mis, ça se mets automatiquement -> il n'amène à rien ! )

Sous "User name" : ton nom d'utilisateur (que tu as dû recevoir en mail" quand tu t'es inscrite sur olympe-network).
Et ton mot de passe sous "Password".

Tu ne coches PAS "Use secure FTP (...)".

Puis tu cliques sur OK.

Tu peux voir que tu as un "nom" qui est apparu dans la petite fenêtre. Puis tu cliques sur Close.

Donc ensuite, comment faire pour se connecter à ton serveur (c'est l'endroit où tu mets tes pages internet, de façon à ce que les gens puissent venir les voir).

Pour te connecter : en haut à gauche, il y a un bouton "Connect" avec une petite flêche à droite. Tu cliques sur la petite flêche, et tu choisis le "label" que tu avais donné (voir information plus haute). Mais bon, normalement, tu as qu'un seul choix

Pour se déconnecter, c'est le bouton "Disconnect" qui est juste à côté.

Dans la colonne de gauche : ça correspond à ton ordinateur. La colonne de droite, ça correspond à ton serveur.

Pour transférer ton fichier, tu le sélectionnes dans la partie de gauche, puis tu cliques sur la flêche qui va de gauche à droite (entre les deux colonnes). Ton fichier est alors dans le serveur, et tu peux y accéder par internet

Ok, ce'st fait merci. C'est super simple.

Oki Alors on va pouvoir passer aux choses sérieuses ^^ On va donc coder ton layout (= le design). En fait, coder, ça veut dire faire en sorte que les pages (avec le texte et autre) s'affiche correctement par rapport au design.

Attention, tu vas avoir un bon bout à lire ^^ Juste un petit truc à savoir. Je préfère prévenir, pour pas que vous soyez étonnés. En HTML, il est très très très fréquent que ça ne marche pas du première coup En effet, il suffit qu'il manque un petit signe (par exemple " > " ) dans ton code, pour que tout foire. Donc pas de soucis si ça ne marche pas du premier coup. C'est simplement qu'il y a une petite erreur dans le code.

Pour coder :

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.

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 coiper 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 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://i.servimg.com/u/f75/12/45/24/36/fond10.png)

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://i.servimg.com/u/f75/12/45/24/36/cahce10.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'-iframe) 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-iframe. 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. Je regarderais moi, parce qu'en général, ça prend une semaine à comprendre autrement ^^ Ca viendra à force de faire, t'inquiète pas

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

Quand tu as fait ça, tu vas héberger les pages. C'est à dire que tu vas sur Classic FTP. Tu te connectes (le bouton en haut à gauche). Avec Classic FTP, dans la colonne de gauche, tu vas chercher ta page index.html. Tu la sélectionnes, puis tu cliques sur la flêche qui va de gauche à droite (entre les deux colonnes). Et tu penses à te déconnecter après

J'ai pas compris la partie avec <div>

- Il faut régler également le left (distance entre la gauche de ta page et l'-iframe) 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-iframe. Là tu règles la hauteur et la largeur de tes i-frames et tu leur donnes un nom -> name="NOM".

Je dois mettre quoi comme longueur et le nom c'est le nom de quoi ?

merci (:

Alors pour les longueurs, il faut que je calcule tout ça par rapport à ton design. Je te modifierai tout ça dès que j'ai un peu de temps. Et sinon, pour le NOM, c'est simplement donner un nom à l'i-frame. Ca permettra en fait, dans divers autres trucs, de faire référence à l'i-frame. C'est un peu comme toi, quand on veut t'appeler, on dit ton prénom Avec les i-frames, c'est pareil ^^