Vous trouverez dans cette page des exemples pour construire vos pages web (dossiers, bouffe, albums personnalisés, etc.) pour le site frappé.

Comment l'utiliser

Encadré

Ceci est un encadré, placé automatiquement à droite de la page

Lorem ipsum dolor sit amet, accumsan justo blandit. Vestibulum pede. Maecenas pulvinar.

Nunc eget tempor, integer massa nulla, dictum lobortis. Lacus nisl consectetuer. A libero, vitae ante quisque, wisi lectus sed. Etiam et turpis, vestibulum fringilla. Ac phasellus ut, ea sed. Mattis erat.

Dictum lorem. A nam et, enim varius. Est lorem. Illum at morbi. Erat in. Adipiscing pede urna, quisque sed id.

Utilisons ce modèle de document pour créer ou mettre à jour toute page du site, incluant ou non la barre de menus.

Conseils de base

1. Enregistrer cette page et lui donner un nom différent ayant l'extention .php.
2. Ajouter autant de commentaires php ou html que nécessaire dans le code, le rendre lisible en détachant les paragraphes et les titres. Indenter si nécessaire (espaces ou tabulations en début de ligne).
3. Expliquer également en commentaires les parties de code pouvant resservir dans d'autres pages.
4. Ne pas ajouter de balises de mise en forme : font, align, center, etc. Tout est déjà dans la feuille de style, et celle-ci peut être enrichie si besoin.
5. Ne pas utiliser de générateur de HTML en wysiwyg.
6. Relire le code et faire le ménage avant de le déposer sur le site.
7. Informer les webmasters de vos ajouts et changements.

Conventions

• Les fichiers sont codés en UTF-8, et permettent ainsi l'utilisation de beaucoup de caractères dits "non-ascii" - caractères spéciaux, accentués, etc.
• Ils ont l'extension .php
• Ils incluent /scripts/global.php
• Ils positionnent à 1 (avec bandeau de navigation) ou à 0 (sans bandeau de navigation) la fonction top().
• Ils se terminent par la balise de fin bottom(getlastmod()).
• Afin de se rapprocher des futures normes xml, ils sont codés en x-html
• En x-html, toutes les balises ouvertes doivent être fermées :
• Les balises, p, h1, h2, ul, li, etc, sont naturellesment fermées avec /p, /h1, /h2, /ul, /li, etc - comme en html, sauf que là c'est vraiment obligatoire.
• Les balises img, hr, br, etc - qui n'avaient pas de balises de fin en html - doivent toutes se terminer par un /
• En x-html, toutes les balises de mise en forme explicite sont remplacées par des balises sémantiques
• Les titres ne sont plus mis en forme cas pas cas, ils utilisent h1, h2, h3, h4, etc, selon leur niveau de hiérarchie, h1 étant la plus élevée
• Les blocs ne sont plus faits evc des bidouilles de tableaux imbriqués, on les remplace par des sections délimitées et définies par des balises div.
• Plutôt que b, i ou u, on utilisera strong, em, cite, blockquote, etc. - chacun pouvant être défini dans la feuille de style du site
• Indiquer les dimensions des images (balise img) permet d'accélérer nettement l'affichage des pages, car le navigateur peut calculer la mise en page avant de posséder les images - qui s'afficheront une fois téléchargées dans l'emplacement que le navigateur aura réservé dans la page.

Pour le trombinoscope

Pour ces pages, pas besoin du bandeau de navigation : en haut de page, choisir top(0);

Page perso

Laisse libre cours à ton imagination, il n'y a pas de contenu conseillé.

Page spad

Mets le nom de chacun de tes spads dans un titre de niveau 1, entre <h1> et </h1>, ajoute la photo comme ceci <img class="illustration-droite" src="images/monspad.jpeg" alt="Mon Spad" width="320" height="240" />;, et donne quelques infos comme dans la liste ci-dessous.

Les noms des composants peuvent être des liens externes vers le site des fabricants.

• Cadre : Mercier Sakabou Érythropoïétine
• Fourche : Gitanes Long Air Vicié 170
• Jantes : Dam Oku Rond
• Moyeux : Tournan Rond
• Rayons : De Soleil Tootlanay
• Pneu avant : Hutchinson Crapaud Super Kikoolol 42a
• Pneu arrière : Hutchinson Crapaud Super Trolol 50a
• Dérailleur avant : Sudoku 500
• Dérailleur arrière : Feuhoku 400
• Commandes : Krotoku Power-KK vert
• Freins : Acid Bonanga
• Pédalier : Ovoïd C Luloïd
• Jeu de pédalier : B17 Stratofortress
• Cassette : BASF Chrome-Metal 90mn
• Chaîne : FR3 Pink TV Alliance
• Pédales : Pink TV
• Cintre : Louis Vuitton Special Edition
• Potence : Von Ribbentrop
• Jeu de direction : Sim City
• Selle : Moll
• Tige de selle : Dürr
• Pouêt-pouêt : Air Zound 5 / 190 dB

