Gabarit de page frappée

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

Illustration alignée à droite sans décor et avec lien externe

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.

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

Page Gamelle

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

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

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

Illustration alignée à droite sans décor

Tableaux

Tableau Colonne 1 Colonne 2
Ligne 1 Cellule 1 Cellule 2
Ligne 2 Cellule 3 Cellule 4

Remplissage

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

Illustration alignée à gauche avec un décor

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