Pour l'instant, non, puisque tu n'as pas encore commencé les pages.
On va donc coder le layout.
Juste avant, je t'ai collé ton header sur un bout du fond. (ça facilite le codage) :
Ton header : https://2img.net/r/ihimizer/img22/7715/headerp.png
Ton fond : https://2img.net/r/ihimizer/img17/7114/soo1.png
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 mettre 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://2img.net/r/ihimizer/img17/7114/soo1.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://2img.net/r/ihimizer/img22/7715/headerp.png)
-----------------
PETIT COMPLEMENT pour la suite : une i-frame (ou frame), qu'est ce que c'est ? Alors le pincripe, c'est que tu as une page internet (en l'occurence index.html) qui est ta page pincipale. Les i-frames, c'est une techniques utilisées pour insérer une autre page dans ta page.
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
Si tu veux t'y essayer, tu ne te gènes 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
Dernières images Rechercher 
