[Tuto] , Faire un site en HTML sans Assistant

Alors ..

Qu'Allons nous aprendre à faire ? : Un site Internet , Personnel ou de commandes par exemple , à la maniere d'un blog mais 100 % Personnalisable .. Exemple de Site : http://justsophia.free.fr/

Comment faire ? : Alors , Il vaut mieux avoir quelques bases en HTML , mais si vous n'avez pas trop le courage , mieux vaut suivre ce tuto et pour tout probleme , http://www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html

Etape 1 : Tout site se fait à l'aide d'une base (comme une image de fond) , Vous devez créer un document de 1000 x 1500 sur photoshop , et faites votre design ^^ Exemple de Design : https://2img.net/r/ihimizer/img138/5612/sanstitre3zm0.jpg

Etape 2 (la plus longue) : On va Coder le layout . Coder ? Kézaco ? On va préparer le design afin de pouvoir rentrer le contenu de notre site dedans . Pour cela , Ouvrez Image Ready et suivez ce petit tuto :

Shana a écrit:

Voici un tutorial pour apprendre à coder un layout avec Photoshop, Image Ready et le bloc-notes...

ETAPE 1.
Tout d'abord, creez votre layout sous Photoshop. Le tutorial concerne un layout "traditionnel", avec 2 colonnes...
Votre layout doit être de la même forme que celui-ci, c'est à dire le header et le début des deux colonnes : http://img223.imageshack.us/my.php?image=commande1ct7.jpg

ETAPE 2.
Ouvrez ensuite Image Ready en cliquant sur le bouton tout en bas de la barre Photoshop, (ou Ctrl + Maj + M).

ETAPE 3.
Dans Image Ready, votre layout s'est normalement ouvert. Choisissez l'outil Tranche dans la barre : https://2img.net/r/ihimizer/img379/2366/codage1nk6.jpg

ETAPE 4.
Avec l'outil tranche, tracez l'emplacement de vos deux colonnes : https://2img.net/r/ihimizer/img361/921/codage2cx4.jpg

ETAPE 5.
Faites ensuite Ctrl + Maj + Alt + S pour enregistrer. Attention, verifiez bien que vous enregistrer images + *.html.

ETAPE 6.
Ouvrez ensuite votre page .html avec le bloc-note : Voila ce que vous devriez avoir :

Code:: <HTML>
<HEAD>
<TITLE>commande1</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 WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
   <TD COLSPAN=5>
      <IMG SRC="images/commande1_01.gif" WIDTH=700 HEIGHT=362 ALT=""></TD>
</TR>
<TR>
   <TD>
      <IMG SRC="images/commande1_02.gif" WIDTH=54 HEIGHT=30 ALT=""></TD>
   <TD>
      <IMG SRC="images/commande1_03.gif" WIDTH=164 HEIGHT=30 ALT=""></TD>
   <TD>
      <IMG SRC="images/commande1_04.gif" WIDTH=5 HEIGHT=30 ALT=""></TD>
   <TD>
      <IMG SRC="images/commande1_05.gif" WIDTH=424 HEIGHT=30 ALT=""></TD>
   <TD>
      <IMG SRC="images/commande1_06.gif" WIDTH=53 HEIGHT=30 ALT=""></TD>
</TR>
</TABLE>

</BODY>
</HTML>

ETAPE 7.
Si vous mettez cette page telle quelle sur votre FTP, vous aurez justele layout, tel que vous l'avez creez sous photoshop. Nous allons tout d'abord donnez un fond à cette page. Avec Photoshop, et à partir de votre layout, creez le fond : ici, ça donne ça : https://2img.net/r/ihimizer/img142/6114/fond1nf2.jpg

Pour que le fond apparaisse sur la page .html, remplacez "BODY BGCOLOR=#FFFFFF" par "BODY BACKGROUND="URLdevotreimage.jpg".

ETAPE 8.
Place au contenu maintenant. Repérez le numéro des tranche ou doivent se trouver vos 2 colonnes : ici, il s'agit des tranches 3 et 5. Pour faire apparaitre l'iframe au niveau des colonnes changer :

Code:: <TD>
<IMG SRC="images/commande1_03.gif" WIDTH=164 HEIGHT=30 ALT=""></TD>

par :

Code:: <TD><iframe src="menu.html" name="menu_iframe" WIDTH="164" height="1000" frameborder="0"></iframe></td>

REMARQUES : menu.html est la page qui s'affichera dans l'iframe. J'ai remplacé la hauteur 30 par 1000 car il s'agit de la hauteur de la page...

Faites la même chose pour la tranche 5 (mais faites attention aux dimensions) en remplaçant menu.html, par main.html (par exemple).
Changer ensuite commande1 par le titre de votre site.

