Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

Trabalhar com páginas-mestre hierárquicas

O Muse permite criar páginas-mestre que são aplicadas à outras páginas-mestre. As páginas-mestre hierárquicas funcionam de modo semelhante à aplicação das páginas-mestre em uma página no modo de exibição Plano. Nas versões anteriores do Muse, você podia criar várias páginas-mestre, mas só podia aplicar uma página-mestre com um conjunto de elementos de página por vez a uma página da Web.

Anteriormente, se você quisesse criar um site com duas seções que fossem semelhantes, mas tivessem aparências distintas e exclusivas, poderia duplicar uma página-mestre, alterá-la ligeiramente e aplicá-la a páginas específicas. Assim, com frequência, ambas as páginas-mestre continham alguns elementos iguais, portanto, sempre que o site era atualizado, era necessário editar o conteúdo nas duas páginas-mestre para manter todos os elementos sincronizados.

Usando o Muse 4.0 e versões superiores, agora você pode criar uma página Mestre A que contenha os elementos compartilhados exibidos em várias páginas-mestre (como a adição do fundo e do rodapé, conforme descrito nas seções anteriores) e depois criar mais páginas-mestre que herdam todos os elementos da página Mestre A, além de conter os elementos exclusivos da primeira seção. Se você criar uma terceira página-mestre, ela poderá usar os elementos da página Mestre A, além de todos os elementos exclusivos da segunda seção.   

A vantagem de usar páginas-mestre hierárquicas é que elas lhe permitem limitar a ocorrência de um elemento em uma instância. Ao reprojetar um site, você só terá que editar cada elemento uma vez e todas as instâncias dele serão atualizadas no site automaticamente.

Gerencie e aplique páginas-mestre no modo de exibição Plano. Assim como você pode clicar e arrastar uma miniatura de página-mestre para uma miniatura de página a fim de aplicar a página-mestre a uma página, também pode criar várias páginas-mestre e clicar e arrastar uma página-mestre para outra. OU, se preferir, clique com o botão direito do mouse em qualquer miniatura de página ou página-mestre no modo de exibição Plano e use a opção Mestres no menu contextual exibido para definir a página-mestre.

Observe que, quando você passa o mouse sobre o nome de uma página ou página-mestre, uma dica de ferramenta exibe a hierarquia das páginas-mestre aplicadas a essa página ou página-mestre.

No momento, você criou a página Mestre A com o fundo lado a lado de preenchimento do navegador e o conteúdo do rodapé. Na próxima seção, você criará uma nova página-mestre que herda o conteúdo da página-mestre A e depois adicionará o cabeçalho, portanto, poderá aplicá-lo às páginas do site. Siga estas etapas:

  1. Ao visualizar o mapa do site no modo de exibição Plano, passe o cursor sobre a miniatura da página Mestre A para ver os botões do sinal de adição aparecerem nos dois lados. Clique no sinal de adição à direita da página Mestre A para criar uma nova página-mestre. Por padrão, a nova página-mestre se chama Mestre B.
  2. Clique duas vezes no campo de texto Mestre B abaixo da miniatura para editá-lo. Digite um nome mais descritivo para a nova página-mestre que você acabou de criar: Principal.
  3. Clique com o botão direito do mouse na miniatura da página-mestre Principal e escolha Mestres > Mestre A no menu contextual exibido.
Neste tutorial, você se familiarizará com a Área de trabalho do Adobe Muse e aprenderá como criar um site completo sem escrever nenhum código. Você também compreenderá como criar um mapa do site, passando pelas páginas-mestre e também pelas opções de preenchimento do navegador no Muse.
Escolha a Mestre A no menu para aplicá-la à página-mestre Principal.

Observe que, após a aplicação da página Mestre A à página-mestre Principal, a miniatura da página-mestre Principal será atualizada para ter a mesma aparência. O rótulo azul abaixo da miniatura da página-mestre Principal diz [Mestre A], porque você a aplicou à página-mestre Principal na etapa 3.

É importante destacar que a página-mestre Principal na verdade não contém os elementos da Mestre A - você não duplicou a Mestre A simplesmente. Em vez disso, você definiu a página-mestre Principal para se vincular à página Mestre A, o que significa que qualquer conteúdo adicionado à Mestre A também aparecerá automaticamente na página-mestre Principal.

