Learning Design
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
Accueil  Dernières imagesDernières images  Rechercher  S'enregistrerS'enregistrer  Connexion  
Le Deal du moment :
Cdiscount : -30€ dès 300€ ...
Voir le deal

 

 Cours de mel [OK]

Aller en bas 
2 participants
Aller à la page : Précédent  1, 2, 3, 4, 5, 6, 7  Suivant
AuteurMessage
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 14:00

daccord ! bon bah si on se revoit pas avant que je parte: je reviens le WE prochain, car je bosse cette semaine, voila !!
bonne vacances ^^
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 16:31

Ok. Je te mets quand même la suite.

Donc maintenant, on va faire la page footer.php

Code de base :

Code:
<!-- on referme la balise de la zone de texte pour le contenu -->
</div>

<!-- on ouvre maintenant la balise de la zone de texte pour le menu (Remplacer les dimensions)-->
<div style="position: absolute; left:575px; width:175px; top:378px; z-index: 1;" align="justify">

<!--Vous pouvez maintenant mettre votre texte-->
<h1> Menu</h1>
Lien<br>
Lien<br>
Lien<br>
Lien<br>
Lien<br>
Lien<br>

</p>Et puis tous ce que tu veux d'autres dans la colonne de gauche.</p>

<!--Et on oublie pas de refermer les balises body et html-->
</body></html>

Donc, on ouvre le <div>. C'est la même chose que dans la page que tu as faite avant, sauf que c'est pour la petite colonne (donc celle de gauche).

Idem qu'avant :
- left, c'est la distance entre la gauche de ta page et la petite colonne.
- top, la distance entre le haut de ta page et le haut de ta petite colonne.
- width, c'est la largeur de la petite colonne.
Revenir en haut Aller en bas
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 17:15

je suis encore là ! jusqu'à ce soir !lol
alors j'ai fais ça, mais je n'ai rien écrit encore^^ il me reste quoi pour finir l'index ??
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 17:27

Donc si tu as fini la page, il reste à faire la page index.php

Le principe est tout simple. En haut de la page index, on va utiliser ce qu'on appelle un "include" en php. Ca sert à dire à la page qu'elle doit prendre le design.

Et on fait de même au fond pour dire qu'il faut prendre le menu, les partenaires...

Je te donnes le code général de la page index.php

Code:
<? include'header.php';?>

<!-- contenu du site  -->
<p> ici, tu as le contenu de la page index.php !</p>

<? include'footer.php';?>

Ce code est important. C'est le code de base pour TOUTES tes pages. Si tu veux créer un page avec la biographie d'une actrice par exemple, tu remprendras ce code.

Et tu héberges tout ça. Si ça marche pas du premier coup, c'est pas grave. En HTML ou php, il y a un avantage (ou un inconvénient, c'est toi qui voit ^^), c'est que si un petit caractère est faux, toute la page fonctionnent pas ou mal. Ca permet de voir très facilement s'il y a des erreurs ou pas Smile
Revenir en haut Aller en bas
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 17:48

ça m'énerve, je bloque, ça ne veut pas se metre comme il faut!
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 17:52

Tu as tout hébergé ?

Je vais aller voir et éventuellement trouver ce que cloche. T'inquiète pas, c'est normal que ça fontionne pas du premier coup. Même moi je dois m'y reprendre à plusieurs fois des fois.

Je vais voir. On va essayer de faire marcher tout ça ce soir Smile
Revenir en haut Aller en bas
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 17:53

oui, j'ai tout héberger avec les noms que tu m'as donné^^
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 18:00

Je vais voir Smile

EDIT : à première vue, c'est simplement les nombres de pixels pour placer les blocs de contenu qui ne sont pas tout à fait juste. Je te corrige ça. C'est simplement les nombres de pixels à changer.

Je te fais, et je verrai bien si c'est le seul problème Smile

EDIT 2 : J'ai toujours un problème avec la colonne de gauche.

Je dois aller souper. Je tacherai de trouver ce qui cloche après.

EDIT 3 : J'ai trouvé ! C'était tout simplement une balise qui manquait à un endroite.
Revenir en haut Aller en bas
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 19:22

aaaaaaaah ! génial ! tu es super !lol
alors ensuite, faut que je remplisse mon menu je suppose ? alors je fais ça avec des images où la couleur est la même que sur la colonne ? parce que sinon, j'aime bien avec des trucs comme http://blake-network.com/... enfin bref, je sais pas si on en ai déjà à là !lol

bon apétit alors, moi aussi je vais bientot manger^^
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 19:28

De rien pou la correction !

Sinon, pour le menu comme sur le site que tu m'as donné, c'est très facile à faire. Plus simple que ça, tu trouves pas ^^

Donc en faite, ça se fait avec le CSS. Le css, c'est un fichier qui contient en fait toutes les propriétés de ton site. C'est dessus que tu définiras que tu écris en rose fluo, que les liens sont en vert fluo... et le jour où tu veux changer le rose fluo en rose bonbon, et bien tu changes sur le fichier css, et ... magie... ça te change sur tout le site.

