framesEW 3 - Como criar o segundo nível em uma lista?

 

 

Suponhamos que se queira criar uma lista de três níveis como aquela mostrada abaixo:

  1. Conceitos Gerais
  2. Soluções Gasosas
    1. Generalidades
    2. Leis Gerais dos Gases
      1. Lei de Boyle
      2. Lei de Charles
      3. Lei de Avogadro
    3. Gases Reais
  3. Soluções Líquidas

A primeira coisa a fazer é criar uma lista simples (numerada ou com marcadores) em um local escolhido na área de "Design" do EW 3. Para tanto utilize um dos ícones mostrados na figura abaixo e que existem tanto na Barra de Ferramentas "Comum" (Common Toolbar) quanto na Barra de "Formatação" (Formatting Toolbar).

icones de listas

Vá acrescentando, linha por linha, os conteúdos relacionados ao primeiro nível da lista. Abaixo é mostrado um exemplo:

  1. Conceitos Gerais
  2. Soluções Gasosas

É chegada a hora de criarmos um segundo nível para o item "Soluções Gasosas".

A este ponto observe a janela de "código html" ou "code" [se necessário, clique em "Split" para abrir concomitantemente as duas janelas, a de design e a de código html]. Nesta segunda janela, e correspondendo ao que mostramos acima, você irá observar o seguinte:

<ol>
    <li>Conceitos Gerais</li>
    <li>Soluções Gasosas</li>
</ol>

Esta tag "ol" corresponde à lista em seu primeiro nível. O conjunto de caracteres <ol> presta-se a abrir a lista, e o correspondente </ol> fecha a lista. As tags "li" [conjuntos <li> e </li>] correspondem às linhas.

Se quisermos criar agora um segundo nível, uma das maneiras simples seria iniciar o procedimento na janela de código html [Code]. Imediatamente após "Soluções Gasosas" e imediatamente antes do fechamento da tag "li" [</li>] desta linha, digite <ol><li>. As tags de fechamento surgirão expontaneamente, assim que você concluir a digitaçao de cada uma das tags, e você ficará então com o seguinte código acrescentado:

 <li>Soluções Gasosas<ol><li></li></ol></li>

A partir daí você poderá retornar à janela de design. A primeira linha do segundo nível estará lá. Digite agora, nesta linha, os itens deste segundo nível e a cada vez que você pressionar "Enter" uma nova linha, também deste segundo nível, aparecerá.

Para o exemplo ilustrado acima, após digitar "Leis Gerais dos Gases" repita o procedimento (ou seja, volte para a página de código), criando assim o terceiro nível.

Concluído este terceiro nível [para o nosso exemplo, após a digitação "Lei de Avogadro" na janela "design"], pressione "Enter" duas vezes. Com isto você voltará ao segundo nível. Concluído o segundo nível pressione novamente "Enter" duas vezes para retornar ao primeiro nível. E repita o procedimento ao final, fechando assim a lista.

Por fim escolha os caracteres de formatação dentre aqueles oferecidos pelo EW 3 [No exemplo dado seriam A, B, C... para o primeiro nível, 1, 2, 3... para o segundo e a, b, c... para o terceiro]. Para tanto selecione o nível correspondente [tudo o que estiver entre o <ol> e o </ol> do respectivo nível], dirija-se ao menu superior Format e clique em Bullets and Numbering.... Na janela que se abre escolha o caractere conveniente.

* * * * *


DHTML Menu By Milonic JavaScript