Criar cabeçalhos e rodapés no Adobe Muse

Defina as regiões de cabeçalho e rodapé de seu site para adicionar menus, logotipos, avisos de copyright e muito mais no Adobe Muse.

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 página de Perguntas frequentes sobre o fim de serviço do Adobe Muse.

Com o Adobe Muse, você pode criar com simplicidade Cabeçalhos e Rodapés para páginas da Web. Recomendamos que você utilize elementos iguais para cabeçalho e rodapé para deixar a aparência de seu site consistente. Para tal, basta definir os elementos de Cabeçalho e Rodapé na página Mestre no Adobe Muse. Quando você fizer alterações na página-mestre, elas serão aplicadas a todas as páginas de seu site.

Quando um site é criado com HTML e CSS, com frequência, as páginas individuais têm alturas variáveis, com base no conteúdo exclusivo exibido em cada página. O Muse inclui recursos que permitem que as páginas de um site exibam tamanhos diferentes, com base no conteúdo exclusivo de cada página. É possível configurar regiões para que o cabeçalho sempre permaneça no lugar na parte superior e o conteúdo do rodapé sempre seja exibido diretamente abaixo do conteúdo da página, independentemente da altura de cada página.

Adicionar cabeçalho e rodapé a uma página

Antes de começar a definir as regiões de cabeçalho e rodapé da página, verifique se as guias de cabeçalho e rodapé estão exibidas. Se não forem, escolha Exibir >Mostrar cabeçalho e rodapé.

Como alternativa, você pode usar o menu Exibir no painel de Controle para ativar as guias Cabeçalho e rodapé.

Verifique se as guias Cabeçalho e rodapé estão ativadas.
Verifique se as guias Cabeçalho e rodapé estão ativadas.

Se preferir, clique com o botão direito do mouse no lado esquerdo do espaço de trabalho, fora da área da janela do navegador. Ative a opção Mostrar cabeçalho e rodapé no menu contextual exibido.

Trabalhar com guias e réguas

A régua também deve ser ativada para reposicionar as guias de cabeçalho e rodapé. A régua permite definir as guias para uma posição exata em pixels. Por padrão, as guias normais (que exibem o número de colunas definidas durante a criação do novo site) também são mostradas.

Cinco guias horizontais azuis abrangem a largura da página. Começando na parte superior, essas cinco guias são usadas para definir a parte superior da página, a borda mais baixa do cabeçalho, a borda superior do rodapé, a parte inferior da página da Web e a parte inferior da janela do navegador. Quando você arrasta as guias para definir essas áreas, uma dica de ferramenta descreve cada guia e seu local atual. Talvez você ache isso útil para aumentar o tamanho da página, para que seja possível ampliar e posicionar as guias com mais precisão.

As três guias intermediárias definem o conteúdo que será exibido nas áreas do cabeçalho e do rodapé. A região central restante é a área em que você adicionará o conteúdo exclusivo da página; essa área central é expandida para se ajustar à altura dos elementos colocados em cada página.

Você também pode selecionar os retângulos e os elementos da página. É útil usar as caixas delimitadoras dos elementos selecionados para ajudar a alinhar as guias ao definir as áreas de cabeçalho e rodapé.

Observação:

A parte inferior da janela do navegador determina a parte mais baixa da área de exibição quando um visitante visualiza o site em um navegador; dependendo do design, você pode definir uma cor do fundo ou imagem de fundo para o próprio navegador e definir a guia para a parte inferior da página acima da parte inferior da guia do navegador de modo a permitir que a cor ou a imagem do fundo apareça sob o conteúdo da página.

Definir elementos de cabeçalho e rodapé

Para definir elementos de cabeçalho e rodapé, siga estas etapas:

  1. Arraste tanto a guia da parte inferior da página quanto a guia da parte inferior do navegador para o mesmo local na parte inferior da página, logo abaixo do retângulo do rodapé, conforme mostrado na imagem abaixo.
Defina os elementos de cabeçalho e de rodapé no Adobe Muse
Defina os elementos de cabeçalho e de rodapé no Adobe Muse

  1. Selecione o retângulo no rodapé que contém a imagem de fundo lado a lado. Arraste a guia Rodapé até alinhá-la à parte superior do retângulo do rodapé.
  2. Deixe a guia Superior da página na extremidade superior (no local Y: 0 px). Arraste a guia Cabeçalho para baixo para escolher um nível desejado.

O conteúdo do cabeçalho será exibido na área entre a parte superior da página e a guia Cabeçalho.

Arraste a guia do Cabeçalho para definir a área de cabeçalho
Arraste a guia do Cabeçalho para definir a área de cabeçalho