Donc avant de faire le css, on va juste mettre un peu de texte dans la page index, question qu'on puisse voir les effets du fichier css après Smile

Donc tu ouvres ta page index.php dans Notepad++, et tu écris un petit texte à l'endroit où j'avais écrit un truc du style "ici, tu es sur tel page".

Tu penses justes à écrire entre les balises <p> et </p> comme tu as pu l'apprendre sur le site du zéro Smile
Revenir en haut Aller en bas
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 20:00

Bon, alors j'ai donc mis un texte, ce sera mon édito, il sera à la même place, mais pas présenté comme ça !mdr ! j'attends que tu m'apprennes le reste ^^

oh la la, on a pas fait grand chose, mais je suis super contente! lol
bon, cette fois, j'y vers réellement !lol ! donc a samedi prochain! bisous, et bonne vac ^^
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 12 Juil - 20:10

Détrompe-toi, on a déjà sacrément bien avancé. Parce qu'après, pour faire toutes les pages, c'est toujours la même façon de faire. Donc on a fait un grand pas en avant déjà Smile

Je te mets quand même l'explication sur le css, et tu essaieras quand tu serras de retour.

Donc le css, c'est très simple.

Exemple de code :

Code:

p{
font-size: 11px;
color : #EEEEEE;
}

Ca marche toujours de la même manière. Il y a le "p", qui signifie en fait le paragraphe (c'est ce que je t'ai dit de mettre avec on texte avant Smile ). Puis tu ouvres l'accolade, et tu la refermes. Sans oublier le ; après chaque propirété.

Entre deux, tu mets divers éléments, comme la taille du texte, la couleur, si c'est souligné, surligné...

Donc tu ouvres Notepad++ ou le bloc note, tu crées une nouvelle page que tu appelles style.css

Et dedans tu vas mettre différents codes, que je te donne. Tu changeras les informations. Tu verras, d'une fois qu'on a compris le truc, c'est simple comme bonjour Smile

Pour le paragraphe :
Code:

p{
font-size: 11px;
color : #EEEEEE;
}

Pour le fond des pages :
Code:

body{
background-color: #000B20;
}

Pour les liens :
Code:

a:link{
color: #FFD591;
}

Pour les liens déja visités :
Code:
a:visited {
color: #FFD591;
}