Au final, vous devriez avoir ça :

Code:: <HTML>
<HEAD>
<TITLE>[color=red]...TITRE DE VOTRE SITE...[/color]</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BACKGROUND="[color=red]URLimage.jpg[/color]" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<TABLE WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
   <TD COLSPAN=5>
      <IMG SRC="images/commande1_01.gif" WIDTH=700 HEIGHT=362 ALT=""></TD>
</TR>
<TR>
   <TD>
      <IMG SRC="images/commande1_02.gif" WIDTH=54 HEIGHT=30 ALT=""></TD>

<TD><iframe src="menu.html" name="menu_iframe" WIDTH="164" height="1500" frameborder="0"></iframe></td>

   <TD>
      <IMG SRC="images/commande1_04.gif" WIDTH=5 HEIGHT=30 ALT=""></TD>

<TD><iframe src="main.html" name="main_iframe" WIDTH="424" height="1500" frameborder="0"></iframe></td>

   <TD>
      <IMG SRC="images/commande1_06.gif" WIDTH=53 HEIGHT=30 ALT=""></TD>
</TR>
</TABLE>

</BODY>
</HTML>

ETAPE 9.
Vous avez maintenant fait le plus gros du boulot ... Reste à coder le reste de vos pages ... c'est à dire, tout votre contenu ... Alors pas de panique, c'est simple. Voici la trame de base :

Code:: <html>
<head>
<base target="main">
<link rel=stylesheet href="style.css" type=text/css>
</head>

[color=red]TAPEZ ICI LE CODE HTML DE VOTRE PAGE[/color]

</body>
</html>

Faites toutes vos pages de cette manière, et chargez les sur votre FTP, et le tour et joué ^^ Bien sur, il faut avoir les bases html, histoire de coder le contenu. Il faut connaitre les balises ...

Source : YouandMe

Une fois le design codé , à vous de le remplir , J'imagine que pour quelqu'un qui ne sais rien faire c'est dur ! Mais allez parcourir le site du zero apres avoir codé votre design afin de connaitres quelques balises

Ensuite vous créez vos pages avec le code donné plus haut ^^

Questions à la suite et j'pense qu'il va en avoir ^^ Very Happy

Tuto by Math

Sa me fait sa :oops:

[Tuto] , Faire un site en HTML sans Assistant Essaiihe8

c'est quand meme tres compliquer mdr

x.Teacher for my sister.x a écrit:: Sa me fait sa :oops:

%Moi j'y comprends rien de rien ! :bounce:
C'est tres dur ! Je pense que sa serait facil si quelqu'un me montrerait direst sur mon ordi lol !

Invité

Jvais essayer ca ... moi j'en ai commencé un juste avec le site du zero lol ^^ mais bon le design c'etait un design fixe qu'ils expliquaient et moi j'aurais préféré un étiré donc bon ^^ mais la j'adore ca fait super ces types de design merci math ^^

Merci Math' Wink

! J'vais essayer çà

Caroline > La taille de ta page sur ton editeur de site est trop petite pour la taille de ton design ^^ , et pour les pages introuvables , il faut indiquer le chemin dans ton i-frame , mai un grand bravo pasque t'as presque fini

Tout le monde > En effet c'est assez compliqué .. Mais la patience et la concentration vous permettra d'avancer ^^

Mo ije bloque sur image ready! >.<
Au debut quoi !

Invité

j'ai pas compris l'etape 9

Dans les autres pages de ton site , tu insera ce code , et la ou y'a ecrit , Ton texte , ben tu met ton texte en mettant des balises pour la police , la couleur etc.

Jy arrives po :oops:

Invité

Juste une question Math ^^ Esque ton tutos la il est réalisable avec un autre log que Image Ready ? parce que je l'ai plus, mais de totue faocn je crois que ma période d'essaie est expirée ...

Invité

Si vous voulez faire un site sans HTML, prenez le logiciel Nvu Wink

Invité

