Résolu Du webdesign au code

Solutions (4)
Tags :
  • CSS
  • Programmation
, Maître Yoda |
Bonjour,

Voila j'ai fais mon webdesign,mais je ne connais pas trop le css xhtml ... Je ne suis pas un as dans ce domaine , quelqu'un pourrais m'expliquer comment faire ou ayant un site bien explicatif?

Une autre question, quel héberheur de site web me conseiller vous?

Merci
Contenus similaires
Meilleure solution
partage
, Maître Yoda |
Pour l'hébergeur payant, prend OVH sinon en hébergeur gratuit il doit exister tout plein de topic ou de site qui en parle, google est la pour t'aider.


Site du zero - Créons le design de votre site web !

C'est un bon tutorial pour débuter dans la mise en forme et la création de ta maquete en HTML/CSS.

Avant de suivre ce tutorial, essais d'en apprendre plus sur le HTML et le CSS séparément.

Pour le principe c'est assez simple.
- Tu créer des containers dans ton HTML avec les balise DIV
- Chaque balise DIV fait référence à un classe spécifique de ton CSS
- Puis tu configure la classe correspondante dans ton CSS pour mettre en forme ton container.

Après tu peux aller en profondeur, en précisant la mise en forme d'une balise html dans la classe de ton container.

exemple :

HTML
  1. <div class="menu">
  2. <ul>
  3. <li>exemple 1</li>
  4. <li>exemple 2</li>
  5. </ul>
  6. </div>


CSS
  1. .menu
  2. {
  3. background-color: #626262;
  4. background-image: url("images/motif.png");
  5. background-repeat: repeat-x;
  6.  
  7. border: 2px solid black;
  8.  
  9. }
  10.  
  11. .menu ul
  12. {
  13. list-style-image: url("images/puce.png");
  14. }


Petite explication :
Tu as dans ton fichier html un div, sa classe fait référence à cette dernière dans ton css, ici c'est "menu".
La on précise dans ".menu" du css, qu'on doit afficher une image (texture dans le cas présent) que l'on doit répéter à l'horizontale pour pour afficher l'arrière plan du menu. Vace aussi une bordure de 2 pixel, de couleur noir.

Puis pour .menu ul, on lui précise que la liste aura pour image de puce l'url que l'on a passé.

Tu peux gérer toutes les balises html dans ton css, pour la typographie, mise en forme....

Je ne fait que répéter ce que dis le tutorial. Entraine toi, sa ne sert à rien de partir directement suivre le tuto avec ton objectif, fait pas mal de test, enfin assez pour comprendre ce que tu écrira.
  • Commenter cette solution |
Score
0
òh
òi
, Maître Yoda |
Meilleure réponse sélectionnée par sega13.
  • Commenter cette réponse |
Score
0
òh
òi
, Maître Yoda |
Merci de vos réponse :) 
  • Commenter cette réponse |
Score
0
òh
òi
|
Je vais te décrire quelques proprieté CSS pour que tu ne sois pas bloqué:

  1. background: url(url_image); //Pour mettre une image de fond
  2. margin-left: 100px; //Déplace la div vers la gauche
  3. margin-right: 100px; //Déplace la div vers la droite
  4. padding-left: 100px; //Déplace le contenu de la div ayant un margin vers la guache
  5. padding-right: 100px; //Déplace le contenu de la div ayant un margin vers la droite
  6. font-size: 12px; //Taille de la police
  7. width: 100px; //Largeur de l'image
  8. height: 100px; //Hauteur de l'image
  9. font-family: Verdana; //Définit la police de la div
  10. margin-top: 100px: //Déplace la div de haut en bas
  11. padding-top: 100px; Déplacele contenu de la div yant un margin de haut en bas
  12. background-repeat: none; //Ne répète pas l'image ni en x ni en y
  13. background-repeat: repeat-y; //Répete l'image sur la hauteur
  14. background-repeat: repeat-x; //Répète l'image sur la largeur
  15. color: #000000; //Couleur de la police (ici c'est noir, sa c'est blanc: #ffffff)
  16. border: 1px; //Ajouter une bordure a l'image


Je pense qu'avec cela tu peut te faire un petit kit graphique de débutant -_^
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS