Préface
La première fois que j'ai surfé sur Internet, j'ai utilisé un terminal stupide. D'ici peu, un moniteur monochrome du Minnesota pourrait diffuser le film "Monty Python et le Saint Graal" via un serveur. Il n'y avait pas de souris, pas de bonne interface utilisateur, encore moins de couleur 24 bits. Gopher est le seul outil disponible. La recherche ne peut utiliser qu'Archie et Veronica. Personne n’avait entendu parler du W3 (World Wide Web), et le Web semblait adéquat à l’époque.
Note du traducteur :
1. Terminal stupide. Un peu comme un PC, mais sans son propre processeur, sa mémoire et son disque dur. Les transactions sont traitées via un hôte commun.
2. Gopher. Une application client/serveur qui affiche toutes les informations à l'utilisateur final sous forme de menu en effectuant un transfert FTP, une connexion à distance, une recherche Archie, etc., permettant à l'utilisateur de parcourir un grand nombre d'informations. De cette manière, les utilisateurs n'ont pas besoin de connaître (ou de saisir) leur adresse lorsqu'ils accèdent aux ressources Internet.
3.Archie est le premier programme à indexer automatiquement les fichiers de sites Web FTP anonymes sur Internet, mais ce n'est pas encore un véritable moteur de recherche.
4.Veronica est une ressource de type Gopher que vous pouvez utiliser pour récupérer tous les éléments de menu contenant des mots spéciaux spécifiés dans l'espace Gopher.
Au bout d'un moment, un code étrange a commencé à inonder mes résultats de recherche. Je pouvais toujours lire ce dont j'avais besoin, mais c'était ennuyeux. Un collègue m'a dit qu'il s'agissait de HTML, un langage graphique pour Internet. J'avais appris quelques méthodes pour essayer de filtrer le HTML. Plus tard, des moniteurs 256 couleurs et la première version du navigateur Mosaic sont apparus, et tout a commencé à changer.
Cela fait longtemps depuis, la technologie s'est incroyablement améliorée et les interfaces Web ont été remaniées, repensées et réinventées d'innombrables fois. Depuis que j'ai commencé à travailler en tant que concepteur Web, j'ai vécu personnellement les différentes phases de la conception basée sur des tableaux, les malheurs de JavaScript, les difficultés du CSS et, plus important encore, les normes Web plus universellement acceptées.
Au début, Internet n’a été créé que selon les idées des Geeks (fanatiques de technologie). Il n’y avait que du contenu pur sur Internet. Ils ne prenaient pas en compte les couleurs d’arrière-plan et les belles images. Mais la vérité est que les gens aiment voir des expressions plus riches lorsqu’ils surfent. L’émergence de la méthode de conception de tableaux résout cette difficulté. Nous pouvons contrôler la disposition grâce aux tableaux ! Nous avons tous commencé à « tromper » le système. Ne pouvons-nous pas créer une fine ligne de 1 pixel ? Insérez simplement un point GIF transparent dans la ligne du tableau et définissez une couleur d'arrière-plan et le tour est joué ! Vous ne parvenez pas à contrôler les polices ? Utilisez ensuite une autre balise <font> !
Avant d'être initié aux standards CSS et Web, je concevais avec des tableaux depuis de nombreuses années. La méthode de conception des standards Web est complètement différente d’avant, elle est efficace et charmante. Je suis tombé profondément et passionnément amoureux des nouvelles méthodes de conception. Il peut utiliser un code significatif pour séparer le contenu de la mise en page, tout en conservant un espace blanc et un beau design. J'aime immédiatement le nouveau et je déteste l'ancien et je n'utilise plus les anciennes méthodes de conception.
Jusqu'à aujourd'hui.
Il y a eu beaucoup de discussions sur les standards du Web et CSS, comme tout bon mot-clé, il deviendra le prochain « grand nom » dans l'histoire du développement de la technologie Web. Cela a commencé avec Dougl en tant que Bowman lors de la refonte de Wired.com et a continué d'évoluer. En 2003, le livre « Designing with Web Standards » écrit par Zeldman a été publié, nous permettant à tous de voir la lumière. Les designers du monde entier ont adopté et applaudi cette nouvelle méthode de conception. C’est structuré, c’est sémantique, c’est rapide et léger.
Cependant, certaines personnes utilisent encore la méthode traditionnelle de conception de tableaux, et utilisent même la balise <font>. Ils disent que la méthode traditionnelle est plus simple, plus pratique pour la maintenance et le développement rapide. Qui a raison ?
J'ai décidé de faire une expérience moi-même pour voir comment les choses changeaient et quelle méthode nous avions choisie était la meilleure.
défi
J'ai conçu un site Web hypothétique à l'aide d'un logiciel graphique. Ensuite, utilisez d'abord HTML4.01 pour le créer, en utilisant des tableaux sans aucun CSS ; à titre de comparaison, puis utilisez XHTML1.0 Transitional pour le créer, le code est conforme aux spécifications d'utilisabilité et d'accessibilité, et utilise CSS pour éviter autant que possible les tableaux. (sauf si le tableau est utilisé pour représenter des données tabulaires.)
Le processus de production est divisé en trois étapes, et le processus est enregistré en détail, et les avantages et les inconvénients sont comparés pour voir ce que nous avons obtenu ? Qu'est-ce qui a été perdu ? De quel côté devrions-nous être.
Première phase : concevoir le site
J'ai commencé à concevoir un site fictif. Je suppose que je crée un site Web pour une organisation appelée "Butterfly Watchers Association". Haha, c'est probablement mon meilleur client qui ne sera pas impliqué dans le processus de conception. J'ai essayé de le rendre aussi réaliste que possible, en imaginant les utilisateurs cibles du site Web, en utilisant une mise en page traditionnelle et des polices faisant autorité.
Je veux que le site soit compact, efficace et concis. De plus, j'ai pensé qu'il devrait y avoir des papillons sur la page, alors j'ai cherché partout une image de papillon appropriée et j'en ai rapidement trouvé une sur stock.xchng. Le papillon bleu posé parmi les feuilles vertes colle parfaitement à l’image du site. Après quelques traitements et modifications, cette image devient l'en-tête de notre page.
Pendant le processus de conception, j'ai adhéré à certains principes d'utilisabilité. Par exemple, essayez de conserver la taille du fichier image aussi petite que possible. Au début, j'avais prévu d'utiliser la police Garamond pour la navigation. Plus tard, considérant que la machine de l'utilisateur ne disposait peut-être pas de cette police, j'ai décidé d'utiliser la police Georgia (cette police est similaire à Times New Roman, et dans le pire des cas, elle peut être remplacée par la police Times New Roman). Mais pour l’image d’en-tête, j’ai quand même utilisé Georgia car c’est une image.
Le texte a un fond gris et utilise la police Trebuchet MS ; les nouvelles utilisent la police Verdana, qui semble également belle lorsqu'elle est réduite. Il existe une règle générale non écrite selon laquelle utiliser 4 polices dans un design, et je ne suis pas vraiment d’accord avec cela.
La deuxième étape : "Utilisez la méthode précédente et utilisez des images GIF transparentes pour contrôler l'espacement."
Si vous êtes déjà un web designer ayant participé à plusieurs projets, la structure suivante vous est très familière :
<table bgcolor="#ffffff" cellpacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454" ><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src=" blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">Le contenu va ici.</td> <td bgcolor=" #545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="# 545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
Nous sommes habitués à utiliser des tables pour parler car ce sont nos « éléments de base » les plus fondamentaux. Par exemple : utilisez des images GIF transparentes pour contrôler l’espacement et utilisez divers attributs des tableaux pour contrôler la position. Quelqu'un l'a expliqué de cette façon : les tableaux sont fiables et les pages présentées avec des tableaux peuvent être compatibles avec les versions ultérieures ! Aucun CSS n'ose rivaliser avec les tableaux, les tableaux peuvent s'adapter à tous les navigateurs et ainsi de suite.
Commençons par reproduire étape par étape l’ensemble du processus de conception.
heure 1
Oh. Il semble que nous puissions remonter le temps. Comment pouvons-nous définir la couleur d'arrière-plan sans utiliser CSS ? Oh, oui... c'est bgcolor, merci pour le conseil. Bon, commençons à créer le formulaire et prévisualisons l'effet. J'ai défini "align=center" pour qu'il soit centré dans tous les navigateurs, super, comme c'est simple ! La forme n'a pas l'air mauvaise et j'ai l'impression de retrouver un vieil ami. J'ai utilisé de manière experte des images GIF transparentes pour contrôler l'espacement, et le travail s'est déroulé rapidement ! gentillesse? Pourquoi y a-t-il un espace vide entre l'en-tête et le menu ? Oh, il s'avère qu'il y a un espace supplémentaire après le code des images, et le navigateur IE l'affichera. C'est facile à modifier, il suffit de supprimer les espaces.
Heure 2
J'utilise javaScript pour créer un effet flip pour le menu de navigation :
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
JavaScript s'écrit ainsi :
fonction chBg(obj) { obj.bgColor = "#E1E5DB" ; } fonction chBg2(obj) { obj.bgColor = "#CBD1C3" ;
Hormis le fait que j'ai un peu oublié les anciennes méthodes de conception, l'ensemble des progrès a été assez rapide. Même si j'ai essayé de réduire au maximum l'imbrication des tables, le code semblait encore un peu compliqué, j'ai donc ajouté quelques commentaires pour faciliter la recherche des endroits que nous devons modifier.
J'ai rencontré un petit problème : je ne peux pas supprimer le soulignement du lien sans utiliser le CSS. Il existe peut-être une solution, cherchons-la sur Google.
Heure 3
Après une recherche sur Google, je ne trouve toujours pas de moyen. Comment créer un lien sans souligner ? Il doit y avoir une solution !
4ème heure
Jetons un coup d'œil aux résultats des 4 premières heures sur les navigateurs autres que IE6. Oh! Très moche dans Firefox, semble bien dans Opera et Netscape.
Heure 5
Allez-y et codez..., déboguez et modifiez.
Au travail, j'ai réalisé les limites de la balise <font> pour contrôler la taille de la police : je ne pouvais pas définir plusieurs tailles. Bon sang!
J'ai également rencontré des problèmes avec la disposition du texte dans la section Actualités. Afin d'indenter, j'ai dû utiliser davantage d'imbrication de tableaux pour obtenir cet effet. Afin de disposer les images de papillons dans le texte à droite du texte, j'ai également dû ajouter un tableau pour résoudre le problème. Ce genre de composition de « triche » me fait me sentir impuissant.
Heure 6
Le design est terminé et il ressemble à peu près au design original, vous pouvez cliquer ici pour y jeter un œil.
Cliquez ici pour voir combien de tables sont incluses.
Phase 3 : Nous n’avons pas besoin de formulaires !
Ci-dessous, nous examinerons ce qu'est une conception basée sur les normes du Web et présentée avec CSS. Je vais commencer par l'identification du contenu. Je vais essayer de rendre le logo sémantique et d'éviter les balises redondantes.
L'en-tête est une image, mais c'est aussi un titre, j'écris donc le code comme ceci :
<h1>Association des observateurs de papillons. Ils papillonnent.</h1>
Je réfléchirai plus tard à la manière d'afficher correctement ce titre (idéalement, on se soucie le plus possible du contenu et le moins possible de la mise en page). Les autres rubriques (actualités, observations et adhésion) seront identifiées par <h2>.
Un menu est essentiellement une liste non ordonnée (liste), il sera donc identifié comme une liste. Les paragraphes n'ont pas besoin d'être classés (nous utilisons des sélecteurs d'héritage pour les "accrocher" dans le calque conteneur). Je vais le comparer au texte du contenu original pour voir combien de balises supplémentaires je dois ajouter pour obtenir la mise en page (j'essaierai d'éviter autant que possible d'ajouter des balises).
Ceci est le texte du contenu original. Jetez un œil au code original, il est conforme à la spécification de transition xhtml1.0. Notez que tous les éléments sont déjà contenus dans des <div> avec des noms définis. La date dans l'actualité a également été ajoutée avec la classe de date. Vous pouvez voir que le code est très simple.
heure 1
Définissez la bordure du calque "conteneur" sur 1px. Centrez le contenu en définissant « text-align: center » dans le style du corps. Afin d'être centré dans tous les navigateurs, margin: 0 auto; (signifiant top=0, right=auto, bottom=0, left=auto) est également défini dans "conteneur". Le centrage peut être effectué aussi facilement qu'avec des tables.
Définissez les valeurs de remplissage "haut" et "bas" de "corps" à 20 px (ne pas définir directement le remplissage dans "conteneur" convient à tous les navigateurs).
La liste non ordonnée (li) doit être définie comme "display:inline" pour que le menu soit affiché sur une seule ligne. J'ai ajouté des icônes de navigation entre les menus. Ces icônes de navigation sont définies à l'aide de la méthode d'arrière-plan non répétitive, qui peut définir avec précision la position (x, y), similaire à celle-ci :
background: url(menuBullet2.gif) no-repeat 4px 9px ; L'effet de changement de couleur du clic du menu adopte le style de survol du lien, ne nécessitant plus de JavaScript.
J'ai défini l'image du papillon en tête de page comme arrière-plan de <h1>, afin de ne pas avoir à me soucier de la facilité d'utilisation et que le titre puisse être lu normalement sur les appareils qui ne peuvent pas afficher d'images (comme les écrans lecteurs et robots de recherche).
Heure 2
Le premier élément du menu (HOME) utilise une icône différente et j'ai dû masquer l'arrière-plan d'origine et ajouter un identifiant supplémentaire (frst) au menu HOME :
#hMenu ul li #frst
Une autre icône (CONTACT):
background: transparent url(menuBullet3.gif) no-repeat 615px 9px ; je ne peux pas utiliser CSS pour contrôler que les deux colonnes aient la même hauteur. Heureusement, je peux utiliser une image d'arrière-plan pour contourner ce problème. J'ai défini un "conteneur" qui répète l'arrière-plan verticalement.
arrière-plan : #fff url(bgMain.gif) répéter-y ;
Heure 3
Les boîtes de définition CSS sont bien plus pratiques que les tableaux, notamment les nombreuses propriétés des bordures qui sont très utiles.
Maintenant, je commence à définir l'en-tête <h2>. La définition de l'icône est la même que ci-dessus.
Je fais flotter le calque « actualités » à droite des « observations » et « adhésion ». Définissez le calque "copyright" avec "clear: Both;" afin qu'il suive le calque flottant. Faites flotter l'image du papillon dans le texte à droite et le texte peut automatiquement s'enrouler autour de l'image. Définir la bordure de 1 px de l'image et définir la distance de remplissage peut obtenir l'effet d'imbrication des deux tableaux d'origine.
Certains problèmes ont été découverts : la couche de droits d'auteur et la couche de contenu se chevauchent partiellement.
4ème heure
L'erreur affichée est liée à la définition float:right; des « observations » et de « l'adhésion ». Les faire flotter vers la gauche résout ce problème, ce qui semble étrange. J'ai utilisé Firefox pour le premier test. Bon, ça n'a pas l'air mal, sauf que les icônes de menu ont été décalées de quelques pixels.
Certaines techniques CSS peuvent corriger l'effet d'affichage dans les navigateurs non IE, par exemple en attribuant différentes valeurs de propriété à différents navigateurs.
J'ai utilisé la valeur !important dans la définition du même élément. La même définition écrite devant peut être exécutée en premier. Cette valeur n'est pas prise en charge par le navigateur IE.
arrière-plan : url(menuBullet2.gif) sans répétition 4px 6px !important ;
arrière-plan : url(menuBullet2.gif) sans répétition 4px 9px ;
En CSS, s'il existe plusieurs définitions pour le même élément, la dernière est valide. Mais comme IE ne prend pas en charge !important, IE utilisera la deuxième valeur définie et les autres navigateurs utiliseront la première valeur définie.
Tout est fait, voyez les résultats ici.
en conclusion
conception basée sur des tables
J'ai testé la page en utilisant tous les navigateurs que j'ai pu trouver, y compris ceux pour les plateformes Linux, Windows et Macintosh. Les pages de présentation de tableau se ressemblent dans différents navigateurs. "C'est solide comme un roc", tel est le premier commentaire fait sur la disposition des tables.
Cependant, lorsqu'il est nécessaire de modifier une partie du contenu de la page, changer la disposition du tableau est assez laborieux. C'est un problème. Si nous utilisons un CMS (système de gestion de contenu), il sera difficile de formater le contenu.
Tout le temps de conception est un peu long car j'ai oublié l'ancienne méthode. Si je recommençais, je pense que cela pourrait gagner 1 à 2 heures.
Je décris la conception basée sur des tables comme un gros travail, même si je suis souvent surpris par les techniques de conception avancées. Avec des conceptions basées sur du CSS pur, j'ai généralement l'habitude de décomposer la conception et d'analyser les bugs étape par étape. Cependant, l'utilisation de la conception de tableaux ne nécessite pas ce travail. Il vous suffit de continuer à intégrer des tableaux dans la conception. Examinons à nouveau le processus CSS.
Conception basée sur CSS
Concevoir avec CSS est bien mieux. Les changements de code sont directs et transparents, et je peux clairement contrôler l'ensemble du processus. En revanche, la conception de la table ressemble à la pose de briques. Plus le changement dans la page est important, plus la conception CSS devient pratique et efficace.
La conception CSS est également très utile pour économiser la bande passante. L'extraction de tous les styles dans des fichiers séparés et l'utilisation d'un ou plusieurs fichiers de feuille de style pour l'ensemble du site peuvent réduire la taille du site.
Séparer les informations de mise en page du contenu présente également de nombreux avantages. À l’avenir, je pourrai réorganiser l’ensemble du site à tout moment sans rien changer, tout comme CSS Zen Garden. Cela augmente également la facilité d'utilisation, permettant aux robots de recherche de découvrir plus facilement votre page (rappelez-vous : Google est votre source de visiteurs la plus importante).
Bien que votre efficacité au travail soit très élevée lorsque vous êtes familier avec la conception basée sur CSS, vous devez passer beaucoup de temps à apprendre les règles, les différences dans les modèles de boîtes, les techniques de traitement du navigateur et beaucoup de théorie, et cela nécessite une pratique continue pour maîtriser. . En bref, CSS est plus simple que les tableaux, mais si vous souhaitez concevoir en utilisant du CSS pur, soyez prêt à investir beaucoup de temps pour l'apprendre. Même si vous êtes un développeur expérimenté, vous devez être prêt à faire face à divers bugs. Parfois, la résolution d'un bug peut prendre plusieurs heures.
gagnant
La conception basée sur les normes CSS et Web gagne. Il suffit de regarder le code des deux méthodes pour faire un choix. CSS offre bien d’autres avantages (principalement en termes de facilité d’utilisation). En fait, la raison fondamentale est ma paresse. Si j'utilise un modèle de table et que le client me contacte un an plus tard et me dit qu'il doit être révisé, je peux lui dire que j'ai rejoint l'armée et que je me trouve dans un pays étranger. Si j'utilisais CSS, je le changerais pour le client sans hésiter car je n'aurais pas à réinventer la roue.