Conforme mencionado anteriormente, o interessante em relação aos mestres hierárquicos é que o rodapé, o menu e o fundo ainda existem apenas na página Mestre A. Posteriormente, se um cliente solicitar o uso de outro fundo lado a lado, você poderá atualizar a página Mestre A e a página-mestre Principal será atualizada automaticamente.

Posteriormente neste tutorial, você criará duas outras páginas-mestre para aparências diferentes nas duas seções do site distintas. No entanto, por enquanto, você pode atualizar as páginas no modo de exibição Plano para usar a nova página-mestre Principal, em vez de usar a página Mestre A.

  1. Clique e arraste a página-mestre Principal para a miniatura da página alimentos no canto superior esquerdo. Observe que, à medida que você arrasta e solta a página-mestre Principal para a miniatura da página alimentos, o texto azul abaixo da miniatura da página alimentos é atualizado de [Mestre A] para [Principal].

Essa é a maneira mais comum de aplicar páginas-mestre a páginas no modo de exibição Plano, mas você também pode tentar aplicá-las usando o menu contextual:

  1. Clique com o botão direito do mouse na miniatura da página eventos e escolha Mestres > Principal no menu contextual exibido.
Neste tutorial, você se familiarizará com a Área de trabalho do Adobe Muse e aprenderá como criar um site completo sem escrever nenhum código. Você também compreenderá como criar um mapa do site, passando pelas páginas-mestre e também pelas opções de preenchimento do navegador no Muse.
Use o menu contextual para definir Principal como a página-mestre da página eventos.

  1. Usando seu método favorito (descrito nas etapas 4 e 5), defina Principal como a página-mestre das três páginas restantes: início, sobre e visitas.

Após a realização dessa alteração, todos os rótulos de texto azuis abaixo de cada miniatura de página agora deverão dizer [Principal]. Se você passar o cursor sobre qualquer um dos rótulos azuis, uma dica de ferramenta será exibida para mostrar a hierarquia das páginas-mestre aplicadas.

Neste tutorial, você se familiarizará com a Área de trabalho do Adobe Muse e aprenderá como criar um site completo sem escrever nenhum código. Você também compreenderá como criar um mapa do site, passando pelas páginas-mestre e também pelas opções de preenchimento do navegador no Muse.
Uma dica de ferramenta útil descrevendo a hierarquia aparece quando você passa o mouse sobre o rótulo.

Neste exemplo, a hierarquia tem apenas um nível de profundidade. Isso significa que a página-mestre Principal está herdando o conteúdo da página Mestre A. Mas esteja ciente de que você poderá criar uma cadeia de páginas-mestre, se desejar. Por exemplo, você poderia criar uma página-mestre chamada Cabeçalho, apenas com o conteúdo do cabeçalho, e depois criar outra página-mestre chamada Rodapé, que herda o conteúdo da página-mestre Cabeçalho, e depois outra página-mestre chamada Principal, que herda todos os itens na página-mestre Rodapé (que também inclui o cabeçalho). Dependendo do design de um site e do seu conhecimento de que alguns elementos provavelmente serão alterados, você poderá criar os níveis de herança para configurar vários níveis de profundidade. Compartimentalizar o design dessa forma é quase como criar símbolos, pois você pode isolar partes específicas de um design e depois localizar facilmente e editar essa parte depois, conforme necessário.

Siga para o próximo tutorial, Uso do Muse para criar seu primeiro site, Parte 2, onde você aprenderá a trabalhar com widgets (recursos de site interativos previamente integrados que podem ser arrastados para páginas). Os widgets permitem adicionar rapidamente funções avançadas a páginas sem escrever nenhum código. Você verá como editar o comportamento e a aparência de widgets para personalizar o modo como são exibidos no design do site.

Adicionar conteúdo de cabeçalho à página-mestre principal

Agora que finalizou o rodapé adicionando um widget de Menu à página-mestre principal, você adicionará a navegação de nível superior. Siga estas etapas para adicionar conteúdo à área de cabeçalho.

  1. No modo de exibição Plano, clique duas vezes na miniatura da página-mestre principal para abrir a página e começar a editá-la no modo de exibição Design (se ainda não estiver aberta).
  2. Use a ferramenta Retângulo para desenhar um retângulo que começa no canto superior esquerdo da área visível do navegador e abrange a largura inteira, até o canto superior direito. Use a ferramenta Seleção para arrastar as alças na parte superior, esquerda e direita do retângulo até visualizar a borda vermelha brevemente, indicando que o retângulo está definido com largura de 100%, da mesma forma que criou o rodapé.
