Depois de ter escolhido um modelo sobre o qual trabalhar (um modelo padronizado, um modelo personalizado, ou um novo modelo criado do zero) na janela Seleção do Modelo e ter definido o Estilo do Modelo, você pode usar os recursos nesta janela para personalizar o cabeçalho e o rodapé e mais ainda, adicionando textos, imagens, animações em Flash, apresentações de slides, código HTML, campos de busca e links.
|
Todas as configurações definidas nesta janela só se aplicam ao modelo de desktop, e não ao modelo responsivo.
Você precisa definir um modelo responsivo se quiser criar um website responsivo: a primeira coisa a fazer é selecionar a opção Habilitar website responsivo na janela Configurações Gerais | Design Responsivo e então trabalhar na janela Estrutura Modelo para celular.
|
|
Os comandos e opções para o Cabeçalho e o Rodapé são idênticos.
|
|
Se você usar uma animação em Flash como plano de fundo para o Cabeçalho ou o Rodapé você não poderá personalizá-los na janela Personalização do Modelo de desktop.
|
A janela Personalização do Modelo de desktop contém um editor de imagens. Abaixo da barra de ferramentas, você pode ver a imagem de fundo do cabeçalho ou do rodapé do modelo que você escolheu (personalizado ou padronizado). A imagem é exibida na escala 1:1, e você pode deslocá-la se necessário. Quaisquer alterações que fizer com este editor serão exibidas em tempo real na imagem.
Há uma barra de status imediatamente abaixo da imagem que fornece as seguintes informações:
| ▪ | Posição: são exibidas as coordenadas x e y do canto superior direito do objeto selecionado. |
| ▪ | Tamanho: informa a altura e a largura em pixels do objeto selecionado. |
|
Se, ao definir o Estrutura principal do Modelo, você selecionar a opção Horizontal - Menudentro do cabeçalho como Tipo de menu, uma área cinza marcada por uma linha pontilhada, correspondente ao tamanho do menu, aparecerá na imagem do 'Cabeçalho. Esta indicação deverá ajudá-lo a planejar onde posicionar outros objetos dentro do cabeçalho.
|
|
Você pode usar as opções na barra de ferramentas para adicionar novos objetos ao Cabeçalho / Rodapé do modelo e especificar algumas configurações para eles. Uma vez que um objeto tenha sido adicionado, você pode selecioná-lo e fazer alterações nele usando as opções que aparecem na caixa que tem o nome do objeto.
|
|
Cortar [CTRL+X] - Copiar [CTRL+C] - Colar [CTRL+V]
Para cortar, copiar ou colar o objeto selecionado.
|
|
Cancelar [CTRL+Z]
Para desfazer a última ação.
|
|
Trazer para a frente - Enviar para trás
Para trazer o objeto selecionado para o primeiro plano ou levar para segundo plano (para mostrar o objeto sobre ou sob qualquer objeto sobreposto a ele).
|
|
Associar um link a este objeto
Para criar um link no texto, imagem ou fotos selecionadas em uma apresentação de slides. Você pode definir o link na janela Link.
|
|
Posição e tamanho
Para abrir outra janela e especificar as coordenadas que posicionam e dimensionam o objeto selecionado. A opção Manter proporções (ativada por padrão) mantém as proporções originais do objeto se você redimensioná-lo.
|
|
Inserir texto - Inserir imagem - Inserir animação Flash - Inserir apresentação de slides - Inserir código HTML - Inserir campo de busca
Para adicionar texto, uma imagem, animação em Flash, uma apresentação de slides, código HTML ou um campo de busca.
Clique no triângulo no botão Inserir imagem para exibir um sub-menu com os seguintes itens: Imagem do arquivo... e Imagem de Biblioteca Online....
Uma coleção com mais de 400.000 imagens livres de royalties está disponível na janela que se abre com o comando Imagem de Biblioteca Online..., e é fácil selecionar a que você deseja importar.
Uma Apresentação de slides é uma série de imagens que são exibidas automaticamente uma após a outra. É um objeto útil para criar banners (especialmente para publicidade).
Você pode usar o código HTML para adicionar todo tipo de conteúdo, mesmo aqueles para os quais não há um objeto específico.
O campo de busca usa um mecanismo de busca interno para que os visitantes possam procurar por um conteúdo específico dentro do seu website.
|
|
Qualquer objeto animação Flash ou código HTML que você adicionar só ficará visível quando o website for aberto em um navegador.
|
|
Clique nas imagens de fundo das abas Cabeçalho e Rodapé para selecioná-las e usar os seguintes comandos:
| ▪ | Salvar como imagem JPG: quando estiver criando seu website, os objetos texto e imagem que adicionar ao Cabeçalho/Rodapé serão mesclados com a imagem de fundo, e serão automaticamente salvos como um novo arquivo no formato PNG. Este formato foi escolhido porque ele garante que as configurações de transparência que tiverem sido configuradas serão mantidas. Se você não tiver determinado nenhuma configuração de transparência, você pode selecionar a opção Salvar como imagem JPG para criar um arquivo de imagem de fundo menor. |
|
Você pode selecionar um objeto Texto no Cabeçalho / Rodapé e usar as seguintes opções para trabalhar com ele:
| ▪ | Conteúdo: para inserir ou colar o conteúdo do texto neste campo. |
| ▪ | Fonte: para definir a fonte, estilo e tamanho do texto. |
| ▪ | Cor do texto / Cor do fundo: para definir a cor do texto e do fundo dele. |
| ▪ | Salvar como imagem PNG: se esta opção estiver ativa, o texto não será mesclado à imagem de fundo do Cabeçalho/Rodapé, em vez disso será salvo como uma imagem .PNG com fundo transparente. O texto original é automaticamente associado com a imagem .PNG como texto ALT(ernativo). |
|
Você pode selecionar um objeto Imagem no Cabeçalho / Rodapé e usar as seguintes opções para trabalhar nele:
| ▪ | Arquivo de imagem: para selecionar o arquivo que contém a imagem a ser inserida. Você pode inserir imagens em um dos seguintes formatos: .JPG, .GIF, .PNG, .BMP, .PSD, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF. |
| ▪ | Arquivo de imagem sob foco: para selecionar outra imagem que será usada quando a seta do mouse passar sobre a primeira imagem. Esta opção é útil se quiser criar botões com efeito de clicado/liberado (sob cursor). |
| ▪ | Ativar transparência: para conferir transparência à imagem, de modo que a cor determinada não seja visível. |
| ▪ | Cor transparente: para especificar qual cor na imagem deverá ficar transparente se a opção Ativar transparência estiver selecionada. Você pode achar o "conta-gotas" útil para selecionar exatamente a cor que deseja diretamente da imagem. |
| ▪ | Tolerância: para especificar o fator de tolerância a ser aplicado à transparência. Quanto maior o fator de tolerância, maior será a área transparente na imagem. |
|
Quando você selecionar um objeto Animação Flash que tiver adicionado à área do Cabeçalho / Rodapé, você poderá trabalhar com as seguintes opções:
| ▪ | Arquivo de animação: selecione o arquivo .SWF que contém a animação em Flash que deseja adicionar. |
| ▪ | Fundo transparente: esta opção torna o fundo da animação transparente. |
|
Quando selecionar um objeto Apresentação de slides que tenha sido adicionado à área do Cabeçalho / Rodapé, as seguintes opções ficam disponíveis:
| ▪ | Nome do arquivo de imagem: lista as fotos da Apresentação de slides, e dá o nome do arquivo que contém cada foto. Ele também indica qualquer efeito e/ou link que possa ter sido associado a elas. Selecione um arquivo da lista para ver uma prévia da Apresentação de slides. Use CTRL + clique e SHIFT + clique para selecionar vários ao mesmo tempo. |
| ▪ | Adicionar... / Remover: Use estas opções para adicionar/remover fotos de/a uma Apresentação de slides. Você pode selecionar várias imagens de uma vez só a partir da Biblioteca de Imagens. |
| ▪ | Para cima / Para baixo: Use as setas para cima e para baixo para alterar a ordem na qual as fotos devem aparecer na Apresentação se slides. Selecione uma foto e pressione a seta para cima ou para baixo para movê-la para cima ou para baixo na lista de nomes de arquivos de imagens. |
| ▪ | Efeito...: esta opção abre a janela Propriedades do efeito, onde você pode definir os diversos efeitos de entrada, movimento e zoom para as fotos na Apresentação de slides. |
| ▪ | Início automático: esta opção faz com que a Apresentação de slides comece assim que o website for carregado no navegador. |
| ▪ | Visualização aleatória: se você selecionar esta opção, as fotos na apresentação de slides vão ser apresentadas em ordem aleatória, e não necessariamente na ordem em que aparecem na lista de nomes de arquivos de imagens. |
| ▪ | Exibir marcadores de navegação: um indicador gráfico é exibido sobre o Apresentação de slides que mostra para o usuário a quantidade e/ou a posição das imagens que compõem a imagem. |
| ▪ | Estilo do cursor: esta opção pode ser selecionada se você tiver selecionado a opção Exibir marcadores de navegação, e agora você poderá escolher a aparência do indicador gráfico. |
| ▪ | Alinhamento: esta opção fica disponível quando selecionar a opção Exibir marcadores de navegação, e você poderá escolher o alinhamento do indicador nas Apresentação de slides imagens. |
|
Selecione um Código HTML adicionado à área do Cabeçalho / Rodapé para usar os seguintes objetos:
| ▪ | Código HTML: digite ou cole o código HTML do objeto que deseja criar. A barra de ferramentas oferece os seguintes comandos: |
|
Cortar [CTRL+X] - Copiar [CTRL+C] - Colar [CTRL+V]
Estas opções cortam, copiam e colam o texto selecionado.
|
|
Cancelar [CTRL+Z] - Refazer [ALT+CAPS+BACKSPACE]
Estes comandos desfazem/refazem a última operação a ser feita/desfeita.
|
|
Inserir Widgets
Esta opção insere o código do widget selecionado: clique na seta ao lado do botão para exibir a lista completa de widgets, como eles aparecem em Objeto código HTML.
|
| ▪ | Exibir barras de rolagem: esta opção exibe as barras de rolagem. |
|
Quando você seleciona o objeto Campo de busca na área do Cabeçalho / Rodapé você pode trabalhar com as seguintes opções:
| ▪ | Texto do botão: você pode escrever o texto a ser exibido no botão que inicia a busca. |
| ▪ | Fonte: selecione a fonte, estilo e tamanho do texto no botão de busca. |
| ▪ | Cores dos campos: você pode escolher a cor do texto e do plano de fundo do campo de busca. |
| ▪ | Cores dos botões: você pode escolher a cor do texto e do plano de fundo do botão de busca. |
|
| ▪ | Quando você adiciona um Campo de busca ao Cabeçalho / Rodapé do modelo, uma Página Especial é automaticamente adicionada ao Mapa com o nome "Busca": você pode selecioná-la e abrir a janela Propriedades da Página para especificar suas propriedades. |
| ▪ | O resultado de uma busca dentro do website é exibido em páginas criadas automaticamente pelo Programa: a aparência destas páginas depende das configurações que você definir na seção Estilo de texto do Passo 1 - Estilo do Modelo). |
|
|
Quando você seleciona um objeto Texto, Imagem ou Apresentação de slides no Cabeçalho / Rodapé você pode definir diversos efeitos especiais para esse objeto. Os efeitos disponíveis são listados ao lado do Tipo de efeito.
Você pode selecionar mais de um efeito para cada objeto Texto, Imagem e Apresentação de slides. Você precisa definir as configurações para cada efeito:
Efeito
|
Configurações
|
Sombra
|
| ▪ | Difusão: indica o tamanho que a sombra deve ter. |
| ▪ | Cor: define a cor da sombra. |
| ▪ | Distância X / Distância Y: define a posição horizontal/vertical da sombra em relação ao objeto. Um valor positivo desloca a sombra para baixo e para a direita. Um valor negativo desloca a sombra para cima e para a esquerda. |
|
Reflexo
|
| ▪ | Difusão: indica o tamanho que o reflexo do objeto deve ter. |
| ▪ | Distância: indica a distância do objeto em que o reflexo deve ser posicionado. |
|
Borda colorida
|
| ▪ | Espessura: define a espessura da borda do objeto em pixels. |
| ▪ | Cor: define a cor da borda. |
|
Brilho externo
|
| ▪ | Difusão: especifica a concentração do brilho externo. |
| ▪ | Cor: define a cor do brilho externo. |
|
Chanfrado
|
| ▪ | Profundidade: define o grau de acentuação do chanfrado. |
| ▪ | Difusão: especifica a concentração do chanfrado. |
| ▪ | Ângulo: define o ângulo do chanfrado. |
|
Rotação
|
| ▪ | Ângulo: especifica quantos graus o objeto deverá ser girado (sentido horário). |
|
Opacidade
|
| ▪ | Opacidade: determina um valor de 0 a 255. A transparência do objeto aumenta com valores mais baixos. |
|
Suavizar
|
| ▪ | Difusão: especifica a concentração do suavizado. |
|
Onda
|
| ▪ | Difusão: determina a amplitude da onda. |
| ▪ | Frequência: determina a proximidade que as ondas devem ter entre si. |
|
Perspectiva
|
| ▪ | Horizontal: determina o ponto de fuga para uma perspectiva horizontal à direita (com valores positivos) ou à esquerda (com valores negativos). |
| ▪ | Vertical: determina o ponto de fuga para uma perspectiva vertical para baixo (com valores positivos) ou para cima (com valores negativos). |
|
Distorcer
|
| ▪ | Horizontal: determina a inclinação, dando valores positivos para manter a base do objeto fixa, e valores negativos para manter o topo do objeto fixo. |
| ▪ | Vertical: dê valores positivos para puxar o objeto para baixo no lado esquerdo e valores negativos para puxar para baixo à direita. |
|
|
Melhores práticas:
Maiores informações:
