HTML e CSS 08: O processo de montagem da prática

1. O processo de montagem na prática

Esta aula se propõe a ser um tutorial para montagem de um pequeno site com o uso das técnicas dadas nas aulas anteriores. É uma espécie de resumo prático, no qual aplicamos os conceitos dados relativos às linguagens HTML e CSS, e utilizamos o recurso de include da linguagem PHP.

Os arquivos iniciais são algumas imagens e um arquivo texto, que podem ser baixados aqui.

Este tutorial é composto de 3 vídeos, com a ajuda de instruções em áudio.

No primeiro, abrimos uma nova página HTML, definimos as caixas de layout com a tag DIV e configuramos o arquivo CSS, com as mesmas DIVs, definindo o valor de suas propriedades. Neste vídeo o layout fica definido. Lembre-se que você pode clicar no ícone do monitor no rodapé da janela de vídeo para maximiza-lo.

 

No segundo vídeo, o arquivo CSS é aprimorado, o layout ganha imagens de fundo, itens no menu e as demais DIVs recebem conteúdo de texto e imagem.

 

 

No terceiro vídeo se dá a aplicação dos includes do PHP para reproduzir a estrutura da página padrão para as outras páginas do site. Além disso, fazemos mudanças no layout para mostrar a flexibilidade de um layout feito com CSS de posicionamento.

 

Aproveito para lembrar que a web está cheia de tutoriais sobre HTML e CSS. Listo alguns abaixo, pois em cada um deles o aluno pode descobrir novos recursos e soluções inteligentes para problemas comuns.


2. Dica para a edição de HTML e CSS

Uma página HTML nunca pode ser considerada pronta antes de ser testada. Embora o Dreaweaver tenha o recurso do preview, pode haver diferenças entre o layout da página no programa e no navegador. Sendo assim, um designer digital tem a obrigação de ter vários navegadores instalados em sua estação de trabalho, pelo menos os mais comuns.

curso-html-webdev-css

Outro recurso interessante é a instalação de um plugin para o navegador Firefox chamado Web Developer. Como o nome diz, este plugin conta com várias ferramentas para facilitar a vida de quem desenvolve para web. Com ele você pode desligar o código CSS de uma certa página ou decidir clicar em um elemento da tela e fazer com que o plugin mostre qual arquivo e linha CSS rege a visualização daquele elemento; pode editar o código CSS diretamente do navegador ou vincular outro arquivo CSS à página corrente. Além disso pode redimensionar a janela do navegador, simulando várias resoluções diferentes, validar seu código HTML, CSS e outras coisas que você só descobre instalando.