Cours de Trisakela

Pour qui est du codage je choisis le HTML, ceci se fait t-il avec notepad++ ? Pourrais tu aussi m'apprendres le CSS.

Alors oui, ça se fait avec Notepad++, mais également avec Nvu. Je t'avais déjà demandé de le téléchargé ou pas ? Si non, télécharge-le. Il est aussi gratuit

Et sinon, oui, je t'apprendrais également le CSS. Pour tout bon site (et même les plus simple), on utilise du CSS maintenant. Tu verras, c'est super simple !

Oui pour notepad ++, je l'est télécharger, et je suis prête pour que tu commences à m'apprendre à coder

Tu peux me donner l'adresse du site ? (sur Free), comme ça, je verrai ce que tu es en train de faire.

Est-ce que tu as compris comment utiliser Filezilla, ou tu veux que je t'explique ?

Sinon, il faut juste que je découpe ton design, afin qu'on puisse le coder. Je le fais, et je te poste ça ici.

Le problème c'est que je n'ai encore rien fait sur free, oui je veux bien aussi des explications sur filezilla. Sinon concernant le design je vais y faire un petit changement et concernant la découpe je peux très bien m'en occuper si tu veux.

up !!!

Je suis vraiment désolée de répondre si peu, mais j'ai absoluement pas le temps en ce moment avec les cours. Je suis en période d'examens, ce qui me laisse peu de temps pour le reste malheureusement.

Tu avais dit que tu voulais faire quelques changements dans le design. C'est fait ?

Voila j'ai fais mes changements, en revanche dois je laisser du blanc sur le coté car c'est le menu en css dont je t'ai parler un peu plus tôt sur ma classe qui va se trouver à cet endroit :



PS : sinon prends ton temps et bonne chance pour tes examens

Pour le blanc du menu, ça dépend quelle couleur tu veux avoir en fond dans ton menu. Est-ce que tu veux que ce soit le pattern, ou bien le blanc ?

Pour le fond : le blanc

Je te mets déjà les infos sur filezilla, comme tu me l'avais demandé.

------------------------------------- FILEZILLA

Je viens de voir que mYn avait fait un tuto, donc je te mets le lien

ICI : https://learning-design.actifforum.com/les-tutoriaux-f38/tutoriel-ftp-filezilla-utilisation-t10678.htm#223986

-------------------------------------

Sinon, je vais te couper le design (et je t'expliquerai ce que j'ai fait), et après on pourra coder.

Merci, concernant filezilla j'ai compris comment cela fonctionnait en revanche comment on fait pour voir le site sur free ?

Et merci pour la découpe du design

Pour voir le site ? Il te faut taper l'adresse (qu'on a du tu donner, ou que tu as crée, en t'inscrivant sur free).

Merci, mais c'est normal qu'il n'est pas centrer ?

Que quoi n'est pas centré ? Tu as déjà mis quelque chose sur le site ?

Sinon, pour pouvoir découper le design, il me faudrait le fond (pattern) que tu as utilisé, de façon à ce que le fond soit cohérent.

Non, je n'est absolument rien mis sur le site.

Concernant le pattern le voici :

Alors voilà le design découpé :

HEADER : https://2img.net/r/ihimizer/img200/8093/triheader.png
FOND : https://2img.net/r/ihimizer/img200/4135/trifond.png

Avance de commencer : à avoir les logiciels NOTEPAD++ et NVU sur ton ordi (gratuits). Je ne sais plus si je te l'avais déjà dit, alors je le remets.

----------------------------------------------- EXPLICATION SUR LE CODAGE

Je te préviens tout de suite. 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.

Dernière petite recommendation ^^ Quand on fait du html, tu risques dans 90% des cas d'avoir fait une petite boulette dans ton code. Et en html, il suffit que tu oublies un > pour que toute la page ne fonctionne pas. Donc surtout ne pas s'en faire si ça ne marche pas du premier coup ^^

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 copier 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 verra le CSS plus tard, donc c'est pas grave si tu ne sais pas ce que c'est pour le moment

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/img200/4135/trifond.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/img200/8093/triheader.png )

-----------------

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'i-frame) 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'i-frame. 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 si tu ne comprends pas les histoire de coordonnées. Je regarderais à ce moment-là moi, parce qu'en général, ça prend une semaine à comprendre autrement ^^ Ca viendra à force de faire, t'inqiète pas

Dernier petit truc, tout ce que tu fais pour ton site, tu l'enregistres dans un dossier (qu'un seul)

J'ai copier le code et changer les différentes choses que tu m'avais demandé mais comment je sais la hauteur et la largeur du header ? En revanche n'ayant rien compris au iframes, je n'est rien changé.

Alors pour les frames, je vais le faire pour la première fois, et par après tu le feras. En fait, d'une fois qu'on a compris le truc, c'est facile, mais il faut le comprendre

Pour la largeur et hauteur du header, tu peux ouvrir l'image dans photoshop, et ça doit être écrit quelque par la taille.

Sinon, tu peux ouvrir ton image dans ton navigateur, puis sur l'image, tu fais clique-droit -> propriétés (ou un truc du style).

Je viens de modifier la hauteur et la largeur. En revanche, quand je vais sur mon site chez free, on ne voit rien sur la page : http://lolli.sims.free.fr/ Es ce normal ?

Même remarque qu'à tout mes autres élèves : tu as hébergé les images (au même endroit que tes pages) ? Je sais que ça parait con comme question, mais la plupart des gens oublient de le faire

Emimoi a écrit:

Même remarque qu'à tout mes autres élèves : tu as hébergé les images (au même endroit que tes pages) ? Je sais que ça parait con comme question, mais la plupart des gens oublient de le faire

Désoler mais je ne comprends pas vraiment ta question , je n'ai pas encore d'images sur mon site ?

Je réexplique.

N'hésite pas à me redemander des explications quand tu ne comprends pas. C'est vrai qu'en relisant mes messages, je me rends compte que ce n'est pas toujours évident à comprendre. Désolée

Je vais essayer de dire ça plus clairement. Quand tu vas sur ton site (http://lolli.sims.free.fr/), tu as plein d'images sur la page, mais qui ne s'affichent pas. Ca te met un petit croix à la place. Ceci veut dire que le serveur (c'est en fait l'endroit où tu mets tes pages pour que les visiteurs puissent les voir) ne trouve pas les images. Il faut donc héberger ces images sur l'hébergeur, comme tu as fait pour les pages.

Si je regarde le code source de ta page, je vois qu'il doit y avoir, par exemple, une image qui s'appelle index_01.jpg, et qui se trouve dans un dossier images.

Donc sur le logiciel FTP (Filezilla ou Classic ftp, je ne sais plus lequel tu utilises), dans la colonne de droite, tu vas créer un nouveau dossier qui s'appelle images et tu mets dedans les différentes images.

Voilà, j'espère avoir été claire

Ma question va peut être paraitre un peu bizarre : mais sur quel hébergeur dois je héberger mes images : sur Filezilla ?

Mais je n'ai héberger aucunes pages encore ! Et désoler, j'ai fais comme tu m'as dit mais il n'y a toujours rien qui s'affiche

Tu n'as pas hébergé de pages encore !?! (en passant par Filezilla, comme tu le demandais). C'est bizarre, parce que quand on va sur l'adresse du site, ça nous amène à une page hébergée.

Avec le code que je t'avais donné précédement, tu as fait une page qui s'appelle index.html
Tu vas donc héberger cette page, avec Filezilla (tu avais l'explication sur le fonctionnement du logiciel dans une des pages précédentes).