A qualquer momento durante o processo de design, você poderá retornar à página Mestre A se precisar reajustar as guias para ajustar o conteúdo do cabeçalho e do rodapé.

Clique no link Plano ou clique na guia katiesCafe para retornar à exibição Plano.

Observe que todas as miniaturas de página no site agora exibem os elementos de design que você adicionou à página Mestre A vinculada.

Observe o cabeçalho e o rodapé especificados em todas as páginas vinculadas à Página mestre-A
O design da página-mestre A é exibido em todas as miniaturas de páginas vinculadas no modo de exibição Plano.

A qualquer momento durante o design de um site, as alterações feitas à página-mestre atualizam automaticamente as páginas vinculadas. As páginas-mestre facilitam a atualização ou a manutenção de um site, pois você pode atualizar uma página-mestre para alterar a aparência do site.

Inserir uma imagem para preencher o conteúdo do cabeçalho

Como o logotipo será exibido em cada página do site, é um candidato perfeito para inserir no cabeçalho da página-mestre.

  1. Escolha Arquivo > Posicionar. Ou, se preferir, use o atalho de teclado - Control+D (Windows) ou Command+D (Mac) - para inserir uma imagem.

  2. Na caixa de diálogo Importar que é exibida, navegue para selecionar o arquivo na pasta Kevins_Koffee_Kart nomeado Logo.png. Clique em Selecionar.

  3. Use a ferramenta Seleção para arrastar o logotipo para perto da parte superior da região do cabeçalho que você definiu anteriormente.

Em seguida, você inserirá outra imagem que servirá como gráfico de fundo do widget Barra de menus, que você adicionará na próxima seção.

  1. Escolha Arquivo > Inserir ou use o atalho de teclado do seu sistema operacional: Control+D (Windows) ou Command+D (Mac).

  2. Navegue até a pasta Kevins_Koffee_Kart e selecione o arquivo chamado top-nav.png.

  3. Clique uma vez na parte superior da página, na área definida anteriormente como o cabeçalho. Posicione a imagem acima do marcador do cabeçalho, para que apareça no mesmo local, acima do conteúdo da página inicial, em cada página.

  4. Use a ferramenta Seleção para arrastar o gráfico de faixa marrom que você acabou de inserir, de forma que os pneus de bicicleta vermelhos no logotipo estejam tocando a parte superior da faixa marrom. Essa disposição dá a ilusão de que a bicicleta está andando sobre a faixa marrom.

  5. Escolha Arquivo> Inserir novamente. Procure e selecione o arquivo denominado thedrip.png. Clique uma vez no lado inferior direito do gráfico de faixa marrom para inserir a imagem em seu tamanho original.

  6. Use a ferramenta Seleção para reposicionar a imagem de gotejamento, de modo que se alinhe com a faixa marrom e o café pareça gotejar no lado direito.

    O conteúdo do cabeçalho, como é exibido após a adição do logotipo e do plano de fundo para a navegação do site.
    O conteúdo do cabeçalho, como é exibido após a adição do logotipo e do plano de fundo para a navegação do site.

    Você pode verificar o exemplo de site no ar para ver o posicionamento correto do logotipo e a navegação superior.

    Na próxima seção, você aprenderá como adicionar widgets seguindo uma breve visão geral de como trabalhar com contêineres de widget.

Usar rodapés adesivos

A opção Rodapé adesivo permite que você fixe um elemento de Rodapé em uma página da Web. O Rodapé adesivo foi desenvolvido especialmente para visitantes com monitores maiores. Ativar a opção Rodapé adesivo faz com que o rodapé permaneça no local desejado, mesmo se a janela do navegador for significativamente maior do que o design da página da Web.

A opção Rodapé adesivo é fornecida na caixa de diálogo Novo site (Arquivo > Novo site) ao criar um site no Muse. Você também pode acessar o Rodapé adesivo nas caixas de diálogo Propriedades da página (Página > Propriedades da página) e Propriedades do site (Arquivo > Propriedades do site)

A opção Rodapé adesivo está ativada por padrão. De modo geral, é melhor usar o recurso Rodapés adesivos ao criar sites. No entanto, se você observar que o tamanho das páginas exibe muito mais do que o desejado (pois um site tem menos conteúdo e as páginas são bem curtas), sempre poderá desativá-las desmarcando a caixa de seleção na caixa de diálogo Propriedades da página.

Entretanto, caso deseje desativá-las para o site inteiro, poderá desmarcar a opção na caixa de diálogo Propriedades do site.

Logotipo da Adobe

Fazer logon em sua conta