Introdução ao Adobe Muse. Entenda os arquivos .muse, saiba como configurar as propriedades da página, adicionar favicons e muito mais.

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.

Introdução ao Adobe Muse

Após o login, a área de trabalho do Adobe Muse será iniciada. Você pode exibir a tela de boas-vindas do Adobe Muse. Execute uma das seguintes ações:

  • Clique em Criar novo para criar um novo site.
  • Clique em Abrir e navegue até um arquivo .muse existente em seu computador.
Tela Boas-vindas no Adobe Muse
Use a tela de boas-vindas para criar um novo site.

Durante a criação de um novo site, a caixa de diálogo Novo site é exibida. Selecione Largura fluida para permitir o layout responsivo ou selecione Largura fixa para escolher um layout alternativo. Contém campos que permitem definir a largura máxima da página, as colunas e o valor da medianiz.

A caixa de diálogo Novo site cria um novo site.
Selecione Arquivo > Novo site para criar um novo site.

Clique em Configurações avançadas para definir valores de dimensões, margens, colunas e preenchimento do site (numericamente, em pixels). Você também pode escolher a resolução e o idioma nesta janela.

Você sempre poderá atualizar essas configurações depois escolhendo Arquivo > Propriedades de site.

A caixa de diálogo Propriedades do site define as propriedades do site.
Defina as propriedades do site na caixa de diálogo Novo site.

Clique em OK para fechar a caixa de diálogo quando terminar.

Por padrão, o modo de exibição Plano é aberto com dois itens já criados. A página inicial no canto superior esquerdo é a página a ser carregada primeiro quando um usuário visitar o site ao vivo. A página-mestre A abaixo é como um modelo. Coloque os itens na página-mestre A que deseja exibir nas páginas do site. Dessa forma, você só terá que atualizar os elementos comuns do site em um local central.

NewWebsite
O Adobe Muse gera automaticamente uma página inicial e uma página-mestre.

Na parte superior, há quatro links que indicam as seções diferentes da interface: Plano, Design e Publicar.

Para saber mais sobre o uso da interface e a criação de um site com o Adobe Muse, consulte a Introdução ao Adobe Muse e Criar seu primeiro site com o Adobe Muse.

Entendendo os arquivos .muse

Ao criar sites em outros programas, como o Dreamweaver, você criará uma pasta que contém subpastas e arquivos com todo o conteúdo do site no seu computador. Talvez seja complicado gerenciar um conjunto inteiro de elementos e garantir que não haja links interrompidos no site.

Ao criar um novo site no Adobe Muse e escolher Arquivo > Salvar, crie um único arquivo .muse. Isso é semelhante à criação de um arquivo PSD no Photoshop, que pode conter qualquer número de camadas, gráficos e ativos vinculados. Esse arquivo .muse exclusivo é o único arquivo de que você precisará para criar um site, pois contém todas as imagens, links, código e arquivos de site. Se quiser trabalhar com outra pessoa para criar o site, você poderá enviar ao seu colega uma cópia do arquivo .muse criado, para que ele possa abri-lo, alterá-lo e publicar as alterações adicionadas.

Em geral, é melhor permitir que somente uma pessoa trabalhe no arquivo .muse de cada vez. Depois de terminar de adicionar o conteúdo ao site, você poderá publicá-lo e enviar aos seus colegas o arquivo .muse para que eles possam editá-lo para adicionar mais conteúdo. Quando terminarem, eles poderão enviar o arquivo .muse atualizado (incluindo as alterações) de volta a você. Dessa forma, você terá certeza de que não substituirá o trabalho dos outros.

Como alternativa, você poderá criar um arquivo .muse e publicar um site temporário. Em seguida, compartilhe o arquivo .muse com seus colegas. Eles poderão abri-lo, escolher Arquivo > Salvar como e fazer alterações na cópia que tiverem, enquanto você continua trabalhando na sua cópia, sabendo que publicarão seus próprios sites novos temporários. Entretanto, se você usar esse fluxo de trabalho, as duas iterações do site ficarão fora de sincronização: a versão do arquivo .muse não será atualizada para conter as alterações de seus colegas e vice-versa.

Sempre que você quiser fazer alterações importantes em um site existente, é uma prática recomendada abrir o arquivo .muse e escolher Arquivo > Salvar como. Crie um novo arquivo .muse com um nome de arquivo ligeiramente diferente e mantenha todos os arquivos .muse em uma única pasta no computador. Assim, se o cliente preferir a versão original do arquivo, sempre será possível abrir a versão anterior do arquivo .muse com um design antigo e publicá-lo novamente, para reverter o site ao seu estado anterior.

