Emotiik

Coucou et bienvenue dans ton cours =)

Donc tu m'as dit que tu avais un e-monsite... Tu as déjà un projet, fais quelque chose dessus ? si oui, je pourrais avoir l'adresse ? Que voudrais-tu savoir faire ?

Salut !

Oui j'ai un e-monsite, et je voudrais en faire un site de ressource graphique ^^
Donc j'ai vaguement commencé à poster un design, mais après je suis complétement perdue --'
Voila l'adresse : http://fairy-dream.e-monsite.com/

En fait, le problème avec e-monsite, c'est que les possibilités sont assez limitées =). Donc on peut continuer sur e-monsite, y'a pas de soucis fondamentaux, mais si tu veux déménager vers un autre hébergeur, on peut aussi =).

Est-ce que tu as vraiment codé ou alors utilisé un truc genre éditeur visuel ou j'sais pas quoi ? Tu as un layout ?

Oui c'est un éditeur visuel que j'ai utilisé, parce que niveau codage, je suis débutante html >_< Et non je n'ai pas fait de layout, je pensais qu'il fallait une bannière comme sur un forum xD enfin bref, je suis en train de travailler sur le layout, simplement je reprend les cours demain, donc je n'aurais rien avant a moins mercredi =(
Et je veux bien changer d'hébergeur, parceque j'avoue qu'e-monsite me plait pas trop =/ Je l'avais choisis au pif ^^ Je devrais prendre lequel à ton avis ?

Bah écoute, on peut coder aussi un site avec un header mais c'est toujours plus sympa avec un layout =).

Sinon pour les hébergeurs, si tu as la possibilité d'aller chez Free, c'est un excellent hébergeur gratuit. Sinon tu as e3b, sur lequel je suis mais la page d'accueil est en maintenance suite à un changement de serveur. Ou bien http://www.lescigales.org/ ou encore http://www.000webhost.com/ =). Il en existe sûrement d'autres mais là je vois pas vraiment... Essaie toujours de trouver un hébergeur supportant le PHP, et tant qu'à faire, sur lequel tu peux envoyer tes fichiers via un FTP extérieur =)

PHP je vois à peu près ce que c'est, mais FTP extèrieur ... ? xD

Ouuups x).

En fait le FTP, c'est ce qui te permet d'envoyer tes pages sur ton hébergeur. La plupart du temps on utilise FileZilla (il faudrait d'ailleurs que tu le télécharges, si tu veux bien, et Notepad++ aussi.. j'peux te donner des liens si tu veux), qui est très pratique. Mais parfois, comme sur 110mb.com, on ne peut pas utiliser FileZilla, on doit tout faire via leur site, et ça c'est très très très embêtant, parce qu'il faut souvent choisir les fichiers un à un, et si tu veux mettre CuteNews par exemple, c'est pas vraiment une partie de plaisir vu le nombre incroyable de fichiers à héberger que ça implique =).

Ok, merci pour l'explication Wink

Alors, j'ai choisit lescigales : http://sense-of-mystery.lescigales.org/
bon y'a encore rien pour l'instant, mais on va parer à ça xD
J'ai fait un Layout, j'espère qu'il est bon :

Spoiler:

J'ai téléchargé Notepad ++ & filezilla =D

Bon alors, je crois que le mieux c'est de le coder en div =). Moi quand je code en div, j'aime bien découper mon layout en tranches, ce qui permet un chargement de page plus agréable. Le souci, c'est que ça se fait habituellement avec Photoshop (enfin moi j'le fais comme ça et je sais pas trop comment on pourrait faire d'autre ^^').

Donc pour te faciliter la tâche, voici un zip contenant ce que tu obtiens lorsque tu effectues ce fameux découpage en tranches et que tu demandes à Photoshop de te l'enregistrer "Pour le web" (je l'ai hébergé sur mon propre site, donc y'a pas de soucis virus ou quoi que ce soit =)). Tu dézippes et tu mets tout ça dans un dossier au nom de ton site, ce sera plus simple.

Si tu ouvres index.html dans Notepad++ tu obtiens ceci :

Code:: html>
<head>
<title>Sans titre-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

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

</body>
</html>

