Cours de # ShOu'w

Coucou !

Bienvenue dans ma classe

Est-ce que tu as déjà un site web ? Si oui, tu pourrais me donner l'adresse.

Sinon, est-ce que tu t'y connais déjà un peu en HTML et en CSS ou pas du tout ?

Coucou!!

Tout d'abord merci de m'avoir pris....

Alors oui j'ai créer un site web avec voila mais je comprend rien du tout du tout :s

J'ai avec le site du zérO commencer avec le HTML et le CSS.

Voila l'adresse mais tu pourra rien voir : http://sarah-riani-family.site.voila.fr/

Dis moi comment je peux faire pour que tu puisse voir... J'ai créer la page d'accueil avec les codes CSS mais je comprend pas comment installer le design et le menu enfaite.

Alors d'abord, une chose à savoir avec les hébergeurs, c'est que la première page qui s'affiche quand on clique sur l'adresse, c'est la page qu'il s'appelle index.html

Donc il va falloir créer une page index.html

Ensuite, pour le design, il faut le coder. Tu as deux manières de faire. Avec le php ou avec des i-frames. Par contre, Voillà n'accpete pas le php, donc faudra faire un i-frame.

Sinon, est-ce que tu as déjà un design ou pas ?

EDIT : J'allais oublié... ça peut paraitre logique quand on connait, mais pas nécessairement si tu ne connais pas. Il te faut héberger les pages sur le serveurs de voilà. Par contre, je ne connais pas voilà, donc je sais pas si il faut passer par le site ou bien par un logiciel spécial.

Euh pour ce qui est de l'hébergement des pages il faut passer par voila je pense, j'avais fais un header ::



Mais je sais pas si sa conviens pour un site enfaite :s

Et pour le fond, je pensais à sa ::

j'ai créer une page index.html mais elle n'est pas complète tout à fais j'ai seulement mis le message d'accueil, mais est-ce qu'il dois y avoir le design coder aussi dessus, les menus?

Oui, il doit y avoir le design codé dessus. Alors le design, il va falloir le transformer un petit peu, enfin, plutôt le compléter pour qu'il devienne un layout.

Donc pour le fond, je t'explique comment faire pour que tu utilises ce pattern. On s'occupe donc que tu design pourle moment. Quand il sera fini, on le codera sur la page.

Je te montre l'exemple du fond de mon site. C'est aussi fait avec un pattern.
http://emimoi.awardspace.com/halogens/fond.png

Comme tu peux le voir, en fait, il y a le fond du site à proprement parler, c'est à dire le pattern. Et par dessus, il y a les colonnes (souvent deux, une petite d'un côté pour les partenaires, le menu, le tagboard), et une plus grande de l'autre côté pour le contenu de ton site.

La somme des largeurs de tes deux colonnes doit donner la largeur de ton header.

Donc tu vas faire le fond, comme l'exemple que je t'ai donné, sur une image de la taille 1280x100. Tu fais les couleurs que tu veux donc, les bordures que tu veux...

Je vois pas ton site, sa me redirige vers un site anglais ou américains d'achat je crois :s

https://2img.net/r/ihimizer/img106/8939/fondtl0.png

Beh j'ai fais sa ::

http://apu.mabul.org/up/apu/2008/07/12/img-17183492ywj.jpg

Dis moi si ya un truc qui va pas.

EDIT: J'ai abandonner le pattern enfaite

Ca va très bien !

Je savais pas trop comment t'expliquer pour ce qu'il fallait faire avec le header, alors je l'ai fait, et tu regarderas pour comprendre. En fait, j'ai ajouter, à la gauche du header, un partie de fond.

Donc on a :
fond : http://apu.mabul.org/up/apu/2008/07/12/img-17183492ywj.jpg
header : https://2img.net/r/ihimizer/img366/367/headerqr5.jpg

On a tout. Prêt à commencer le codage ? Si tu suis bien tout ce que je te dirai, ça devrait bien aller normalement Avec deux autres élèves, ça a marché à merveille pour le moment.

Yep & merci pour le header

J'ai déja commencer un peu du codage... Mais je crois que je vais tout recommencer du début ce sera peut-être plus simple.