fig_30_building
Desenhe um retângulo que abrange toda a parte superior da janela do navegador.

 

Depois que você arrastar as alças, o tamanho do retângulo deverá ser de aproximadamente 1160 pixels de largura por 253 pixels de altura. O valor horizontal X é -100, significando que o canto superior esquerdo do retângulo está localizado 100 pixels no canto superior esquerdo da página. O valor Y é 0 (o que significa que o canto superior esquerdo do retângulo corresponde ao canto superior esquerdo da página verticalmente). Para definir esses valores com exatidão, examine os campos do painel Transformação ou painel de controle, quando o retângulo estiver selecionado.

  1. Defina a largura do traço como 0 e use o menu Preenchimento para definir a cor de preenchimento como Nenhuma. Clique na pasta à direita da seção Imagem e navegue para selecionar uma imagem chamada tile-header.png. Defina o menu Ajuste como blocos horizontais.
fig_31_building
Use o menu Ajuste para colocar a imagem de fundo lado a lado horizontalmente.

 

Embora o cabeçalho seja composto por um único retângulo, a imagem de fundo lado a lado horizontalmente que o preenche cria a impressão de que um retângulo cinza existe acima de um retângulo preto.

  1. Escolha Arquivo > Posicionar ou use o atalho de teclado: Command+D (Mac) ou Control+D (Windows) para abrir a caixa de diálogo Importar.
  2. Navegue para selecionar o arquivo denominado bg-ribbon.png localizado na pasta arquivos de amostra. Clique em Abrir para selecioná-lo e fechar a caixa de diálogo Importar.
  3. Clique uma vez no centro do retângulo de cabeçalho, na parte superior da página. Isso coloca uma única instância do arquivo bg-ribbon.png em suas dimensões originais.
  4. Use a ferramenta Seleção para alinhar o gráfico da faixa laranja para que seja centralizado verticalmente na parte superior de cabeçalho e inclua a largura da página.
fig_32_building
Gráfico de faixa laranja posicionado de modo que seja centralizado no cabeçalho.

 

O gráfico de faixa laranja formará o fundo do menu de nível superior que você incluirá na próxima seção.

Duplicar uma página-mestre

O conteúdo do cabeçalho na página-mestre principal foi concluído. Embora seja possível usar apenas a página-mestre principal para cada página no site, o design desse site tem duas seções. O design da página-mestre principal será usado para as páginas inicial e de visita. Uma segunda página-mestre ligeiramente diferente será usada para as páginas alimentos, eventos e sobre.

Siga estas etapas para duplicar a página-mestre principal:

  1. No modo de exibição Plano, clique com o botão direito do mouse na miniatura da página-mestre principal.
  2. No menu contextual exibido, escolha Duplicar página.
fig_38_building
Use o menu para duplicar a página-mestre principal existente.

 

Uma nova página-mestre aparece à direita da página-mestre principal, com o nome padrão: Cópia principal. Como você duplica a página-mestre principal, a nova página-mestre também se baseia na página-mestre A.

  1. Clique duas vezes no campo Nome abaixo da página-mestre que você acabou de criar e renomeie-o: Primeiro plano.

Na próxima seção, você aprenderá a definir a disposição de elementos em uma página-mestre, de modo que, em vez da exibição dos itens sempre abaixo, eles poderão ser exibidos acima dos elementos de página. Neste ponto, é uma boa hora para salvar seu trabalho.

  1. Escolha Arquivo > Salvar site.

Uma das vantagens de criar uma página-mestre duplicada é que você pode definir parte do conteúdo para exibição acima de outro conteúdo de página, como se você tivesse selecionado Organizar > Trazer para frente. Este comportamento de "primeiro plano" é desejado para as páginas alimentos e eventos.

A capacidade de definir a ordem de empilhamento dos elementos da página-mestre é um novo recurso disponível no Muse 4.0. Anteriormente, era preciso colocar elementos de cabeçalho ou de rodapé em cada página, em vez de criar uma página-mestre, se você quisesse colocar elementos comuns de site acima de outro conteúdo no layout de página.

Definir elementos nas páginas-mestres para exibição em primeiro plano

