A estruturação do documento pode ser feito em qualquer editor de texto ASCII. O software utilizado para esta etapa foi o Notepad++, um editor de textos leve, mas com vários recursos de edição de código.

O DTD escolhido para o projeto foi o Transitional, pois é mais flexível em relação à erros. O conteúdo do site é gerenciado por terceiros, utilizando o sistema de gerenciamento criado especificamente para isso. Por isso não é possível manter um código-fonte completamente seguro de erros e outras falhas.

Todo documento XHTML é composto por por algumas marcações padrão, como por exemplo, a declaração de tipo de documento (DTD), a marcação HTML, o cabeçalho (sendo que este contém o título da página e também as metatags e marcações de estilo) e o corpo, onde irá todo o conteúdo que será visualizado na página.

Abaixo, segue um trecho de código para exemplificar a explicação acima:

Note que existem vários arquivos CSS sendo incluídos na página. O objetivo disso é facilitar a pesquisa e alteração de código durante a manutenção. Em vez de existir um único arquivo com centenas de linhas, tem-se vários arquivos menores, divididos em áreas ou funcionalidades. As páginas internas do projeto ainda contam com mais um arquivo CSS, pag-internas.css, responsável por realizar alterações visuais necessárias.

Feito isso, escreve-se a estrutura principal do layout. Esta estrutura é delimitada com marcações DIV (cujo nome vem de "divisor"). Cada área é identificada unicamente através do atributo HTML id. Estas demarcações de área são uma espécie de padrão, e são encontradas em todos os projetos desenvolvidos. Evita-se variar os ids para não causar enganos.

Abaixo, segue o código da estrutura principal da página principal do projeto:

A estrutura principal das páginas internas do projeto é ligeiramente diferente, pois, ao invés de existir três colunas principais, há apenas duas. Além do mais, as páginas possuem funções diferentes: enquanto que a página principal é essencialmente uma página de exibição de destaques ou de conteúdos mais recentes, as páginas internas exibem o conteúdo propriamente dito. Abaixo você pode ver a estrutura de uma página interna convencional:

Na empresa Vsoft, seguimos algumas regras (além dos padrões estabelecidos pela W3C) para facilitar a edição posterior, tanto por aqueles que desenvolveram a página, quanto outras pessoas. Por exemplo, observe no exemplo de código acima que cada final de marcação está identificado através de um comentário. Estes comentários servem como guia e evitam confusão quando vários elementos DIV estão aninhados.

Outra padronização que sempre tentamos seguir rigorosamente em nossas páginas é a forma de escrever o código dos blocos de conteúdo secundário. Ela foi desenvolvida com o objeto de aumentar a compatibilidade do Modelo de Caixa CSS. Este modelo será detalhado mais à frente, em um capítulo à parte. Salvo algumas excessões, todos os blocos seguem o seguinte padrão:

Cada atributo do elemento DIV tem uma razão de ser: o atributo id permite identificar unicamente aquele bloco na página. Isso é útil para permitir a manipulação daquele elemento usando javascript DOM (Document Object Model) ou aplicar um estilo em particular que foge do padrão estabelecido para aquela família de bloco. O atributo class possui dois valores, o primeiro ("bloco") o define universalmente como um bloco, e permite aplicar folhas de estilos que estão presentes em todos os blocos do projeto. O segundo cria um subgrupo ou família de blocos.

Por exemplo, supondo que existem várias enquetes em uma mesma página. todos estes blocos possuem a formatação definida para os blocos da página, mas também possuem formatação específica que os diferem dos demais blocos. Então neste caso seria aplicado o valor "bloco-enquete" a todos os blocos de enquete, permitindo assim aplicar este estilo diferenciado.

Abaixo pode-se ver algumas aplicações do exemplo acima neste projeto:

O menu principal do projeto:

O bloco "tour virtual":

O bloco "enquete":