Como codificar um layout de site

Use o Adobe Photoshop ou o Microsoft Paint para escolher as cores exatas que você deseja usar. Criando um visual mock-up irá poupar o trabalho de tentativa e erro quando você está fazendo a codificação real e design. Olhe para outros layouts de sites que você gosta de inspiração.

Use a forma de retângulo em seu programa de edição gráfica e desenhe um retângulo que é de 900 pixels de largura e pelo menos 600 pixels de altura. Este será o "recipiente" que irá realizar todos os outros elementos do seu layout. Quando você codificar o layout que você será capaz de centralizar este recipiente no meio da tela ou mantê-lo mais à esquerda.

Desenhar um rectângulo horizontal que se estende desde uma extremidade do interior do recipiente para o outro. Este retângulo representa seu cabeçalho. Desenhar uma coluna sob o cabeçalho de, pelo menos, 150 pixels de largura, com a ferramenta rectângulo. Isto irá representar a sua barra lateral. Desenhe outra coluna, maior próximo a ele, que irá representar o seu principal elemento de conteúdo. As larguras das duas colunas mais qualquer espaço extra entre eles deve adicionar até a largura do recipiente. Desenhe outro retângulo horizontal sob as duas verticais para representar o rodapé.

Abra o seu programa de processamento de texto. Abra um documento em branco e escreva o seguinte código:

Salve o documento com uma extensão de arquivo .html ou .PHP e enviá-lo para o diretório do seu site.

Escrever este código entre o e Tag:

Use um .CSS (Cascading Style Sheet) arquivo para projetar cada elemento e atribuir a eles as suas dimensões. Consulte Recursos 1 como um guia para a codificação de um arquivo .css. Use o "conta-gotas" ou ferramenta Color Picker no editor gráfico para obter os códigos de cores hexadecimais você usou em seu mock-up. Quando você ter codificado seu arquivo .CSS, enviá-lo para o diretório do seu Web site. Coloque este código em algum lugar entre o e tags da página que você fez.

Coloque o nome do seu arquivo .CSS entre o último conjunto de aspas arquivo. Este pedaço de código irá "ligar" o arquivo .CSS e dar a sua disposição o estilo.