Au cours des deux dernières années, tout ce que j'ai entendu du ou des clients, c'est qu'il souhaite mettre en page la conception de son site existant à l'aide de blocs. Ceux. il a besoin d'une disposition de bloc construite sur DIV et CSS. Mais est-ce que ce code est vraiment si bon ? J'y pense depuis longtemps. J'ai dû créer différents sites, dont beaucoup étaient agencés à l'aide de tableaux, de blocs ou troisième option blocs et tableaux.

À mon avis, les avantages de la disposition en blocs par rapport à la disposition tabulaire sont évidents, ce sont :

• petit Taille HTML code, par rapport aux tableaux
• les principaux paramètres et caractéristiques des blocs sont stockés dans un fichier CSS séparé, qui est parfaitement mis en cache par les navigateurs et n'a pas besoin d'être constamment chargé.
• la possibilité de placer le contenu principal tout en haut de la page (dans le code lui-même), mais de l'afficher à tout moment, même tout en bas. en définissant simplement les paramètres appropriés pour le bloc.

Mais parallèlement à ces avantages apparemment similaires, il existe un certain nombre de problèmes et d'inconvénients associés au processus même de disposition des blocs et à son affichage dans différents navigateurs(En particulier, des problèmes surviennent avec Internet Explorer 6).

Principaux inconvénients auxquels vous devez également prêter attention :

• Il faut beaucoup plus de temps pour écrire du code qui fonctionne correctement dans tous les navigateurs et pour afficher correctement la page plus tard que lors de l'utilisation d'une mise en page tabulaire.
• Parfois, le code écrit s'avère beaucoup plus volumineux que prévu à l'origine, cela se produit à la suite de divers ajustements, ajustements, hacks ou styles écrits supplémentaires pour les navigateurs individuels.
• Souvent, vous devez recourir à JavaScript ou à des bibliothèques comme jQuery, ce qui affecte également de la meilleure façon pour le site dans son ensemble. La page peut ne pas s'afficher correctement si le navigateur de l'utilisateur ne prend pas en charge l'exécution JS ou si cette fonction est désactivée.
• Encore une fois, en ce qui concerne un navigateur aussi problématique que IE6. Dans la disposition des blocs, le paramètre de positionnement flottant (gauche ou droite) est souvent utilisé, souvent les blocs commencent à sauter et à ramper les uns sous les autres lorsque la page (fenêtre du navigateur) est redimensionnée. Il a également été remarqué que lorsque tout fonctionnait bien dans IE Tester (6), il y avait des défauts continus dans IE6 lui-même.
• Il n'est pas rare de devoir utiliser des images supplémentaires pour peindre ou ajuster l'arrière-plan. Par exemple, lorsque le bloc de navigation ne peut pas être étiré sur toute la hauteur de la page jusqu'au pied de page, une méthode est utilisée pour dessiner de fausses colonnes - Fausses colonnes
• De plus, le coût d'un tel travail est souvent supérieur au coût d'une mise en page tabulaire.

Le résultat final et le temps passé dessus ne peuvent souvent pas être justifiés. Par conséquent, je pense qu'il vaut la peine de bien réfléchir à la façon dont vous allez composer, avec quelle méthode ?

Salutations chers lecteurs, dans ce numéro, nous parlerons des types de mise en page. Vous devez tous avoir entendu parler de mise en page en bloc et tabulaire, j'aimerais aujourd'hui parler de ces deux approches différentes de la mise en page d'un site Web. Dans l'article précédent, j'ai décrit comment protéger l'électronique , un peu plus tôt nous avons considéré un exemple spécifique d'un magasin sur le composant modernmart pour CMS gratuit joomla.

Cet article sera utile aux développeurs web novices qui s'engagent sur le chemin épineux des "constructeurs de sites" et qui souhaitent faire vos propres sites web. Les développeurs Web expérimentés pourront également apprendre quelque chose par eux-mêmes, en particulier, l'article compare avantages et inconvénients de la mise en page tabulaire et en bloc.
Peut-être devons-nous commencer par la mise en page d'un site Web ? Le maquettiste reçoit une mise en page du futur site du concepteur, en règle générale, les mises en page sont fournies dans format photoshop. Une mise en page est essentiellement un dessin, seulement plus détaillé, dans lequel les éléments individuels (menus, en-têtes de site ...) sont séparés en calques, cela se produit naturellement lorsqu'un concepteur dessine une mise en page, en plus, c'est très pratique, vous pouvez facilement copier un dessin à partir d'un calque dont vous avez besoin, voir les options de police, etc. C'est donc l'essence de la mise en page dans la transformation de la mise en page en document html et compiler un ensemble de règles CSS.

Il convient de noter que la mise en page est un processus créatif, pas bien sûr comme dessiner une mise en page dans Photoshop, mais, néanmoins, il y a une part de créativité dans cela, surtout au stade initial, puis avec la croissance de l'expérience, le processus de mise en page peut être mécanisé. La qualité de la mise en page est évaluée en fonction de la différence entre la mise en page du site et la mise en page.

Types de mise en page

Comme indiqué dans le titre la mise en page peut être en bloc ou en tableau. Dans la mise en page en bloc, les éléments du site sont structurés à l'aide de blocs ( div ), dans la mise en page tabulaire, les tableaux sont utilisés ( table ).

Disposition tabulaire

Disposition tabulaire utilisé au début de la création de sites Web, il était populaire parmi les développeurs Web novices. Il convient de noter que de nombreux webmasters gèrent encore assez efficacement les tableaux de mise en page, comme on dit - le maître a peur du travail. Personnellement, je préfère la disposition en bloc à la disposition en tableau, mais nous ne parlons pas de goûts maintenant. L'idée est basée sur la présentation du site sous forme de tableau. Comme vous le savez, la grande majorité des sites ont une structure type qui peut être détaillée pour une tâche précise. Considérons, par exemple, une version typique du site

qui contient l'en-tête, la zone de contenu, la barre latérale droite et le pied de page, ce n'est pas une structure délicate de mon blog. Nous mettons en œuvre cette structure tableau

un bouchon
contenu	barre latérale
bas de page

le tableau doit être défini sur une largeur fixe spécifique si la mise en page a une largeur fixe ou 100 % si la mise en page est fluide, auquel cas le tableau s'étirera pour s'adapter à la largeur de l'écran en fonction de la résolution du moniteur.

Avantages et inconvénients de la mise en page tabulaire :

• Facile à comprendre, aucune connaissance approfondie de HTML et CSS n'est requise (+ )
• Construction intuitive, règles CSS minimales (+ )
• Il est difficile de comprendre le code HTML avec une structure de site plus complexe (- )
• Tant que la table entière n'est pas chargée, elle ne sera pas affichée à l'écran (-)
• Une conception complexe avec des éléments qui se chevauchent n'est pas réalisable (- )
• Beaucoup de code redondant (-)

Examinons de plus près le point 4. Le fait est que Tableaux HTML sont conçus de telle manière que le navigateur ne peut pas savoir à l'avance comment dessiner un tableau avec son contenu tant qu'il n'est pas chargé, tant que le dernier chiffre du tableau n'est pas chargé, le tableau ne s'affichera pas sur l'écran du navigateur, ce qui peut amener les utilisateurs à quitter le site sans attendre que la page s'affiche, car le visiteur ne voit rien à l'écran pendant un certain temps. Il semble que le site ralentisse, en fait, le navigateur attend que tous les éléments du tableau soient chargés.

mise en page de bloc

La disposition des blocs est basée sur le fait que le bloc Éléments HTML, en règle générale, sont situés verticalement, de haut en bas l'un après l'autre, dans l'ordre dans lequel ils apparaissent dans le code HTML. De plus, les blocs peuvent être réglés sur la propriété de flottabilité ( flotteur : gauche | droite | aucun | hériter). Si vous spécifiez la propriété float:left pour un bloc, alors il sera aligné à gauche et tous les autres blocs l'ignoreront, comme si ce bloc n'existait pas, à l'exception du texte, les autres blocs qui ont le même jeu de propriétés s'enrouleront autour de lui vers la droite, de combien permet la largeur de l'écran ou de l'élément dans lequel ils se trouvent. Il convient de noter que n'importe quel élément peut être rendu bloc en définissant la propriété display:block dessus, initialement seuls les éléments div sont considérés comme des éléments de bloc par défaut, pour les éléments non-blocs (span, p ) la propriété float est ignorée et de tels éléments sont disposés séquentiellement de haut en bas comme d'habitude. Pour que la propriété float ne soit pas ignorée, vous devez définir la propriété display:block des éléments.

float:right alignera le bloc à droite, et tous les autres blocs l'ignoreront, ou s'enrouleront si la même propriété leur est définie, et si deux ou plusieurs blocs avec la propriété spécifiée vont dans une rangée dans le code, alors le bloc qui vient en premier sera le premier à droite dans le code, le reste l'entourant à gauche.

La propriété float:none annule l'effet flottant pour le bloc, mais cela ne signifie pas que le bloc sera placé comme d'habitude de haut en bas, si un bloc avec un effet flottant est situé au-dessus, alors le bloc du bas ignorera le haut un et placez-vous en dessous afin que ce bloc n'ait pas besoin d'être défini sur la propriété clear:both . Wow, c'est dur non? Cela ne semble qu'à première vue, en fait, tout est logique et simple, il suffit de s'entraîner.

float:inherit - définit la propriété de flottabilité, identique à celle du bloc parent (le bloc dans lequel ce bloc enfant est imbriqué).

Nous avons besoin d'exemples précis, je ne me sens pas convaincant, il s'avère. Créons un exemple simple, pour commencer, la base, une boîte rouge d'une largeur de 400 pixels. 350 pixels de haut. et alignez-le au milieu de l'écran.

maintenant vous devez ajouter quelques blocs supplémentaires à ce bloc, vert et gris avec une hauteur et une largeur de 100 pixels, le bloc gris a une hauteur de 120 pixels.

On peut voir que les blocs sont disposés dans le flux général de bas en haut, dans l'ordre dans lequel ils apparaissent dans le code, d'abord vert puis gris à la fin bleu. Donnons au bloc vert une propriété float:left afin que les blocs gris et bleu l'ignorent.

comme vous pouvez le voir, le bloc gris a ignoré le bloc vert et s'est tenu en dessous, le bloc vert, pour ainsi dire, tout seul, le bloc bleu aligné derrière le gris. Faisons le tour de tous les blocs.

On peut voir que les blocs s'alignent les uns après les autres dans l'ordre dans lequel ils apparaissent dans le code. Essayons de placer deux blocs l'un à côté de l'autre, et le troisième comme d'habitude ci-dessous. Pour ce faire, vous devez supprimer la propriété float:left du troisième bloc, mais cela ne suffit pas, car elle va ramper sous les deux premiers blocs, comme nous l'avons vu précédemment. Pour éviter que cela ne se produise, vous devez définir la propriété clear:both sur le troisième bloc ;

C'est ainsi que la structure s'est avérée, lors du réglage de la largeur des blocs, le fait que le cadre est de 1 pixel a été pris en compte. augmente la taille du bloc, de sorte que la taille de l'en-tête est définie sur 398 pixels. pas 400 pixels.

Avantages et inconvénients de la disposition en blocs :

• Moins de poids de la page grâce à moins de code (+ )
• Mise en œuvre d'une conception complexe avec des blocs qui se chevauchent (+ )
• Difficile à maîtriser, la mise en page tabulaire est plus facile (- )
• Le plus souvent, il est nécessaire de résoudre les problèmes de compatibilité entre navigateurs. les blocs peuvent se chevaucher lors de la modification de la résolution de l'écran, de la mise à l'échelle (-)

Personnellement, j'ai commencé avec la mise en page tabulaire, maintenant j'utilise la mise en page par blocs, je l'ai maîtrisée il y a longtemps, c'était facile, bien qu'elle présente un certain nombre d'inconvénients, c'est plus familier et plus facile pour moi d'utiliser la mise en page par blocs.

C'est tout chers lecteurs, revenez souvent.

