Na produção de páginas web, existem muitos termos, como: CSS, HTML, DHTML, XHTML e assim por diante. No artigo a seguir usaremos alguns conhecimentos básicos sobre HTML. Antes de estudar este tutorial introdutório, certifique-se de que você já possui algum conhecimento básico de HTML. Vamos começar a usar DIV + CSS passo a passo para projetar o layout da página da web.
O primeiro passo em todos os projetos é conceber. Depois de conceber, em geral, você precisa usar o PhotoShop ou FireWorks (doravante denominado PS ou FW) e outros softwares de processamento de imagem para simplesmente desenhar o layout da interface que precisa ser feito. a seguir está o diagrama de layout da interface que concebi.
Em seguida, precisamos planejar o layout da página com base no diagrama conceitual. Depois de analisar cuidadosamente o diagrama, podemos facilmente descobrir que a imagem está dividida nas seguintes partes:
1. A parte superior, que também inclui LOGOTIPO, MENU e imagem do Banner;
2. A parte do conteúdo pode ser dividida em barra lateral e conteúdo principal;
3. A parte inferior inclui algumas informações sobre direitos autorais.
Com a análise acima, podemos facilmente definir nossa camada de design conforme mostrado abaixo:
Com base na imagem acima, desenhei um diagrama de layout de página real para ilustrar a relação de aninhamento das camadas, para que seja mais fácil de entender.
A estrutura DIV é a seguinte:
│body {} /*Este é um elemento HTML, não vou explicar os detalhes*/
└#Container {} /*Contêiner da camada de página*/
├#Header {} /*Cabeçalho da página*/
├#PageBody {} /*Corpo da página*/
│ ├#Barra lateral {} /*Barra lateral*/
│ └#MainBody {} /*Conteúdo principal*/
└#Rodapé {} /*Final da página*/
Neste ponto, o layout e o planejamento da página foram concluídos, e a próxima coisa que precisamos fazer é começar a escrever o código HTML e CSS.