Quando quiser definir a aparência de um website, o WebSite X5 permite que você escolha um modelo padronizado ou um completamente novo. Qualquer que seja o método que você escolher, você poderá usar as opções na janala Estrutura do Modelo para fazer todas as alterações que desejar em um modelo padronizado ou em um personalizado, ou criar seu próprio modelo novo a partir do zero. Não só você pode definir o layout do modelo gráfico para exibição em Desktop, como tabmém poderá especificar qual deverá ser a aparência do modelo nos diversos viewports de um website responsivo.
|
O Cabeçalho e o Rodapé do modelo podem ser completados com conteúdos tais como: textos, imagens, animações, álbuns de fotos, campos de buscas e links. As opções para eles estão na janela Conteúdo do Modelo, que se abre quando você clica no botão Avançar.
|
Para facilitar seu trabalho, a janela Estrutura do Modelo oferece uma Pré-visualizar que mostra uma representação gráfica da página. Você pode escolher qual parte da página quer alterar a partir da lista, ou clique na pré-visualização para editá-la e ver as alterações aparecerem à medida em que for trabalhando.
Além disso, se você estiver trabalhando em um website responsivo, a janela também exibirá uma Barra Responsiva que repete as informações fornecidas na janela Resoluções e Design Responsivo.
A Barra Responsiva informa todos os breakpoints que tiverem sido estabelecidos e, consequentemente, identifica os intervalos: clique em um intervalo para selecioná-lo e prossiga para definir o modelo para o viewport correspondente.
Uma vez que tenha selecionado o viewport no qual trabalhará, poderá escolher a área da página a ser alterada a partir da lista ou clicando diretamente nas diversas áreas da estrutura do modelo na pré-visualização da página.
É aconselhavel trabalhar de acordo com uma determinada ordem, primeiro definindo o modelo para o viewport de Desktop e daí as diversas versões dele, com as alterações que forem necessárias para todos os outros casos, até que tenha atingido o viewport para celular.
Antes de começar a criar seu modelo personalizado, você precisa especificar o Tipo de estrutura, que significa se terá uma barra lateral ou não, além do cabeçalho e rodapé.
|
Cabeçalho e rodapé
|
|
Cabeçalho, rodapé e barra lateral à esquerda
|
|
Cabeçalho, rodapé e barra lateral à direita
|
|
Quando você tiver escolhido a estrutura do modelo, você deverá selecionar a Seção da página onde quer trabalhar. As páginas são divididas nas seguintes seções:
|
Fundo da página: é a área em torno da página. Ela fica visível quando a janela do navegador tem uma resolução maior do que a que foi configurada para o próprio website.
|
|
Fundo do Cabeçalho: é a parte do Fundo da página que fica atrás do Cabeçalho.
|
|
Cabeçalho: o cabeçalho (header) fica no alto da página. Normalmente ele contém principalmente elementos gráficos, e é o local ideal para colocar o título e o sub-título do website, um logo da empresa, campos de busca, o menu principal de navegação e menus de serviço com links para elementos como mapa do site e opções de idioma.
|
|
Conteúdo da página: esta seção contém o conteúdo da página propriamente dito, e quaisquer menus de navegação e sub-menus, se você os tiver.
|
|
Rodapé: esta seção fica no pé da página e, como o cabeçalho (header), é basicamente composto de elementos gráficos. Ele encerra visualmente a página. Ele geralmente é utilizado para colocar observações, isenções de responsabilidade, indicadores de direitos autorais (copyrights), cnpj, endereços de email, etc.
|
|
Fundo do Rodapé: é a parte do Fundo da página que fica atrás do Rodapé.
|
|
Barra lateral: esta opção só fica disponível se você tiver selecionado um tipo de estrutura que a contenha. É uma coluna à esquerda ou à direita do conteúdo da página e pode ser usada para criar um menu de navegação vertical.
|
|
Se você configurar o Fundo do Cabeçalho ou o Fundo do Rodapé como Transparente, eles serão tratados como parte do Fundo da página e terão exatamente a mesma aparência. Se não forem Transparente então o Cabeçalho e/ou o Rodapé serão exibidos como faixas que cobrem toda a largura da janela do navegador.
|
|
Você pode configurar as seguintes Propriedades Gráficas para as diversas áreas da página:
| ▪ | Cor: indica a cor a ser usada como plano de fundo. |
| ▪ | Arquivo de imagem: indica o arquivo (.JPG, .GIF, .PNG.) da imagem a ser usada como plano de fundo. você pode selecionar a imagem na biblioteca online, usando o botão  , ou nas suas pastas offline usando o botão  Seleção de arquivo. |
| ▪ | Repetir: indica se a imagem de fundo deverá ser repetida. Imagens podem ser repetidas horizontalmente, verticalmente ou em ambas direções para tomar todo o espaço disponível. Se você estiver trabalhando no Fundo da página a imagem pode ser redimensionada para cobrir o fundo por inteiro. Neste caso, as proporções originais podem não ser mantidas. |
| ▪ | Alinhamento: indica como a imagem deve ser alinhada na área específica da página. |
A seguinte opção também está disponível para o Fundo da página:
| ▪ | Imagem de fundo fixa: se você selecionar esta opção, a imagem de fundo da página fica fixa, mesmo quando o conteúdo da página é deslocado com as barras de rolagem. |
|
Você pode configurar o Tamanho de algumas áreas da página.
As seguintes opções podem ser exibidas, dependendo da área da página selecionada:
| ▪ | Largura: fornece a largura em pixels da área selecionada na página. Você não pode configurar este valor manualmente para a opção Conteúdo da página: ela é obtida automaticamente a partir da opção Resolução do site na janela Resoluções e Design Responsivo, se você estiver criando um website de Desktop, ou para um Viewport de Desktop, se for um website responsivo. |
| ▪ | Altura: dá a altura em pixels da área selecionada da página. |
| ▪ | Altura mínima: somente para a área Conteúdo da página, dá a altura mínima em pixels que a área com o conteúdo da página deve ter, independente da altura do conteúdo que for adicionado. |
| ▪ | Expandir para a largura da janela do navegador: esta opção só fica disponível para as seções Cabeçalho e Rodapé. Ela garante que o aspecto definido será aplicado à largura total da janela do navegador, e não somente à largura do conteúdo da página. |
|
Com todas essas opções disponíveis, praticamente não há limite para o tamanho e posição do menu horizontal dentro do cabeçalho, tornando possível obter resultados extraordinários.
|
|
Você pode definir as Propriedades do Conteúdo para algumas áreas da página.
A opção a seguir fica disponível para as áreas Fundo da página, e Conteúdo da página:
| ▪ | Margens: dá o valor em pixels para as margens (o espaço vazio entre a borda da área e seu conteúdo). |
A seguinte opção fica disponível para a área Fundo da página:
| ▪ | Alinhamento: ela especifica como a página deve ser alinhada na janela do navegador. |
A seguinte opção fica disponível para a seção Barra lateral:
| ▪ | Manter objetos à vista ao rolar as páginas: se esta opção estiver selecionada, a barra lateral (definida na janela Conteúdo do Modelo) permanece visível quando a página for rolada. |
|
Melhores práticas:
