2.7 KiB
| title | localeTitle |
|---|---|
| Layouts | Layouts |
Layouts
Os layouts organizam diferentes áreas da página da web.
Quase todas as páginas da web que vemos podem ser divididas em caixas, que podem ser organizadas em ordem específica para criar essa página da web. A imagem abaixo é um desses exemplos.
Os sites geralmente exibem conteúdo em várias colunas (como uma revista ou jornal).
E as técnicas de layout HTML nos ajudam a colocar as informações necessárias no pedido ou no design necessários.
Técnicas para implementar layouts
Tabelas HTML
Uma das ferramentas mais básicas para implementar layouts em uma página da Web, elas são fornecidas por HTML. Mas à medida que o layout se torna complicado, as tabelas HTML rapidamente perdem a facilidade, devido ao aumento do texto de marcação.
Float CSS
Se você for projetar uma página baseada em 2 colunas com o painel de navegação esquerdo e a área de visualização do conteúdo central, é fácil fazê-lo com floats de CSS. Basta definir a página de navegação esquerda em uma propriedade <div> com estilo float: left; . E voila você tem esse design. Mas e se você tivesse 4 colunas em uma única seção. Claro, pode-se fazer com floats, mas a sintaxe do HTML que você estaria escrevendo seria fácil de entender.
Frameworks CSS
É aí que entram as estruturas CSS, como Bootstrap e Materialize . Essas estruturas fornecem uma funcionalidade de grade que permite dividir cada seção da sua página da Web em 12 colunas, que você pode criar.
Grade de inicialização de amostra
Elementos semânticos de HTML
Os sites geralmente exibem conteúdo em várias colunas (como uma revista ou jornal).
O HTML5 oferece novos elementos semânticos que definem as diferentes partes de uma página da web:
<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element
Mais Informações:
- Escolas W3 - Layout
- CodeMentorTeam - Técnicas de Layout para criar um site