Cours de Sushiiz' [OK]

Bienvenue dans ma classe alors Smile

Tu as dit que tu étais dans la classe de Missmia75, donc je suppose que tu avais déjà commencé un peu ?

Sinon, dis-moi si tu as déjà un site, et si oui, me passer l'adresse
Et sinon, si tu t'y connais un peu en html, css ou pas du tout.

:D:D ^^

Tout d'abord, re mercii =)

Ensuite, Missmia75 avait créé ma classe, j'ai répondu mais après, elle est plus venue :s Donc, je n'ai rien appris. --'

Un site, oui.
http://creative-sushiiz.site.voila.fr/

J'ai essayé quelques trucs mais j'aimerais reprendre de zero parce que j'ai essayé un truc et maintenant, j'suis perdu :$

Ok. Effectivement, je vois que tu n'es pas aller très loin.

Je te donne d'avoir deux liens vers de mes sites. Euh... le premier est en construction (avec un design déplorable ^^) et le deuxième est fermé. Je l'ai juste réhébergé pour ma candidature. Voilà, question que tu vois un petit peu ce que j'ai fait

http://emimoi.awardspace.com/halogens/
http://emimoi.awardspace.com/cos/

Donc, la première chose à faire, c'est d'avoir un layout pour ton site. Tu en a déjà fait un ou pas du tout ? Tu sais comment en faire ? Sinon je t'explique juste la base, et après tu le feras

Sinon, je ne sais pas coder toutes les sortes de layouts, car parfois, il y en a vraiment des bizarres ^^. Je n'ai pas la science infuse ^^

EDIT : j'allais oublier On va utiliser Nvu, si tu veux, pour créer tes pages. Sinon, il va falloir apprendre tout le HTML, mais tu verras, à force de bosser sur Nvu, tu apprends bien le HTML.

Ouai, j'en ai déjà fait, pour des exo ^^
Sinon, j'en ai pas encore pour mon site

Pour info, j'ai Notepad++ =)
Ok, j'vais télécharger Nvu ^^





Trop beau Chris Olivero <333

Ok. Je travaille aussi sur Notepad++, donc c'est parfait. Mais il faut tout écrire en code sous Notepad++

Sinon, si on fait avec Notepad++, est-ce que tu veux coder ton site en php ou en frame ?

Et puis pour le layout, il faut qu'il soit "découpable" un peu comme ça.

Header (+ un bout des "colonnes") :

[img ne fonctionnant plus]

et le fond :

[img ne fonctionnant plus]

Ok. La, Nvu est en train de télécharger ^^ 50% EDIT: Nvu est ouvert ^^

iFrame, c'est quand y'a que le milieu de la page qui change ?
Le php, j'vois pas. C'est quoi le mieux?

Pour le layout, j'vois le genre.
Et ton lien, http://emimoi.awardspace.com/halogens/fond.png, il marche pas :S

Ce qu'il y a de mieux... c'est toi qui voit.

Avec le php, il faut un hébergeur qui accepte le php. C'est peut-être le mauvais côté. Voilà ne l'accepte pas d'ailleurs. Et sinon, tu ne peux pas faire de php sut Nvu, donc il faut tout faire à la main.

Les i-frames, c'est très pratique, mais bon, il y a aussi des mauvais côtés. L'avantage est que tu peux bosser avec Nvu.

C'est un peu "kif kif bouriquo" ^^ Donc c'est toi qui voit, si tu veux te servir de Nvu ou pas du tout

Sinon, j'ai héberger le layout (fond + header) de l'autre site. C'est plus pratique pour comprendre ^^
fond : https://2img.net/r/ihimizer/img403/2126/fondgl6.png
header : https://2img.net/r/ihimizer/img329/4451/headertl1.png

Donc il faut juste que je sache si tu fais en php ou en frame, et puis que tu fasses le layout (de la même manière que celui que je t'ai montré -> fond et header séparé).

J'fais en iframe ^^
J'ai téléchargé Nvu, il est même ouvert ^^
J'vais faire le header tout à l'heure ^^
Photoshop est encore ouvert =P

Ok. C'est noté. Donc pour le design, je peux pas t'aider, puisque je suis sous Photofiltre Studio. Mais je te fais confiance. D'une fois que le design est prêt, je t'expliquerai comment le coder et comment utiliser Nvu.

Moi ça fait une semaine et demi que j'essaie de faire un layout potable, mais j'arrive à rien ^^

Ok =)

J'peux effacer tout ce que j'ai fait alors ?
On reprend tout de zero ?
Et la taille d'un layout, c'est quoi à peu près ?

Oui, on va reprendre tout à zéro. Ce sera plus simple pour moi, et puis tu n'es pas allé très loin avec Missmia75.

Pour le layout, pour la longeur, tu ne t'en occupes pas pour le moment, puisque dans le header, il n'y a pas tout la longueur des colonnes. Sinon, je fais environ 800 en largeur, mais c'est très libre. Certains font des layouts très large, et d'autres très étroits.

