Introdução ao layout de página da web DIV + CSS

Você está aprendendo layout CSS? Você ainda não consegue dominar totalmente o layout CSS puro? Geralmente existem duas situações que atrapalham seu aprendizado:

A primeira possibilidade é que você não tenha entendido o princípio do processamento de páginas CSS. Antes de considerar o desempenho geral da sua página, você deve primeiro considerar a semântica e a estrutura do conteúdo e, em seguida, adicionar CSS para a semântica e a estrutura. Este artigo explicará como estruturar HTML.

Outra razão é que você não conhece as propriedades familiares da camada de apresentação (como cellpadding, hspace, align=left, etc.) e não sabe em quais instruções CSS convertê-las. Depois de resolver o primeiro problema e saber como estruturar seu HTML, darei uma lista detalhando qual CSS usar para substituir os atributos de apresentação originais.

HTML estruturado

Quando aprendemos a produção de páginas web, sempre consideramos primeiro como projetá-las, considerando as imagens, fontes, cores e planos de layout. Em seguida, usamos o Photoshop ou o Fireworks para desenhá-lo e cortá-lo em pequenas imagens. Por fim, edite o HTML para restaurar todos os designs da página.

Se você deseja que sua página HTML seja organizada com CSS (compatível com CSS), você precisa voltar e começar de novo. Não pense primeiro na "aparência", mas primeiro pense na semântica e na estrutura do conteúdo da sua página.

A aparência não é o mais importante. Uma página HTML bem estruturada pode ser apresentada em qualquer aparência, e CSS Zen Garden é um exemplo clássico. CSS Zen Garden nos ajuda a finalmente perceber o poder do CSS.

HTML não serve apenas para leitura na tela do computador. Suas imagens cuidadosamente projetadas no Photoshop podem não ser exibidas em PDAs, telefones celulares e leitores de tela. Mas uma página HTML bem estruturada pode ser exibida em qualquer lugar e em qualquer dispositivo de rede através de diferentes definições de CSS.

comece a pensar

Comece aprendendo o que é estrutura, que alguns escritores também chamam de semântica. O que esse termo significa é que você precisa analisar seus blocos de conteúdo e a finalidade de cada parte do conteúdo e, em seguida, construir a estrutura HTML correspondente com base nesses propósitos de conteúdo.

Se você sentar e analisar e planejar cuidadosamente a estrutura da sua página, poderá acabar com algumas peças como esta:

Geralmente usamos elementos DIV para definir essas estruturas, semelhante a este:

<div id=header></div>

<div id=content></div>

<div id=globalnav></div>

<div id=subnav></div>

<div id=pesquisa></div>

<div id=loja></div>

<div id=rodapé></div>

Não é o layout, é a estrutura. Esta é uma descrição semântica de blocos de conteúdo. Ao entender sua estrutura, você pode adicionar o ID correspondente ao DIV. Qualquer bloco de conteúdo pode estar contido em um contêiner DIV e outro DIV pode ser aninhado dentro dele. Os blocos de conteúdo podem conter qualquer elemento HTML: títulos, parágrafos, imagens, tabelas, listas, etc.

Com base no exposto, você já sabe estruturar HTML e agora pode definir layout e estilos. Cada bloco de conteúdo pode ser colocado em qualquer lugar da página e a cor, fonte, borda, plano de fundo, propriedades de alinhamento, etc. do bloco podem ser especificadas.

Usar seletores é uma coisa maravilhosa

O nome do id é um meio de controlar um determinado bloco de conteúdo. Ao envolver esse bloco de conteúdo com um DIV e adicionar um id exclusivo, você pode usar seletores CSS para definir com precisão a aparência de cada elemento da página, incluindo títulos, listas, imagens. , links ou parágrafos, etc. Por exemplo, se você escrever uma regra CSS para #header, ela poderá ser completamente diferente da regra de imagem em #content.

Outro exemplo: você pode usar regras diferentes para definir estilos de link em diferentes blocos de conteúdo. Algo assim: #globalnav a:link ou #subnav a:link ou #content a:link. Você também pode definir estilos diferentes para o mesmo elemento em blocos de conteúdo diferentes. Por exemplo, defina os estilos de p em #content e #footer respectivamente através de #content p e #footer p. Estruturalmente falando, sua página é composta por imagens, links, listas, parágrafos, etc. Esses elementos em si não afetam o dispositivo de rede em que são exibidos (PDA, celular ou Internet TV). Eles podem ser definidos como Qualquer aparência de desempenho.

Uma página HTML cuidadosamente estruturada é muito simples e cada elemento é usado para fins estruturais. Quando você deseja recuar um parágrafo, não precisa usar a tag blockquote. Basta usar a tag p e adicionar uma regra de margem CSS a p para atingir o propósito de recuo. p é uma tag estruturada e margin é um atributo de apresentação. O primeiro pertence ao HTML e o último pertence ao CSS. (Esta é a separação entre estrutura e expressão.)

Páginas HTML bem estruturadas quase não possuem tags de atributos. O código é muito limpo e conciso. Por exemplo, o código original <table width=80% cellpadding=3 border=2 align=left> agora só pode escrever <table> em HTML, e todas as coisas que controlam o desempenho são escritas em CSS em tabelas estruturadas. é uma tabela, e não qualquer outra coisa (como ser usada para layout e posicionamento).

Pratique estruturar-se

A descrição acima é apenas a estrutura mais básica. Na aplicação real, você pode ajustar os blocos de conteúdo de acordo com suas necessidades. O aninhamento DIV ocorre frequentemente, e você verá que existem outras camadas na camada contêiner, com uma estrutura semelhante a esta:

<div id=navcontainer>

<div id=globalnav>

<ul>uma lista</ul>

</div>

<div id=subnavegador>

<ul>outra lista</ul>

</div>

</div>

Elementos div aninhados permitem que você defina mais regras CSS para controlar a apresentação. Por exemplo, você pode fornecer ao #navcontainer uma regra para centralizar a lista à direita, fornecer ao #globalnav uma regra para centralizar a lista à esquerda e fornecer outra ao #subnav. regra para centralizar a lista totalmente. Desempenho diferente.