Cours de lulu71

Administratrice Nombre de messages : 11442 Age : 32

Bienvenue dans ma classe alors Smile

Tu pourrais commencer par me dire si tu as déjà un site ? Si oui, de me le montrer Smile

Et deuxièmement, ce que tu connais (html, css, rien...) ?

Merci de m'avoir pris^^

Non je n'est pas de site et deuxièmement je ne mis connait en rien Embarassed

Administratrice Nombre de messages : 11442 Age : 32

Oki

Et bien on va commencer par le comencement alors ^^

Déjà, est-ce que tu pourrai télécharger kompozer ? (c'est exactement comme Nvu, mais avec des erreurs en moins). Si tu as Nvu, ça me convient aussi. C'est comme tu veux.

Ensuite, il va falloir commencer par faire un design pour ton site. On appelle ça un layout si jamais Smile

Il se compose en deux parties.

Le fond, il est très large, mais pas haut du tout (tu peux faire + que le miens). En fait, si tu fais une toute petite hauteur, l'image sera moins lourde, et se chargera donc plus vite.

Exemple de fond : https://2img.net/r/ihimizer/img403/2126/fondgl6.png

Et avec ça, il y a le header, donc la "créa du haut" de ton site. Dans ce header, il faut que tu mettes un bout des colonnes.

Exemple de header :
https://2img.net/r/ihimizer/img329/4451/headertl1.png

Si tu ne comprends pas, n'hésite pas à demander.

Une question pourrais tu me donner les dimensions du header et du fond ?

Administratrice Nombre de messages : 11442 Age : 32

Alors, il n'y a pas vraiment de dimensions générales. C'est chacun qui décide comment il veut faire Smile

Mais bon, pour le fond, il faut que l'image fasse à peu près 1280 en largeur, et en hauteur, tu peux faire 20 pixels.

Par contre, sur ton image fond, il y aura un couleur qui est le fond général du site, et une qui est le fond des colonnes du site, comme sur l'exemple que je t'avais donné.
https://2img.net/r/ihimizer/img403/2126/fondgl6.png

Pour le header, tu vas faire tout simplement un blend. Dans ton fond, je t'ai dit que tu as une partie qui est le fond des colonnes du site, et pas le fond général du site. Ce fond des colonnes doit avoir la même largeur que ton blend.

Voila ^^

Le header :

Spoiler:

Le Fond :

Spoiler:

Administratrice Nombre de messages : 11442 Age : 32

Oki.

Je t'ai juste coller le header sur un partie du fond (c'est simplement pour une question de codage).

header : https://nsa02.casimages.com/img/2008/07/14/0807140723314052086.png

Sinon, quelques petites questions. Tu as déjà un hébergeur ? Si non, il t'en faut un Smile

Et deuxièmement, tu veux coder ton site en php ou en i-frame ? Choisi d'abord l'hébergeur avant de choisir la méthode de codage, car certains hébergeurs n'acceptent pas le php.

Je prends Orange comme hébergeur.

Administratrice Nombre de messages : 11442 Age : 32

Oki. Tu as déjà un compte dessus ? Parce que j'y connais absolument rien à cet hébergeur ^^ Si non, il te faut en créer un.

Sinon, tu sais si il accepte le php ?

Non enfaite je vais prendres Voilà

Administratrice Nombre de messages : 11442 Age : 32

Oki. Donc là, je peux pas t'aider non plus. J'y connais rien. Si tu ne comprends pas quelque chose avec l'hébergeur, tu peux envoyer un MP à Sushiiz' (également dans ma classe). Elle pourra mieux t'aider que moi ^^

Administratrice Nombre de messages : 11442 Age : 32

Je suis de retour Smile

Tu en est où avec l'hébergeur ?

Je mi suis inscrite aprés je sais pas ce qu'il faut faire.

Administratrice Nombre de messages : 11442 Age : 32

Il faut héberger des pages html dessus. Essaie d'en mettre une où tu écrit juste "site en construction" par exemple.

J'y connais rien à voilà, donc je sais pas si il faut passer par un FTP ou si on peut héberger depuis leur site.