Et ça, c'est au moment où tu passes la souris sur le lien :
Code:
a:hover {
color: #FFD591;}

Donc il te faut changer les couleurs. Ensuite, si tu veux savoir comment faire d'autres choses, mettre en gras, souligné... tu me demandes. Je t'ai donné les choses de bases, mais il faut savoir qu'il en existe une tonne. Impossible de tous les connaitres.
Revenir en haut Aller en bas
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 19 Juil - 14:50

Alors, je suis revenue !!!
alors j'ai une super nouvelle^^ j'ai réussis à héberger sur free. mais l'adresse a changé, parce qu'ils n'acceptent pas les petits tirets (-)... bref, faudra aller voir: http://gossip.france.free.fr

alors, j'ai réussis a faire ma navigation sur le cotés, mais les liens sont soulignés et j'aimerais y enlever.... ensuite, pour le css, j'ai modifié la couleur et tout, ensuite, je voudrais savoir quelques trucs:

comment on fait pour centrer ou justifier, mais qu'une images, ou tout... car je veux justifier tout ce qui sera écrit dans mon site et centrer que quelques petites choses ^^ donc je pense que le premier est en css et le 2° en html ?

et ensuite, comment fait-on pour mettr en couleur tous les titres (h1, etc...) de différentes couleurs, mais en css je pense, pour que tout se change en même temps ? voilà !lol, bonne chance, j'avais pas mal de questions^^
Revenir en haut Aller en bas
http://gossip.france.free.fr
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 19 Juil - 18:43

alors désolée du double post, edit ne veut pas se mettre^^
j'ai réussis à enlever mes soulignements des liens (merci le site du zer0 !mdr)

j'ai réussis a justifer tout, mais pas à centrer que quelques trucs

et les titres, normalement, c'est OK! lool
ah oui, et pour le contenu de mon sit,e je reprends ma page index ou j'écris, et enregistre sous un autre nom, c'est ça ?
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptySam 19 Juil - 19:07

Alors... ^^

Pour les titres, au cas où, c'est avec le CSS qu'il faut régler.

Pour le contenu, oui, tu fais comme avec la page index, donc tu auras le include en haut et le deuxième include en bas.

Et sinon, pour centrer juste un truc, il faut que tu mettes :

Code:
<p style="text-align: center">ton texte</p>
Revenir en haut Aller en bas
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptyLun 21 Juil - 12:41

merci !!! par contre, j'ai un problème, parce que je n'arrive pas a le mettre sans que ça saute une ligne ensuite, tu peux m'aider ?lol

edit: je commence à faire mon contenu, j'ai fais la partie gossip girl, enfin, pas tout, je suis loin d'avoir finis, j'ai fais que acteurs et blake & leighton !lol ! enfin, c'est un bon début ! je suis super contente^^

sinon est ce que tu sais installer une galerie copermine ???
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptyLun 21 Juil - 15:39

Alors, pour les galeries copermine, j'en ai déjà installé une, mais qu'une seule. Mais tu peux trouver de bon tuto sur le net pour installer copermine sur Free il me semble.

Sinon, avec le code que je t'ai donné, c'est normale que ça saute une ligne, parce que c'est des paragraphes. Si tu veux pas que ça saute une ligne, tu mets <br />
Un exemple :

Code:
<p style="text-align: center">ton texte sur la prermière ligne<br />ton texte sur la deuxième.</p>

Mais à mon avis, c'est pas là que ça péquelotte.

En fait, je comprends pas trop. Tu veux avoir des bouts centré ? Parce que c'est tout le paragraphe qui est centré, ou rien du tout. Tu peux pas avoir un mot centrer, et le reste du paragraphe non.
Revenir en haut Aller en bas
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptyLun 21 Juil - 16:46

ouais, je vais chercher pour coppermine.
alors en fait, je veux tu vois, sur l'édito par exemple mettre:

"Bienvenue sur la nouvelle version du site Gossip Girl France !" et Bonne visite à tous ! Mel, Votre Webmiss.
centré, mais pas le reste et ce, sans sauter de ligne ^^
nan, mais c'est pas grave sinan ^^

edit: pour mettre mon texte en face de mon image, on fait comment ?
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptyLun 21 Juil - 20:06

Alors, pour l'édito, pour centrer, je vois pas comment, parce qu'en principe, tout un paragraphe est pareil. Si j'ai bon souvenir, quelqu'un avait essayer une fois avec les balises <center> </center>, mais c'est pas très orthodoxes ^^ Et j'ai pas la moindre idée si ça marche. Si ça fonctionne, ça risque bien de sauter une ligne quand même.

Sinon, pour écrire ton texte à côté d'une image. Je ne sais pas par coeur le code, parce que j'utilise jamais à vrai dire. Mais je l'ai déjà fait. Tu peux trouver ça sur le site du zéro, ici : http://www.siteduzero.com/tuto-3-44-1-mise-en-boite-partie-2-2.html
Ca s'appelle des images flottantes Smile
Revenir en haut Aller en bas
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptyMar 22 Juil - 13:49

MERCIII ! l'image, j'avais pas trouvé sur le site du zero !mdr ! et pour le centrer, nan mais c'est bon, je me suis débrouillée, ça choque pas que ça saute une ligne dans le menu de gauche ?? ? moi non étant donné que je prefere la clarté ! ^^

edit: encore une petite question !lol, je n'ai pas réussis a trouvé la balise pour souligner^^


Dernière édition par mel le Jeu 24 Juil - 14:16, édité 1 fois
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptyMar 22 Juil - 14:05

De rien pour les images flottantes Smile

Je suis comme toi, j'aime bien la clarté !
Revenir en haut Aller en bas
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptyMar 22 Juil - 18:30

alors j'ai du mal avec coppermine !!! j'arrive pas a comprendre ce qu'ils veulent dire dans les tutos, tu peux m'aider si je te pose des questions en même temps que j'essais d'installer ??
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptyMar 22 Juil - 21:33

Ouais, mais moi je l'ai installée qu'une fois, et pas sur Free ^^ Par contre, j'ai jamais vraiment changer tout le CSS pour le design. Donc ça, il faudra te débrouiller.

Mais je te promets rien.
Revenir en haut Aller en bas
mel
Super designer
mel


Féminin
Nombre de messages : 983
Age : 32
Logiciels : photofiltre, photofiltre studio, Unfreez

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptyMer 23 Juil - 13:49

daccord !!!
nan, mais pour le design, je devrais y arriver, ou changer les cuoleurs et tout, c'est le plus important^^

bon, j'espère y arriver seule, j'ai trouvé quelques tutos, mais au cas ou, je te demande^^ thks^^
Revenir en haut Aller en bas
http://gossip.france.free.fr
Emimoi
Administratrice
Emimoi


Féminin
Nombre de messages : 11442
Age : 32

Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 EmptyMer 23 Juil - 19:20

Oki Smile Pour le design, c'est que du CSS, mais c'est pas des plus simples. Comme j'ai jamais eu besoin de changer quoi que ce soit, j'y connais pas grand chose ^^
Revenir en haut Aller en bas
Contenu sponsorisé





Cours de mel [OK] - Page 2 Empty
MessageSujet: Re: Cours de mel [OK]   Cours de mel [OK] - Page 2 Empty

Revenir en haut Aller en bas
 
Cours de mel [OK]
Revenir en haut 
Page 2 sur 7Aller à la page : Précédent  1, 2, 3, 4, 5, 6, 7  Suivant
 Sujets similaires
-
» [COURS] Introduction au cours d'HTML
» Cours de Its-Clo
» -Cours de ju-dom-
» Cours de emy-fan

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Learning Design :: World wide web :: L'école :: Anciens cours d'élèves :: Site-
Sauter vers:  
Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser