Une page a été trouvée avec le mot clé squelette.

Squelettes html et feuilles de style en CSS


Dans les sites dynamiques, sont séparés :


  • le fond : le contenu texte est stocké et classé dans des bases de données

  • la forme : on associe un squelette html à une feuille de style en css


Le squelette HTML = l'ossature d'un site web


squelettes

Lors de la conception d'un site internet, il peut être utile de concevoir une page unique, un modèle qui sera utilisé par toutes les autres pages du site internet pour :
  • faciliter les mise à jour ultérieures du site,
  • faciliter la navigation des visiteurs,
  • assurer une cohérence structurelle sur toutes les pages du site.

Cette page unique, est parfois appelée squelette du site web, ou kit graphique, ou template.

Le langage et la structure HTML


HTML : un type de document structuré

Un organisme, le W3C est chargé de proposer une structure de document respectée par tous, pour permettre un accès universel aux documents sur Internet.

Architecture de base

<html>
<head>
</head>
<body>
</body>
</html>

Faire clic droit "Code source" de la page dans le navigateur pour voir le code HTML d'une page Internet.

Les feuilles de style en CSS


pingouins

Le même squelette peut être "habillé" avec différents styles.


On utilise le langage informatique CSS (Cascading Style Sheets : feuilles de style en cascade) : HTML ne décrit que l'architecture interne, tandis que CSS décrit tous les aspects de la présentation (couleur, taille, police des textes, emplacement, taille, couleur ou image de fonds des blocs).

Cette séparation permet :
  • d'améliorer l'accessibilité,
  • de changer plus facilement de présentation,
  • de réduire la complexité de l'architecture d'un document.

La syntaxe CSS


  • Une règle se présente de la manière suivante : body { background-color: #FFD688; color: black }

  • Une règle est composée d'un sélecteur précisant son champ d'application. Par exemple : body

  • Après le sélecteur vient la déclaration : { background-color: #FFD688; color: black }

  • La déclaration est elle-même formée d'une ou plusieurs propriétés : background-color, font-style, etc.

  • Ces propriétés sont affectées d'une valeur. Par exemple : color: red indique que la propriété color prend la valeur red

  • les éléments de la déclaration sont séparés entre eux par un point-virgule.

Ressources

Codes couleurs

Techniques CSS

Images
Astuce CSS : les extensions de Firefox

Filtrer :   Partager et diffuser sa veille  A_Rafraichir  access  actualités  AdWords  agrégateur  agrégateurs  agrégation  AJAX  alertes  animation  apprentissage  arborescence  archivage  Article de fond  astuces  Audrey : responsable formationde ma structure  auto-organisation  blog  blogosphere  blogues  bookmarking  Boxnet  brainstorming  brevet  carte mentale  Cascading Style Sheets  cloud  CMS  code  codéveloppement  collaboration  communauté  communication  Communiquer et échanger  concept  conception  conceptuel  Concevoir et animer un projet  contenu  contenu-editorial  coop-tic  coopération  copyright  creative-commons  Créer un réseau (et fonctionner...)  Créer/fonctionner en réseau  CSS  curation  D-manager  DCMS  Delicious  démarrer  démocratie participative  démocratie-participative  design  développement-durable  diaporama  Didapage  DNS  données  dotclear  droit-auteur  Dropbox  e-administration  e-learning  écosystèmes  Enseigner/former  ergonomie-editoriale  éthique  Evernote  excel  Exelearning  extensions  Facebook  facettes  flux  flux RSS  FOAD  formation  formatrice  forum  Framasoft  Freemind  Freeplane  Gandi  GIMP  GoogleReader  graphisme  Gratos  gratos du mois  gratuit  groupe  habillage graphique  Hadopi  héberger  Hot Potatoes  HTML  Imagination Cubed  infobésité  information  installer  intelligence-collective  interaction  interface  Javascript  je suis intéressée aussi bien à titre personnel que pour conseiller cette formation à d'autres!  Jing  Jog the Web  Joomla  libéralisme  licence-GPL  licences-libres  Linux  logiciel  logiciel_propretaire  logiciel-libre  logiciels  loi  matrice-sagace  médias  mediawiki  méthode  microblog  mindmapping  Mindmeister  Mindomo  module  Moodle  MySQL  n  Netvibes  Ning  normes  Offerte  OMPI  Openweb  optimisation  organisation  Organiser et planifier  Organiser un évènement  Organiser un évènement à plusieurs  outil  outil éducatif  outlook  OVH  Paper li  partage  Partager et construire collectivement des ressources  Partager et construire des ressources  Partager et diffuser sa veille  partager ses médias  Pearltrees  pédagogie  PHP  PI  plagia  plateforme  powerpoint  prezi  Produire et gérer du contenu  Programmer et développer  propriété-intellectuelle  quizz  reader  Recette libre  redaction web  redactionweb  référencement  réseau  réseau-coopératif  Réseaux  Revue-reseau-tic  rewriting  RSS  sauvegarde  schéma  Scoop it  Scribus  serveurs  SGC  site  Social Bookmarking  SPIP  squelette  stockage  SugarSynch  support de cours  support decours  syndication  synthèse  tag  Tagcrowd  technologies  Télétravailler  templates  territoires de veille  texte ajouté  Thunderbird  TIC  Travailler à distance  Travailler ensemble et à distance  tutoriel  Twitter  Typo3  valoriser un territoire  veille  Veiller  vidéo  Visualiser des données  W3C  web2.0  webcopieur  webdesign  websocial  webzine  widget  wiki  wikini  Wink  word  Wordle  wordpress  Yahoo Pipes  yeswiki