Também é uma prática recomendada salvar o arquivo .muse com frequência. Se o Adobe Muse travar, a versão restaurada do arquivo .muse com as edições recentes será apresentada normalmente quando você iniciar o Adobe Muse de novo. Se isso ocorrer, salve a versão restaurada do arquivo .muse imediatamente e comece a trabalhar nele outra vez. Não se esqueça de salvar os arquivos .muse criados em um local seguro e fazer backup deles, pois cada arquivo contém um site completo. Se você perder o arquivo .muse e não tiver uma cópia de backup, não poderá recriar um arquivo .muse fazendo download de arquivos de site a serem hospedados no servidor.

Muitos designers da Web gostam de salvar seus arquivos .muse com nomes descritivos, como my_site_v1.muse e my_site_v2.muse. Você também pode adicionar uma data ao nome do arquivo .muse para identificar facilmente que pertence a uma versão anterior, como my_site_2012-4-13.muse e my_site_2012-4-30.muse. Você poderá nomear os arquivos da maneira que achar mais útil.

Definir propriedades ao criar um novo site no Adobe Muse

Siga essas etapas para criar um novo site e definir suas propriedades:

  1. Na tela de Boas-vindas, escolha Criar novo > Site. Clique em Largura fluida para obter um layout responsivo ou Largura fixa para o layout alternativo.

  2. Na caixa de diálogo Novo site que é exibida, defina a largura da página para 950 e a altura mínima para 800. Defina Colunas para 3 e Medianiz para 20. Na área Margens, defina os quatro valores para 50. Defina os valores de preenchimento para 36.

    Defina os atributos do site na caixa de diálogo Propriedades do site.
    Defina os atributos do site digitando os valores diretamente nos campos ou clicando nos botões de seta para cada ajuste.

    Observação:

    Se estiver projetando seu site para Telefones e Tablets, a opção "Redirecionar a partir do desktop" permitirá que você ative/desative o redirecionamento para layouts móveis. Esse recurso é útil para um modelo que não está pronto e não deve ser redirecionado ainda (em andamento). Observe que o layout continuará sendo exportado mesmo se a opção de redirecionamento estiver desativada. No entanto, os navegadores móveis não serão redirecionados para páginas móveis e os arquivos exportados não serão incluídos no sitemap.xml até que essa opção esteja ativada na caixa de diálogo Propriedades do site.

  3. Clique em OK para salvar suas configurações e fechar a caixa de diálogo.

  4. Escolha Arquivo > Propriedades do site. Clique no ícone de pasta próximo à Imagem do favicon. Navegue até a pasta de arquivos de amostra Kevins_Koffee_Kart e selecione o arquivo favicon.png. Clique em OK.

    fig_07
    Favicons são ícones que aparecem perto da URL do seu site na barra de endereços de um navegador.

  5. Escolha Arquivo > Salvar. Coloque um nome exclusivo no seu novo site, como SeuNomeKoffeeKart.muse. (O site de exemplo deste tutorial é chamado de 01KevinsKoffeeKart.muse.)

Adicionar um favicon no painel Propriedades do site

Um favicon é uma pequena imagem quadrada que você cria, adiciona a um site e carrega para personalizar marcadores e URLs. Embora o comportamento varie dependendo do navegador em que estiver em execução, o favicon geralmente é exibido na barra de endereço do navegador, próximo à URL do site do local a ser exibido. Em muitos casos, ele também é exibido ao lado do nome de uma página quando ela está marcada ou em uma guia que contém uma página de site carregada. Use qualquer programa de edição de imagem, como Photoshop ou Illustrator, para criar um arquivo de imagem quadrado (de proporções uniformes) para usar como um arquivo favicon. Neste tutorial, um arquivo PNG é fornecido.

Siga estas etapas para adicionar um favicon ao site:

  1. Escolha Arquivo > Propriedades do site. O painel Propriedades do site é exibido.

  2. Na aba conteúdo, clique no ícone de pasta à direita da seção Favicon. Use a caixa de diálogo Escolher imagem do Favicon exibida para navegar para a pasta de arquivos de exemplo e selecione o arquivo chamado favicon.png.

    Favicon
    Defina o arquivo favicon.png nas Propriedades do site.

    Observação:

    Se você estiver usando Adobe Muse 2015.0.2 ou anterior, você pode adicionar um favicon para seu site clicando no guia do arquivo > propriedades > layout de site.

  3. Clique em Abrir para fechar a caixa de diálogo Escolher imagem de favicon e selecione o arquivo. Em seguida, clique em OK para fechar a caixa de diálogo Propriedades do site.

  4. Escolha Arquivo > Visualizar site no navegador. Observe a parte superior da janela do navegador para ver o favicon exibido na barra de endereços. Se o site estiver carregado em uma guia, você também poderá exibi-lo nela. E teste a marcação de páginas para saber como o ícone pode ser exibido ao lado do nome da página na lista de marcadores.

    Agora que o site foi concluído, a próxima etapa envolve carregar o site nos servidores de hospedagem do Adobe Business Catalyst.

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