Nos collègues sur .net magazine, le magazine le plus vendu au monde pour les concepteurs et les développeurs Web, n'aime rien de plus que de se mettre à la tâche avec un morceau de code source.

Leur site Web contient une mine d’informations pour les constructeurs de sites traitant de sujets tels que CSS, JavaScript, PHP, etc..

Voici cinq de leurs tutoriels CSS que vous pouvez utiliser pour améliorer rapidement et facilement votre site Web. Aucun de ces projets ne prend plus de 20 minutes environ..

Cliquez sur les liens ci-dessous pour accéder aux tutoriels complets et aux fichiers de support..

1. Code flexibles mises en page
De nos jours, une résolution d'écran de 1 024 x 768 peut être considérée comme «standard», offrant ainsi plus d'espace, en particulier en largeur, pour la conception de sites. C’est aussi une période où nous sommes continuellement martelés d’informations et où les clients vous demandent régulièrement de montrer simultanément environ 40 milliards de choses différentes sur les sites Web que vous créez pour eux. Des mises en page flexibles basées sur CSS, basées sur une grille et une structure de gouttières sous-jacentes, pour les sites riches en informations qui regorgent de contenu. Une mise en page flexible pourrait être votre réponse..
Lire les dispositions flexibles du code

2. Transformez votre type en utilisant une grille de base
Une grille de ligne de base est quelque chose qui oblige le texte à respecter l'espacement d'un pavé réglé. Le rythme vertical est maintenu en bas de la page, ce qui est particulièrement pratique pour les livres car les mots d'une page ne sont pas visibles dans les espaces entre les lignes au verso. Cependant, il en résulte également un grand espacement facile à regarder. La question de l’impression en ligne n’est pas très pertinente en ligne, mais le rythme l’est: le texte peut être difficile à lire à l’écran. Toute méthode pouvant faciliter ce processus mérite donc d’être étudiée..
Lire Transformez votre type en utilisant une grille de base

3. Construire une barre de navigation graphique évolutive
Dans ce didacticiel, l'auteur explore une barre de navigation graphique qui ressemble à celle de Apple.com, mais qui n'est pas construite à l'aide d'images fixes. Au lieu de cela, il utilise une liste HTML (avec du texte HTML pour le contenu de l'élément de liste, ce qui signifie que le texte peut être zoomé), plus CSS pour les styles, y compris les images d'arrière-plan.
Lire Créer une barre de navigation graphique évolutive

4. Créer des cartes de site à l'aide de listes
Les cartes de site typiques sont des listes de sections, souvent des sous-sections de logements, qui peuvent à leur tour contenir leurs propres sous-sections. Bien qu'un dessin vectoriel soit un excellent moyen d'illustrer une telle chose, il en va de même d'une liste de points à puces de base, avec des éléments en retrait représentant le contenu des sous-sections. Le seul problème avec une liste à puces est que la relation entre les pages et leurs frères et sœurs n’est pas très claire, mais - comme le sait tout le CSS, les listes HTML sont assez polyvalentes et peuvent être stylées de différentes manières. un peu de panache visuel et de convivialité pour ce qui était à l’origine juste un tas de taches noires et de mots noirs.
Lire Créer des cartes de site à l'aide de listes

5. Changer de style de site facilement
Imaginez tout le monde sur la planète sachant redimensionner le texte à l'aide de son navigateur. Félicité! Mais malheureusement, ce n’est pas le cas: une campagne de publicité internationale serait même nécessaire pour faire une brèche. Non seulement les gens ne savent pas comment redimensionner un texte, mais la majorité d'entre eux ne savent pas que c'est même possible, alors ils ne recherchent pas d'informations utiles. Alors, pourquoi ne pas inclure un sélecteur de style sur votre site? Voici comment.
Lisez facilement les styles de site

-------------------------------------------------------------------------------------------------------

Lisez maintenant 10 didacticiels Photoshop très utiles et 10 didacticiels Flash extrêmement utiles.

Inscrivez-vous à la newsletter hebdomadaire gratuite de TechRadar
Recevez les nouvelles techniques directement dans votre boîte de réception. Inscrivez-vous gratuitement à la lettre d'information TechRadar et restez au courant des plus grandes histoires et publications de produits de la semaine. Inscrivez-vous à http://www.techradar.com/register

Suivez TechRadar sur Twitter