PUBLIC MARKS with tags css & goetter

Un tutoriel pour apprendre à réaliser des menus "simples" (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style.

Alsacréations est spécialisé dans la conception web conforme aux standards internationaux et accessibles aux personnes handicapées.

Nous allons voir dans ce tutoriel une méthode propre pour ouvrir les liens vers des sites externes au votre dans une nouvelle fenêtre. Il faut savoir que ce genre de pratique est plutôt déroutante pour l'utilisateur non expérimenté et particulierement désagréable pour la navigation, mais on peut comprendre que le fait de quitter le site au clic sur un lien soit un peu rageant !

Les mises en pages en CSS ont de nombreux avantages par rapport aux designs par tableaux. Cependant, un bloc <div> ne se comporte pas comme une cellule de tableau et le problème le plus fréquent est que l'on voudrait que deux cellules côte à côte s'adaptent l'une à l'autre lorsqu'elles sont étirées en fonction de leur contenu.

Nous allons voir comment créer un menu déroulant comportant plusieurs menus, contenant chacun des sous-menus. Cette version de ce tutoriel a été remise à jour en août 2004 pour y apporter des simplifications et des fonctionnalités supplémentaires notamment au niveau de l'Accessibilité.

Dans ce tutoriel nous allons voir étape par étape comment faire le code xhtml et css d'un design pas forcément très évolué mais vous pourrez comprendre le processus de création d'un design en xhtml et css.

A l'heure actuelle, la grande majorité des sites web sont construits grâce à l'utilisation de tableaux. Les tableaux, permettent en effet de structurer la page en plusieurs parties, et chaque partie peut contenir un menu, un entête, un contenu,... Cependant, cette méthode quasi-universelle présente de nombreux désavantages...

L'orientation des Standards est claire : tous les attributs de taille, de position, de couleurs, d'alignement (width, height, align, font, color,...),... NE DOIVENT PAS figurer sur la page html, mais sur ce qui va gérer l'affichage, c'est à dire la feuille de style CSS. Nous allons donc créer notre site proprement, intégralement en CSS (pas de tableaux pour l'affichage). Ce site sera respectueux des Standards du W3C, mais aussi de l'Accessibilité aux non-voyants, non-entendants, personnes présentant des handicaps divers (sensoriels, moteurs...).

Il existe plusieurs méthodes d'alignement et de centrage en CSS, qui dépendent de la structure des balises (bloc, en-ligne) et le type (vertical, horizontal)

Chaque terme permet de créer des propriétés CSS personnalisées, que vous pouvez appliquer à vos balises, mais il existe des différences entre une classe (.toto) et un id (#toto)

Vous venez de créer votre premier site web que vous avez validé avec succès sur l'outil de validation du W3C. Mais oh surprise ! Votre site web ne se comporte pas de façon identique sur tous les navigateurs. Naturellement, tout le monde vous a dit qu'un site en XHTML strict et CSS était le meilleur moyen d'avoir une compatibilté maximale partout.

Si vous avez adopté la démarche de mise en conformité de votre site Web avec les Standards (X)HTML et CSS définis au sein du W3C, ou si vous vous apprêtez à le faire, vous ne pouvez manquer d'avoir à placer, en tête de chacune de vos pages, une DTD

Des dizaines de gabarits en XHTML pour construire vos sites sans tableaux

Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées "calques" en général), ce qui les rend souvent peu compatibles et peu pratiques. Voici comment positionner les éléments en CSS de façon optimale, bien que résumé schématiquement.

Les cadres (frames et iframes) sont fréquemment utilisés pour faire une mise en page avec des parties fixes et des parties dynamiques, scrollables. Cependant, cette technique, heureusement peu voire non utilisée par les sites professionnels tout-publics présente de nombreux désavantages, notamment pour le référencement, la mise en favoris, l'impression de page,...

XHTML, CSS, JavaScript,... et PHP : tout cela peut facilement embrouiller le débutant. Néanmoins la création d'un site web professionel nécessite la maîtrise de nombreux domaines, il est donc utile de revenir sur les principaux mécanismes employés lors de l'utilisation de PHP. Ceux-ci nécessitent d'être correctement compris et assimilés si l'on souhaite profiter du potentiel offert par les langages côté serveur.

Un large panel de menus de toute sorte en CSS (simples, graphiques, déroulants, horizontaux, verticaux, etc.)

Un espace de discussion entièrement dédié aux questions de conception aux normes, au CSS, au XHTML et autres standards W3C

Un point de départ qui regroupe les pistes à suivre en priorité pour débuter dans la conception aux normes

Livre sur le design web avec les CSS2 selon une approche basée sur des cas concrets