No Muse, a interface de exibição Design permite a você selecionar um elemento de página e escolher Objeto > Trazer para frente, Trazer para primeiro plano, Enviar para trás ou Enviar para segundo plano para exibir um item acima ou abaixo de outro na página. (Você também pode clicar com o botão direito do mouse em um elemento ou grupo e escolher Organizar > Trazer para frente, Trazer para primeiro plano, Enviar para trás ou Enviar para segundo plano para definir a ordem de empilhamento).

Durante o design de sites com versões anteriores do Muse, o comportamento padrão é que os elementos em uma página-mestre sempre sejam exibidos atrás de todos os elementos em uma página quando ela é renderizada. Essa disposição em segundo plano às vezes era problemática (dependendo do design do site), pois a única solução alternativa envolvia a cópia e a colagem dos elementos que você colocaria normalmente em uma página-mestre em todas as páginas do site em que quisesse que fossem exibidos sempre em primeiro plano.

O Muse inclui a nova capacidade de controlar a organização de elementos nas páginas-mestres. Agora, em vez de sempre exibir tudo em uma página-mestre atrás dos elementos de página, você poderá selecionar elementos em páginas-mestres e ajustá-los para exibi-los como um elemento de primeiro plano. Os itens em uma página-mestre definidos como elementos de primeiro plano sempre serão exibidos acima de todos os elementos da página.

Essa nova opção está disponível por meio de Objeto > Mover para > Primeiro plano de mestre. Além disso, você pode clicar com o botão direito do mouse em qualquer elemento no modo de exibição Design ao editar uma página-mestre e escolher Mover para > Primeiro plano de mestre no menu contextual exibido.

Neste projeto de exemplo, o design exige que o conteúdo nas páginas inicial e de visita use a ordem de empilhamento padrão (os elementos da página são exibidos sobre o cabeçalho da página-mestre principal), mas as páginas alimentos, eventos e sobre não.

Para as páginas alimentos e de visitas, você atualizará a página-mestre de primeiro plano para que o conteúdo do cabeçalho seja exibido em primeiro plano, acima do conteúdo da página, à medida que a rolagem de páginas ocorrer. Siga estas etapas:

  1. No modo de exibição Plano, clique duas vezes na miniatura da página-mestre de primeiro plano para abrir a página e começar a editá-la no modo de exibição Design (se ainda não estiver aberta).
  2. Use a ferramenta Seleção para clicar e arrastar para selecionar todo o conteúdo do cabeçalho, incluindo o retângulo com o plano de fundo lado a lado, o gráfico de faixa laranja inserido, o widget de Menu e o logotipo de GIF animado no centro.
  3. Com todo o conteúdo do cabeçalho selecionado, clique com o botão direito do mouse e escolha Mover para > Plano de fundo mestre. Observe que, diferentemente da borda azul normal de objetos selecionados, os itens definidos para exibição em primeiro plano têm uma borda vermelha quando selecionados.
fig_39_building
Mova o conteúdo do cabeçalho para o primeiro plano usando o menu contextual.

Isso garante que o cabeçalho será exibido sobre os elementos de página nas páginas em que a página-mestre do primeiro plano é aplicada.

  1. Com o cabeçalho inteiro ainda selecionado, você vai fixá-lo na parte superior da página para que, mesmo se a página for rolada, o cabeçalho não seja rolado com ela. Você saberá mais sobre como fixar objetos na parte 7, mas por enquanto, clique na posição do pino central superior no painel de controle para fixar o cabeçalho no local.
fig_40_building
Fixe o cabeçalho selecionado escolhendo a posição central superior.

  1. Clique e arraste a página-mestre de primeiro plano para a página alimentos, para aplicá-la. Repita essa etapa mais duas vezes, para aplicar a página-mestre de primeiro plano às páginas eventos e sobre.

Depois dessa alteração, o texto do rótulo azul exibirá as palavras [Primeiro plano], indicando que as páginas alimentos, eventos e sobre estão usando a página-mestre de primeiro plano agora. Se você passar o mouse sobre o rótulo azul [Segundo plano], uma dica de ferramenta indicará que a página-mestre segundo plano se baseia na página-mestre A.

