Criando a página produtos.html

Criaremos agora a página produtos.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, esse documento também será atualizado.
  
• Salve o documento com o nome de produtos.html, na pasta produtos.
  
• Salve as imagens batom.gif, creme.gif e perfume.gif na pasta imagens
  
  
  

• 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. Dentro dela insira o texto referente aos produtos, que pode ser copiado do modelo texto_produtos, é só copiar e colar. O texto deve ficar posicionado na parte superior da tabela, para isso posicione o cursor em qualquer lugar dentro da tabela, e no Inspetor de Propriedades, no campo Vert, escolha No Alto. O útimo parágrafo do texto termina com a frase "Para saber mais clique aqui", transforme a palavra "aqui" num link, selecione a palavra e no campo Link do Inspetor de propriedades digite ../index.html
  
• Após copiar a descrição, pule 1 linha e insira uma tabela com 3 linhas e 2 colunas, largura de 540 pixels e borda = 0. Deixe-a centralizada.
  
• Selecione a primeira coluna e no campo L do Inspetor de propriedades digite 140, agora selecione a segunda coluna da tabela e no campo L do Inspetor de propriedades digite 400.
  
• Selecione toda a tabela e no campo Cor de fundo do Inspetor de propriedades defina a cor cinza (código #CCCCCC)
  
• Ainda com toda a tabela selecionada altere o campo Espaço entre as células para o valor 2.
  
• Selecione somente as células da tabela e altere a cor de fundo para branco (código #FFFFFF). Para selecionar somente as células da tabela, selecione as células da primeira linha e com o botão esquerdo do moude pressionado selecione as demais
  
• Como resultado disso será criada uma espécie de borda separando as células da tabela
  
• Agora insira as imagens batom.gif, creme.gif e perfume.gif (que se encontram na pasta imagens) respectivamente na 1ª coluna da 1ª linha, na 1ª coluna da 2ª linha e na 1ª coluna da 3ª linha
  
• Na 2ª coluna da 1ª linha insira o seguinte texto:
  "Os batons Bioderm fixam por mais tempo, dispensando aqueles retoques frequentes na maquiagem. Estão disponíveis em uma grande variedade de cores."
  
• Na 2ª coluna da 2ª linha insira o texto:
  "O creme hidratante Bioderm é indicado para o rosto, possui filtro solar FPS 20 que protege contra os raios ultravioleta do sol UV-A e UV-B. Além disso deixa a pele macia e não engordura."
  
• Na 2ª coluna da 3ª linha insira o texto:
  "O perfume Bioderm possui uma fragrância discreta e agradável que dá uma sensação refrescante. Tem ação prolongada."

A tabela ficará assim:

Salve essa página.