C'est parti =D

C'est parti alors !

Alors déjà, il te faut un logiciel comme le bloc note ou bien Notepad++. Je sais pas si tu en as un. J'utilise Notepad++ au cas où, donc je te conseille celui-là. Ce sont des logiciels gratuits

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

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><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<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

C'est un long pavé, je te l'accorde, mais c'est nécessaire. Si quelque chose ne foncitionne pas, pas de soucis. On regardera ce qui cloche. Ce n'est pas rare de faire une petite erreur à un endroit, et du coup, toute la page ne fonctionne pas comme il faut.

Tu héberges sur le serveur pour que je puisse voir

Alors voila mais j'ai un problème avec mon header et mes colonnes qui sont décalés... J'ai pourtant changer des chiffres mais peut-être pas comme il le faut :s

http://sarah-riani-family.site.voila.fr/

Voila (dsl pour ma nulitude mais suis vraiment débutante débutante :s)

J'ai toujours la page "Le site demandé est en construction" qui apparait.

Dans Voilà, il y a peut-être un fonction qui définit si le site est en construcion, et qu'il faut changer. En fait, j'y connais rien à Voilà.

Si jamais, envoie un MP à Sushiiz' (aussi dans ma classe) pour lui demander comment il faut faire. Elle est aussi avec Voilà.

C'est bizarre moi quand je tape l'adresse du site je vois sa ::

Spoiler:

Je crois que je vais demander à Sushiz' alors...

Je vois ça :

Spoiler:

C'est bon. On va pouvoir continuer normalement. Je vois tout très bien sur l'adresse du site Pas besoin de mettre des captures du coup.

Tu as donné quel nom à la page qui doit s'afficher dans la colonne de gauche ?

Je lui ai donné comme nom :

menu.html

Ok. Donc il va falloir que tu crées un page html qui s'appelle menu.html et que tu la mettes sur le site.

Donc maintenant, il faut faire les pages. Tu voudrais faire avec Nvu ou bien écrire tout le code à la main ?

beh je viens de la mettre sur le site la page menu.html
(mais on dirais sa met un ptit temps de décalage avant de s'afficher)

Beh j'ai NVu et Notepade++

Donc on va le faire avec Nvu je pense que ce sera plus rapide que de tout taper à la main :p

Ok. Donc tu vas ouvrir sur Nvu ta page menu.html

Et dedans, tu vas écrire ton menu. Ensuite, je t'expliquerai comment mettre des liens.

En haut à gauche de la fenêtre de Nvu, c'est écrit à un endroit "corps de texte". Il faut que tu le changes en "paragraphe". Fais bien attention à toujours écrire en paragraphe.

Si tu veux faire un retour à la ligne sans que ça fasse un grand espace, tu fais Shift+la touche enter.

Autrement, ça fonctionne comme un traitement de texte du style word.

Dernière chose, tu ne t'occupes pas des couleurs de la page, de la police... Tout ça, on fera avec le CSS.

Est-ce que dans mon menu je peux mettre au tout début un petit paragraphe de Bienvenue et de présentation du site?

J'ai bientôt finie =)

Oui oui ! Tu peux faire tout ce que tu veux, c'est ton site

Beh sa yè j'ai fais mon menu mais il mette toujours le message de voilà pour le moment :s

EDIT : Pour ce qui est du CSS, j'en ai appris un peu avec le site du Zero...

Ca, c'est le code de ta page index.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
 <HEAD>
 </HEAD>
 <frameset  rows="55,*" border=5 frameBorder=1 frameSpacing=0>
  <frame name="top"    src="http://site.voila.fr/public/divers/top.html"  marginWidth=0 marginHeight=0 scrolling="no" noresize>
  <frame name="bottom" src="/index.html"  scrolling="auto" frameborder="no">
 </frameset>
</HTML>

Dans le src="" du premier frameset, il y a le lien qui n'est pas correct à mon avis. Tu as à aucun endroit un fichier du nom menu.html C'est surement pour ça que ça ne s'affiche pas.

Il faut que tu changes ce bout de code : src="http://site.voila.fr/public/divers/top.html" en mettant le correct. Et normalement, ça devrait s'afficher.