Ao criar seus próprios projetos de site, você fará experiências com o novo recurso Mover para o primeiro plano para definir elementos nas páginas-mestres para exibição em primeiro plano. Posteriormente nesta série de tutoriais, você finalizará o design das páginas alimentos e eventos e verá como a configuração de primeiro plano assegura que o cabeçalho seja exibido acima de outro conteúdo na página.

Na próxima seção deste tutorial, Criando seu primeiro site com o Muse Parte 4, você verá como trabalhar com HTML incorporado para exibir código copiado de outros sites. Você também aprenderá a adicionar um Widget de composição de negatoscópio para criar a página inicial.

Usar várias páginas-mestre e incorporar animações

Nesta seção, você aprenderá mais sobre como trabalhar com páginas-mestre e como pode exibir o conteúdo comum do site em várias páginas-mestre para gerar consistência, criando diferentes seções de um site. Você também aprenderá estratégias para mover elementos de páginas-mestre, porque, em alguns designs de site, pode ser útil criar várias páginas-mestre e inserir somente gráficos específicos em cada uma delas (como um site em quatro áreas codificadas por cor). Você também aprenderá a mover elementos que normalmente estão em uma página-mestre para uma página individual específica a fim de criar efeitos de design, como itens em camada, uma sobre a outra.

Editar conteúdo da página-mestre

Os objetos inseridos em uma página-mestre serão exibidos em camadas abaixo do conteúdo inserido em uma página individual. Por exemplo, os objetos que você inserir no cabeçalho ou no rodapé da página inicial aparecerão em camadas sobre os fundos inseridos no cabeçalho e no rodapé da página-mestre. Por isso, você pode encontrar situações em que é necessário mover elementos de uma página-mestre e inseri-las em páginas individuais para que sejam exibidos acima de outros elementos da página.

O conteúdo adicionado a páginas-mestre deve ser editado depois, abrindo a página-mestre. Se você abrir uma página que esteja associada a uma página-mestre e tentar editar o cabeçalho, o rodapé ou outro conteúdo da página-mestre, ela parecerá estar bloqueada. Você pode usar duas estratégias diferentes quando precisar alterar o conteúdo em uma página-mestre:

  1. Clique duas vezes na miniatura da página-mestre no modo de exibição Plano e edite o conteúdo da página-mestre no modo de exibição Design.

  2. Clique duas vezes na miniatura da página-mestre no modo de exibição Plano para abri-la no modo de exibição Design. Selecione os elementos que deseja editar (mas que precisam estar acima dos outros elementos, posicionando-os em uma página do site) e escolha Editar > Recortar ou use os atalhos de teclado: Command-X (Mac) ou Control-X (Windows).

  3. Retorne ao modo de exibição Plano e clique duas vezes na página que abrangerá o conteúdo (anteriormente, página-mestre). Escolha Editar > Colar no local. Isso garante que os elementos que você recorta da página-mestre sejam posicionados no local idêntico em uma página normal. Se desejar, você pode abrir várias páginas e escolher Editar > Colar no local para distribuir o conteúdo que estava na página-mestre para várias páginas diferentes no site.

Conforme necessário, também é possível duplicar uma página-mestre existente. Você pode configurar seu site para que a maioria das páginas use uma mestre, enquanto uma página especial usa uma versão duplicada semelhante da mestre (com elementos específicos copiados dessa página-mestre duplicada para a página especial do local). Para saber mais sobre a duplicação de páginas-mestre, consulte a próxima subseção.

Quando o objeto estiver em páginas individuais, e não na página-mestre, você pode editar o objeto por a página, conforme necessário, e verificar se o objeto aparece na parte superior.

Neste projeto de amostra, o site está exibindo atualmente o logotipo da Kevin's Koffee Kart (bicicleta vermelha com banner) diretamente acima da navegação do site no cabeçalho. O conteúdo do cabeçalho e do rodapé são exibidos automaticamente em cada página, porque, por padrão, a Página inicial (e cada página adicional criada) é vinculada à página-mestre A, que possui este conteúdo. Em muitos casos, você pode optar por criar sites que usem a mesma página-mestre para criar consistência no site.

Entretanto, esse site tem um logotipo animado exclusivo que é exibido apenas na Página inicial. Se você revisar o exemplo ao vivo do site Kevin's Koffee Kart, observará que, na Página inicial, o logotipo de bicicleta vermelha é animado uma vez, quando a página é carregada pela primeira vez, como se a bicicleta estivesse em movimento na página, no lado esquerdo. Ao clicar para ir para outras páginas, você verá que a animação ocorre apenas na Página inicial, todos os outros logotipos nas páginas do site são estáticos.