Parmi les concepteurs de mise en page, il y a assez souvent des différends sur le choix méthode de mise en page. Certains préfèrent mise en page de bloc, les autres webmasters ont tendance à méthode tabulaire. Cette question est assez controversée et les deux maîtres ont raison à leur manière. Il y a des situations dans lesquelles il vaut la peine d'utiliser mise en page de bloc, il y a aussi des moments où la meilleure option utilisera mise en page tabulaire. Mais dans tous les cas, lors du choix d'une méthode, il est nécessaire de s'appuyer sur certaines caractéristiques inhérentes à la fois au tabulaire et au mise en page de bloc. Caractéristique principale de ces méthodes, il y a des avantages et des inconvénients, qui seront discutés ci-dessous.

Avantages des tableaux de disposition :

• Les tableaux de mise en page sont beaucoup plus simples que les blocs ;
• À basse résolution, les tableaux ne se chevauchent pas
• Création facile d'un site multi-navigateurs.

Inconvénients de la mise en page tabulaire :

• Un grand nombre de code;
• Tous les modèles ne peuvent pas être des tableaux composés.

Avantages de la disposition en blocs :

• Une petite quantité de code, ce qui réduit considérablement le poids du site ;
• Vitesse de chargement plus élevée par rapport aux tableaux ;
• Vous pouvez créer des conceptions de n'importe quelle complexité.

Inconvénients de la disposition en blocs :

• Au fur et à mesure que la résolution diminue, les blocs tombent ou se heurtent;
• Problème de compatibilité entre navigateurs ;
• La composition est plus difficile que les tableaux.

Voici les principaux avantages et inconvénients de ces méthodes mise en page, mais en pratique, dans la plupart des cas, il est nécessaire d'utiliser les deux méthodes. Usage mise en page de bloc, bien meilleur que le tabulaire, mais à condition qu'il soit possible d'atteindre affichage correct pages dans tous les navigateurs et à toutes les résolutions de moniteur. Dans le cas où le maquettiste n'a pas beaucoup d'expérience, il vaut la peine d'utiliser des tableaux de mise en page, avec une augmentation des compétences, il sera possible de passer à mise en page de bloc.

Nous allons maintenant parler de quelle est la différence entre les sites de mise en page tabulaire et bloc. Une fois le site pensé par le concepteur, il faut l'aménager et l'adapter à des besoins spécifiques. Sous la mise en page, comprenez l'utilisation de html + css ou html. La plus courante est la première option. Il existe d'autres options de mise en page plus complexes, mais tous les navigateurs ne les prennent pas en charge. La mise en page HTML est tabulaire (table) et bloc (div). Et chaque option a ses propres avantages et inconvénients.

Disposition tabulaire

La disposition tabulaire est créée à l'aide de tables imbriquées. Presque tous les navigateurs lisent correctement ce type de mise en page, car il a été créé bien avant le bloc. Si vous avez besoin d'une conception à plusieurs colonnes, la disposition tabulaire est idéale pour cela. Il est nécessaire de parler des lacunes de la mise en page à l'aide de tableaux. Avec une quantité considérable de tables imbriquées, un code trop lourd est formé, difficile à éditer. Les sites créés à l'aide d'une mise en page tabulaire ne sont pas assez bien indexés moteurs de recherche. Par conséquent, les sites dont le contenu est bon n'occupent pas toujours la première place dans les résultats de recherche.

Disposition des blocs

Les sites réalisés avec une disposition en bloc se distinguent par l'utilisation d'un code plus compact, et donc moins lourd. La disposition des blocs est très pratique à utiliser, les calques ou les blocs peuvent se chevaucher. Les optimiseurs tirent parti du fait que le bas du code HTML peut être positionné en haut. Le côté négatif de la disposition des blocs est une certaine complexité de son utilisation. Il faut comprendre le CSS 1 et la version 2, et un troisième est en préparation, qui aura encore plus de fonctionnalités. Il y a une certaine difficulté à créer des sites avec une mise en page "fluide", mais sur le Web mondial, vous pouvez trouver suffisamment d'instructions sur la façon de le faire facilement en blocs. Étant donné que vous devez connaître de nombreuses subtilités dans la mise en page des blocs, il est utilisé par des concepteurs de mise en page et des concepteurs de sites Web plus expérimentés et compétents. Par conséquent, les services dans les studios Web qui créent des sites avec des blocs de mise en page sont plus chers, d'autant plus qu'il y a encore des gens qui utilisent d'anciennes versions.