Date de publication: le lundi 6 août 2007 à 18h33
Dernière modification: par Pascal BOYER le lundi 4 octobre 2010 à 18h11
« Article précédent: Clean HTML source code -- Nettoyer le code source HTML
» Article suivant: Page title -- Titre de la page
The structure of a web page consists of:
La structure d'une page est constituée:
-
the content of the document (data and metadata)
du contenu du document (données et méta-données)
-
navigation elements (links between pages)
des éléments de navigation (liens entre les pages)
-
additional information (banners, footer, information blocks not directly connected with the core content)
d'informations complémentaires (bannières, blocs d'information sans lien direct avec le coeur du contenu)
Different information blocks can be positioned in different locations on the page (in this case (1) header, (2) horizontal menu, (3) vertical menu, (4) main content, (5) additional information, (6) footer).
Les différents blocs d'information peuvent être placés en différents endroits de la page (dans le cas ci-dessus: (1) l'en-tête, (2) le menu horizontal, (3) le menu vertical, (4) le contenu principal, (5) les informations complémentaires, (6) le pied de page).
In the past, a page layout such as the one shown above would have been implemented via an HTML table structure. All the components of the page ? the content (in HTML format) and design (HTML code for tables and CSS styles) - were included in one document. This made it difficult for webmasters to change the page design, because items such as the information boxes are associated with a specific cell in the table. This design also made it difficult for search engines to understand the content and analyze it correctly.
Par le passé, l'organisation d'une page comme celle que montre la figure ci-dessus aurait été implémentée dans une structure HTML basée sur les tableaux. Tous les composants de la page - le contenu (au format HTML) et le design (code HTML pour les tableaux et CSS pour le styles) - étaient inclus dans un seul document. Mais les responsables de sites éprouvaient des difficultés à modifier le design de la page car des éléments, comme les boîtes d'informations, étaient associés à une cellule particulière du tableau. De plus, ce design rendait difficile aux moteurs de recherche la compréhension et l'analyse correctes du contenu.
Additionally, table-based design made it impossible to display websites correctly on non-standard browsers such as:
Par ailleurs, un design basé sur les tableaux rend impossible l'affichage correct des sites web par des navigateurs non standards tels que:
-
text-only browsers
les navigateurs en mode texte
-
voice-driven accessibility interfaces
les interfaces permettant un accès aux pages web guidé par la voix
-
mobile and hand-held browsers with small screens
les navigateurs des appareils mobiles de petite taille et ayant de petits écrans
One of the advantages of the eZ Publish template system is that the layout is determined via <div> blocks (table-less layout) rather than tables. Web developers construct pages from information blocks (header, menu, main content, additional or related information, footer, etc.) and then specify the layout using external style sheets (CSS files).
Un des avantages du système de templates de eZ Publish est que la mise en page est déterminée par des blocs <div> (
Mise en page sans tableau
) plutôt que par des tableaux. Ainsi, les développeurs web construisent les pages à partir de blocs d'information (en-tête, menu, contenu principal, information complémentaire ou liée au contenu, pied de page, etc...) et définissent ensuite la mise en page en créant des feuilles de style (les fichiers CSS).
The page layout with the vertical menu positioned as the left column block.
Mise en page avec le menu vertical placé dans le bloc de la colonne gauche.
The page layout with the horizontal menu positioned as part of header block.
Mise en page avec le menu horizontal faisant partie du bloc d'en-tête.
Valid XHTML source code allows people and search engines to precisely understand the content of the document. XHTML and CSS code connected via the page layout template (the main eZ Publish template - pagelayout.tpl) reduces page size (because formatting like fonts, sizes and colors are stored in re-usable CSS files).
Écrire du code source XHTML valide permet aux gens et aux moteurs de recherche de comprendre précisément le contenu des documents. Le code XHTML et CSS lié au template de mise en page (le template principal de eZ Publish:
pagelayout.tpl
) diminue la taille des pages (car les formats de polices, de tailles et de couleurs sont stockés dans des fichiers CSS réutilisables).
Commentaires