Na subseção a seguir, você aprenderá como criar uma página-mestre duplicada e como atribuir páginas para usar uma página-mestre específica no modo de exibição Plano.

Duplicar e excluir páginas-mestre

  1. Clique no link Plano para acessar o modo de exibição Plano. Encontre a miniatura-mestre A, localizada na parte inferior da interface do modo de exibição Plano.

  2. Passe o cursor sobre a miniatura-mestre A e observe que, ao rolar sobre ela, você verá os mesmos ícones de adição (+) exibidos quando adiciona novas páginas ao mapa do site. Clique no sinal de adição (+) à direita da miniatura-mestre A. Você pode usar essa técnica sempre que quiser criar uma nova página-mestre desde o zero. Observe que a miniatura está vazia, significando que não possui o conteúdo adicionado à página-mestre A. A nova página-mestre é chamada de Mestre B por padrão, embora você possa clicar no campo abaixo da miniatura para renomeá-la conforme desejado.

    Nesse caso, em vez de criar uma nova página-mestre em branco, você criará isso uma duplicata da página-mestre A existente.

  3. Clique no ícone X no canto superior direito da página-mestre B para excluí-la. (Se você excluir acidentalmente uma página-mestre existente usando essa estratégia, escolha Editar > Desfazer exclusão da página-mestre para restaurá-la).

  4. Clique com o botão direito na miniatura de página-mestre A e escolha Duplicar página no menu contextual que é exibido. É exibida uma nova miniatura, exibindo uma página-mestre duplicada, denominada cópia Mestre A.

    fig_59_getting
    Duplique a página-mestre A no modo de exibição Plano.

  5. Clique no campo abaixo da miniatura de cópia-mestre A e renomeie a página-mestre duplicada: MasterFlash. Você usará essa página para adicionar conteúdo de mídia avançada que é animado na página inicial exclusivamente, enquanto todas as outras páginas continuarão apontando para a página-mestre A, que exibe uma versão estática do logotipo no cabeçalho.

  6. Clique com o botão direito na miniatura de Página inicial. No menu que é exibido, escolha mestres > MasterFlash. Esta operação associa a página-mestre MasterFlash à Página inicial.

    Observação:

    Como alternativa, você pode arrastar a miniatura de MasterFlash sobre a miniatura da página inicial para aplicá-la.

Depois de aplicado, o nome da página-mestre MasterFlash é exibido entre parênteses abaixo da miniatura da Página inicial no modo de exibição Plano.

Clicando em Visualizar, você não notará nenhuma diferença na Página inicial. Como o MasterFlash é uma cópia duplicada do arquivo-mestre A, a Página inicial aparece como antes e o logotipo estático é exibido. Entretanto, na próxima subseção, você editará o conteúdo de MasterFlash para adicionar a animação que ocorrerá apenas na Página inicial.

Usar páginas-mestre duplicadas e quase iguais (mas ligeiramente diferentes) é uma ótima forma para diferenciar uma seção específica de um site, além de tornar a Página inicial exclusiva, conforme descrito para este projeto.

Neste tutorial, você aprenderá a usar páginas-mestre. Vamos examinar e desconstruir três layouts de site e explorar como você pode obter efeitos interessantes e consistência do site usando elementos comuns em uma página-mestre.

Mas, antes, o que é uma página-mestre? Uma página-mestre permite aplicar elementos comuns, como cabeçalhos, rodapés, logotipos e navegação a várias páginas em seu site. Você pode usar uma página-mestre para o site ou configurar várias páginas-mestre para que possa aplicar rápida e consistentemente estilos exclusivos a diferentes seções do site.

Por padrão, o Muse cria uma página inicial em branco e uma página-mestre em branco quando você cria um novo site. Essas páginas são o ponto de partida para qualquer site. É possível planejar o mapa do site utilizando páginas em branco e depois aplicar páginas-mestre, ou criar seu site a partir da página-mestre, aplicando-a a uma única página (a página inicial) e depois criando novas páginas com base nesse design.

Desconstruir layouts de site

Uma ótima maneira de aprender novas estratégias de design de site é revisar os diferentes layouts de página-mestre. Neste artigo, vamos examinar três layouts de site diferentes criados no Muse e explorar como eles são originalmente criados.

