O início da produção de um site, é o projeto, como já vimos.

Após a definição do projeto, com o mapa de navegação pronto, entramos na parte prática de "fabricação" do site. 

Essa fase se caracteriza pela elaboração de lay outs das páginas que vão compor o site.

Para fazer os lay outs você vai precisar de um editor de imagens. O mais indicado é o Photoshop, por que, além de trabalhar com imagens em bitmaps oferece maior quantidade de recursos para o trabalho.

Inicia-se a produção de lay outs, fazendo-se uma imagem das telas que você precisará ter no site. Essa imagem deve conter todos os elementos visuais que farão parte da página a que ela se refere.

Exemplo:

Com seu lay out definido. Você começa a fase chamada de "quebrar o lay out", ou seja, produzir as imagens que serão necessárias para a construção deste lay out no software de edição de HTMl que vc está utilizando.

Neste caso, temos as seguintes imagens contruidas:

(OBS. As imagens foram diminuídas para melhor se adequarem ao espaço.)

	Este arquivo é um Gif transparente, que será localizado na parte inferior esquerda da página. Tem 3kb de "peso" e será usado como link de e-mail, junto com sua função estética da diagramação da página.
Esta é a imagem que fica na parte superior esquerda da página em questão. Tem 9kb de peso.
	Este é um gif transparente, que será usado na lateral direita da página, dentro de uma tabela de diagramação. Tem 5kb de peso e, devido a sua dimensão, ocupará uma grande área da página.

O restante da página é composto de texto, que é digitado diretamente no documento HTML e tratado dentro do software de edição.

Pronto esse é um exemplo de página simples, que pode ser construída nos editores de HTML mais comuns do mercado não necessitando nenhum recurso especial.

Exemplos de lay outs:
 

exemplo 1
exemplo 2
exemplo 3
exemplo 4
exemplo 5
exemplo 6
exemplo 7
exemplo 8