Tout ce qui est contenu entre les balises table, c'est ton layout. Tu peux modifier ce qu'il y a entre les balises title tout en haut (ce sera le titre de ton site). Dans la balise body, en haut également, tu peux supprimer l'information couleur relative au background. En-dessous de la balise meta, il faut que tu rajoutes cette ligne qui te permettra de lier tout ça à un fichier css :

Code:: <link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="style.css"/>

---------------------------------------
Petite parenthèse pour configurer FileZilla
1. Clique sur la petite image en-dessous de "Fichier", tout en haut à gauche.

2. Sélectionne "Nouveau site" et entre les paramètres qui te sont demandés.
Hôte : ftp.lescigales.org
Port : 21
L'identifiant et le mot de passe t'ont été donner dans un mail si je pense bien Smile

. Fais ensuite connexion.

Pour transférer des fichiers (à mettre absolument dans le dossier www que tu pourras voir dans la colonne de droite), il suffit de faire un glisser-déposer de la colonne de gauche à celle de droite =).

Merci de t'etre occupé de mon header =)

Bon alors, pour notepad c'est bon, mais j'ai un probleme avec FileZilla (déjà ? xD) quand je clique sur connexion, il me dit "impossible d'établir une connexion au serveur" O_o

Alors soit c'est le serveur qui foirouille et dans ce cas, tu peux faire Connexion plusieurs fois de suite...soit c'est ton identifiant/mot de passe qui n'est pas bon =). Ou alors tu n'as pas la même adresse ftp que moi sur LesCigales, mais ça m'étonnerait... Je te conseillerais de vérifier les données que tu as entrées pour te connecter =).

C'est bon ça marche =) Sauf que le layout ne s'affiche pas =/ Ca met des petites croix rouges à la place xD

Tu dois aussi transférer le dossier images dans ton répertoire www =)

Ah oui ça marcheuuuuh =D Merci ^^ (faut m'expliquer longtemps hein, je suis désolé langue

)
Par contre c'est normal que mon layout ne prenne pas toute la page ? Je suppose que je dois pouvoir le centrer ?

Oui oui bien sûr =). On va faire ça grâce au css Smile

(excuse-moi de ne pas t'avoir répondu plus tôt, je n'avais pas vu ton message =/).

Donc pour se faire..j'aimerais que tu supprimes le background-color qui se trouve dans ta page html, balise body =). On va l'intégrer au css, ce sera plus simple d'avoir tout sous les yeux =).

Donc pour créer une page CSS avec Notepad++, il suffit d'ouvrir une nouvelle page, et de choisir dans le menu Langage => CSS et de faire attention au format quand tu enregistras ta page =).

Code:: body
{
font-family: Arial, Times Nex Roman, Comic sans MS;
margin: center;
width: largeurdetonlayoutpx;
font-size: taillepx;
color: #9codecouleurdetontexte;
background-image: url("images/index_10.jpg");
background-repeat: repeat-y;
background-color: #codecouleur-anciendelapagehtml;
background-position: top center;
}

Un petit mot d'explication.. Tout d'abord, on met le nom de la partie dont on s'occuper, suivi de {. Ensuite, on met chacune des propriétés, suivi de : puis des valeurs et on ferme les valeurs avec un ; (oublier ce point virgule peut tout faire foirer ^^').

Font-family, ce sont les polices qui s'afficheront. Le navigateur prendra la première police, et si il ne sait pas l'afficher, il prendra la deuxième, etc...
Margin, ce sont les marges ^^. Comme tu veux centrer ton layout, j'ai mis center, tout simplement.
Width, la largeur de ton layout (attention à ne pas mettre d'espace entre ta valeur et px !!)
font-size : taille de la police
background-image : pour que ton layout s'agrandisse au fur et à mesure du contenu, il faut sélectionner la partie qui se répétera. comme ton layout est découpé en tranches, on prend simplement la dernière tranche =).
background-repeat: repeat-y indique qu'il se répétera de haut en bas. repeat-x, de gauche à droite.
background-position: on emt top center parce qu'on a mis center pour margin =). sinon, si on avait mis left ou right, on aurait mis left ou right =)

Voilà, et surtout, enregistre ton fichier css sous le nom de style.css =) si tu as des questions, parce que je pense avoir été très brouillonne, n'hésite pas !

Allô la planète ?

» Candidature de Emotiik
» Emotiik [27/03/08 - Photofiltre]