Se quiser acompanhar e abrir os itens de cada um desses sites de amostra, baixe os arquivos de amostra, descompacte o arquivo ZIP e clique duas vezes em cada arquivo .muse para abri-lo no Muse.

Ao conferir cada um desses sites de amostra, observe alguns dos recursos usados para criar designs de site que são fáceis para navegar e ajudam a orientar os visitantes enquanto descobrem o conteúdo do site:

  • Configurar propriedades do site para definir as dimensões de todas as páginas
  • Usar guias para definir as regiões de cabeçalho e rodapé na página-mestre
  • Fixar os objetos na janela do navegador, para posicioná-los fora do layout da página
  • Definir preenchimento de imagem de fundo para posições roláveis ou fixas a fim de criar efeitos interessantes
  • Alongar retângulos para exibir com 100% de largura a fim de expandir a largura do navegador
  • Adicionar widgets sanfonados e widgets de apresentação de slides exibem conteúdo de página interativa
  • Personalizar e definir o estilo de widgets de menu para fornecer navegação do site
  • Criar links de ancoragem para saltar vertical ou horizontalmente para seções de páginas específicas
  • Colar o código de sites de terceiros (HTML incorporado) para adicionar recursos em páginas

Ao visitar cada site de exemplo, tente rolar e redimensionar a janela do navegador para ver como o exemplo ao vivo funciona. Em seguida, abra cada arquivo .muse no Muse para ver como as páginas-mestre são usadas para padronizar os layouts do site e criar uma experiência on-line mais unificada.

Exemplo 1: Aventura feliz na montanha

fig01.master.b720

No primeiro exemplo, as imagens do rodapé são fixadas na parte inferior da janela do navegador. Além disso, o plano de fundo do rodapé é definido com 100% de largura para medir a parte inferior direita da página. Quanto mais o conteúdo da página rola para trás, o primeiro plano do rodapé cria um efeito de céu gradiente. Quando você clicar nos links de ancoragem à esquerda, a página se moverá verticalmente para a seção correspondente. Elementos gráficos semitransparentes e uma ordem estratégica de empilhamento ajudam a transmitir a experiência de voar em um balão.

Ao revisar o arquivo .muse para este site, observe o seguinte:

Na página-mestre, uma série de retângulos preenchidos de gradiente fornecem o índice para o contexto de página maior.

  • A página inicial inclui um gráfico de rodapé com uma imagem de fundo lado a lado horizontal para medir a largura de 100% que é fixada na parte inferior da janela do navegador. Um segundo gráfico de rodapé (o pico da montanha) é centralizado e também fixado na parte inferior do navegador, e é disposto para exibição acima do outro gráfico de rodapé lado a lado, escolhendo Organizar > Trazer para frente. Essa estratégia acomoda qualquer tamanho de monitor.
  • Os links de navegação no lado esquerdo saltam para ancorar as marcas adicionadas à página longa orientada verticalmente. Quando os visitantes clicam nos links, a página rola para exibir o conteúdo correspondente. O design é bem equilibrado e unificado à medida que novas seções do site são exibidas.
  • A seção de contato de página inicial inclui HTML incorporado para exibir elementos de formulário a fim de facilitar a comunicação com os visitantes e programar próximas aventuras.

Exemplo 2: Kevin's Koffee Kart

fig02.master.b720
Esse site de várias camadas usa um widget de menu e recursos HTML incorporados.

A página inicial do site de da Kevin's Koffee Kart inclui animações em Flash no cabeçalho e gráficos em nuvem fixados. Ao usar as barras de rolagem para navegar a página, observe que a imagem de fundo é fixada e não rola, mas o conteúdo da página rola para acima. Uma apresentação de slides é reproduzida automaticamente, alternando as imagens abaixo de um feed incorporado do Twitter em HTML.

A barra de menus no cabeçalho foi criada usando um widget de menu horizontal para criar botões de navegação do site persistentes que são atualizados automaticamente quando você adiciona novas páginas. Neste exemplo, o widget de Menu está configurado para exibir páginas de nível superior e de subnível.

Interaja com o menu e veja como cada página é carregada quando você clica nos botões. O cabeçalho e o rodapé são padrão em todas as páginas, mas as alturas de página variam de acordo com o conteúdo. O rodapé marrom consiste em dois retângulos com 100% de largura para ampliar toda a largura da janela do navegador que adicionam conformidade com cada página.

