La création d'un site

Un site est un ensemble de pages web reliées entre elles par un menu, avec un même design (pour le confort du visiteur) et traitant d'un ou plusieurs sujets.
Il faudra donc:

Rajouter des pages web

Avec thimble c'est assez simple: Dans la zone "fichiers" cliquez sur l'icone et "Ajouter un fichier HTML"
Un fichier index-2.html est automatiquement créé, il faudra y rajouter le header pour que le design soit le même que sur la page index.html
En rajouter 3

Création d'un menu

Il existe sur internet beaucoup d'exemples de menus...J'ai choisi celui-là qui est simple (vous pourrez en choisir d'autres plus tard...)

À rajouter dans la feuille de style 


ul#menu_horizontal {
  width : 900px;
  height : 25px;
  list-style-type : none;
}
ul#menu_horizontal li {
  padding : 0 0.5em;
}
li.bouton_gauche {
  float : left;
}
#menu_horizontal a:hover {
  color: green;
}

#menu_horizontal a:visited {
  color: darkorchid;
}
  • ul#menu_horizontal: précise que c'est pour une liste de la division menu_horizontal.

  • li.bouton_gauche: c'est un élément de liste de la classe bouton_gauche.

  • #menu_horizontal a:hover signifie que la couleur des liens sera en vert quand on passe dessus avec la souris dans la division menu_horizontal.

  • #menu_horizontal a:visited : signifie : Devinez...

À rajouter dans toutes les pages web

La balise <nav> détermine une section dans laquelle sont regroupés des liens de navigation vers d'autres pages.


Ce qui donne:

Intégrer ses sketchs en P5js dans votre site

Il faut dans un premier temps charger le dossier de votre sketch dans la zone fichiers de Thimble (glissez-déposez le!).

Pour faire le lien vers votre sketch il y a deux méthodes :

Méthode 1:
Dans une de vos page faire un lien vers votre sketch.

<a href="nom_du_dossier_de_votre_sketch/index.html" target="blank">Mon sketch</a>

Méthode 2:
Dans une de vos page utiliser la balise <iframe>

<iframe src="nom_du_dossier_de_votre_sketch/index.html" width=800 height=300 frameborder="0"> </iframe>
Il faudra sans doute régler la largeur(width) et la hauteur(height) pour que l'iframe s'adapte aux dimensions de votre canvas.

Pour un projet: Créer un site