Cours de Trisakela

Administratrice Nombre de messages : 11442 Age : 32

Ok. Effectivement, je vois le site.

En faisant avec la méthode de Heavenly Dream, tu as installé de quoi mettre ton contenu sur le layout ou pas ?

Voici le code que j'ai , mais dans le tuto il y a un moment ou je n'ai plus rien compris : à partir de l'explication (6) :

Code:: <html>
<head>
<title>Lolli-sims</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="style.css"/>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="contenu">Votre contenu </div>
<div id="subnav">
<p class="nav-menu">Categorie</p>
<a href="index.php">Exemple</a>
<a href="index.php">Exemple</a>
<a href="index.php">Exemple</a>
<a href="index.php">Exemple</a>
<a href="index.php">Exemple</a>

<p class="nav-menu">Categorie</p>
<a href="index.php">Exemple</a>
<a href="index.php">Exemple</a>
<a href="index.php">Exemple</a>
<a href="index.php">Exemple</a>
<a href="index.php">Exemple</a>
</div>

<table id="Tableau_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td>
      <img src="images/index_01.jpg" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_02.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_03.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_04.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_05.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_06.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_07.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_08.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_09.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_10.gif" width="800" height="60" alt=""></td>
</tr>
</table>

</body>
</html>

Administratrice Nombre de messages : 11442 Age : 32

Il faut que je regarde de plus près le tuto (ce que je vais faire).

Parce que là, pour le moment en fait tu as une page internet avec une partie contenu, une partie menu et ensuite une image (découpée en plusieurs morceaux, on est d'accord). Mais tu n'as pas défini que le contenu allait sur l'image. Tu l'utilises comme une simple image dans ta page pour l e moment.

Je vais regarder ça au plus vite.

D'accord,
oui c'est vrai je ne comprends pas vraiment pourquoi j'ai du texte qui s'affiche là haut.

Administratrice Nombre de messages : 11442 Age : 32

Si tu as du texte qui s'affiche en haut, c'est parce que c'est dit dans ton code (c'est ce qu'il y a avant le :

Code::

EDIT : j'ai regardé un peu le tuto, mais le problème, c'est qu'en div, je ne m'y connais vraiment pas. Je vais essayer demain d'installer une i-frame, pour voir si c'est possible.

Ok, merci =)

Administratrice Nombre de messages : 11442 Age : 32

Alors j'ai réussi à installer une i-frame (mais la page dans l'i-frame ne s'affiche pas, je ne sais pas pourquoi).

Code de ta page index.html :

Code:: <html>
<head>
<title>Lolli-sims</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="style.css"/>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


<table id="Tableau_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td>
      <img src="images/index_01.jpg" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>

      <img src="images/index_02.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_03.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_04.gif" width="800" height="60" alt=""></td>

</tr>
<tr>
   <td>
      <img src="images/index_05.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_06.gif" width="800" height="60" alt=""></td>
</tr>

<tr>
   <td>
      <img src="images/index_07.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_08.gif" width="800" height="60" alt=""></td>
</tr>
<tr>

   <td>
      <img src="images/index_09.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_10.gif" width="800" height="60" alt=""></td>
</tr>
</table>


<div id="lolli" style="position: absolute; left: 179px; top: 135px;"><iframe src="home.html" name="lolli" align="middle" frameborder="0" height="409" width="422"></iframe></div>

</body>

</html>

