Créa-Design

Ton Forum De Créations
 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  

Partagez | 
 

 [Tuto] , Faire un site en HTML sans Assistant

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
AuteurMessage
• Math~
Aide Designer
Aide Designer
avatar

Masculin
Nombre de messages : 3222
Age : 24
*Prénom : Mathieu
*Humeur : CD is Backkk !
*Chanson du moment : Tell me your Wish ~ So Nyeo Shi Dae
Date d'inscription : 16/09/2006

MessageSujet: [Tuto] , Faire un site en HTML sans Assistant   Mer 29 Nov - 12:18

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 : http://img138.imageshack.us/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 : http://img379.imageshack.us/img379/2366/codage1nk6.jpg

ETAPE 4.
Avec l'outil tranche, tracez l'emplacement de vos deux colonnes : http://img361.imageshack.us/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>
<!-- ImageReady Slices (commande1.jpg) -->
<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>
<!-- End ImageReady Slices -->
</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 : http://img142.imageshack.us/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>
<!-- ImageReady Slices (commande1.jpg) -->
<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>
<!-- End ImageReady Slices -->
</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
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Caroline.
Aide Designer
Aide Designer
avatar

Féminin
Nombre de messages : 12544
Age : 22
*Prénom : Caroline
*Humeur : good.
*Chanson du moment : superjunior; sorry sorry
Date d'inscription : 16/09/2006

MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Mer 29 Nov - 13:10

Sa me fait sa :oops:

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://car0leen.skyrock.com/
Sarah`
Aide Designer
Aide Designer
avatar

Féminin
Nombre de messages : 1274
Age : 23
Date d'inscription : 10/10/2006

MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Mer 29 Nov - 14:03

c'est quand meme tres compliquer mdr
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Caroline.
Aide Designer
Aide Designer
avatar

Féminin
Nombre de messages : 12544
Age : 22
*Prénom : Caroline
*Humeur : good.
*Chanson du moment : superjunior; sorry sorry
Date d'inscription : 16/09/2006

MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Mer 29 Nov - 14:42

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

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://car0leen.skyrock.com/
Gia
Modo des partenaires
Modo des partenaires
avatar

Masculin
Nombre de messages : 1489
Age : 23
*Prénom : J-A
*Humeur : Smile =)
*Chanson du moment : UTADA HIKARU - FIRST LOVE
Date d'inscription : 17/09/2006

MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Mer 29 Nov - 23:22

%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 !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Mer 29 Nov - 23:44

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 ^^
Revenir en haut Aller en bas
Emma
Fidèle CDtien
Fidèle CDtien
avatar

Féminin
Nombre de messages : 552
Age : 25
Date d'inscription : 16/09/2006

MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Mer 29 Nov - 23:47

Merci Math' Wink ! J'vais essayer çà
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
• Math~
Aide Designer
Aide Designer
avatar

Masculin
Nombre de messages : 3222
Age : 24
*Prénom : Mathieu
*Humeur : CD is Backkk !
*Chanson du moment : Tell me your Wish ~ So Nyeo Shi Dae
Date d'inscription : 16/09/2006

MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Jeu 30 Nov - 20:52

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 ^^

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Gia
Modo des partenaires
Modo des partenaires
avatar

Masculin
Nombre de messages : 1489
Age : 23
*Prénom : J-A
*Humeur : Smile =)
*Chanson du moment : UTADA HIKARU - FIRST LOVE
Date d'inscription : 17/09/2006

MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Jeu 30 Nov - 21:47

Mo ije bloque sur image ready! >.<
Au debut quoi !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Jeu 30 Nov - 21:54

j'ai pas compris l'etape 9
Revenir en haut Aller en bas
• Math~
Aide Designer
Aide Designer
avatar

Masculin
Nombre de messages : 3222
Age : 24
*Prénom : Mathieu
*Humeur : CD is Backkk !
*Chanson du moment : Tell me your Wish ~ So Nyeo Shi Dae
Date d'inscription : 16/09/2006

MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Jeu 30 Nov - 22:03

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.

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Caroline.
Aide Designer
Aide Designer
avatar

Féminin
Nombre de messages : 12544
Age : 22
*Prénom : Caroline
*Humeur : good.
*Chanson du moment : superjunior; sorry sorry
Date d'inscription : 16/09/2006

MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Jeu 30 Nov - 22:04

Jy arrives po :oops:
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://car0leen.skyrock.com/
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 2:30

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 ...
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 11:22

Si vous voulez faire un site sans HTML, prenez le logiciel Nvu Wink
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 15:18

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

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 ?
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 15:25

Xx |•| Emma |•| xX a écrit:
[ // Axelle \\ ] a écrit:
Si vous voulez faire un site sans HTML, prenez le logiciel Nvu Wink

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
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 15:25

Xx |•| Emma |•| xX a écrit:
[ // Axelle \\ ] a écrit:
Si vous voulez faire un site sans HTML, prenez le logiciel Nvu Wink

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 ^^)

Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 15:27

[ // Axelle \\ ] a écrit:
Xx |•| Emma |•| xX a écrit:
[ // Axelle \\ ] a écrit:
Si vous voulez faire un site sans HTML, prenez le logiciel Nvu Wink

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 I love you ^^
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 15:30

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 Wink

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 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
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 17:03

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 ^^
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 17:38

Ah nan enfaite c'est bon j'y arrive xpdr ^^ merci beaucoup en tout cas ^^ Razz Wink
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 18:53

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 ^^ ]
Revenir en haut Aller en bas
EiiiMA
Arrivée chez les Pros CDtiens
Arrivée chez les Pros CDtiens
avatar

Féminin
Nombre de messages : 1119
Age : 23
*Prénom : La ou tu verras Ryan Shekler , je ne serais pas très loin , alors lorsque tu vois Zac Efron . ..(L)
Date d'inscription : 08/11/2006

MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 19:29

Vous voulez un autre tuto ? Wink
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://club-rihanna.com
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 19:41

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
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   Ven 29 Déc - 20:26

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
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: [Tuto] , Faire un site en HTML sans Assistant   

Revenir en haut Aller en bas
 
[Tuto] , Faire un site en HTML sans Assistant
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Créa-Design :: • Aide Design • :: Autres tutoriaux-
Sauter vers: