Criando a página dicas_beleza.html

Criaremos agora a página dicas_beleza.html, também a partir do modelo.

• Na barra de menus escolha Arquivo > Novo, escolha a guia Modelos, serão exibidos os sites e modelos existentes, escolha o site Bioderm e o modelo bioderm_modelo.
  Mantenha a opção atualizar a página quando o modelo for alterado, dessa forma, ao atualizar o modelo, todos os documentos serão atualizados.
  
• Salve o documento com o nome de dicas_beleza.html, na pasta dicas_beleza.

• Posicione o cursor na segunda linha da tabela e crie uma nova tabela dentro dessa linha: Painel Inserir Comuns > Inserir tabela, ou barra de menus Inserir > Tabela. A nova tabela terá as seguintes propriedades: 1 linha, 2 colunas, largura de 760 pixels, preenchimento da célula = 0, espaçamento entre as células = 0 e borda = 0. Defina a largura de cada coluna da tabela, selecione a primeira coluna e no campo L do Inspetor de propriedades digite 130, agora selecione a segunda coluna da tabela e no campo L do Inspetor de propriedades digite 630.
• Na primeira coluna da tabela insira uma cor de fundo, posicione o cursor nessa coluna, e na opção Fundo do Inspetor de propriedades escolha a cor cinza claro (#CCCCCC).
  
  
  
• Na segunda coluna da tabela insira uma outra tabela de 1 linha/1 coluna e largura de 580 pixels, centralize essa tabela.
  Posicione o cursor dentro dessa tabela e no Inspetor de propriedades selecione No alto. Em seguida, insira o texto com as dicas de saúde e beleza (copie o texto do arquivo texto_dicas_beleza.doc).
• Selecione todo o texto e no Inspetor de propriedades altere a fonte para verdana, tamanho 2.
  
  Salve essa página.
  

As âncoras são utilizadas em páginas que possuem conteúdo muito extenso. Atribui-se um âncora para cada parágrafo ou para cada tópico da página, e depois cria-se um menu no início da mesma com links para essas âncoras. Esse recurso agiliza a navegação pelo conteúdo da página, dispensando o uso da barra de rolagem, que normalmente se forma nesses documentos muitos extensos.
Para inserir uma âncora, na barra de menus selecione Inserir / Âncora com nome, ou no Painel Inserir: Comuns / Âncora com nome.

Vamos utilizar como exemplo a página do site referente as dicas de beleza. Nessa página disponibilizamos um grande número de dicas, o que tornou o seu conteúdo muito extenso.

1) Abra o arquivo texto_dicas_beleza.doc e copie o seu conteúdo para a página na qual estamos trabalhando. Esse conteúdo está dividido nos seguintes tópicos: cuidados com a pele, cuidados com os cabelos, como ter uma alimentação equilibrada, tratamento da celulite, beba muita água, como gastar calorias mesmo sem tempo para se exercitar, como tirar o máximo de proveito do baton.

2) No início de cada tópico (dica) insira uma âncora, da seguinte forma:
Coloque o cursor no início do tópico "Cuidados com a pele".
Na barra de menus selecione Inserir / Âncora com Nome, ou no Painel Inserir: Comuns / Âncora com Nome.
Na janela que se abre, digite o nome da âncora: pele, e clique em OK.
Faça o mesmo procedimento para os demais tópicos, as próximas âncoras se chamarão: cabelos, alimentacao, celulite, agua, calorias, baton)

3) Crie um menu no início da página, contendo apenas os títulos dos tópicos, como segue: (use fonte verdana, tamanho 2)
-Cuidados com a pele
-Cuidados com os cabelos
-Como ter uma alimentação equilibrada
-Tratamento da celulite
-Beba muita água
-Como gastar calorias mesmo sem tempo para se exercitar
-Como tirar o máximo de proveito do baton

4) Vincule cada ítem do menu a sua respectiva âncora. Selecione o ítem do menu, e no campo Link do Inspetor de Propriedades digite o nome da âncora precedido pelo símbolo #. Exemplo #pele.

5) É importante também disponibilizar uma forma do usuário voltar para o menu no topo da página após ter acessado um determinado tópico. Para isso, insira uma âncora no início da página, antes do menu. Essa âncora terá o nome de "topo". Em seguida digite a palavra "Topo" no final de cada tópico e faça um link para a âncora topo (#topo).

Obs: Se a âncora fosse chamada de uma outra página, o link ficaria assim: pagina.html#ancora

Salve a página e tecle F12 para visualizá-la no navegador. Em seguida feche a página.
Teste o site localmente.