Pense à laisser un commentaire sur ton montage perso, ou sur le vélo lui-même.

Page Gamelle

• Frappadingue : Raoul Bitembois
• Date : 1er janvier 2010
• Lieu : Forêt de Saint-Cucufa
• Dégâts du bonhomme : Pizza tomate-anchois sur la fesse droite, menton en forme de guidon de bitumeux
• Retour en camion rouge : Non
• Dégâts matériels : Cadre bugné
• Témoins : Jéhovah
• Photos : (lien vers album)

Ensuite, raconte la gamelle, avec ton propre style.

Album photos perso

Le mieux est de faire un album dans la gallerie frappée.

Déposer des fichiers

Organisation des répertoires

• Les petites images servant de décoration à une page régionale sont à mettre dans /nom_de_la_région/images/
• Pour les pages de type dossiers, les images sont à placer dans /images/
• La feuille de style est dans /css/frappadingues.css et est à manipuler avec soin (toujours sauvegarder avant modification)
• (liste incomplète)

Déposer en FTP

Le FTP est le protocole de transfert de fichiers le plus traditionnel. Il est de moins utilisé - au profit de SFTP - notamment parce que toutes les données FTP y compris l'authentification passent en clair sur le réseau.

(Paragraphe à compléter)

Déposer en SFTP

(Paragraphe à compléter)

Quelques exemples

Listes à puces graphiques

• Ligne par défaut
• Ligne pour PBN
• Ligne pour l'Île-de-France
• Ligne de bouffe
• Ligne pour les azuréens
• Ligne pour s'inciter à la garder
• Ligne pour l'administration
• Ligne pour un album photos

Images

Les navigateurs savent construire et afficher une page avant même d'avoir chargé toutes les images. Mais pour celà, il faut indiquer pour chaque image ses dimensions dans le code x-html.

Couleurs du site

• Texte vert : #006633
• Texte bordeaux : #780808
• Fond jaune : #fff5e2
• Fond vert : #c7e2bc

Tableaux

Remplissage

Ne cherchez pas : le texte ci-dessous ne veut rien dire, c'est juste là pour remplir la page.

Lorem ipsum dolor sit amet, vestibulum tincidunt sed. Doloribus rhoncus, mollis senectus egestas, adipiscing dictumst ipsum. Ipsum sed aenean, fringilla in in. Arcu vitae. Id integer in, nascetur arcu. Ut dictum a.

Ante venenatis, amet adipiscing ante, amet pede. Vulputate sodales. Leo ad. Donec consectetuer nibh, cras mauris, ultricies interdum. Dui metus, nulla vel ut, posuere neque dolor. Mollis vestibulum vel, netus in, ultricies donec.

Suscipit sit morbi, tellus maecenas, erat dis mauris. Vestibulum risus. Pulvinar ac, magna odio. Eget placerat, integer aenean congue, laoreet ipsum amet. Vestibulum pellentesque vitae.

Enim hac, eu lorem. Congue lacinia et. Suspendisse ut in, neque eu. Nostra orci, dolor eget, mauris in. Quis phasellus libero, nullam auctor, erat pulvinar. Semper tortor, venenatis vulputate at.

Et mi. Id bibendum dictumst, velit eros, proin volutpat. Consectetuer maecenas, nascetur ea. Wisi eget, erat in, justo accumsan. Enim nulla, sapien imperdiet urna.

Volutpat duis, in lectus bibendum, vel eu vel. Aenean eget. Vel sem. Donec ac vitae, vitae ultricies risus, amet scelerisque risus. Vivamus luctus, ac vulputate, qui non fermentum. Id congue dui, vitae et sit, ut magna vitae.

Molestie hac. Proin sapien, vehicula in integer. Dolor posuere. At dolor in. Torquent proin, eu neque montes. Amet augue, nisl arcu.

Ac duis et. In vestibulum est, aenean non, neque odio elit. Lacus aliquam odio, ut justo amet. Metus velit. Ad dolor urna, cras sit viverra, congue sodales purus.

Arcu mi mauris, et integer, a enim. Lobortis justo, quis taciti, ullamcorper mattis. Blandit turpis natoque, iaculis proin, lacus amet mauris. Est arcu sed, urna hymenaeos nam, dui viverra. Ornare vitae hymenaeos, dis nunc. Varius etiam.

Pulvinar incidunt, imperdiet consectetuer vehicula. Nec a placerat, odio quam, donec et cum. Consectetuer dignissim tortor, nunc in, fusce leo purus. Adipiscing sed, semper etiam vitae, tincidunt sodales. Amet praesent sodales, duis adipiscing. Id dapibus in, odio nonummy hac, ut et