Et il te faut créer une page home.html (dans laquelle tu peux mettre juste un petit bout de texte, question qu'on voit si ça fonctionne.

Quand tu dis un bout de texte faut il que je mette ceci sur ma page home ?

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>

Administratrice Nombre de messages : 11442 Age : 32

Oui. Et tu mets ton texte entre les balises <body> et </body>

j'ai mis mon texte sur un nouvelle page home, je les ensuite aussi mis sur filezilla mais je ne vois rien sur le site : http://lolli.sims.free.fr/lolli-sims/

code que j'ai mis

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>bonjours, ceci est un essai pour un site
</body>
</html>

Administratrice Nombre de messages : 11442 Age : 32

Tu as mis la page index.html (dont je t'ai donné le code) sur le site ? Parce que si on regarde le code source de ton site, c'est toujours l'ancienne page.

Tu ouvres ta page index.html, tu effaces tout ton code et tu mets celui-là (ci-dessous) à la place :

Code:: <html>
<head>
<title>Lolli-sims</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="style.css"/>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


<table id="Tableau_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/index_01.jpg" width="800" height="60" alt=""></td>
</tr>
<tr>
<td>

<img src="images/index_02.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_03.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_04.gif" width="800" height="60" alt=""></td>

</tr>
<tr>
<td>
<img src="images/index_05.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_06.gif" width="800" height="60" alt=""></td>
</tr>

<tr>
<td>
<img src="images/index_07.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_08.gif" width="800" height="60" alt=""></td>
</tr>
<tr>

<td>
<img src="images/index_09.gif" width="800" height="60" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_10.gif" width="800" height="60" alt=""></td>
</tr>
</table>


<div id="lolli" style="position: absolute; left: 179px; top: 135px;"><iframe src="home.html" name="lolli" align="middle" frameborder="0" height="409" width="422"></iframe></div>

</body>

</html>

J'ai fais ce que tu m'as dis et on voit le texte sur le site.

Administratrice Nombre de messages : 11442 Age : 32

Effectivement, ça marche à merveille pour le moment !

Ensuite, il va falloir faire en sorte qu'on puisse cliquer sur ton menu. Comme il s'agit d'une image, on va devoir utiliser les "maps". C'est en fait une technique qui permet de mettre des liens sur des parties de l'image.

mYn avait fait un tuto pour ça, je te laisse le lire : https://learning-design.actifforum.com/classe-de-myn-html-et-css-f71/code-cours-image-map-t9427.htm

Je suis allée voir le tuto. Si j'ai bien compris il faut que j'héberge que l'image (accueil, forum...),a la place de l'image map : je dois mettre par exemple l'url de l'image accueil et ainsi de suite pour les autres. En revanche c'est après que je n'est pas compris quand elle parle du nb de px du début du lien à la gauche....

Administratrice Nombre de messages : 11442 Age : 32

L'image, elle est déjà hébergée. Il n'existe pas "d'image map". C'est la même image que tu as, mais on fait que mettre du code html qui prend que des bouts de l'image.

Et pour les nombres de pixels, c'est pas étonnant, il y a rarement quelqu'un qui comprend du premier coup ^^

Je reprends l'image de mYn, qui explique très bien d'ailleurs :

Spoiler:

Sur son exemple, elle veut mettre un lien sur "goodies" (qui appartient au header, c'est donc un "bout" d'image).
En fait, on calcule les coordonées des 4 sommets du rectangle qu'il y a, qui va délimiter le lien.

Donc dans le code, elle a d'abord mis : "NOMBRE DE PX DU DEBUT DU LIEN A PARTIR DE LA GAUCHE" : tu ouvres photoshop, et tu fais une sélection qui va du début de ton image (dans ton cas c'est "index_03.gif") jusqu'à juste avant le début du mot Accueil. Et normalement, il y a un endroit où tu peux voir la largeur de la sélection (je ne sais pas où, je ne connais pas toshop) -> ça te donne donc le nombre de pixel entre le début de l'image et le début du lien.

Etc... pour les autres. Essaie déjà de faire comme tu penses. Ensuite, tu me postes le code ici (SEULEMENT LE CODE DE L'IMAGE MAP). Tu ne mets pas dans la page index.html (on attendra d'avoir le bon bout de code).

Voila mon code, en revanche je ne sais pas qu'elle url je dois mettre dans la première ligne et ainsi de suite :

Code:: <img src="URL DE L'IMAGE"style="border: 0px solid; width: LARGEUR DE L'IMAGEpx; height: HAUTEUR DE L'IMAGEpx; float: left;" usemap="#NOM DE L'IMAGE MAP"/>
<map name="NOM DE L'IMAGE MAP (MEME CHOSE QU'AU DESSUS)">">
<area alt="Accueil" coords="43,14,214,114" href="URL DU LIEN">
</map>

Administratrice Nombre de messages : 11442 Age : 32

Code correct :

Code:: <img src="images/index_03.gif" style="border: 0px solid; width: 800px; height: 60px; float: left;" usemap="#map"/>
<map name="map">
<area alt="Accueil" coords="215, 0, 257, 10" href="index.html">
<area alt="Accueil" coords="257, 0, 307, 10" href="webmiss.html">
<area alt="Accueil" coords="307, 0, 369, 10" href="downloads.html">
<area alt="Accueil" coords="369, 0, 407, 10" href="studio.html">
<area alt="Accueil" coords="407, 0, 443, 10" href="presse.html">
<area alt="Accueil" coords="443, 0, 480, 10" href="LIEN DU FORUM">
<area alt="Accueil" coords="480, 0, 512, 10" href="liens.html">
<area alt="Accueil" coords="512, 0, 565, 10" href="LIEN DU LIVRE D'OR">
</map>

Tu mets ce code dans ta page index.html A LA PLACE DE :

Code:: <img src="images/index_03.gif" width="800" height="60" alt="">

Au début, tu as l'url de l'image. C'est l'image qui contient ton menu, en l'occurence "images/index_03.gif" dans ton cas.

Ensuite, la largeur (width) et hauteur (height) de l'image : donc 800*60 (l'image est index_03.gif)

Ensuite, il faus mettre un nom (quelconque) pour le "usemap", mais précédé de #. Je mets généralement tout simplement #map. (il y avait un "> de trop dans le code, je l'ai enlevé ; d'ailleurs je vais l'enlever dans le code de mYn, ça évitera des problèmes pour ceux qui prennent le code Wink

) Bref ^^

