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/recolher

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, de modo a ocupar mais espaço na 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:

Clique para expandir/recolher

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.

Para facilitar o trabalho na tabela de layout de página, todas as linhas (fileiras) na tabela são numeradas (no lado esquerdo) e os cursores de largura de coluna aparecem junto à borda inferior.

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:

Conteúdo

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, etc.).

Estilo

Este comando abre a janela Estilo do objeto onde você pode definir a aparência do objeto selecionado na tabela de layout de página.

Margens

Abre a janela Margem e Alinhamento: usando as opções disponíveis, você poderá definir o valor em pixels para as margens externa e interna do Objeto em questão, bem como alinhar o mesmo na vertical ou na horizontal em relação à célula onde ele estiver contido (veja O Box Model no WebSite X5).

Ampliar

Permite ampliar o Objeto selecionado para que preencha toda a largura da página (determinado pelo Modelo) e ocupar todo o espaço disponível na janela do navegador.

O botão fica sempre ativado, mas só terá efeito de verdade se o objeto selecionado for o único presente na linha que ocupa. Na grade do layout de página, os objetos para os quais o recurso Ampliar tiverem sido acionados são facilmente reconhecíveis  já que eles ficam mais largos que as colunas que formam a página. Ao clicar em Ampliar, uma segunda vez o comportamento do objeto volta ao normal, o que significa que ele se adaptará à largura da página em vez de se adaptar à largura da janela do navegador.

Efeito

Este comando abre a janela Efeito revelação onde você pode especificar a transição a ser associada ao objeto selecionado na tabela de layout de página.

Atribui uma Âncora ao Objeto selecionado

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 antes da célula selecionada/Adicionar uma coluna antes da célula selecionada

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 a linha selecionada/Remover a coluna selecionada

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).

Formatos de linhas

Este comando abre a janela Formatos das linhas onde você pode configurar o formato da linha que contém os objetos.

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 que possa usar as opções na janela Configurações para site responsivo, é preciso primeiro escolher se vai criar um website responsivo, selecionando a opção para fazer isto na janela Resoluções e 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.

Para facilitar a escolha mais adequada para cada objeto, você pode filtrar e usar as seguintes opções:

Lista de filtragem

Esta opção exibe uma lista com os filtros disponíveis para os objetos selecionados que são usados para um propósito específico. Você pode, por exemplo, exibir todos o Main Objects Page ou o Main Objects model.

Exibir Gerenciamento de Objetos

Abre a janela Gerenciamento de Objetos onde você pode instalar, desinstalar e atualizar todos os objetos que não são incluídos na instalação inicial do Programa.

Os objetos no Main Objects Page e no Main Objects model são:

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

 


Melhores práticas:

-

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

-

Como trabalhar no Estilo do objeto

-

Como trabalhar no Formatos das linhas


Maiores informações:

-

O Box Model no WebSite X5