Usando CSS3 para criar um esboço do documento é útil quando uma página contém uma grande quantidade de material e você quer que o usuário navegar facilmente. O esquema baseia-se nas várias marcas que você fornece. O actual método de criação de um contorno do documento é a utilização do

através

etiquetas.

Esta abordagem funciona muito bem quando o material vem da mesma página ou você tem controle sobre a formatação do conteúdo. Ela não funciona tão bem quando o conteúdo é proveniente de outro local, razão pela qual os grupos de padrões teve para chegar a uma maneira inteiramente nova de fazer as coisas.

O procedimento a seguir demonstra uma técnica para adicionar um esboço para uma página que já contém um menu. Você usa a navegação como um ponto de partida.

1. Abra o arquivo navigation.html e adicione o seguinte código para o fim da secção (após o menu existente).

2. Ponto principal 1
3. Sub rubrica 1
4. Sub ponto 2
5. Ponto principal 2
6. Sub categoria 3
7. Sub ponto 4



Ponto principal 1

material introdutório

Sub rubrica 1

Artigo

Sub ponto 2

Artigo

Ponto principal 2

material introdutório

Sub categoria 3

Artigo

Sub ponto 4

Artigo

As entradas consistem em um esboço de documento e o conteúdo associado. O esboço segue especificamente o

e

objetos neste exemplo. Existem métodos para gerar esse tipo de conteúdo automaticamente, mas todas elas requerem codificação.

Este é um caso onde usando CSS implica alguma codificação manual que você não teria de realizar ao utilizar outras técnicas, tais como a inclusão de javascript. No entanto, a vantagem é que o exemplo vai funcionar bem com qualquer navegador que suporta CSS.

8. Salve o arquivo HTML.

9. Abra Navigation.CSS e digite os seguintes estilos no final do arquivo.

   #DocOutline {Font-family: Arial, Helvetica, sans-serif-font-size: 14px; width: 145px; height: 800px;} # DocOutline ul {margin-bottom: 20px; list-style: none; margin-left: -40px;} # DocOutline ul ul {margin-left: -20px;} # DocContent {margin-top: -800px; margin-left: 150px;}

   O foco principal é sobre os tópicos do documento onde você precisa fornecer links formatado para o conteúdo encontrado no restante da página. Observe que o contorno é definido para uma altura específica. A razão para esta configuração é para tornar mais fácil para posicionar o conteúdo do documento uma vez que os links são exibidos.

   O exemplo define o estilo de propriedade list-style #DocOutline ul a nenhum. Você poderia facilmente usar números, letras ou qualquer outro índice delineamento de sua preferência.

   Esta lista de metade irá automaticamente travessão da distância dos elementos de menu individuais criados anteriormente. A fim de colocar os links no lado esquerdo da página, você deve reverter o recuo da lista, definindo margem esquerda para a -40px, que é a metade da largura 80px dos elementos individuais do menu.

   Cada nível vai exigir alguma quantidade adicional de recuo de modo que o usuário pode ver os níveis relativos de cada entrada. O #DocOutline ul ul muda o recuo para as posições de segundo nível. Se você tivesse um terceiro nível de títulos, você criar um estilo ul ul ul #DocOutline para formatá-lo.

   O conteúdo do documento terá início após o esboço do documento, a menos que uma das duas coisas acontece. Em primeiro lugar, você pode usar colunas reais. No entanto, esta funcionalidade requer CSS3. Em segundo lugar, você pode usar pseudo-colunas. Você define o valor da propriedade margin-top igual à altura do contorno documento.

   A técnica é mostrado neste exemplo irá funcionar com qualquer browser que suporte totalmente CSS. Observe que você também deve definir a margem esquerda para um valor que é igual à largura do contorno de documentos (além de alguns pixels de espaçamento.

10. Salve o arquivo CSS.

11. Recarregar o exemplo de navegação.

    Você ver o contorno de documentos e conteúdo associado. Este esquema funciona realmente - você pode clicar nos links para ir para os vários cabeçalhos apresentados no esquema.