Criação da página

Criação da página

Previous pageReturn to chapter overviewNext page
Exibir/Ocultar o texto oculto

Uma vez que tenha definido o Mapa do seu projeto, você pode começar a criar as diversas páginas que vão compor seu website. A janela Criação da página é onde você pode criar suas páginas e adicionar conteúdo a elas.

O caminho e o título da página em que você estiver trabalhando são indicados como Página atual.

Clique para expandir/recolherReferência: A tabela de layout da página

WebSite X5 usa uma tabela para tornar o layout de página mais fácil de trabalhar. A tabela básica tem 2 linhas por duas colunas (num total de 4 células): para criar sua página (adicionar conteúdo a ela), tudo o que você tem que fazer é arrastar um objeto da lista dos que estão disponíveis e soltá-lo em uma célula. Cada célula só pode conter um único objeto.

Se você quiser, poderá adicionar mais linhas e colunas à tabela básica, aumentando assim o número de células disponíveis para colocar conteúdo. Você também pode alterar a largura de cada coluna. Conforme veremos, poder modificar a diagramação da tabela da página e inserir objetos de modo que eles ocupem mais do que uma célula, confere uma grande liberdade de ação para criar layouts de página complexos e profissionais.

Observação: a tabela de layout de página não fica visível quando seu website for publicado na Internet. O único propósito da tabela é ajudar você a diagramar o conteúdo da sua página para obter o melhor efeito. A tabela de layout de página não se traduz em uma tabela de verdade no código HTML da página (com excessão de alguns pouquíssimos casos de combinações complexas de layout de página).

Conforme mencionado acima, uma célula na tabela de layout de página pode conter somente um único objeto, porém um objeto pode ocupar células adjacentes tanto horizontal quanto verticalmente, e pode até ocupar um espaço maior do que o espaço físico da página.

O modo em que as células são exibidas na tabela de layout de página muda de acordo com seu status:

Se a célula contiver um objeto que ainda não foi preenchido, o ícone do objeto é exibido na célula sobre um fundo cinza com linhas diagonais;
Se a célula contiver um objeto que já foi preenchido, o ícone do objeto é exibido na célula sobre um fundo azul;
Se a célula contiver o objeto selecionado, serão exibidos uma borda e controles de seleção.
Clique para expandir/recolherReferência: Os comandos da barra de ferramentas

A barra de ferrramentas fica imediatamente acima da tabela de layout de página, e contém os seguintes comandos:

Editar

Este comando abre uma janela onde você pode criar o objeto que foi selecionado na tabela de layout de página. A janela que se abre dependerá do tipo de objeto selecionado (texto, imagem, animação flash, etc.).

Estilo da célula

Este comando abre a janela Estilo da célula onde você poderá definir a aparência da célula atual.

Inserir Âncora

Este comando cria uma âncora e a associa com o objeto selecionado na tabela de layout de página. Se você clicar na seta ao lado do botão, verá um menu com as seguintes opções: Inserir Âncora..., Editar... e Remover.

Uma âncora é uma referência que ajuda a identificar a posição de um objeto dentro de uma página: é usado para criar links direcionados diretamente a um objeto.

Adicionar uma linha/Adicionar uma coluna

Você pode adicionar uma nova linha ou coluna à tabela de layout de página. Clique na seta ao lado do botão para indicar se a linha/coluna deverá ser adicionada antes ou depois da célula selecionada. O tamanho máximo da tabela de layout de página é de 64 linhas x 12 colunas.

Remover linha / Remover coluna

Estes comandos removem a linha/coluna selecionada da tabela de layout de página. O tamanho mínimo para uma tabela de layout de página é de 1 linha x 1 coluna (uma célula).

Responsivo

Este comando abre a janela Configurações para site responsivo onde você pode definir o comportamento de cada objeto com base na resolução da página.

Antes de poder usar as opções na janela Configurações para site responsivo, você precisa primeiro selecionar a opção Habilitar website responsivo na janela Configurações Gerais | Design Responsivo.

Clique para expandir/recolherReferência: A lista de objetos disponíveis

A lista de objetos disponíveis fica ao lado da tabela de layout de página. Para inserir um objeto em uma página, selecione seu ícone na lista e arraste & solte na célula apropriada dentro da tabela de layout de página.

Os objetos são organizados em categorias, para facilitar a seleção, e você pode usar os seguintes comandos para especificar como eles deverão ser exibidos:

Lista de categorias

Exbibe uma lista das categorias de Objetos: você pode escolher se quer exibir somente os Objetos Principais, os que estão em categorias específicas, ou os objetos em Todas as categorias.

Exibir Gerenciamento de Objetos

Abre a janela Gerenciamento de Objetos onde você pode trabalhar nos objetos nas diversas categorias.

Os Objetos Principais são aqueles que são usados com maior frequência nas páginas do website, e eles já estão instalados com o programa. A lista dos Objetos Principais inclui:

 

Além dos Objetos Principais, também é possível instalar e usar diversos Objetos Opcionais, para adicionar determinados tipos de conteúdo às páginas. Você pode trabalhar nos objetos opcionais na janela Gerenciamento de Objetos.

Uma vez que tenha inserido um objeto na tabela de layout de página, clique no botão (ou dê um duplo-clique no objeto) para abrir a janela que irá criá-lo de fato.

Observações sobre conversão: o Objeto Rede Social

Nas versões 10 e 11 do WebSite X5 a lista de objetos principais incluía o Objeto Rede Social que permitia usar os plugins fornecidos por algumas das principais redes sociais (Facebook, Google+, Twitter, Pinterest) para que seu conteúdo pudesse ser compartilhado uma vez que seu website estivesse online.

Na versão atual 12, este objeto já não está mais disponível na lista de objetos principais, mas foi substituído por uma série de objetos opcionais específicos. Esses objetos opcionais oferecem maiores possibilidades para personalizaç~e e, consequentemente, permitem resultados melhores.

Se você usar a versão 12 para abrir um projeto que tenha sido criado com a versão 10 ou 11, e o Objeto Rede Social tiver sido usado no projeto, ele será automaticamente convertido para um Objeto código HTML com o código necessário para implementar a função original.    

 

 


Melhores práticas:

-

Como criar uma página usando a tabela de layout de página