C'est bon, j'ai fait mon header et mon fond séparé.
» http://apu.mabul.org/up/apu/2008/07/10/img-214951qia8n.png
» http://apu.mabul.org/up/apu/2008/07/10/img-215033v45rf.png

Ensuite ? ^^

Super beau le design !

Donc maintenant qu'on a le design, on va pouvoir le coder.

Pour ça, 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 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

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

Désolée du pavé que j'ai écrit ^^

EDIT : j'allais oublié, tu héberges tout ça pour que je puisse voir

PS : dans l'image de ton fond, tu à un pixels jaune vers le milieu du noir, c'est normal ?

Alors ! XD
J'ai hébergé ^^ Tu peux donc aller voir. Si des trucs collaient pas, j'ai arrangé =) Sa fait une belle page =P

Le point sur le fond, c'est normal, j'avais besoin d'un point de repère pour le milieu XD mais j'vais le changer ^^

Donc voila =)

Oki !

Et pour le point, je trouvais ça bizarre, parce que ça faisait en plein au milieu... enfin, c'est bon.

Je vais donc aller voir

Alors chez, moi, il y a le header qui est collé à gauche de la page. Moi je fais autrement, pour ne pas avoir de problème avec le placement du header. En fait, tu colles la partie jaune à gauche de ton header. Je te donne un exemple, parce que ça ne doit pas être très clair ^^

Si ton header est à 200 pixels de la gauche de ta page. Tu crées une nouvelle image qui fait la largeur de ton header + 200 pixels, et pour la hauteur, la même que ton header. Tu mets sur ce nouveau document du jaune (le même que ton fond) et après tu colles ton header dessus, tout à droite.

Puis tu utilises cette image pour le header. Et dans ta ligne de code où tu insères le header, tu mets tout à 0.

Regarde dans mon exemple de header, à gauche, il y a une "partie" du fond (le gris à gauche). C'est ça qu'il faut que tu fasses
https://2img.net/r/ihimizer/img329/4451/headertl1.png

Ok, j'fais ça tout de suite =)
Mais sinon, moi, il est bien mis mon header ...
Enfin bref ^^

Voila c'est fait ^^

Oki. Ca marche à merveille ! En fait, c'est les différents navigateurs qui causent ces problèmes de décalage souvent. Mais bon, là, au moins, ce sera bon pour tout le monde

Ca rend très joli en tout cas !

Sinon, on voit qu'il y a deux pages introuvables de voilà qui s'affiche. Dans le code source de ta page index (celle avec le design), tu as du, normalement, définir le nom d'une page qui doit s'ouvrir dans la colonne de gauche, et de même pour celle de droite.

Tu as défni quels noms de pages ?

=)

alors pour les pages, celle de gauche, c'est navigation.html et celle de droite, c'est home.html ^^

Ok. Donc sous Nvu, tu vas créer deux pages, une qui s'appelle navigation.html, et l'autre qui s'appelle home.html et tu les enregistres.

Tu ne règles rien dans ses pages. Tu peux juste écrire Navigation dans navigation.html et Home dans home.html.

Tu ne mets rien en forme. On fera tout ça avec le css.

Et tu héberges le tout.

Tu parles de les heberger sur voila ?
Pcq j'l'ai fait mais ça change rien

Oui, ça change. Il n'y a plus le fait que voilà ne trouve pas la page.

Donc maintenant, on va pouvoir commencer les pages
Tu sais déjà ce que tu veux mettre dans la page navigation.html (donc à gauche si j'ai bon souvenir) ?

Ok.

Heu... J'pensais à Ressource, Graphisme, Tag Board, les affiliates, Commandes ...
Les liens pour ça ...
En fait, c'est la navigation ^^

Oki. Comme sur tous les sites ^^ Moi la première

Donc tu vas prendre Nvu et tu ouvres la pages navigation.html

Ensuite, tu écris ce que tu veux. Tu ne t'occupes pas si ce n'est pas beau à voir. On réglera tout ça avec le css. Donc tu ne t'occupes pas de la couleur par exemple.

Il faut juste faire attention à un truc, c'est qu'il faut que tu écrives en paragraphe. Il y a un endroit dans la fenêtre de Nvu, vers en haut à gauche, où c'est écrit "corps de texte". Tu changes en "paragraphe". Il faut bien faire attention à ce que tout soit écrit en paragraphe.

Tu peux faire un petit bout, sans faire toute la page, et on fera le css pour mettre tout ça joli

Voila ^^
C'est fait =)
Faut faire quoi après ??


(j'vais manger, j'reviens dans 30 min ^^)

Donc quand tu auras fini de manger ^^, on va commencer le fichier css, parce que pour l'instant, sur le site, ça donne du noir écrit sur du noir.

Dis-moi quand tu es de retour