Criar website no Adobe Muse

COMO CRIAR UM WEBSITE NO MUSE CC?

O website final ficará com este aspeto:

Vamos criar um website responsivo sem utilizar código. Iremos utilizar pontos de quebra para definir o tamanho dos diferentes ecrãs e a forma como o conteúdo é apresentado.

O projeto final ficará com este aspeto para mobile:

1 – CRIAR O PLANO DO WEBSITE:

Abrimos o Arquivo | Novo site e definimos as opções utilizando o Largura de Fluidez e colocamos a largura máxima da página para os 1200 px.

Estamos no modo planejar e vamos criar 2 novas páginas pressionando no sinal +.

2 – CRIAR PÁGINAS-MESTRE:

Entramos no modo de Design da página-mestre e vamos carregar os conteúdos.
nos Estilos de gráfico e Estilos de parágrafo para ficarem ativos no painel.

Copiar e colar o link http://adobe.ly/28J7zoO no navegador para aceder e salvar na biblioteca da Creative Cloud. É necessário ter um adobe ID para salvar.

Abrimos os painéis Estilo de Parágrafo e de Gráfico e na Biblioteca CC arrastamos o”_pidgeon_styles” para o palco.

Podemos verificar que os painéis de Estilo de Parágrafo e de Gráfico encontram-se preenchidos com os estilos que importámos da biblioteca.

3 – CRIAR RODAPÉ:

Criamos um retângulo preto no rodapé e ajustamos a largura ao do navegador.

Pesquisamos na biblioteca por “footer” e arrastamos os 4 gráficos para o palco.

Nos logos social media vamos colocar o estado rollover.

4 – CRIAR CABEÇALHO:

Desenhar um retângulo laranja e com uma pesquisa na biblioteca por “header”, adicionamos o logo e o botão.

Copiamos o item de menu no rodapé e colamos no cabeçalho. Para eliminar o link de “contatos” no cabeçalho vamos a Planejar e pressionamos em cima da página com o Ctrl e escolhemos a opção de Excluir página a partir dos menus.

Criamos o link no botão para direcionar para a página de contatos.

5 – ADICIONAR ELEMENTOS RESPONSIVOS À MASTER PAGE:

Para colocarmos os elementos da página mestre de forma responsiva vamos adicionar o Pino para os localizar e ajustar as larguras de cada objeto.

Agora vamos adicionar os pontos de quebra para ajustar o layout para visualização tablet. O site tem tamanho máximo de 1200px mas quando se reduz o tamanho da largura devemos reajustar os elementos. Adicionamos um ponto de quebra nos 950px pressionando no sinal +.

                          


Para mobile inserimos um ponto de quebra nos 480px, escondemos e alteramos os elementos para adicionarmos o menu hamburger “mobile_menu”.

O menu acordeão escondemos nos outros pontos de quebra para apenas aparecer no layout mobile.

Alteramos as camadas e movemos os objetos para as camadas correspondentes de forma a organizar o projeto.

6 – FAZER A HOME PAGE E ADICIONAR BREAKPOINT NO CONTEÚDO:

Com a camada “conteúdo” selecionada acedemos às bibliotecas CC e vamos pesquisar por “page” e inserimos a home_page.

Transportamos os pontos de quebra da página-mestre para a página de conteúdos e ajustamos os elementos.
                         

Para além de arranjar os elementos podemos aumentar o tamanho do texto para o layout de mobile.

7 – PUBLICAR O WEBSITE:

No final podemos carregar diretamente o site para um alojamento externo, publicar no Catalyst ou exportar tudo como HTML.  

CONCLUSÃO:

Podemos facilmente criar ou modificar um website responsivo neste programa. A facilidade de utilização por ser intuitivo facilita a inserção dos conteúdos até à publicação. Outra vantagem, é a utilização das bibliotecas que organizam os conteúdos desenvolvidos em outros programas.