As seguintes convenções de design foram usados para criar o site da Kevin's Koffee Kart:

  • Esse site incorpora duas páginas-mestre semelhantes: a página-mestre sem a mídia Flash é aplicada à maioria das páginas do site e uma segunda página-mestre com o filme Flash é aplicada somente à página inicial. Ambas as páginas-mestre contêm rodapés com 100% de largura com bordas de design transparentes e usam o mesmo widget de Menu por questão de consistência. Após a criação da primeira página-mestre, os elementos são copiados e depois colados na posição na segunda página-mestre, para garantir que todos os elementos estejam perfeitamente alinhados.
  • As páginas são organizadas no modo de exibição Plano para criar seções de nível superior e subnível, que são refletidas nos itens suspensos do widget de Menu.
  • O mapa de imagem de fundo usado como preenchimento do navegador é definido para exibir o tamanho original, e não o bloco gráfico. É centralizado e ajustado para não rolar abaixo do conteúdo da página.
  • O preenchimento de fundo da página é branco sólido com uma leve transparência para permitir que a imagem do mapa de fundo seja mostrada.
  • A página inicial inclui duas imagens de nuvem semitransparentes afixadas no navegador. Role a página verticalmente para ver se os elementos fixados não se movem e permanecem na posição se você redimensionar a janela do navegador.
  • A página inicial usa HTML incorporado para exibir o conteúdo de feed do Twitter ao vivo.
  • A página do Koffee apresenta um widget sanfonado que expande e recolhe os painéis quando são clicados para exibir mais conteúdo em uma área compacta da página.
  • A página Origens apresenta um widget de slides em miniaturas para exibir uma galeria de fotos interativa. A página de Preparação usa navegação de marca de ancoragem para saltar para cada seção na página, e a página Kart Map inclui HTML incorporado para exibir um mapa de Latitude do Google ao vivo, com base na localidade atual do telefone celular usado para essa conta.

Exemplo 3: Mais que um quarteirão

fig03.master.b720
Gráficos fixados sobrepostos fortes formam o conteúdo da página de rolagem.

Ao visualizar o exemplo final, observe que os gráficos de criação estão fixados nos cantos superior direito e inferior esquerdo para formar o conteúdo da página. A criação no canto superior direito é disposta na frente para sobrepor acima do conteúdo da página, enquanto a criação na parte inferior esquerda é exibida abaixo da página.

O conteúdo da página é centralizado, semi- transparente e definido a partir dos elementos arquitetônicos com cantos arredondados. O conteúdo da página rola verticalmente e a altura flutua quando você clica nas páginas. Os links de rede social (Twitter, Facebook e YouTube) persistem no lado esquerdo da página para promover a vinculação cruzada e transmitem um design assimétrico consistente no site.

A página inicial apresenta uma galeria de fotos com navegação de botão Voltar e Avançar, que também está configurada também para reproduzir os slides lentamente caso o visitante não clique nos botões. A página Como chegar aqui inclui um mapa interativo criado com o código HTML incorporado copiado do Google Maps.

Ao revisar o arquivo .muse de origem para este exemplo, considere o seguinte:

Neste exemplo, quase todos os elementos comuns da página estão na página-mestre. Essa estratégia facilita a atualização do site e faz alterações no conteúdo da página individual.

A página-mestre contém um gráfico de fundo não rolável para a imagem de rodapé, que é fixado no lado inferior esquerdo do navegador. A página-mestre também contém o design de canto arredondado e página semitransparente com a navegação do site.

Todas as páginas do site têm um gráfico fixado no canto superior direito que é disposto para exibição na frente do conteúdo da página a fim de gerar a ilusão de perspectiva que é provocada pelos ângulos da construção de imagens.

O Muse é uma ferramenta de design intuitiva que permite colocar seus designs na Web. A disposição criativa de elementos em páginas-mestre e o conteúdo exclusivo exibido em cada página permitem criar layouts atraentes. Você está limitado apenas à sua imaginação enquanto cria sites inovadores para seus clientes.

Para obter mais dicas sobre como trabalhar com o Muse, visite a página Ajuda e tutoriais do Muse ou a página Eventos do Muse para obter webinários ao vivo e gravados.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online