EDIT : Je me suis procurée le code de ta page index.html, et je t'ai fait les changements nécessaires pour que ça fonctionne avec les imagemaps.
Si tu veux voir (hébergé sur mon serveur : http://emimoi.freehostia.com/lu/)

Donc tu vas ouvrir ta page index.html dans Notepad++, et tu effaces tout le code (tout !). Puis tu mets à la place celui-ci :

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>Sarah Connor France</title>

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

<body leftmargin="0" topmargin="0" style="background-image: url(http://img2.hostingpics.net/pics/166912fond.png);" marginheight="0" marginwidth="0">

<img src="http://nsa02.casimages.com/img/2008/08/16//080816031027535770.png" alt="" border="0" height="500" width="950" usemap="header"/>
<map name="header">
<area alt="home" coords="261, 55, 320, 85" href="test.html" target="home">
<area alt="home" coords="324, 55, 393, 85" href="test.html" target="home">
<area alt="home" coords="398, 55, 462, 85" href="test.html" target="home">
<area alt="home" coords="466, 55, 522, 85" href="test.html" target="home">
<area alt="home" coords="526, 55, 579, 85" href="test.html" target="home">
<area alt="home" coords="583, 55, 633, 85" href="test.html" target="home">
<area alt="home" coords="637, 55, 702, 85" href="test.html" target="home">
</map>

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

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

</body>
</html>

Il te faudra changer les liens par contre. Donc changer où c'est écrit test.html

Voilà Smile

EDIT 2 : j'allais oublier Smile

Ton image de fond n'était pas bonne. Je te l'ai donc mise comme il faut, et je l'ai réhébergée. (ici : https://2img.net/r/hpimg2/pics/166912fond.png)

C'est bon mon site est en construction. Mais aprés il faut pas que je code mon layout ?

Administratrice Nombre de messages : 11442 Age : 32

Oui, il faut coder le layout. Ca peut paraite compliqué quand on y connais rien, mais si tu suis bien, ça devrait bien se passer ^^ Surtout, pas de soucis si ça marche pas du premier coup. En HTML, si tu oublies ne serait-ce qu'un petit guillement, ça fait que tout ne fonctionne pas. C'est très fréquents qu'on fasse une erreur à un endroit Smile

Ton header : https://nsa02.casimages.com/img/2008/07/14/0807140723314052086.png
Ton fond : https://2img.net/r/hpimg2/pics/190716fond.jpg

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

Pour coder le design, on ne peut pas le faire avec Nvu, étant donné qu'il ne peut pas gérer les i-frames. C'est à dire que tu ne peux pas ouvrir deux pages dans une seule page sur Nvu. Mais après, tu pourras l'utiliser.

Je te mets le code source de la page index.html, en t'expliquant à quoi sert chaque élément.

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 : http://apu.mabul.org/up/apu/2008/07/10/img-215033v45rf.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.

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.

Ensuite, les <div> servent à mettre en place les i-frames. Le "id", c'est en fait un nom que tu donnes au deux i-frame. En général, j'appelle la colonne de gauche "gauche" et celle de droite "droite". Ca évite de ser perdre Smile

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 Smile

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

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

Voilà, ça doit être bon. C'est possible que certains trucs ne fonctionnent pas correctement, parce que pour les sites, chaque cas est différent. On verra alors ce qui cloche après Smile

Ensuite, il te faut héberger tout ça sur le serveur, donc sur Voilà Smile

Comment on fait pour héberger sur voilà ?

Administratrice Nombre de messages : 11442 Age : 32

Alors là, je sais pas du tout. J'y connais rien à voilà. Cherche par google, ou bien tu peux envoyer un MP à Sushiiz' (également dans ma classe) pour lui demander. Elle utilise aussi Voila.

C'est normal que mon layout ne marche pas ?

Administratrice Nombre de messages : 11442 Age : 32

Tes images, si tu as mis un lien du style, href="lien.html" -> il te faut héberger aussi les images.

Sinon, il faut que tu me donnes l'adresse si tu veux que je puisse voir.

c'est bon ça marche !!

et voici l'adresse de mon site : http://sarahconnor.site.voila.fr/index.html

Administratrice Nombre de messages : 11442 Age : 32

Oki. Par contre, le header ne s'affiche pas. Vérifie que tu l'es bien mis sur le serveur, et sinon, vérifie si l'adresse vers l'image est vraiment la bonne.

Ok pas de probléme. Aprés c'est quoi la suite ^^ ?

Administratrice Nombre de messages : 11442 Age : 32

Ben il faut réussir à faire afficher ce header. Si on résoud pas un problème avant de continuer, on va jamais s'en sortir, parce que quand on fait du HTML, on a très souvent des problèmes ^^

Je vais regarder ton code.

» Cours de mel [OK]
» [COURS] Introduction au cours d'HTML
» -Cours de ju-dom-
» Cours de emy-fan