[ // Axelle \\ ] a écrit:: Si vous voulez faire un site sans HTML, prenez le logiciel Nvu

euh tu sais faire les sites sans html avec NVU ? parce que je l'ai ce log, mais je sais absolument pas m'en servir xpdr ^^ donc si tu savais comment faire et que tu pouvais m'aider .. :oops:

Aufaite Math une autre question mdr ^^ :

Un moment tu parle de fond de site ^^ jvoulais savoir c'est le le fond d'un site ? esque [ dans l'exemple que ta montrer ] c les deux rectagles tout a droite et tout a gauche ac des espece de motif dessus ?

Invité

Xx |•| Emma |•| xX a écrit:

[ // Axelle \\ ] a écrit:: Si vous voulez faire un site sans HTML, prenez le logiciel Nvu

euh tu sais faire les sites sans html avec NVU ? parce que je l'ai ce log, mais je sais absolument pas m'en servir xpdr ^^ donc si tu savais comment faire et que tu pouvais m'aider .. :oops:

jme sens moins seule tout d'un couuuup ^^ I love you

Invité

Xx |•| Emma |•| xX a écrit:

[ // Axelle \\ ] a écrit:: Si vous voulez faire un site sans HTML, prenez le logiciel Nvu

euh tu sais faire les sites sans html avec NVU ? parce que je l'ai ce log, mais je sais absolument pas m'en servir xpdr ^^ donc si tu savais comment faire et que tu pouvais m'aider .. :oops:

Je t'ai fait une capture (un peu à l'arache cela dit lol désolée ^^)

[Tuto] , Faire un site en HTML sans Assistant Sanstitrejh9

Invité

[ // Axelle \\ ] a écrit:

Xx |•| Emma |•| xX a écrit:

[ // Axelle \\ ] a écrit:: Si vous voulez faire un site sans HTML, prenez le logiciel Nvu

euh tu sais faire les sites sans html avec NVU ? parce que je l'ai ce log, mais je sais absolument pas m'en servir xpdr ^^ donc si tu savais comment faire et que tu pouvais m'aider .. :oops:

Je t'ai fait une capture (un peu à l'arache cela dit lol désolée ^^)

Euh ... Et comment on s'en sert ? xpdr ^^ enfin comment on fait pour creer des pages, des liens, mettre le design ect ...

krokette = Ne t'inquiete pas on va y arriver I love you

^^

Invité

Xx |•| Emma |•| xX a écrit:

[ // Axelle \\ ] a écrit:

Xx |•| Emma |•| xX a écrit:

[ // Axelle \\ ] a écrit:: Si vous voulez faire un site sans HTML, prenez le logiciel Nvu

euh tu sais faire les sites sans html avec NVU ? parce que je l'ai ce log, mais je sais absolument pas m'en servir xpdr ^^ donc si tu savais comment faire et que tu pouvais m'aider .. :oops:

Je t'ai fait une capture (un peu à l'arache cela dit lol désolée ^^)

Euh ... Et comment on s'en sert ? xpdr ^^ enfin comment on fait pour creer des pages, des liens, mettre le design ect ...

krokette = Ne t'inquiete pas on va y arriver I love you

^^

Waouh... C'est une large question que tu me pose la ^^. Ba pour faire un fond par exemple tu cliques sur "Format" => "couleur personnalisée" et tu choisis la couleur que tu souhaite et puis pour ce qui est du design pour les boutons, les bann etc... Tu peux les faire avec ton logiciel de d'habitudes (comme photoshop) et ensuite l'insérer la bann en cliquant sur "image" et en déplacant la bann où bon te semble Wink

Invité

Euh oué ^^ ça j'ai " à peu pres " compris xpdr ^^ merci Razz

et pour creer les pages ? et les liens ? :oops: :oops:

Je sais je sais c'est compliquer a expliquer, et surtout très longs, alors si tu ne veux pas ou que tu n'y arrive pas je comprend très bien miss Wink

En tout cas merci deja pour ce que tu m'a expliquer ^^

Invité

Ah nan enfaite c'est bon j'y arrive xpdr ^^ merci beaucoup en tout cas ^^ Razz

Invité

Juste encore une question xpdr ^^ une fois els pages crées ^^ comment on héberges, ou on publie notre sites ? ^^ [ oué je susi la reine des questions débiles xpdr ^^ ]

Vous voulez un autre tuto ? Wink

Invité

Xx |•| Emma |•| xX a écrit:: Juste encore une question xpdr ^^ une fois els pages crées ^^ comment on héberges, ou on publie notre sites ? ^^ [ oué je susi la reine des questions débiles xpdr ^^ ]

[ lol et bien je crois qu'on est 2 Razz

]

Justement pour cette question je sais pas parce que je dois attendre quelqu'un pour qu'il m'explique comment le mettre sur le net Wink

Invité

Ah okay mdr ^^ Merci quand meme ^^ et merci beaucoup car grace a toi, juste en m'expliquant comment mettre le fond, j'ai tout compris mdr ^^ enfaite c super simple xpdr ^^ Razz

» faire un site simplement[tuto]
» Faire un contour en pointillés [tuto]
» [Tuto] Faire un gif avec PhotoFiltre Studio
» Faire une bann simple avec Photoshop [Tuto]
» Comment faire une texture sois même ? [Tuto]