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 outro 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.
Em seguida, criamos uma nova pasta na área de trabalho com o nome "DIV + CSS Layout Exercise". Crie dois documentos vazios do bloco de notas na pasta e insira o seguinte conteúdo:
Esta é a estrutura básica do XHTML, chame-a de index.htm e nomeie o outro documento do Bloco de Notas como css.css.
A seguir, escrevemos a estrutura básica do DIV no par de tags <body></body>, o código é o seguinte:
<div id=container><!--Contêiner da camada de página-->
<div id=Cabeçalho><!--Cabeçalho da página-->
</div>
<div id=PageBody><!--Corpo da página-->
<div id=Barra lateral><!--Barra lateral-->
</div>
<div id=MainBody><!--Conteúdo principal-->
</div>
</div>
<div id=Rodapé><!--Parte inferior da página-->
</div>
</div>
Para facilitar a leitura do código no futuro, devemos adicionar comentários relevantes. Em seguida, abra o arquivo css.css e escreva as informações CSS.