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 os atributos da camada de apresentação muito familiares (como cellpadding, hspace, align="left", etc.) e não sabe em quais instruções CSS convertê-los. 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. Depois 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
A primeira coisa a aprender é 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 algo assim:
Logotipo e nome do site
Conteúdo da página principal
Navegação no site (menu principal)
submenu
caixa de pesquisa
Áreas funcionais (por exemplo, carrinho de compras, checkout)
Rodapé (direitos autorais e avisos legais relacionados)
Geralmente usamos elementos DIV para definir essas estruturas, semelhante a este:
＜div id="cabeçalho"＞＜/div＞
＜div id="conteúdo"＞＜/div＞
＜div id="globalnav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="pesquisar"＞＜/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.