Ensuite, tu as un truc qui commence par " <area... jusqu'à la fin de la ligne. On doit mettre cette ligne de code autant de fois que tu as de lien à mettre sur ton menu (dans ton cas : Cool

.

Les coordonnées que tu as mise sont fausse par contre. Tu as dû faire le calcul depuis la partie blanche, et non pas toute l'image. (je t'ai mis les bonnes coordonnées dans le code ci-dessus).

Voila j'ai fais ce que tu m'as dis, j'étais justement venu me connecter pour changer les numéros car j'avais remarquer que je n'avais pas pris les bons codes sour toshop. En revanche pourquoi avoir mis ce code dans ceci

Code:: <img src="images/index_03.gif" width="800" height="60" alt="">

et non dans cela

Code:: <img src="images/index_01.jpg" width="800" height="60" alt=""></td>

par exemple ou le numéro 2 ?

Administratrice Nombre de messages : 11442 Age : 32

Parce que ton menu ( "accueil", "webmiss"...) se trouve dans l'image nommée "index_3.gif, vu que le design est découpé en plusieurs parties.

ah d'accord
Et ensuite, que faut t'il faire pour continuer le site ?

Administratrice Nombre de messages : 11442 Age : 32

Alors pour la suite.

D'abord, tu vas crée des nouvelles pages qui se nomment :
- webmiss.html
- downloads.html
- studio.html
- presse.html
- liens.html

Tu n'as pas besoin de mettre de contenu, c'est juste pour avoir les pages. Tu peux faire ça avec Notepad++.

Puis, comme on utilise une i-frame dans ton site, il va falloir dire aux liens qu'il doit ouvrir ses pages dans l'i-frame. Pour ça, il va falloir ajouter un petit code à tes liens dans l'image map (c'est ce qu'on a fait avec le code juste avant). Le bout de code à ajouter est (dans chaque lien) :

Code:: target="lolli"

Ca donnera donc :

Code:: <img src="images/index_03.gif" style="border: 0px solid; width: 800px; height: 60px; float: left;" usemap="#map"/>
<map name="map">
<area alt="Accueil" coords="215, 0, 257, 10" href="index.html" target="lolli">
<area alt="Accueil" coords="257, 0, 307, 10" href="webmiss.html" target="lolli">
<area alt="Accueil" coords="307, 0, 369, 10" href="downloads.html" target="lolli">
<area alt="Accueil" coords="369, 0, 407, 10" href="studio.html" target="lolli">
<area alt="Accueil" coords="407, 0, 443, 10" href="presse.html" target="lolli">
<area alt="Accueil" coords="443, 0, 480, 10" href="LIEN DU FORUM">
<area alt="Accueil" coords="480, 0, 512, 10" href="liens.html" target="lolli">
<area alt="Accueil" coords="512, 0, 565, 10" href="LIEN DU LIVRE D'OR">
</map>

Voila c'est fais en revanche est ce normal que l'on voit plus rien sur la page du site : http://lolli.sims.free.fr/ ?

Administratrice Nombre de messages : 11442 Age : 32

Normalement, ton site était dans un dossier du nom de lolli-sims (ce qui est toujours le cas, j'ai été voir).

Pour mettre tes nouvelles pages, il faut donc aussi les mettre dans ce dossier.

Et l'adresse : http://lolli.sims.free.fr/lolli-sims/

oui je comprend pas pourquoi je n'avais pas la bonne adresse ^^

Je viens de mettre mes pages dans le dossier =)

Administratrice Nombre de messages : 11442 Age : 32

Ok. Alors maintenant tu vas faire une page (à choix). Par exemple webmiss.html

Quand elle sera faite, on va faire le CSS (c'est pour mettre le tout en page, de façon à ce que le rendu soit beau).

Donc pour ça, tu ouvres ta page webmiss.html dans Nvu.

Ensuite, il te faut mettre du texte dedans. Déjà, tu peux mettre un titre.

En haut de la fenêtre de Nvu, tu as un endroit où c'est écrit "Corps de Texte" (Body Text en anglais). Quand tu écris quelque chose dans ta page, il faut que tu veilles à ce que ce soit toujours "Paragraphe" (Paragraph) qui soit mis en haut.

Si tu veux mettre un titre par contre, tu fais en sorte que ce soit écrit "h1".

Tu mets donc un peu de texte.

Ensuite, si tu veux mettre une image, tu fais : Insertion -> Images -> tu as une fenêtre qui s'ouvre. Où il y a le petit dossier, tu cliques dessus et tu vas chercher ton image (place ton image dans le MEME dossier que tes pages). Plus bas, tu coches "Ne pas utiliser de texte alternatif". Puis tu cliques sur ok.

Tu sauvegardes le tout et tu héberges sur Free.

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