|
|
Liste complète
Tous les designs que j'ai fait sont listés ici.
Pour ne pas faire une page beaucoup trop longue, les codes html sont tous présents sur mon site internet neocities. (s'ouvre dans un autre onglet)
Si vous avez des idées pour améliorer les thèmes en cours, n'hésitez pas!
Toutes les couleurs/images sont modifiables.
(je précise car certains pensent que c'est "bloqué" et inchangeable).
Les thèmes finis :
Menu caché avec le thème 5, thème 8, thème 12
Les thèmes en cours :
|
Décoration hors de la présentation.
Je vais vous apprendre à comment faire une mise en page hors de la zone présentation :
NB: retrouvez les balises à "copier/coller" sur mon site internet neocities.
  Passons maintenant à l'ajout d'image sur les côtés. Il faut toujours commencer par l'image de gauche.
 Explications : margin-left : dans le négatif car le "0" se trouve au milieu de la page. Pour le placer sur la gauche, il faut donc partir vers les "-". transform scale : l'image est un peu trop grande et je veux pouvoir voir la plupart de celle-ci. Je diminue donc en mettant un chiffre en dessous de 1 (ici, 0.6). Dans le cas contraire, c'est-à-dire, agrandir l'image, j'aurai mis au dessus de 1 (par exemple 1.2 ou 2.3 si elle est vraiment petite). Passons dès à présent à l'image de droite :  margin-top : en négatif car je n'ai pas mis les images à côté l'une de l'autre mais en "dessous" c'est pour cette raison que le négatif (-1095px) est très élevé. Pour le margin left, le 0 est toujours au même endroit donc il me suffit de trouver la bonne distance. Les couleurs Pour ajouter des couleurs sur les côtés,on prend toujours le même début (game_header top 0).
Puis, on va créer un div style avec la couleur qu'on souhaite grâce à box-shadow.(il existe sûrement une méthode plus simple, mais j'ai toujours fait comme ça donc je préfère ne pas changer.)
Puisque le site n'autorise pas les div seul, il faut lui mettre une donnée à l'intérieur. J'ai choisi img sans mettre d'image dedans. Par conséquent, il pense qu'il y a quelque chose, hors, c'est vide.
Je repète la même formule de l'autre côté ET VOILA.
Nos bordures colorées sont prêtes. Si vous n'aimez pas le vert et voulez une autre couleur, il faut changer les deux données en #82BF44.
ATTENTION! Pour ne pas que votre présentation ne soit cassée, je vous conseille de mettre toute la partie hors du cadre présentation avant (c'est-à-dire: les bordures, les images et les gifs qui sont sur les côtés/haut).
|
Questions d'HTML
Vous avez des soucis avec le "HTMLage"? Vous n'arrivez pas à vous repérer dans mes codes (c'est normal, même moi je m'y perd parfois)? Je vais répondre à toutes vos questions ici. Que ce soit sur la création pure et dure d'élément ou sur des interrogations par rapport aux balises à utiliser.
Tester son code avant de le publier
Je travaille sur ordinateur avec le logiciel Brackets. Voilà à quoi ça ressemble : 
Le logicel à gauche et l'aperçu (via Google Chrome) à droite. Si vous n'avez pas envie de télécharger Brackets, vous pouvez toujours aller sur w3schools.com J'ai mis le lien pour tester son code, mais vous pouvez trouver aussi des cours "aide" pour faire vos HTML,CSS,Javascript(javascript ne marche pas sur Sailorfuku)
Faire une boite/box/fond...
(Il faut savoir que je préfère travailler avec div plutôt que span car c'est ce que j'utilisais avant d'arriver ici. Il est possible d'utiliser span dans certains cas, mais par doute, je vais tout faire en div)Commencez par le crochet suivit de div. Puis, choisissez style="". Entre les guillemets, mettez les dimensions hauteur (height) et largeur (width) ainsi que la position relative. J'ai tendance à toujours mettre une bordure pour repèrer où sont les limites. Pour les bordures, on met border: le nombre de pixels, le style (simple, double, points, tirets...) puis la couleur. Voici à quoi ressemble ce que nous venons de faire :
Tadaaaa:!
Les différentes bordures possibles:
|
Pour une bordure simple, code HTML= solid
|
Pour une bordure double, code HTML= double
|
|
Pour une bordure pointillée, code HTML= dotted
|
Pour une bordure en tiret, code HTML= dashed
|
|
Pour une bordure relief (creux), code HTML= groove
|
Pour une bordure relief (bombé), code HTML= ridge
|
|
Pour une bordure relief (creux), code HTML= inset
|
Pour une bordure relief (bombé), code HTML= ouset
|
Tableaux d'aide
  
|
Et moi?
Vous pourrez le remarquer, je n'ai pas mis mon pseudo en bas des designs car je ne trouve pas ça jolie.
Par contre, si vous voulez notifier d'où vient votre présentation, vous pouvez mettre ce blinkie dans votre profil : 
Le code du blinkie :
J'ai une autre version au cas où vous n'aimeriez pas le rose : 
Le code :
Bonus
Ce style vous intéresse? Vous pouvez aussi le retrouver sur mon site! (version sans la partie Design remplie et les dividers/favicon/stamps...)
|
Liens
Quelques liens pour vos Favicons, Stamps, Buttons, Blinkies, Dividers, Dolls, Animals...
(cliquez sur les boutons)
     Cinni Emojibank Pixel-soupMooncady
Exemples de Favicons
  
Exemples de Stamps
  
Exemples de Blinkies
  
Exemples de Dividers
  
Exemples de Dolls
  
|
|
MENU : Présentation générale du projet Le paradis du HTML
